From 4ed65c71cce4404ff2b8b86970cbd145b4ef4f0f Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Wed, 26 Aug 2026 22:52:35 -0400
Subject: [PATCH] fix: biome lint warnings

---
 biome.json                                  |  34 ---
 src/lib/Controls.svelte                     |  20 +-
 src/lib/Library.svelte                      |   2 +
 src/lib/LibraryLabel.svelte                 |   2 +-
 src/lib/LibraryTreeItem.svelte              |  25 ++-
 src/lib/NowPlaying.svelte                   | 222 ++++++++++----------
 src/lib/Queue.svelte                        |  18 +-
 src/lib/Sidebar.svelte                      |   5 +-
 src/lib/components/ContextMenu.svelte       |  16 +-
 src/lib/components/ProgressBar.svelte       |   2 +-
 src/lib/dialogs/InfoModal.svelte            |  23 +-
 src/lib/dialogs/Modal.svelte                |  21 +-
 src/lib/dialogs/PlaylistModals.svelte       |  24 ++-
 src/lib/dialogs/RadioModals.svelte          |   7 +-
 src/lib/dialogs/SettingsModal.svelte        |   3 +-
 src/lib/dialogs/ShareModal.svelte           |   2 +-
 src/lib/dialogs/UnsyncedChangesModal.svelte |   7 +-
 src/lib/dialogs/UpdateModal.svelte          |   2 +-
 18 files changed, 239 insertions(+), 196 deletions(-)

diff --git a/biome.json b/biome.json
index bdf447b..f6accd1 100644
--- a/biome.json
+++ b/biome.json
@@ -14,44 +14,10 @@
 			"!public"
 		]
 	},
-	"formatter": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"preset": "recommended"
-		}
-	},
 	"html": {
 		"formatter": {
 			"enabled": true
 		},
 		"experimentalFullSupportEnabled": true
-	},
-	"overrides": [
-		{
-			"includes": ["**/*.svelte", "**/*.astro", "**/*.vue"],
-			"linter": {
-				"rules": {
-					"style": {
-						"useConst": "off",
-						"useImportType": "off"
-					},
-					"correctness": {
-						"noUnusedVariables": "off",
-						"noUnusedImports": "off"
-					}
-				}
-			}
-		}
-	],
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
 	}
 }
diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
index d6ec8e4..cdada2b 100644
--- a/src/lib/Controls.svelte
+++ b/src/lib/Controls.svelte
@@ -36,6 +36,7 @@ let menu = $state<{
 >
 	{#snippet favoriteButton(track: Song)}
 		<button
+			type="button"
 			tabindex="-1"
 			class="btn-favorite pressable"
 			class:off={!track.starred}
@@ -54,9 +55,10 @@ let menu = $state<{
 			{#if settings.controlFavorite}
 				{@render favoriteButton(track)}
 			{/if}
-			<div class="rating-stars" role="group" aria-label={t("common.rating")}>
+			<fieldset aria-label={t("common.rating")}>
 				{#each [1, 2, 3, 4, 5] as rating}
 					<button
+						type="button"
 						tabindex="-1"
 						class="btn-rating pressable"
 						class:off={(track.userRating ?? 0) < rating}
@@ -72,13 +74,14 @@ let menu = $state<{
 						<Icon name="star" />
 					</button>
 				{/each}
-			</div>
+			</fieldset>
 		</div>
 	{/if}
 	<div id="playback">
 		<div class="playback-main">
 			<div class="transport">
 				<button
+					type="button"
 					id="playback-prev"
 					class="pressable"
 					tabindex="-1"
@@ -88,6 +91,7 @@ let menu = $state<{
 					<Icon name="previous" />
 				</button>
 				<button
+					type="button"
 					id="playback-toggle"
 					class="pressable"
 					tabindex="-1"
@@ -97,6 +101,7 @@ let menu = $state<{
 					<Icon name={player.paused ? "play" : "pause"} />
 				</button>
 				<button
+					type="button"
 					id="playback-next"
 					class="pressable"
 					tabindex="-1"
@@ -107,6 +112,7 @@ let menu = $state<{
 				</button>
 				{#if settings.controlLoop || player.loop}
 					<button
+						type="button"
 						id="playback-loop"
 						class="pressable"
 						tabindex="-1"
@@ -120,6 +126,7 @@ let menu = $state<{
 				{/if}
 				{#if settings.controlMiniplayer || ui.miniplayer}
 					<button
+						type="button"
 						id="playback-miniplayer"
 						class="pressable"
 						tabindex="-1"
@@ -181,6 +188,7 @@ let menu = $state<{
 		<div id="actions">
 			<div class="actions-section">
 				<button
+					type="button"
 					tabindex="-1"
 					class="library-toggle pressable"
 					class:off={!ui.showLibraryMobile}
@@ -204,6 +212,7 @@ let menu = $state<{
 			</div>
 			<div class="actions-section">
 				<button
+					type="button"
 					class="pressable pressable--gentle"
 					onclick={(event) => {
 						menu = {
@@ -220,6 +229,7 @@ let menu = $state<{
 					<span>{t("common.sort")}</span>
 				</button>
 				<button
+					type="button"
 					class="pressable pressable--gentle"
 					onclick={clear}
 					disabled={!queue.tracks.length}
@@ -230,6 +240,7 @@ let menu = $state<{
 					<span>{t("common.clear")}</span>
 				</button>
 				<button
+					type="button"
 					class="pressable pressable--gentle"
 					onclick={() => (ui.showSettings = true)}
 					title={t("common.settings")}
@@ -451,7 +462,10 @@ button {
 		color: var(--accent-red);
 	}
 }
-.rating-stars {
+fieldset {
 	display: flex;
+	margin: 0;
+	padding: 0;
+	border: 0;
 }
 </style>
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index 37d13db..e503bb1 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -771,6 +771,7 @@ function onKey(event: KeyboardEvent) {
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- biome-ignore-start lint/a11y/noNoninteractiveTabindex: Library keyboard navigation -->
 <nav
 	bind:this={libraryElement}
 	id="library"
@@ -904,6 +905,7 @@ function onKey(event: KeyboardEvent) {
 		{/snippet}
 	</Virtualizer>
 </nav>
+<!-- biome-ignore-end lint/a11y/noNoninteractiveTabindex: Library keyboard navigation -->
 
 {#if menu}
 	<ContextMenu
diff --git a/src/lib/LibraryLabel.svelte b/src/lib/LibraryLabel.svelte
index 81aca27..70500bc 100644
--- a/src/lib/LibraryLabel.svelte
+++ b/src/lib/LibraryLabel.svelte
@@ -24,7 +24,7 @@ let {
 		type="button"
 		tabindex="-1"
 		class="pressable pressable--gentle"
-		class:focused
+		class:focused={focused}
 		data-id={id}
 		aria-expanded={expanded}
 		onclick={(event) => {
diff --git a/src/lib/LibraryTreeItem.svelte b/src/lib/LibraryTreeItem.svelte
index 82739fe..0ae4896 100644
--- a/src/lib/LibraryTreeItem.svelte
+++ b/src/lib/LibraryTreeItem.svelte
@@ -422,7 +422,10 @@ function onDragStart(event: DragEvent) {
 			tabindex="-1"
 			class="action pressable"
 			disabled={busy}
-			onclick={(e) => (e.stopPropagation(), doUpdate())}
+			onclick={(e) => {
+				e.stopPropagation();
+				doUpdate();
+			}}
 			title={isRadio ? t("common.update") : t("action.update_playlist")}
 		>
 			<Icon name="save" />
@@ -434,7 +437,10 @@ function onDragStart(event: DragEvent) {
 			tabindex="-1"
 			class="action pressable"
 			disabled={busy}
-			onclick={(e) => (e.stopPropagation(), doDelete())}
+			onclick={(e) => {
+				e.stopPropagation();
+				doDelete();
+			}}
 			title={isShare
 				? t("action.delete_share")
 				: isRadio
@@ -450,7 +456,10 @@ function onDragStart(event: DragEvent) {
 			tabindex="-1"
 			class="action pressable"
 			disabled={busy}
-			onclick={(e) => (e.stopPropagation(), doCopyShareLink())}
+			onclick={(e) => {
+				e.stopPropagation();
+				doCopyShareLink();
+			}}
 			title={t("action.copy_link")}
 		>
 			<Icon name="link" />
@@ -462,7 +471,10 @@ function onDragStart(event: DragEvent) {
 			tabindex="-1"
 			class="action pressable"
 			disabled={busy}
-			onclick={(e) => (e.stopPropagation(), onPrimaryAction())}
+			onclick={(e) => {
+				e.stopPropagation();
+				onPrimaryAction();
+			}}
 			title={type === "new-playlist"
 				? t("action.new_playlist")
 				: t("action.new_station")}
@@ -476,7 +488,10 @@ function onDragStart(event: DragEvent) {
 			tabindex="-1"
 			class="action pressable"
 			disabled={busy}
-			onclick={(e) => (e.stopPropagation(), onAdd?.(false))}
+			onclick={(e) => {
+				e.stopPropagation();
+				onAdd?.(false);
+			}}
 			title={t("action.add_to_queue")}
 		>
 			<Icon name="add" />
diff --git a/src/lib/NowPlaying.svelte b/src/lib/NowPlaying.svelte
index b93ebd2..7679058 100644
--- a/src/lib/NowPlaying.svelte
+++ b/src/lib/NowPlaying.svelte
@@ -260,12 +260,12 @@ $effect(() => {
 											role="presentation"
 											class="lyrics"
 											class:synced={lyrics.synced.length > 0}
-											onpointerenter={(event) =>
-												event.pointerType === "mouse" &&
-												(lyricsHovered = true)}
-											onpointerleave={(event) =>
-												event.pointerType === "mouse" &&
-												(lyricsHovered = false)}
+											onpointerenter={(event) => {
+												if (event.pointerType === "mouse") lyricsHovered = true;
+											}}
+											onpointerleave={(event) => {
+												if (event.pointerType === "mouse") lyricsHovered = false;
+											}}
 										>
 											{#if lyrics.synced.length}
 												{#each lyrics.synced as line, index}
@@ -312,6 +312,11 @@ $effect(() => {
 {/if}
 
 <style>
+:global(.rounded-corners) .track-artwork {
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+}
+
 #now-playing {
 	border-block-start: var(--border-subtle);
 	padding: 1rem;
@@ -323,106 +328,6 @@ $effect(() => {
 	position: relative;
 	overflow: clip;
 
-	:global(html:not(.miniplayer)) & {
-		@media (width <= 32rem) {
-			text-align: start;
-			padding-block: 0.5rem;
-
-			.track-content {
-				flex-direction: row;
-			}
-
-			.track-artwork {
-				inline-size: 64px;
-				flex-shrink: 0;
-			}
-			.track-info {
-				--button-transform-origin: left center;
-			}
-			:global(:dir(rtl)) & {
-				.track-info {
-					--button-transform-origin: right center;
-				}
-			}
-		}
-
-		@media (width <= 16rem) {
-			.track-artwork {
-				inline-size: 48px;
-			}
-		}
-
-		@media (height <= 24rem) {
-			.track-artwork {
-				display: none;
-			}
-		}
-	}
-
-	:global(html.miniplayer) & {
-		border-block-start: none;
-		min-inline-size: 0;
-
-		.track-stage {
-			flex: 1;
-			min-block-size: 0;
-		}
-
-		.track-content {
-			block-size: 100%;
-		}
-
-		.track-media {
-			display: grid;
-			place-items: center;
-			block-size: 100%;
-			inline-size: 100%;
-			container-type: size;
-		}
-
-		.track-artwork {
-			block-size: min(100cqi, 100cqb);
-			inline-size: min(100cqi, 100cqb);
-		}
-
-		@media (height <= 12rem) {
-			align-items: center;
-			justify-content: flex-start;
-			text-align: start;
-
-			.track-content {
-				flex-direction: row;
-				align-items: center;
-				justify-content: flex-start;
-			}
-
-			.track-media {
-				align-self: stretch;
-				inline-size: auto;
-				aspect-ratio: 1;
-				flex: 0 0 auto;
-			}
-
-			.track-artwork {
-				block-size: 100%;
-				inline-size: auto;
-				aspect-ratio: 1;
-			}
-
-			.track-info {
-				flex: 1;
-				inline-size: 0;
-				min-inline-size: 0;
-				--button-transform-origin: left center;
-			}
-			:global(:dir(rtl)) & {
-				.track-info {
-					--button-transform-origin: right center;
-				}
-			}
-		}
-	}
-
 	.track-stage {
 		position: relative;
 		display: grid;
@@ -467,7 +372,7 @@ $effect(() => {
 			font-style: italic;
 			font-size: 0.9rem;
 
-			.track-artwork:not(:hover) & {
+			:where(.track-artwork:not(:hover)) & {
 				scrollbar-width: none;
 
 				&::-webkit-scrollbar {
@@ -531,11 +436,106 @@ $effect(() => {
 			overflow: clip;
 		}
 	}
-}
 
-:global(.rounded-corners) .track-artwork {
-	border-radius: var(--radius-md);
-	corner-shape: squircle;
+	:global(html:not(.miniplayer)) & {
+		@media (width <= 32rem) {
+			text-align: start;
+			padding-block: 0.5rem;
+
+			.track-content {
+				flex-direction: row;
+			}
+
+			.track-artwork {
+				inline-size: 64px;
+				flex-shrink: 0;
+			}
+			.track-info {
+				--button-transform-origin: left center;
+			}
+			:global(:dir(rtl)) & {
+				.track-info {
+					--button-transform-origin: right center;
+				}
+			}
+		}
+
+		@media (width <= 16rem) {
+			.track-artwork {
+				inline-size: 48px;
+			}
+		}
+
+		@media (height <= 24rem) {
+			.track-artwork {
+				display: none;
+			}
+		}
+	}
+
+	:global(html.miniplayer) & {
+		border-block-start: none;
+		min-inline-size: 0;
+
+		.track-stage {
+			flex: 1;
+			min-block-size: 0;
+		}
+
+		.track-content {
+			block-size: 100%;
+		}
+
+		.track-media {
+			display: grid;
+			place-items: center;
+			block-size: 100%;
+			inline-size: 100%;
+			container-type: size;
+		}
+
+		.track-artwork {
+			block-size: min(100cqi, 100cqb);
+			inline-size: min(100cqi, 100cqb);
+		}
+
+		@media (height <= 12rem) {
+			align-items: center;
+			justify-content: flex-start;
+			text-align: start;
+
+			.track-content {
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+			}
+
+			.track-media {
+				align-self: stretch;
+				inline-size: auto;
+				aspect-ratio: 1;
+				flex: 0 0 auto;
+			}
+
+			.track-artwork {
+				block-size: 100%;
+				inline-size: auto;
+				aspect-ratio: 1;
+			}
+
+			.track-info {
+				flex: 1;
+				inline-size: 0;
+				min-inline-size: 0;
+				--button-transform-origin: left center;
+			}
+			:global(:dir(rtl)) & {
+				.track-info {
+					--button-transform-origin: right center;
+				}
+			}
+		}
+	}
 }
 
 button {
diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index 540c633..0107673 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -622,6 +622,7 @@ function showMenu(index: number, x?: number, y?: number) {
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- biome-ignore-start lint/a11y/noNoninteractiveTabindex: Queue keyboard navigation -->
 <section
 	bind:this={queueElement}
 	id="queue"
@@ -767,6 +768,8 @@ function showMenu(index: number, x?: number, y?: number) {
 				{@const radio = isRadio(track)}
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- biome-ignore lint/a11y/noStaticElementInteractions: Custom draggable queue rows -->
+				<!-- biome-ignore lint/a11y/useKeyWithClickEvents: Custom queue row keyboard handling -->
 				<div
 					class="row"
 					data-id="queue-row-{index}"
@@ -947,6 +950,7 @@ function showMenu(index: number, x?: number, y?: number) {
 		</Virtualizer>
 	{/key}
 </section>
+<!-- biome-ignore-end lint/a11y/noNoninteractiveTabindex: Queue keyboard navigation -->
 
 {#if menu}
 	<ContextMenu
@@ -966,6 +970,13 @@ function showMenu(index: number, x?: number, y?: number) {
 	}
 }
 
+button {
+	background: none;
+	border: none;
+	padding: 0;
+	color: inherit;
+}
+
 .head,
 .row {
 	position: relative;
@@ -1059,13 +1070,6 @@ function showMenu(index: number, x?: number, y?: number) {
 		box-shadow: inset 0 -2px 0 var(--text);
 	}
 }
-button {
-	background: none;
-	border: none;
-	padding: 0;
-	color: inherit;
-}
-
 .btn-favorite,
 .btn-rating,
 .btn-touch,
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index fde5ce0..9ff220d 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -55,8 +55,9 @@ $effect(() => {
 		onpointermove={(e) => {
 			if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
 
-			const { left, right } =
-				e.currentTarget.parentElement!.getBoundingClientRect();
+			const parentElement = e.currentTarget.parentElement;
+			if (!parentElement) return;
+			const { left, right } = parentElement.getBoundingClientRect();
 			setSidebarWidth(
 				(document.documentElement.dir === "rtl"
 					? right - e.clientX
diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index 00a371c..875e203 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -307,6 +307,7 @@ function onKey(event: KeyboardEvent) {
 	isSub = false,
 )}
 	<button
+		type="button"
 		id={`${componentId}-${isSub ? "sub-" : ""}${index}`}
 		class:active={isSub ? subActive === index : active === index}
 		disabled={item.disabled}
@@ -336,10 +337,13 @@ function onKey(event: KeyboardEvent) {
 {/snippet}
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- biome-ignore lint/a11y/noStaticElementInteractions: Pointer backdrop dismissal -->
 <div
 	class="overlay"
 	role="presentation"
-	onclick={onclose}
+	onclick={(event) => {
+		if (event.target === event.currentTarget) onclose();
+	}}
 	oncontextmenu={(event) => {
 		event.preventDefault();
 		onclose();
@@ -349,7 +353,6 @@ function onKey(event: KeyboardEvent) {
 		bind:this={element}
 		class="menu"
 		class:ready={width > 0 && height > 0}
-		onclick={(event) => event.stopPropagation()}
 		onpointermove={(event) => hoverItem(event, false)}
 		onkeydown={onKey}
 		bind:clientWidth={width}
@@ -366,7 +369,7 @@ function onKey(event: KeyboardEvent) {
 	>
 		{#each items as item, index}
 			{#if item.type === "separator"}
-				<div class="separator" role="separator"></div>
+				<hr>
 			{:else}
 				{@render menuButton(item, index)}
 			{/if}
@@ -377,7 +380,6 @@ function onKey(event: KeyboardEvent) {
 			id={submenuId}
 			class="menu submenu"
 			class:ready={submenuWidth > 0 && submenuHeight > 0}
-			onclick={(event) => event.stopPropagation()}
 			onpointermove={(event) => hoverItem(event, true)}
 			bind:this={submenuElement}
 			bind:clientWidth={submenuWidth}
@@ -388,7 +390,7 @@ function onKey(event: KeyboardEvent) {
 		>
 			{#each activeItem.items as sub, subIndex}
 				{#if sub.type === "separator"}
-					<div class="separator" role="separator"></div>
+					<hr>
 				{:else}
 					{@render menuButton(sub, subIndex, true)}
 				{/if}
@@ -471,7 +473,9 @@ button {
 		opacity: 0.5;
 	}
 }
-.separator {
+hr {
+	margin: 0;
+	border: 0;
 	border-block-start: var(--border-subtle);
 }
 .arrow {
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index d78ede0..2d7c300 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -37,7 +37,7 @@ const percentage = $derived(
 	class:simple={variant === "simple"}
 	class:triangle={variant === "triangle"}
 	class:disabled
-	class:loading
+	class:loading={loading}
 	style:--percentage={`${percentage}%`}
 >
 	{#if variant !== "native"}
diff --git a/src/lib/dialogs/InfoModal.svelte b/src/lib/dialogs/InfoModal.svelte
index e11fe3e..c7e8922 100644
--- a/src/lib/dialogs/InfoModal.svelte
+++ b/src/lib/dialogs/InfoModal.svelte
@@ -447,7 +447,7 @@ $effect(() => {
 		>
 			♥
 		</button>
-		<div role="group" aria-label={t("common.rating")}>
+		<fieldset aria-label={t("common.rating")}>
 			{#each [1, 2, 3, 4, 5] as rating}
 				<button
 					type="button"
@@ -464,7 +464,7 @@ $effect(() => {
 					★
 				</button>
 			{/each}
-		</div>
+		</fieldset>
 	</div>
 {/snippet}
 
@@ -875,13 +875,6 @@ section {
 	min-block-size: 0;
 	min-inline-size: 0;
 }
-.info-layout > div {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: 1rem;
-	min-inline-size: 0;
-}
 @container (width > 40rem) {
 	.info-layout:has(aside) {
 		position: relative;
@@ -996,8 +989,11 @@ article {
 				}
 			}
 
-			> [role="group"] {
+			> fieldset {
 				display: flex;
+				margin: 0;
+				padding: 0;
+				border: 0;
 			}
 		}
 
@@ -1009,6 +1005,13 @@ article {
 		}
 	}
 }
+.info-layout > div {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 1rem;
+	min-inline-size: 0;
+}
 article > header > img {
 	block-size: 48px;
 	inline-size: 48px;
diff --git a/src/lib/dialogs/Modal.svelte b/src/lib/dialogs/Modal.svelte
index 1df3331..e71330b 100644
--- a/src/lib/dialogs/Modal.svelte
+++ b/src/lib/dialogs/Modal.svelte
@@ -4,7 +4,7 @@ import Icon from "../icons/Icon.svelte";
 import { t } from "../languages/translate.svelte.js";
 
 let {
-	open = $bindable(false),
+	open: isOpen = $bindable(false),
 	title,
 	children,
 	modal = true,
@@ -25,33 +25,40 @@ let {
 let dialog: HTMLDialogElement;
 
 $effect(() => {
-	if (open && !dialog.open) {
+	if (isOpen && !dialog.open) {
 		modal ? dialog.showModal() : dialog.show();
-	} else if (!open && dialog.open) {
+	} else if (!isOpen && dialog.open) {
 		dialog.close();
 	}
 });
 </script>
 
+<!-- biome-ignore lint/a11y/useKeyWithClickEvents: Pointer backdrop dismissal with keyboard alternatives -->
 <dialog
 	bind:this={dialog}
 	class={className}
 	{style}
 	onclose={() => {
 		if (closable) {
-			open = false;
+			isOpen = false;
 			onclose?.();
-		} else if (open) {
+		} else if (isOpen) {
 			dialog.showModal();
 		}
 	}}
 	oncancel={(e) => !closable && e.preventDefault()}
-	onclick={(e) => closable && modal && e.target === dialog && (open = false)}
+	onclick={(e) => {
+		if (closable && modal && e.target === dialog) isOpen = false;
+	}}
 >
 	<header>
 		<span>{title}</span>
 		{#if closable}
-			<button onclick={() => (open = false)} title={t("common.close")}>
+			<button
+				type="button"
+				onclick={() => (isOpen = false)}
+				title={t("common.close")}
+			>
 				<Icon name="close" />
 			</button>
 		{/if}
diff --git a/src/lib/dialogs/PlaylistModals.svelte b/src/lib/dialogs/PlaylistModals.svelte
index 432420d..479ba7e 100644
--- a/src/lib/dialogs/PlaylistModals.svelte
+++ b/src/lib/dialogs/PlaylistModals.svelte
@@ -131,7 +131,11 @@ async function doDelete() {
 				>
 			</div>
 			<div class="actions">
-				<button onclick={doExport} disabled={!exportName.trim() || isExporting}>
+				<button
+					type="button"
+					onclick={doExport}
+					disabled={!exportName.trim() || isExporting}
+				>
 					{isExporting ? t("common.busy") : t("common.export")}
 				</button>
 			</div>
@@ -147,7 +151,11 @@ async function doDelete() {
 			<p>{t("message.update_confirm", { name: ui.playlistForm.name })}</p>
 			<p class="warn">{t("message.undo_warning")}</p>
 			<div class="actions">
-				<button onclick={doUpdate} disabled={isUpdating || countdown > 0}>
+				<button
+					type="button"
+					onclick={doUpdate}
+					disabled={isUpdating || countdown > 0}
+				>
 					{isUpdating
 						? t("common.busy")
 						: countdown > 0
@@ -174,7 +182,11 @@ async function doDelete() {
 				>
 			</div>
 			<div class="actions">
-				<button onclick={doRename} disabled={isRenaming || !canRename()}>
+				<button
+					type="button"
+					onclick={doRename}
+					disabled={isRenaming || !canRename()}
+				>
 					{isRenaming ? t("common.busy") : t("common.rename")}
 				</button>
 			</div>
@@ -194,7 +206,11 @@ async function doDelete() {
 			</p>
 			<p class="warn">{t("message.undo_warning")}</p>
 			<div class="actions">
-				<button onclick={doDelete} disabled={isDeleting || countdown > 0}>
+				<button
+					type="button"
+					onclick={doDelete}
+					disabled={isDeleting || countdown > 0}
+				>
 					{isDeleting
 						? t("common.busy")
 						: countdown > 0
diff --git a/src/lib/dialogs/RadioModals.svelte b/src/lib/dialogs/RadioModals.svelte
index 82b811e..9bb8322 100644
--- a/src/lib/dialogs/RadioModals.svelte
+++ b/src/lib/dialogs/RadioModals.svelte
@@ -95,6 +95,7 @@ async function doDelete() {
 			</div>
 			<div class="actions">
 				<button
+					type="button"
 					onclick={doSave}
 					disabled={isSaving ||
 						!ui.stationForm.name.trim() ||
@@ -123,7 +124,11 @@ async function doDelete() {
 			</p>
 			<p class="warn">{t("message.undo_warning")}</p>
 			<div class="actions">
-				<button onclick={doDelete} disabled={isDeleting || deleteCountdown > 0}>
+				<button
+					type="button"
+					onclick={doDelete}
+					disabled={isDeleting || deleteCountdown > 0}
+				>
 					{isDeleting
 						? t("common.busy")
 						: deleteCountdown > 0
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 86f6071..3b4a082 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -135,6 +135,7 @@ const columnSettings = [
 		<header>
 			{#each tabs as tab}
 				<button
+					type="button"
 					class="tab pressable pressable--gentle"
 					class:active={activeTab === tab}
 					onclick={() => (activeTab = tab)}
@@ -821,7 +822,7 @@ const columnSettings = [
 				tinysub 2.52.4
 			</a>
 		</span>
-		<button onclick={logout}>{t("common.logout")}</button>
+		<button type="button" onclick={logout}>{t("common.logout")}</button>
 	</footer>
 </Modal>
 
diff --git a/src/lib/dialogs/ShareModal.svelte b/src/lib/dialogs/ShareModal.svelte
index 9fb9fb0..fb9ead2 100644
--- a/src/lib/dialogs/ShareModal.svelte
+++ b/src/lib/dialogs/ShareModal.svelte
@@ -72,7 +72,7 @@ function copy() {
 		{#if shareUrl}
 			<div>
 				<input id="share-url" name="shareUrl" readonly value={shareUrl}>
-				<button onclick={copy}>
+				<button type="button" onclick={copy}>
 					{copied ? t("state.link_copied") : t("common.copy")}
 				</button>
 			</div>
diff --git a/src/lib/dialogs/UnsyncedChangesModal.svelte b/src/lib/dialogs/UnsyncedChangesModal.svelte
index fc2363f..0be2e23 100644
--- a/src/lib/dialogs/UnsyncedChangesModal.svelte
+++ b/src/lib/dialogs/UnsyncedChangesModal.svelte
@@ -170,12 +170,17 @@ async function handleDiscard() {
 			</div>
 		{/if}
 		<div class="actions">
-			<button onclick={handleDiscard} disabled={selectedIds.size === 0}>
+			<button
+				type="button"
+				onclick={handleDiscard}
+				disabled={selectedIds.size === 0}
+			>
 				{t("offline.discard_selected")}
 				({selectedIds.size})
 			</button>
 			{#if !offlineManager.isOfflineMode}
 				<button
+					type="button"
 					onclick={handleSync}
 					disabled={selectedIds.size === 0 || !offlineManager.online}
 				>
diff --git a/src/lib/dialogs/UpdateModal.svelte b/src/lib/dialogs/UpdateModal.svelte
index 78282ef..d39c54f 100644
--- a/src/lib/dialogs/UpdateModal.svelte
+++ b/src/lib/dialogs/UpdateModal.svelte
@@ -45,7 +45,7 @@ const updateServiceWorker = () => {
 		<section>
 			<p>{t("message.pwa_update_desc")}</p>
 			<div class="actions">
-				<button onclick={updateServiceWorker}>
+				<button type="button" onclick={updateServiceWorker}>
 					{t("common.update")}
 				</button>
 			</div>
-- 
2.51.2