feat: display number of files for 'Files' view (#2065)

* feat: display number of files for 'Files' view

* feat: include files count in Preferences > Security

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -2,6 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'
+import { useCallback } from 'react'
 
 type Props = {
   application: WebApplication
@@ -13,13 +14,13 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
   const shouldShowCTA = !featuresController.hasFolders
   const hasAccount = subscriptionContoller.hasAccount
 
-  const onClick = () => {
-    if (application.isNativeIOS()) {
+  const onClick = useCallback(() => {
+    if (hasAccount && application.isNativeIOS()) {
       application.showPremiumModal()
     } else {
       application.openPurchaseFlow()
     }
-  }
+  }, [application, hasAccount])
 
   return shouldShowCTA ? (
     <div className="flex h-full items-center px-2">

packages/web/src/javascripts/Components/Preferences/Panes/Security/Encryption.tsx

@@ -27,7 +27,7 @@ const Encryption: FunctionComponent<Props> = ({ viewControllerManager }) => {
         <Title>Encryption</Title>
         <Text>{encryptionStatusString}</Text>
 
-        {isEncryptionEnabled && <EncryptionEnabled viewControllerManager={viewControllerManager} />}
+        {isEncryptionEnabled && <EncryptionEnabled />}
       </PreferencesSegment>
     </PreferencesGroup>
   )

packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionEnabled.tsx

@@ -1,34 +1,37 @@
+import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
 import Icon from '@/Components/Icon/Icon'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
+import { ContentType, ItemCounter } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import EncryptionStatusItem from './EncryptionStatusItem'
 import { formatCount } from './formatCount'
 
-type Props = {
-  viewControllerManager: ViewControllerManager
-}
-
-const EncryptionEnabled: FunctionComponent<Props> = ({ viewControllerManager }) => {
-  const count = viewControllerManager.accountMenuController.structuredNotesAndTagsCount
+const EncryptionEnabled: FunctionComponent = () => {
+  const application = useApplication()
+  const itemCounter = new ItemCounter()
+  const count = itemCounter.countNotesAndTags(application.items.getItems([ContentType.Note, ContentType.Tag]))
+  const files = application.items.getItems([ContentType.File])
   const notes = formatCount(count.notes, 'notes')
   const tags = formatCount(count.tags, 'tags')
   const archived = formatCount(count.archived, 'archived notes')
   const deleted = formatCount(count.deleted, 'trashed notes')
+  const filesCount = formatCount(files.length, 'files')
 
   const noteIcon = <Icon type="rich-text" className="min-h-5 min-w-5" />
   const tagIcon = <Icon type="hashtag" className="min-h-5 min-w-5" />
   const archiveIcon = <Icon type="archive" className="min-h-5 min-w-5" />
   const trashIcon = <Icon type="trash" className="min-h-5 min-w-5" />
+  const filesIcon = <Icon type="folder" className="min-h-5 min-w-5" />
 
   return (
     <>
       <div className="flex flex-row flex-wrap items-start pt-1.5 md:pb-1">
         <EncryptionStatusItem status={notes} icon={noteIcon} />
         <div className="min-w-3" />
+        <EncryptionStatusItem status={filesCount} icon={filesIcon} />
+        <div className="min-w-3" />
         <EncryptionStatusItem status={tags} icon={tagIcon} />
-      </div>
-      <div className="flex flex-row flex-wrap items-start">
+        <div className="min-w-3" />
         <EncryptionStatusItem status={archived} icon={archiveIcon} />
         <div className="min-w-3" />
         <EncryptionStatusItem status={deleted} icon={trashIcon} />

packages/web/src/javascripts/Components/Preferences/Panes/Security/formatCount.ts

@@ -1 +1 @@
-export const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`
+export const formatCount = (count: number, itemType: string) => `${count} ${itemType}`

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -10,7 +10,6 @@ type Props = {
   application: WebApplication
   featureName?: FeatureName | string
   hasSubscription: boolean
-  hasAccount: boolean
   onClose: () => void
   showModal: boolean
   type: PremiumFeatureModalType
@@ -20,7 +19,6 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   application,
   featureName,
   hasSubscription,
-  hasAccount,
   onClose,
   showModal,
   type = PremiumFeatureModalType.UpgradePrompt,
@@ -40,7 +38,6 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
               featureName={featureName}
               ctaRef={ctaButtonRef}
               application={application}
-              hasAccount={hasAccount}
               hasSubscription={hasSubscription}
               onClose={onClose}
             />

packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx

@@ -10,26 +10,22 @@ export const UpgradePrompt = ({
   ctaRef,
   application,
   hasSubscription,
-  hasAccount,
   onClose,
 }: {
   featureName?: string
   ctaRef: React.RefObject<HTMLButtonElement>
   application: WebApplication
   hasSubscription: boolean
-  hasAccount: boolean
   onClose: () => void
 }) => {
   const handleClick = useCallback(() => {
     if (hasSubscription) {
       void openSubscriptionDashboard(application)
-    } else if (hasAccount) {
+    } else {
       void application.openPurchaseFlow()
-    } else if (window.plansUrl) {
-      window.location.assign(window.plansUrl)
     }
     onClose()
-  }, [application, hasSubscription, hasAccount, onClose])
+  }, [application, hasSubscription, onClose])
 
   return (
     <>

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -140,6 +140,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
           )}
           <div className={'count text-base lg:text-sm'}>
             {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
+            {view.uuid === SystemViewId.Files && tagsState.allFilesCount}
           </div>
         </div>