feat(web): improve search bar + add to search page (#1957)

* feat(web): improve search bar + add to search page

* fix back button routing

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -56,7 +56,9 @@
 			<slot name="leading" />
 		</div>
 
-		<div class="flex place-items-center gap-1 mr-4 ">
+		<slot />
+
+		<div class="flex place-items-center gap-1 mr-4">
 			<slot name="trailing" />
 		</div>
 	</div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -9,9 +9,9 @@
 	import { AppRoute } from '../../../constants';
 	import AccountInfoPanel from './account-info-panel.svelte';
 	import ImmichLogo from '../immich-logo.svelte';
+	import SearchBar from '../search-bar/search-bar.svelte';
 	export let user: UserResponseDto;
 	export let shouldShowUploadButton = true;
-	export let term = '';
 
 	let shouldShowAccountInfo = false;
 
@@ -36,100 +36,94 @@
 
 		goto(data.redirectUri || '/auth/login?autoLaunch=0');
 	};
-
-	const onSearch = () => {
-		goto(`/search?q=${term}`);
-	};
 </script>
 
 <section
 	id="dashboard-navbar"
 	class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
 >
-	<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
+	<div
+		class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
+	>
 		<a
 			data-sveltekit-preload-data="hover"
-			class="flex gap-2 place-items-center hover:cursor-pointer"
-			href="/photos"
+			class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
+			href={AppRoute.PHOTOS}
 		>
 			<ImmichLogo height="35" width="35" />
 			<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
 				IMMICH
 			</h1>
 		</a>
-		<form class="flex-1 ml-24" autocomplete="off" on:submit|preventDefault={onSearch}>
-			<input
-				type="text"
-				name="search"
-				class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray  px-8 py-4"
-				placeholder="Search"
-				required
-				bind:value={term}
-			/>
-		</form>
-		<section class="flex gap-4 place-items-center">
-			<ThemeButton />
+		<div class="flex justify-between gap-16 pr-6">
+			<div class="w-full max-w-5xl flex-1 pl-4">
+				<SearchBar grayTheme={true} />
+			</div>
 
