Smaller changes

iamdb · SofusA · Nov 17, 2024 · Nov 24, 2024 · Nov 25, 2024 · Nov 25, 2024
commit 2562c56b49d2248daaaedef2cc93f4a82c23673e
diff --git a/.helix/languages.toml b/.helix/languages.toml
diff --git a/www/src/lib/components/Favorites.svelte b/www/src/lib/components/Favorites.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
-	<p class="p-4 text-xl text-center">Playlists</p>
+	<p class="p-4 text-lg text-center">Playlists</p>
 	<List>
 		{#each $userPlaylists as playlist}
 			<ListItem>

diff --git a/www/src/lib/components/ListAlbum.svelte b/www/src/lib/components/ListAlbum.svelte
@@ -5,11 +5,16 @@
 </script>
 
 <div class="flex gap-4 items-center w-full">
-	<img loading="lazy" class="size-12 rounded-md" src={album.coverArt} alt={album.title} />
+	<img
+		class="text-sm text-gray-500 bg-gray-800 rounded-md size-12 aspect-square"
+		loading="lazy"
+		src={album.coverArt}
+		alt={album.title}
+	/>
 
 	<div class="overflow-hidden w-full">
 		<div class="flex justify-between">
-			<h3 class="text-xl truncate">
+			<h3 class="text-lg truncate">
 				{album.title}
 			</h3>
 			<Info explicit={album.explicit} hiresAvailable={album.hiresAvailable} />

diff --git a/www/src/lib/components/ListTrack.svelte b/www/src/lib/components/ListTrack.svelte
@@ -6,7 +6,7 @@
 
 <div>
 	<div class="flex justify-between items-center">
-		<h3 class="text-xl truncate">
+		<h3 class="text-lg truncate">
 			{track.title}
 		</h3>
 		<Info explicit={track.explicit} hiresAvailable={track.hiresAvailable} />

diff --git a/www/src/lib/components/Marquee.svelte b/www/src/lib/components/Marquee.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 
 	export let input: string;
@@ -8,7 +8,7 @@
 
 	const enableMarquee = writable(false);
 
-	tick().then(() => {
+	afterUpdate(() => {
 		if (titleWidth > titleWrapperWidth) {
 			enableMarquee.set(true);
 		} else {

diff --git a/www/src/lib/components/Navigation.svelte b/www/src/lib/components/Navigation.svelte
@@ -4,29 +4,35 @@
 	export let setPage, activePage;
 </script>
 
-<nav class="w-full gap-8 flex justify-between p-safe *:h-16 *:p-4 *:transition-colors">
+<nav
+	class="flex w-full justify-evenly gap-2 p-safe *:flex *:h-[3.25rem] *:w-20 *:flex-col *:items-center *:overflow-visible *:text-nowrap *:px-4 *:py-1 *:text-[10px] *:font-medium *:transition-colors"
+>
 	<button
 		class={$activePage === 'nowPlaying' ? 'text-blue-500' : 'text-gray-500'}
-		on:click={setPage('nowPlaying')}
+		on:click={() => setPage('nowPlaying')}
 	>
-		<Icon src={PlayCircle} solid />
+		<Icon solid src={PlayCircle} />
+		Now Playing
 	</button>
 	<button
 		class={$activePage == 'queue' ? 'text-blue-500' : 'text-gray-500'}
-		on:click={setPage('queue')}
+		on:click={() => setPage('queue')}
 	>
-		<Icon src={QueueList} solid />
+		<Icon solid src={QueueList} />
+		Queue
 	</button>
 	<button
 		class={$activePage == 'favorites' ? 'text-blue-500' : 'text-gray-500'}
-		on:click={setPage('favorites')}
+		on:click={() => setPage('favorites')}
 	>
-		<Icon src={Star} solid />
+		<Icon solid src={Star} />
+		Favorites
 	</button>
 	<button
 		class={$activePage == 'search' ? 'text-blue-500' : 'text-gray-500'}
-		on:click={setPage('search')}
+		on:click={() => setPage('search')}
 	>
-		<Icon src={MagnifyingGlass} solid />
+		<Icon solid src={MagnifyingGlass} />
+		Search
 	</button>
 </nav>
diff --git a/www/src/lib/components/NowPlaying.svelte b/www/src/lib/components/NowPlaying.svelte
@@ -18,34 +18,34 @@
 	export let controls;
 </script>
 
-<div class="flex flex-col gap-8 justify-between items-center p-8 h-full landscape:flex-row">
-	<div class="max-h-full rounded-lg shadow-lg overflow-clip aspect-square">
+<div class="flex h-full flex-col items-center justify-center gap-8 p-8 landscape:flex-row">
+	<div class="aspect-square max-h-full max-w-[600px] overflow-clip rounded-lg shadow-lg">
 		<img src={$coverImage} alt={$entityTitle} class="object-contain" />
 	</div>
 
-	<div class="flex flex-col flex-grow justify-center w-full">
-		<div class="flex justify-between items-center">
-			<span class="text-xl truncate">
+	<div class="flex w-full max-w-md flex-grow flex-col justify-center md:max-w-[600px]">
+		<div class="flex items-center gap-2 justify-between">
+			<span class="truncate text-xl">
 				<Marquee input={$entityTitle} />
 			</span>
-			<div class="text-gray-500 whitespace-nowrap">
+			<div class="whitespace-nowrap text-gray-500">
 				{$currentTrack.number} of {$numOfTracks}
 			</div>
 		</div>
 		<div class="text-gray-400">
 			<Marquee input={$currentTrack?.artist.name} />
 		</div>
 
-		<div class="flex flex-col gap-y-4 mx-auto w-full">
-			<div class="flex justify-between items-center">
-				<span class="text-2xl truncate">
+		<div class="flex w-full flex-col gap-y-4">
+			<div class="flex items-center justify-between gap-2">
+				<span class="truncate text-2xl">
 					<Marquee input={$currentTrack?.title} />
 				</span>
 				<Info explicit={$currentTrack.explicit} hiresAvailable={$currentTrack.hiresAvailable} />
 			</div>
 
 			<div>
-				<div class="grid h-2 rounded-full overflow-clip">
+				<div class="grid h-2 overflow-clip rounded-full">
 					<div style="grid-column: 1; grid-row: 1;" class="w-full bg-gray-800"></div>
 					<div
 						style="grid-column: 1; grid-row: 1;"
@@ -60,7 +60,7 @@
 			</div>
 		</div>
 
-		<div class="flex flex-row gap-2 justify-center h-10">
+		<div class="flex h-10 flex-row justify-center gap-2">
 			<button on:click={() => controls?.previous()}><Icon src={Backward} solid /></button>
 			<button on:click={() => controls?.playPause()}>
 				{#if $currentStatus === 'Playing'}

diff --git a/www/src/lib/components/Queue.svelte b/www/src/lib/components/Queue.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { queue, entityTitle, listType, currentTrack } from '$lib/websocket';
+	import Info from './Info.svelte';
 	import List from './List.svelte';
 	import ListItem from './ListItem.svelte';
 
@@ -8,9 +9,9 @@
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
 	<div class="p-4 text-center">
-		<p class="text-xl">{$entityTitle}</p>
+		<p class="text-lg">{$entityTitle}</p>
 		{#if $listType === 'Album'}
-			<p class="text-xl">by {$currentTrack.artist.name}</p>
+			<p class="text-lg">by {$currentTrack.artist.name}</p>
 		{/if}
 	</div>
 
@@ -28,9 +29,12 @@
 					{:else if $listType === 'Playlist'}
 						<span>{track.position.toString().padStart(2, '0')}</span>
 					{/if}
-					<span class="truncate">
-						{track.title}
-					</span>
+					<div class="flex overflow-hidden flex-grow justify-between items-center">
+						<span class="truncate">
+							{track.title}
+						</span>
+						<Info explicit={track.explicit} hiresAvailable={track.hiresAvailable} />
+					</div>
 				</button>
 			</ListItem>
 		{/each}

diff --git a/www/src/lib/components/Search.svelte b/www/src/lib/components/Search.svelte
@@ -8,6 +8,7 @@
 	import PlaylistTracks from './PlaylistTracks.svelte';
 	import { Icon, MagnifyingGlass, XMark } from 'svelte-hero-icons';
 	import ListTrack from './ListTrack.svelte';
+	import { onMount } from 'svelte';
 
 	export let controls;
 
@@ -27,12 +28,26 @@
 			controls.search(query);
 		}
 	};
+
+	let searchInput;
+
+	onMount(() => searchInput.focus());
 </script>
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
 	<div class="flex flex-col gap-4 p-4">
 		<form on:submit={onSubmit} class="flex flex-row">
-			<input name="query" class="p-2 w-full text-black rounded" type="text" placeholder="Search" />
+			<input
+				bind:this={searchInput}
+				name="query"
+				class="p-2 w-full text-black rounded"
+				type="text"
+				placeholder="Search"
+				spellcheck="false"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+			/>
 			<Button type="submit"><Icon src={MagnifyingGlass} class="size-6" solid /></Button>
 		</form>
 
@@ -73,7 +88,7 @@
 			{#each $searchResults.artists as artist}
 				<ListItem>
 					<button
-						class="p-4 w-full text-xl text-left truncate"
+						class="p-4 w-full text-lg text-left truncate"
 						on:click|stopPropagation={() => {
 							$artistAlbums.albums = [];
 							$artistAlbums.id = null;
@@ -101,7 +116,7 @@
 			{#each $searchResults.playlists as playlist}
 				<ListItem>
 					<button
-						class="p-4 w-full text-base text-left"
+						class="p-4 w-full text-lg text-left truncate"
 						on:click|stopPropagation={() => {
 							$playlistTracks.tracks = [];
 							$playlistTracks.id = null;
@@ -110,7 +125,7 @@
 							showPlaylistTracks.set(true);
 						}}
 					>
-						<span>{playlist.title}</span>
+						{playlist.title}
 					</button>
 				</ListItem>
 			{/each}

diff --git a/www/src/routes/+page.svelte b/www/src/routes/+page.svelte
@@ -44,8 +44,8 @@
 	<title>hifi.rs: {$currentStatus}</title>
 </svelte:head>
 
-<div class="flex flex-col justify-between h-full">
-	<div class="flex overflow-auto flex-col justify-between my-auto h-full">
+<div class="flex flex-col justify-between h-full pt-safe px-safe">
+	<div class="flex overflow-hidden flex-col justify-between h-full">
 		{#if $activePage == 'nowPlaying' && $currentTrack}
 			<NowPlaying {controls} />
 		{/if}