feat: added the ability to filter db data and persist databases

apps/web/package.json

@@ -23,18 +23,18 @@
   },
   "dependencies": {
     "sqlite-erd": "*",
-    "react": "19.2.6",
-    "react-dom": "19.2.6"
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.15",
-    "@tailwindcss/vite": "4.3.0",
-    "@types/react": "19.2.15",
+    "@biomejs/biome": "2.5.0",
+    "@tailwindcss/vite": "4.3.1",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260526.1",
+    "@typescript/native-preview": "7.0.0-dev.20260622.1",
     "@vitejs/plugin-react": "6.0.2",
-    "tailwindcss": "4.3.0",
+    "tailwindcss": "4.3.1",
     "typescript": "6.0.3",
-    "vite": "8.0.10"
+    "vite": "8.0.16"
   }
 }

package.json

@@ -12,9 +12,12 @@
     "packages/*"
   ],
   "devDependencies": {
-    "turbo": "2.9.14",
-    "lefthook": "2.1.8",
-    "@biomejs/biome": "2.4.15"
+    "turbo": "2.9.18",
+    "lefthook": "2.1.9",
+    "@biomejs/biome": "2.5.0"
   },
-  "packageManager": "npm@11.11.0"
+  "packageManager": "npm@11.16.0",
+  "allowScripts": {
+    "lefthook": false
+  }
 }

packages/sqlite-erd/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "sqlite-erd",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "license": "MIT",
   "author": "Jure Rotar <hello@jurerotar.com>",
@@ -35,33 +35,34 @@
     "type-check": "tsgo"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "1.1.15",
-    "@radix-ui/react-separator": "1.1.8",
-    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-dialog": "1.1.17",
+    "@radix-ui/react-separator": "1.1.10",
+    "@radix-ui/react-slot": "1.3.0",
     "@sqlite.org/sqlite-wasm": "3.53.0-build1",
-    "@tsdown/css": "0.22.0",
-    "@xyflow/react": "12.10.2",
+    "@tanstack/react-table": "^9.0.0-beta.16",
+    "@tsdown/css": "0.22.3",
+    "@xyflow/react": "12.11.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dagre": "0.8.5",
     "react-icons": "5.6.0",
     "tailwind-merge": "3.6.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.15",
-    "@tailwindcss/postcss": "4.3.0",
-    "@tailwindcss/vite": "4.3.0",
+    "@biomejs/biome": "2.5.0",
+    "@tailwindcss/postcss": "4.3.1",
+    "@tailwindcss/vite": "4.3.1",
     "@types/dagre": "0.7.54",
-    "@types/node": "25.9.1",
-    "@types/react": "19.2.15",
+    "@types/node": "26.0.0",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260526.1",
+    "@typescript/native-preview": "7.0.0-dev.20260622.1",
     "@vitejs/plugin-react": "6.0.2",
     "postcss-import": "16.1.1",
-    "tailwindcss": "4.3.0",
-    "tsdown": "0.22.0",
+    "tailwindcss": "4.3.1",
+    "tsdown": "0.22.3",
     "typescript": "6.0.3",
