Add link to code host file preview

src/app/search/codePreview.tsx

@@ -15,13 +15,15 @@ import { Cross1Icon, FileIcon } from "@radix-ui/react-icons";
 import { Scrollbar } from "@radix-ui/react-scroll-area";
 import { vim } from "@replit/codemirror-vim";
 import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import clsx from "clsx";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 export interface CodePreviewFile {
     content: string;
     filepath: string;
+    link?: string;
     matches: ZoektMatch[];
 }
 
@@ -110,7 +112,18 @@ export const CodePreview = ({
                     >
                         <FileIcon className="h-4 w-4" />
                     </div>
-                    <span>{file?.filepath}</span>
+                    <span
+                        className={clsx("", {
+                            "cursor-pointer text-blue-500 hover:underline" : file?.link
+                        })}
+                        onClick={() => {
+                            if (file?.link) {
+                                window.open(file.link, "_blank");
+                            }
+                        }}
+                    >
+                        {file?.filepath}
+                    </span>
                 </div>
                 <div className="flex flex-row gap-1 items-center">
                     <p className="text-sm">{`${selectedMatchIndex + 1} of ${file?.matches.length}`}</p>

src/app/search/page.tsx

@@ -8,7 +8,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
 import { GetSourceResponse, pathQueryParamName, repoQueryParamName, ZoektFileMatch, ZoektSearchResponse } from "@/lib/types";
-import { createPathWithQueryParams } from "@/lib/utils";
+import { createPathWithQueryParams, getCodeHostFilePreviewLink } from "@/lib/utils";
 import { SymbolIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
@@ -152,21 +152,23 @@ const CodePreviewWrapper = ({
                 [repoQueryParamName, fileMatch.Repo]
             );
 
-            const result = await fetch(url)
+            return fetch(url)
                 .then(response => response.json())
                 .then((body: GetSourceResponse) => {
                     if (body.encoding !== "base64") {
                         throw new Error("Expected base64 encoding");
                     }
 
                     const content = atob(body.content);
+                    const link = getCodeHostFilePreviewLink(fileMatch.Repo, fileMatch.FileName)
+
                     return {
                         content,
                         filepath: fileMatch.FileName,
-                        matches: fileMatch.Matches,  
+                        matches: fileMatch.Matches,
+                        link: link,
                     };
                 });
-            return result;
         },
         enabled: fileMatch !== undefined,
     });

src/app/search/searchResults.tsx

@@ -7,9 +7,8 @@ import { Scrollbar } from "@radix-ui/react-scroll-area";
 import { useMemo, useState } from "react";
 import { DoubleArrowDownIcon, DoubleArrowUpIcon, FileIcon } from "@radix-ui/react-icons";
 import Image from "next/image";
-import githubLogo from "../../../public/github.svg";
-import gitlabLogo from "../../../public/gitlab.svg";
 import clsx from "clsx";
+import { getRepoCodeHostInfo } from "@/lib/utils";
 
 const MAX_MATCHES_TO_PREVIEW = 5;
 
@@ -68,25 +67,14 @@ const FileMatch = ({
     }, [match, showAll]);
 
     const { repoIcon, repoName, repoLink } = useMemo(() => {
-        if (match.Repo.startsWith("github.com")) {
+        const info = getRepoCodeHostInfo(match.Repo);
+        if (info) {
             return {
-                repoName: match.Repo.substring("github.com/".length),
-                repoLink: `https://${match.Repo}`,
+                repoName: info.repoName,
+                repoLink: info.repoLink,
                 repoIcon: <Image
-                    src={githubLogo}
-                    alt="GitHub"
-                    className="w-4 h-4 dark:invert"
-                />
-            }
-        }
-
-        if (match.Repo.startsWith("gitlab.com")) {
-            return {
-                repoName: match.Repo.substring("gitlab.com/".length),
-                repoLink: `https://${match.Repo}`,
-                repoIcon: <Image
-                    src={gitlabLogo}
-                    alt="GitLab"
+                    src={info.icon}
+                    alt={info.costHostName}
                     className="w-4 h-4 dark:invert"
                 />
             }

src/lib/utils.ts

@@ -1,8 +1,10 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import githubLogo from "../../public/github.svg";
+import gitlabLogo from "../../public/gitlab.svg";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs))
 }
 
 /**
@@ -23,4 +25,50 @@ export const createPathWithQueryParams = (path: string, ...queryParams: [string,
 
     const queryString = queryParams.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value ?? '')}`).join('&');
     return `${path}?${queryString}`;
+}
+
+type CodeHostInfo = {
+    type: "github" | "gitlab";
+    repoName: string;
+    costHostName: string;
+    repoLink: string;
+    icon: string;
+}
+
+export const getRepoCodeHostInfo = (repoName: string): CodeHostInfo | undefined => {
+    if (repoName.startsWith("github.com")) {
+        return {
+            type: "github",
+            repoName: repoName.substring("github.com/".length),
+            costHostName: "GitHub",
+            repoLink: `https://${repoName}`,
+            icon: githubLogo,
+        }
+    }
+
+    if (repoName.startsWith("gitlab.com")) {
+        return {
+            type: "gitlab",
+            repoName: repoName.substring("gitlab.com/".length),
+            costHostName: "GitLab",
+            repoLink: `https://${repoName}`,
+            icon: gitlabLogo,
+        }
+    }
+
+    return undefined;
+}
+
+export const getCodeHostFilePreviewLink = (repoName: string, filePath: string): string | undefined => {
+    const info = getRepoCodeHostInfo(repoName);
+
+    if (info?.type === "github") {
+        return `${info.repoLink}/tree/main/${filePath}`;
+    }
+
+    if (info?.type === "gitlab") {
+        return `${info.repoLink}/-/blob/main/${filePath}`;
+    }
+
+    return undefined;
 }