Adding a shortcut for zooming (#2562)

src/app/layout.tsx

@@ -13,12 +13,11 @@ import {
   selectedAppIdAtom,
 } from "@/atoms/appAtoms";
 import { useSettings } from "@/hooks/useSettings";
-import type { ZoomLevel } from "@/lib/schemas";
+import { DEFAULT_ZOOM_LEVEL } from "@/lib/schemas";
 import { selectedComponentsPreviewAtom } from "@/atoms/previewAtoms";
 import { chatInputValueAtom } from "@/atoms/chatAtoms";
 import { usePlanEvents } from "@/hooks/usePlanEvents";
-
-const DEFAULT_ZOOM_LEVEL: ZoomLevel = "100";
+import { useZoomShortcuts } from "@/hooks/useZoomShortcuts";
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   const { refreshAppIframe } = useRunApp();
@@ -36,6 +35,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   // Initialize plan events listener
   usePlanEvents();
 
+  // Zoom keyboard shortcuts (Ctrl/Cmd + =/- /0)
+  useZoomShortcuts();
+
   useEffect(() => {
     const zoomLevel = settings?.zoomLevel ?? DEFAULT_ZOOM_LEVEL;
     const zoomFactor = Number(zoomLevel) / 100;

src/components/ZoomSelector.tsx

 import { useMemo } from "react";
 import { useSettings } from "@/hooks/useSettings";
-import { ZoomLevel, ZoomLevelSchema } from "@/lib/schemas";
+import { ZoomLevel, ZoomLevelSchema, DEFAULT_ZOOM_LEVEL } from "@/lib/schemas";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -26,8 +26,6 @@ const ZOOM_LEVEL_DESCRIPTIONS: Record<ZoomLevel, string> = {
   "150": "Maximum zoom for maximum accessibility.",
 };
 
-const DEFAULT_ZOOM_LEVEL: ZoomLevel = "100";
-
 export function ZoomSelector() {
   const { settings, updateSettings } = useSettings();
   const currentZoomLevel: ZoomLevel = useMemo(() => {

src/hooks/useZoomShortcuts.ts

+import { useCallback, useEffect, useMemo } from "react";
+import { useSettings } from "@/hooks/useSettings";
+import {
+  type ZoomLevel,
+  ZoomLevelSchema,
+  ZOOM_LEVELS,
+  DEFAULT_ZOOM_LEVEL,
+} from "@/lib/schemas";
+import { useIsMac } from "@/hooks/useChatModeToggle";
+
+export function useZoomShortcuts() {
+  const { settings, updateSettings } = useSettings();
+  const isMac = useIsMac();
+
+  const currentZoomLevel: ZoomLevel = useMemo(() => {
+    const value = settings?.zoomLevel ?? DEFAULT_ZOOM_LEVEL;
+    return ZoomLevelSchema.safeParse(value).success
+      ? (value as ZoomLevel)
+      : DEFAULT_ZOOM_LEVEL;
+  }, [settings?.zoomLevel]);
+
+  const zoomIn = useCallback(() => {
+    const currentIndex = ZOOM_LEVELS.indexOf(currentZoomLevel);
+    if (currentIndex < ZOOM_LEVELS.length - 1) {
+      updateSettings({ zoomLevel: ZOOM_LEVELS[currentIndex + 1] });
+    }
+  }, [currentZoomLevel, updateSettings]);
+
+  const zoomOut = useCallback(() => {
+    const currentIndex = ZOOM_LEVELS.indexOf(currentZoomLevel);
+    if (currentIndex > 0) {
+      updateSettings({ zoomLevel: ZOOM_LEVELS[currentIndex - 1] });
+    }
+  }, [currentZoomLevel, updateSettings]);
+
+  const resetZoom = useCallback(() => {
+    updateSettings({ zoomLevel: DEFAULT_ZOOM_LEVEL });
+  }, [updateSettings]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      const modifier = isMac ? event.metaKey : event.ctrlKey;
+      if (!modifier) return;
+
+      if (event.key === "=" || event.key === "+") {
+        event.preventDefault();
+        zoomIn();
+      } else if (event.key === "-") {
+        event.preventDefault();
+        zoomOut();
+      } else if (event.key === "0") {
+        event.preventDefault();
+        resetZoom();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isMac, zoomIn, zoomOut, resetZoom]);
+}

src/lib/schemas.ts

@@ -241,6 +241,8 @@ export type ReleaseChannel = z.infer<typeof ReleaseChannelSchema>;
 
 export const ZoomLevelSchema = z.enum(["90", "100", "110", "125", "150"]);
 export type ZoomLevel = z.infer<typeof ZoomLevelSchema>;
+export const ZOOM_LEVELS: readonly ZoomLevel[] = ZoomLevelSchema.options;
+export const DEFAULT_ZOOM_LEVEL: ZoomLevel = "100";
 
 export const DeviceModeSchema = z.enum(["desktop", "tablet", "mobile"]);
 export type DeviceMode = z.infer<typeof DeviceModeSchema>;

src/main.ts

@@ -351,10 +351,6 @@ const createApplicationMenu = () => {
           ? [{ role: "toggleDevTools" as const }]
           : []),
         { type: "separator" as const },
-        { role: "resetZoom" as const },
-        { role: "zoomIn" as const },
-        { role: "zoomOut" as const },
-        { type: "separator" as const },
         { role: "togglefullscreen" as const },
       ],
     },