From e958322d43df601ff53646ea8c4e4d86cdc3d70d Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Wed, 15 Jul 2026 02:32:07 -0400
Subject: [PATCH] feat: rewrite queue

- auto resizing columns to fit necessary space
- improve consistency with gaps (1rem now to match padding-inline of
  row)
- title column setting for consistency
- many other improvements
---
 src/lib/Queue.svelte                 | 548 +++++++++++++++++----------
 src/lib/dialogs/SettingsModal.svelte |   3 +-
 src/lib/settings.svelte.ts           |   1 +
 3 files changed, 350 insertions(+), 202 deletions(-)

diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index a86a700..5a6a43c 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -34,18 +34,174 @@ import {
 	songArtId,
 } from "./client.svelte.js";
 import ContextMenu, { type Item } from "./components/ContextMenu.svelte";
-
-type DragWindow = Window & { _tinysub_drag?: () => Promise<Song | Song[]> };
-
 import VirtualList from "./components/VirtualList.svelte";
 import { offlineManager } from "./offline/offlineManager.svelte.js";
 import { settings } from "./settings.svelte.js";
 
+type DragWindow = Window & { _tinysub_drag?: () => Promise<Song | Song[]> };
+type QueueTrack = (typeof queue.tracks)[number];
+type QueueColumn = {
+	enabled: boolean;
+	header: string;
+	numeric?: boolean;
+	value: (track: QueueTrack, index: number) => string | number;
+};
+
 let menu = $state<{ x: number; y: number; index: number } | null>(null),
 	drag = $state<{ index: number; isAfter: boolean } | null>(null),
 	scrollToIndex = $state<(index: number) => void>(),
 	groupPhase = $state<null | "from" | "to">(null),
