d1s 0.2.1

package/src/components/sql-error-display.jsx

@@ -0,0 +1,167 @@
+// components/sql-error-display.jsx
+import React from 'react';
+import { AlertCircle, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+
+// Keep the original ErrorMessages mapping
+const ErrorMessages = {
+  TABLE_EXISTS: {
+    title: 'Table Already Exists',
+    message: 'A table with this name already exists',
+    action: 'Use a different table name or DROP the existing table first'
+  },
+  TABLE_NOT_FOUND: {
+    title: 'Table Not Found',
+    message: 'The specified table does not exist',
+    action: 'Check the table name and ensure it exists'
+  },
+  SYNTAX_ERROR: {
+    title: 'Syntax Error',
+    message: 'There is a syntax error in your SQL query',
+    action: 'Check your query syntax and try again'
+  },
+  CONSTRAINT_ERROR: {
+    title: 'Constraint Violation',
+    message: 'The operation violates a database constraint',
+    action: 'Ensure your data meets all table constraints'
+  },
+  VALIDATION_ERROR: {
+    title: 'Invalid Query',
+    message: 'The query is not valid',
+    action: 'Check your query and try again'
+  },
+  SQL_ERROR: {
+    title: 'SQL Error',
+    message: 'An error occurred while executing the query',
+    action: 'Review your query and try again'
+  },
+  EXECUTION_ERROR: {
+    title: 'Execution Error',
+    message: 'An error occurred during query execution',
+    action: 'Ensure Node.js is installed and your environment is configured correctly'
+  },
+  UNKNOWN_ERROR: {
+    title: 'Unknown Error',
+    message: 'An unexpected error occurred',
+    action: 'Try again or contact support if the issue persists'
+  }
+};
+
+export function SQLErrorDisplay({ error, onDismiss, onFixError }) {
+  const [showDetails, setShowDetails] = React.useState(true);
+
+  if (!error) return null;
+
+  const isSyntaxError = error.type === 'SYNTAX_ERROR';
+  const showQueryPreview = error.details?.originalQuery;
+  const showErrorLocation = isSyntaxError && error.details?.errorLocation;
+
+  // Get error info from ErrorMessages mapping
+  const errorInfo = ErrorMessages[error.type] || ErrorMessages.UNKNOWN_ERROR;
+
+  return (
+    <Alert variant="destructive" className="mt-4 mb-4">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle className="flex items-center justify-between">
+        <span>{errorInfo.title}</span>
+        {onDismiss && (
+          <button 
+            onClick={onDismiss}
+            className="p-1 hover:bg-destructive/10 rounded-full"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </AlertTitle>
+      
+      <AlertDescription className="mt-2">
+        <div className="font-medium">{error.message || errorInfo.message}</div>
+        
+        <Collapsible 
+          open={showDetails} 
+          onOpenChange={setShowDetails}
+          className="space-y-2 mt-4"
+        >
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium">
+            {showDetails ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            Error Details
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="space-y-4">
+            {showQueryPreview && (
+              <div className="mt-2">
+                <div className="text-sm font-medium mb-1">Query preview:</div>
+                <div className="relative">
+                  <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto whitespace-pre-wrap">
+                    {error.details.originalQuery}
+                  </pre>
+                  {showErrorLocation && (
+                    <div 
+                      className="absolute left-0 top-0 w-full"
+                      style={{
+                        transform: `translateY(${Math.floor(error.details.offset / 50)}rem)`
+                      }}
+                    >
+                      <div 
+                        className="absolute h-4 w-2 bg-red-500"
+                        style={{ left: `${(error.details.offset % 50) * 0.5}rem` }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {(error.details?.suggestions || errorInfo.action) && (
+              <div className="mt-2">
+                <div className="text-sm font-medium mb-1">Suggestions:</div>
+                <ul className="list-disc pl-4 space-y-1">
+                  {error.details?.suggestions ? (
+                    error.details.suggestions.map((suggestion, index) => (
+                      <li key={index} className="text-sm text-destructive-foreground/90">
+                        {suggestion}
+                      </li>
+                    ))
+                  ) : (
+                    <li className="text-sm text-destructive-foreground/90">
+                      {errorInfo.action}
+                    </li>
+                  )}
+                </ul>
+              </div>
+            )}
+
+            {error.details?.error && (
+              <div className="mt-2">
+                <div className="text-sm font-medium mb-1">Technical details:</div>
+                <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto">
+                  {error.details.error}
+                </pre>
+              </div>
+            )}
+
+            {onFixError && isSyntaxError && (
+              <div className="mt-4">
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => onFixError(error.details.errorLocation)}
+                >
+                  Go to Error Location
+                </Button>
+              </div>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+export { ErrorMessages };

package/src/components/sync-migrations-button.jsx

@@ -0,0 +1,87 @@
+// components/sync-migrations-button.jsx
+'use client';
+
+import React, { memo, useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { FolderSync, Loader2 } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useToast } from "@/hooks/use-toast";
+
+const SyncMigrationsButton = memo(({ tableName, onSync }) => {
+  const [isSyncing, setIsSyncing] = useState(false);
+  const { toast } = useToast();
+
+  // Only show for d1_migrations table
+  if (tableName !== 'd1_migrations') return null;
+
+  const handleSync = async () => {
+    try {
+      setIsSyncing(true);
+      const response = await fetch('/api/migrations/sync-files', {
+        method: 'POST'
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to sync migrations');
+      }
+
+      const { added = [], removed = [] } = data.details || {};
+      
+      toast({
+        title: "Migrations Synced",
+        description: `Added: ${added.length}, Removed: ${removed.length}`
+      });
+
+      // Refresh the table data if sync was successful
+      if (onSync) {
+        await onSync();
+      }
+
+    } catch (error) {
+      console.error('Error syncing migrations:', error);
+      toast({
+        variant: "destructive",
+        title: "Sync Failed",
+        description: error.message
+      });
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleSync}
+            disabled={isSyncing}
+            className="h-8"
+          >
+            {isSyncing ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <FolderSync className="h-4 w-4" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Sync migration files with d1_migrations table</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
+
+SyncMigrationsButton.displayName = 'SyncMigrationsButton';
+
+export default SyncMigrationsButton;

package/src/components/table-error-dialog.jsx

@@ -0,0 +1,65 @@
+// components/table-error-dialog.jsx
+'use client';
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from 'lucide-react';
+
+// Simple function that focuses on just message display
+function getErrorInfo(error) {
+  if (!error) {
+    return {
+      message: 'An unknown error occurred.',
+      icon: AlertCircle,
+    };
+  }
+  return {
+    message: error.message,
+    icon: AlertCircle,
+  };
+}
+
+export function DatabaseErrorDialog({ isOpen, onClose, error }) {
+  if (!error || !isOpen) return null;
+
+  const { message, icon: Icon } = getErrorInfo(error);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md font-sans">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <Icon className="h-4 w-4 text-red-500" />
+            <DialogTitle>Error</DialogTitle>
+          </div>
+        </DialogHeader>
+        <div className="space-y-4">
+          <p className="bg-neutral-100 p-2 rounded-md text-neutral-900">
+            {message}
+          </p>
+          {error.details?.suggestions && (
+            <div className="text-sm space-y-1">
+              <p className="font-medium">Suggestions:</p>
+              <ul className="list-disc pl-4 space-y-1">
+                {error.details.suggestions.map((suggestion, index) => (
+                  <li key={index}>{suggestion}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+        <div className="flex justify-end gap-2 mt-4">
+          <Button variant="default" onClick={onClose}>
+            Got it
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/table-toolbar.jsx

@@ -0,0 +1,285 @@
+// components/table-toolbar.jsx
+'use client';
+
+import React, { memo } from 'react';
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ArrowLeft,
+  ArrowRight,
+  SlidersHorizontal,
+  Columns,
+  Loader2
+} from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import RefreshButton from './refresh-button';
+import SyncMigrationsButton from './sync-migrations-button';
+import DownloadButton from './download-button';
+import ColumnSelector from './column-selector';
+
+const StaticControls = memo(({ 
+  onAdd, 
+  onDelete, 
+  selectedCount, 
+  disabled, 
+  newRecordsCount,
+  schema,             
+  visibleColumns,
+  onColumnToggle
+}) => (
+  <div className="flex items-center space-x-2">
+     <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {/* Wrapping the disabled button in a span so the tooltip can trigger */}
+          <span>
+            <Button 
+              size="sm"
+              variant="outline"
+              className="font-semibold opacity-50 cursor-not-allowed"
+              disabled
+            >
+              <SlidersHorizontal className="h-4 w-4" />
+              Filters
+            </Button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Filters are not available yet. Coming soon!</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <ColumnSelector 
+      schema={schema}
+      visibleColumns={visibleColumns}
+      onColumnToggle={onColumnToggle}
+    />
+
+    <div className="h-4 border-r mx-2" />
+
+    <Button
+      size="sm"
+      variant="default"
+      className="font-semibold"
+      onClick={onAdd}
+    >
+      Add record
+    </Button>
+
+    {selectedCount > 0 && (
+      <Button 
+        size="sm"
+        className="font-semibold"
+        onClick={onDelete} 
+        variant="destructive"
+        disabled={disabled || newRecordsCount > 0}
+      >
+        Delete {selectedCount} {selectedCount === 1 ? 'record' : 'records'}
+      </Button>
+    )}
+  </div>
+));
+
+const RowCount = memo(({ totalRows }) => (
+  <span className="text-sm text-neutral-600">
+    {totalRows} {totalRows === 1 ? 'row' : 'rows'}
+  </span>
+));
+
+const PaginationControls = memo(({ 
+  currentPage, 
+  totalPages, 
+  onPageChange, 
+  disabled,
+  newRecordsCount 
+}) => (
+  <div className="flex items-center space-x-2">
+    <Button 
+      variant="ghost" 
+      size="icon"
+      onClick={() => {
+        console.log("Pagination: navigating to previous page", currentPage - 1);
+        onPageChange(currentPage - 1);
+      }}
+      disabled={currentPage === 1 || disabled || newRecordsCount > 0}
+      className="h-8"
+    >
+      <ArrowLeft className="h-4 w-4" />
+    </Button>
+    <span className="text-sm">
+      Page {currentPage} of {totalPages}
+    </span>
+    <Button 
+      variant="ghost" 
+      size="icon"
+      onClick={() => {
+        console.log("Pagination: navigating to next page", currentPage + 1);
+        onPageChange(currentPage + 1);
+      }}
+      disabled={currentPage === totalPages || disabled || newRecordsCount > 0}
+      className="h-8"
+    >
+      <ArrowRight className="h-4 w-4" />
+    </Button>
+  </div>
+));
+
+const RowsPerPageSelect = memo(({ value, onValueChange, disabled, newRecordsCount }) => (
+  <Select
+    value={value.toString()}
+    onValueChange={onValueChange}
+    disabled={disabled || newRecordsCount > 0}
+  >
+    <SelectTrigger className="w-20 h-8">
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="50">50</SelectItem>
+      <SelectItem value="100">100</SelectItem>
+      <SelectItem value="250">250</SelectItem>
+    </SelectContent>
+  </Select>
+));
+
+const SaveDiscardButtons = memo(({ onSave, onDiscard, totalChanges, isSaving }) => (
+  <div className="flex items-center gap-2">
+    <Button
+      size="sm"
+      variant="ghost"
+      className="font-semibold"
+      onClick={onDiscard}
+      disabled={isSaving}
+    >
+      Discard changes
+    </Button>
+    <Button
+      size="sm"
+      className="font-semibold bg-green-600 hover:bg-green-700"
+      variant="default"
+      onClick={onSave}
+      disabled={isSaving}
+    >
+      {isSaving ? (
+        <>
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Saving...
+        </>
+      ) : (
+        `Save ${totalChanges} ${totalChanges === 1 ? 'change' : 'changes'}`
+      )}
+    </Button>
+  </div>
+));
+
+const TableToolbar = ({
+  selectedCount = 0,
+  onAdd,
+  onDelete,
+  onRefresh,
+  totalRows = 0,
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange,
+  rowsPerPage = 50,
+  onRowsPerPageChange,
+  tableName,
+  onDownloadStart,
+  onDownloadComplete,
+  disabled = false,
+  editCount = 0,
+  newRecordsCount = 0,
+  onSaveChanges,
+  onDiscardChanges,
+  isSaving = false,
+  schema,              
+  visibleColumns,
+  onColumnToggle,
+}) => {
+  const handleRowsPerPageChange = (value) => {
+    const newRowsPerPage = parseInt(value, 10);
+    onRowsPerPageChange(newRowsPerPage);
+    onPageChange(1); // Reset to first page when rows per page changes
+  };
+
+  const totalChanges = editCount + newRecordsCount;
+
+  return (
+    <div className="flex items-center justify-between p-3 border-b bg-background font-sans">
+      <div className="flex items-center justify-between w-full">
+        <StaticControls
+          onAdd={onAdd}
+          onDelete={onDelete}
+          selectedCount={selectedCount}
+          disabled={disabled || isSaving}
+          newRecordsCount={newRecordsCount}
+          schema={schema}              
+          visibleColumns={visibleColumns}
+          onColumnToggle={onColumnToggle}
+        />
+
+        <div className="flex items-center gap-4">
+          {totalChanges > 0 ? (
+            <SaveDiscardButtons
+              onSave={onSaveChanges}
+              onDiscard={onDiscardChanges}
+              totalChanges={totalChanges}
+              isSaving={isSaving}
+            />
+          ) : (
+            <div className="flex items-center space-x-2">
+              <RowCount totalRows={totalRows} />
+
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={onPageChange}
+                disabled={disabled}
+                newRecordsCount={newRecordsCount}
+              />
+
+              <RowsPerPageSelect
+                value={rowsPerPage}
+                onValueChange={handleRowsPerPageChange}
+                disabled={disabled}
+                newRecordsCount={newRecordsCount}
+              />
+
+              <RefreshButton 
+                onRefresh={onRefresh}
+                disabled={disabled}
+              />
+
+              <SyncMigrationsButton
+                tableName={tableName}
+                onSync={onRefresh}
+                disabled={disabled}
+              />
+
+              <DownloadButton
+                tableName={tableName}
+                onDownloadStart={onDownloadStart}
+                onDownloadComplete={onDownloadComplete}
+                disabled={disabled}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TableToolbar.displayName = 'TableToolbar';
+export default memo(TableToolbar);