feat: widen search and label the upload button

frontend/src/lib/components/layout/search-form.svelte

@@ -59,14 +59,14 @@
 
 <svelte:document onkeydown={handleKeydown} />
 
-<form>
+<form class="min-w-0 flex-1">
-	<div class="flex w-full max-w-xs flex-col gap-6">
+	<div class="flex w-full max-w-xl flex-col">
 		<InputGroup.Root>
-			<InputGroup.Input placeholder="Search..." onclick={handleClick} />
+			<InputGroup.Input placeholder="Search books..." onclick={handleClick} />
 			<InputGroup.Addon>
 				<SearchIcon />
 			</InputGroup.Addon>
-			<InputGroup.Addon align="inline-end">
+			<InputGroup.Addon align="inline-end" class="hidden sm:flex">
 				<Kbd.Root>Ctrl</Kbd.Root>+
 				<Kbd.Root>k</Kbd.Root>
 			</InputGroup.Addon>
@@ -108,7 +108,7 @@
 									class="w-24 rounded object-cover shadow-lg"
 								/>
 								<div class="flex-top flex flex-col">
-									<span class="text-lg font-medium">{book.title}</span>
+									<span class="font-serif text-lg">{book.title}</span>
 									<span class=" text-md">{book.subtitle}</span>
 									{#if book.authors.length > 0}
 										<span class="line-clamp-1 w-full text-sm text-muted-foreground">

frontend/src/lib/components/layout/site-header.svelte

@@ -11,21 +11,18 @@
 </script>
 
 <header class="sticky top-0 z-50 flex w-full items-center border-b bg-background">
-	<div class="my-2 flex h-(--header-height) w-full items-center gap-2 px-4">
+	<div class="my-2 flex h-(--header-height) w-full items-center gap-3 px-4">
-		<div class="flex w-full justify-between">
+		<Button class="size-8 shrink-0" variant="ghost" size="icon" onclick={sidebar.toggle}>
-			<div class="flex gap-3">
+			<SidebarIcon />
-				<Button class="size-8" variant="ghost" size="icon" onclick={sidebar.toggle}>
+		</Button>
-					<SidebarIcon />
+		<Separator orientation="vertical" class="mr-1 h-6" />
-				</Button>
-				<Separator orientation="vertical" class="mr-2 h-(--header-height) border" />
-			</div>
 
-			<SearchForm />
+		<!-- Search takes the free space rather than sitting at a fixed width -->
+		<SearchForm />
 
-			<div class="flex w-24 items-center gap-4">
+		<div class="ml-auto flex shrink-0 items-center gap-2">
-				<UploadButton />
+			<UploadButton />
-				<ThemeToggle />
+			<ThemeToggle />
-			</div>
 		</div>
 	</div>
 </header>

frontend/src/lib/components/layout/upload-button.svelte

@@ -1,29 +1,16 @@
 <script>
 	import Upload from '@lucide/svelte/icons/upload';
-	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index';
 	import BooksUpload from '$lib/components/forms/books-upload.svelte';
-	import { goto } from '$app/navigation';
 	import { getBookOperationsState } from '$lib/state/bookOperations.svelte';
 
 	const bookOps = getBookOperationsState();
 </script>
 
-<Tooltip.Provider>
+<!-- Labelled, so no tooltip: the button already says what it does. -->
-	<Tooltip.Root ignoreNonKeyboardFocus>
+<Button onclick={() => (bookOps.uploadDialogOpen = true)}>
-		<Tooltip.Trigger
+	<Upload class="size-4" />
-			onclick={async () => {
+	Upload
-				bookOps.uploadDialogOpen = true;
+</Button>
-			}}
-			class="{buttonVariants({ variant: 'ghost', size: 'icon' })} scale-110"
-		>
-			<Upload class="scale-110" />
-		</Tooltip.Trigger>
-
-		<Tooltip.Content>
-			<p>Upload Book</p>
-		</Tooltip.Content>
-	</Tooltip.Root>
-</Tooltip.Provider>
 
 <BooksUpload bind:open={bookOps.uploadDialogOpen} />