Add zoom setting

src-angular/app/app.component.ts

@@ -14,5 +14,16 @@ export class AppComponent {
 	constructor(settingsService: SettingsService) {
 		// Ensure settings are loaded before rendering the application
 		settingsService.loadSettings().then(() => this.settingsLoaded = true)
+
+		document.addEventListener('keydown', event => {
+			if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
+				event.preventDefault()
+				if (event.key === '+' || event.key === '=') {
+					settingsService.zoomIn()
+				} else {
+					settingsService.zoomOut()
+				}
+			}
+		})
 	}
 }

src-angular/app/components/settings/settings.component.html

@@ -19,34 +19,48 @@
 
 	<label class="form-control w-full max-w-xs">
 		<div class="label">
-			<span class="label-text">Theme</span>
+			<span class="label-text">Appearance</span>
 		</div>
-		<div class="dropdown dropdown-hover">
+		<div class="flex gap-3 items-center">
-			<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
+			<div class="dropdown dropdown-hover">
-			<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
+				<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
-				<li>
+				<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
-					<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
+					<li>
-					<ul>
+						<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
-						<li><a (click)="setTheme('business')">Business</a></li>
+						<ul>
-						<li><a (click)="setTheme('dark')">Dark</a></li>
+							<li><a (click)="setTheme('business')">Business</a></li>
-						<li><a (click)="setTheme('dim')">Dim</a></li>
+							<li><a (click)="setTheme('dark')">Dark</a></li>
-						<li><a (click)="setTheme('night')">Night</a></li>
+							<li><a (click)="setTheme('dim')">Dim</a></li>
-						<li><a (click)="setTheme('sunset')">Sunset</a></li>
+							<li><a (click)="setTheme('night')">Night</a></li>
-						<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
+							<li><a (click)="setTheme('sunset')">Sunset</a></li>
-					</ul>
+							<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
-				</li>
+						</ul>
-				<li>
+					</li>
-					<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
+					<li>
-					<ul>
+						<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
-						<li><a (click)="setTheme('aqua')">Aqua</a></li>
+						<ul>
-						<li><a (click)="setTheme('emerald')">Emerald</a></li>
+							<li><a (click)="setTheme('aqua')">Aqua</a></li>
-						<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
+							<li><a (click)="setTheme('emerald')">Emerald</a></li>
-						<li><a (click)="setTheme('nord')">Nord</a></li>
+							<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
-						<li><a (click)="setTheme('valentine')">Valentine</a></li>
+							<li><a (click)="setTheme('nord')">Nord</a></li>
-						<li><a (click)="setTheme('winter')">Winter</a></li>
+							<li><a (click)="setTheme('valentine')">Valentine</a></li>
-					</ul>
+							<li><a (click)="setTheme('winter')">Winter</a></li>
-				</li>
+						</ul>
-			</ul>
+					</li>
+				</ul>
+			</div>
+			<div class="join join-vertical">
+				<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
+					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
+						<i class="bi bi-zoom-in"></i>
+					</button>
+				</div>
+				<div class="tooltip tooltip-right" data-tip="Zoom Out (ctrl -)">
+					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomOut()">
+						<i class="bi bi-zoom-out"></i>
+					</button>
+				</div>
+			</div>
 		</div>
 	</label>
 

src-angular/app/core/services/settings.service.ts

@@ -1,9 +1,10 @@
 import { DOCUMENT } from '@angular/common'
 import { Inject, Injectable } from '@angular/core'
 
+import _ from 'lodash'
 import { Difficulty, Instrument } from 'scan-chart'
 
