From f8b5f12812211388c20fa29b1256d75e8204956d Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 05:16:28 -0800
Subject: [PATCH] desktop player button layout stuff

---
 src/lib/components/GlobalPlayer.svelte | 159 +++++++++++++------------
 1 file changed, 80 insertions(+), 79 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index c50fcac..2dd3c76 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -818,7 +818,86 @@
 					<div class="text-xs text-muted-foreground">
 						{formatTime(currentTime)} / {formatTime(duration)}
 					</div>
-					<div class="flex items-center gap-2">
+
+					<label class="ml-auto flex items-center gap-2 text-sm">
+						<span class="text-muted-foreground" aria-hidden="true">
+							<Volume2 class={iconClass} />
+						</span>
+						<span class="sr-only">Volume</span>
+						<input
+							type="range"
+							min="0"
+							max="1"
+							step="0.01"
+							value={snap.volume}
+							oninput={(e) =>
+								setVolume(Number((e.currentTarget as HTMLInputElement).value))}
+						/>
+					</label>
+				</div>
+
+				<label class="block">
+					<span class="sr-only">Seek</span>
+					<input
+						class="w-full"
+						type="range"
+						min="0"
+						max={Math.max(0, duration)}
+						step="0.1"
+						bind:value={currentTime}
+						disabled={!snap.currentTrack || duration <= 0}
+					/>
+				</label>
+
+				<div class="flex items-center gap-2">
+					<button
+						class="btn-icon"
+						type="button"
+						disabled={!canPrev}
+						aria-label="Previous"
+						title="Previous"
+						onclick={() => {
+							prev(currentTime);
+							void syncAndAutoplay();
+						}}
+					>
+						<SkipBack class={iconClass} />
+					</button>
+
+					<button
+						class="btn-icon"
+						type="button"
+						aria-label={isPlaying ? "Pause" : "Play"}
+						title={isPlaying ? "Pause" : "Play"}
+						onclick={() => {
+							if (!audioEl) return;
+							if (audioEl.paused) void audioEl.play();
+							else audioEl.pause();
+						}}
+						disabled={!snap.currentTrack}
+					>
+						{#if isPlaying}
+							<PauseIcon class={iconClass} />
+						{:else}
+							<PlayIcon class={iconClass} />
+						{/if}
+					</button>
+
+					<button
+						class="btn-icon"
+						type="button"
+						disabled={!canNext}
+						aria-label="Next"
+						title="Next"
+						onclick={() => {
+							next();
+							void syncAndAutoplay();
+						}}
+					>
+						<SkipForward class={iconClass} />
+					</button>
+
+					<div class="ml-auto flex items-center gap-2">
 						<button
 							class={[
 								"btn-icon transition-colors",
@@ -885,84 +964,6 @@
 					</div>
 				</div>
 
-				<label class="block">
-					<span class="sr-only">Seek</span>
-					<input
-						class="w-full"
-						type="range"
-						min="0"
-						max={Math.max(0, duration)}
-						step="0.1"
-						bind:value={currentTime}
-						disabled={!snap.currentTrack || duration <= 0}
-					/>
-				</label>
-
-				<div class="flex items-center gap-2">
-					<button
-						class="btn-icon"
-						type="button"
-						disabled={!canPrev}
-						aria-label="Previous"
-						title="Previous"
-						onclick={() => {
-							prev(currentTime);
-							void syncAndAutoplay();
-						}}
-					>
-						<SkipBack class={iconClass} />
-					</button>
-
-					<button
-						class="btn-icon"
-						type="button"
-						aria-label={isPlaying ? "Pause" : "Play"}
-						title={isPlaying ? "Pause" : "Play"}
-						onclick={() => {
-							if (!audioEl) return;
-							if (audioEl.paused) void audioEl.play();
-							else audioEl.pause();
-						}}
-						disabled={!snap.currentTrack}
-					>
-						{#if isPlaying}
-							<PauseIcon class={iconClass} />
-						{:else}
-							<PlayIcon class={iconClass} />
-						{/if}
-					</button>
-
-					<button
-						class="btn-icon"
-						type="button"
-						disabled={!canNext}
-						aria-label="Next"
-						title="Next"
-						onclick={() => {
-							next();
-							void syncAndAutoplay();
-						}}
-					>
-						<SkipForward class={iconClass} />
-					</button>
-
-					<label class="ml-auto flex items-center gap-2 text-sm">
-						<span class="text-muted-foreground" aria-hidden="true">
-							<Volume2 class={iconClass} />
-						</span>
-						<span class="sr-only">Volume</span>
-						<input
-							type="range"
-							min="0"
-							max="1"
-							step="0.01"
-							value={snap.volume}
-							oninput={(e) =>
-								setVolume(Number((e.currentTarget as HTMLInputElement).value))}
-						/>
-					</label>
-				</div>
-
 				<div class="border-t pt-2">
 					<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
 				</div>