diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx index 0347c05..1fa5f0d 100644 --- a/src/components/layout/app-layout.tsx +++ b/src/components/layout/app-layout.tsx @@ -1,6 +1,6 @@ "use client" -import { useState } from "react" +import { useEffect, useState } from "react" import { AppSidebar } from "./app-sidebar" import { SourcesPanel } from "./sources-panel" import { SearchResultsPanel } from "./search-results-panel" @@ -19,6 +19,18 @@ export function AppLayout() { const searchPanelOpen = !!searchTerm && hasResults + // Auto-close sources when search results appear + useEffect(() => { + if (searchPanelOpen) setSourcesOpen(false) + }, [searchPanelOpen]) + + function closeSearchResults(): void { + useAppStore.getState().setSearchTerm("") + useGraphStore.getState().setGraphData([], []) + } + + const panelOverlay = "absolute left-0 top-0 z-10 h-full" + return ( <>
@@ -27,22 +39,7 @@ export function AppLayout() { onToggleSources={() => setSourcesOpen((o) => !o)} /> - {/* Sources slide-out panel */} - {sourcesOpen && ( - setSourcesOpen(false)} /> - )} - - {/* Search results slide-out panel */} - {searchPanelOpen && !sourcesOpen && ( - { - useAppStore.getState().setSearchTerm("") - useGraphStore.getState().setGraphData([], []) - }} - /> - )} - -
+
{/* Top bar */}
@@ -53,10 +50,24 @@ export function AppLayout() {
- {/* Main viewport */} -
- -
+ {/* Content area — panels overlay here */} +
+ {sourcesOpen && ( +
+ setSourcesOpen(false)} /> +
+ )} + + {searchPanelOpen && ( +
+ +
+ )} + +
+ +
+
diff --git a/src/components/layout/search-results-panel.tsx b/src/components/layout/search-results-panel.tsx index 67c489a..7add0ff 100644 --- a/src/components/layout/search-results-panel.tsx +++ b/src/components/layout/search-results-panel.tsx @@ -16,7 +16,7 @@ function NodeRow({ node }: { node: GraphNode }) { const nodeType = node.node_type ?? "Unknown" return ( -