d1s 0.2.11 → 0.2.13

package/src/components/resize-columns.jsx

@@ -1,101 +0,0 @@
-// components/resize-columns.jsx
-'use client';
-
-import React, { useState, useCallback, useRef } from 'react';
-
-const MIN_COLUMN_WIDTH = 100;
-
-/**
- * A resizable table header component.
- */
-export const ResizableHeader = ({ 
-  children, 
-  width, 
-  onResize,
-  className = "" 
-}) => {
-  const [isResizing, setIsResizing] = useState(false);
-  const headerRef = useRef(null);
-
-  const startResizing = useCallback((e) => {
-    e.preventDefault();
-    setIsResizing(true);
-
-    const startX = e.clientX;
-    const startWidth = headerRef.current?.offsetWidth || 0;
-
-    const handleMouseMove = (e) => {
-      if (!headerRef.current) return;
-
-      // Calculate the new width based on mouse movement
-      const diff = e.clientX - startX;
-      const newWidth = Math.max(startWidth + diff, MIN_COLUMN_WIDTH);
-
-      // Update only the current column's width
-      onResize(newWidth);
-    };
-
-    const handleMouseUp = () => {
-      setIsResizing(false);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  }, [onResize]); 
-
-  return (
-    <th 
-      ref={headerRef}
-      className={`relative ${className} ${isResizing ? 'select-none' : ''}`}
-      style={{ width: `${width}px` }} 
-    >
-      {children}
-      <div
-        className="absolute top-0 right-0 h-full w-1 cursor-col-resize group hover:bg-neutral-300"
-        onMouseDown={startResizing}
-      />
-    </th>
-  );
-};
-
-/**
- * A resizable table wrapper component.
- */
-export const ResizableTable = ({ 
-  columns,
-  children,
-  onColumnsResize,
-  className = ""
-}) => {
-  const [columnWidths, setColumnWidths] = useState(
-    columns.reduce((acc, col) => ({
-      ...acc,
-      [col.key]: col.width || 150
-    }), {})
-  );
-
-  const handleColumnResize = useCallback((columnKey, newWidth) => {
-    setColumnWidths((prev) => {
-      const updated = { ...prev, [columnKey]: newWidth };
-      onColumnsResize?.(updated); // Notify parent of updated widths
-      return updated;
-    });
-  }, [onColumnsResize]);
-
-  return (
-    <div className={`w-full ${className}`}>
-      {React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, {
-            onResize: handleColumnResize, // ✅ Only pass valid props
-          });
-        }
-        return child;
-      })}
-    </div>
-  );
-};
-
-export default ResizableTable;

package/src/components/sidebar.jsx

