From 57320232a6e3741f6a6a3db74391fb5036bbc26b Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Tue, 10 Feb 2026 01:17:38 -0800
Subject: [PATCH] fix some ui

---
 .../components/player/PlayerDesktop.svelte    | 192 ++++++++---------
 src/lib/components/player/PlayerMobile.svelte | 196 +++++++++---------
 2 files changed, 194 insertions(+), 194 deletions(-)

diff --git a/src/lib/components/player/PlayerDesktop.svelte b/src/lib/components/player/PlayerDesktop.svelte
index 6cb02cd..c824ecb 100644
--- a/src/lib/components/player/PlayerDesktop.svelte
+++ b/src/lib/components/player/PlayerDesktop.svelte
@@ -11,107 +11,107 @@
 </script>
 
 <div
-    class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full"
+	class="h-full flex flex-col border-l bg-background/50 backdrop-blur w-full"
 >
-    {#if player.currentTrack}
-        <div class="p-6 space-y-6 shrink-0">
-            <!-- Artwork -->
-            <div
-                class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg border"
-            >
-                <Disc class="h-1/3 w-1/3 text-muted-foreground opacity-50" />
-                <!-- Ideally use real album art if available -->
-            </div>
+	{#if player.currentTrack}
+		<div class="p-6 space-y-6 shrink-0">
+			<!-- Artwork -->
+			<div
+				class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg border"
+			>
+				<Disc class="h-1/3 w-1/3 text-muted-foreground opacity-50" />
+				<!-- Ideally use real album art if available -->
+			</div>
 
-            <!-- Track Info -->
-            <div class="space-y-1.5 text-center">
-                <h2 class="text-xl font-bold leading-tight line-clamp-2">
-                    {player.currentTrack.title}
-                </h2>
-                <p
-                    class="text-muted-foreground font-medium text-lg line-clamp-1"
-                >
-                    {player.currentTrack.artist}
-                </p>
-                <p class="text-xs text-muted-foreground/80">
-                    {player.currentTrack.album ||
-                        player.currentTrack.animeName ||
-                        ""}
-                </p>
-            </div>
+			<!-- Track Info -->
+			<div class="space-y-1.5 text-center">
+				<h2 class="text-xl font-bold leading-tight line-clamp-2">
+					{player.currentTrack.title}
+				</h2>
+				<p
+					class="text-muted-foreground font-medium text-lg line-clamp-1"
+				>
+					{player.currentTrack.artist}
+				</p>
+				<p class="text-xs text-muted-foreground/80">
+					{player.currentTrack.album ||
+						player.currentTrack.animeName ||
+						""}
+				</p>
+			</div>
 
-            <!-- Progress -->
-            <div class="space-y-2">
-                <input
-                    type="range"
-                    bind:value={audio.currentTime}
-                    max={audio.duration || 100}
-                    class="w-full"
-                />
-                <div
-                    class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums px-1"
-                >
-                    <span>{formatTime(audio.currentTime)}</span>
-                    <span>{formatTime(audio.duration)}</span>
-                </div>
-            </div>
+			<!-- Progress -->
+			<div class="space-y-2">
+				<input
+					type="range"
+					bind:value={audio.currentTime}
+					max={audio.duration || 100}
+					class="w-full"
+				/>
+				<div
+					class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums px-1"
+				>
+					<span>{formatTime(audio.currentTime)}</span>
+					<span>{formatTime(audio.duration)}</span>
+				</div>
+			</div>
 
-            <!-- Controls -->
-            <div class="flex justify-center">
-                <Controls />
-            </div>
+			<!-- Controls -->
+			<div class="flex justify-center">
+				<Controls />
+			</div>
 
-            <!-- Volume -->
-            <div class="flex items-center gap-3 px-4">
-                <button
-                    onclick={() => player.toggleMute()}
-                    class="text-muted-foreground hover:text-foreground transition-colors"
-                    title={player.isMuted ? "Unmute" : "Mute"}
-                >
-                    {#if player.isMuted || player.volume === 0}
-                        <VolumeX class="h-4 w-4" />
-                    {:else if player.volume < 0.5}
-                        <Volume1 class="h-4 w-4" />
-                    {:else}
-                        <Volume2 class="h-4 w-4" />
-                    {/if}
-                </button>
-                <input
-                    type="range"
-                    bind:value={player.volume}
-                    max={1}
-                    step={0.05}
-                    class="flex-1"
-                />
-            </div>
-        </div>
+			<!-- Volume -->
+			<div class="flex items-center gap-3 px-4">
+				<button
+					onclick={() => player.toggleMute()}
+					class="text-muted-foreground hover:text-foreground transition-colors"
+					title={player.isMuted ? "Unmute" : "Mute"}
+				>
+					{#if player.isMuted || player.volume === 0}
+						<VolumeX class="h-4 w-4" />
+					{:else if player.volume < 0.5}
+						<Volume1 class="h-4 w-4" />
+					{:else}
+						<Volume2 class="h-4 w-4" />
+					{/if}
+				</button>
+				<input
+					type="range"
+					bind:value={player.volume}
+					max={1}
+					step={0.05}
+					class="flex-1"
+				/>
+			</div>
+		</div>
 
-        <!-- Divider -->
-        <div class="h-px bg-border mx-6"></div>
+		<!-- Divider -->
+		<div class="h-px bg-border mx-6"></div>
 
-        <!-- Queue (Scrollable) -->
-        <div class="flex-1 min-h-0 overflow-hidden relative p-4">
-            <div class="absolute inset-0 p-4 pt-0">
-                <div
-                    class="h-full overflow-hidden rounded-lg border bg-muted/20"
-                >
-                    <Queue />
-                </div>
-            </div>
-        </div>
-    {:else}
-        <div
-            class="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4 p-8 text-center"
-        >
-            <div
-                class="h-16 w-16 rounded-full bg-muted flex items-center justify-center"
-            >
-                <Disc class="h-8 w-8 opacity-50" />
-            </div>
-            <p>No track playing</p>
-            <p class="text-xs max-w-xs opacity-70">
-                Pick a song from the library to start listening.
-            </p>
-        </div>
-    {/if}
+		<!-- Queue (Scrollable) -->
+		<div class="flex-1 min-h-0 overflow-hidden relative p-4">
+			<div class="absolute inset-0 p-4 pt-0">
+				<div
+					class="h-full overflow-hidden rounded-lg border bg-muted/20"
+				>
+					<Queue />
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div
+			class="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4 p-8 text-center"
+		>
+			<div
+				class="h-16 w-16 rounded-full bg-muted flex items-center justify-center"
+			>
+				<Disc class="h-8 w-8 opacity-50" />
+			</div>
+			<p>No track playing</p>
+			<p class="text-xs max-w-xs opacity-70">
+				Pick a song from the library to start listening.
+			</p>
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/components/player/PlayerMobile.svelte b/src/lib/components/player/PlayerMobile.svelte
index d52f01e..fae72c3 100644
--- a/src/lib/components/player/PlayerMobile.svelte
+++ b/src/lib/components/player/PlayerMobile.svelte
@@ -12,114 +12,114 @@
 </script>
 
 <div
-    class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
+	class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
 >
-    <div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
-        <!-- Mini Player Info -->
-        <button
-            type="button"
-            class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
-            onclick={() => (open = true)}
-        >
-            <!-- Placeholder Art -->
-            <div
-                class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
-            >
-                <Disc class="h-6 w-6 text-muted-foreground" />
-            </div>
+	<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
+		<!-- Mini Player Info -->
+		<button
+			type="button"
+			class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
+			onclick={() => (open = true)}
+		>
+			<!-- Placeholder Art -->
+			<div
+				class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
+			>
+				<Disc class="h-6 w-6 text-muted-foreground" />
+			</div>
 
-            <div class="flex flex-col overflow-hidden">
-                <div class="text-sm font-medium truncate leading-tight">
-                    {player.currentTrack?.title || "Unknown Title"}
-                </div>
-                <div
-                    class="text-xs text-muted-foreground truncate leading-tight"
-                >
-                    {player.currentTrack?.artist || "Unknown Artist"}
-                </div>
-            </div>
-        </button>
+			<div class="flex flex-col overflow-hidden">
+				<div class="text-sm font-medium truncate leading-tight">
+					{player.currentTrack?.title || "Unknown Title"}
+				</div>
+				<div
+					class="text-xs text-muted-foreground truncate leading-tight"
+				>
+					{player.currentTrack?.artist || "Unknown Artist"}
+				</div>
+			</div>
+		</button>
 
-        <!-- Mini Controls -->
-        <div class="flex items-center gap-1">
-            <Controls />
-            <!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
-            <!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
-            <!-- Let's just use simplified controls here for now, or just Play/Pause -->
-        </div>
-    </div>
+		<!-- Mini Controls -->
+		<div class="flex items-center gap-1">
+			<Controls />
+			<!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
+			<!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
+			<!-- Let's just use simplified controls here for now, or just Play/Pause -->
+		</div>
+	</div>
 
-    <!-- Progress Bar (thin line at top of bar) -->
-    <div class="absolute top-0 left-0 right-0 h-1 bg-muted">
-        <div
-            class="h-full bg-primary transition-all duration-100 ease-linear"
-            style="width: {(audio.currentTime / audio.duration) * 100}%"
-        ></div>
-    </div>
+	<!-- Progress Bar (thin line at top of bar) -->
+	<div class="absolute top-0 left-0 right-0 h-1 bg-muted">
+		<div
+			class="h-full bg-primary transition-all duration-100 ease-linear"
+			style="width: {(audio.currentTime / audio.duration) * 100}%"
+		></div>
+	</div>
 </div>
 
 <Drawer.Root bind:open>
-    <Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
-        <div class="mx-auto w-Full max-w-sm flex-1 flex flex-col p-4 gap-6">
-            <!-- Header -->
-            <div class="flex justify-center pt-2">
-                <div
-                    class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
-                ></div>
-            </div>
+	<Drawer.Content class="h-[96dvh] flex flex-col rounded-t-[10px]">
+		<div class="mx-auto w-full max-w-sm flex-1 flex flex-col p-4 gap-6">
+			<!-- Header -->
+			<div class="flex justify-center pt-2">
+				<div
+					class="h-1.5 w-12 rounded-full bg-muted-foreground/20"
+				></div>
+			</div>
 
-            <!-- Expanded Art -->
-            <div
-                class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
-            >
-                <Disc class="h-24 w-24 text-muted-foreground" />
-                <!-- If we had art, we'd show it here -->
-            </div>
+			<!-- Expanded Art -->
+			<div
+				class="aspect-square w-full relative rounded-xl overflow-hidden bg-muted flex items-center justify-center shadow-lg"
+			>
+				<Disc class="h-24 w-24 text-muted-foreground" />
+				<!-- If we had art, we'd show it here -->
+			</div>
 
-            <!-- Track Info -->
-            <div class="text-center space-y-1">
-                <h2 class="text-xl font-bold leading-tight line-clamp-2">
-                    {player.currentTrack?.title}
-                </h2>
-                <p
-                    class="text-muted-foreground font-medium text-lg line-clamp-1"
-                >
-                    {player.currentTrack?.artist}
-                </p>
-                <p class="text-xs text-muted-foreground/80 mt-1">
-                    {player.currentTrack?.album ||
-                        player.currentTrack?.animeName}
-                </p>
-            </div>
+			<!-- Track Info -->
+			<div class="text-center space-y-1">
+				<h2 class="text-xl font-bold leading-tight line-clamp-2">
+					{player.currentTrack?.title}
+				</h2>
+				<p
+					class="text-muted-foreground font-medium text-lg line-clamp-1"
+				>
+					{player.currentTrack?.artist}
+				</p>
+				<p class="text-xs text-muted-foreground/80 mt-1">
+					{player.currentTrack?.album ||
+						player.currentTrack?.animeName}
+				</p>
+			</div>
 
-            <!-- Progress -->
-            <div class="space-y-2">
-                <input
-                    type="range"
-                    bind:value={audio.currentTime}
-                    max={audio.duration || 100}
-                    class="w-full"
-                />
-                <div
-                    class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
-                >
-                    <span>{formatTime(audio.currentTime)}</span>
-                    <span>{formatTime(audio.duration)}</span>
-                </div>
-            </div>
+			<!-- Progress -->
+			<div class="space-y-2">
+				<input
+					type="range"
+					bind:value={audio.currentTime}
+					max={audio.duration || 100}
+					class="w-full"
+				/>
+				<div
+					class="flex justify-between text-xs text-muted-foreground font-variant-numeric tabular-nums"
+				>
+					<span>{formatTime(audio.currentTime)}</span>
+					<span>{formatTime(audio.duration)}</span>
+				</div>
+			</div>
 
-            <!-- Main Controls -->
-            <div class="flex justify-center py-4">
-                <Controls />
-            </div>
+			<!-- Main Controls -->
+			<div class="flex justify-center py-4">
+				<Controls />
+			</div>
 
-            <!-- Volume? Or Queue toggle? -->
-            <!-- Queue -->
-            <div class="flex-1 overflow-hidden relative mt-auto">
-                <div class="absolute inset-0">
-                    <Queue />
-                </div>
-            </div>
-        </div>
-    </Drawer.Content>
+			<!-- Volume? Or Queue toggle? -->
+			<!-- Queue -->
+			<div class="flex-1 overflow-hidden relative mt-auto">
+				<div class="absolute inset-0">
+					<Queue />
+				</div>
+			</div>
+		</div>
+	</Drawer.Content>
 </Drawer.Root>