From c8f8af226f55025f2a02c6eef73f91c91f2db50e Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Thu, 23 Jul 2026 04:21:55 -0400
Subject: [PATCH] refactor: more improvements

- queue should handle sorting and reordering massive amount of tracks
  much more efficiently now. also scroll lag with large selections has
  been fixed
- made some sensible improvements to the context menu, such as submenu
  expansion delay, blurred background and some other improvements to its
  behavior
- removed bold text in synced lyrics as i noticed it can cause unwanted
  layout changes
- reverted being able to resize sidebar with keyboard, it can be done in
  settings
---
 src/lib/NowPlaying.svelte             |  15 +-
 src/lib/Queue.svelte                  |  29 +--
 src/lib/Sidebar.svelte                |  14 +-
 src/lib/components/ContextMenu.svelte | 276 ++++++++++++++++----------
 src/lib/components/ProgressBar.svelte |   4 +-
 src/lib/queue.svelte.ts               | 274 +++++++++++++++----------
 6 files changed, 374 insertions(+), 238 deletions(-)

diff --git a/src/lib/NowPlaying.svelte b/src/lib/NowPlaying.svelte
index 31bf071..0f85076 100644
--- a/src/lib/NowPlaying.svelte
+++ b/src/lib/NowPlaying.svelte
@@ -482,15 +482,20 @@ $effect(() => {
 				&.synced > :not(.current-line) {
 					opacity: 0.5;
 				}
-
-				.current-line {
-					font-weight: bold;
+				&.synced > .current-line {
+					opacity: 1;
 				}
 			}
 
 			.artwork-image.hidden {
-				opacity: 0.25;
-				filter: blur(16px);
+				opacity: 0.125;
+			}
+
+			@media (prefers-reduced-transparency: no-preference) {
+				.artwork-image.hidden {
+					opacity: 0.25;
+					filter: blur(16px);
+				}
 			}
 		}
 
diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index 9ea619e..75f8cba 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -29,6 +29,7 @@ import {
 	getSortItems,
 	goto,
 	insertAt,
+	isSelected,
 	moveHead,
 	moveSelected,
 	paste,
@@ -42,6 +43,7 @@ import {
 	selectAll,
 	setRating,
 	starSelected,
+	toggleSelectionRange,
 	toggleStar,
 } from "./queue.svelte.js";
 import { settings } from "./settings.svelte.js";
@@ -336,8 +338,8 @@ function animateMoves(moves: QueueMove[], selected = new Set<number>()) {
 }
 
 function moveWithAnimation(move: () => QueueMove[]) {
-	const selected = new Set(queue.sel);
-	animateMoves(move(), selected);
+	const selectedBeforeMove = new Set(queue.sel);
+	animateMoves(move(), selectedBeforeMove);
 }
 
 $effect(() => {
@@ -360,7 +362,7 @@ function reorderWithAnimation(direction: -1 | 1, steps = 1) {
 
 function onDragStart(event: DragEvent, index: number) {
 	if (!event.dataTransfer) return;
-	if (!queue.sel.includes(index)) select(index);
+	if (!isSelected(index)) select(index);
 	event.dataTransfer.effectAllowed = "move";
 }
 
@@ -490,6 +492,7 @@ function getQueueItems(index: number): Item[] {
 			{ label: t("action.select_all"), action: selectAll, disabled: empty },
 			{ type: "separator" },
 			{ label: t("common.sort"), items: getSortItems() },
+			{ type: "separator" },
 			{ label: t("common.clear"), action: clear },
 		];
 	}
@@ -535,7 +538,10 @@ function getQueueItems(index: number): Item[] {
 					},
 				]
 			: []),
-		{ label: t("common.sort"), items: getSortItems() },
+		{ type: "separator" },
+		...(queue.sel.length > 1
+			? [{ label: t("common.sort"), items: getSortItems() }]
+			: []),
 		{
 			label: t("action.move_up"),
 			action: () => reorderWithAnimation(-1),
@@ -591,7 +597,7 @@ function getQueueItems(index: number): Item[] {
 }
 
 function showMenu(index: number, x?: number, y?: number) {
-	if (index >= 0 && !queue.sel.includes(index)) select(index);
+	if (index >= 0 && !isSelected(index)) select(index);
 	const row =
 		index >= 0
 			? queueElement?.querySelector(`[data-id="queue-row-${index}"]`)
@@ -673,7 +679,7 @@ function showMenu(index: number, x?: number, y?: number) {
 					class="col btn-head pressable"
 					aria-label={t("action.move_up")}
 					title={t("action.move_up")}
-					disabled={queue.sel.includes(0)}
+					disabled={isSelected(0)}
 					onclick={(e) => {
 						e.stopPropagation();
 						reorderWithAnimation(-1);
@@ -687,7 +693,7 @@ function showMenu(index: number, x?: number, y?: number) {
 					class="col btn-head pressable"
 					aria-label={t("action.move_down")}
 					title={t("action.move_down")}
-					disabled={queue.sel.includes(queue.tracks.length - 1)}
+					disabled={isSelected(queue.tracks.length - 1)}
 					onclick={(e) => {
 						e.stopPropagation();
 						reorderWithAnimation(1);
@@ -755,7 +761,7 @@ function showMenu(index: number, x?: number, y?: number) {
 				data-id="queue-row-{index}"
 				data-queue-key={entry.key}
 				class:playing={queue.pos === index}
-				class:selected={queue.sel.includes(index)}
+				class:selected={isSelected(index)}
 				class:odd={index % 2 !== 0}
 				class:over-above={drag?.index === index && !drag.isAfter}
 				class:over-below={drag?.index === index && drag.isAfter}
@@ -771,12 +777,7 @@ function showMenu(index: number, x?: number, y?: number) {
 						groupFrom = index;
 						groupPhase = "to";
 					} else if (groupPhase === "to") {
-						for (
-							let i = Math.min(groupFrom, index);
-							i <= Math.max(groupFrom, index);
-							i++
-						)
-							select(i, true);
+						toggleSelectionRange(groupFrom, index);
 						groupPhase = null;
 						groupFrom = -1;
 					} else {
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index cdf68eb..2d55c6d 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -36,7 +36,7 @@ $effect(() => {
 	<div
 		class="resizer"
 		role="slider"
-		tabindex="0"
+		tabindex="-1"
 		aria-controls="sidebar"
 		aria-label={t("settings.sidebar_width")}
 		aria-orientation="horizontal"
@@ -65,18 +65,6 @@ $effect(() => {
 			);
 		}}
 		onlostpointercapture={() => (draggingSidebar = false)}
-		onkeydown={(e) => {
-			const direction = document.documentElement.dir === "rtl" ? -1 : 1;
-			let width = Math.round(settings.sidebarWidth);
-			if (e.key === "ArrowLeft") width -= direction;
-			else if (e.key === "ArrowRight") width += direction;
-			else if (e.key === "Home") width = minSidebarWidth;
-			else if (e.key === "End") width = maxSidebarWidth;
-			else return;
-
-			e.preventDefault();
-			setSidebarWidth(width);
-		}}
 	></div>
 </div>
 
diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index fbeff27..7f655cd 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { t } from "../languages/translate.svelte.js";
+
 export type SubItem = {
 	label?: string;
 	action?: () => void;
@@ -6,12 +8,8 @@ export type SubItem = {
 	type?: "separator";
 };
 
-export type Item = {
-	label?: string;
-	action?: () => void;
+export type Item = SubItem & {
 	items?: SubItem[];
-	disabled?: boolean;
-	type?: "separator";
 };
 
 let {
@@ -27,20 +25,27 @@ let {
 	keyboard?: boolean;
 	onclose: () => void;
 }>();
+const componentId = $props.id();
+const submenuId = `${componentId}-submenu`;
 
 let active = $state<number | null>(null),
 	subActive = $state<number | null>(null),
+	submenuOpen = $state(false),
 	width = $state(0),
 	height = $state(0),
 	submenuWidth = $state(0),
 	submenuHeight = $state(0),
 	element = $state<HTMLElement>(),
 	submenuElement = $state<HTMLElement>();
+let submenuTimer: number | undefined;
 
 $effect(() => {
 	const prevFocus = document.activeElement as HTMLElement | null;
 	element?.focus();
-	return () => prevFocus?.focus();
+	return () => {
+		clearTimeout(submenuTimer);
+		prevFocus?.focus();
+	};
 });
 
 const exec = (action?: () => void) => {
@@ -65,92 +70,154 @@ const activeRow = $derived.by(() =>
 		? undefined
 		: (element.children[active] as HTMLElement | undefined),
 );
+const activeItem = $derived(active === null ? undefined : items[active]);
 
-function scrollItemIntoView(container: HTMLElement, item: HTMLElement) {
-	const itemTop = item.offsetTop;
-	const itemBottom = itemTop + item.offsetHeight;
-	if (itemTop < container.scrollTop) container.scrollTop = itemTop;
-	else if (itemBottom > container.scrollTop + container.clientHeight)
-		container.scrollTop = itemBottom - container.clientHeight;
-}
+const nextSelectable = (
+	list: SubItem[],
+	current: number | null,
+	step: 1 | -1,
+) => {
+	let index = current ?? (step === 1 ? -1 : 0);
+	for (let offset = 0; offset < list.length; offset++) {
+		index = (index + step + list.length) % list.length;
+		if (list[index]?.type !== "separator" && !list[index]?.disabled)
+			return index;
+	}
+	return null;
+};
+
+const closeSubmenu = () => {
+	clearTimeout(submenuTimer);
+	submenuOpen = false;
+	subActive = null;
+};
+
+const openSubmenu = (subItems: SubItem[]) => {
+	clearTimeout(submenuTimer);
+	submenuOpen = true;
+	subActive = nextSelectable(subItems, null, 1);
+};
+
+const selectItem = (index: number | null) => {
+	if (active === index) return;
+	closeSubmenu();
+	active = index;
+	if (index !== null && items[index]?.items) {
+		submenuTimer = window.setTimeout(() => {
+			submenuOpen = active === index;
+		}, 150);
+	}
+};
+
+const hoverItem = (event: PointerEvent, isSub: boolean) => {
+	event.stopPropagation();
+	const button = (event.target as Element).closest<HTMLButtonElement>("button");
+	const index = button ? Number(button.dataset.index) : null;
+	if (index === null || button?.disabled) {
+		if (isSub) subActive = null;
+		else selectItem(null);
+		return;
+	}
+	if (isSub) {
+		subActive = index;
+		return;
+	}
+	selectItem(index);
+};
 
 $effect(() => {
-	const container = subActive === null ? element : submenuElement;
+	const container = submenuOpen ? submenuElement : element;
 	const item =
-		subActive === null
-			? activeRow
-			: (submenuElement?.children[subActive] as HTMLElement | undefined);
-	if (container && item) scrollItemIntoView(container, item);
+		submenuOpen && subActive !== null
+			? (submenuElement?.children[subActive] as HTMLElement | undefined)
+			: activeRow;
+	if (!container || !item) return;
+	const bottom = item.offsetTop + item.offsetHeight;
+	if (item.offsetTop < container.scrollTop)
+		container.scrollTop = item.offsetTop;
+	else if (bottom > container.scrollTop + container.clientHeight)
+		container.scrollTop = bottom - container.clientHeight;
 });
 
 const submenuLeft = $derived.by(() => {
-	if (active === null) return 0;
-	const flipX = left + width + (submenuWidth || 160) > window.innerWidth;
-	return flipX ? left - (submenuWidth || 160) : left + width;
+	if (!activeItem) return 0;
+	const subWidth = submenuWidth || 160;
+	return left + width + subWidth > window.innerWidth
+		? left - subWidth
+		: left + width;
 });
 const submenuTop = $derived.by(() => {
-	if (active === null || !activeRow) return 0;
-	const rowTop = top + activeRow.offsetTop;
-	const heightVal = submenuHeight || (items[active]?.items?.length || 0) * 32;
-	return clamp(rowTop, 0, window.innerHeight - heightVal);
+	if (!activeRow) return 0;
+	return clamp(
+		top + activeRow.offsetTop,
+		0,
+		window.innerHeight -
+			(submenuHeight || (activeItem?.items?.length || 0) * 32),
+	);
 });
 
 function onKey(event: KeyboardEvent) {
 	event.stopPropagation();
 	const key = event.key;
 	if (key === "Escape") {
-		onclose();
-	} else if (key === "ArrowDown") {
+		if (submenuOpen) closeSubmenu();
+		else onclose();
+	} else if (key === "ArrowDown" || key === "ArrowUp") {
 		event.preventDefault();
-		if (subActive !== null && active !== null && items[active].items) {
-			const subItems = items[active].items ?? [];
-			let next = (subActive + 1) % subItems.length;
-			while (subItems[next]?.type === "separator")
-				next = (next + 1) % subItems.length;
-			subActive = next;
+		const step = key === "ArrowDown" ? 1 : -1;
+		if (subActive !== null && activeItem?.items) {
+			subActive = nextSelectable(activeItem.items, subActive, step);
 		} else {
-			let next = active === null ? 0 : (active + 1) % items.length;
-			while (items[next]?.type === "separator")
-				next = (next + 1) % items.length;
-			active = next;
-			subActive = null;
+			selectItem(nextSelectable(items, active, step));
 		}
-	} else if (key === "ArrowUp") {
+	} else if (
+		key === "PageDown" ||
+		key === "PageUp" ||
+		key === "Home" ||
+		key === "End"
+	) {
 		event.preventDefault();
-		if (subActive !== null && active !== null && items[active].items) {
-			const subItems = items[active].items ?? [];
-			let next = (subActive - 1 + subItems.length) % subItems.length;
-			while (subItems[next]?.type === "separator")
-				next = (next - 1 + subItems.length) % subItems.length;
-			subActive = next;
+		const subItems = subActive !== null ? activeItem?.items : undefined;
+		const list = subItems ?? items;
+		const current = subItems ? subActive : active;
+		const step = key === "PageDown" || key === "End" ? 1 : -1;
+		const count = key === "Home" || key === "End" ? list.length : 10;
+		let next = current;
+		if (key === "Home" || key === "End") {
+			next = nextSelectable(list, null, step);
 		} else {
-			let next =
-				active === null
-					? items.length - 1
-					: (active - 1 + items.length) % items.length;
-			while (items[next]?.type === "separator")
-				next = (next - 1 + items.length) % items.length;
-			active = next;
-			subActive = null;
+			for (let offset = 0; offset < count; offset++) {
+				const candidate = nextSelectable(list, next, step);
+				if (
+					candidate === null ||
+					candidate === next ||
+					(next !== null &&
+						((step === 1 && candidate < next) ||
+							(step === -1 && candidate > next)))
+				)
+					break;
+				next = candidate;
+			}
 		}
+		if (subItems) subActive = next;
+		else selectItem(next);
 	} else if (key === "ArrowRight") {
-		if (active !== null && items[active].items) {
+		if (activeItem?.items) {
 			event.preventDefault();
-			subActive = 0;
+			openSubmenu(activeItem.items);
 		}
 	} else if (key === "ArrowLeft") {
-		if (subActive !== null) {
+		if (submenuOpen) {
 			event.preventDefault();
-			subActive = null;
+			closeSubmenu();
 		}
-	} else if (key === "Enter") {
+	} else if (key === "Enter" || key === " ") {
 		event.preventDefault();
-		if (active !== null) {
-			const item = items[active];
-			if (item.items) {
-				if (subActive === null) subActive = 0;
-				else exec(item.items[subActive].action);
-			} else exec(item.action);
+		if (activeItem?.items) {
+			if (subActive === null) openSubmenu(activeItem.items);
+			else exec(activeItem.items[subActive]?.action);
+		} else {
+			exec(activeItem?.action);
 		}
 	}
 }
@@ -159,46 +226,40 @@ function onKey(event: KeyboardEvent) {
 {#snippet menuButton(
 	item: Item,
 	index: number,
-	isActive: boolean,
-	isSub: boolean,
+	isSub = false,
 )}
 	<button
-		class:active={isActive}
+		id={`${componentId}-${isSub ? "sub-" : ""}${index}`}
+		class:active={isSub ? subActive === index : active === index}
 		disabled={item.disabled}
+		data-index={index}
+		role="menuitem"
+		aria-haspopup={item.items ? "menu" : undefined}
+		aria-expanded={item.items ? submenuOpen && active === index : undefined}
 		tabindex="-1"
-		onmouseenter={() => {
-			if (isSub) {
-				subActive = index;
-			} else {
-				active = index;
-				subActive = null;
-			}
-		}}
 		onclick={(event) => {
 			event.stopPropagation();
 			if (item.items) {
-				active = index;
-				subActive = subActive === null ? 0 : null;
+				if (active === index && submenuOpen) closeSubmenu();
+				else {
+					active = index;
+					openSubmenu(item.items);
+				}
 			} else {
 				exec(item.action);
 			}
 		}}
 	>
 		{item.label}
-		{#if item.items}<span class="arrow">→</span>{/if}
+		{#if item.items}<span class="arrow" aria-hidden="true">→</span>{/if}
 	</button>
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	class="overlay"
+	role="presentation"
 	onclick={onclose}
-	onmouseenter={() => {
-		active = null;
-		subActive = null;
-	}}
 	oncontextmenu={(event) => {
 		event.preventDefault();
 		onclose();
@@ -209,55 +270,60 @@ function onKey(event: KeyboardEvent) {
 		class="menu"
 		class:ready={width > 0 && height > 0}
 		style:--menu-y={`${top}px`}
-					style:--menu-x={`${left}px`}
+		style:--menu-x={`${left}px`}
 		style:--menu-width={`${width}px`}
 		style:--menu-height={`${height}px`}
 		style:--menu-origin-x={`${keyboard ? width / 2 : clamp(x - left, 0, width)}px`}
 		style:--menu-origin-y={`${keyboard ? (top < y ? height : 0) : clamp(y - top, 0, height)}px`}
 		onclick={(event) => event.stopPropagation()}
-		onmouseenter={(event) => event.stopPropagation()}
+		onpointermove={(event) => hoverItem(event, false)}
 		onkeydown={onKey}
 		bind:clientWidth={width}
 		bind:clientHeight={height}
+		role="menu"
+		aria-label={t("shortcut.context_menu")}
+		aria-owns={submenuOpen ? submenuId : undefined}
+		aria-activedescendant={submenuOpen && subActive !== null
+			? `${componentId}-sub-${subActive}`
+			: active === null
+				? undefined
+				: `${componentId}-${active}`}
 		tabindex="0"
 	>
 		{#each items as item, index}
 			{#if item.type === "separator"}
-				<div class="separator"></div>
+				<div class="separator" role="separator"></div>
 			{:else}
-				<div class="row">
-					{@render menuButton(
-						item,
-						index,
-						active === index && subActive === null,
-						false,
-					)}
-				</div>
+				{@render menuButton(item, index)}
 			{/if}
 		{/each}
 	</div>
-	{#if active !== null && items[active]?.items}
+	{#if submenuOpen && activeItem?.items}
 		<div
+			id={submenuId}
 			class="menu submenu"
 			class:ready={submenuWidth > 0 && submenuHeight > 0}
 			style:--menu-y={`${submenuTop}px`}
-						style:--menu-x={`${submenuLeft}px`}
+			style:--menu-x={`${submenuLeft}px`}
 			style:--menu-width={`${submenuWidth}px`}
 			style:--menu-height={`${submenuHeight}px`}
 			style:--menu-origin-x={`${submenuLeft < left ? submenuWidth : 0}px`}
 			style:--menu-origin-y={`${activeRow ? clamp(top + activeRow.offsetTop + activeRow.offsetHeight / 2 - submenuTop, 0, submenuHeight) : 0}px`}
 			style:--menu-enter-x={submenuLeft < left ? "0.1875rem" : "-0.1875rem"}
 			onclick={(event) => event.stopPropagation()}
-			onmouseenter={(event) => event.stopPropagation()}
+			onpointermove={(event) => hoverItem(event, true)}
 			bind:this={submenuElement}
 			bind:clientWidth={submenuWidth}
 			bind:clientHeight={submenuHeight}
+			role="menu"
+			aria-label={activeItem.label}
+			tabindex="-1"
 		>
-			{#each items[active].items as sub, subIndex}
+			{#each activeItem.items as sub, subIndex}
 				{#if sub.type === "separator"}
-					<div class="separator"></div>
+					<div class="separator" role="separator"></div>
 				{:else}
-					{@render menuButton(sub, subIndex, subActive === subIndex, true)}
+					{@render menuButton(sub, subIndex, true)}
 				{/if}
 			{/each}
 		</div>
@@ -317,6 +383,12 @@ function onKey(event: KeyboardEvent) {
 			animation-name: pop-from-side;
 		}
 	}
+	@media (prefers-reduced-transparency: no-preference) {
+		.menu {
+			background: color-mix(Canvas 80%, transparent);
+			backdrop-filter: blur(16px);
+		}
+	}
 	@keyframes pop-from-side {
 		from {
 			opacity: 0;
@@ -337,7 +409,7 @@ function onKey(event: KeyboardEvent) {
 		gap: 1rem;
 		color: inherit;
 
-		&:hover,
+		&:not(:disabled):hover,
 		&.active {
 			background: var(--bg-highlight);
 			color: var(--text-highlight);
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index 9d60a5c..92aefab 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -103,7 +103,7 @@ const percentage = $derived(
 			background: linear-gradient(
 				90deg,
 				transparent 35%,
-				color-mix(in srgb, currentColor 50%, transparent) 65%,
+				color-mix(currentColor 50%, transparent) 65%,
 				transparent 65%
 			);
 			animation: loading 1s ease-in-out 1s infinite backwards;
@@ -115,7 +115,7 @@ const percentage = $derived(
 		overflow: hidden;
 		inline-size: 100%;
 		block-size: 0.25rem;
-		background: color-mix(in srgb, currentColor 25%, transparent);
+		background: color-mix(currentColor 25%, transparent);
 	}
 	.simple .track {
 		border-radius: var(--radius-sm);
diff --git a/src/lib/queue.svelte.ts b/src/lib/queue.svelte.ts
index 76ae3c9..a8a25f8 100644
--- a/src/lib/queue.svelte.ts
+++ b/src/lib/queue.svelte.ts
@@ -33,10 +33,17 @@ export const queue = $state({
 	entryRequest: null as number[] | null,
 });
 
-const getMoves = (indices: number[], keys: number[]) =>
-	indices.flatMap((from, to) =>
-		from === to ? [] : [{ key: keys[to], from, to }],
-	);
+const selectedIndices = $derived(new Set(queue.sel));
+export const isSelected = (index: number) => selectedIndices.has(index);
+
+const getMoves = (indices: number[], keys: number[]) => {
+	const moves: QueueMove[] = [];
+	for (let to = 0; to < indices.length; to++) {
+		const from = indices[to];
+		if (from !== to) moves.push({ key: keys[to], from, to });
+	}
+	return moves;
+};
 
 const requestMoves = (moves: QueueMove[]) => {
 	if (moves.length)
@@ -175,7 +182,7 @@ export const select = (index: number, multi = false, range = false) => {
 		);
 		queue.sel = multi ? [...new Set([...queue.sel, ...ids])] : ids;
 	} else if (multi) {
-		queue.sel = queue.sel.includes(index)
+		queue.sel = selectedIndices.has(index)
 			? queue.sel.filter((i) => i !== index)
 			: [...queue.sel, index];
 		nav.anchor = index;
@@ -186,6 +193,19 @@ export const select = (index: number, multi = false, range = false) => {
 	nav.head = index;
 };
 
+export const toggleSelectionRange = (from: number, to: number) => {
+	const start = Math.max(0, Math.min(from, to));
+	const end = Math.min(queue.tracks.length - 1, Math.max(from, to));
+	if (start > end) return;
+	const selection = new Set(queue.sel);
+	for (let index = start; index <= end; index++) {
+		if (selection.has(index)) selection.delete(index);
+		else selection.add(index);
+	}
+	queue.sel = [...selection];
+	nav.anchor = nav.head = end;
+};
+
 export const moveHead = (direction: number, expand = false) => {
 	if (nav.anchor === -1) return queue.tracks.length > 0 && select(0);
 	const nextIdx = nav.head + direction;
@@ -194,33 +214,57 @@ export const moveHead = (direction: number, expand = false) => {
 };
 
 export const reorder = (direction: -1 | 1, steps = 1): QueueMove[] => {
-	if (!queue.sel.length) return [];
-	const positions = queue.tracks.map((_, index) => index);
-	for (let step = 0; step < steps; step++) {
-		const indices = [...queue.sel].sort((a, b) => a - b);
-		if (
-			(direction === -1 && indices[0] === 0) ||
-			(direction === 1 &&
-				indices[indices.length - 1] === queue.tracks.length - 1)
-		)
-			break;
-		const move = direction === -1 ? indices : indices.reverse();
-		for (const index of move) {
-			const to = index + direction;
-			[queue.tracks[index], queue.tracks[to]] = [
-				queue.tracks[to],
-				queue.tracks[index],
-			];
-			[queue.keys[index], queue.keys[to]] = [queue.keys[to], queue.keys[index]];
-			[positions[index], positions[to]] = [positions[to], positions[index]];
-			queue.sel[queue.sel.indexOf(index)] = to;
-			if (queue.pos === index) queue.pos = to;
-			else if (queue.pos === to) queue.pos = index;
-			if (nav.anchor === index) nav.anchor = to;
-			if (nav.head === index) nav.head = to;
+	if (!queue.sel.length || steps <= 0) return [];
+	const selected = [...queue.sel].sort((a, b) => a - b);
+	const distance =
+		direction === -1
+			? selected[0]
+			: queue.tracks.length - 1 - selected[selected.length - 1];
+	const stepCount = Math.min(Math.ceil(steps), distance);
+	if (!stepCount) return [];
+	const shift = direction * stepCount;
+
+	const length = queue.tracks.length;
+	const positions = new Array<number>(length);
+	const oldToNew = new Array<number>(length);
+	const tracks = new Array<Song>(length);
+	const keys = new Array<number>(length);
+	let selectedCursor = 0;
+	let unselectedFrom = 0;
+	for (let to = 0; to < length; to++) {
+		const selectedFrom = selected[selectedCursor];
+		let from: number;
+		if (selectedFrom !== undefined && to === selectedFrom + shift) {
+			from = selectedFrom;
+			selectedCursor++;
+		} else {
+			while (selectedIndices.has(unselectedFrom)) unselectedFrom++;
+			from = unselectedFrom++;
 		}
+		positions[to] = from;
+		oldToNew[from] = to;
+		tracks[to] = queue.tracks[from];
+		keys[to] = queue.keys[from];
 	}
-	return getMoves(positions, queue.keys);
+
+	const moveNavigationIndex = (index: number) => {
+		for (let step = 0; step < stepCount; step++) {
+			if (selectedIndices.has(index - direction * step)) index += direction;
+		}
+		return index;
+	};
+	const selection = queue.sel.map((index) => oldToNew[index]);
+	const pos = queue.pos === -1 ? -1 : oldToNew[queue.pos];
+	const anchor = nav.anchor === -1 ? -1 : moveNavigationIndex(nav.anchor);
+	const head = nav.head === -1 ? -1 : moveNavigationIndex(nav.head);
+
+	queue.tracks = tracks;
+	queue.keys = keys;
+	queue.sel = selection;
+	queue.pos = pos;
+	nav.anchor = anchor;
+	nav.head = head;
+	return getMoves(positions, keys);
 };
 
 export const clearSel = () => {
@@ -231,16 +275,15 @@ export const clearSel = () => {
 export const remove = () => {
 	if (!queue.sel.length) return;
 
-	const playing = queue.sel.includes(queue.pos),
+	const playing = selectedIndices.has(queue.pos),
 		oldPos = queue.pos,
 		removedBefore = queue.sel.filter((index) => index < oldPos).length;
 
-	const selSet = new Set(queue.sel);
 	const positions = queue.tracks
 		.map((_, index) => index)
-		.filter((index) => !selSet.has(index));
-	queue.tracks = queue.tracks.filter((_, index) => !selSet.has(index));
-	queue.keys = queue.keys.filter((_, index) => !selSet.has(index));
+		.filter((index) => !selectedIndices.has(index));
+	queue.tracks = queue.tracks.filter((_, index) => !selectedIndices.has(index));
+	queue.keys = queue.keys.filter((_, index) => !selectedIndices.has(index));
 	requestMoves(getMoves(positions, queue.keys));
 
 	if (playing) {
@@ -320,13 +363,16 @@ export const setRating = async (song: Song, rating: number) => {
 export const moveSelected = (targetIndex: number): QueueMove[] => {
 	if (!queue.sel.length) return [];
 
-	const selSet = new Set(queue.sel);
 	const moved = queue.sel
 		.sort((a, b) => a - b)
 		.map((index) => queue.tracks[index]);
 	const movedKeys = queue.sel.map((index) => queue.keys[index]);
-	const remaining = queue.tracks.filter((_, index) => !selSet.has(index));
-	const remainingKeys = queue.keys.filter((_, index) => !selSet.has(index));
+	const remaining = queue.tracks.filter(
+		(_, index) => !selectedIndices.has(index),
+	);
+	const remainingKeys = queue.keys.filter(
+		(_, index) => !selectedIndices.has(index),
+	);
 
 	const actualTarget = Math.max(
 		0,
@@ -334,7 +380,7 @@ export const moveSelected = (targetIndex: number): QueueMove[] => {
 	);
 
 	const indices = Array.from({ length: queue.tracks.length }, (_, i) => i);
-	const remainingIndices = indices.filter((i) => !selSet.has(i));
+	const remainingIndices = indices.filter((i) => !selectedIndices.has(i));
 	remainingIndices.splice(actualTarget, 0, ...queue.sel);
 
 	remaining.splice(actualTarget, 0, ...moved);
@@ -354,82 +400,106 @@ export const playNext = () => {
 	requestMoves(moveSelected(queue.pos + 1));
 };
 
-const sortQueue = (field: string, asc = true) => {
-	const previousKeys = [...queue.keys];
+type SortField =
+	| "album"
+	| "albumArtist"
+	| "artist"
+	| "downloaded"
+	| "duration"
+	| "genre"
+	| "playCount"
+	| "rating"
+	| "stars"
+	| "title"
+	| "year";
+
+const sortCollator = new Intl.Collator(undefined, { numeric: true });
+
+const sortQueue = (field: SortField, asc = true) => {
 	const isAll = !queue.sel.length;
+	const playingIndex = queue.pos;
 	const indices = isAll
 		? queue.tracks.map((_, i) => i)
 		: [...queue.sel].sort((a, b) => a - b);
 
-	const targets = indices.map((index) => ({
-		track: queue.tracks[index],
-		key: queue.keys[index],
-		playing: index === queue.pos,
-	}));
-
-	const compare = (a: unknown, b: unknown) =>
-		(a ?? "").toString().localeCompare((b ?? "").toString(), undefined, {
-			numeric: true,
-		});
+	const targets = indices.map((from) => {
+		const track = queue.tracks[from];
+		const albumArtist = (songAlbumArtist(track) ?? "").toString();
+		const artist = (songArtist(track) ?? "").toString();
+		const album = (track.album ?? "").toString();
+		const title = (track.title ?? "").toString();
+		let value: string | number;
+		if (field === "albumArtist") value = albumArtist;
+		else if (field === "artist") value = artist;
+		else if (field === "genre")
+			value = (track.genres?.[0]?.name || track.genre || "").toString();
+		else if (field === "stars") value = track.starred ? 1 : 0;
+		else if (field === "rating") value = track.userRating || 0;
+		else if (field === "duration") value = track.duration || 0;
+		else if (field === "year") value = track.year || 0;
+		else if (field === "playCount") value = track.playCount || 0;
+		else if (field === "downloaded")
+			value = offlineManager.downloadedSongIds.has(track.id) ? 1 : 0;
+		else value = field === "album" ? album : title;
+		return {
+			track,
+			key: queue.keys[from],
+			from,
+			value,
+			albumArtist,
+			artist,
+			album,
+			discNumber: track.discNumber,
+			trackNumber: track.track || 0,
+			title,
+		};
+	});
 
-	const trackCompare = (a: Song, b: Song) =>
+	const compare = sortCollator.compare;
+	const compareTrackNumbers = (
+		a: (typeof targets)[number],
+		b: (typeof targets)[number],
+	) =>
 		a.discNumber !== b.discNumber
 			? (a.discNumber || 0) - (b.discNumber || 0)
-			: (a.track || 0) - (b.track || 0);
-
-	const primaryGenre = (song: Song) =>
-		song.genres?.[0]?.name || song.genre || "";
+			: a.trackNumber - b.trackNumber;
+	const compareTieBreakers = (
+		a: (typeof targets)[number],
+		b: (typeof targets)[number],
+	) =>
+		compare(a.albumArtist, b.albumArtist) ||
+		compare(a.artist, b.artist) ||
+		compare(a.album, b.album) ||
+		compareTrackNumbers(a, b) ||
+		compare(a.title, b.title);
 
 	targets.sort((a, b) => {
-		const track1 = a.track,
-			track2 = b.track;
-		let result = 0;
-		if (field === "albumArtist" || field === "artist") {
-			const artist = field === "albumArtist" ? songAlbumArtist : songArtist;
-			result =
-				compare(artist(track1), artist(track2)) ||
-				compare(track1.album, track2.album) ||
-				trackCompare(track1, track2);
-		} else if (field === "album") {
-			result =
-				compare(track1.album, track2.album) || trackCompare(track1, track2);
-		} else if (field === "genre") {
-			result =
-				compare(primaryGenre(track1), primaryGenre(track2)) ||
-				compare(songArtist(track1), songArtist(track2)) ||
-				compare(track1.album, track2.album) ||
-				trackCompare(track1, track2);
-		} else {
-			const getValue = (song: Song) => {
-				if (field === "stars") return song.starred ? 1 : 0;
-				if (field === "rating") return song.userRating || 0;
-				if (field === "duration") return song.duration || 0;
-				if (field === "year") return song.year || 0;
-				if (field === "playCount") return song.playCount || 0;
-				if (field === "downloaded")
-					return offlineManager.downloadedSongIds.has(song.id) ? 1 : 0;
-				return song[field as keyof Song];
-			};
-			const val1 = getValue(track1),
-				val2 = getValue(track2);
-			result =
-				typeof val1 === "number" && typeof val2 === "number"
-					? val1 - val2
-					: compare(val1, val2);
-		}
-		return asc ? result : -result;
-	});
-
-	indices.forEach((index, i) => {
-		queue.tracks[index] = targets[i].track;
-		queue.keys[index] = targets[i].key;
-		if (targets[i].playing) queue.pos = index;
+		const primaryResult =
+			typeof a.value === "number" && typeof b.value === "number"
+				? a.value - b.value
+				: compare(a.value as string, b.value as string);
+		if (primaryResult) return asc ? primaryResult : -primaryResult;
+		return compareTieBreakers(a, b);
 	});
 
-	requestReorderedMoves(previousKeys);
-	if (isAll) {
-		clearSel();
+	const moves: QueueMove[] = [];
+	for (let i = 0; i < indices.length; i++) {
+		const index = indices[i];
+		const target = targets[i];
+		if (target.from === index) continue;
+		queue.tracks[index] = target.track;
+		queue.keys[index] = target.key;
+		if (target.from === playingIndex) queue.pos = index;
+		moves.push({
+			key: target.key,
+			from: target.from,
+			to: index,
+			fullDistance: true,
+		});
 	}
+
+	requestMoves(moves);
+	if (isAll) clearSel();
 };
 
 export const starSelected = (star: boolean) =>
-- 
2.51.2