*/} {dialogState.content} ``` ### Key CSS Classes - `shrink-0` - Prevents header from shrinking - `flex-1` - Allows content to grow and fill space - `min-h-0` - Critical for flex children to allow shrinking below content size (enables overflow) - `overflow-y-auto` - For scrollable sections ### Why min-h-0 Matters In flexbox, children have `min-height: auto` by default, which means they won't shrink below their content size. This breaks overflow scrolling. Adding `min-h-0` allows the element to shrink, enabling `overflow-y-auto` to work. ## Reference Implementation: Search Notes Dialog Located at `src/features/notes/search-notes-dialog.tsx`, this demonstrates the full pattern. ### Opening via CommandDialogProvider ```tsx openDialog({ title: "Search Notes", description: "Search for text across all your notes", content: , size: "jumbo", }); ``` ### Two-Column Layout Pattern ```tsx

{/* Fixed top section - search input */}

{/* Two-column scrollable area */}

{/* Left column - results list */}

{/* Results items */}

{/* Right column - preview */}

{/* Preview content */}

``` ### Theme-Aware Highlights Use theme system colors for search highlights: ```tsx import { useTheme } from "@/hooks/useTheme"; const { currentTheme } = useTheme(); const { styles } = currentTheme; // For inline text highlights (search matches) {matchedText} // For line/row highlights (match context)

{lineContent}

``` ### Available Theme Colors From `useTheme().currentTheme.styles`: **Surfaces (backgrounds):** - `surfacePrimary` - Main background - `surfaceSecondary` - Secondary/elevated background - `surfaceTertiary` - Hover states, selected items - `surfaceAccent` - Accent/highlight backgrounds - `surfaceMuted` - Muted backgrounds **Content (text):** - `contentPrimary` - Main text - `contentSecondary` - Secondary text - `contentTertiary` - Muted/disabled text - `contentAccent` - Accent text **Borders:** - `borderDefault` - Standard borders - `borderAccent` - Accent borders **Semantic (actions/status):** - `semanticPrimary` / `semanticPrimaryForeground` - Primary actions, highlights - `semanticDestructive` / `semanticDestructiveForeground` - Delete, danger - `semanticSuccess` / `semanticSuccessForeground` - Success states ### Keyboard Navigation Implement arrow key navigation for lists: ```tsx const [selectedIndex, setSelectedIndex] = React.useState(0); React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowDown") { e.preventDefault(); setSelectedIndex(prev => (prev + 1) % results.length); } else if (e.key === "ArrowUp") { e.preventDefault(); setSelectedIndex(prev => (prev - 1 + results.length) % results.length); } else if (e.key === "Enter") { e.preventDefault(); // Open selected item } else if (e.key === "Escape") { e.preventDefault(); closeDialog(); } }; document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [results, selectedIndex]); ``` ### Auto-scroll Selected Item Into View ```tsx const resultsContainerRef = React.useRef(null); React.useEffect(() => { if (resultsContainerRef.current && results.length > 0) { const selectedElement = resultsContainerRef.current.querySelector( `[data-index="${selectedIndex}"]` ); if (selectedElement) { selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" }); } } }, [selectedIndex, results.length]); // In JSX:

{results.map((result, index) => (

{/* ... */}

))}

``` ### Scroll-to-Line on Note Open When opening a note from search results, scroll to the first match: ```tsx // In search dialog - pass scrollToLine when opening const openNote = (fileName: string, scrollToLine?: number) => { addNewTab({ pluginMeta: notesPluginSerial, view: "editor", props: { noteFileName: fileName, scrollToLine } }); }; // Get first content match line const contentMatches = result.matches.filter(m => m.line > 0); const firstMatchLine = contentMatches.length > 0 ? contentMatches[0].line : undefined; openNote(result.fileName, firstMatchLine); ``` The `NotesView` component accepts `scrollToLine` prop and scrolls the ProseMirror editor to that line on initial load. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/firstloophq) — claim your Tome and manage your conversions.