From 1de1b0d6be81755b88a6ce99a9705186ac7caa28 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 26 Feb 2026 18:13:53 -0800
Subject: [PATCH] Show diff toggle shortcut in tooltip

- Wrap diff panel toggle in shared tooltip components
- Display shortcut hint in tooltip popup instead of title attribute
---
 apps/web/src/components/ChatView.tsx | 35 +++++++++++++++++-----------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 632edc048e8b51067fbee98458efb8ae55a2bf14..9e6a34c6776be2743f2f784461d5f6fae1c05de0 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -91,6 +91,7 @@ import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "./ui/menu"
 import { CursorIcon, Icon } from "./Icons";
 import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
 import { Badge } from "./ui/badge";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
 import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
 import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
@@ -2112,19 +2113,27 @@ const ChatHeader = memo(function ChatHeader({
           <OpenInPicker keybindings={keybindings} activeThreadId={activeThreadId} />
         )}
         {activeProjectName && <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />}
-        <Toggle
-          className="shrink-0"
-          pressed={diffOpen}
-          onPressedChange={onToggleDiff}
-          aria-label="Toggle diff panel"
-          title={
-            diffToggleShortcutLabel ? `Toggle diff panel (${diffToggleShortcutLabel})` : undefined
-          }
-          variant="outline"
-          size="xs"
-        >
-          <DiffIcon className="size-3" />
-        </Toggle>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Toggle
+                className="shrink-0"
+                pressed={diffOpen}
+                onPressedChange={onToggleDiff}
+                aria-label="Toggle diff panel"
+                variant="outline"
+                size="xs"
+              >
+                <DiffIcon className="size-3" />
+              </Toggle>
+            }
+          />
+          <TooltipPopup side="bottom">
+            {diffToggleShortcutLabel
+              ? `Toggle diff panel (${diffToggleShortcutLabel})`
+              : "Toggle diff panel"}
+          </TooltipPopup>
+        </Tooltip>
       </div>
     </div>
   );
-- 
2.54.0