From fa42eba35e00dce2c825eb6d68b4bb923f3573d8 Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Tue, 10 Sep 2024 12:24:47 -0700
Subject: [PATCH] Add filename highlighting

---
 src/app/search/codePreviewPanel.tsx   | 44 ++++++++++++-----------
 src/app/search/page.tsx               | 11 ++++--
 src/app/search/searchResultsPanel.tsx | 52 +++++++++++++++++++++++----
 3 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/src/app/search/codePreviewPanel.tsx b/src/app/search/codePreviewPanel.tsx
index e472909f..0b5797f7 100644
--- a/src/app/search/codePreviewPanel.tsx
+++ b/src/app/search/codePreviewPanel.tsx
@@ -110,7 +110,7 @@ export const CodePreviewPanel = ({
 
     return (
         <div className="flex flex-col h-full">
-            <div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3">
+            <div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3 py-0.5">
                 <div className="flex flex-row">
                     <div
                         style={{ width: `${gutterWidth}px` }}
@@ -132,25 +132,29 @@ export const CodePreviewPanel = ({
                     </span>
                 </div>
                 <div className="flex flex-row gap-1 items-center">
-                    <p className="text-sm">{`${selectedMatchIndex + 1} of ${ranges.length}`}</p>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-6 w-6"
-                        disabled={selectedMatchIndex === 0}
-                        onClick={onUpClicked}
-                    >
-                        <ArrowUp className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-6 w-6"
-                        onClick={onDownClicked}
-                        disabled={file ? selectedMatchIndex === ranges.length - 1 : true}
-                    >
-                        <ArrowDown className="h-4 w-4" />
-                    </Button>
+                    {file && file.matches.length > 0 && (
+                        <>
+                            <p className="text-sm">{`${selectedMatchIndex + 1} of ${ranges.length}`}</p>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                disabled={selectedMatchIndex === 0}
+                                onClick={onUpClicked}
+                            >
+                                <ArrowUp className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                onClick={onDownClicked}
+                                disabled={file ? selectedMatchIndex === ranges.length - 1 : true}
+                            >
+                                <ArrowDown className="h-4 w-4" />
+                            </Button>
+                        </>
+                    )}
                     <Button
                         variant="ghost"
                         size="icon"
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 521a64dd..47d4351d 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -101,8 +101,10 @@ export default function SearchPage() {
                 <ResizablePanel minSize={20}>
                     <SearchResultsPanel
                         fileMatches={fileMatches}
-                        onOpenFileMatch={(fileMatch, matchIndex) => {
+                        onOpenFileMatch={(fileMatch) => {
                             setSelectedFile(fileMatch);
+                        }}
+                        onMatchIndexChanged={(matchIndex) => {
                             setSelectedMatchIndex(matchIndex);
                         }}
                     />
@@ -152,10 +154,15 @@ const CodePreviewWrapper = ({
 
                     const decodedSource = atob(source);
 
+                    // Filter out filename matches
+                    const filteredMatches = fileMatch.ChunkMatches.filter((match) => {
+                        return !match.FileName;
+                    });
+
                     return {
                         content: decodedSource,
                         filepath: fileMatch.FileName,
-                        matches: fileMatch.ChunkMatches,
+                        matches: filteredMatches,
                         link: link,
                         language: fileMatch.Language,
                     };
diff --git a/src/app/search/searchResultsPanel.tsx b/src/app/search/searchResultsPanel.tsx
index 2f7b0570..bc3829f7 100644
--- a/src/app/search/searchResultsPanel.tsx
+++ b/src/app/search/searchResultsPanel.tsx
@@ -19,12 +19,14 @@ const MAX_MATCHES_TO_PREVIEW = 3;
 
 interface SearchResultsPanelProps {
     fileMatches: SearchResultFile[];
-    onOpenFileMatch: (fileMatch: SearchResultFile, matchIndex: number) => void;
+    onOpenFileMatch: (fileMatch: SearchResultFile) => void;
+    onMatchIndexChanged: (matchIndex: number) => void;
 }
 
 export const SearchResultsPanel = ({
     fileMatches,
     onOpenFileMatch,
+    onMatchIndexChanged,
 }: SearchResultsPanelProps) => {
     return (
         <ScrollArea className="h-full">
@@ -32,8 +34,11 @@ export const SearchResultsPanel = ({
                 <FilePreview
                     key={index}
                     file={fileMatch}
-                    onOpenFile={(matchIndex) => {
-                        onOpenFileMatch(fileMatch, matchIndex);
+                    onOpenFile={() => {
+                        onOpenFileMatch(fileMatch);
+                    }}
+                    onMatchIndexChanged={(matchIndex) => {
+                        onMatchIndexChanged(matchIndex);
                     }}
                 />
             ))}
@@ -44,12 +49,14 @@ export const SearchResultsPanel = ({
 
 interface FilePreviewProps {
     file: SearchResultFile;
-    onOpenFile: (matchIndex: number) => void;
+    onOpenFile: () => void;
+    onMatchIndexChanged: (matchIndex: number) => void;
 }
 
 const FilePreview = ({
     file,
     onOpenFile,
+    onMatchIndexChanged,
 }: FilePreviewProps) => {
 
     const [showAll, setShowAll] = useState(false);
@@ -69,6 +76,20 @@ const FilePreview = ({
         return sortedMatches;
     }, [file, showAll]);
 
+    const fileNameRange = useMemo(() => {
+        for (const match of matches) {
+            if (match.FileName && match.Ranges.length > 0) {
+                const range = match.Ranges[0];
+                return {
+                    from: range.Start.Column - 1,
+                    to: range.End.Column - 1,
+                }
+            }
+        }
+
+        return null;
+    }, [matches]);
+
     const { repoIcon, repoName, repoLink } = useMemo(() => {
         const info = getRepoCodeHostInfo(file.Repository);
         if (info) {
@@ -96,7 +117,12 @@ const FilePreview = ({
 
     return (
         <div className="flex flex-col">
-            <div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between border">
+            <div
+                className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between border cursor-pointer"
+                onClick={() => {
+                    onOpenFile();
+                }}
+            >
                 <div className="flex flex-row gap-2 items-center">
                     {repoIcon}
                     <span
@@ -111,7 +137,18 @@ const FilePreview = ({
                     >
                         {repoName}
                     </span>
-                    <span>· {file.FileName}</span>
+                    <span>·</span>
+                    {!fileNameRange ? (
+                        <span>{file.FileName}</span> 
+                    ) : (
+                        <span>
+                            {file.FileName.slice(0, fileNameRange.from)}
+                            <span className="bg-yellow-200 dark:bg-blue-700">
+                                {file.FileName.slice(fileNameRange.from, fileNameRange.to)}
+                            </span>
+                            {file.FileName.slice(fileNameRange.to)}
+                        </span>
+                    )}
                 </div>
             </div>
             {matches.map((match, index) => {
@@ -132,7 +169,8 @@ const FilePreview = ({
                             const matchIndex = matches.slice(0, index).reduce((acc, match) => {
                                 return acc + match.Ranges.length;
                             }, 0);
-                            onOpenFile(matchIndex);
+                            onOpenFile();
+                            onMatchIndexChanged(matchIndex);
                         }}
                     >
                         <CodePreview