@rozenite/storage-plugin 2.0.0 → 2.2.0

package/src/ui/panel.tsx

@@ -1,32 +1,20 @@
 import { useQueryClient } from '@tanstack/react-query';
-import type {
-  ColumnDef,
-  OnChangeFn,
-  SortingState,
-} from '@tanstack/react-table';
+import type { ColumnDef, OnChangeFn, SortingState } from '@tanstack/react-table';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import {
   Badge,
-  Button,
-  ConfirmDialog,
   EmptyState,
+  IconButton,
   PluginShell,
   SearchField,
   Sidebar,
   Split,
   Toolbar,
+  useConfirmDialog,
   VirtualizedDataTable,
 } from '@rozenite/ui';
-import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
-import {
-  Database,
-  Download,
-  Edit3,
-  Plus,
-  RefreshCw,
-  Trash2,
-  Upload,
-} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
+import { Database, Download, Edit3, Plus, RefreshCw, Trash2, Upload } from 'lucide-react';
 import type {
   StorageDiscoverStoragesResponseEvent,
   StorageEventMap,
@@ -60,15 +48,12 @@ import {
 import { buildExportFilename, downloadJson } from './utils';
 import './globals.css';
 
-type AlertState = { title: string; message: string };
 type FullEntryInteraction = { key: string; mode: 'detail' | 'edit' };
 
 const sameTarget = (a: StorageTarget, b: StorageTarget) =>
   a.adapterId === b.adapterId && a.storageId === b.storageId;
 
-const getEntryTypeFromValue = (
-  value: StorageEntryValue,
-): StorageEntry['type'] => {
+const getEntryTypeFromValue = (value: StorageEntryValue): StorageEntry['type'] => {
   if (typeof value === 'string') return 'string';
   if (typeof value === 'number') return 'number';
   if (typeof value === 'boolean') return 'boolean';
@@ -88,29 +73,17 @@ const useDebouncedValue = (value: string, delay = 250) => {
 
 function StoragePanelContent() {
   const [descriptors, setDescriptors] = useState<StorageDescriptor[]>([]);
-  const [selectedTarget, setSelectedTarget] = useState<StorageTarget | null>(
-    null,
-  );
+  const [selectedTarget, setSelectedTarget] = useState<StorageTarget | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [keySortDirection, setKeySortDirection] = useState<
-    'ascending' | 'descending'
-  >('ascending');
-  const [interaction, setInteraction] = useState<FullEntryInteraction | null>(
-    null,
-  );
+  const [keySortDirection, setKeySortDirection] = useState<'ascending' | 'descending'>('ascending');
+  const [interaction, setInteraction] = useState<FullEntryInteraction | null>(null);
   const [showAddDialog, setShowAddDialog] = useState(false);
-  const [deleteKey, setDeleteKey] = useState<string | null>(null);
-  const [showPurgeDialog, setShowPurgeDialog] = useState(false);
   const [virtualListVersion, setVirtualListVersion] = useState(0);
   const [exportState, setExportState] = useState<
-    | { status: 'idle' }
-    | { status: 'loading' }
-    | { status: 'error'; message: string }
+    { status: 'idle' } | { status: 'loading' } | { status: 'error'; message: string }
   >({ status: 'idle' });
-  const [importFlight, setImportFlight] = useState<ImportFlightState | null>(
-    null,
-  );
-  const [alertState, setAlertState] = useState<AlertState | null>(null);
+  const [importFlight, setImportFlight] = useState<ImportFlightState | null>(null);
+  const confirm = useConfirmDialog();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const selectedTargetRef = useRef<StorageTarget | null>(null);
   const discoveryRequestIdRef = useRef(0);
@@ -127,8 +100,7 @@ function StoragePanelContent() {
   const queryClient = useQueryClient();
   const debouncedSearch = useDebouncedValue(searchTerm);
   const selectedDescriptor = descriptors.find(
-    (descriptor) =>
-      selectedTarget && sameTarget(descriptor.target, selectedTarget),
+    (descriptor) => selectedTarget && sameTarget(descriptor.target, selectedTarget),
   );
   const previews = useStorageEntryPreviews({
     client,
@@ -146,10 +118,7 @@ function StoragePanelContent() {
   const supportedTypes = selectedDescriptor?.capabilities.supportedTypes ?? [];
   const sidebarGroups = useMemo(() => {
     const storages = new Map(
-      descriptors.map((descriptor) => [
-        getStorageViewId(descriptor.target),
-        descriptor,
-      ]),
+      descriptors.map((descriptor) => [getStorageViewId(descriptor.target), descriptor]),
     );
     return buildStorageSidebarGroups(storages);
   }, [descriptors]);
@@ -169,17 +138,21 @@ function StoragePanelContent() {
   useEffect(() => {
     if (!client) return;
 
+    const requestDiscovery = () => {
+      discoveryRequestIdRef.current += 1;
+      client.send('discover-storages', {
+        type: 'discover-storages',
+        requestId: `discovery-${discoveryRequestIdRef.current}`,
+      });
+    };
+
     const descriptorsSubscription = client.onMessage(
       'storage-descriptors',
       (event: StorageDiscoverStoragesResponseEvent) => {
-        if (event.requestId !== `discovery-${discoveryRequestIdRef.current}`)
-          return;
+        if (event.requestId !== `discovery-${discoveryRequestIdRef.current}`) return;
         setDescriptors(event.storages);
         setSelectedTarget((previous) =>
-          previous &&
-          event.storages.some((descriptor) =>
-            sameTarget(descriptor.target, previous),
-          )
+          previous && event.storages.some((descriptor) => sameTarget(descriptor.target, previous))
             ? previous
             : (event.storages[0]?.target ?? null),
         );
@@ -234,23 +207,16 @@ function StoragePanelContent() {
       'storage-invalidated',
       (event: StorageInvalidatedEvent) => {
         void dropStorageFullEntries(queryClient, event.target, event.key);
-        if (event.operation === 'purge') {
-          setDescriptors((current) =>
-            current.map((descriptor) =>
-              sameTarget(descriptor.target, event.target)
-                ? { ...descriptor, entryCount: 0 }
-                : descriptor,
-            ),
-          );
-        }
-        if (
-          selectedTargetRef.current &&
-          sameTarget(event.target, selectedTargetRef.current)
-        ) {
+        setDescriptors((current) =>
+          current.map((descriptor) =>
+            sameTarget(descriptor.target, event.target)
+              ? { ...descriptor, entryCount: event.entryCount }
+              : descriptor,
+          ),
+        );
+        if (selectedTargetRef.current && sameTarget(event.target, selectedTargetRef.current)) {
           setInteraction((current) =>
-            current && (event.key == null || current.key === event.key)
-              ? null
-              : current,
+            current && (event.key == null || current.key === event.key) ? null : current,
           );
         }
 
@@ -259,10 +225,7 @@ function StoragePanelContent() {
         pendingInvalidationsRef.current.add(targetId);
         queueMicrotask(() => {
           pendingInvalidationsRef.current.delete(targetId);
-          if (
-            selectedTargetRef.current &&
-            sameTarget(event.target, selectedTargetRef.current)
-          ) {
+          if (selectedTargetRef.current && sameTarget(event.target, selectedTargetRef.current)) {
             setVirtualListVersion((version) => version + 1);
           }
           void invalidateStorageEntryPreviews(queryClient, event.target);
@@ -270,16 +233,21 @@ function StoragePanelContent() {
       },
     );
 
-    discoveryRequestIdRef.current += 1;
-    client.send('discover-storages', {
-      type: 'discover-storages',
-      requestId: `discovery-${discoveryRequestIdRef.current}`,
+    // The device announces itself once it is listening. It reconnects on every
+    // app reload, so discovery has to run again — the descriptors and cached
+    // entries the panel holds belong to the previous JS context.
+    const deviceReadySubscription = client.onMessage('device-ready', () => {
+      void queryClient.resetQueries();
+      requestDiscovery();
     });
+
+    requestDiscovery();
     return () => {
       descriptorsSubscription.remove();
       importProgressSubscription.remove();
       importResultSubscription.remove();
       invalidationSubscription.remove();
+      deviceReadySubscription.remove();
     };
   }, [client, queryClient]);
 
@@ -291,8 +259,6 @@ function StoragePanelContent() {
     importPreviewAbortControllerRef.current = null;
     activeImportRequestIdRef.current = null;
     setExportState({ status: 'idle' });
-    setDeleteKey(null);
-    setShowPurgeDialog(false);
     setInteraction(null);
     setImportFlight(null);
   }, [selectedTarget]);
@@ -310,11 +276,7 @@ function StoragePanelContent() {
   };
 
   const handleValueChange = (key: string, newValue: StorageEntryValue) => {
-    if (
-      !client ||
-      !selectedTarget ||
-      !supportedTypes.includes(getEntryTypeFromValue(newValue))
-    )
+    if (!client || !selectedTarget || !supportedTypes.includes(getEntryTypeFromValue(newValue)))
       return;
     const type = getEntryTypeFromValue(newValue);
     const entry =
@@ -345,30 +307,47 @@ function StoragePanelContent() {
     );
   };
 
-  const handleDeleteEntry = () => {
-    if (!client || !selectedTarget || !deleteKey) return;
-    const key = deleteKey;
-    setDeleteKey(null);
-    mutateSelectedStorage(() =>
-      client.send('delete-entry', {
-        type: 'delete-entry',
-        target: selectedTarget,
-        key,
-      }),
-    );
-  };
+  const handleDeleteClick = useCallback(
+    async (key: string) => {
+      if (!client || !selectedTarget) return;
+      const confirmed = await confirm({
+        title: 'Delete Entry',
+        description: `Are you sure you want to delete the entry "${key}"?`,
+        tone: 'danger',
+        confirmLabel: 'Delete',
+      });
+      if (!confirmed) return;
+      mutateSelectedStorage(() =>
+        client.send('delete-entry', {
+          type: 'delete-entry',
+          target: selectedTarget,
+          key,
+        }),
+      );
+    },
+    [client, selectedTarget, confirm],
+  );
 
-  const handlePurgeStorage = () => {
+  const handlePurgeClick = async () => {
     if (!client || !selectedTarget) return;
-    setShowPurgeDialog(false);
+    const confirmed = await confirm({
+      title: 'Purge Storage',
+      description: selectedDescriptor
+        ? `Are you sure you want to remove all entries from "${selectedDescriptor.storageName}"? This action cannot be undone.`
+        : 'Are you sure you want to remove all entries from this storage? This action cannot be undone.',
+      tone: 'danger',
+      confirmLabel: 'Purge',
+    });
+    if (!confirmed) return;
     client.send('purge-storage', {
       type: 'purge-storage',
       target: selectedTarget,
     });
   };
 
-  const showAlert = (title: string, message: string) =>
-    setAlertState({ title, message });
+  const showAlert = async (title: string, message: string) => {
+    await confirm({ variant: 'alert', title, description: message });
+  };
 
   const handleImportClick = () => {
     if (fileInputRef.current) {
@@ -384,18 +363,12 @@ function StoragePanelContent() {
     try {
       raw = JSON.parse(await file.text());
     } catch (error) {
-      showAlert(
-        'Could not read file',
-        error instanceof Error ? error.message : String(error),
-      );
+      void showAlert('Could not read file', error instanceof Error ? error.message : String(error));
       return;
     }
     const parsed = parseSnapshot(raw);
     if (!parsed.ok) {
-      showAlert(
-        'Invalid snapshot',
-        `${parsed.error.path}: ${parsed.error.message}`,
-      );
+      void showAlert('Invalid snapshot', `${parsed.error.path}: ${parsed.error.message}`);
       return;
     }
     importPreviewAbortControllerRef.current?.abort();
@@ -410,10 +383,7 @@ function StoragePanelContent() {
         payload: { type: 'preview-import', target, snapshot: parsed.snapshot },
         signal: controller.signal,
       });
-      if (
-        controller.signal.aborted ||
-        !sameTarget(target, selectedTargetRef.current ?? target)
-      )
+      if (controller.signal.aborted || !sameTarget(target, selectedTargetRef.current ?? target))
         return;
       setImportFlight({
         phase: 'preview',
@@ -428,11 +398,8 @@ function StoragePanelContent() {
         ),
       });
     } catch {
-      if (
-        !controller.signal.aborted &&
-        sameTarget(target, selectedTargetRef.current ?? target)
-      ) {
-        showAlert(
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
+        void showAlert(
           'Could not preview import',
           'Could not inspect the selected storage. Please try again.',
         );
@@ -476,26 +443,19 @@ function StoragePanelContent() {
         payload: { type: 'export-snapshot', target },
         signal: controller.signal,
       });
-      if (
-        !controller.signal.aborted &&
-        sameTarget(target, selectedTargetRef.current ?? target)
-      ) {
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
         downloadJson(response.snapshot, buildExportFilename(target));
         setExportState({ status: 'idle' });
       }
     } catch {
-      if (
-        !controller.signal.aborted &&
-        sameTarget(target, selectedTargetRef.current ?? target)
-      ) {
+      if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
         setExportState({
           status: 'error',
           message: 'Could not export the selected storage. Please try again.',
         });
       }
     } finally {
-      if (exportAbortControllerRef.current === controller)
-        exportAbortControllerRef.current = null;
+      if (exportAbortControllerRef.current === controller) exportAbortControllerRef.current = null;
     }
   };
 
@@ -507,9 +467,7 @@ function StoragePanelContent() {
         header: 'Key',
         enableSorting: true,
         cell: ({ row }) => (
-          <span className="font-mono text-sm text-foreground">
-            {row.original.key}
-          </span>
+          <span className="font-mono text-sm text-foreground">{row.original.key}</span>
         ),
       },
       {
@@ -517,7 +475,11 @@ function StoragePanelContent() {
         accessorKey: 'type',
         header: 'Type',
         enableSorting: false,
-        cell: ({ row }) => <Badge variant="outline">{row.original.type}</Badge>,
+        cell: ({ row }) => (
+          <Badge tone="neutral" variant="outline">
+            {row.original.type}
+          </Badge>
+        ),
       },
       {
         id: 'preview',
@@ -532,9 +494,7 @@ function StoragePanelContent() {
             <span
               className="ml-2 text-xs text-muted-foreground"
               title={
-                row.original.isTruncated
-                  ? `Full value size: ${row.original.valueSize}`
-                  : undefined
+                row.original.isTruncated ? `Full value size: ${row.original.valueSize}` : undefined
               }
             >
               {row.original.isTruncated
@@ -549,38 +509,31 @@ function StoragePanelContent() {
         header: '',
         enableSorting: false,
         cell: ({ row }) => (
-          <div
-            className="flex items-center gap-1"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <Button
+          <div className="flex items-center gap-1" onClick={(event) => event.stopPropagation()}>
+            <IconButton
+              tone="neutral"
               variant="ghost"
-              size="icon"
-              onClick={() =>
-                setInteraction({ key: row.original.key, mode: 'edit' })
-              }
-              aria-label={`Edit value for ${row.original.key}`}
+              onClick={() => setInteraction({ key: row.original.key, mode: 'edit' })}
+              label={`Edit value for ${row.original.key}`}
             >
               <Edit3 className="h-3.5 w-3.5" />
-            </Button>
-            <Button
+            </IconButton>
+            <IconButton
+              tone="neutral"
               variant="ghost"
-              size="icon"
-              className="text-muted-foreground hover:text-destructive"
-              onClick={() => setDeleteKey(row.original.key)}
-              aria-label={`Delete entry ${row.original.key}`}
+              className="text-muted-foreground hover:text-danger"
+              onClick={() => void handleDeleteClick(row.original.key)}
+              label={`Delete entry ${row.original.key}`}
             >
               <Trash2 className="h-3.5 w-3.5" />
-            </Button>
+            </IconButton>
           </div>
         ),
       },
     ],
-    [],
+    [handleDeleteClick],
   );
-  const sorting: SortingState = [
-    { id: 'key', desc: keySortDirection === 'descending' },
-  ];
+  const sorting: SortingState = [{ id: 'key', desc: keySortDirection === 'descending' }];
   const handleSortingChange: OnChangeFn<SortingState> = (updater) => {
     const next = typeof updater === 'function' ? updater(sorting) : updater;
     const keySort = next.find((item) => item.id === 'key');
@@ -612,12 +565,10 @@ function StoragePanelContent() {
       isFetchingPreviousPageRef.current = false;
     });
   };
-  const selectedStorageViewId = selectedTarget
-    ? getStorageViewId(selectedTarget)
-    : '';
+  const selectedStorageViewId = selectedTarget ? getStorageViewId(selectedTarget) : '';
 
   return (
-    <PluginShell>
+    <>
       <PluginShell.Body>
         <Split direction="horizontal" autoSaveId="storage">
           <Split.Pane defaultSize={22} minSize={15} maxSize={40}>
@@ -628,22 +579,16 @@ function StoragePanelContent() {
                 </div>
               ) : (
                 sidebarGroups.map((group) => (
-                  <Sidebar.Group
-                    key={group.adapterId}
-                    label={group.adapterName}
-                  >
+                  <Sidebar.Group key={group.adapterId} label={group.adapterName}>
                     {group.items.map((item) => (
                       <Sidebar.Item
                         key={item.viewId}
                         selected={item.viewId === selectedStorageViewId}
-                        trailing={
-                          <Badge variant="secondary">{item.entryCount}</Badge>
-                        }
+                        leading={<Database />}
+                        trailing={<Badge tone="neutral">{item.entryCount}</Badge>}
                         onClick={() => {
                           const descriptor = descriptors.find(
-                            (candidate) =>
-                              getStorageViewId(candidate.target) ===
-                              item.viewId,
+                            (candidate) => getStorageViewId(candidate.target) === item.viewId,
                           );
                           if (descriptor) setSelectedTarget(descriptor.target);
                         }}
@@ -666,16 +611,16 @@ function StoragePanelContent() {
                     disabled={!selectedDescriptor}
                     aria-label="Add entry"
                     title="Add entry"
-                    className="w-7 px-0"
+                    className="w-6 px-0"
                   >
                     <Plus className="h-3.5 w-3.5" />
                   </Toolbar.Button>
                   <Toolbar.Button
-                    onClick={() => setShowPurgeDialog(true)}
+                    onClick={() => void handlePurgeClick()}
                     disabled={!client || !selectedTarget || previews.isFetching}
                     aria-label="Purge storage"
                     title="Purge storage"
-                    className="w-7 px-0 text-muted-foreground hover:text-destructive"
+                    className="w-6 px-0 text-muted-foreground hover:text-danger"
                   >
                     <Trash2 className="h-3.5 w-3.5" />
                   </Toolbar.Button>
@@ -687,7 +632,7 @@ function StoragePanelContent() {
                     disabled={!selectedTarget || previews.isFetching}
                     aria-label="Refresh storage"
                     title="Refresh storage"
-                    className="w-7 px-0"
+                    className="w-6 px-0"
                   >
                     <RefreshCw className="h-3.5 w-3.5" />
                   </Toolbar.Button>
@@ -699,28 +644,20 @@ function StoragePanelContent() {
                     disabled={!selectedDescriptor}
                     aria-label="Import storage"
                     title="Import storage"
-                    className="w-7 px-0"
+                    className="w-6 px-0"
                   >
                     <Upload className="h-3.5 w-3.5" />
                   </Toolbar.Button>
                   <Toolbar.Button
                     onClick={handleExport}
-                    disabled={
-                      !client ||
-                      !selectedTarget ||
-                      exportState.status === 'loading'
-                    }
+                    disabled={!client || !selectedTarget || exportState.status === 'loading'}
                     aria-label={
-                      exportState.status === 'loading'
-                        ? 'Exporting storage'
-                        : 'Export storage'
+                      exportState.status === 'loading' ? 'Exporting storage' : 'Export storage'
                     }
                     title={
-                      exportState.status === 'loading'
-                        ? 'Exporting storage'
-                        : 'Export storage'
+                      exportState.status === 'loading' ? 'Exporting storage' : 'Export storage'
                     }
-                    className="w-7 px-0"
+                    className="w-6 px-0"
                   >
                     <Download className="h-3.5 w-3.5" />
                   </Toolbar.Button>
@@ -736,7 +673,7 @@ function StoragePanelContent() {
                   />
                 </div>
                 {exportState.status === 'error' ? (
-                  <span role="alert" className="text-xs text-destructive">
+                  <span role="alert" className="text-xs text-danger">
                     {exportState.message}
                   </span>
                 ) : null}
@@ -759,15 +696,11 @@ function StoragePanelContent() {
                     getRowTextValue={(entry) => entry.key}
                     loading={previews.isLoading}
                     emptyMessage={
-                      debouncedSearch
-                        ? 'No entries match your search.'
-                        : 'This storage is empty.'
+                      debouncedSearch ? 'No entries match your search.' : 'This storage is empty.'
                     }
                     manualSorting
                     onEndReached={fetchNextPage}
-                    onRowClick={(entry) =>
-                      setInteraction({ key: entry.key, mode: 'detail' })
-                    }
+                    onRowClick={(entry) => setInteraction({ key: entry.key, mode: 'detail' })}
                     onSortingChange={handleSortingChange}
                     onStartReached={fetchPreviousPage}
                     scrollClassName="h-full w-full overflow-auto"
@@ -799,9 +732,7 @@ function StoragePanelContent() {
           if (!open) closeInteraction();
         }}
         onEdit={() =>
-          setInteraction((current) =>
-            current ? { ...current, mode: 'edit' } : current,
-          )
+          setInteraction((current) => (current ? { ...current, mode: 'edit' } : current))
         }
         entry={fullEntry.entry ?? null}
       />
@@ -818,53 +749,16 @@ function StoragePanelContent() {
         onCancel={() => setImportFlight(null)}
         onClose={() => setImportFlight(null)}
       />
-      <ConfirmDialog
-        open={deleteKey !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteKey(null);
-        }}
-        variant="confirm"
-        destructive
-        title="Delete Entry"
-        description={
-          deleteKey
-            ? `Are you sure you want to delete the entry "${deleteKey}"?`
-            : undefined
-        }
-        confirmLabel="Delete"
-        onConfirm={handleDeleteEntry}
-      />
-      <ConfirmDialog
-        open={showPurgeDialog}
-        onOpenChange={setShowPurgeDialog}
-        variant="confirm"
-        destructive
-        title="Purge Storage"
-        description={
-          selectedDescriptor
-            ? `Are you sure you want to remove all entries from "${selectedDescriptor.storageName}"? This action cannot be undone.`
-            : 'Are you sure you want to remove all entries from this storage? This action cannot be undone.'
-        }
-        confirmLabel="Purge"
-        onConfirm={handlePurgeStorage}
-      />
-      <ConfirmDialog
-        open={alertState !== null}
-        onOpenChange={(open) => {
-          if (!open) setAlertState(null);
-        }}
-        variant="alert"
-        title={alertState?.title ?? ''}
-        description={alertState?.message}
-      />
-    </PluginShell>
+    </>
   );
 }
 
 export default function StoragePanel() {
   return (
     <StorageQueryClientProvider>
-      <StoragePanelContent />
+      <PluginShell>
+        <StoragePanelContent />
+      </PluginShell>
     </StorageQueryClientProvider>
   );
 }