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

Remove snippet background fills

Author: beNative

components/FolderOverview.tsx

@@ -361,7 +361,13 @@ const FolderOverview: React.FC<FolderOverviewProps> = ({
                                                                 </p>
                                                                 {result.searchSnippet && (
                                                                     <p
-                                                                        className="mt-0.5 -ml-2 border-l border-primary/30 pl-2 text-[11px] leading-snug text-text-secondary"
+                                                                        className="mt-0.5 -ml-2 text-[11px] leading-snug text-text-secondary"
+                                                                        style={{
+                                                                            paddingLeft: '0.75rem',
+                                                                            borderLeftWidth: '3px',
+                                                                            borderLeftStyle: 'solid',
+                                                                            borderLeftColor: 'rgb(var(--color-accent) / 0.45)',
+                                                                        }}
                                                                     >
                                                                         {highlightMatches(result.searchSnippet, folderSearchTerm)}
                                                                     </p>

components/PromptTreeItem.tsx

@@ -353,7 +353,9 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const rowPaddingLeft = basePaddingLeft + Math.max(level, 0) * safeIndent;
   const snippetPaddingLeft = rowPaddingLeft + 28;
   const snippetAccentPadding = 8;
+  const snippetAccentWidth = 3;
   const snippetMarginLeft = Math.max(snippetPaddingLeft - snippetAccentPadding, 0);
+  const snippetAccentColor = 'rgb(var(--color-accent) / 0.45)';
 
   return (
     <li
@@ -514,10 +516,13 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
 
         {!isFolder && searchTerm.trim() && node.searchSnippet && (
             <div
-                className="text-[11px] text-text-secondary leading-snug whitespace-pre-wrap break-words pr-3 border-l border-primary/30"
+                className="text-[11px] text-text-secondary leading-snug whitespace-pre-wrap break-words pr-3"
                 style={{
                     marginLeft: `${snippetMarginLeft}px`,
                     paddingLeft: `${snippetAccentPadding}px`,
+                    borderLeftWidth: `${snippetAccentWidth}px`,
+                    borderLeftStyle: 'solid',
+                    borderLeftColor: snippetAccentColor,
                 }}
             >
                 {highlightMatches(node.searchSnippet, searchTerm)}