From b79d068abd6c5d5cc0527ebb7d82471c9feac086 Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Fri, 6 Sep 2024 17:37:02 -0700
Subject: [PATCH] Add code host logos for gitlab & github

---
 public/github.svg                |  1 +
 public/gitlab.svg                |  1 +
 src/app/search/searchResults.tsx | 55 ++++++++++++++++++++++++++++++--
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 public/github.svg
 create mode 100644 public/gitlab.svg

diff --git a/public/github.svg b/public/github.svg
new file mode 100644
index 00000000..538ec5bf
--- /dev/null
+++ b/public/github.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
\ No newline at end of file
diff --git a/public/gitlab.svg b/public/gitlab.svg
new file mode 100644
index 00000000..e4a29630
--- /dev/null
+++ b/public/gitlab.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>
\ No newline at end of file
diff --git a/src/app/search/searchResults.tsx b/src/app/search/searchResults.tsx
index fd4d22ed..f276b10e 100644
--- a/src/app/search/searchResults.tsx
+++ b/src/app/search/searchResults.tsx
@@ -5,7 +5,11 @@ import { Separator } from "@/components/ui/separator";
 import { ZoektFileMatch } from "@/lib/types";
 import { Scrollbar } from "@radix-ui/react-scroll-area";
 import { useMemo, useState } from "react";
-import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
+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";
 
 const MAX_MATCHES_TO_PREVIEW = 5;
 
@@ -63,10 +67,55 @@ const FileMatch = ({
         return sortedMatches;
     }, [match, showAll]);
 
+    const { repoIcon, repoName, repoLink } = useMemo(() => {
+        if (match.Repo.startsWith("github.com")) {
+            return {
+                repoName: match.Repo.substring("github.com/".length),
+                repoLink: `https://${match.Repo}`,
+                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"
+                    className="w-4 h-4 dark:invert"
+                />
+            }
+        }
+
+        return {
+            repoName: match.Repo,
+            repoLink: undefined,
+            repoIcon: <FileIcon className="w-4 h-4" />
+        }
+    }, [match]);
+
     return (
         <div>
-            <div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2">
-                <span>{match.Repo} · {match.FileName}</span>
+            <div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 flex flex-row gap-2 items-center">
+                {repoIcon}
+                <span
+                    className={clsx("font-medium", {
+                        "cursor-pointer hover:underline": repoLink,
+                    })}
+                    onClick={() => {
+                        if (repoLink) {
+                            window.open(repoLink, "_blank");
+                        }
+                    }}
+                >
+                    {repoName}
+                </span>
+                <span>· {match.FileName}</span>
             </div>
             {matches.map((match, index) => {
                 const fragment = match.Fragments[0];