Custom font sizes and better zoom

src-web/hooks/useHotKey.ts

@@ -20,7 +20,10 @@ export type HotkeyAction =
   | 'sidebar.focus'
   | 'sidebar.toggle'
   | 'urlBar.focus'
-  | 'command_palette.toggle';
+  | 'command_palette.toggle'
+  | 'app.zoom_in'
+  | 'app.zoom_out'
+  | 'app.zoom_reset';
 
 const hotkeys: Record<HotkeyAction, string[]> = {
   'environmentEditor.toggle': ['CmdCtrl+Shift+e'],
@@ -37,6 +40,9 @@ const hotkeys: Record<HotkeyAction, string[]> = {
   'sidebar.toggle': ['CmdCtrl+b'],
   'urlBar.focus': ['CmdCtrl+l'],
   'command_palette.toggle': ['CmdCtrl+k'],
+  'app.zoom_in': ['CmdCtrl+='],
+  'app.zoom_out': ['CmdCtrl+-'],
+  'app.zoom_reset': ['CmdCtrl+0'],
 };
 
 const hotkeyLabels: Record<HotkeyAction, string> = {
@@ -54,6 +60,9 @@ const hotkeyLabels: Record<HotkeyAction, string> = {
   'sidebar.toggle': 'Toggle Sidebar',
   'urlBar.focus': 'Focus URL',
   'command_palette.toggle': 'Toggle Command Palette',
+  'app.zoom_in': 'Zoom In',
+  'app.zoom_out': 'Zoom Out',
+  'app.zoom_reset': 'Zoom to Actual Size',
 };
 
 export const hotkeyActions: HotkeyAction[] = Object.keys(hotkeys) as (keyof typeof hotkeys)[];

src-web/hooks/usePreferredAppearance.ts

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import {
-  type Appearance,
-  getPreferredAppearance,
-  subscribeToPreferredAppearanceChange,
-} from '../lib/theme/window';
+  getCSSAppearance,
+  getWindowAppearance,
+  subscribeToWindowAppearanceChange,
+} from '../lib/theme/appearance';
+import { type Appearance } from '../lib/theme/window';
 
 export function usePreferredAppearance() {
-  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>();
+  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(getCSSAppearance());
 
-  // Set appearance when preferred theme changes
   useEffect(() => {
-    getPreferredAppearance().then(setPreferredAppearance);
-    return subscribeToPreferredAppearanceChange(setPreferredAppearance);
+    getWindowAppearance().then(setPreferredAppearance);
+    return subscribeToWindowAppearanceChange(setPreferredAppearance);
   }, []);
 
   return preferredAppearance;

src-web/hooks/useResolvedAppearance.ts

@@ -10,7 +10,5 @@ export function useResolvedAppearance() {
       ? preferredAppearance
       : settings.appearance;
 
-  console.log('HELLO', settings?.appearance, preferredAppearance);
-
   return appearance;
 }

src-web/hooks/useZoom.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import { useSettings } from './useSettings';
+import { useUpdateSettings } from './useUpdateSettings';
+
+export function useZoom() {
+  const settings = useSettings();
+  const updateSettings = useUpdateSettings();
+
+  const zoomIn = useCallback(() => {
+    if (!settings) return;
+    updateSettings.mutate({
+      ...settings,
+      interfaceScale: Math.min(1.8, settings.interfaceScale * 1.1),
+    });
+  }, [settings, updateSettings]);
+
+  const zoomOut = useCallback(() => {
+    if (!settings) return;
+    updateSettings.mutate({
+      ...settings,
+      interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9),
+    });
+  }, [settings, updateSettings]);
+
+  const zoomReset = useCallback(() => {
+    if (!settings) return;
+    updateSettings.mutate({ ...settings, interfaceScale: 1 });
+  }, [settings, updateSettings]);
+
+  return { zoomIn, zoomOut, zoomReset };
+}