Commit 669168d08aa36c3b41f05d78605cdedb0bb1fce1 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-02-14 23:31:20-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-02-14 23:35:48-08:00
log	669168d08aa36c3b41f05d78605cdedb0bb1fce1
tree	0f0cb5a00adab90cec16c2fce6f8408491f3d36d
parent	9bd663be7fc67ebde62ea0268b53b2e9e48ef3a1

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

3 files changed, 73 insertions(+), 66 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    GitActionsControl.tsx
    ThreadTerminalDrawer.tsx

apps/web/src/components/ChatView.tsx+2-2

...	@@ -1476,8 +1476,8 @@ function OpenInPicker() {	...	@@ -1476,8 +1476,8 @@ function OpenInPicker() {
1476	return (	1476	return (
1477	<Group aria-label="Subscription actions">	1477	<Group aria-label="Subscription actions">
1478	<Button size="xs" variant="outline" onClick={() => openInEditor(lastEditor)}>	1478	<Button size="xs" variant="outline" onClick={() => openInEditor(lastEditor)}>
1479	{primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3" />}	1479	{primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
1480	Open	1480	<span className="ml-0.5">Open</span>
1481	</Button>	1481	</Button>
1482	<GroupSeparator />	1482	<GroupSeparator />
1483	<Menu>	1483	<Menu>

apps/web/src/components/GitActionsControl.tsx+16-34

 @@ -122,15 +122,16 @@ function GitActionItemIcon({ icon }: { icon: GitActionIconName }) {
 }
 function GitQuickActionIcon({ quickAction }: { quickAction: GitQuickAction }) {
-  if (quickAction.kind === "open_pr") return <GitHubIcon className="size-4" />;
+  const iconClassName = "size-3.5";
-  if (quickAction.kind === "run_pull") return <InfoIcon className="size-4" />;
+  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") return <GitCommitIcon className={iconClassName} />;
-    if (quickAction.action === "commit_push") return <CloudUploadIcon className="size-4" />;
+    if (quickAction.action === "commit_push") return <CloudUploadIcon className={iconClassName} />;
-    return <GitHubIcon className="size-4" />;
+    return <GitHubIcon className={iconClassName} />;
   }
-  if (quickAction.label === "Commit") return <GitCommitIcon className="size-4" />;
+  if (quickAction.label === "Commit") return <GitCommitIcon className={iconClassName} />;
-  return <InfoIcon className="size-4" />;
+  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
+          <Menu>
-            onOpenChange={(open) => {
-              if (open) void refreshGitStatus();
-              if (!open) setOpenDisabledMenuItemId(null);
-            }}
-          >
             <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
+                    <Popover key={`${item.id}-${item.label}`}>
-                      key={`${item.id}-${item.label}`}
-                      open={openDisabledMenuItemId === item.id}
-                      onOpenChange={(open) => setOpenDisabledMenuItemId(open ? item.id : null)}
-                    >
                       <PopoverTrigger
-                        render={
+                        openOnHover
-                          <span
+                        render={<span className="inline-flex w-full cursor-not-allowed" />}
-                            className="inline-flex w-full cursor-not-allowed"
-                            onMouseEnter={() => setOpenDisabledMenuItemId(item.id)}
-                            onMouseLeave={() => setOpenDisabledMenuItemId(null)}
-                          />
-                        }
                       >
                         <MenuItem disabled>
                           <GitActionItemIcon icon={item.icon} />

apps/web/src/components/ThreadTerminalDrawer.tsx+55-30

 @@ -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
+            <TerminalActionButton
-              type="button"
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={onSplitTerminal}
-              aria-label="Split Terminal"
+              label="Split Terminal"
-              title="Split Terminal"
             >
               <SquareSplitHorizontal className="size-3.25" />
-            </button>
+            </TerminalActionButton>
             <div className="h-4 w-px bg-border/80" />
-            <button
+            <TerminalActionButton
-              type="button"
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={onNewTerminal}
-              aria-label="New Terminal"
+              label="New Terminal"
-              title="New Terminal"
             >
               <Plus className="size-3.25" />
-            </button>
+            </TerminalActionButton>
             <div className="h-4 w-px bg-border/80" />
-            <button
+            <TerminalActionButton
-              type="button"
               className="p-1 text-foreground/90 transition-colors hover:bg-accent"
               onClick={() => onCloseTerminal(resolvedActiveTerminalId)}
-              aria-label="Close Terminal"
+              label="Close Terminal"
-              title="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
+                  <TerminalActionButton
-                    type="button"
                     className="inline-flex h-full items-center px-1 text-foreground/90 transition-colors hover:bg-accent/70"
                     onClick={onSplitTerminal}
-                    aria-label="Split Terminal"
+                    label="Split Terminal"
-                    title="Split Terminal"
                   >
                     <SquareSplitHorizontal className="size-3.25" />
-                  </button>
+                  </TerminalActionButton>
-                  <button
+                  <TerminalActionButton
-                    type="button"
                     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"
+                    label="New Terminal"
-                    title="New Terminal"
                   >
                     <Plus className="size-3.25" />
-                  </button>
+                  </TerminalActionButton>
-                  <button
+                  <TerminalActionButton
-                    type="button"
                     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"
+                    label="Close Terminal"
-                    title="Close Terminal"
                   >
                     <Trash2 className="size-3.25" />
-                  </button>
+                  </TerminalActionButton>
                 </div>
               </div>