From 2839417ee98f36c46713dac4c9c4f0c48f837f53 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 04:09:58 -0800
Subject: [PATCH] finally synced

---
 src/lib/components/GlobalPlayer.svelte | 465 +++++++++++++------------
 src/routes/+layout.svelte              |   4 +-
 2 files changed, 238 insertions(+), 231 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index 38f0242..613cab6 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -34,6 +34,7 @@
 		type PlayerSnapshot,
 	} from "$lib/player/player.svelte";
 	import { createMediaSessionBindings } from "$lib/player/media-session";
+	import Portal from "$lib/components/util/Portal.svelte";
 
 	import {
 		ChevronsUpDown,
@@ -453,247 +454,253 @@
 	{/if}
 </svelte:head>
 
-<!-- Mobile UI is allowed to render as an overlay even if this component is mounted
-     inside the desktop sidebar column. We hide it on lg+ via CSS, not by unmounting. -->
-<div
-	class="lg:hidden fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
->
-	<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
-		<button
-			class="inline-flex h-8 w-8 items-center justify-center rounded border"
-			type="button"
-			onclick={() => toggleUiOpen()}
-			aria-label={snap.uiOpen ? "Close player" : "Open player"}
-			title={snap.uiOpen ? "Close player" : "Open player"}
-		>
-			{#if snap.uiOpen}
-				<X class="h-4 w-4" />
-			{:else}
-				<ChevronsUpDown class="h-4 w-4" />
-			{/if}
-		</button>
+<!-- Mobile UI is portaled to document.body so the GlobalPlayer can be mounted
+     in the desktop sidebar column while still showing the mobile overlay.
+     Hidden on lg+ via CSS. -->
+<Portal>
+	<div
+		class="lg:hidden fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
+	>
+		<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
+			<button
+				class="inline-flex h-8 w-8 items-center justify-center rounded border"
+				type="button"
+				onclick={() => toggleUiOpen()}
+				aria-label={snap.uiOpen ? "Close player" : "Open player"}
+				title={snap.uiOpen ? "Close player" : "Open player"}
+			>
+				{#if snap.uiOpen}
+					<X class="h-4 w-4" />
+				{:else}
+					<ChevronsUpDown class="h-4 w-4" />
+				{/if}
+			</button>
 
-		<div
-			class="min-w-0 flex-1"
-			role="button"
-			tabindex="0"
-			aria-label={snap.uiOpen ? "Close player" : "Open player"}
-			onclick={(e) => {
-				const t = e.target as HTMLElement | null;
-				// Only toggle when tapping the track info area. Avoid toggling from
-				// the button zones (above/below/side) by not attaching handlers to the
-				// whole bar.
-				if (t?.closest("button,input,label,a")) return;
-				toggleUiOpen();
-			}}
-			onkeydown={(e) => {
-				if (e.key !== "Enter" && e.key !== " ") return;
-				const t = e.target as HTMLElement | null;
-				if (t?.closest("button,input,label,a")) return;
-				e.preventDefault();
-				toggleUiOpen();
-			}}
-		>
-			{#if snap.currentTrack}
-				<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-					{#if typeNumberLabel(snap.currentTrack)}
-						<span
-							class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+			<div
+				class="min-w-0 flex-1"
+				role="button"
+				tabindex="0"
+				aria-label={snap.uiOpen ? "Close player" : "Open player"}
+				onclick={(e) => {
+					const t = e.target as HTMLElement | null;
+					// Only toggle when tapping the track info area. Avoid toggling from
+					// the button zones (above/below/side) by not attaching handlers to the
+					// whole bar.
+					if (t?.closest("button,input,label,a")) return;
+					toggleUiOpen();
+				}}
+				onkeydown={(e) => {
+					if (e.key !== "Enter" && e.key !== " ") return;
+					const t = e.target as HTMLElement | null;
+					if (t?.closest("button,input,label,a")) return;
+					e.preventDefault();
+					toggleUiOpen();
+				}}
+			>
+				{#if snap.currentTrack}
+					<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+						{#if typeNumberLabel(snap.currentTrack)}
+							<span
+								class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+							>
+								{typeNumberLabel(snap.currentTrack)}
+							</span>
+						{/if}
+						<span class="truncate">
+							{(
+								snap.currentTrack.animeName ??
+								snap.currentTrack.album ??
+								""
+							).trim()}
+						</span>
+					</div>
+
+					<div class="mt-1 text-foreground/80">
+						{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
+						<span class="text-sm text-muted-foreground">
+							— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
+						</span>
+					</div>
+				{:else}
+					<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
+				{/if}
+
+				<div class="text-xs text-muted-foreground">
+					{formatTime(currentTime)} / {formatTime(duration)}
+				</div>
+
+				<label class="mt-2 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>
+
+			<button
+				class="inline-flex h-8 w-8 items-center justify-center rounded border"
+				type="button"
+				disabled={!canPrev}
+				aria-label="Previous"
+				title="Previous"
+				onclick={() => {
+					prev(currentTime);
+					void syncAndAutoplay();
+				}}
+			>
+				<SkipBack class="h-4 w-4" />
+			</button>
+
+			<button
+				class="inline-flex h-8 w-8 items-center justify-center rounded border"
+				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="h-4 w-4" />
+				{:else}
+					<PlayIcon class="h-4 w-4" />
+				{/if}
+			</button>
+
+			<button
+				class="inline-flex h-8 w-8 items-center justify-center rounded border"
+				type="button"
+				disabled={!canNext}
+				aria-label="Next"
+				title="Next"
+				onclick={() => {
+					next();
+					void syncAndAutoplay();
+				}}
+			>
+				<SkipForward class="h-4 w-4" />
+			</button>
+		</div>
+
+		{#if snap.uiOpen}
+			<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
+				<div class="mx-auto max-w-4xl space-y-3">
+					<div class="flex flex-wrap items-center gap-2">
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							onclick={() => toggleShuffle()}
+							aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
+							title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
 						>
-							{typeNumberLabel(snap.currentTrack)}
-						</span>
-					{/if}
-					<span class="truncate">
-						{(
-							snap.currentTrack.animeName ??
-							snap.currentTrack.album ??
-							""
-						).trim()}
-					</span>
-				</div>
+							<Shuffle class="h-4 w-4" />
+						</button>
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							onclick={() => toggleWrap()}
+							aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+							title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+						>
+							<Repeat class="h-4 w-4" />
+						</button>
 
-				<div class="mt-1 text-foreground/80">
-					{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
-					<span class="text-sm text-muted-foreground">
-						— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
-					</span>
-				</div>
-			{:else}
-				<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
-			{/if}
+						<label class="ml-auto flex items-center gap-2 text-sm">
+							<span class="text-muted-foreground" aria-hidden="true">
+								<Volume2 class="h-4 w-4" />
+							</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="text-xs text-muted-foreground">
-				{formatTime(currentTime)} / {formatTime(duration)}
-			</div>
+					<div class="space-y-1">
+						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
 
-			<label class="mt-2 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>
-
-		<button
-			class="inline-flex h-8 w-8 items-center justify-center rounded border"
-			type="button"
-			disabled={!canPrev}
-			aria-label="Previous"
-			title="Previous"
-			onclick={() => {
-				prev(currentTime);
-				void syncAndAutoplay();
-			}}
-		>
-			<SkipBack class="h-4 w-4" />
-		</button>
-
-		<button
-			class="inline-flex h-8 w-8 items-center justify-center rounded border"
-			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="h-4 w-4" />
-			{:else}
-				<PlayIcon class="h-4 w-4" />
-			{/if}
-		</button>
-
-		<button
-			class="inline-flex h-8 w-8 items-center justify-center rounded border"
-			type="button"
-			disabled={!canNext}
-			aria-label="Next"
-			title="Next"
-			onclick={() => {
-				next();
-				void syncAndAutoplay();
-			}}
-		>
-			<SkipForward class="h-4 w-4" />
-		</button>
-	</div>
-
-	{#if snap.uiOpen}
-		<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
-			<div class="mx-auto max-w-4xl space-y-3">
-				<div class="flex flex-wrap items-center gap-2">
-					<button
-						class="inline-flex h-8 w-8 items-center justify-center rounded border"
-						type="button"
-						onclick={() => toggleShuffle()}
-						aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-						title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-					>
-						<Shuffle class="h-4 w-4" />
-					</button>
-					<button
-						class="inline-flex h-8 w-8 items-center justify-center rounded border"
-						type="button"
-						onclick={() => toggleWrap()}
-						aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-						title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-					>
-						<Repeat class="h-4 w-4" />
-					</button>
-
-					<label class="ml-auto flex items-center gap-2 text-sm">
-						<span class="text-muted-foreground" aria-hidden="true">
-							<Volume2 class="h-4 w-4" />
-						</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="space-y-1">
-					<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
-
-					{#if snap.queue.length === 0}
-						<p class="text-sm text-muted-foreground">Queue is empty.</p>
-					{:else}
-						<ul class="overflow-auto rounded border">
-							{#each queueDisplay as item (item.track.id)}
-								<li
-									class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
-								>
-									<button
-										class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
-										type="button"
-										onclick={() => {
-											jumpToTrack(item.track.id);
-											void syncAndAutoplay();
-										}}
+						{#if snap.queue.length === 0}
+							<p class="text-sm text-muted-foreground">Queue is empty.</p>
+						{:else}
+							<ul class="overflow-auto rounded border">
+								{#each queueDisplay as item (item.track.id)}
+									<li
+										class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
 									>
-										{#if item.isCurrent}
-											<span class="text-muted-foreground">▶ </span>
-										{/if}
-										<div class="min-w-0 flex-1">
-											<div
-												class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
-											>
-												{#if typeNumberLabel(item.track)}
-													<span
-														class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-													>
-														{typeNumberLabel(item.track)}
-													</span>
-												{/if}
-												<span class="truncate text-sm"
-													>{animeLabel(item.track)}</span
+										<button
+											class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
+											type="button"
+											onclick={() => {
+												jumpToTrack(item.track.id);
+												void syncAndAutoplay();
+											}}
+										>
+											{#if item.isCurrent}
+												<span class="text-muted-foreground">▶ </span>
+											{/if}
+											<div class="min-w-0 flex-1">
+												<div
+													class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
 												>
-											</div>
+													{#if typeNumberLabel(item.track)}
+														<span
+															class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+														>
+															{typeNumberLabel(item.track)}
+														</span>
+													{/if}
+													<span class="truncate text-sm"
+														>{animeLabel(item.track)}</span
+													>
+												</div>
 
-											<div class="mt-1 text-foreground/80">
-												{(item.track.title ?? "").trim() || "Unknown title"}
-												<span class="text-sm text-muted-foreground">
-													— {(item.track.artist ?? "").trim() ||
-														"Unknown Artist"}
-												</span>
+												<div class="mt-1 text-foreground/80">
+													{(item.track.title ?? "").trim() || "Unknown title"}
+													<span class="text-sm text-muted-foreground">
+														— {(item.track.artist ?? "").trim() ||
+															"Unknown Artist"}
+													</span>
+												</div>
 											</div>
-										</div>
-									</button>
+										</button>
 
-									<button
-										class="inline-flex h-8 w-8 items-center justify-center rounded border"
-										type="button"
-										onclick={() => removeTrack(item.track.id)}
-										aria-label="Remove from queue"
-										title="Remove from queue"
-									>
-										<ListX class="h-4 w-4" />
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{/if}
+										<button
+											class="inline-flex h-8 w-8 items-center justify-center rounded border"
+											type="button"
+											onclick={() => removeTrack(item.track.id)}
+											aria-label="Remove from queue"
+											title="Remove from queue"
+										>
+											<ListX class="h-4 w-4" />
+										</button>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
 				</div>
 			</div>
-		</div>
-	{/if}
-</div>
+		{/if}
+	</div>
+</Portal>
+
 <!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
 <aside
 	class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 460534a..ae53273 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -31,5 +31,5 @@
 	</aside>
 </div>
 
-<!-- Mobile player is rendered by the same GlobalPlayer instance above.
-     On small screens, it uses fixed positioning internally so it can overlay. -->
+<!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
+     mounted in the desktop sidebar column above. -->