@rozenite/storage-plugin 1.13.0 → 2.1.0

package/src/ui/query-client.tsx

@@ -0,0 +1,23 @@
+import { QueryClient, QueryClientProvider, type QueryClientConfig } from '@tanstack/react-query';
+import { type ReactNode, useEffect, useState } from 'react';
+
+const storageQueryClientConfig: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      gcTime: 0,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+};
+
+export const createStorageQueryClient = () => new QueryClient(storageQueryClientConfig);
+
+export const StorageQueryClientProvider = ({ children }: { children: ReactNode }) => {
+  const [queryClient] = useState(createStorageQueryClient);
+
+  useEffect(() => () => queryClient.clear(), [queryClient]);
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};

package/src/ui/storage-groups.ts

@@ -0,0 +1,66 @@
+import type { StorageTarget } from '../shared/types';
+
+export type StorageSnapshotEntry = {
+  target: StorageTarget;
+  adapterName: string;
+  storageName: string;
+  entryCount: number;
+};
+
+export type StorageSidebarItem = {
+  viewId: string;
+  storageName: string;
+  entryCount: number;
+};
+
+export type StorageSidebarGroup = {
+  adapterId: string;
+  adapterName: string;
+  items: StorageSidebarItem[];
+};
+
+/**
+ * Groups storage snapshots by `target.adapterId` for the sidebar, preserving
+ * the order in which each adapter and storage first appeared.
+ */
+export const buildStorageSidebarGroups = (
+  snapshots: Map<string, StorageSnapshotEntry>,
+): StorageSidebarGroup[] => {
+  const groups = new Map<string, StorageSidebarGroup>();
+
+  for (const [viewId, snapshot] of snapshots) {
+    const { adapterId } = snapshot.target;
+    let group = groups.get(adapterId);
+
+    if (!group) {
+      group = { adapterId, adapterName: snapshot.adapterName, items: [] };
+      groups.set(adapterId, group);
+    }
+
+    group.items.push({
+      viewId,
+      storageName: snapshot.storageName,
+      entryCount: snapshot.entryCount,
+    });
+  }
+
+  return [...groups.values()];
+};
+
+/**
+ * Splits a storage view id (`${adapterId}:${storageId}`) back into its
+ * target, using the first `:` as the separator since `storageId` may itself
+ * contain colons. Returns `null` for a malformed id.
+ */
+export const parseStorageViewId = (viewId: string): StorageTarget | null => {
+  const separatorIndex = viewId.indexOf(':');
+
+  if (separatorIndex < 0) {
+    return null;
+  }
+
+  return {
+    adapterId: viewId.slice(0, separatorIndex),
+    storageId: viewId.slice(separatorIndex + 1),
+  };
+};

package/src/ui/type-conversion.ts

@@ -15,8 +15,7 @@ const tryDecode = (bytes: readonly number[]): string => {
   }
 };
 
-const encode = (value: string): number[] =>
-  Array.from(textEncoder.encode(value));
+const encode = (value: string): number[] => Array.from(textEncoder.encode(value));
 
 // Convert a value between storage primitive types for the editor
 // switcher. The headline transition is `string` ↔ `buffer`, which