-import { Settings, themes } from '../../../../src-shared/Settings'
+import { Settings, themes } from '../../../../src-shared/Settings.js'
 
 @Injectable({
 	providedIn: 'root',
@@ -90,4 +91,20 @@ export class SettingsService {
 		this.settings.isCompactTable = value
 		this.saveSettings()
 	}
+
+	get zoomFactor() {
+		return this.settings.zoomFactor
+	}
+	set zoomFactor(value: number) {
+		this.settings.zoomFactor = value
+		this.saveSettings()
+	}
+	zoomIn() {
+		this.zoomFactor = _.round(this.zoomFactor + 0.1, 3)
+	}
+	zoomOut() {
+		if (_.round(this.zoomFactor - 0.1, 3) > 0) {
+			this.zoomFactor = _.round(this.zoomFactor - 0.1, 3)
+		}
+	}
 }

src-electron/ipc/SettingsHandler.ipc.ts

@@ -5,6 +5,7 @@ import { inspect } from 'util'
 
 import { dataPath, settingsPath, tempPath, themesPath } from '../../src-shared/Paths.js'
 import { defaultSettings, Settings } from '../../src-shared/Settings.js'
+import { mainWindow } from '../main.js'
 
 export let settings = readSettings()
 
@@ -26,6 +27,9 @@ function readSettings() {
  * Updates Bridge's settings object to `newSettings` and saves them to Bridge's data directories.
  */
 export async function setSettings(newSettings: Settings) {
+	if (settings.zoomFactor !== newSettings.zoomFactor) {
+		mainWindow.webContents.setZoomFactor(newSettings.zoomFactor)
+	}
 	settings = newSettings
 	await saveSettings(newSettings)
 }

src-electron/main.ts

@@ -6,15 +6,14 @@ import * as url from 'url'
 
 import { IpcFromMainEmitEvents } from '../src-shared/interfaces/ipc.interface.js'
 import { dataPath } from '../src-shared/Paths.js'
+import { settings } from './ipc/SettingsHandler.ipc.js'
 import { retryUpdate } from './ipc/UpdateHandler.ipc.js'
 import { getIpcInvokeHandlers, getIpcToMainEmitHandlers } from './IpcHandler.js'
 
 electronUnhandled({ showDialog: true, logger: err => console.log('Error: Unhandled Rejection:', err) })
 
-import { dirname } from 'path'
-
 const _filename = url.fileURLToPath(import.meta.url)
-const _dirname = dirname(_filename)
+const _dirname = path.dirname(_filename)
 
 export let mainWindow: BrowserWindow
 const args = process.argv.slice(1)
@@ -83,14 +82,8 @@ async function createBridgeWindow() {
 	// Don't use a system menu
 	mainWindow.setMenu(null)
 
-	mainWindow.webContents.on('before-input-event', (event, input) => {
+	// Set user-specified zoom level
-		if (input.control && (input.key === '+' || input.key === '-' || input.key === '=')) {
+	mainWindow.webContents.setZoomFactor(settings.zoomFactor)
-			event.preventDefault()
-			const zoomFactor = mainWindow.webContents.getZoomFactor()
-			const newZoomFactor = input.key === '+' || input.key === '=' ? zoomFactor + 0.1 : zoomFactor - 0.1
-			mainWindow.webContents.setZoomFactor(newZoomFactor)
-		}
-	})
 
 	// IPC handlers
 	for (const [key, handler] of Object.entries(getIpcInvokeHandlers())) {

src-shared/Settings.ts

@@ -26,6 +26,7 @@ export interface Settings {
 	libraryPath: string | undefined // The path to the user's library
 	isSng: boolean                  // If the chart should be downloaded as a .sng file or as a chart folder
 	isCompactTable: boolean         // If the search result table should have reduced padding
+	zoomFactor: number              // How much the display should be zoomed
 	instrument: Instrument | null   // The instrument selected by default, or `null` for "Any Instrument"
 	difficulty: Difficulty | null   // The difficulty selected by default, or `null` for "Any Difficulty"
 }
@@ -39,6 +40,7 @@ export const defaultSettings: Settings = {
 	libraryPath: undefined,
 	isSng: false,
 	isCompactTable: false,
+	zoomFactor: 1,
 	instrument: 'guitar',
 	difficulty: null,
 }