@rozenite/storage-plugin 2.1.0 → 2.2.0

package/src/ui/panel.tsx

@@ -3,17 +3,17 @@ 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 { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
 import { Database, Download, Edit3, Plus, RefreshCw, Trash2, Upload } from 'lucide-react';
 import type {
   StorageDiscoverStoragesResponseEvent,
@@ -48,7 +48,6 @@ 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) =>
@@ -79,14 +78,12 @@ function StoragePanelContent() {
   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' });
   const [importFlight, setImportFlight] = useState<ImportFlightState | null>(null);
-  const [alertState, setAlertState] = useState<AlertState | null>(null);
+  const confirm = useConfirmDialog();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const selectedTargetRef = useRef<StorageTarget | null>(null);
   const discoveryRequestIdRef = useRef(0);
@@ -262,8 +259,6 @@ function StoragePanelContent() {
     importPreviewAbortControllerRef.current = null;
     activeImportRequestIdRef.current = null;
     setExportState({ status: 'idle' });
-    setDeleteKey(null);
-    setShowPurgeDialog(false);
     setInteraction(null);
     setImportFlight(null);
   }, [selectedTarget]);
@@ -312,29 +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) {
@@ -350,12 +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();
@@ -386,7 +399,7 @@ function StoragePanelContent() {
       });
     } catch {
       if (!controller.signal.aborted && sameTarget(target, selectedTargetRef.current ?? target)) {
-        showAlert(
+        void showAlert(
           'Could not preview import',
           'Could not inspect the selected storage. Please try again.',
         );
@@ -462,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',
@@ -493,28 +510,28 @@ function StoragePanelContent() {
         enableSorting: false,
         cell: ({ row }) => (
           <div className="flex items-center gap-1" onClick={(event) => event.stopPropagation()}>
-            <Button
+            <IconButton
+              tone="neutral"
               variant="ghost"
-              size="icon"
               onClick={() => setInteraction({ key: row.original.key, mode: 'edit' })}
-              aria-label={`Edit value for ${row.original.key}`}
+              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 handleSortingChange: OnChangeFn<SortingState> = (updater) => {
@@ -551,7 +568,7 @@ function StoragePanelContent() {
   const selectedStorageViewId = selectedTarget ? getStorageViewId(selectedTarget) : '';
 
   return (
-    <PluginShell>
+    <>
       <PluginShell.Body>
         <Split direction="horizontal" autoSaveId="storage">
           <Split.Pane defaultSize={22} minSize={15} maxSize={40}>
@@ -567,8 +584,8 @@ function StoragePanelContent() {
                       <Sidebar.Item
                         key={item.viewId}
                         selected={item.viewId === selectedStorageViewId}
-                        adornment={<Database />}
-                        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,
@@ -594,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>
@@ -615,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>
@@ -627,7 +644,7 @@ 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>
@@ -640,7 +657,7 @@ function StoragePanelContent() {
                     title={
                       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>
@@ -656,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}
@@ -732,51 +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>
   );
 }

package/tsconfig.json

@@ -11,13 +11,7 @@
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "baseUrl": ".",
-    "paths": {
-      "@rozenite/agent-bridge": ["../agent-bridge/src/index.ts"],
-      "@rozenite/agent-shared": ["../agent-shared/src/index.ts"],
-      "@rozenite/plugin-bridge": ["../plugin-bridge/src/index.ts"],
-      "@rozenite/ui": ["../ui/src/index.ts"]
-    },
+    "customConditions": ["development"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
@@ -26,6 +20,9 @@
   "include": ["src/**/*", "react-native.ts", "sdk.ts", "rozenite.config.ts"],
   "exclude": ["node_modules", "dist", "build"],
   "references": [
+    {
+      "path": "../agent-bridge"
+    },
     {
       "path": "../plugin-bridge"
     },