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>
+  )
+})