add storage dialog

Author: joshunrau

apps/playground/src/components/Header/ActionsDropdown/ActionsDropdown.tsx

@@ -8,6 +8,7 @@ import { useAppStore } from '@/store';
 import { DeleteInstrumentDialog } from './DeleteInstrumentDialog';
 import { LoginDialog } from './LoginDialog';
 import { RestoreDefaultsDialog } from './RestoreDefaultsDialog';
+import { StorageUsageDialog } from './StorageUsageDialog';
 import { UploadBundleDialog } from './UploadBundleDialog';
 import { UserSettingsDialog } from './UserSettingsDialog';
 
@@ -17,6 +18,7 @@ export const ActionsDropdown = () => {
   const [showRestoreDefaultsDialog, setShowRestoreDefaultsDialog] = useState(false);
   const [showUploadBundleDialog, setShowUploadBundleDialog] = useState(false);
   const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const [showStorageUsageDialog, setShowStorageUsageDialog] = useState(false);
 
   const selectedInstrument = useAppStore((store) => store.selectedInstrument);
 
@@ -54,6 +56,11 @@ export const ActionsDropdown = () => {
               User Settings
             </button>
           </DropdownMenu.Item>
+          <DropdownMenu.Item asChild onSelect={() => setShowStorageUsageDialog(true)}>
+            <button className="w-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50" type="button">
+              Storage Usage
+            </button>
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item asChild onSelect={() => setShowDeleteInstrumentDialog(true)}>
             <button
@@ -86,6 +93,7 @@ export const ActionsDropdown = () => {
         }}
       />
       <LoginDialog isOpen={showLoginDialog} setIsOpen={setShowLoginDialog} />
+      <StorageUsageDialog isOpen={showStorageUsageDialog} setIsOpen={setShowStorageUsageDialog} />
     </React.Fragment>
   );
 };

apps/playground/src/components/Header/ActionsDropdown/StorageUsageDialog.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+
+import { formatByteSize } from '@douglasneuroinformatics/libjs';
+import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
+
+import { useAppStore } from '@/store';
+export type StorageUsageDialogProps = {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+};
+
+export const StorageUsageDialog = ({ isOpen, setIsOpen }: StorageUsageDialogProps) => {
+  const [storageEstimate, setStorageEstimate] = useState<null | StorageEstimate>(null);
+  const [updateKey, setUpdateKey] = useState(0);
+  const [message, setMessage] = useState<null | string>('Loading...');
+
+  const updateStorage = async () => {
+    setMessage('Loading...');
+    const [updated] = await Promise.all([
+      await navigator.storage.estimate(),
+      new Promise((resolve) => setTimeout(resolve, 500))
+    ]);
+    setStorageEstimate(updated);
+    setMessage(null);
+  };
+
+  useEffect(() => {
+    void updateStorage();
+  }, [isOpen, updateKey]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Storage Usage</Dialog.Title>
+          <Dialog.Description>
+            Check the details below to see how much storage your browser is using for instruments and how much space is
+            still available.
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          {message ? (
+            <p>{message}</p>
+          ) : (
+            <>
+              <p>Usage: {storageEstimate?.usage ? formatByteSize(storageEstimate.usage, true) : 'N/A'}</p>
+              <p>Quota: {storageEstimate?.quota ? formatByteSize(storageEstimate.quota, true) : 'N/A'} </p>
+            </>
+          )}
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button
+            variant="danger"
+            onClick={() => {
+              useAppStore.persist.clearStorage();
+              setMessage('Deleting...');
+              void new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {
+                setUpdateKey(updateKey + 1);
+              });
+            }}
+          >
+            Drop Database (Irreversible)
+          </Button>
+          <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+            Close
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+};