Persist Zoom Level

.npmrc

@@ -1,3 +1,2 @@
 save-exact=true
 strict-peer-deps=true
-fund=false

.vscode/settings.json

@@ -1,12 +1,14 @@
 {
-  // vite+ (linting and formatting)
+  // vite+
   "editor.codeActionsOnSave": {
     "source.fixAll.oxc": "always"
   },
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
   "oxc.typeAware": true,
+  "oxc.configPath": "vite.config.ts",
+  "vitest.shellType": "terminal",
   // others
   "files.watcherExclude": {
     "**/.git/objects/**": true,

src-tauri/src/main.rs

@@ -126,11 +126,11 @@ fn main() {
             // TODO: Windows drag-n-drop on windows does not work :|
             // https://github.com/tauri-apps/wry/issues/904
             #[cfg(target_os = "windows")]
-            window_builder.disable_drag_drop_handler().build()?;
+            let window = window_builder.disable_drag_drop_handler().build()?;
 
             // On macOS, we hide the native frame and use overlay controls as they're nicer
             #[cfg(target_os = "macos")]
-            window_builder
+            let window = window_builder
                 .hidden_title(true)
                 .title_bar_style(tauri::TitleBarStyle::Overlay)
                 .traffic_light_position(tauri::Position::Logical(tauri::LogicalPosition {
@@ -142,7 +142,10 @@ fn main() {
                 .build()?;
 
             #[cfg(target_os = "linux")]
-            window_builder.build()?;
+            let window = window_builder.build()?;
+
+            // Should probably be on the builder, but the API is not there yet
+            window.set_zoom(conf.ui_zoom_level)?;
 
             info!("Main window built");
 

src-tauri/src/plugins/config.rs

@@ -60,6 +60,7 @@ pub struct Config {
     pub language: String,
     pub theme: String,
     pub ui_accent_color: Option<String>,
+    pub ui_zoom_level: f64,
     pub audio_volume: f32,
     pub audio_playback_rate: Option<f32>,
     pub audio_follow_playing_track: bool,
@@ -87,6 +88,7 @@ impl Default for Config {
             language: "en".to_owned(),
             theme: SYSTEM_THEME.to_owned(),
             ui_accent_color: None,
+            ui_zoom_level: 1.0,
             audio_volume: 1.0,
             audio_playback_rate: Some(1.0),
             audio_follow_playing_track: false,

src/components/Setting.tsx

@@ -100,7 +100,7 @@ export function Select(
   return (
     <div>
       <Label htmlFor={id}>{label}</Label>
-      <select id={id} {...otherProps} {...stylex.props(styles.settingSelect)}>
+      <select id={id} {...otherProps} {...stylex.props(styles.settingInput)}>
         {props.children}
       </select>
       {description != null && <Description>{description}</Description>}
@@ -153,31 +153,12 @@ const styles = stylex.create({
   settingLabelNoMargin: {
     marginBottom: 0,
   },
-  settingSelect: {
-    appearance: 'none',
-    display: 'block',
-    backgroundColor: 'var(--input-bg)',
-    color: 'var(--input-color)',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: {
-      default: 'var(--border-color-softer)',
-      ':focus': 'var(--main-color)',
-    },
-    borderRadius: 'var(--border-radius)',
-    padding: '8px',
-    width: '100%',
-    fontSize: '1rem',
-    opacity: {
-      ':disabled': 0.6,
-    },
-    cursor: {
-      ':disabled': 'not-allowed',
-    },
-  },
   settingInput: {
+    boxSizing: 'border-box',
+    height: '32px',
     appearance: 'none',
     display: 'block',
+    lineHeight: 1,
     backgroundColor: 'var(--input-bg)',
     color: 'var(--input-color)',
     borderWidth: '1px',

src/generated/typings.ts

@@ -1,6 +1,6 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type Config = { language: string, theme: string, ui_accent_color: string | null, audio_volume: number, audio_playback_rate: number | null, audio_follow_playing_track: boolean, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, audio_stream_server: boolean, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, library_autorefresh: boolean, sleepblocker: boolean, auto_update_checker: boolean, notifications: boolean, track_view_density: TrackViewDensity, wayland_compat: boolean, };
+export type Config = { language: string, theme: string, ui_accent_color: string | null, ui_zoom_level: number, audio_volume: number, audio_playback_rate: number | null, audio_follow_playing_track: boolean, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, audio_stream_server: boolean, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, library_autorefresh: boolean, sleepblocker: boolean, auto_update_checker: boolean, notifications: boolean, track_view_density: TrackViewDensity, wayland_compat: boolean, };
 
 export type DefaultView = "Library" | "Artists" | "Playlists";
 

src/routes/settings.audio.tsx

@@ -27,7 +27,7 @@ function ViewSettingsAudio() {
           value={config.audio_playback_rate ?? ''}
           onChange={(e) =>
             player
-              .setPlaybackRate(Number.parseFloat(e.currentTarget.value))
+              .setPlaybackRate(e.currentTarget.valueAsNumber)
               .then(invalidate)
               .catch(logAndNotifyError)
           }

src/routes/settings.ui.tsx

@@ -3,7 +3,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useLoaderData } from '@tanstack/react-router';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { debounce } from 'lodash-es';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import * as Setting from '../components/Setting';
 import CheckboxSetting from '../components/SettingCheckbox';
@@ -108,6 +108,22 @@ function ViewSettingsUI() {
           })}
         </Setting.Select>
       </Setting.Section>
+      <Setting.Section>
+        <Setting.Input
+          label={t`Zoom level`}
+          description={t`Scale the interface size (for example 1, 1.1, or 1.25)`}
+          type="number"
+          step={0.05}
+          min={0.5}
+          max={3}
+          value={config.ui_zoom_level}
+          onChange={(e) => {
+            SettingsAPI.setUIZoomLevel(e.currentTarget.valueAsNumber)
+              .then(invalidate)
+              .catch(logAndNotifyError);
+          }}
+        />
+      </Setting.Section>
       <Setting.Section>
         <Setting.Select
           label={t`Tracks density`}

src/stores/SettingsAPI.ts

@@ -1,5 +1,6 @@
 import { t } from '@lingui/core/macro';
 import { getVersion } from '@tauri-apps/api/app';
+import { getCurrentWebview } from '@tauri-apps/api/webview';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { info } from '@tauri-apps/plugin-log';
 import * as semver from 'semver';
@@ -126,6 +127,14 @@ const applyUIMainColorToUI = (mainColor: Config['ui_accent_color']) => {
   document.documentElement.style.setProperty('--main-color', mainColor);
 };
 
+const setUIZoomLevel = async (zoomLevel: number): Promise<void> => {
+  await getCurrentWebview().setZoom(zoomLevel);
+  await ConfigBridge.set(
+    'ui_zoom_level' as keyof Config,
+    zoomLevel as Config[keyof Config],
+  );
+};
+
 /**
  * Check if a new release is available
  */
@@ -226,6 +235,7 @@ const SettingsAPI = {
   applyThemeToUI,
   setUIMainColor,
   applyUIMainColorToUI,
+  setUIZoomLevel,
   setTracksDensity,
   checkForUpdate,
   toggleLibraryAutorefresh,

src/translations/en.po

@@ -82,13 +82,13 @@ msgstr "Library"
 
 #: src/components/Navigation.tsx:61
 #: src/routes/artists.tsx:64
-#: src/routes/settings.ui.tsx:147
+#: src/routes/settings.ui.tsx:163
 msgid "Artists"
 msgstr "Artists"
 
 #: src/components/Navigation.tsx:68
 #: src/routes/playlists.tsx:165
-#: src/routes/settings.ui.tsx:150
+#: src/routes/settings.ui.tsx:166
 msgid "Playlists"
 msgstr "Playlists"
 
@@ -490,62 +490,70 @@ msgid "Language"
 msgstr "Language"
 
 #: src/routes/settings.ui.tsx:113
+msgid "Zoom level"
+msgstr "Zoom level"
+
+#: src/routes/settings.ui.tsx:114
+msgid "Scale the interface size (for example 1, 1.1, or 1.25)"
+msgstr "Scale the interface size (for example 1, 1.1, or 1.25)"
+
+#: src/routes/settings.ui.tsx:129
 msgid "Tracks density"
 msgstr "Tracks density"
 
-#: src/routes/settings.ui.tsx:114
+#: src/routes/settings.ui.tsx:130
 msgid "Change the tracks spacing"
 msgstr "Change the tracks spacing"
 
-#: src/routes/settings.ui.tsx:125
+#: src/routes/settings.ui.tsx:141
 msgid "Normal (default)"
 msgstr "Normal (default)"
 
-#: src/routes/settings.ui.tsx:128
+#: src/routes/settings.ui.tsx:144
 msgid "Compact"
 msgstr "Compact"
 
-#: src/routes/settings.ui.tsx:134
+#: src/routes/settings.ui.tsx:150
 msgid "Default view"
 msgstr "Default view"
 
-#: src/routes/settings.ui.tsx:136
+#: src/routes/settings.ui.tsx:152
 msgid "Change the default view when starting the application"
 msgstr "Change the default view when starting the application"
 
-#: src/routes/settings.ui.tsx:144
+#: src/routes/settings.ui.tsx:160
 msgid "Library (default)"
 msgstr "Library (default)"
 
-#: src/routes/settings.ui.tsx:156
+#: src/routes/settings.ui.tsx:172
 msgid "Display Notifications"
 msgstr "Display Notifications"
 
-#: src/routes/settings.ui.tsx:157
+#: src/routes/settings.ui.tsx:173
 msgid "Send notifications when the playing track changes"
 msgstr "Send notifications when the playing track changes"
 
-#: src/routes/settings.ui.tsx:166
+#: src/routes/settings.ui.tsx:182
 msgid "Sleep mode blocker"
 msgstr "Sleep mode blocker"
 
-#: src/routes/settings.ui.tsx:167
+#: src/routes/settings.ui.tsx:183
 msgid "Prevent the computer from going into sleep mode when playing"
 msgstr "Prevent the computer from going into sleep mode when playing"
 
-#: src/routes/settings.ui.tsx:177
+#: src/routes/settings.ui.tsx:193
 msgid "[Beta] Wayland compatibility enhancements"
 msgstr "[Beta] Wayland compatibility enhancements"
 
-#: src/routes/settings.ui.tsx:178
+#: src/routes/settings.ui.tsx:194
 msgid "If you face issues using Wayland, try out this option"
 msgstr "If you face issues using Wayland, try out this option"
 
-#: src/routes/settings.ui.tsx:201
+#: src/routes/settings.ui.tsx:217
 msgid "Light"
 msgstr "Light"
 
-#: src/routes/settings.ui.tsx:203
+#: src/routes/settings.ui.tsx:219
 msgid "Dark"
 msgstr "Dark"
 
@@ -612,11 +620,11 @@ msgid "The playlist \"{name}\" was created"
 msgstr "The playlist \"{name}\" was created"
 
 #. placeholder {0}: newRelease.tag_name
-#: src/stores/SettingsAPI.ts:167
+#: src/stores/SettingsAPI.ts:176
 msgid "Museeks {0} is available, check https://museeks.io!"
 msgstr "Museeks {0} is available, check https://museeks.io!"
 
-#: src/stores/SettingsAPI.ts:169
+#: src/stores/SettingsAPI.ts:178
 msgid "Museeks {currentVersion} is the latest version available."
 msgstr "Museeks {currentVersion} is the latest version available."