collapse all tables/relationships button

src/context/layout-context/layout-context.tsx

@@ -6,9 +6,11 @@ export type SidebarSection = 'tables' | 'relationships';
 export interface LayoutContext {
     openedTableInSidebar: string | undefined;
     openTableFromSidebar: (tableId: string) => void;
+    closeAllTablesInSidebar: () => void;
 
     openedRelationshipInSidebar: string | undefined;
     openRelationshipFromSidebar: (relationshipId: string) => void;
+    closeAllRelationshipsInSidebar: () => void;
 
     selectedSidebarSection: SidebarSection;
     selectSidebarSection: (section: SidebarSection) => void;
@@ -20,7 +22,9 @@ export const layoutContext = createContext<LayoutContext>({
 
     openedRelationshipInSidebar: undefined,
     openRelationshipFromSidebar: emptyFn,
+    closeAllRelationshipsInSidebar: emptyFn,
 
     selectSidebarSection: emptyFn,
     openTableFromSidebar: emptyFn,
+    closeAllTablesInSidebar: emptyFn,
 });

src/context/layout-context/layout-provider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { layoutContext, SidebarSection } from './layout-context';
+import { LayoutContext, layoutContext, SidebarSection } from './layout-context';
 
 export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     children,
@@ -12,6 +12,11 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const [selectedSidebarSection, setSelectedSidebarSection] =
         React.useState<SidebarSection>('tables');
 
+    const closeAllTablesInSidebar: LayoutContext['closeAllTablesInSidebar'] =
+        () => setOpenedTableInSidebar('');
+
+    const closeAllRelationshipsInSidebar: LayoutContext['closeAllRelationshipsInSidebar'] =
+        () => setOpenedRelationshipInSidebar('');
     return (
         <layoutContext.Provider
             value={{
@@ -21,6 +26,8 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 selectSidebarSection: setSelectedSidebarSection,
                 openedRelationshipInSidebar,
                 openRelationshipFromSidebar: setOpenedRelationshipInSidebar,
+                closeAllTablesInSidebar,
+                closeAllRelationshipsInSidebar,
             }}
         >
             {children}

src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx

@@ -5,12 +5,14 @@ import { Input } from '@/components/input/input';
 import { RelationshipList } from './relationship-list/relationship-list';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { DBRelationship } from '@/lib/domain/db-relationship';
+import { useLayout } from '@/hooks/use-layout';
 
 export interface RelationshipsSectionProps {}
 
 export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
     const { relationships } = useChartDB();
     const [filterText, setFilterText] = React.useState('');
+    const { closeAllRelationshipsInSidebar } = useLayout();
 
     const filteredRelationships = useMemo(() => {
         const filter: (relationship: DBRelationship) => boolean = (
@@ -26,7 +28,11 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
         <section className="flex flex-col px-2 overflow-hidden flex-1">
             <div className="flex items-center py-1 justify-between gap-4">
                 <div>
-                    <Button variant="ghost" className="p-0 h-8 w-8">
+                    <Button
+                        variant="ghost"
+                        className="p-0 h-8 w-8"
+                        onClick={closeAllRelationshipsInSidebar}
+                    >
                         <ListCollapse className="w-4 h-4" />
                     </Button>
                 </div>

src/pages/editor-page/side-panel/tables-section/tables-section.tsx

@@ -6,11 +6,13 @@ import { Input } from '@/components/input/input';
 
 import { DBTable } from '@/lib/domain/db-table';
 import { useChartDB } from '@/hooks/use-chartdb';
+import { useLayout } from '@/hooks/use-layout';
 
 export interface TablesSectionProps {}
 
 export const TablesSection: React.FC<TablesSectionProps> = () => {
     const { createTable, tables } = useChartDB();
+    const { closeAllTablesInSidebar } = useLayout();
     const [filterText, setFilterText] = React.useState('');
 
     const filteredTables = useMemo(() => {
@@ -25,7 +27,11 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
         <section className="flex flex-col px-2 overflow-hidden flex-1">
             <div className="flex items-center py-1 justify-between gap-4">
                 <div>
-                    <Button variant="ghost" className="p-0 h-8 w-8">
+                    <Button
+                        variant="ghost"
+                        className="p-0 h-8 w-8"
+                        onClick={closeAllTablesInSidebar}
+                    >
                         <ListCollapse className="w-4 h-4" />
                     </Button>
                 </div>