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/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>