From 139ecc8176e1940f03f7c2c5e867a9e05b6c49d2 Mon Sep 17 00:00:00 2001
From: Yuri Karamian <yuri@arkhost.com>
Date: Thu, 4 Jun 2026 19:27:00 +0200
Subject: [PATCH] Add Interface Scale setting to zoom the whole app (80-200%)

---
 src-tauri/capabilities/desktop.json     |  3 +-
 src-tauri/src/commands.rs               |  8 +++++
 src-tauri/src/lib.rs                    |  1 +
 src-tauri/src/types.rs                  |  3 ++
 src/lib/api.ts                          |  4 +++
 src/lib/components/SettingsPanel.svelte | 47 ++++++++++++++++++++++++-
 src/lib/types.ts                        |  1 +
 src/routes/+page.svelte                 | 10 ++++++
 8 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/src-tauri/capabilities/desktop.json b/src-tauri/capabilities/desktop.json
index 78d56da..ed85a92 100644
--- a/src-tauri/capabilities/desktop.json
+++ b/src-tauri/capabilities/desktop.json
@@ -6,6 +6,7 @@
   "windows": ["main"],
   "permissions": [
     "updater:default",
-    "window-state:default"
+    "window-state:default",
+    "core:webview:allow-set-webview-zoom"
   ]
 }
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index ce60779..c18ac50 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -103,6 +103,14 @@ pub fn set_line_height(state: State<'_, AppState>, height: f64) -> Result<(), St
     Ok(())
 }
 
