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

Author: diegonzs

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

@@ -7,11 +7,12 @@ import {
   Link as LinkIcon,
   NodesRight,
 } from "@gravity-ui/icons";
-import {Button, Chip, Separator, Tabs, Tooltip, toast} from "@heroui/react";
+import {Button, Chip, Kbd, Separator, Tabs, Tooltip, toast} from "@heroui/react";
 import Link from "next/link";
 
 import {HeroUILogo} from "@/components/heroui-logo";
 import {useCodePanel} from "@/hooks/use-code-panel";
+import useKeyPress from "@/hooks/use-key-press";
 
 import {tabs} from "../constants";
 import {useUndoRedo} from "../hooks";
@@ -33,6 +34,9 @@ export function BuilderHeader() {
     });
   };
 
+  useKeyPress("ArrowLeft", () => undo(), {enabled: canUndo});
+  useKeyPress("ArrowRight", () => redo(), {enabled: canRedo});
+
   return (
     <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">
       <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() {
               </Tooltip.Trigger>
               <Tooltip.Content>
                 <Tooltip.Arrow />
-                <p>Undo last change</p>
+                <p>
+                  Undo last change{" "}
+                  <Kbd>
+                    <Kbd.Abbr keyValue="left" />
+                  </Kbd>
+                </p>
               </Tooltip.Content>
             </Tooltip>
             <Tooltip closeDelay={0} delay={100}>
@@ -71,7 +80,12 @@ export function BuilderHeader() {
                 </Button>
                 <Tooltip.Content>
                   <Tooltip.Arrow />
-                  <p>Redo last change</p>
+                  <p>
+                    Redo last change{" "}
+                    <Kbd>
+                      <Kbd.Abbr keyValue="right" />
+                    </Kbd>
+                  </p>
                 </Tooltip.Content>
               </Tooltip.Trigger>
             </Tooltip>

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

@@ -1,14 +1,17 @@
 import {ArrowRotateLeft} from "@gravity-ui/icons";
-import {AlertDialog, Button, Tooltip} from "@heroui/react";
+import {AlertDialog, Button, Kbd, Tooltip, useOverlayState} from "@heroui/react";
 import {useMemo} from "react";
 
+import useKeyPress from "@/hooks/use-key-press";
+
 import {defaultThemeVariables} from "../constants";
 import {useResetVariables} from "../hooks";
 import {useVariablesState} from "../hooks/use-variables-state";
 
 export function ResetButton() {
   const reset = useResetVariables();
   const [variables] = useVariablesState();
+  const {isOpen, setOpen} = useOverlayState();
 
   const isDisabled = useMemo(() => {
     return (
@@ -22,10 +25,12 @@ export function ResetButton() {
     );
   }, [variables]);
 
+  useKeyPress("d", () => setOpen(true), {enabled: !isDisabled});
+
   return (
     <Tooltip closeDelay={0} delay={100}>
       <Tooltip.Trigger>
-        <AlertDialog>
+        <AlertDialog isOpen={isOpen} onOpenChange={setOpen}>
           <Button isIconOnly isDisabled={isDisabled} size="md" variant="tertiary">
             <ArrowRotateLeft />
           </Button>
@@ -67,7 +72,12 @@ export function ResetButton() {
       </Tooltip.Trigger>
       <Tooltip.Content>
         <Tooltip.Arrow />
-        <p>Reset to defaults</p>
+        <p>
+          Reset to defaults{" "}
+          <Kbd>
+            <Kbd.Content>D</Kbd.Content>
+          </Kbd>
+        </p>
       </Tooltip.Content>
     </Tooltip>
   );

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

@@ -3,9 +3,10 @@
 import type {ThemeId} from "../constants";
 
 import {BucketPaint, ChevronsExpandVertical} from "@gravity-ui/icons";
-import {InputGroup, Label, ListBox, Popover} from "@heroui/react";
+import {InputGroup, Kbd, Label, ListBox, Popover} from "@heroui/react";
 import Image from "next/image";
 
+import useKeyPress from "@/hooks/use-key-press";
 import {cn} from "@/utils/cn";
 
 import {findMatchingTheme, themeValuesById, themes} from "../constants";
@@ -30,6 +31,16 @@ export function ThemePopover() {
     });
   };
 
+  const randomizeTheme = () => {
+    const randomTheme = themes[Math.floor(Math.random() * themes.length)];
+
+    if (randomTheme) {
+      applyTheme(randomTheme.id);
+    }
+  };
+
+  useKeyPress("t", randomizeTheme);
+
   return (
     <Popover>
       <div className="flex flex-col gap-1">
@@ -94,6 +105,13 @@ export function ThemePopover() {
               </ListBox.Item>
             )}
           </ListBox>
+          <p className="mt-5 text-xs text-muted">
+            Press{" "}
+            <Kbd>
+              <Kbd.Content>T</Kbd.Content>
+            </Kbd>{" "}
+            to pick random
+          </p>
         </Popover.Dialog>
       </Popover.Content>
     </Popover>