Skip to content

Commit e17ebfd

Browse files
authored
feat(theme-builder): add keyboard shortcuts for quick actions (#6161)
- Arrow Left/Right for undo/redo - D to open reset dialog - T to randomize theme - Added Kbd hints to tooltips
1 parent 17e3956 commit e17ebfd

File tree

3 files changed

+49
-7
lines changed

3 files changed

+49
-7
lines changed

apps/docs/src/app/themes/components/builder-header.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import {
77
Link as LinkIcon,
88
NodesRight,
99
} from "@gravity-ui/icons";
10-
import {Button, Chip, Separator, Tabs, Tooltip, toast} from "@heroui/react";
10+
import {Button, Chip, Kbd, Separator, Tabs, Tooltip, toast} from "@heroui/react";
1111
import Link from "next/link";
1212

1313
import {HeroUILogo} from "@/components/heroui-logo";
1414
import {useCodePanel} from "@/hooks/use-code-panel";
15+
import useKeyPress from "@/hooks/use-key-press";
1516

1617
import {tabs} from "../constants";
1718
import {useUndoRedo} from "../hooks";
@@ -33,6 +34,9 @@ export function BuilderHeader() {
3334
});
3435
};
3536

37+
useKeyPress("ArrowLeft", () => undo(), {enabled: canUndo});
38+
useKeyPress("ArrowRight", () => redo(), {enabled: canRedo});
39+
3640
return (
3741
<div className="sticky top-0 z-50 mb-3 flex h-14 w-full items-center justify-center bg-background px-2 min-[1200px]:mb-6 min-[1200px]:px-0">
3842
<div className="flex h-14 w-full max-w-[1400px] items-center justify-between min-[1200px]:h-14">
@@ -55,7 +59,12 @@ export function BuilderHeader() {
5559
</Tooltip.Trigger>
5660
<Tooltip.Content>
5761
<Tooltip.Arrow />
58-
<p>Undo last change</p>
62+
<p>
63+
Undo last change{" "}
64+
<Kbd>
65+
<Kbd.Abbr keyValue="left" />
66+
</Kbd>
67+
</p>
5968
</Tooltip.Content>
6069
</Tooltip>
6170
<Tooltip closeDelay={0} delay={100}>
@@ -71,7 +80,12 @@ export function BuilderHeader() {
7180
</Button>
7281
<Tooltip.Content>
7382
<Tooltip.Arrow />
74-
<p>Redo last change</p>
83+
<p>
84+
Redo last change{" "}
85+
<Kbd>
86+
<Kbd.Abbr keyValue="right" />
87+
</Kbd>
88+
</p>
7589
</Tooltip.Content>
7690
</Tooltip.Trigger>
7791
</Tooltip>

apps/docs/src/app/themes/components/reset-button.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import {ArrowRotateLeft} from "@gravity-ui/icons";
2-
import {AlertDialog, Button, Tooltip} from "@heroui/react";
2+
import {AlertDialog, Button, Kbd, Tooltip, useOverlayState} from "@heroui/react";
33
import {useMemo} from "react";
44

5+
import useKeyPress from "@/hooks/use-key-press";
6+
57
import {defaultThemeVariables} from "../constants";
68
import {useResetVariables} from "../hooks";
79
import {useVariablesState} from "../hooks/use-variables-state";
810

911
export function ResetButton() {
1012
const reset = useResetVariables();
1113
const [variables] = useVariablesState();
14+
const {isOpen, setOpen} = useOverlayState();
1215

1316
const isDisabled = useMemo(() => {
1417
return (
@@ -22,10 +25,12 @@ export function ResetButton() {
2225
);
2326
}, [variables]);
2427

28+
useKeyPress("d", () => setOpen(true), {enabled: !isDisabled});
29+
2530
return (
2631
<Tooltip closeDelay={0} delay={100}>
2732
<Tooltip.Trigger>
28-
<AlertDialog>
33+
<AlertDialog isOpen={isOpen} onOpenChange={setOpen}>
2934
<Button isIconOnly isDisabled={isDisabled} size="md" variant="tertiary">
3035
<ArrowRotateLeft />
3136
</Button>
@@ -67,7 +72,12 @@ export function ResetButton() {
6772
</Tooltip.Trigger>
6873
<Tooltip.Content>
6974
<Tooltip.Arrow />
70-
<p>Reset to defaults</p>
75+
<p>
76+
Reset to defaults{" "}
77+
<Kbd>
78+
<Kbd.Content>D</Kbd.Content>
79+
</Kbd>
80+
</p>
7181
</Tooltip.Content>
7282
</Tooltip>
7383
);

apps/docs/src/app/themes/components/theme-popover.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
import type {ThemeId} from "../constants";
44

55
import {BucketPaint, ChevronsExpandVertical} from "@gravity-ui/icons";
6-
import {InputGroup, Label, ListBox, Popover} from "@heroui/react";
6+
import {InputGroup, Kbd, Label, ListBox, Popover} from "@heroui/react";
77
import Image from "next/image";
88

9+
import useKeyPress from "@/hooks/use-key-press";
910
import {cn} from "@/utils/cn";
1011

1112
import {findMatchingTheme, themeValuesById, themes} from "../constants";
@@ -30,6 +31,16 @@ export function ThemePopover() {
3031
});
3132
};
3233

34+
const randomizeTheme = () => {
35+
const randomTheme = themes[Math.floor(Math.random() * themes.length)];
36+
37+
if (randomTheme) {
38+
applyTheme(randomTheme.id);
39+
}
40+
};
41+
42+
useKeyPress("t", randomizeTheme);
43+
3344
return (
3445
<Popover>
3546
<div className="flex flex-col gap-1">
@@ -94,6 +105,13 @@ export function ThemePopover() {
94105
</ListBox.Item>
95106
)}
96107
</ListBox>
108+
<p className="mt-5 text-xs text-muted">
109+
Press{" "}
110+
<Kbd>
111+
<Kbd.Content>T</Kbd.Content>
112+
</Kbd>{" "}
113+
to pick random
114+
</p>
97115
</Popover.Dialog>
98116
</Popover.Content>
99117
</Popover>

0 commit comments

Comments
 (0)