-			{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
-				<button
-					in:fly={{ x: 50, duration: 250 }}
-					on:click={() => dispatch('uploadClicked')}
-					class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
-				>
-					<TrayArrowUp size="20" />
-					<span> Upload </span>
-				</button>
-			{/if}
+			<section class="flex gap-4 place-items-center">
+				<ThemeButton />
 
-			{#if user.isAdmin}
-				<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
+				{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
 					<button
-						class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5  dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
-							$page.url.pathname.includes('/admin') &&
-							'text-immich-primary dark:immich-dark-primary underline'
-						}`}>Administration</button
+						in:fly={{ x: 50, duration: 250 }}
+						on:click={() => dispatch('uploadClicked')}
+						class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
 					>
-				</a>
-			{/if}
+						<TrayArrowUp size="20" />
+						<span> Upload </span>
+					</button>
+				{/if}
 
-			<div
-				on:mouseover={() => (shouldShowAccountInfo = true)}
-				on:focus={() => (shouldShowAccountInfo = true)}
-				on:mouseleave={() => (shouldShowAccountInfo = false)}
-				on:click={showAccountInfoPanel}
-				on:keydown={showAccountInfoPanel}
-			>
-				<button
-					class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
-				>
-					{#if user.profileImagePath}
-						<img
-							transition:fade={{ duration: 100 }}
-							class:hidden={showProfilePictureFallback}
-							src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
-							alt="profile-img"
-							class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
-							draggable="false"
-							on:load={() => (showProfilePictureFallback = false)}
-						/>
-					{/if}
-					{#if showProfilePictureFallback}
-						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
-					{/if}
-				</button>
+				{#if user.isAdmin}
+					<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
+						<button
+							class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5  dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
+								$page.url.pathname.includes('/admin') &&
+								'text-immich-primary dark:immich-dark-primary underline'
+							}`}>Administration</button
+						>
+					</a>
+				{/if}
 
-				{#if shouldShowAccountInfo}
-					<div
-						in:fade={{ delay: 500, duration: 150 }}
-						out:fade={{ delay: 200, duration: 150 }}
-						class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
+				<div
+					on:mouseover={() => (shouldShowAccountInfo = true)}
+					on:focus={() => (shouldShowAccountInfo = true)}
+					on:mouseleave={() => (shouldShowAccountInfo = false)}
+					on:click={showAccountInfoPanel}
+					on:keydown={showAccountInfoPanel}
+				>
+					<button
+						class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
 					>
-						<p>{user.firstName} {user.lastName}</p>
-						<p>{user.email}</p>
-					</div>
-				{/if}
-			</div>
-		</section>
+						{#if user.profileImagePath}
+							<img
+								transition:fade={{ duration: 100 }}
+								class:hidden={showProfilePictureFallback}
+								src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+								alt="profile-img"
+								class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
+								draggable="false"
+								on:load={() => (showProfilePictureFallback = false)}
+							/>
+						{/if}
+						{#if showProfilePictureFallback}
+							{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+						{/if}
+					</button>
+
+					{#if shouldShowAccountInfo}
+						<div
+							in:fade={{ delay: 500, duration: 150 }}
+							out:fade={{ delay: 200, duration: 150 }}
+							class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
+						>
+							<p>{user.firstName} {user.lastName}</p>
+							<p>{user.email}</p>
+						</div>
+					{/if}
+				</div>
+			</section>
+		</div>
 	</div>
 
 	{#if shouldShowAccountInfoPanel}

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { AppRoute } from '$lib/constants';
+	import Magnify from 'svelte-material-icons/Magnify.svelte';
+	import Close from 'svelte-material-icons/Close.svelte';
+	import { goto } from '$app/navigation';
+
+	export let value = '';
+	export let grayTheme: boolean;
+
+	// Replace state to immediately go back to previous page, instead
+	// of having to go through every search query.
+	export let replaceHistoryState = false;
+
+	$: showClearIcon = value.length > 0;
+
+	function onSearch() {
+		const params = new URLSearchParams({
+			q: value
+		});
+
+		goto(`${AppRoute.SEARCH}?${params}`, { replaceState: replaceHistoryState });
+	}
+</script>
+
+<form
+	autocomplete="off"
+	class="relative text-base"
+	action={AppRoute.SEARCH}
+	on:reset={() => (value = '')}
+	on:submit|preventDefault={onSearch}
+>
+	<label>
+		<div class="absolute inset-y-0 left-0 flex items-center pl-6">
+			<div class="pointer-events-none dark:text-immich-dark-fg/75">
+				<Magnify size="1.5em" />
+			</div>
+		</div>
+		<input
+			type="text"
+			name="q"
+			class="w-full rounded-3xl bg-gray-200 {grayTheme
+				? 'dark:bg-immich-dark-gray'
+				: 'dark:bg-immich-dark-bg'} text-immich-fg/75 dark:text-immich-dark-fg px-14 py-4"
+			placeholder="Search"
+			required
+			bind:value
+		/>
+	</label>
+	{#if showClearIcon}
+		<div class="absolute inset-y-0 right-0 flex items-center pr-4">
+			<button
+				type="reset"
+				class="dark:text-immich-dark-fg/75 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 rounded-full p-2 active:bg-immich-primary/10 dark:active:bg-immich-dark-primary/[.35]"
+			>
+				<Close size="1.5em" />
+			</button>
+		</div>
+	{/if}
+</form>

web/src/lib/constants.ts

@@ -12,5 +12,7 @@ export enum AppRoute {
 	PHOTOS = '/photos',
 	EXPLORE = '/explore',
 	SHARING = '/sharing',
+	SEARCH = '/search',
+
 	AUTH_LOGIN = '/auth/login'
 }

web/src/routes/(user)/search/+page.svelte

@@ -5,44 +5,33 @@
 	import type { PageData } from './$types';
 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
 	import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
-	import { afterNavigate, goto } from '$app/navigation';
+	import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
 
 	export let data: PageData;
-	const term = $page.url.searchParams.get('q') || data.term || '';
-
-	let goBackRoute = '/explore';
-	afterNavigate((r) => {
-		if (r.from) {
-			goBackRoute = r.from.url.href;
-		}
-	});
+	$: term = $page.url.searchParams.get('q') || data.term || '';
 </script>
 
 <section>
-	<ControlAppBar on:close-button-click={() => goto(goBackRoute)} backIcon={ArrowLeft}>
-		<svelte:fragment slot="leading">
-			<p class="text-xl capitalize">
-				Search
-				{#if term}
-					- {term}
-				{/if}
-			</p>
-		</svelte:fragment>
+	<ControlAppBar on:close-button-click={() => history.back()} backIcon={ArrowLeft}>
+		<div class="w-full max-w-2xl flex-1 pl-4">
+			<SearchBar grayTheme={false} value={term} replaceHistoryState={true} />
+		</div>
 	</ControlAppBar>
 </section>
 
-<section class="relative pt-[72px] h-screen bg-immich-bg  dark:bg-immich-dark-bg">
+<section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
 	<section class="overflow-y-auto relative immich-scrollbar">
-		<section
-			id="search-content"
-			class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
-		>
-			{#if data.results?.assets?.items.length != 0}
-				<GalleryViewer assets={data.results.assets.items} />
+		<section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+			{#if data.results?.assets?.items.length > 0}
+				<div class="pl-4">
+					<GalleryViewer assets={data.results.assets.items} />
+				</div>
 			{:else}
-				<div class="w-full text-center dark:text-white ">
-					<div class="mt-60 flex flex-col place-content-center place-items-center">
-						<ImageOffOutline size="56" />
+				<div
+					class="flex items-center place-content-center w-full min-h-[calc(100vh_-_11rem)] dark:text-white"
+				>
+					<div class="flex flex-col content-center items-center text-center">
+						<ImageOffOutline size="3.5em" />
 						<p class="font-medium text-3xl mt-5">No results</p>
 						<p class="text-base font-normal">Try a synonym or more general keyword</p>
 					</div>