-    "vitest": "4.1.7"
+    "vitest": "4.1.9"
   },
   "peerDependencies": {
     "react": ">=19",

packages/sqlite-erd/src/app.tsx

@@ -1,21 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import {
   LuDatabase as Database,
-  LuGitFork as GitFork,
   LuMoon as Moon,
-  LuPanelLeft as PanelLeft,
-  LuPanelLeftClose as PanelLeftClose,
-  LuRotateCcw as RotateCcw,
-  LuScanSearch as ScanSearch,
   LuSun as Sun,
 } from 'react-icons/lu';
+import { AppSidebar } from '@/components/app-sidebar.tsx';
 import { DataDrawer } from '@/components/data-drawer.tsx';
 import { ERDCanvas } from '@/components/erd-canvas.tsx';
-import { FileUploader } from '@/components/file-uploader.tsx';
-import { SchemaInput } from '@/components/schema-input.tsx';
 import { SQLiteInternalsExplorer } from '@/components/sqlite-internals-explorer.tsx';
-import { Button } from '@/components/ui/button.tsx';
 import { useSchema } from '@/hooks/use-schema.ts';
+import { type SourceView, useSourceViews } from '@/hooks/use-source-views.ts';
 import { useTheme } from '@/hooks/use-theme.ts';
 import './styles/app.css';
 
@@ -32,6 +26,8 @@ export const App = ({
 }: AppProps) => {
   const { theme, toggle: toggleTheme } = useTheme();
   const {
+    sources,
+    activeSourceId,
     schema,
     loading,
     error,
@@ -41,31 +37,35 @@ export const App = ({
     loadTableData,
     loadFromSQL,
     loadFromFile,
+    selectSource,
+    removeSource,
     clear,
   } = useSchema({ databaseUrl, sqlSchema });
 
   const [panelOpen, setPanelOpen] = useState<boolean>(showSidebar);
   const [dataTableName, setDataTableName] = useState<string | null>(null);
   const [dataDrawerCollapsed, setDataDrawerCollapsed] = useState(false);
-  const [activeView, setActiveView] = useState<'erd' | 'internals'>('erd');
+  const { activeView, sourceViews, resetSourceViews, setSourceView } =
+    useSourceViews(sources, activeSourceId);
 
   const selectedDataTable = useMemo(
     () => schema?.tables.find((table) => table.name === dataTableName) ?? null,
     [schema, dataTableName],
   );
 
   useEffect(() => {
-    if (!hasDatabaseData) {
-      setDataTableName(null);
-      setDataDrawerCollapsed(false);
-      setActiveView('erd');
+    if (!activeSourceId) {
+      return;
     }
-  }, [hasDatabaseData]);
+
+    setDataTableName(null);
+    setDataDrawerCollapsed(false);
+  }, [activeSourceId]);
 
   const handleClear = () => {
     setDataTableName(null);
     setDataDrawerCollapsed(false);
-    setActiveView('erd');
+    resetSourceViews();
     clear();
   };
 
@@ -80,129 +80,44 @@ export const App = ({
     }
   };
 
-  return (
-    <div className="flex h-screen w-screen overflow-hidden bg-background">
-      {/* Side Panel */}
-      {showSidebar && (
-        <div
-          className={`shrink-0 border-r border-border bg-card flex flex-col h-full ${
-            panelOpen ? 'w-80' : 'w-12 items-center shadow-xl'
-          }`}
-        >
-          {panelOpen ? (
-            <>
-              <div className="p-4 border-b border-border flex items-center gap-2">
-                <Database
-                  size={18}
-                  className="text-primary"
-                />
-                <h1 className="font-semibold text-sm text-foreground">
-                  SQL → ERD
-                </h1>
-                <button
-                  type="button"
-                  onClick={() => setPanelOpen(false)}
-                  className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
-                  aria-label="Collapse upload panel"
-                  title="Collapse upload panel"
-                >
-                  <PanelLeftClose size={16} />
-                </button>
-              </div>
-
-              <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                <FileUploader
-                  onFile={loadFromFile}
-                  loading={loading}
-                />
+  const handleSourceViewChange = (sourceId: string, view: SourceView) => {
+    setSourceView(sourceId, view);
+    selectSource(sourceId);
 
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <div className="flex-1 h-px bg-border" />
-                  <span>or</span>
-                  <div className="flex-1 h-px bg-border" />
-                </div>
+    if (view === 'internals') {
+      handleDataDrawerClose();
+    }
+  };
 
-                <SchemaInput
-                  onParse={loadFromSQL}
-                  loading={loading}
-                />
+  const handleSourceDelete = (sourceId: string) => {
+    if (sourceId === activeSourceId) {
+      handleDataDrawerClose();
+    }
 
-                {error && (
-                  <div className="bg-destructive/10 text-destructive border border-destructive/20 rounded-lg p-3 text-xs">
-                    {error}
-                  </div>
-                )}
+    removeSource(sourceId);
+  };
 
-                {schema && (
-                  <div className="space-y-2">
-                    {hasDatabaseData && (
-                      <div className="grid grid-cols-2 gap-1 rounded-lg border border-border bg-muted/30 p-1">
-                        <button
-                          type="button"
-                          onClick={() => setActiveView('erd')}
-                          className={`flex h-8 items-center justify-center gap-1.5 rounded-md px-2 text-xs transition-colors ${
-                            activeView === 'erd'
-                              ? 'bg-card text-foreground shadow-sm'
-                              : 'text-muted-foreground hover:text-foreground'
-                          }`}
-                        >
-                          <GitFork size={13} />
-                          ERD
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setDataTableName(null);
-                            setActiveView('internals');
-                          }}
-                          className={`flex h-8 items-center justify-center gap-1.5 rounded-md px-2 text-xs transition-colors ${
-                            activeView === 'internals'
-                              ? 'bg-card text-foreground shadow-sm'
-                              : 'text-muted-foreground hover:text-foreground'
-                          }`}
-                        >
-                          <ScanSearch size={13} />
-                          Internals
-                        </button>
-                      </div>
-                    )}
-                    <div className="flex items-center justify-between">
-                      <span className="text-xs text-muted-foreground">
-                        {schema.tables.length} tables ·{' '}
-                        {schema.relationships.length} relationships
-                      </span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={handleClear}
-                        className="h-7 px-2 text-xs"
-                      >
-                        <RotateCcw
-                          size={12}
-                          className="mr-1"
-                        />
-                        Clear
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setPanelOpen(true)}
-              className="mt-3 rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-              aria-label="Expand upload panel"
-              title="Expand upload panel"
-            >
-              <PanelLeft size={16} />
-            </button>
-          )}
-        </div>
+  return (
+    <div className="flex h-screen w-screen overflow-hidden bg-background">
+      {showSidebar && (
+        <AppSidebar
+          activeSourceId={activeSourceId}
+          error={error}
+          loading={loading}
+          panelOpen={panelOpen}
+          sources={sources}
+          sourceViews={sourceViews}
+          onClear={handleClear}
+          onCollapsePanel={() => setPanelOpen(false)}
+          onExpandPanel={() => setPanelOpen(true)}
+          onFile={loadFromFile}
+          onParseSQL={loadFromSQL}
+          onSourceDelete={handleSourceDelete}
+          onSourceSelect={selectSource}
+          onSourceViewChange={handleSourceViewChange}
+        />
       )}
 
-      {/* Main Canvas */}
       <div className="flex-1 relative">
         <button
           type="button"
@@ -226,6 +141,7 @@ export const App = ({
               />
             ) : (
               <ERDCanvas
+                key={activeSourceId ?? 'schema'}
                 schema={schema}
                 onTableClick={hasDatabaseData ? handleTableClick : undefined}
               />