@rozenite/storage-plugin 1.4.0

package/src/ui/editable-table.tsx

@@ -0,0 +1,298 @@
+import { useMemo, useState } from 'react';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+  type SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Edit3, Loader2, Trash2 } from 'lucide-react';
+import type {
+  StorageEntry,
+  StorageEntryType,
+  StorageEntryValue,
+} from '../shared/types';
+import { ConfirmDialog } from './confirm-dialog';
+import { EditEntryDialog } from './edit-entry-dialog';
+
+export type EditableTableProps = {
+  data: StorageEntry[];
+  supportedTypes: StorageEntryType[];
+  onValueChange?: (key: string, newValue: StorageEntryValue) => void;
+  onDeleteEntry?: (key: string) => void;
+  onRowClick?: (entry: StorageEntry) => void;
+  loading?: boolean;
+};
+
+const columnHelper = createColumnHelper<StorageEntry>();
+
+export const EditableTable = ({
+  data,
+  supportedTypes,
+  onValueChange,
+  onDeleteEntry,
+  onRowClick,
+  loading = false,
+}: EditableTableProps) => {
+  const [editingEntry, setEditingEntry] = useState<StorageEntry | null>(null);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    isOpen: boolean;
+    entryKey: string;
+  }>({ isOpen: false, entryKey: '' });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const columns = useMemo<ColumnDef<StorageEntry, any>[]>(
+    () => [
+      columnHelper.accessor('key', {
+        header: 'Key',
+        enableSorting: true,
+        cell: ({ getValue }) => (
+          <div className="text-gray-300 font-mono text-sm">{getValue()}</div>
+        ),
+      }),
+      columnHelper.accessor('type', {
+        header: 'Type',
+        enableSorting: true,
+        cell: ({ getValue }) => {
+          const type = getValue() as StorageEntryType;
+          return (
+            <div className="flex items-center">
+              <span
+                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
+                  type
+                )}`}
+              >
+                {type}
+              </span>
+            </div>
+          );
+        },
+      }),
+      columnHelper.accessor('value', {
+        header: 'Value',
+        cell: ({ row }) => {
+          const entry = row.original;
+          return (
+            <div className="flex items-center justify-between group">
+              <div className="flex-1">{formatValue(entry)}</div>
+              <button
+                onClick={() => handleEdit(entry)}
+                className="opacity-0 group-hover:opacity-100 ml-2 p-1 text-gray-400 hover:text-blue-400 hover:bg-gray-800 rounded transition-all"
+                title="Edit value"
+                aria-label={`Edit value for ${entry.key}`}
+              >
+                <Edit3 className="h-3 w-3" />
+              </button>
+            </div>
+          );
+        },
+      }),
+      columnHelper.display({
+        id: 'actions',
+        header: 'Actions',
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => handleDelete(row.original.key)}
+              disabled={!onDeleteEntry}
+              className="p-1 text-gray-400 hover:text-red-400 hover:bg-gray-800 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              title="Delete entry"
+              aria-label={`Delete entry ${row.original.key}`}
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        ),
+      }),
+    ],
+    [onDeleteEntry]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const handleEdit = (entry: StorageEntry) => {
+    setEditingEntry(entry);
+    setShowEditDialog(true);
+  };
+
+  const handleEditEntry = (key: string, newValue: StorageEntryValue) => {
+    if (onValueChange) {
+      onValueChange(key, newValue);
+    }
+
+    setEditingEntry(null);
+    setShowEditDialog(false);
+  };
+
+  const handleCloseEditDialog = () => {
+    setEditingEntry(null);
+    setShowEditDialog(false);
+  };
+
+  const handleDelete = (key: string) => {
+    if (onDeleteEntry) {
+      setDeleteConfirm({ isOpen: true, entryKey: key });
+    }
+  };
+
+  const confirmDelete = () => {
+    if (onDeleteEntry && deleteConfirm.entryKey) {
+      onDeleteEntry(deleteConfirm.entryKey);
+    }
+
+    setDeleteConfirm({ isOpen: false, entryKey: '' });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full w-full">
+        <Loader2 className="h-8 w-8 text-blue-400 animate-spin mb-4" />
+        <p className="text-gray-400">Loading entries...</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <table className="w-full self-start">
+        <thead className="bg-gray-800 border-b border-gray-700 sticky top-0 z-10">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className={`text-left text-xs font-medium text-gray-400 px-3 py-2 ${
+                    header.column.getCanSort()
+                      ? 'cursor-pointer select-none hover:bg-gray-700'
+                      : ''
+                  }`}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                    {header.column.getCanSort() && (
+                      <span className="text-gray-500">
+                        {{
+                          asc: '↑',
+                          desc: '↓',
+                        }[header.column.getIsSorted() as string] ?? '↕'}
+                      </span>
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr
+              key={row.id}
+              className={`text-sm hover:bg-gray-800 border-b border-gray-800 ${
+                onRowClick ? 'cursor-pointer' : ''
+              }`}
+              onClick={(event) => {
+                const target = event.target as HTMLElement;
+                if (
+                  target.tagName === 'BUTTON' ||
+                  target.closest('button') ||
+                  target.tagName === 'INPUT' ||
+                  target.closest('input')
+                ) {
+                  return;
+                }
+
+                if (onRowClick) {
+                  onRowClick(row.original);
+                }
+              }}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} className="px-3 py-2">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <EditEntryDialog
+        isOpen={showEditDialog}
+        onClose={handleCloseEditDialog}
+        onEditEntry={handleEditEntry}
+        entry={editingEntry}
+        supportedTypes={supportedTypes}
+      />
+
+      <ConfirmDialog
+        isOpen={deleteConfirm.isOpen}
+        onClose={() => setDeleteConfirm({ isOpen: false, entryKey: '' })}
+        onConfirm={confirmDelete}
+        title="Delete Entry"
+        message={`Are you sure you want to delete the entry "${deleteConfirm.entryKey}"?`}
+        type="confirm"
+        confirmText="Delete"
+      />
+    </>
+  );
+};
+
+const getTypeColorClass = (type: StorageEntryType) => {
+  if (type === 'string') {
+    return 'bg-green-600';
+  }
+
+  if (type === 'number') {
+    return 'bg-blue-600';
+  }
+
+  if (type === 'boolean') {
+    return 'bg-yellow-600';
+  }
+
+  return 'bg-purple-600';
+};
+
+const formatValue = (entry: StorageEntry) => {
+  if (entry.type === 'string') {
+    return <span className="text-green-300 font-mono">"{entry.value}"</span>;
+  }
+
+  if (entry.type === 'number') {
+    return <span className="text-blue-300 font-mono">{entry.value}</span>;
+  }
+
+  if (entry.type === 'boolean') {
+    return (
+      <span className={`font-mono ${entry.value ? 'text-green-400' : 'text-red-400'}`}>
+        {entry.value ? 'true' : 'false'}
+      </span>
+    );
+  }
+
+  const displayValue =
+    entry.value.length > 5
+      ? `[${entry.value.slice(0, 5).join(', ')}, ...${entry.value.length - 5} more]`
+      : `[${entry.value.join(', ')}]`;
+
+  return <span className="text-purple-300 font-mono">{displayValue}</span>;
+};

package/src/ui/entry-detail-dialog.tsx

@@ -0,0 +1,220 @@
+import { X, Info, Edit3 } from 'lucide-react';
+import { JSONTree } from 'react-json-tree';
+import { StorageEntry } from '../shared/types';
+import { useMemo } from 'react';
+
+export type EntryDetailDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onEdit?: (entry: StorageEntry) => void;
+  entry: StorageEntry | null;
+};
+
+const jsonTreeTheme = {
+  base00: 'transparent',
+  base01: '#374151', // bg-gray-700
+  base02: '#4b5563', // bg-gray-600
+  base03: '#6b7280', // text-gray-500
+  base04: '#9ca3af', // text-gray-400
+  base05: '#d1d5db', // text-gray-300
+  base06: '#e5e7eb', // text-gray-200
+  base07: '#f9fafb', // text-gray-100
+  base08: '#ef4444', // text-red-500
+  base09: '#f59e0b', // text-yellow-500
+  base0A: '#10b981', // text-green-500
+  base0B: '#3b82f6', // text-blue-500
+  base0C: '#06b6d4', // text-cyan-500
+  base0D: '#8b5cf6', // text-purple-500
+  base0E: '#ec4899', // text-pink-500
+  base0F: '#f97316', // text-orange-500
+};
+
+const jsonSafeParse = (value: string): Record<string, unknown> | unknown[] | null => {
+  try {
+    const parsed = JSON.parse(value) as unknown;
+
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+
+    if (parsed && typeof parsed === 'object') {
+      return parsed as Record<string, unknown>;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
+
+const getTypeColorClass = (type: string) => {
+  switch (type) {
+    case 'string':
+      return 'bg-green-600';
+    case 'number':
+      return 'bg-blue-600';
+    case 'boolean':
+      return 'bg-yellow-600';
+    case 'buffer':
+      return 'bg-purple-600';
+    default:
+      return 'bg-gray-600';
+  }
+};
+
+const formatValue = (entry: StorageEntry) => {
+  switch (entry.type) {
+    case 'string':
+      return (
+        <span className="text-green-300 font-mono break-all">
+          "{entry.value as string}"
+        </span>
+      );
+    case 'number':
+      return (
+        <span className="text-blue-300 font-mono">{entry.value as number}</span>
+      );
+    case 'boolean':
+      return (
+        <span
+          className={`font-mono ${
+            entry.value ? 'text-green-400' : 'text-red-400'
+          }`}
+        >
+          {entry.value ? 'true' : 'false'}
+        </span>
+      );
+    case 'buffer': {
+      const bufferArray = entry.value as number[];
+      return (
+        <span className="text-purple-300 font-mono">
+          [{bufferArray.join(', ')}]
+        </span>
+      );
+    }
+    default:
+      return <span className="text-gray-400">Unknown</span>;
+  }
+};
+
+export const EntryDetailDialog = ({
+  isOpen,
+  onClose,
+  onEdit,
+  entry,
+}: EntryDetailDialogProps) => {
+  const isStringValue = entry?.type === 'string';
+  const stringValue = isStringValue ? (entry.value as string) : '';
+  const jsonValue = useMemo(
+    () => (isStringValue ? jsonSafeParse(stringValue) : null),
+    [isStringValue, stringValue]
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !entry) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-gray-800 rounded-lg p-6 w-[90vw] max-w-2xl max-h-[90vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Info className="h-5 w-5 text-blue-400" />
+            <h2 className="text-lg font-semibold text-gray-100">
+              Entry Details
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
+            title="Close dialog"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="space-y-4 flex-1 overflow-auto">
+          {/* Key Display */}
+          <div>
+            <label className="block text-sm font-medium text-gray-200 mb-1">
+              Key
+            </label>
+            <div className="w-full px-3 py-2 text-sm bg-gray-700 border border-gray-600 rounded text-gray-100 font-mono break-all">
+              {entry.key}
+            </div>
+          </div>
+
+          {/* Type Display */}
+          <div>
+            <label className="block text-sm font-medium text-gray-200 mb-1">
+              Type
+            </label>
+            <div className="flex items-center">
+              <span
+                className={`px-2 py-1 text-xs font-medium rounded text-white ${getTypeColorClass(
+                  entry.type
+                )}`}
+              >
+                {entry.type}
+              </span>
+            </div>
+          </div>
+
+          {/* Value Display */}
+          <div className="flex-1 min-h-0 flex flex-col">
+            <label className="block text-sm font-medium text-gray-200 mb-1">
+              Value
+            </label>
+            <div className="max-h-96 overflow-auto bg-gray-700 border border-gray-600 rounded p-3">
+              {jsonValue ? (
+                <JSONTree
+                  data={jsonValue}
+                  theme={jsonTreeTheme}
+                  invertTheme={false}
+                  shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
+                />
+              ) : (
+                <div className="text-sm">{formatValue(entry)}</div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Dialog Actions */}
+        <div className="flex items-center justify-end gap-2 mt-6">
+          {onEdit && (
+            <button
+              onClick={() => {
+                if (entry && onEdit) {
+                  onEdit(entry);
+                }
+              }}
+              className="flex items-center gap-2 px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors"
+            >
+              <Edit3 className="h-4 w-4" />
+              Edit
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
+            autoFocus
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/ui/globals.css

@@ -0,0 +1,123 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar styles to match plugin theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1f2937; /* gray-800 */
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #374151; /* gray-700 */
+  border-radius: 4px;
+  border: 1px solid #1f2937; /* gray-800 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4b5563; /* gray-600 */
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #6b7280; /* gray-500 */
+}
+
+::-webkit-scrollbar-corner {
+  background: #1f2937; /* gray-800 */
+}