Merge pull request #45 from zzstoatzz/feat/player-improvements

feat: improve player UI cosmetics

frontend/src/lib/components/Player.svelte

···
 	let formattedCurrentTime = $derived(formatTime(player.currentTime));
 	let formattedDuration = $derived(formatTime(player.duration));
 
+	// compute progress percentage for seek bar styling
+	let progressPercent = $derived.by(() => {
+		if (!player.duration || player.duration === 0) return 0;
+		return (player.currentTime / player.duration) * 100;
+	});
+
 	// volume state indicators
 	let volumeState = $derived.by(() => {
 		if (player.volume === 0) return 'muted';
···
 				<div class="player-title" class:scrolling={player.currentTrack.title.length > 30}>
 					<span>{player.currentTrack.title}</span>
 				</div>
-				<a href="/u/{player.currentTrack.artist_handle}" class="player-artist-link">
-					{player.currentTrack.artist}
-				</a>
+				<div class="player-metadata">
+					<a href="/u/{player.currentTrack.artist_handle}" class="player-artist-link">
+						{player.currentTrack.artist}
+					</a>
+					{#if player.currentTrack.album}
+						<span class="metadata-separator">•</span>
+						<span class="player-album">{player.currentTrack.album}</span>
+					{/if}
+				</div>
 			</div>
 
 			<div class="player-controls">
···
 						min="0"
 						max={player.duration || 0}
 						bind:value={player.currentTime}
+						style="--progress: {progressPercent}%"
 					/>
 					<span class="time">{formattedDuration}</span>
 				</div>
···
 		}
 	}
 
-	.player-artist-link {
+	.player-metadata {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 		color: #909090;
 		font-size: 0.9rem;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.player-artist-link {
+		color: #909090;
 		text-decoration: none;
-		display: block;
 		transition: color 0.2s;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		flex-shrink: 0;
 	}
 
 	.player-artist-link:hover {
 		color: var(--accent);
 	}
 
+	.metadata-separator {
+		color: #606060;
+		flex-shrink: 0;
+	}
+
+	.player-album {
+		color: #808080;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	.player-controls {
 		flex: 1;
 		display: flex;
···
 		cursor: pointer;
 	}
 
-	input[type="range"]::-webkit-slider-track {
-		background: #333;
+	input[type="range"]::-webkit-slider-runnable-track {
+		background: linear-gradient(
+			to right,
+			color-mix(in srgb, var(--accent) 60%, transparent) 0%,
+			color-mix(in srgb, var(--accent) 60%, transparent) var(--progress, 0%),
+			color-mix(in srgb, var(--accent) 20%, transparent) var(--progress, 0%),
+			color-mix(in srgb, var(--accent) 20%, transparent) 100%
+		);
 		height: 4px;
 		border-radius: 2px;
 	}
···
 	}
 
 	input[type="range"]::-webkit-slider-thumb:hover {
-		background: #8ab3ff;
+		background: var(--accent-hover);
 		transform: scale(1.2);
-		box-shadow: 0 0 0 4px rgba(106, 159, 255, 0.2);
+		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
 	}
 
 	input[type="range"].muted::-webkit-slider-thumb {
···
 
 	input[type="range"].max::-webkit-slider-thumb {
 		background: var(--accent);
-		box-shadow: 0 0 0 4px rgba(106, 159, 255, 0.3);
+		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	input[type="range"]::-moz-range-track {
-		background: #333;
+		background: color-mix(in srgb, var(--accent) 20%, transparent);
+		height: 4px;
+		border-radius: 2px;
+	}
+
+	input[type="range"]::-moz-range-progress {
+		background: color-mix(in srgb, var(--accent) 60%, transparent);
 		height: 4px;
 		border-radius: 2px;
 	}
···
 	}
 
 	input[type="range"]::-moz-range-thumb:hover {
-		background: #8ab3ff;
+		background: var(--accent-hover);
 		transform: scale(1.2);
-		box-shadow: 0 0 0 4px rgba(106, 159, 255, 0.2);
+		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
 	}
 
 	input[type="range"].muted::-moz-range-thumb {
···
 
 	input[type="range"].max::-moz-range-thumb {
 		background: var(--accent);
-		box-shadow: 0 0 0 4px rgba(106, 159, 255, 0.3);
+		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
 	}
 
 	@media (max-width: 768px) {