From 4dd2a5742e63ca243893cf33ec25a77d7eb517ca Mon Sep 17 00:00:00 2001
From: johnnyfish <jonathanfishner11@gmail.com>
Date: Thu, 31 Jul 2025 23:20:01 +0300
Subject: [PATCH] fix: allow hiding all schemas and add filtered tables message
 in side panel

---
 .../chartdb-context/chartdb-provider.tsx      | 21 ++++++-----
 src/i18n/locales/en.ts                        |  2 +
 .../tables-section/tables-section.tsx         | 37 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx
index b1dcdea6..d925c4b8 100644
--- a/src/context/chartdb-context/chartdb-provider.tsx
+++ b/src/context/chartdb-context/chartdb-provider.tsx
@@ -156,17 +156,18 @@ export const ChartDBProvider: React.FC<
             return undefined;
         }
 
-        const schemasFilterFromCache =
-            (schemasFilter[diagramId] ?? []).length === 0
-                ? undefined // in case of empty filter, skip cache
-                : schemasFilter[diagramId];
+        const schemasFilterFromCache = schemasFilter[diagramId];
 
-        return (
-            schemasFilterFromCache ?? [
-                schemas.find((s) => s.name === defaultSchemaName)?.id ??
-                    schemas[0]?.id,
-            ]
-        );
+        // If there's an explicit filter set (even if empty), use it
+        if (schemasFilterFromCache !== undefined) {
+            return schemasFilterFromCache;
+        }
+
+        // Only default to showing schemas if no filter has been set
+        return [
+            schemas.find((s) => s.name === defaultSchemaName)?.id ??
+                schemas[0]?.id,
+        ];
     }, [schemasFilter, diagramId, schemas, defaultSchemaName]);
 
     const currentDiagram: Diagram = useMemo(
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index cafdc417..ad4746e9 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -125,6 +125,8 @@ export const en = {
                 collapse: 'Collapse All',
                 clear: 'Clear Filter',
                 no_results: 'No tables found matching your filter.',
+                all_tables_filtered: 'All tables are filtered.',
+                open_filter: 'Open Filter',
                 show_list: 'Show Table List',
                 show_dbml: 'Show DBML Editor',
 
diff --git a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
index 2edc4034..70793960 100644
--- a/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/tables-section.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { TableList } from './table-list/table-list';
 import { Button } from '@/components/button/button';
-import { Table, List, X, Code } from 'lucide-react';
+import { Table, List, X, Code, Funnel } from 'lucide-react';
 import { Input } from '@/components/input/input';
 import type { DBTable } from '@/lib/domain/db-table';
 import { shouldShowTablesBySchemaFilter } from '@/lib/domain/db-table';
@@ -21,6 +21,7 @@ import { TableDBML } from './table-dbml/table-dbml';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { getOperatingSystem } from '@/lib/utils';
 import type { DBSchema } from '@/lib/domain';
+import { useCanvas } from '@/hooks/use-canvas';
 
 export interface TablesSectionProps {}
 
@@ -34,6 +35,7 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
     const [filterText, setFilterText] = React.useState('');
     const [showDBML, setShowDBML] = useState(false);
     const filterInputRef = React.useRef<HTMLInputElement>(null);
+    const { setShowFilter } = useCanvas();
 
     const filteredTables = useMemo(() => {
         const filterTableName: (table: DBTable) => boolean = (table) =>
@@ -48,6 +50,18 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
         return tables.filter(filterVisible).filter(filterTableName);
     }, [tables, filterText, hiddenTableIds, filteredSchemas]);
 
+    // Check if all tables are filtered out by canvas filters (not text filter)
+    const allTablesFilteredByCanvas = useMemo(() => {
+        return (
+            tables.length > 0 &&
+            tables.every(
+                (table) =>
+                    hiddenTableIds?.includes(table.id) ||
+                    !shouldShowTablesBySchemaFilter(table, filteredSchemas)
+            )
+        );
+    }, [tables, hiddenTableIds, filteredSchemas]);
+
     const createTableWithLocation = useCallback(
         async ({ schema }: { schema?: DBSchema }) => {
             const padding = 80;
@@ -100,6 +114,10 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
         setFilterText('');
     }, []);
 
+    const handleOpenCanvasFilter = useCallback(() => {
+        setShowFilter(true);
+    }, [setShowFilter]);
+
     const operatingSystem = useMemo(() => getOperatingSystem(), []);
 
     useHotkeys(
@@ -180,6 +198,23 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
                                 )}
                                 className="mt-20"
                             />
+                        ) : allTablesFilteredByCanvas ? (
+                            <div className="mt-10 flex flex-col items-center gap-2">
+                                <div className="text-sm text-muted-foreground">
+                                    {t(
+                                        'side_panel.tables_section.all_tables_filtered'
+                                    )}
+                                </div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={handleOpenCanvasFilter}
+                                    className="gap-1"
+                                >
+                                    <Funnel className="size-3.5" />
+                                    {t('side_panel.tables_section.open_filter')}
+                                </Button>
+                            </div>
                         ) : filterText && filteredTables.length === 0 ? (
                             <div className="mt-10 flex flex-col items-center gap-2">
                                 <div className="text-sm text-muted-foreground">