Handle common app zoom shortcuts

[Amer-alsayed]

Summary

• handle common app zoom shortcuts in the web renderer
• support zoom in, zoom out, and reset with Ctrl/Cmd + +, -, and 0
• persist the chosen zoom level and restore it on launch

Closes #281.

Before

After

Testing

• bun run --filter=@t3tools/web typecheck
• bun run --filter=@t3tools/web test

Note

Handle Ctrl/Cmd zoom keyboard shortcuts in the web app

• Installs a global keydown listener in main.tsx that intercepts Ctrl/Cmd +, -, and 0 shortcuts (including numpad variants) and prevents the browser's default zoom behavior.
• Applies a custom zoom level to document.documentElement.style.zoom, persisted to localStorage and restored on startup.
• Zoom is clamped to a defined min/max range and rounded to one decimal place; 0/Numpad0 resets to the default level.
• Behavioral Change: browser-native zoom shortcuts are suppressed and replaced with app-managed zoom for users of this app.

📊 Macroscope summarized f270877. 1 file reviewed, 1 issue evaluated, 0 issues filtered, 1 comment posted

🗂️ Filtered Issues

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3300df08-2a18-469c-a558-b3c8c12e3171

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[macroscopeapp]

🟡 Medium src/main.tsx:25

readStoredZoomLevel directly accesses window.localStorage.getItem() without exception handling. When the user has disabled cookies or the page runs in a strict iframe sandbox, this throws a SecurityError that propagates uncaught to the top level, halting main.tsx before ReactDOM.createRoot and leaving users with a blank white screen. Consider wrapping the localStorage access in a try-catch that returns DEFAULT_ZOOM_LEVEL on any exception.

+const readStoredZoomLevel = () => {
+  try {
+    const storedValue = window.localStorage.getItem(APP_ZOOM_STORAGE_KEY);
+    const parsedValue = Number.parseFloat(storedValue ?? "");
+
+    if (!Number.isFinite(parsedValue)) {
+      return DEFAULT_ZOOM_LEVEL;
+    }
+
+    return clampZoomLevel(parsedValue);
+  } catch {
+    return DEFAULT_ZOOM_LEVEL;
+  }
+};

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/main.tsx around lines 25-34:

`readStoredZoomLevel` directly accesses `window.localStorage.getItem()` without exception handling. When the user has disabled cookies or the page runs in a strict iframe sandbox, this throws a `SecurityError` that propagates uncaught to the top level, halting `main.tsx` before `ReactDOM.createRoot` and leaving users with a blank white screen. Consider wrapping the `localStorage` access in a try-catch that returns `DEFAULT_ZOOM_LEVEL` on any exception.

Evidence trail:
apps/web/src/main.tsx lines 25-33: `readStoredZoomLevel` function with direct `window.localStorage.getItem()` call and no try-catch. Line 59: `applyZoomLevel(readStoredZoomLevel())` inside `installAppZoomControls`. Lines 87-90: `installAppZoomControls()` called at line 88, `ReactDOM.createRoot()` at line 90. The exception path is: localStorage.getItem (line 26) → readStoredZoomLevel → installAppZoomControls (line 88) → uncaught → script halts before line 90.