diff --git a/desktop/src/app/useWebviewZoomShortcuts.ts b/desktop/src/app/useWebviewZoomShortcuts.ts index cda6c0f2e..01e910e66 100644 --- a/desktop/src/app/useWebviewZoomShortcuts.ts +++ b/desktop/src/app/useWebviewZoomShortcuts.ts @@ -3,7 +3,8 @@ import { getCurrentWebview } from "@tauri-apps/api/webview"; import { hasPrimaryShortcutModifier } from "@/shared/lib/platform"; -const DEFAULT_ZOOM_FACTOR = 1; +const DEFAULT_ZOOM_FACTOR = 1.1; +const DEFAULT_WEBVIEW_ZOOM_FACTOR = 1; const MIN_ZOOM_FACTOR = 0.75; const MAX_ZOOM_FACTOR = 1.5; const ZOOM_STEP = 0.1; @@ -61,28 +62,49 @@ function getNextZoomFactor(action: ZoomAction, zoomFactor: number) { return Math.max(roundZoomFactor(zoomFactor - ZOOM_STEP), MIN_ZOOM_FACTOR); } -function readStoredZoomFactor() { +type StoredZoomFactor = { + zoomFactor: number; + hasStoredPreference: boolean; +}; + +type ApplyTextScaleOptions = { + persistPreference?: boolean; +}; + +function readStoredZoomFactor(): StoredZoomFactor { const raw = window.localStorage.getItem(TEXT_SCALE_STORAGE_KEY); if (!raw) { - return DEFAULT_ZOOM_FACTOR; + return { zoomFactor: DEFAULT_ZOOM_FACTOR, hasStoredPreference: false }; } const parsed = Number.parseFloat(raw); if (!Number.isFinite(parsed)) { - return DEFAULT_ZOOM_FACTOR; + return { zoomFactor: DEFAULT_ZOOM_FACTOR, hasStoredPreference: false }; } - return Math.min(Math.max(parsed, MIN_ZOOM_FACTOR), MAX_ZOOM_FACTOR); + return { + zoomFactor: Math.min(Math.max(parsed, MIN_ZOOM_FACTOR), MAX_ZOOM_FACTOR), + hasStoredPreference: true, + }; } -function applyTextScale(zoomFactor: number) { - if (zoomFactor === DEFAULT_ZOOM_FACTOR) { +function applyTextScale( + zoomFactor: number, + { + persistPreference = zoomFactor !== DEFAULT_ZOOM_FACTOR, + }: ApplyTextScaleOptions = {}, +) { + if (zoomFactor === DEFAULT_WEBVIEW_ZOOM_FACTOR) { document.documentElement.style.fontSize = ""; + } else { + document.documentElement.style.fontSize = `${BASE_FONT_SIZE_PX * zoomFactor}px`; + } + + if (!persistPreference) { window.localStorage.removeItem(TEXT_SCALE_STORAGE_KEY); return; } - document.documentElement.style.fontSize = `${BASE_FONT_SIZE_PX * zoomFactor}px`; window.localStorage.setItem(TEXT_SCALE_STORAGE_KEY, String(zoomFactor)); } @@ -91,13 +113,16 @@ export function useWebviewZoomShortcuts() { React.useLayoutEffect(() => { const webview = getCurrentWebview(); - const storedZoomFactor = readStoredZoomFactor(); + const { zoomFactor: storedZoomFactor, hasStoredPreference } = + readStoredZoomFactor(); zoomFactorRef.current = storedZoomFactor; - applyTextScale(storedZoomFactor); + applyTextScale(storedZoomFactor, { + persistPreference: hasStoredPreference, + }); // Keep the webview coordinate system stable; only text should scale. - void webview.setZoom(DEFAULT_ZOOM_FACTOR).catch((error) => { + void webview.setZoom(DEFAULT_WEBVIEW_ZOOM_FACTOR).catch((error) => { console.error("Failed to reset webview zoom", error); });