+#[tauri::command]
+pub fn set_ui_scale(state: State<'_, AppState>, scale: f64) -> Result<(), String> {
+    let mut config = state.config.lock().map_err(|e| e.to_string())?;
+    config.ui_scale = Some(scale);
+    save_app_config(&config)?;
+    Ok(())
+}
+
 // ── Notebooks ──
 
 #[tauri::command]
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 6be7ad1..3634df4 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -103,6 +103,7 @@ pub fn run() {
             commands::set_font_size,
             commands::set_font_family,
             commands::set_line_height,
+            commands::set_ui_scale,
             commands::get_notebooks,
             commands::count_root_notes,
             commands::create_notebook,
diff --git a/src-tauri/src/types.rs b/src-tauri/src/types.rs
index d75332d..ec01fa5 100644
--- a/src-tauri/src/types.rs
+++ b/src-tauri/src/types.rs
@@ -70,6 +70,8 @@ pub struct AppConfig {
     #[serde(default)]
     pub line_height: Option<f64>,
     #[serde(default)]
+    pub ui_scale: Option<f64>,
+    #[serde(default)]
     pub compact_notes: bool,
     #[serde(default)]
     pub time_format: String,
@@ -167,6 +169,7 @@ impl Default for AppConfig {
             font_size: None,
             font_family: None,
             line_height: None,
+            ui_scale: None,
             compact_notes: false,
             time_format: "relative".to_string(),
             gpu_acceleration: true,
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 20d73d8..9ced10e 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -43,6 +43,10 @@ export async function setLineHeight(height: number): Promise<void> {
   return invoke("set_line_height", { height });
 }
 
+export async function setUiScale(scale: number): Promise<void> {
+  return invoke("set_ui_scale", { scale });
+}
+
 export async function getNotebooks(): Promise<NotebookEntry[]> {
   return invoke("get_notebooks");
 }
diff --git a/src/lib/components/SettingsPanel.svelte b/src/lib/components/SettingsPanel.svelte
index 4ec1bbe..5edc184 100644
--- a/src/lib/components/SettingsPanel.svelte
+++ b/src/lib/components/SettingsPanel.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { showSettings, theme, appConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab, vaultReady, androidApkUrl, checkForUpdateMobile, notebookSortMode } from '$lib/stores/app';
-	import { setTheme, setAccentColor, setFontSize, setFontFamily, setLineHeight, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
+	import { setTheme, setAccentColor, setFontSize, setFontFamily, setLineHeight, setUiScale, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection } from '$lib/api';
 	import { open as openDialog } from '@tauri-apps/plugin-dialog';
 	import { listen } from '@tauri-apps/api/event';
 	import { getVersion } from '@tauri-apps/api/app';
+	import { getCurrentWebview } from '@tauri-apps/api/webview';
 	import { openUrl } from '$lib/api';
 	import type { ImportResult, BackupEntry } from '$lib/types';
 
@@ -336,10 +337,21 @@
 		{ label: 'Loose', value: 2.0 },
 	];
 
+	const uiScalePresets = [
+		{ label: '80%', value: 0.8 },
+		{ label: '90%', value: 0.9 },
+		{ label: '100%', value: 1 },
+		{ label: '125%', value: 1.25 },
+		{ label: '150%', value: 1.5 },
+		{ label: '175%', value: 1.75 },
+		{ label: '200%', value: 2 },
+	];
+
 	let activeAccent = $state($appConfig?.accent_color ?? 'Indigo');
 	let activeFontSize = $state($appConfig?.font_size ?? 14);
 	let activeFontFamily = $state($appConfig?.font_family ?? 'system');
 	let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
+	let activeUiScale = $state($appConfig?.ui_scale ?? 1);
 
 	// General settings
 	let compactNotes = $state($appConfig?.compact_notes ?? false);
@@ -477,6 +489,21 @@
 		document.documentElement.style.setProperty('--editor-line-height', String(value));
 	}
 
+	function selectUiScale(value: number) {
+		activeUiScale = value;
+		applyUiScale(value);
+		if ($appConfig) $appConfig.ui_scale = value;
+		setUiScale(value).catch((e) => console.error('Failed to save interface scale:', e));
+	}
+
+	async function applyUiScale(value: number) {
+		try {
+			await getCurrentWebview().setZoom(value);
+		} catch (e) {
+			console.error('Failed to apply interface scale:', e);
+		}
+	}
+
 	function close() {
 		// Ensure AI settings are saved when closing (in case input wasn't blurred)
 		// Only save if the key differs from what's already stored
@@ -846,6 +873,24 @@
 								</div>
 							</div>
 
+							{#if !isMobile}
+								<div class="settings-section">
+									<h3>Interface Scale</h3>
+									<div class="font-size-options">
+										{#each uiScalePresets as preset}
+											<button
+												class="font-size-btn"
+												class:active={activeUiScale === preset.value}
+												onclick={() => selectUiScale(preset.value)}
+											>
+												<span class="font-size-label">{preset.label}</span>
+											</button>
+										{/each}
+									</div>
+									<p class="setting-hint">Zooms the whole app: every panel, menu, and the editor. Use Default (100%) to reset.</p>
+								</div>
+							{/if}
+
 							<div class="settings-section">
 								<h3>Line Height</h3>
 								<div class="font-size-options">
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 0d6b10e..a7772f7 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -54,6 +54,7 @@ export interface AppConfig {
   font_size: number | null;
   font_family: string | null;
   line_height: number | null;
+  ui_scale: number | null;
   compact_notes: boolean;
   time_format: string;
   gpu_acceleration: boolean;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ebe190d..02189d6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { appConfig, vaultReady, theme } from '$lib/stores/app';
 	import { getAppConfig, openVault } from '$lib/api';
+	import { getCurrentWebview } from '@tauri-apps/api/webview';
 	import VaultPicker from '$lib/components/VaultPicker.svelte';
 	import AppLayout from '$lib/components/AppLayout.svelte';
 	import NoteWindow from '$lib/components/NoteWindow.svelte';
@@ -78,6 +79,15 @@
 				}
 			}
 
+			// Apply saved interface scale (desktop main window only; no-ops gracefully elsewhere)
+			if (!noteWindowPath && config.ui_scale && config.ui_scale !== 1) {
+				try {
+					await getCurrentWebview().setZoom(config.ui_scale);
+				} catch (e) {
+					console.error('Failed to apply interface scale:', e);
+				}
+			}
+
 			// Auto-open last vault if available
 			if (config.active_vault) {
 				try {