-	groupFrom = $state(-1);
+	groupFrom = $state(-1),
+	queueElement = $state<HTMLDivElement>(),
+	queueFont = $state("");
+
+const measureCache = new Map<string, number>();
+const ratings = [1, 2, 3, 4, 5] as const;
+const favoriteSymbol = "♥";
+const ratingSymbol = "★";
+const ratingHeader = ratingSymbol.repeat(ratings.length);
+const downloadSymbols = {
+	idle: "⤓",
+	downloaded: "✓",
+	progress: "↻",
+} as const;
+let measureContext: CanvasRenderingContext2D | null = null;
+
+function updateQueueFont() {
+	if (!queueElement) return;
+	const style = getComputedStyle(queueElement);
+	const font = style.font || `${style.fontSize} ${style.fontFamily}`;
+	if (font !== queueFont) {
+		queueFont = font;
+		measureCache.clear();
+	}
+}
+
+$effect(() => {
+	settings.fontSize;
+	if (!queueElement) return;
+	untrack(updateQueueFont);
+	const frame = requestAnimationFrame(updateQueueFont);
+	return () => cancelAnimationFrame(frame);
+});
+
+function measureText(value: string | number) {
+	const text = String(value ?? "");
+	const cached = measureCache.get(text);
+	if (cached !== undefined) return cached;
+
+	if (!measureContext) {
+		measureContext = document.createElement("canvas").getContext("2d");
+	}
+	if (!measureContext) return 0;
+	measureContext.font = queueFont;
+	const width = Math.ceil(measureContext.measureText(text).width) + 1;
+	measureCache.set(text, width);
+	return width;
+}
+
+let queueColumns = $derived.by((): QueueColumn[] => [
+	{
+		enabled: settings.enableTitle,
+		header: t("common.title"),
+		value: (track) => track.title,
+	},
+	{
+		enabled: settings.enableArtist,
+		header: t("common.artist"),
+		value: (track) => track.artist,
+	},
+	{
+		enabled: settings.enableAlbum,
+		header: t("common.album"),
+		value: (track) => track.album,
+	},
+	{
+		enabled: settings.enableGenre,
+		header: t("common.genre"),
+		value: (track) =>
+			track.genres?.map((genre) => genre.name).join(", ") || track.genre || "",
+	},
+	{
+		enabled: settings.enableTime,
+		header: t("common.time"),
+		numeric: true,
+		value: (track) => (isRadio(track) ? "" : formatTime(track.duration)),
+	},
+	{
+		enabled: settings.enableYear,
+		header: t("common.year"),
+		numeric: true,
+		value: (track) => track.year || "",
+	},
+	{
+		enabled: settings.enableQuality,
+		header: t("common.quality"),
+		numeric: true,
+		value: (track) =>
+			`${track.suffix || ""}${track.suffix && track.bitRate ? " " : ""}${track.bitRate || ""}`,
+	},
+	{
+		enabled: settings.enablePlayCount,
+		header: t("common.play_count"),
+		numeric: true,
+		value: (track) => track.playCount ?? track.playcount ?? "",
+	},
+	{
+		enabled: settings.enableDisc,
+		header: t("common.disc_num"),
+		numeric: true,
+		value: (track) => track.discNumber || "",
+	},
+	{
+		enabled: settings.enableTrackNum,
+		header: t("common.track_num"),
+		numeric: true,
+		value: (track) => track.track || "",
+	},
+	{
+		enabled: settings.enableQueueNum,
+		header: t("common.queue_num"),
+		numeric: true,
+		value: (_, index) => index + 1,
+	},
+]);
+
+function columnWidth(header: string, value: QueueColumn["value"]) {
+	let width = measureText(header);
+	for (let index = 0; index < queue.tracks.length; index++) {
+		width = Math.max(width, measureText(value(queue.tracks[index], index)));
+	}
+	return width;
+}
+
+let textColumns = $derived(
+	queueColumns.filter((column) => column.enabled && !column.numeric),
+);
+let numericColumns = $derived(
+	queueColumns.filter((column) => column.enabled && column.numeric),
+);
+
+let columnTemplate = $derived.by(() => {
+	const template = settings.artSong > 0 ? [`${settings.artSong}px`] : [];
+
+	for (const column of textColumns) {
+		template.push(`minmax(0, ${columnWidth(column.header, column.value)}px)`);
+	}
+	template.push("minmax(0, 1fr)");
+	for (const column of numericColumns) {
+		template.push(`minmax(0, ${columnWidth(column.header, column.value)}px)`);
+	}
+	if (settings.enableFavorites)
+		template.push(`${measureText(favoriteSymbol)}px`);
+	if (settings.enableRatings) template.push(`${measureText(ratingHeader)}px`);
+	if (settings.downloads && settings.enableDownloads) {
+		template.push(
+			`${Math.max(...Object.values(downloadSymbols).map(measureText))}px`,
+		);
+	}
+	return template.join(" ");
+});
 
 $effect(() => {
 	if (!ui.selectionMode) {
@@ -79,53 +235,71 @@ function onDragStart(event: DragEvent, index: number) {
 function onDragOver(event: DragEvent, index: number) {
 	if (!event.dataTransfer) return;
 	event.preventDefault();
-	const isLibrary = event.dataTransfer.types.includes(
+	event.dataTransfer.dropEffect = event.dataTransfer.types.includes(
 		"application/tinysub-library",
-	);
-	event.dataTransfer.dropEffect = isLibrary ? "copy" : "move";
+	)
+		? "copy"
+		: "move";
 
 	const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();
-	drag = { index, isAfter: event.clientY > bounds.top + bounds.height / 2 };
+	const isAfter = event.clientY > bounds.top + bounds.height / 2;
+	if (drag?.index !== index || drag.isAfter !== isAfter)
+		drag = { index, isAfter };
 }
 
 async function onDrop(event: DragEvent) {
 	if (!drag || !event.dataTransfer) return;
+	event.preventDefault();
 	const targetIndex = drag.index + (drag.isAfter ? 1 : 0);
 
-	if (event.dataTransfer.types.includes("application/tinysub-library")) {
-		const resolver = (window as DragWindow)._tinysub_drag;
-		if (resolver) {
-			const songs = await resolver();
-			insertAt(targetIndex, songs);
+	try {
+		if (event.dataTransfer.types.includes("application/tinysub-library")) {
+			const resolver = (window as DragWindow)._tinysub_drag;
+			if (resolver) insertAt(targetIndex, await resolver());
+		} else {
+			moveSelected(targetIndex);
 		}
-	} else {
-		moveSelected(targetIndex);
+	} finally {
+		drag = null;
 	}
-	drag = null;
 }
 
 function onKey(event: KeyboardEvent) {
-	if ((event.target as HTMLElement).tagName === "INPUT") return;
+	if (
+		(event.target as HTMLElement).closest(
+			"input, button, select, textarea, [contenteditable]",
+		)
+	)
+		return;
 	const key = event.key,
 		isShiftPressed = event.shiftKey,
 		isAltPressed = event.altKey;
 	if (event.ctrlKey || event.metaKey) {
-		if (key === "a") {
+		const normalizedKey = key.toLowerCase();
+		if (normalizedKey === "a") {
 			event.preventDefault();
 			selectAll();
-		} else if (key === "c") {
+		} else if (normalizedKey === "c") {
 			event.preventDefault();
 			copy();
-		} else if (key === "x") {
+		} else if (normalizedKey === "x") {
 			event.preventDefault();
 			cut();
-		} else if (key === "v") {
+		} else if (normalizedKey === "v") {
 			event.preventDefault();
 			paste();
 		}
 		return;
 	}
 
+	if (key === "F10") {
+		if (isShiftPressed) {
+			event.preventDefault();
+			showMenu(nav.head);
+		}
+		return;
+	}
+
 	const moves: Record<string, () => void> = {
 		ArrowUp: () => (isAltPressed ? reorder(-1) : moveHead(-1, isShiftPressed)),
 		ArrowDown: () => (isAltPressed ? reorder(1) : moveHead(1, isShiftPressed)),
@@ -139,7 +313,6 @@ function onKey(event: KeyboardEvent) {
 		Escape: clearSel,
 		ContextMenu: () => showMenu(nav.head),
 		"`": () => showMenu(nav.head),
-		F10: () => event.shiftKey && showMenu(nav.head),
 	};
 
 	if (moves[key]) {
@@ -149,7 +322,19 @@ function onKey(event: KeyboardEvent) {
 }
 
 function getQueueItems(index: number): Item[] {
-	const isRow = index >= 0;
+	if (index < 0) {
+		return [
+			{
+				label: t("common.paste"),
+				action: () => paste(),
+				disabled: !queue.clipboard.length,
+			},
+			{ type: "separator" },
+			{ label: t("common.sort"), items: getSortItems() },
+			{ label: t("common.clear"), action: clear },
+		];
+	}
+
 	const selectedTracks = queue.sel
 		.map((idx) => queue.tracks[idx])
 		.filter(
@@ -159,102 +344,91 @@ function getQueueItems(index: number): Item[] {
 	const shouldDownloadSelected = selectedTracks.some(
 		(s) => !offlineManager.downloadedSongIds.has(s.id),
 	);
-	return (
-		isRow
+	return [
+		{ label: t("common.play"), action: () => goto(index) },
+		{ label: t("action.play_next"), action: playNext },
+		{ type: "separator" },
+		{
+			label: t("common.copy"),
+			action: copy,
+			disabled: !queue.sel.length,
+		},
+		{
+			label: t("common.cut"),
+			action: cut,
+			disabled: !queue.sel.length,
+		},
+		{
+			label: t("common.paste"),
+			action: () => paste(index + 1),
+			disabled: !queue.clipboard.length,
+		},
+		...(settings.downloads && selectedTracks.length
 			? [
-					{ label: t("common.play"), action: () => goto(index) },
-					{ label: t("action.play_next"), action: playNext },
-					{ type: "separator" },
-					{
-						label: t("common.copy"),
-						action: copy,
-						disabled: !queue.sel.length,
-					},
 					{
-						label: t("common.cut"),
-						action: cut,
-						disabled: !queue.sel.length,
+						label: shouldDownloadSelected
+							? t("action.download")
+							: t("action.remove_download"),
+						action: () =>
+							shouldDownloadSelected
+								? offlineManager.downloadSongs(selectedTracks)
+								: offlineManager.removeSongs(selectedTracks.map((s) => s.id)),
 					},
+				]
+			: []),
+		{ label: t("common.sort"), items: getSortItems() },
+		{ label: t("action.move_up"), action: () => reorder(-1) },
+		{ label: t("action.move_down"), action: () => reorder(1) },
+		...(selectedTracks.length
+			? [
+					{ type: "separator" as const },
 					{
-						label: t("common.paste"),
-						action: () => paste(index + 1),
-						disabled: !queue.clipboard.length,
+						label: shouldFavoriteSelection
+							? t("common.favorite")
+							: t("common.unfavorite"),
+						action: () => starSelected(shouldFavoriteSelection),
 					},
-					...(settings.downloads && selectedTracks.length
-						? [
-								{
-									label: shouldDownloadSelected
-										? t("action.download")
-										: t("action.remove_download"),
-									action: () =>
-										shouldDownloadSelected
-											? offlineManager.downloadSongs(selectedTracks)
-											: offlineManager.removeSongs(
-													selectedTracks.map((s) => s.id),
-												),
-								},
-							]
-						: []),
-					{ label: t("common.sort"), items: getSortItems() },
-					{ label: t("action.move_up"), action: () => reorder(-1) },
-					{ label: t("action.move_down"), action: () => reorder(1) },
-					...(selectedTracks.length
-						? [
-								{ type: "separator" as const },
-								{
-									label: shouldFavoriteSelection
-										? t("common.favorite")
-										: t("common.unfavorite"),
-									action: () => starSelected(shouldFavoriteSelection),
-								},
-								{
-									label: t("common.rating"),
-									items: [
-										{ label: "★★★★★", action: () => rateSelected(5) },
-										{ label: "★★★★", action: () => rateSelected(4) },
-										{ label: "★★★", action: () => rateSelected(3) },
-										{ label: "★★", action: () => rateSelected(2) },
-										{ label: "★", action: () => rateSelected(1) },
-										{
-											label: t("common.none"),
-											action: () => rateSelected(0),
-										},
-									],
-								},
-							]
-						: []),
-					{ type: "separator" },
-					{ label: t("common.clear"), action: clear },
-				]
-			: [
 					{
-						label: t("common.paste"),
-						action: () => paste(),
-						disabled: !queue.clipboard.length,
+						label: t("common.rating"),
+						items: [
+							{ label: "★★★★★", action: () => rateSelected(5) },
+							{ label: "★★★★", action: () => rateSelected(4) },
+							{ label: "★★★", action: () => rateSelected(3) },
+							{ label: "★★", action: () => rateSelected(2) },
+							{ label: "★", action: () => rateSelected(1) },
+							{
+								label: t("common.none"),
+								action: () => rateSelected(0),
+							},
+						],
 					},
-					{ type: "separator" },
-					{ label: t("common.sort"), items: getSortItems() },
-					{ label: t("common.clear"), action: clear },
 				]
-	) as Item[];
+			: []),
+		{ type: "separator" },
+		{ label: t("common.clear"), action: clear },
+	];
 }
 
 function showMenu(index: number, x?: number, y?: number) {
 	if (index >= 0 && !queue.sel.includes(index)) select(index);
 	const row =
 		index >= 0
-			? document.querySelector(`[data-id="queue-row-${index}"]`)
+			? queueElement?.querySelector(`[data-id="queue-row-${index}"]`)
 			: null;
-	const mx = x ?? window.innerWidth / 2;
-	const my = y ?? row?.getBoundingClientRect().bottom ?? window.innerHeight / 2;
-	menu = { x: mx, y: my, index };
+	menu = {
+		x: x ?? window.innerWidth / 2,
+		y: y ?? row?.getBoundingClientRect().bottom ?? window.innerHeight / 2,
+		index,
+	};
 }
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
+	bind:this={queueElement}
 	id="queue"
+	style:--queue-columns={columnTemplate}
 	onclick={clearSel}
 	onkeydown={onKey}
 	onfocusin={() => (ui.activeContext = "queue")}
@@ -270,9 +444,14 @@ function showMenu(index: number, x?: number, y?: number) {
 	<div class="body">
 		<VirtualList items={queue.tracks} itemHeight={rowHeight} bind:scrollToIndex>
 			{#snippet header()}
-				<div class="head" style:block-size="{rowHeight}px">
+				<div
+					class="head"
+					class:selection={ui.selectionMode}
+					style:block-size="{rowHeight}px"
+				>
 					{#if ui.selectionMode}
 						<button
+							type="button"
 							tabindex="-1"
 							class="col btn-head"
 							onclick={(e) => {
@@ -286,6 +465,7 @@ function showMenu(index: number, x?: number, y?: number) {
 								: t("action.select_all")}
 						</button>
 						<button
+							type="button"
 							tabindex="-1"
 							class="col btn-head"
 							onclick={(e) => {
@@ -311,53 +491,32 @@ function showMenu(index: number, x?: number, y?: number) {
 								style:inline-size="{settings.artSong}px"
 							></div>
 						{/if}
-						<div class="col">{t("common.title")}</div>
-						{#if settings.enableArtist}
-							<div class="col col-artist">{t("common.artist")}</div>
-						{/if}
-						{#if settings.enableAlbum}
-							<div class="col col-album">{t("common.album")}</div>
-						{/if}
-						{#if settings.enableGenre}
-							<div class="col col-genre">{t("common.genre")}</div>
-						{/if}
-						{#if settings.enableTime}
-							<div class="col col-number">{t("common.time")}</div>
-						{/if}
-						{#if settings.enableYear}
-							<div class="col col-number">{t("common.year")}</div>
-						{/if}
-						{#if settings.enableQuality}
-							<div class="col col-number">{t("common.quality")}</div>
-						{/if}
-						{#if settings.enablePlayCount}<div class="col col-number">
-								{t("common.play_count")}
-							</div>{/if}
-						{#if settings.enableDisc}
-							<div class="col col-number">{t("common.disc_num")}</div>
-						{/if}
-						{#if settings.enableTrackNum}
-							<div class="col col-number">{t("common.track_num")}</div>
-						{/if}
-						{#if settings.enableQueueNum}
-							<div class="col col-number">{t("common.queue_num")}</div>
-						{/if}
+						{#each textColumns as column}
+							<div class="col">{column.header}</div>
+						{/each}
+						<div class="col-spacer"></div>
+						{#each numericColumns as column}
+							<div class="col col-number">{column.header}</div>
+						{/each}
 						{#if settings.enableFavorites}
-							<div class="col-favorite">♥</div>
+							<div class="col-favorite">{favoriteSymbol}</div>
 						{/if}
 						{#if settings.enableRatings}
-							<div class="col-rating">★★★★★</div>
+							<div class="col-rating">{ratingHeader}</div>
 						{/if}
 						{#if settings.downloads && settings.enableDownloads}
-							<div class="col-download">⤓</div>
+							<div class="col-download">{downloadSymbols.idle}</div>
 						{/if}
 					{/if}
 					<div class="col-touch">
 						<button
+							type="button"
 							tabindex="-1"
 							class="btn-touch"
-							onclick={() => (ui.selectionMode = !ui.selectionMode)}
-							style="opacity: 1"
+							onclick={(e) => {
+								e.stopPropagation();
+								ui.selectionMode = !ui.selectionMode;
+							}}
 						>
 							{ui.selectionMode ? "✓" : "☐"}
 						</button>
@@ -439,54 +598,19 @@ function showMenu(index: number, x?: number, y?: number) {
 							{/if}
 						</div>
 					{/if}
-					<div class="col">{track.title}</div>
-					{#if settings.enableArtist}
-						<div class="col col-artist">{track.artist}</div>
-					{/if}
-					{#if settings.enableAlbum}
-						<div class="col col-album">{track.album}</div>
-					{/if}
-					{#if settings.enableGenre}
-						<div class="col col-genre">
-							{track.genres
-								?.map((genre: { name: string }) => genre.name)
-								.join(", ") ||
-								track.genre ||
-								""}
-						</div>
-					{/if}
-					{#if settings.enableTime && !isRadio(track)}
-						<div class="col col-number">{formatTime(track.duration)}</div>
-					{:else if settings.enableTime}
-						<div class="col col-number"></div>
-					{/if}
-					{#if settings.enableYear}
-						<div class="col col-number">{track.year || ""}</div>
-					{/if}
-					{#if settings.enableQuality}
-						<div class="col col-number">
-							{track.suffix || ""}
-							{#if track.suffix && track.bitRate}{" "}{/if}
-							{track.bitRate || ""}
-						</div>
-					{/if}
-					{#if settings.enablePlayCount}
+					{#each textColumns as column}
+						<div class="col">{column.value(track, index)}</div>
+					{/each}
+					<div class="col-spacer"></div>
+					{#each numericColumns as column}
 						<div class="col col-number">
-							{track.playCount ?? track.playcount ?? ""}
+							{column.value(track, index)}
 						</div>
-					{/if}
-					{#if settings.enableDisc}
-						<div class="col col-number">{track.discNumber || ""}</div>
-					{/if}
-					{#if settings.enableTrackNum}
-						<div class="col col-number">{track.track || ""}</div>
-					{/if}
-					{#if settings.enableQueueNum}
-						<div class="col col-number">{index + 1}</div>
-					{/if}
+					{/each}
 					{#if settings.enableFavorites && !isRadio(track)}
 						<div class="col-favorite">
 							<button
+								type="button"
 								tabindex="-1"
 								class="btn-favorite"
 								class:active={track.starred}
@@ -495,7 +619,7 @@ function showMenu(index: number, x?: number, y?: number) {
 									toggleStar(track);
 								}}
 							>
-								♥
+								{favoriteSymbol}
 							</button>
 						</div>
 					{:else if settings.enableFavorites}
@@ -503,8 +627,9 @@ function showMenu(index: number, x?: number, y?: number) {
 					{/if}
 					{#if settings.enableRatings && !isRadio(track)}
 						<div class="col-rating">
-							{#each [1, 2, 3, 4, 5] as rating}
+							{#each ratings as rating}
 								<button
+									type="button"
 									tabindex="-1"
 									class="btn-rating"
 									class:active={(track.userRating ?? 0) >= rating}
@@ -513,7 +638,7 @@ function showMenu(index: number, x?: number, y?: number) {
 										setRating(track, track.userRating === rating ? 0 : rating);
 									}}
 								>
-									★
+									{ratingSymbol}
 								</button>
 							{/each}
 						</div>
@@ -543,13 +668,18 @@ function showMenu(index: number, x?: number, y?: number) {
 											: offlineManager.downloadSong(track);
 									}}
 								>
-									{isDownloaded ? "✓" : isProgress ? "↻" : "⤓"}
+									{isDownloaded
+										? downloadSymbols.downloaded
+										: isProgress
+											? downloadSymbols.progress
+											: downloadSymbols.idle}
 								</button>
 							{/if}
 						</div>
 					{/if}
 					<div class="col-touch">
 						<button
+							type="button"
 							tabindex="-1"
 							class="btn-touch"
 							onclick={(e) => {
@@ -580,7 +710,7 @@ function showMenu(index: number, x?: number, y?: number) {
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		container-type: inline-size;
+
 		:global(html:not(.dynamic)) & {
 			background: var(--bg);
 		}
@@ -595,10 +725,16 @@ function showMenu(index: number, x?: number, y?: number) {
 	}
 	.head,
 	.row {
-		display: flex;
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--queue-columns);
 		align-items: center;
 		padding-inline: 1rem;
-		gap: 0.5rem;
+		gap: 1rem;
+
+		@media (pointer: coarse) {
+			padding-inline-end: 3.5rem;
+		}
 	}
 	.head {
 		position: sticky;
@@ -606,11 +742,15 @@ function showMenu(index: number, x?: number, y?: number) {
 		z-index: 10;
 		background: var(--bg);
 		border-block-end: var(--border-subtle);
+
+		&.selection {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
 	}
 	.col {
-		flex: 1;
+		min-inline-size: 0;
 		white-space: nowrap;
-		overflow-x: hidden;
+		overflow: hidden;
 		text-overflow: ellipsis;
 		line-height: 1.5;
 	}
@@ -618,21 +758,15 @@ function showMenu(index: number, x?: number, y?: number) {
 		display: flex;
 		justify-content: center;
 	}
-	.col-number {
-		max-inline-size: 6rem;
+	.col-number,
+	.col-rating,
+	.col-favorite,
+	.col-download {
 		text-align: end;
 	}
 	.col-rating {
-		inline-size: 6rem;
-		text-align: end;
-	}
-	.col-favorite {
-		inline-size: 2rem;
-		text-align: end;
-	}
-	.col-download {
-		inline-size: 2rem;
-		text-align: end;
+		display: flex;
+		justify-content: flex-end;
 	}
 	.unavailable {
 		opacity: 0.5;
@@ -647,6 +781,8 @@ function showMenu(index: number, x?: number, y?: number) {
 	}
 	.col-touch {
 		display: none;
+		position: absolute;
+		inset-inline-end: 1rem;
 		inline-size: 2rem;
 
 		@media (pointer: coarse) {
@@ -654,9 +790,6 @@ function showMenu(index: number, x?: number, y?: number) {
 		}
 	}
 	.btn-head {
-		background: none;
-		border: none;
-		padding: 0;
 		text-align: start;
 		font-weight: bold;
 	}
@@ -678,6 +811,7 @@ function showMenu(index: number, x?: number, y?: number) {
 			box-shadow: inset 0 -2px 0 var(--text);
 		}
 	}
+	.btn-head,
 	.btn-favorite,
 	.btn-rating,
 	.btn-touch,
@@ -685,6 +819,11 @@ function showMenu(index: number, x?: number, y?: number) {
 		background: none;
 		border: none;
 		padding: 0;
+	}
+	.btn-favorite,
+	.btn-rating,
+	.btn-touch,
+	.btn-download {
 		opacity: 0.25;
 
 		&:hover {
@@ -695,6 +834,9 @@ function showMenu(index: number, x?: number, y?: number) {
 		inline-size: 100%;
 		text-align: end;
 	}
+	.head .btn-touch {
+		opacity: 1;
+	}
 	.btn-rating.active {
 		opacity: 1;
 		:global(html:not(.dynamic)) & {
@@ -716,6 +858,10 @@ function showMenu(index: number, x?: number, y?: number) {
 			opacity: 1;
 			animation: spin 1.5s linear infinite;
 			display: inline-block;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
 		}
 	}
 	:global(.rounded-corners) #queue .art,
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 74c6e6c..01a0eb0 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -81,11 +81,12 @@ const artSizes = [
 ] as const;
 
 const columnSettings = [
+	{ labelKey: "common.title", key: "enableTitle" },
 	{ labelKey: "common.artist", key: "enableArtist" },
 	{ labelKey: "common.album", key: "enableAlbum" },
 	{ labelKey: "common.genre", key: "enableGenre" },
-	{ labelKey: "common.time", key: "enableTime" },
 	{ labelKey: "common.year", key: "enableYear" },
+	{ labelKey: "common.time", key: "enableTime" },
 	{ labelKey: "common.quality", key: "enableQuality" },
 	{ labelKey: "common.play_count", key: "enablePlayCount" },
 	{ labelKey: "common.disc_num", key: "enableDisc" },
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
index 13dd63a..5949d6b 100644
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@@ -44,6 +44,7 @@ const settingDefs = {
 	enableQueueNum: { default: false },
 	enableRatings: { default: false },
 	enableTime: { default: true },
+	enableTitle: { default: true },
 	enableTrackNum: { default: false },
 	enableYear: { default: false },
 	fontSize: { default: 81.25 },
-- 
2.51.2