Merge pull request #232 from beNative/codex/add-left-border-with-padding-on-snippet-containers

Add subtle accent bars to snippet containers

Author: beNative

components/FolderOverview.tsx

@@ -360,7 +360,9 @@ const FolderOverview: React.FC<FolderOverviewProps> = ({
                                                                     {highlightMatches(formattedTitle, folderSearchTerm)}
                                                                 </p>
                                                                 {result.searchSnippet && (
-                                                                    <p className="mt-0.5 text-[11px] leading-snug text-text-secondary/70">
+                                                                    <p
+                                                                        className="mt-0.5 -ml-2 border-l border-primary/30 pl-2 text-[11px] leading-snug text-text-secondary"
+                                                                    >
                                                                         {highlightMatches(result.searchSnippet, folderSearchTerm)}
                                                                     </p>
                                                                 )}

components/PromptTreeItem.tsx

@@ -352,6 +352,8 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const basePaddingLeft = 4; // matches Tailwind px-1 for consistent baseline spacing
   const rowPaddingLeft = basePaddingLeft + Math.max(level, 0) * safeIndent;
   const snippetPaddingLeft = rowPaddingLeft + 28;
+  const snippetAccentPadding = 8;
+  const snippetMarginLeft = Math.max(snippetPaddingLeft - snippetAccentPadding, 0);
 
   return (
     <li
@@ -512,8 +514,11 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
 
         {!isFolder && searchTerm.trim() && node.searchSnippet && (
             <div
-                className="text-[11px] text-text-secondary/70 leading-snug whitespace-pre-wrap break-words pr-3"
-                style={{ paddingLeft: `${snippetPaddingLeft}px` }}
+                className="text-[11px] text-text-secondary leading-snug whitespace-pre-wrap break-words pr-3 border-l border-primary/30"
+                style={{
+                    marginLeft: `${snippetMarginLeft}px`,
+                    paddingLeft: `${snippetAccentPadding}px`,
+                }}
             >
                 {highlightMatches(node.searchSnippet, searchTerm)}
             </div>