From feff4647e748c80b1844350a84034e58c7c517cf Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sun, 12 May 2024 01:41:41 -0700
Subject: [PATCH] add display for repo latest hash / message

---
 frontend/package.json                         |  1 +
 .../src/components/resources/repo/index.tsx   | 37 ++++++++++++++-----
 frontend/src/ui/hover-card.tsx                | 27 ++++++++++++++
 frontend/yarn.lock                            | 16 ++++++++
 4 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/ui/hover-card.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 29833ae33..a1f8d870d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-checkbox": "1.0.4",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-popover": "1.0.7",
diff --git a/frontend/src/components/resources/repo/index.tsx b/frontend/src/components/resources/repo/index.tsx
index ebfcbd9da..ed6382128 100644
--- a/frontend/src/components/resources/repo/index.tsx
+++ b/frontend/src/components/resources/repo/index.tsx
@@ -7,17 +7,20 @@ import { RepoConfig } from "./config";
 import { CloneRepo, PullRepo } from "./actions";
 import { DeleteResource, NewResource } from "../common";
 import { RepoTable } from "./table";
-import { bg_color_class_by_intention, fill_color_class_by_intention, repo_state_intention } from "@lib/color";
+import {
+  bg_color_class_by_intention,
+  fill_color_class_by_intention,
+  repo_state_intention,
+} from "@lib/color";
 import { cn } from "@lib/utils";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@ui/hover-card";
 
 const useRepo = (id?: string) =>
   useRead("ListRepos", {}).data?.find((d) => d.id === id);
 
 const RepoIcon = ({ id, size }: { id?: string; size: number }) => {
   const state = useRepo(id)?.info.state;
-  const color = fill_color_class_by_intention(
-    repo_state_intention(state)
-  );
+  const color = fill_color_class_by_intention(repo_state_intention(state));
   return <GitBranch className={cn(`w-${size} h-${size}`, state && color)} />;
 };
 
@@ -61,14 +64,30 @@ export const RepoComponents: RequiredResourceComponents = {
         </Card>
       );
     },
-    Status: ({id}) => {
+    Status: ({ id }) => {
       const info = useRepo(id)?.info;
-      if (info?.latest_hash) {
-        return <>{info.latest_hash}</>;
+      if (info?.latest_hash && info?.latest_message) {
+        return (
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Card className="px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer">
+                <div className="text-muted-foreground text-sm text-nowrap overflow-hidden overflow-ellipsis">
+                  {info.latest_hash}
+                </div>
+              </Card>
+            </HoverCardTrigger>
+            <HoverCardContent align="start">
+              <div className="grid">
+                <div className="text-muted-foreground">commit message:</div>
+                {info.latest_message}
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        );
       } else {
-        return <>{"not cloned"}</>
+        return <div className="text-muted-foreground">{"Not cloned"}</div>;
       }
-    }
+    },
   },
 
   Info: {
diff --git a/frontend/src/ui/hover-card.tsx b/frontend/src/ui/hover-card.tsx
new file mode 100644
index 000000000..91768d31d
--- /dev/null
+++ b/frontend/src/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ffceb7a61..6f74c9b09 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -662,6 +662,22 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-hover-card@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+  integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-icons@1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"