Add body text search with snippets in sidebar

beNative · beNative · commit b0ff60c7edb1 · 2025-10-04T15:24:51.000+02:00
diff --git a/App.tsx b/App.tsx
@@ -120,6 +120,7 @@ const MainApp: React.FC = () => {
     const [contextMenu, setContextMenu] = useState<{ isOpen: boolean; position: { x: number, y: number }, items: MenuItem[] }>({ isOpen: false, position: { x: 0, y: 0 }, items: [] });
     const [isDraggingFile, setIsDraggingFile] = useState(false);
     const [formatTrigger, setFormatTrigger] = useState(0);
+    const [bodySearchMatches, setBodySearchMatches] = useState<Map<string, string>>(new Map());
 
 
     const isSidebarResizing = useRef(false);
@@ -171,9 +172,20 @@ const MainApp: React.FC = () => {
     }, [theme, settings.markdownCodeBlockBackgroundLight, settings.markdownCodeBlockBackgroundDark, settingsLoaded]);
 
 
+    const itemsWithSearchMetadata = useMemo(() => {
+        const trimmed = searchTerm.trim();
+        if (!trimmed || bodySearchMatches.size === 0) {
+            return items;
+        }
+        return items.map(item => {
+            const snippet = bodySearchMatches.get(item.id);
+            return snippet ? { ...item, searchSnippet: snippet } : item;
+        });
+    }, [items, bodySearchMatches, searchTerm]);
+
     const activeNode = useMemo(() => {
-        return items.find(p => p.id === activeNodeId) || null;
-    }, [items, activeNodeId]);
+        return itemsWithSearchMetadata.find(p => p.id === activeNodeId) || null;
+    }, [itemsWithSearchMetadata, activeNodeId]);
 
     const activeTemplate = useMemo(() => {
         return templates.find(t => t.template_id === activeTemplateId) || null;
@@ -184,35 +196,71 @@ const MainApp: React.FC = () => {
     }, [activeNode]);
 
 
+    useEffect(() => {
+        const term = searchTerm.trim();
+        if (!term) {
+            setBodySearchMatches(new Map());
+            return;
+        }
+
+        let isCancelled = false;
+
+        repository.searchDocumentsByBody(term, 200)
+            .then(results => {
+                if (!isCancelled) {
+                    setBodySearchMatches(new Map(results.map(result => [result.nodeId, result.snippet])));
+                }
+            })
+            .catch(error => {
+                if (!isCancelled) {
+                    console.error('Failed to search document bodies:', error);
+                    setBodySearchMatches(new Map());
+                }
+            });
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [searchTerm]);
+
     const { documentTree, navigableItems } = useMemo(() => {
-        let itemsToBuildFrom = items;
+        let itemsToBuildFrom = itemsWithSearchMetadata;
         if (searchTerm.trim()) {
             const lowerCaseSearchTerm = searchTerm.toLowerCase();
             const visibleIds = new Set<string>();
-            const originalItemsById: Map<string, DocumentOrFolder> = new Map(items.map(i => [i.id, i]));
+            const originalItemsById: Map<string, DocumentOrFolder> = new Map(itemsWithSearchMetadata.map(i => [i.id, i]));
             const getAncestors = (itemId: string) => {
                 let current = originalItemsById.get(itemId);
                 while (current && current.parentId) {
-                visibleIds.add(current.parentId);
-                current = originalItemsById.get(current.parentId);
+                    visibleIds.add(current.parentId);
+                    current = originalItemsById.get(current.parentId);
                 }
             };
             const getDescendantIdsRecursive = (itemId: string): Set<string> => {
                 const descendantIds = new Set<string>();
                 const findChildren = (parentId: string) => {
-                    items.forEach(p => { if (p.parentId === parentId) { descendantIds.add(p.id); if (p.type === 'folder') findChildren(p.id); } });
+                    itemsWithSearchMetadata.forEach(p => {
+                        if (p.parentId === parentId) {
+                            descendantIds.add(p.id);
+                            if (p.type === 'folder') findChildren(p.id);
+                        }
+                    });
                 };
                 findChildren(itemId);
                 return descendantIds;
             };
-            items.forEach(item => {
-                if (item.title.toLowerCase().includes(lowerCaseSearchTerm)) {
+            itemsWithSearchMetadata.forEach(item => {
+                const titleMatch = item.title.toLowerCase().includes(lowerCaseSearchTerm);
+                const bodyMatch = Boolean(item.searchSnippet);
+                if (titleMatch || bodyMatch) {
                     visibleIds.add(item.id);
                     getAncestors(item.id);
-                    if (item.type === 'folder') getDescendantIdsRecursive(item.id).forEach(id => visibleIds.add(id));
+                    if (titleMatch && item.type === 'folder') {
+                        getDescendantIdsRecursive(item.id).forEach(id => visibleIds.add(id));
+                    }
                 }
             });
-            itemsToBuildFrom = items.filter(item => visibleIds.has(item.id));
+            itemsToBuildFrom = itemsWithSearchMetadata.filter(item => visibleIds.has(item.id));
         }
         const itemsById = new Map<string, DocumentNode>(itemsToBuildFrom.map(p => [p.id, { ...p, children: [] }]));
         const rootNodes: DocumentNode[] = [];
@@ -224,27 +272,27 @@ const MainApp: React.FC = () => {
                 rootNodes.push(node);
             }
         }
-        
+
         const finalTree = rootNodes;
 
-        const displayExpandedIds = searchTerm.trim() 
-            ? new Set(itemsToBuildFrom.filter(i => i.type === 'folder').map(i => i.id)) 
+        const displayExpandedIds = searchTerm.trim()
+            ? new Set(itemsToBuildFrom.filter(i => i.type === 'folder').map(i => i.id))
             : expandedFolderIds;
 
         const flatList: NavigableItem[] = [];
         const flatten = (nodes: DocumentNode[]) => {
-        for (const node of nodes) {
-            flatList.push({ id: node.id, type: node.type, parentId: node.parentId });
-            if (node.type === 'folder' && displayExpandedIds.has(node.id)) {
-            flatten(node.children);
+            for (const node of nodes) {
+                flatList.push({ id: node.id, type: node.type, parentId: node.parentId });
+                if (node.type === 'folder' && displayExpandedIds.has(node.id)) {
+                    flatten(node.children);
+                }
             }
-        }
         };
         flatten(finalTree);
         templates.forEach(t => flatList.push({ id: t.template_id, type: 'template', parentId: null }));
 
         return { documentTree: finalTree, navigableItems: flatList };
-    }, [items, templates, searchTerm, expandedFolderIds]);
+    }, [itemsWithSearchMetadata, templates, searchTerm, expandedFolderIds]);
 
     useEffect(() => {
         if (window.electronAPI?.getAppVersion) {
@@ -1100,8 +1148,8 @@ const MainApp: React.FC = () => {
                                     style={{ width: `${sidebarWidth}px` }} 
                                     className="bg-secondary border-r border-border-color flex flex-col flex-shrink-0"
                                 >
-                                    <Sidebar 
-                                        documents={items}
+                                    <Sidebar
+                                        documents={itemsWithSearchMetadata}
                                         documentTree={documentTree}
                                         navigableItems={navigableItems}
                                         selectedIds={selectedIds}
diff --git a/components/PromptTreeItem.tsx b/components/PromptTreeItem.tsx
@@ -57,6 +57,27 @@ const getDropPosition = (
   }
 };
 
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+const highlightMatches = (text: string, term: string): React.ReactNode => {
+  if (!term.trim()) {
+    return text;
+  }
+  const escaped = escapeRegExp(term.trim());
+  const regex = new RegExp(`(${escaped})`, 'ig');
+  const parts = text.split(regex);
+  return parts.map((part, index) => {
+    if (index % 2 === 1) {
+      return (
+        <span key={index} className="bg-primary/20 text-text-main rounded-sm px-0.5">
+          {part}
+        </span>
+      );
+    }
+    return <React.Fragment key={index}>{part}</React.Fragment>;
+  });
+};
+
 
 const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const {
@@ -80,7 +101,8 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
     renamingNodeId,
     onRenameComplete,
     indentPerLevel,
-    verticalSpacing
+    verticalSpacing,
+    searchTerm,
   } = props;
   
   const [isRenaming, setIsRenaming] = useState(false);
@@ -192,6 +214,7 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const paddingTopBottom = Math.max(verticalSpacing, 0);
   const basePaddingLeft = 4; // matches Tailwind px-1 for consistent baseline spacing
   const rowPaddingLeft = basePaddingLeft + Math.max(level, 0) * safeIndent;
+  const snippetPaddingLeft = rowPaddingLeft + 28;
 
   return (
     <li
@@ -240,7 +263,7 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
                         className="w-full text-left text-xs px-1.5 py-1 rounded-md bg-background text-text-main border border-border-color focus:outline-none focus:ring-1 focus:ring-primary"
                     />
                 ) : (
-                    <span className="truncate flex-1 px-1">{node.title}</span>
+                    <span className="truncate flex-1 px-1">{highlightMatches(node.title, searchTerm)}</span>
                 )}
             </div>
 
@@ -263,7 +286,16 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
                 </div>
             )}
         </div>
-        
+
+        {!isFolder && searchTerm.trim() && node.searchSnippet && (
+            <div
+                className="text-[11px] text-text-secondary leading-snug truncate pr-3"
+                style={{ paddingLeft: `${snippetPaddingLeft}px` }}
+            >
+                {highlightMatches(node.searchSnippet, searchTerm)}
+            </div>
+        )}
+
         {dropPosition && <div className={`absolute left-0 right-0 h-0.5 bg-primary pointer-events-none ${
             dropPosition === 'before' ? 'top-0' : dropPosition === 'after' ? 'bottom-0' : ''
         }`} />}
diff --git a/services/repository.ts b/services/repository.ts
@@ -196,6 +196,43 @@ const mapNodeTree = (nodes: Node[], mapper: (node: Node) => void) => {
     }
 };
 
+const escapeForLikePattern = (value: string): string => value.replace(/([\\%_])/g, '\\$1');
+
+const createSnippetFromContent = (content: string, term: string, snippetLength: number = 160): string => {
+    const normalizedContent = content.replace(/\s+/g, ' ').trim();
+    if (!normalizedContent) {
+        return '';
+    }
+
+    const lowerContent = normalizedContent.toLowerCase();
+    const lowerTerm = term.toLowerCase();
+    const matchIndex = lowerContent.indexOf(lowerTerm);
+
+    if (matchIndex === -1) {
+        if (normalizedContent.length <= snippetLength) {
+            return normalizedContent;
+        }
+        return `${normalizedContent.slice(0, snippetLength).trim()}…`;
+    }
+
+    const halfWindow = Math.max(0, Math.floor((snippetLength - lowerTerm.length) / 2));
+    let start = Math.max(0, matchIndex - halfWindow);
+    let end = Math.min(normalizedContent.length, matchIndex + lowerTerm.length + halfWindow);
+
+    if (end - start > snippetLength) {
+        end = start + snippetLength;
+    }
+
+    let snippet = normalizedContent.slice(start, end).trim();
+    if (start > 0) {
+        snippet = `…${snippet}`;
+    }
+    if (end < normalizedContent.length) {
+        snippet = `${snippet}…`;
+    }
+    return snippet;
+};
+
 const duplicateNodeRecursive = (state: BrowserState, node: Node, newParentId: string | null, sortOrder: number): Node => {
     const now = new Date().toISOString();
     const clonedNode: Node = {
@@ -484,6 +521,65 @@ export const repository = {
         return rootNodes;
     },
 
+    async searchDocumentsByBody(searchTerm: string, limit: number = 50): Promise<{ nodeId: string; snippet: string }[]> {
+        const term = searchTerm.trim();
+        if (!term) {
+            return [];
+        }
+
+        if (limit <= 0) {
+            return [];
+        }
+
+        if (!isElectron) {
+            const state = ensureBrowserState();
+            const lowerTerm = term.toLowerCase();
+            const results: { nodeId: string; snippet: string }[] = [];
+            mapNodeTree(state.nodes, node => {
+                if (node.node_type !== 'document' || !node.document?.content) {
+                    return;
+                }
+                const content = node.document.content;
+                if (content.toLowerCase().includes(lowerTerm)) {
+                    results.push({
+                        nodeId: node.node_id,
+                        snippet: createSnippetFromContent(content, term),
+                    });
+                }
+            });
+            return results.slice(0, Math.max(limit, 0));
+        }
+
+        if (!window.electronAPI) {
+            return [];
+        }
+
+        const lowerTerm = term.toLowerCase();
+        const pattern = `%${escapeForLikePattern(lowerTerm)}%`;
+        const maxResults = Math.max(limit, 0) || 50;
+
+        const rows = await window.electronAPI.dbQuery(
+            `
+            SELECT d.node_id as node_id, cs.text_content as content
+            FROM documents d
+            JOIN doc_versions dv ON d.current_version_id = dv.version_id
+            JOIN content_store cs ON dv.content_id = cs.content_id
+            WHERE cs.text_content IS NOT NULL
+              AND cs.text_content != ''
+              AND LOWER(cs.text_content) LIKE ? ESCAPE '\\'
+            LIMIT ?
+        `,
+            [pattern, maxResults],
+        );
+
+        return rows
+            .filter(row => typeof row.content === 'string' && row.content.length > 0)
+            .map(row => ({
+                nodeId: row.node_id,
+                snippet: createSnippetFromContent(row.content, term),
+            }));
+    },
+
     async addNode(nodeData: Omit<Node, 'node_id' | 'sort_order' | 'created_at' | 'updated_at'>): Promise<Node> {
         if (!isElectron) {
             const state = ensureBrowserState();
diff --git a/types.ts b/types.ts
@@ -217,6 +217,7 @@ export interface DocumentOrFolder {
   doc_type?: DocType;
   language_hint?: string | null;
   default_view_mode?: ViewMode | null;
+  searchSnippet?: string;
 }
 
 // Fix: Renamed LegacyPromptVersion to DocumentVersion and aliased it to the new DocVersion type

Original file line number	Diff line number	Diff line change
`@@ -217,6 +217,7 @@ export interface DocumentOrFolder {`
`217`	`217`	`doc_type?: DocType;`
`218`	`218`	`language_hint?: string \| null;`
`219`	`219`	`default_view_mode?: ViewMode \| null;`
	`220`	`+ searchSnippet?: string;`
`220`	`221`	`}`
`221`	`222`
`222`	`223`	`// Fix: Renamed LegacyPromptVersion to DocumentVersion and aliased it to the new DocVersion type`