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

app/assets/javascripts/UIModels/AppState/AppState.ts

@@ -110,7 +110,7 @@ export class AppState {
     this.subscription = new SubscriptionState(application, this.appEventObserverRemovers)
     this.purchaseFlow = new PurchaseFlowState(application)
     this.notesView = new NotesViewState(application, this, this.appEventObserverRemovers)
-    this.files = new FilesState(application)
+    this.files = new FilesState(application, this.appEventObserverRemovers)
     this.addAppEventObserver()
     this.streamNotesAndTags()
     this.onVisibilityChange = () => {

app/assets/javascripts/UIModels/AppState/FilesState.ts

@@ -7,13 +7,61 @@ import {
   ClassicFileSaver,
   parseFileName,
 } from '@standardnotes/filepicker'
-import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
+import {
+  ApplicationEvent,
+  ClientDisplayableError,
+  ContentType,
+  SNFile,
+  SubscriptionSettingName,
+} from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
+import { action, makeObservable, observable } from 'mobx'
 
 import { WebApplication } from '../Application'
 
 export class FilesState {
-  constructor(private application: WebApplication) {}
+  filesQuotaUsed: number
+  filesQuotaTotal: number
+
+  constructor(private application: WebApplication, appObservers: (() => void)[]) {
+    this.filesQuotaUsed = 0
+    this.filesQuotaTotal = 0
+
+    makeObservable(this, {
+      filesQuotaUsed: observable,
+      filesQuotaTotal: observable,
+      getFilesQuota: action,
+    })
+
+    appObservers.push(
+      application.addEventObserver(async (event) => {
+        switch (event) {
+          case ApplicationEvent.Launched:
+          case ApplicationEvent.SignedIn:
+            this.getFilesQuota().catch(console.error)
+        }
+      }),
+      application.streamItems(ContentType.File, () => {
+        this.getFilesQuota().catch(console.error)
+      }),
+    )
+  }
+
+  public async getFilesQuota() {
+    const filesQuotaUsed = await this.application.settings.getSubscriptionSetting(
+      SubscriptionSettingName.FileUploadBytesUsed,
+    )
+    const filesQuotaTotal = await this.application.settings.getSubscriptionSetting(
+      SubscriptionSettingName.FileUploadBytesLimit,
+    )
+
+    if (filesQuotaUsed) {
+      this.filesQuotaUsed = parseFloat(filesQuotaUsed)
+    }
+    if (filesQuotaTotal) {
+      this.filesQuotaTotal = parseFloat(filesQuotaTotal)
+    }
+  }
 
   public async downloadFile(file: SNFile): Promise<void> {
     let downloadingToastId = ''