@@ -1,254 +0,0 @@
-// components/sidebar.jsx
-'use client';
-
-import React, { useEffect, useState, useMemo } from 'react';
-import { 
-  Table2, 
-  Search, 
-  Loader2, 
-  AlertCircle,
-  TerminalSquare,
-} from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { useDatabase } from '@/context/database-context';
-import { CloudflareCredentialsModal } from './cloudflare-credentials-modal';
-import { useEnvironmentController } from './environment-handler'; 
-import { EnvironmentSelect } from './environment-select';
-
-export function AppSidebar({
-  className,
-  currentView,
-  onNavigate,
-  onTableSelect,
-}) {
-  const { tables, refreshTables, isLoading: isTablesLoading, error } = useDatabase();
-  const [databases, setDatabases] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [environment, setEnvironment] = useState('local');
-  const [showCredentialsModal, setShowCredentialsModal] = useState(false);
-  const [selectedTable, setSelectedTable] = useState(null);
-  const [isTableLoading, setIsTableLoading] = useState(false);
-
-  const {
-    isConnecting,
-    isPushing,
-    showPreview,
-    connectToCloudflare,
-    pushToRemote,
-    pullFromRemote,
-    pullToRemotePreview,
-    validateStoredCredentials,
-    PreviewUI,
-  } = useEnvironmentController();
-
-  // Updated filtering logic with d1_migrations priority
-  const filteredTables = useMemo(() => {
-    const filtered = tables?.filter((table) =>
-      table.toLowerCase().includes(searchTerm.toLowerCase())
-    ) || [];
-
-    // Sort all tables alphabetically first
-    const sortedTables = [...filtered].sort((a, b) => a.localeCompare(b));
-
-    // If d1_migrations exists in the filtered list, move it to the top
-    const d1MigrationsIndex = sortedTables.indexOf('d1_migrations');
-    if (d1MigrationsIndex !== -1) {
-      sortedTables.splice(d1MigrationsIndex, 1);
-      sortedTables.unshift('d1_migrations');
-    }
-
-    return sortedTables;
-  }, [tables, searchTerm]);
-
-  const handleTableClick = async (table) => {
-    try {
-      setIsTableLoading(true);
-      setSelectedTable(table);
-      onTableSelect(table);
-    } catch (error) {
-      console.error('Error selecting table:', error);
-    } finally {
-      setIsTableLoading(false);
-    }
-  };
-
-  const handleEnvironmentChange = async (value) => {
-    console.log('Environment change triggered:', value);
-    // Immediately update the environment state so the UI reflects the correct label
-    setEnvironment(value);
-    
-    if (value === 'production') {
-      try {
-        const credentials = await validateStoredCredentials();
-        if (!credentials) {
-          setShowCredentialsModal(true);
-          return;
-        }
-        // Trigger push preview or push directly (as desired)
-        await pushToRemote();
-      } catch (error) {
-        console.error('Environment change failed:', error);
-        setEnvironment('local');
-      }
-    } else if (value === 'pull') {
-      try {
-        const credentials = await validateStoredCredentials();
-        if (!credentials) {
-          setShowCredentialsModal(true);
-          return;
-        }
-        // Instead of immediately pulling, show the pull preview toast
-        await pullToRemotePreview();
-        // Optionally, you may keep the environment value as "pull" until confirmation,
-        // then revert to "local" in the confirm pull flow.
-      } catch (error) {
-        console.error('Pull from remote failed:', error);
-        setEnvironment('local');
-      }
-    } else {
-      setEnvironment(value);
-    }
-  };
-
-  useEffect(() => {
-    const fetchDatabases = async () => {
-      try {
-        const response = await fetch('/api/databases');
-        const data = await response.json();
-
-        if (!response.ok) {
-          throw new Error(data.error || 'Failed to fetch databases');
-        }
-
-        setDatabases(data.databases || []);
-      } catch (error) {
-        console.error('Error fetching databases:', error);
-      }
-    };
-
-    fetchDatabases();
-    refreshTables();
-  }, [refreshTables]);
-
-  return (
-    <>
-      {/* The sidebar now has top position adjusted for the banner */}
-      <aside className={`${className} top-[var(--banner-height,0px)] left-0 h-[calc(100vh-var(--banner-height,0px))] bg-neutral-50 p-4`}>
-        <div className="flex flex-col h-full font-sans">
-          {/* Header */}
-          <div className="flex items-center gap-2 mb-4">
-            <Table2 className="h-5 w-5" />
-            <span className="font-mono font-bold text-sm">d1-studio</span>
-          </div>
-
-          {/* Error Message */}
-          {error && (
-            <Alert variant="destructive" className="mb-4">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription className="text-sm ml-2">{error}</AlertDescription>
-            </Alert>
-          )}
-  
-           {/* Database Section */}
-           <div className="mb-2">
-            <div className="text-xs text-muted-foreground mb-1">Database name</div>
-            <div className="font-semibold text-sm">
-              {databases[0]?.database_name || 'No database found'}
-            </div>
-          </div>
-
-          {/* Environment Section - Full Width */}
-          <div className="mb-6">
-            <EnvironmentSelect className="w-full"
-              value={environment}
-              onValueChange={handleEnvironmentChange}
-              isLoading={isPushing}
-              disabled={isConnecting}
-              showPreview={showPreview}
-            />
-          </div>
-
-          {/* SQL Editor Section */}
-          <div className="mb-3">
-            <button
-              className={`w-full flex items-center gap-x-1 border rounded-md text-sm font-medium transition-colors px-2 py-2
-                ${currentView === 'sql-editor' ? 'bg-neutral-900 text-white' : 'bg-white hover:bg-neutral-100'}`}
-              onClick={() => onNavigate('sql-editor')}
-              disabled={isTableLoading}
-            >
-              <TerminalSquare className="h-[16px] w-[16px]" />
-              SQL editor
-            </button>
-          </div>
-  
-          {/* Search Section */}
-          <div className="relative mb-3 bg-white">
-            <Search className="absolute left-2 top-2.5 h-4 w-4 text-neutral-500" />
-            <Input
-              placeholder="Search tables"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-7"
-            />
-          </div>
-  
-          {/* Scrollable Tables Section - Updated */}
-          <div className="flex-1 min-h-0 flex flex-col">
-            {/* Tables Header */}
-            <div className="flex items-center justify-between mb-1 flex-none">
-              <h3 className="text-sm font-medium text-muted-foreground">
-                Tables {tables?.length ? `(${tables.length})` : ''}
-              </h3>
-              {isTablesLoading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
-            </div>
-
-            {/* Tables List - Scrollable - Updated with padding bottom */}
-            <div className="overflow-y-auto flex-1">
-              <div className="pr-2 pb-4"> {/* Added pb-4 for bottom padding */}
-                {!isTablesLoading && filteredTables.length === 0 && (
-                  <div className="text-sm font-medium text-muted-foreground px-2 py-2">
-                    {searchTerm 
-                      ? 'No matching tables found' 
-                      : error 
-                        ? 'Error loading tables' 
-                        : 'No tables available'
-                    }
-                  </div>
-                )}
-  
-              {filteredTables.map((table) => (
-                <button
-                  key={table}
-                  className={`w-full text-left text-sm font-medium rounded-md transition-colors px-2 py-2
-                    ${currentView === 'table-view' && selectedTable === table
-                      ? 'bg-[#F0F0F0] text-neutral-900 font-semibold'
-                      : 'text-neutral-700 hover:bg-[#F2F2F2]'}
-                    ${isTableLoading && 'opacity-50 cursor-not-allowed'}`}
-                  onClick={() => handleTableClick(table)}
-                  disabled={isTableLoading}
-                >
-                  {table}
-                </button>
-              ))}
-              </div>
-            </div>
-          </div>
-        </div>
-  
-        {/* Cloudflare Credentials Modal */}
-        <CloudflareCredentialsModal
-          open={showCredentialsModal}
-          onClose={() => {
-            setShowCredentialsModal(false);
-            setEnvironment('local');
-          }}
-          onSubmit={connectToCloudflare}
-        />
-      </aside>
-  
-      {/* Preview UI */}
-      {PreviewUI}
-    </>
-  );  
-}