refactor componenets into seperate files

Author: brendan-kellam

src/app/search/codePreviewPanel.tsx …ponents/codePreviewPanel/codePreview.tsxsrc/app/search/codePreviewPanel.tsx renamed to src/app/search/components/codePreviewPanel/codePreview.tsx src/app/search/codePreviewPanel.tsx renamed to src/app/search/components/codePreviewPanel/codePreview.tsx

@@ -28,19 +28,19 @@ export interface CodePreviewFile {
     language: string;
 }
 
-interface CodePreviewPanelProps {
+interface CodePreviewProps {
     file?: CodePreviewFile;
     selectedMatchIndex: number;
     onSelectedMatchIndexChange: (index: number) => void;
     onClose: () => void;
 }
 
-export const CodePreviewPanel = ({
+export const CodePreview = ({
     file,
     selectedMatchIndex,
     onSelectedMatchIndexChange,
     onClose,
-}: CodePreviewPanelProps) => {
+}: CodePreviewProps) => {
     const editorRef = useRef<ReactCodeMirrorRef>(null);
 
     const [ keymapType ] = useKeymapType();

src/app/search/components/codePreviewPanel/index.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { fetchFileSource } from "@/app/api/(client)/client";
+import { SearchResultFile } from "@/lib/schemas";
+import { getCodeHostFilePreviewLink } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
+import { CodePreview, CodePreviewFile } from "./codePreview";
+
+interface CodePreviewPanelProps {
+    fileMatch?: SearchResultFile;
+    onClose: () => void;
+    selectedMatchIndex: number;
+    onSelectedMatchIndexChange: (index: number) => void;
+}
+
+export const CodePreviewPanel = ({
+    fileMatch,
+    onClose,
+    selectedMatchIndex,
+    onSelectedMatchIndexChange,
+}: CodePreviewPanelProps) => {
+
+    const { data: file } = useQuery({
+        queryKey: ["source", fileMatch?.FileName, fileMatch?.Repository],
+        queryFn: async (): Promise<CodePreviewFile | undefined> => {
+            if (!fileMatch) {
+                return undefined;
+            }
+
+            return fetchFileSource(fileMatch.FileName, fileMatch.Repository)
+                .then(({ source }) => {
+                    // @todo : refector this to use the templates provided by zoekt.
+                    const link = getCodeHostFilePreviewLink(fileMatch.Repository, fileMatch.FileName)
+
+                    const decodedSource = atob(source);
+
+                    // Filter out filename matches
+                    const filteredMatches = fileMatch.ChunkMatches.filter((match) => {
+                        return !match.FileName;
+                    });
+
+                    return {
+                        content: decodedSource,
+                        filepath: fileMatch.FileName,
+                        matches: filteredMatches,
+                        link: link,
+                        language: fileMatch.Language,
+                    };
+                });
+        },
+        enabled: fileMatch !== undefined,
+    });
+
+    return (
+        <CodePreview
+            file={file}
+            onClose={onClose}
+            selectedMatchIndex={selectedMatchIndex}
+            onSelectedMatchIndexChange={onSelectedMatchIndexChange}
+        />
+    )
+
+}

src/app/search/components/searchResultsPanel/codePreview.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useExtensionWithDependency } from "@/hooks/useExtensionWithDependency";
+import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
+import { useThemeNormalized } from "@/hooks/useThemeNormalized";
+import { lineOffsetExtension } from "@/lib/extensions/lineOffsetExtension";
+import { SearchResultRange } from "@/lib/schemas";
+import CodeMirror, { Decoration, DecorationSet, EditorState, EditorView, ReactCodeMirrorRef, StateField, Transaction } from "@uiw/react-codemirror";
+import { useMemo, useRef } from "react";
+
+const markDecoration = Decoration.mark({
+    class: "cm-searchMatch"
+});
+
+const cmTheme = EditorView.baseTheme({
+    "&light .cm-searchMatch": {
+        border: "1px #6b7280ff",
+    },
+    "&dark .cm-searchMatch": {
+        border: "1px #d1d5dbff",
+    },
+});
+
+interface CodePreviewProps {
+    content: string,
+    language: string,
+    ranges: SearchResultRange[],
+    lineOffset: number,
+}
+
+export const CodePreview = ({
+    content,
+    language,
+    ranges,
+    lineOffset,
+}: CodePreviewProps) => {
+    const editorRef = useRef<ReactCodeMirrorRef>(null);
+    const { theme } = useThemeNormalized();
+
+    const syntaxHighlighting = useSyntaxHighlightingExtension(language, editorRef.current?.view);
+
+    const rangeHighlighting = useExtensionWithDependency(editorRef.current?.view ?? null, () => {
+        return [
+            StateField.define<DecorationSet>({
+                create(editorState: EditorState) {
+                    const document = editorState.doc;
+
+                    const decorations = ranges
+                        .sort((a, b) => {
+                            return a.Start.ByteOffset - b.Start.ByteOffset;
+                        })
+                        .filter(({ Start, End }) => {
+                            const startLine = Start.LineNumber - lineOffset;
+                            const endLine = End.LineNumber - lineOffset;
+
+                            if (
+                                startLine < 1 ||
+                                endLine < 1 ||
+                                startLine > document.lines ||
+                                endLine > document.lines
+                            ) {
+                                return false;
+                            }
+                            return true;
+                        })
+                        .map(({ Start, End }) => {
+                            const startLine = Start.LineNumber - lineOffset;
+                            const endLine = End.LineNumber - lineOffset;
+
+                            const from = document.line(startLine).from + Start.Column - 1;
+                            const to = document.line(endLine).from + End.Column - 1;
+                            return markDecoration.range(from, to);
+                        });
+
+                    return Decoration.set(decorations);
+                },
+                update(highlights: DecorationSet, _transaction: Transaction) {
+                    return highlights;
+                },
+                provide: (field) => EditorView.decorations.from(field),
+            }),
+            cmTheme
+        ];
+    }, [ranges, lineOffset]);
+
+    const extensions = useMemo(() => {
+        return [
+            syntaxHighlighting,
+            lineOffsetExtension(lineOffset),
+            rangeHighlighting,
+        ];
+    }, [syntaxHighlighting, lineOffset, rangeHighlighting]);
+
+    return (
+        <CodeMirror
+            ref={editorRef}
+            readOnly={true}
+            editable={false}
+            value={content}
+            theme={theme === "dark" ? "dark" : "light"}
+            basicSetup={{
+                lineNumbers: true,
+                syntaxHighlighting: true,
+
+                // Disable all this other stuff...
+                ... {
+                    foldGutter: false,
+                    highlightActiveLineGutter: false,
+                    highlightSpecialChars: false,
+                    history: false,
+                    drawSelection: false,
+                    dropCursor: false,
+                    allowMultipleSelections: false,
+                    indentOnInput: false,
+                    bracketMatching: false,
+                    closeBrackets: false,
+                    autocompletion: false,
+                    rectangularSelection: false,
+                    crosshairCursor: false,
+                    highlightActiveLine: false,
+                    highlightSelectionMatches: false,
+                    closeBracketsKeymap: false,
+                    defaultKeymap: false,
+                    searchKeymap: false,
+                    historyKeymap: false,
+                    foldKeymap: false,
+                    completionKeymap: false,
+                    lintKeymap: false,
+                }
+            }}
+            extensions={extensions}
+        />
+    )
+}