From 669168d08aa36c3b41f05d78605cdedb0bb1fce1 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 14 Feb 2026 23:31:20 -0800
Subject: [PATCH] Polish action button icons and hover tooltips

- Standardize quick action icon sizing and label spacing in chat and git controls
- Replace manual popover hover state handling with `openOnHover` triggers
- Add reusable terminal action button wrapper with hover tooltips for split/new/close controls
---
 apps/web/src/components/ChatView.tsx          |  4 +-
 apps/web/src/components/GitActionsControl.tsx | 50 ++++-------
 .../src/components/ThreadTerminalDrawer.tsx   | 85 ++++++++++++-------
 3 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index dbb646c2b17f085311fc549c7412ecd1723987dc..8fc32d360f12b37f735cc9738603f3495960b32b 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -1476,8 +1476,8 @@ function OpenInPicker() {
   return (
     <Group aria-label="Subscription actions">
       <Button size="xs" variant="outline" onClick={() => openInEditor(lastEditor)}>
-        {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3" />}
-        Open
+        {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
+        <span className="ml-0.5">Open</span>
       </Button>
       <GroupSeparator />
       <Menu>
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 604736ce741a52b146ba9edaf34e067b7af7cf34..b68ce2b50b3095bea60c0642a2845b6f88dcdc93 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -122,15 +122,16 @@ function GitActionItemIcon({ icon }: { icon: GitActionIconName }) {
 }
 
 function GitQuickActionIcon({ quickAction }: { quickAction: GitQuickAction }) {
-  if (quickAction.kind === "open_pr") return <GitHubIcon className="size-4" />;
-  if (quickAction.kind === "run_pull") return <InfoIcon className="size-4" />;
+  const iconClassName = "size-3.5";
+  if (quickAction.kind === "open_pr") return <GitHubIcon className={iconClassName} />;
+  if (quickAction.kind === "run_pull") return <InfoIcon className={iconClassName} />;
   if (quickAction.kind === "run_action") {
-    if (quickAction.action === "commit") return <GitCommitIcon className="size-4" />;
-    if (quickAction.action === "commit_push") return <CloudUploadIcon className="size-4" />;
-    return <GitHubIcon className="size-4" />;
+    if (quickAction.action === "commit") return <GitCommitIcon className={iconClassName} />;
+    if (quickAction.action === "commit_push") return <CloudUploadIcon className={iconClassName} />;
+    return <GitHubIcon className={iconClassName} />;
   }
-  if (quickAction.label === "Commit") return <GitCommitIcon className="size-4" />;
-  return <InfoIcon className="size-4" />;
+  if (quickAction.label === "Commit") return <GitCommitIcon className={iconClassName} />;
+  return <InfoIcon className={iconClassName} />;
 }
 
 function buildGitActionProgressStages(input: {
@@ -192,10 +193,6 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp
   const quickActionDisabledReason = quickAction.disabled
     ? (quickAction.hint ?? "This action is currently unavailable.")
     : null;
-  const [isQuickActionPopoverOpen, setIsQuickActionPopoverOpen] = useState(false);
-  const [openDisabledMenuItemId, setOpenDisabledMenuItemId] = useState<
-    GitActionMenuItem["id"] | null
-  >(null);
 
   const refreshGitStatus = useCallback(async () => {
     if (!api || !gitCwd) return;
@@ -451,21 +448,20 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp
       ) : (
         <Group aria-label="Git actions">
           {quickActionDisabledReason ? (
-            <Popover open={isQuickActionPopoverOpen} onOpenChange={setIsQuickActionPopoverOpen}>
+            <Popover>
               <PopoverTrigger
+                openOnHover
                 render={
                   <Button
                     variant="outline"
                     size="xs"
                     disabled={isGitActionRunning || quickAction.disabled}
                     className="cursor-not-allowed disabled:cursor-not-allowed disabled:pointer-events-auto"
-                    onMouseEnter={() => setIsQuickActionPopoverOpen(true)}
-                    onMouseLeave={() => setIsQuickActionPopoverOpen(false)}
                   />
                 }
               >
                 <GitQuickActionIcon quickAction={quickAction} />
-                {quickAction.label}
+                <span className="ml-0.5">{quickAction.label}</span>
               </PopoverTrigger>
               <PopoverPopup tooltipStyle side="bottom" align="start">
                 {quickActionDisabledReason}
@@ -479,16 +475,11 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp
               onClick={runQuickAction}
             >
               <GitQuickActionIcon quickAction={quickAction} />
-              {quickAction.label}
+              <span className="ml-0.5">{quickAction.label}</span>
             </Button>
           )}
           <GroupSeparator />
-          <Menu
-            onOpenChange={(open) => {
-              if (open) void refreshGitStatus();
-              if (!open) setOpenDisabledMenuItemId(null);
-            }}
-          >
+          <Menu>
             <MenuTrigger
               render={<Button aria-label="Git action options" size="icon-xs" variant="outline" />}
               disabled={isGitActionRunning}
@@ -504,19 +495,10 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp
                 );
                 if (item.disabled && disabledReason) {
                   return (
-                    <Popover
-                      key={`${item.id}-${item.label}`}
-                      open={openDisabledMenuItemId === item.id}
-                      onOpenChange={(open) => setOpenDisabledMenuItemId(open ? item.id : null)}
-                    >
+                    <Popover key={`${item.id}-${item.label}`}>
                       <PopoverTrigger
-                        render={
-                          <span
-                            className="inline-flex w-full cursor-not-allowed"
-                            onMouseEnter={() => setOpenDisabledMenuItemId(item.id)}
-                            onMouseLeave={() => setOpenDisabledMenuItemId(null)}
-                          />
-                        }
+                        openOnHover
+                        render={<span className="inline-flex w-full cursor-not-allowed" />}
                       >
                         <MenuItem disabled>
                           <GitActionItemIcon icon={item.icon} />
diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index 03b057b2ed76b5e843d8c9c5d63cf6598eade5c1..eaa8b97fdc4a1df39362ebbc90dda0b8dd434544 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -4,12 +4,14 @@ import { type NativeApi } from "@t3tools/contracts";
 import { Terminal, type ITheme } from "@xterm/xterm";
 import {
   type PointerEvent as ReactPointerEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { Popover, PopoverPopup, PopoverTrigger } from "~/components/ui/popover";
 import {
   extractTerminalLinks,
   isTerminalLinkActivation,
@@ -419,6 +421,41 @@ interface ThreadTerminalDrawerProps {
   onHeightChange: (height: number) => void;
 }
 
+interface TerminalActionButtonProps {
+  label: string;
+  className: string;
+  onClick: () => void;
+  children: ReactNode;
+}
+
+function TerminalActionButton({ label, className, onClick, children }: TerminalActionButtonProps) {
+  return (
+    <Popover>
+      <PopoverTrigger openOnHover
+        render={
+          <button
+            type="button"
+            className={className}
+            onClick={onClick}
+            aria-label={label}
+          />
+        }
+      >
+        {children}
+      </PopoverTrigger>
+      <PopoverPopup
+        tooltipStyle
+        side="bottom"
+        sideOffset={6}
+        align="center"
+        className="pointer-events-none select-none"
+      >
+        {label}
+      </PopoverPopup>
+    </Popover>
+  );
+}
+
 export default function ThreadTerminalDrawer({
   api,
   threadId,
@@ -654,35 +691,29 @@ export default function ThreadTerminalDrawer({
       {!hasTerminalSidebar && (
         <div className="pointer-events-none absolute right-2 top-2 z-20">
           <div className="pointer-events-auto inline-flex items-center overflow-hidden rounded-md border border-border/80 bg-background/70">
-            <button
-              type="button"
+            <TerminalActionButton
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={onSplitTerminal}
-              aria-label="Split Terminal"
-              title="Split Terminal"
+              label="Split Terminal"
             >
               <SquareSplitHorizontal className="size-3.25" />
-            </button>
+            </TerminalActionButton>
             <div className="h-4 w-px bg-border/80" />
-            <button
-              type="button"
+            <TerminalActionButton
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={onNewTerminal}
-              aria-label="New Terminal"
-              title="New Terminal"
+              label="New Terminal"
             >
               <Plus className="size-3.25" />
-            </button>
+            </TerminalActionButton>
             <div className="h-4 w-px bg-border/80" />
-            <button
-              type="button"
+            <TerminalActionButton
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={() => onCloseTerminal(resolvedActiveTerminalId)}
-              aria-label="Close Terminal"
-              title="Close Terminal"
+              label="Close Terminal"
             >
               <Trash2 className="size-3.25" />
-            </button>
+            </TerminalActionButton>
           </div>
         </div>
       )}
@@ -745,33 +776,27 @@ export default function ThreadTerminalDrawer({
             <aside className="flex w-36 min-w-36 flex-col border border-border/70 bg-muted/10">
               <div className="flex h-[22px] items-stretch justify-end border-b border-border/70">
                 <div className="inline-flex h-full items-stretch">
-                  <button
-                    type="button"
+                  <TerminalActionButton
                     className="inline-flex h-full items-center px-1 text-foreground/90 transition-colors hover:bg-accent/70"
                     onClick={onSplitTerminal}
-                    aria-label="Split Terminal"
-                    title="Split Terminal"
+                    label="Split Terminal"
                   >
                     <SquareSplitHorizontal className="size-3.25" />
-                  </button>
-                  <button
-                    type="button"
+                  </TerminalActionButton>
+                  <TerminalActionButton
                     className="inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors hover:bg-accent/70"
                     onClick={onNewTerminal}
-                    aria-label="New Terminal"
-                    title="New Terminal"
+                    label="New Terminal"
                   >
                     <Plus className="size-3.25" />
-                  </button>
-                  <button
-                    type="button"
+                  </TerminalActionButton>
+                  <TerminalActionButton
                     className="inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors hover:bg-accent/70"
                     onClick={() => onCloseTerminal(resolvedActiveTerminalId)}
-                    aria-label="Close Terminal"
-                    title="Close Terminal"
+                    label="Close Terminal"
                   >
                     <Trash2 className="size-3.25" />
-                  </button>
+                  </TerminalActionButton>
                 </div>
               </div>
 
-- 
2.54.0