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/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}`