authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-26 18:13:53-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-26 19:03:10-08:00
log1de1b0d6be81755b88a6ce99a9705186ac7caa28
treef6bf0c9e1178384e7da59eb5846099c60e3d7605
parenta830cd5b1a7bacd06f3fc78d7c2d97065c603d38

Show diff toggle shortcut in tooltip

- Wrap diff panel toggle in shared tooltip components - Display shortcut hint in tooltip popup instead of title attribute

1 files changed, 22 insertions(+), 13 deletions(-)

apps/web/src/components/ChatView.tsx+22-13
......@@ -91,6 +91,7 @@ import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "./ui/menu"
9191import { CursorIcon, Icon } from "./Icons";
9292import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
9393import { Badge } from "./ui/badge";
94import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
9495import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
9596import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
9697import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
......@@ -2112,19 +2113,27 @@ const ChatHeader = memo(function ChatHeader({
21122113 <OpenInPicker keybindings={keybindings} activeThreadId={activeThreadId} />
21132114 )}
21142115 {activeProjectName && <GitActionsControl gitCwd={gitCwd} activeThreadId={activeThreadId} />}
2115 <Toggle
2116 className="shrink-0"
2117 pressed={diffOpen}
2118 onPressedChange={onToggleDiff}
2119 aria-label="Toggle diff panel"
2120 title={
2121 diffToggleShortcutLabel ? `Toggle diff panel (${diffToggleShortcutLabel})` : undefined
2122 }
2123 variant="outline"
2124 size="xs"
2125 >
2126 <DiffIcon className="size-3" />
2127 </Toggle>
2116 <Tooltip>
2117 <TooltipTrigger
2118 render={
2119 <Toggle
2120 className="shrink-0"
2121 pressed={diffOpen}
2122 onPressedChange={onToggleDiff}
2123 aria-label="Toggle diff panel"
2124 variant="outline"
2125 size="xs"
2126 >
2127 <DiffIcon className="size-3" />
2128 </Toggle>
2129 }
2130 />
2131 <TooltipPopup side="bottom">
2132 {diffToggleShortcutLabel
2133 ? `Toggle diff panel (${diffToggleShortcutLabel})`
2134 : "Toggle diff panel"}
2135 </TooltipPopup>
2136 </Tooltip>
21282137 </div>
21292138 </div>
21302139 );