Add cmd+click to open preview panel

Author: brendan-kellam

packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx

@@ -15,7 +15,7 @@ import { Cross1Icon, FileIcon } from "@radix-ui/react-icons";
 import { Scrollbar } from "@radix-ui/react-scroll-area";
 import CodeMirror, { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
 import { ArrowDown, ArrowUp } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 import { SymbolHoverPopup } from "@/ee/features/codeNav/components/symbolHoverPopup";
 import { symbolHoverTargetsExtension } from "@/ee/features/codeNav/components/symbolHoverPopup/symbolHoverTargetsExtension";
@@ -34,18 +34,21 @@ export interface CodePreviewFile {
 interface CodePreviewProps {
     file: CodePreviewFile;
     repoName: string;
+    selectedMatchIndex: number;
+    onSelectedMatchIndexChange: Dispatch<SetStateAction<number>>;
     onClose: () => void;
 }
 
 export const CodePreview = ({
     file,
     repoName,
+    selectedMatchIndex,
+    onSelectedMatchIndexChange,
     onClose,
 }: CodePreviewProps) => {
     const [editorRef, setEditorRef] = useState<ReactCodeMirrorRef | null>(null);
     const { navigateToPath } = useBrowseNavigation();
     const hasCodeNavEntitlement = useHasEntitlement("code-nav");
-    const [selectedMatchIndex, setSelectedMatchIndex] = useState(0);
 
     const [gutterWidth, setGutterWidth] = useState(0);
     const theme = useCodeMirrorTheme();
@@ -101,12 +104,12 @@ export const CodePreview = ({
     }, [ranges, selectedMatchIndex, file, editorRef]);
 
     const onUpClicked = useCallback(() => {
-        setSelectedMatchIndex((prev) => prev - 1);
-    }, []);
+        onSelectedMatchIndexChange((prev) => prev - 1);
+    }, [onSelectedMatchIndexChange]);
 
     const onDownClicked = useCallback(() => {
-        setSelectedMatchIndex((prev) => prev + 1);
-    }, []);
+        onSelectedMatchIndexChange((prev) => prev + 1);
+    }, [onSelectedMatchIndexChange]);
 
     const onGotoDefinition = useCallback((symbolName: string, symbolDefinitions: SymbolDefinition[]) => {
         if (symbolDefinitions.length === 0) {

packages/web/src/app/[domain]/search/components/codePreviewPanel/index.tsx

@@ -5,19 +5,23 @@ import { CodePreview } from "./codePreview";
 import { SearchResultFile } from "@/features/search/types";
 import { useDomain } from "@/hooks/useDomain";
 import { SymbolIcon } from "@radix-ui/react-icons";
-import { useMemo } from "react";
+import { SetStateAction, Dispatch, useMemo } from "react";
 import { getFileSource } from "@/features/search/fileSourceApi";
 import { base64Decode } from "@/lib/utils";
 import { unwrapServiceError } from "@/lib/utils";
 
 interface CodePreviewPanelProps {
     previewedFile: SearchResultFile;
+    selectedMatchIndex: number;
     onClose: () => void;
+    onSelectedMatchIndexChange: Dispatch<SetStateAction<number>>;
 }
 
 export const CodePreviewPanel = ({
     previewedFile,
+    selectedMatchIndex,
     onClose,
+    onSelectedMatchIndexChange,
 }: CodePreviewPanelProps) => {
     const domain = useDomain();
 
@@ -67,6 +71,8 @@ export const CodePreviewPanel = ({
         <CodePreview
             file={file}
             repoName={previewedFile.repository}
+            selectedMatchIndex={selectedMatchIndex}
+            onSelectedMatchIndexChange={onSelectedMatchIndexChange}
             onClose={onClose}
         />
     )

packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatch.tsx

@@ -3,44 +3,31 @@
 import { useCallback, useMemo } from "react";
 import { SearchResultFile, SearchResultChunk } from "@/features/search/types";
 import { base64Decode } from "@/lib/utils";
-import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter";
 
 
 interface FileMatchProps {
     match: SearchResultChunk;
     file: SearchResultFile;
+    onOpen: (startLineNumber: number, endLineNumber: number, isCtrlKeyPressed: boolean) => void;
 }
 
 export const FileMatch = ({
     match,
     file,
+    onOpen: _onOpen,
 }: FileMatchProps) => {
-    const { navigateToPath } = useBrowseNavigation();
 
     const content = useMemo(() => {
         return base64Decode(match.content);
     }, [match.content]);
 
-    const onOpen = useCallback(() => {
+    const onOpen = useCallback((isCtrlKeyPressed: boolean) => {
         const startLineNumber = match.contentStart.lineNumber;
         const endLineNumber = content.trimEnd().split('\n').length + startLineNumber - 1;
 
-        navigateToPath({
-            repoName: file.repository,
-            revisionName: file.branches?.[0] ?? 'HEAD',
-            path: file.fileName.text,
-            pathType: 'blob',
-            highlightRange: {
-                start: {
-                    lineNumber: startLineNumber,
-                },
-                end: {
-                    lineNumber: endLineNumber,
-                }
-            }
-        })
-    }, []);
+        _onOpen(startLineNumber, endLineNumber, isCtrlKeyPressed);
+    }, [content, match.contentStart.lineNumber, _onOpen]);
 
     // If it's just the title, don't show a code preview
     if (match.matchRanges.length === 0) {
@@ -55,9 +42,13 @@ export const FileMatch = ({
                 if (e.key !== "Enter") {
                     return;
                 }
-                onOpen();
+
+                onOpen(e.metaKey || e.ctrlKey);
+            }}
+            onClick={(e) => {
+                onOpen(e.metaKey || e.ctrlKey);
             }}
-            onClick={onOpen}
+            title="Open file preview (cmd/ctrl + click)"
         >
             <LightweightCodeHighlighter
                 language={file.language}

packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx

@@ -7,12 +7,13 @@ import { useMemo } from "react";
 import { FileMatch } from "./fileMatch";
 import { RepositoryInfo, SearchResultFile } from "@/features/search/types";
 import { Button } from "@/components/ui/button";
+import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 
 export const MAX_MATCHES_TO_PREVIEW = 3;
 
 interface FileMatchContainerProps {
     file: SearchResultFile;
-    onOpenFilePreview: () => void;
+    onOpenFilePreview: (matchIndex?: number) => void;
     showAllMatches: boolean;
     onShowAllMatchesButtonClicked: () => void;
     isBranchFilteringEnabled: boolean;
@@ -32,6 +33,7 @@ export const FileMatchContainer = ({
     const matchCount = useMemo(() => {
         return file.chunks.length;
     }, [file]);
+    const { navigateToPath } = useBrowseNavigation();
 
     const matches = useMemo(() => {
         const sortedMatches = file.chunks.sort((a, b) => {
@@ -81,7 +83,6 @@ export const FileMatchContainer = ({
         return repoInfo[file.repositoryId];
     }, [repoInfo, file.repositoryId]);
 
-
     return (
         <div>
             {/* Title */}
@@ -103,15 +104,15 @@ export const FileMatchContainer = ({
                     branchDisplayName={branchDisplayName}
                     branchDisplayTitle={branches.join(", ")}
                 />
-                <Button
-                    variant="link"
-                    className="text-blue-500 h-5"
-                    onClick={() => {
-                        onOpenFilePreview();
-                    }}
-                >
-                    Preview
-                </Button>
+                    <Button
+                        variant="link"
+                        className="text-blue-500 h-5"
+                        onClick={() => {
+                            onOpenFilePreview();
+                        }}
+                    >
+                        Preview
+                    </Button>
             </div>
 
             {/* Matches */}
@@ -122,6 +123,29 @@ export const FileMatchContainer = ({
                     <FileMatch
                         match={match}
                         file={file}
+                        onOpen={(startLineNumber, endLineNumber, isCtrlKeyPressed) => {
+                            if (isCtrlKeyPressed) {
+                                const matchIndex = matches.slice(0, index).reduce((acc, match) => {
+                                    return acc + match.matchRanges.length;
+                                }, 0);
+                                onOpenFilePreview(matchIndex);
+                            } else {
+                                navigateToPath({
+                                    repoName: file.repository,
+                                    revisionName: file.branches?.[0] ?? 'HEAD',
+                                    path: file.fileName.text,
+                                    pathType: 'blob',
+                                    highlightRange: {
+                                        start: {
+                                            lineNumber: startLineNumber,
+                                        },
+                                        end: {
+                                            lineNumber: endLineNumber,
+                                        }
+                                    }
+                                });
+                            }
+                        }}
                     />
                     {(index !== matches.length - 1 || isMoreContentButtonVisible) && (
                         <Separator className="bg-accent" />

packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx

@@ -8,7 +8,7 @@ import { useDebounce, usePrevious } from "@uidotdev/usehooks";
 
 interface SearchResultsPanelProps {
     fileMatches: SearchResultFile[];
-    onOpenFilePreview: (fileMatch: SearchResultFile) => void;
+    onOpenFilePreview: (fileMatch: SearchResultFile, matchIndex?: number) => void;
     isLoadMoreButtonVisible: boolean;
     onLoadMoreButtonClicked: () => void;
     isBranchFilteringEnabled: boolean;
@@ -150,8 +150,8 @@ export const SearchResultsPanel = ({
                         >
                             <FileMatchContainer
                                 file={file}
-                                onOpenFilePreview={() => {
-                                    onOpenFilePreview(file);
+                                onOpenFilePreview={(matchIndex) => {
+                                    onOpenFilePreview(file, matchIndex);
                                 }}
                                 showAllMatches={showAllMatchesStates[virtualRow.index]}
                                 onShowAllMatchesButtonClicked={() => {

packages/web/src/app/[domain]/search/page.tsx

@@ -222,6 +222,7 @@ const PanelGroup = ({
     const [previewedFile, setPreviewedFile] = useState<SearchResultFile | undefined>(undefined);
     const filteredFileMatches = useFilteredMatches(fileMatches);
     const filterPanelRef = useRef<ImperativePanelHandle>(null);
+    const [selectedMatchIndex, setSelectedMatchIndex] = useState(0);
 
     const [isFilterPanelCollapsed, setIsFilterPanelCollapsed] = useLocalStorage('isFilterPanelCollapsed', false);
 
@@ -313,7 +314,8 @@ const PanelGroup = ({
                 {filteredFileMatches.length > 0 ? (
                     <SearchResultsPanel
                         fileMatches={filteredFileMatches}
-                        onOpenFilePreview={(fileMatch) => {
+                        onOpenFilePreview={(fileMatch, matchIndex) => {
+                            setSelectedMatchIndex(matchIndex ?? 0);
                             setPreviewedFile(fileMatch);
                         }}
                         isLoadMoreButtonVisible={!!isMoreResultsButtonVisible}
@@ -342,6 +344,8 @@ const PanelGroup = ({
                         <CodePreviewPanel
                             previewedFile={previewedFile}
                             onClose={() => setPreviewedFile(undefined)}
+                            selectedMatchIndex={selectedMatchIndex}
+                            onSelectedMatchIndexChange={setSelectedMatchIndex}
                         />
                     </ResizablePanel>
                 </>