authorgravatar for gianmarcosimone89@gmail.comGianmarco <gianmarcosimone89@gmail.com> 2026-08-19 06:31:08+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-19 00:31:08-04:00
log3b8e7bbbe0c49b00630f0c89e931056df679a650
treefb5a8038ca81bdb2c0e12d8f40e0cf1efd67ad25
parent5ea5a80a83c21c50f97f0851a8bd2cb9871f413a
signature Signed by PGP key B5690EEEBB952194

feat(web): add shortcuts to the surface dropdown (#7318)

2 files changed, 149 insertions(+), 58 deletions(-)

apps/web/src/components/RightPanelTabs.test.tsx+42-1
......@@ -2,7 +2,22 @@ import type { DesktopPreviewFavicon, PreviewSessionSnapshot } from "@t3tools/con
22import { renderToStaticMarkup } from "react-dom/server";
33import { describe, expect, it } from "vite-plus/test";
44
5import { RightPanelTabs, tabMuteMenuItem } from "./RightPanelTabs";
5import { RightPanelTabs, surfaceShortcutActionForKey, tabMuteMenuItem } from "./RightPanelTabs";
6
7function shortcutEvent(
8 key: string,
9 overrides: Partial<Parameters<typeof surfaceShortcutActionForKey>[1]> = {},
10): Parameters<typeof surfaceShortcutActionForKey>[1] {
11 return {
12 key,
13 altKey: false,
14 ctrlKey: false,
15 defaultPrevented: false,
16 isComposing: false,
17 metaKey: false,
18 ...overrides,
19 };
20}
621
722const previewSurface = {
823 id: "browser:tab-1" as const,
......@@ -125,6 +140,32 @@ describe("RightPanelTabs preview favicon", () => {
125140 });
126141});
127142
143describe("surface shortcuts", () => {
144 const actions = [
145 { shortcut: "B", available: true, label: "Browser" },
146 { shortcut: "D", available: false, label: "Diff" },
147 ] as const;
148
149 it("matches available surface shortcuts case-insensitively", () => {
150 expect(surfaceShortcutActionForKey(actions, shortcutEvent("b"))).toBe(actions[0]);
151 expect(surfaceShortcutActionForKey(actions, shortcutEvent("B"))).toBe(actions[0]);
152 });
153
154 it("does not activate unavailable surfaces", () => {
155 expect(surfaceShortcutActionForKey(actions, shortcutEvent("d"))).toBeNull();
156 });
157
158 it("leaves modified, composing, and already-handled key events alone", () => {
159 expect(surfaceShortcutActionForKey(actions, shortcutEvent("b", { metaKey: true }))).toBeNull();
160 expect(
161 surfaceShortcutActionForKey(actions, shortcutEvent("b", { isComposing: true })),
162 ).toBeNull();
163 expect(
164 surfaceShortcutActionForKey(actions, shortcutEvent("b", { defaultPrevented: true })),
165 ).toBeNull();
166 });
167});
168
128169describe("RightPanelTabs audio indicator", () => {
129170 // A muted tab only shows the indicator while it is actually making sound:
130171 // arming mute on a quiet tab is deliberate and stays invisible until there
apps/web/src/components/RightPanelTabs.tsx+107-57
......@@ -31,7 +31,7 @@ import { readLocalApi } from "~/localApi";
3131import { Button } from "~/components/ui/button";
3232import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
3333import { Kbd } from "~/components/ui/kbd";
34import { Menu, MenuItem, MenuPopup, MenuTrigger } from "~/components/ui/menu";
34import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "~/components/ui/menu";
3535import { ScrollArea } from "~/components/ui/scroll-area";
3636import { faviconUrlForOrigin } from "~/lib/favicon";
3737import { useTheme } from "~/hooks/useTheme";
......@@ -173,6 +173,23 @@ function tabAudioState(overlay: DesktopPreviewOverlay | null): TabAudioState {
173173 return overlay.audioMuted ? "muted" : "audible";
174174}
175175
176type SurfaceShortcutEvent = Pick<
177 KeyboardEvent,
178 "altKey" | "ctrlKey" | "defaultPrevented" | "isComposing" | "key" | "metaKey"
179>;
180
181export function surfaceShortcutActionForKey<
182 const Action extends { available: boolean; shortcut: string },
183>(actions: readonly Action[], event: SurfaceShortcutEvent): Action | null {
184 if (event.defaultPrevented || event.isComposing) return null;
185 if (event.metaKey || event.ctrlKey || event.altKey) return null;
186 return (
187 actions.find(
188 (action) => action.available && action.shortcut.toLowerCase() === event.key.toLowerCase(),
189 ) ?? null
190 );
191}
192
176193function DisabledReasonTooltip(props: { reason: string; trigger: ReactElement }) {
177194 return (
178195 <Tooltip>
......@@ -185,6 +202,7 @@ function DisabledReasonTooltip(props: { reason: string; trigger: ReactElement })
185202function SurfaceMenuItem(props: {
186203 available: boolean;
187204 disabledReason?: string;
205 shortcut: string;
188206 onClick: () => void;
189207 children: ReactNode;
190208}) {
......@@ -193,8 +211,10 @@ function SurfaceMenuItem(props: {
193211 className={!props.available ? "data-disabled:pointer-events-auto" : undefined}
194212 onClick={props.onClick}
195213 disabled={!props.available}
214 aria-keyshortcuts={props.shortcut}
196215 >
197216 {props.children}
217 <MenuShortcut>{props.shortcut}</MenuShortcut>
198218 </MenuItem>
199219 );
200220 if (props.available || !props.disabledReason) return item;
......@@ -305,8 +325,8 @@ function RightPanelEmptyState(props: {
305325 });
306326 useEffect(() => {
307327 const handler = (event: KeyboardEvent) => {
308 if (event.defaultPrevented || event.isComposing) return;
309 if (event.metaKey || event.ctrlKey || event.altKey) return;
328 const action = surfaceShortcutActionForKey(shortcutActionsRef.current, event);
329 if (!action) return;
310330 if (document.querySelector(LAUNCHER_SHORTCUT_BLOCKING_LAYERS)) return;
311331 const target = event.target;
312332 if (target instanceof HTMLElement) {
......@@ -316,10 +336,6 @@ function RightPanelEmptyState(props: {
316336 const editable = target.isContentEditable ? target : target.closest("[contenteditable]");
317337 if (editable && (editable.textContent ?? "").trim().length > 0) return;
318338 }
319 const action = shortcutActionsRef.current.find(
320 (candidate) => candidate.shortcut.toLowerCase() === event.key.toLowerCase(),
321 );
322 if (!action) return;
323339 event.preventDefault();
324340 event.stopPropagation();
325341 action.onClick();
......@@ -573,6 +589,67 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
573589 const ownsDesktopTitleBar = isElectron && props.mode === "inline";
574590 const { resolvedTheme } = useTheme();
575591 const tabListRef = useRef<HTMLDivElement>(null);
592 const [addSurfaceMenuOpen, setAddSurfaceMenuOpen] = useState(false);
593
594 const addSurfaceActions = [
595 {
596 label: "Browser",
597 icon: Globe2,
598 shortcut: "B",
599 available: props.browserAvailable,
600 disabledReason: SURFACE_DISABLED_REASONS.browser,
601 onClick: props.onAddBrowser,
602 },
603 {
604 label: "Terminal",
605 icon: TerminalSquare,
606 shortcut: "T",
607 available: props.terminalAvailable,
608 disabledReason: SURFACE_DISABLED_REASONS.terminal,
609 onClick: props.onAddTerminal,
610 },
611 {
612 label: "Files",
613 icon: Files,
614 shortcut: "F",
615 available: props.filesAvailable,
616 disabledReason: SURFACE_DISABLED_REASONS.files,
617 onClick: props.onAddFiles,
618 },
619 {
620 label: "Diff",
621 icon: FileDiff,
622 shortcut: "D",
623 available: props.diffAvailable,
624 disabledReason: SURFACE_DISABLED_REASONS.diff,
625 onClick: props.onAddDiff,
626 },
627 {
628 label: "Pull request",
629 icon: GitPullRequest,
630 shortcut: "P",
631 available: props.pullRequestAvailable,
632 disabledReason: SURFACE_DISABLED_REASONS.pullRequest,
633 onClick: props.onAddPullRequest,
634 },
635 {
636 label: "Agents",
637 icon: Bot,
638 shortcut: "A",
639 available: props.agentsAvailable,
640 disabledReason: SURFACE_DISABLED_REASONS.agents,
641 onClick: props.onAddAgents,
642 },
643 ] as const;
644
645 const handleAddSurfaceMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
646 const action = surfaceShortcutActionForKey(addSurfaceActions, event.nativeEvent);
647 if (!action) return;
648 event.preventDefault();
649 event.stopPropagation();
650 setAddSurfaceMenuOpen(false);
651 action.onClick();
652 };
576653
577654 const handleTabContextMenu = useCallback(
578655 async (event: ReactMouseEvent, surface: RightPanelSurface) => {
......@@ -804,7 +881,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
804881 );
805882 })}
806883 {props.surfaces.length > 0 ? (
807 <Menu>
884 <Menu open={addSurfaceMenuOpen} onOpenChange={setAddSurfaceMenuOpen}>
808885 <MenuTrigger
809886 render={
810887 <Button
......@@ -817,55 +894,28 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
817894 >
818895 <Plus className="size-3.5" />
819896 </MenuTrigger>
820 <MenuPopup align="start" side="bottom" sideOffset={6} className="min-w-44">
821 <SurfaceMenuItem
822 available={props.browserAvailable}
823 disabledReason={SURFACE_DISABLED_REASONS.browser}
824 onClick={props.onAddBrowser}
825 >
826 <Globe2 />
827 Browser
828 </SurfaceMenuItem>
829 <SurfaceMenuItem
830 available={props.terminalAvailable}
831 disabledReason={SURFACE_DISABLED_REASONS.terminal}
832 onClick={props.onAddTerminal}
833 >
834 <TerminalSquare />
835 Terminal
836 </SurfaceMenuItem>
837 <SurfaceMenuItem
838 available={props.filesAvailable}
839 disabledReason={SURFACE_DISABLED_REASONS.files}
840 onClick={props.onAddFiles}
841 >
842 <Files />
843 Files
844 </SurfaceMenuItem>
845 <SurfaceMenuItem
846 available={props.diffAvailable}
847 disabledReason={SURFACE_DISABLED_REASONS.diff}
848 onClick={props.onAddDiff}
849 >
850 <FileDiff />
851 Diff
852 </SurfaceMenuItem>
853 <SurfaceMenuItem
854 available={props.pullRequestAvailable}
855 disabledReason={SURFACE_DISABLED_REASONS.pullRequest}
856 onClick={props.onAddPullRequest}
857 >
858 <GitPullRequest />
859 Pull request
860 </SurfaceMenuItem>
861 <SurfaceMenuItem
862 available={props.agentsAvailable}
863 disabledReason={SURFACE_DISABLED_REASONS.agents}
864 onClick={props.onAddAgents}
865 >
866 <Bot />
867 Agents
868 </SurfaceMenuItem>
897 <MenuPopup
898 align="start"
899 side="bottom"
900 sideOffset={6}
901 className="min-w-44"
902 onKeyDownCapture={handleAddSurfaceMenuKeyDown}
903 >
904 {addSurfaceActions.map((action) => {
905 const Icon = action.icon;
906 return (
907 <SurfaceMenuItem
908 key={action.label}
909 available={action.available}
910 disabledReason={action.disabledReason}
911 shortcut={action.shortcut}
912 onClick={action.onClick}
913 >
914 <Icon />
915 {action.label}
916 </SurfaceMenuItem>
917 );
918 })}
869919 </MenuPopup>
870920 </Menu>
871921 ) : null}