From e0ead8c339ba31b44fdbec06f7bb1473b0f4544d Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 5 Sep 2025 09:05:32 +1200
Subject: [PATCH] Minor changes to settings

---
 materialious/electron/package-lock.json       |  4 +-
 .../lib/components/Settings/Settings.svelte   | 47 ++++++++++---------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json
index 4aa19bba..ac097ded 100644
--- a/materialious/electron/package-lock.json
+++ b/materialious/electron/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.10.4",
+	"version": "1.10.5",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.10.4",
+			"version": "1.10.5",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",
diff --git a/materialious/src/lib/components/Settings/Settings.svelte b/materialious/src/lib/components/Settings/Settings.svelte
index aa9dc31e..2d14687a 100644
--- a/materialious/src/lib/components/Settings/Settings.svelte
+++ b/materialious/src/lib/components/Settings/Settings.svelte
@@ -12,15 +12,20 @@
 
 	let activeTab = $state('interface');
 	const isActive = (id: string) => activeTab === id;
-	
+
 	const tabs = [
 		{ id: 'interface', label: $_('layout.interface'), icon: 'grid_view', component: Interface },
 		{ id: 'player', label: $_('layout.player.title'), icon: 'smart_display', component: Player },
 		{ id: 'ryd', label: 'RYD', icon: 'thumb_down', component: Ryd },
 		{ id: 'api extended', label: 'API Extended', icon: 'sync', component: ApiExtended },
 		{ id: 'sponsorblock', label: 'Sponsorblock', icon: 'block', component: SponsorBlock },
-		{ id: 'dearrow', label: $_('layout.deArrow.title'), icon: 'keyboard_double_arrow_down', component: DeArrow },
-	]
+		{
+			id: 'dearrow',
+			label: $_('layout.deArrow.title'),
+			icon: 'keyboard_double_arrow_down',
+			component: DeArrow
+		}
+	];
 
 	let dialogType = $state('');
 
@@ -32,24 +37,24 @@
 		}
 	}
 
-	function onKeydown(e: KeyboardEvent, idx: number) {
-		const keys = ["ArrowRight", "ArrowLeft", "Home", "End"] as const;
-		if (!keys.includes(e.key as typeof keys[number])) return;
+	function onKeydown(event: KeyboardEvent, idx: number) {
+		const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'] as const;
+		if (!keys.includes(event.key as (typeof keys)[number])) return;
 
-		e.preventDefault();
+		event.preventDefault();
 
 		let next = idx;
-		switch (e.key) {
-			case "ArrowRight":
+		switch (event.key) {
+			case 'ArrowRight':
 				next = (idx + 1) % tabs.length;
 				break;
-			case "ArrowLeft":
+			case 'ArrowLeft':
 				next = (idx - 1 + tabs.length) % tabs.length;
 				break;
-			case "Home":
+			case 'Home':
 				next = 0;
 				break;
-			case "End":
+			case 'End':
 				next = tabs.length - 1;
 				break;
 		}
@@ -87,7 +92,7 @@
 					aria-controls={`panel-${tab.id}`}
 					tabindex={isActive(tab.id) ? 0 : -1}
 					onclick={() => (activeTab = tab.id)}
-					onkeydown={(e) => onKeydown(e, i)}
+					onkeydown={(event) => onKeydown(event, i)}
 				>
 					<i>{tab.icon}</i>
 					<span>{tab.label}</span>
@@ -124,18 +129,18 @@
 				</a>
 			{/if}
 		</nav>
-		{#each tabs as t, _}
+		{#each tabs as tab, _}
 			<div
 				class="page padding"
-				id={`panel-${t.id}`}
+				id={`panel-${tab.id}`}
 				role="tabpanel"
-				aria-labelledby={`tab-${t.id}`}
-				hidden={!isActive(t.id)}
-				inert={!$isAndroidTvStore && !isActive(t.id)}
-				aria-hidden={!isActive(t.id)}
-				class:active={isActive(t.id)}
+				aria-labelledby={`tab-${tab.id}`}
+				hidden={!isActive(tab.id)}
+				inert={!$isAndroidTvStore && !isActive(tab.id)}
+				aria-hidden={!isActive(tab.id)}
+				class:active={isActive(tab.id)}
 			>
-				<t.component />
+				<tab.component />
 			</div>
 		{/each}
 		<div