@@ -89,9 +88,7 @@ export const convertValue = (
 
 // Zero value for a type — used when seeding the add-entry dialog and
 // when conversion has no meaningful starting point.
-export const defaultValueForType = (
-  type: StorageEntryType,
-): StorageEntryValue => {
+export const defaultValueForType = (type: StorageEntryType): StorageEntryValue => {
   switch (type) {
     case 'string':
       return '';

package/src/ui/typed-value-editor.tsx

@@ -1,3 +1,4 @@
+import { Input, Select } from '@rozenite/ui';
 import type { StorageEntryType, StorageEntryValue } from '../shared/types';
 import { BinaryValueEditor } from './binary-value-editor';
 import { EditorSwitcher } from './editor-switcher';
@@ -41,12 +42,8 @@ export const TypedValueEditor = ({
   };
 
   return (
-    <div className="space-y-2">
-      <EditorSwitcher
-        supportedTypes={supportedTypes}
-        value={type}
-        onChange={handleTypeChange}
-      />
+    <div className="flex flex-col gap-2">
+      <EditorSwitcher supportedTypes={supportedTypes} value={type} onChange={handleTypeChange} />
 
       {type === 'buffer' ? (
         <BinaryValueEditor
@@ -54,20 +51,20 @@ export const TypedValueEditor = ({
           onChange={(bytes) => onChange('buffer', bytes)}
         />
       ) : type === 'boolean' ? (
-        <select
-          id={inputId}
+        <Select
           value={String(value ?? false)}
-          onChange={(event) =>
-            onChange('boolean', event.target.value === 'true')
-          }
-          className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          autoFocus={autoFocus}
+          onValueChange={(next) => onChange('boolean', next === 'true')}
         >
-          <option value="true">true</option>
-          <option value="false">false</option>
-        </select>
+          <Select.Trigger id={inputId} autoFocus={autoFocus}>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="true">true</Select.Item>
+            <Select.Item value="false">false</Select.Item>
+          </Select.Content>
+        </Select>
       ) : type === 'number' ? (
-        <input
+        <Input
           id={inputId}
           type="number"
           value={String(value ?? '')}
@@ -77,17 +74,15 @@ export const TypedValueEditor = ({
             onChange('number', Number.isNaN(parsed) ? 0 : parsed);
           }}
           placeholder="Enter number value"
-          className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
           autoFocus={autoFocus}
         />
       ) : (
-        <input
+        <Input
           id={inputId}
           type="text"
           value={String(value ?? '')}
           onChange={(event) => onChange('string', event.target.value)}
           placeholder="Enter string value"
-          className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
           autoFocus={autoFocus}
         />
       )}

package/src/ui/use-storage-entries.ts

@@ -0,0 +1,192 @@
+import {
+  keepPreviousData,
+  type InfiniteData,
+  type QueryClient,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import type { RozeniteDevToolsRequestClient } from '@rozenite/plugin-bridge';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { StorageEventMap, StorageListEntryPreviewsResponseEvent } from '../shared/messaging';
+import type { StorageEntryPreview, StorageTarget } from '../shared/types';
+
+export const STORAGE_ENTRY_PREVIEW_PAGE_SIZE = 100;
+export const STORAGE_ENTRY_PREVIEW_MAX_PAGES = 5;
+
+type StorageRequestClient = Pick<RozeniteDevToolsRequestClient<StorageEventMap>, 'request'>;
+
+export const normalizeStorageKeySearch = (search: string) => search.trim().toLowerCase();
+
+export const storageEntryPreviewQueryKeyPrefix = (target: StorageTarget) =>
+  ['storage-entry-previews', target.adapterId, target.storageId] as const;
+
+export const storageEntryPreviewQueryKey = (
+  target: StorageTarget,
+  search: string,
+  keySortDirection: 'ascending' | 'descending',
+) =>
+  [
+    ...storageEntryPreviewQueryKeyPrefix(target),
+    normalizeStorageKeySearch(search),
+    keySortDirection,
+  ] as const;
+
+const storageFullEntryQueryKeyPrefix = (target: StorageTarget) =>
+  ['storage-full-entry', target.adapterId, target.storageId] as const;
+
+const storageFullEntryQueryKey = (target: StorageTarget, key: string) =>
+  [...storageFullEntryQueryKeyPrefix(target), key] as const;
+
+export const resetSelectedStorageQueries = async (
+  queryClient: QueryClient,
+  target: StorageTarget,
+) => {
+  const previewQueryKey = storageEntryPreviewQueryKeyPrefix(target);
+  const fullEntryQueryKey = storageFullEntryQueryKeyPrefix(target);
+
+  await queryClient.cancelQueries({ queryKey: previewQueryKey });
+  await queryClient.cancelQueries({ queryKey: fullEntryQueryKey });
+  queryClient.removeQueries({ queryKey: fullEntryQueryKey });
+  await queryClient.resetQueries({ queryKey: previewQueryKey });
+};
+
+export const invalidateStorageEntryPreviews = async (
+  queryClient: QueryClient,
+  target: StorageTarget,
+) =>
+  queryClient.invalidateQueries({
+    queryKey: storageEntryPreviewQueryKeyPrefix(target),
+  });
+
+export const dropStorageFullEntries = async (
+  queryClient: QueryClient,
+  target: StorageTarget,
+  key?: string,
+) => {
+  const queryKey =
+    key == null ? storageFullEntryQueryKeyPrefix(target) : storageFullEntryQueryKey(target, key);
+
+  await queryClient.cancelQueries({ queryKey, exact: key != null });
+  queryClient.removeQueries({ queryKey, exact: key != null });
+};
+
+export type UseStorageEntryPreviewsOptions = {
+  client: StorageRequestClient | null | undefined;
+  target: StorageTarget | null | undefined;
+  search: string;
+  keySortDirection: 'ascending' | 'descending';
+  pageSize?: number;
+  maxPages?: number;
+};
+
+export const useStorageEntryPreviews = ({
+  client,
+  target,
+  search,
+  keySortDirection,
+  pageSize = STORAGE_ENTRY_PREVIEW_PAGE_SIZE,
+  maxPages = STORAGE_ENTRY_PREVIEW_MAX_PAGES,
+}: UseStorageEntryPreviewsOptions) => {
+  const normalizedSearch = normalizeStorageKeySearch(search);
+  const queryKey = useMemo(
+    () =>
+      target
+        ? storageEntryPreviewQueryKey(target, normalizedSearch, keySortDirection)
+        : (['storage-entry-previews', 'no-target'] as const),
+    [keySortDirection, normalizedSearch, target?.adapterId, target?.storageId],
+  );
+
+  return useInfiniteQuery({
+    queryKey,
+    enabled: client != null && target != null,
+    initialPageParam: undefined as string | undefined,
+    maxPages: Math.max(1, maxPages),
+    placeholderData: keepPreviousData,
+    queryFn: ({ pageParam, signal }) => {
+      if (!client || !target) {
+        throw new Error('A storage target and request client are required.');
+      }
+
+      return client.request({
+        requestType: 'list-entry-previews',
+        responseType: 'entry-previews',
+        errorType: 'storage-request-error',
+        payload: {
+          type: 'list-entry-previews',
+          target,
+          search: normalizedSearch || undefined,
+          keySortDirection,
+          cursor: pageParam,
+          limit: pageSize,
+        },
+        signal,
+      });
+    },
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    getPreviousPageParam: (firstPage) => firstPage.previousCursor,
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const flattenStorageEntryPreviewPages = (
+  data: InfiniteData<StorageListEntryPreviewsResponseEvent> | undefined,
+): StorageEntryPreview[] => data?.pages.flatMap((page) => page.items) ?? [];
+
+export type UseStorageFullEntryOptions = {
+  client: StorageRequestClient | null | undefined;
+  target: StorageTarget | null | undefined;
+  key: string | null | undefined;
+  enabled?: boolean;
+};
+
+export const useStorageFullEntry = ({
+  client,
+  target,
+  key,
+  enabled = true,
+}: UseStorageFullEntryOptions) => {
+  const queryClient = useQueryClient();
+  const queryKey = useMemo(
+    () =>
+      target && key != null
+        ? storageFullEntryQueryKey(target, key)
+        : (['storage-full-entry', 'no-entry'] as const),
+    [key, target?.adapterId, target?.storageId],
+  );
+
+  const result = useQuery({
+    queryKey,
+    enabled: enabled && client != null && target != null && key != null,
+    gcTime: 0,
+    queryFn: ({ signal }) => {
+      if (!client || !target || key == null) {
+        throw new Error('A storage target, key, and request client are required.');
+      }
+
+      return client.request({
+        requestType: 'get-entry',
+        responseType: 'entry',
+        errorType: 'storage-request-error',
+        payload: { type: 'get-entry', target, key },
+        signal,
+      });
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(
+    () => () => {
+      void queryClient.cancelQueries({ queryKey });
+      queryClient.removeQueries({ queryKey });
+    },
+    [queryClient, queryKey],
+  );
+
+  const reset = useCallback(() => {
+    void queryClient.cancelQueries({ queryKey });
+    queryClient.removeQueries({ queryKey });
+  }, [queryClient, queryKey]);
+
+  return { ...result, entry: result.data?.entry, reset };
+};

package/src/ui/utils.ts

@@ -15,10 +15,7 @@ export const downloadJson = (data: unknown, filename: string): void => {
 
 const sanitize = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, '-');
 
-export const buildExportFilename = (
-  target: StorageTarget,
-  now: Date = new Date(),
-): string => {
+export const buildExportFilename = (target: StorageTarget, now: Date = new Date()): string => {
   const yyyy = now.getFullYear().toString().padStart(4, '0');
   const mm = (now.getMonth() + 1).toString().padStart(2, '0');
   const dd = now.getDate().toString().padStart(2, '0');

package/tsconfig.json

@@ -15,7 +15,8 @@
     "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/plugin-bridge": ["../plugin-bridge/src/index.ts"],
+      "@rozenite/ui": ["../ui/src/index.ts"]
     },
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -33,6 +34,9 @@
     },
     {
       "path": "../vite-plugin"
+    },
+    {
+      "path": "../ui"
     }
   ]
 }