feat: display files quota in preferences (#994)

app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -0,0 +1,37 @@
+import { AppState } from '@/UIModels/AppState'
+import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
+
+type Props = {
+  appState: AppState
+}
+
+export const FilesSection: FunctionComponent<Props> = observer(({ appState }) => {
+  if (!appState.features.isEntitledToFiles) {
+    return null
+  }
+
+  const filesQuotaUsed = appState.files.filesQuotaUsed
+  const filesQuotaTotal = appState.files.filesQuotaTotal
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Files</Title>
+        <Subtitle>Storage Quota</Subtitle>
+        <div className="mt-1 mb-1">
+          <span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
+          <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
+        </div>
+        <progress
+          className="w-full progress-bar"
+          aria-label="Files storage used"
+          value={appState.files.filesQuotaUsed}
+          max={filesQuotaTotal}
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})

app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx

@@ -7,6 +7,7 @@ import { Credentials } from './Credentials'
 import { Sync } from './Sync'
 import { Subscription } from './Subscription/Subscription'
 import { SignOutWrapper } from './SignOutView'
+import { FilesSection } from './Files'
 
 type Props = {
   application: WebApplication
@@ -24,6 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
+    <FilesSection appState={appState} />
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))