From 83c924566caf6b91e87cec08a3673992a6f6c122 Mon Sep 17 00:00:00 2001
From: Arunavo Ray <rayanup3@gmail.com>
Date: Fri, 20 Jun 2025 10:58:46 +0530
Subject: [PATCH] feat: add HoverCard component and replace Popover usage in
 GitHubConfigForm and OrganizationStrategy

---
 bun.lock                                      |  3 ++
 package.json                                  |  1 +
 src/components/config/GitHubConfigForm.tsx    | 22 +++++-----
 .../config/OrganizationStrategy.tsx           | 22 +++++-----
 src/components/ui/hover-card.tsx              | 42 +++++++++++++++++++
 5 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ui/hover-card.tsx

diff --git a/bun.lock b/bun.lock
index 8d04e02..3be156b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -15,6 +15,7 @@
         "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-hover-card": "^1.1.14",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-radio-group": "^1.3.7",
@@ -334,6 +335,8 @@
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
+    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-CPYZ24Mhirm+g6D8jArmLzjYu4Eyg3TTUHswR26QgzXBHBe64BO/RHOJKzmF/Dxb4y4f9PKyJdwm/O/AhNkb+Q=="],
+
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="],
diff --git a/package.json b/package.json
index c024aa3..16cfbd4 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
diff --git a/src/components/config/GitHubConfigForm.tsx b/src/components/config/GitHubConfigForm.tsx
index 7076c6b..6b934a7 100644
--- a/src/components/config/GitHubConfigForm.tsx
+++ b/src/components/config/GitHubConfigForm.tsx
@@ -14,10 +14,10 @@ import { Info } from "lucide-react";
 import { GitHubMirrorSettings } from "./GitHubMirrorSettings";
 import { Separator } from "../ui/separator";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 
 interface GitHubConfigFormProps {
   config: GitHubConfig;
@@ -130,16 +130,16 @@ export function GitHubConfigForm({
             >
               GitHub Token
             </label>
-            <Popover>
-              <PopoverTrigger asChild>
+            <HoverCard>
+              <HoverCardTrigger asChild>
                 <button
                   type="button"
-                  className="p-0.5 hover:bg-muted rounded-sm transition-colors"
+                  className="p-0.5 hover:bg-muted rounded-sm transition-colors cursor-help"
                 >
                   <Info className="h-3.5 w-3.5 text-muted-foreground" />
                 </button>
-              </PopoverTrigger>
-              <PopoverContent side="right" align="start" className="w-80">
+              </HoverCardTrigger>
+              <HoverCardContent side="right" align="start" className="w-80">
                 <div className="space-y-2">
                   <h4 className="font-medium text-sm">GitHub Token Requirements</h4>
                   <div className="text-sm space-y-2">
@@ -166,8 +166,8 @@ export function GitHubConfigForm({
                     </p>
                   </div>
                 </div>
-              </PopoverContent>
-            </Popover>
+              </HoverCardContent>
+            </HoverCard>
           </div>
           <Input
             id="github-token"
diff --git a/src/components/config/OrganizationStrategy.tsx b/src/components/config/OrganizationStrategy.tsx
index 5ee511e..20e0dbb 100644
--- a/src/components/config/OrganizationStrategy.tsx
+++ b/src/components/config/OrganizationStrategy.tsx
@@ -3,10 +3,10 @@ import { Card } from "@/components/ui/card";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Info, GitBranch, FolderTree, Star, Building2, User, Building } from "lucide-react";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 import { cn } from "@/lib/utils";
 
 export type MirrorStrategy = "preserve" | "single-org" | "flat-user";
@@ -275,17 +275,17 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                           </p>
                         </div>
                         
-                        <Popover>
-                          <PopoverTrigger asChild>
+                        <HoverCard>
+                          <HoverCardTrigger asChild>
                             <button 
                               type="button"
-                              className="p-1.5 hover:bg-muted rounded-md transition-colors"
+                              className="p-1.5 hover:bg-muted rounded-md transition-colors cursor-help"
                               onClick={(e) => e.stopPropagation()}
                             >
                               <Info className="h-4 w-4 text-muted-foreground" />
                             </button>
-                          </PopoverTrigger>
-                          <PopoverContent side="left" align="center" className="w-[500px]">
+                          </HoverCardTrigger>
+                          <HoverCardContent side="left" align="center" className="w-[500px]">
                             <div className="space-y-3">
                               <h4 className="font-medium text-sm">Repository Mapping Preview</h4>
                               <MappingPreview 
@@ -297,8 +297,8 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
                                 giteaUsername={giteaUsername}
                               />
                             </div>
-                          </PopoverContent>
-                        </Popover>
+                          </HoverCardContent>
+                        </HoverCard>
                       </div>
                     </div>
                   </Card>
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..e4204e0
--- /dev/null
+++ b/src/components/ui/hover-card.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }