chore: display shared vault file usage (#2399)

* chore: display shared vault file usage

* fix: specs

* fix: reshape filtering result

* fix: resolving invalid server items

* fix: get revisions specs

* fix: processing issue

* fix: tests

---------

Co-authored-by: Mo <mo@standardnotes.com>

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx

@@ -77,6 +77,14 @@ const Vaults = () => {
     })
   }, [application.sharedVaults, updateAllData])
 
+  useEffect(() => {
+    return application.sharedVaults.addEventObserver((event) => {
+      if (event === SharedVaultServiceEvent.SharedVaultFileStorageUsageChanged) {
+        void updateAllData()
+      }
+    })
+  }, [application.sharedVaults, updateAllData])
+
   useEffect(() => {
     return application.vaultUsers.addEventObserver((event) => {
       if (event === VaultUserServiceEvent.UsersChanged) {

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx

@@ -1,12 +1,13 @@
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { ButtonType, VaultListingInterface, isClientDisplayableError } from '@standardnotes/snjs'
+import { useCallback, useState } from 'react'
+
 import { useApplication } from '@/Components/ApplicationProvider'
 import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
-import { ButtonType, VaultListingInterface, isClientDisplayableError } from '@standardnotes/snjs'
-import { useCallback, useState } from 'react'
 import ContactInviteModal from '../Invites/ContactInviteModal'
 import EditVaultModal from './VaultModal/EditVaultModal'
-
 type Props = {
   vault: VaultListingInterface
 }
@@ -123,6 +124,10 @@ const VaultItem = ({ vault }: Props) => {
           )}
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
 
+          <span className="mr-auto overflow-hidden text-ellipsis text-sm">
+            File storage used: {formatSizeToReadableString(vault.sharing?.fileBytesUsed ?? 0)}
+          </span>
+
           <div className="mt-2 flex w-full">
             <Button label="Edit" className="mr-3 text-xs" onClick={openEditModal} />
             {isAdmin && <Button colorStyle="danger" label="Delete" className="mr-3 text-xs" onClick={deleteVault} />}