feat(web): search albums (#7322)

* feat: search albums

* pr feedback

* fix: comparison

* pr feedback

* simplify

* chore: more compact album padding

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

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

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { mdiClose, mdiMagnify } from '@mdi/js';
-  import Icon from '../elements/icon.svelte';
+  import Icon from './icon.svelte';
   import { createEventDispatcher } from 'svelte';
   import type { SearchOptions } from '$lib/utils/dipatch';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let name: string;
-  export let isSearchingPeople: boolean;
+  export let isSearching: boolean;
+  export let placeholder: string;
 
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
 
@@ -27,11 +28,11 @@
     autofocus
     class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
     type="text"
-    placeholder="Search names"
+    {placeholder}
     bind:value={name}
     on:input={() => dispatch('search', { force: false })}
   />
-  {#if isSearchingPeople}
+  {#if isSearching}
     <div class="flex place-items-center">
       <LoadingSpinner />
     </div>

web/src/lib/components/faces-page/people-list.svelte

@@ -5,7 +5,7 @@
   import { searchPerson, type PersonResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import FaceThumbnail from './face-thumbnail.svelte';
-  import SearchBar from './search-bar.svelte';
+  import SearchBar from '../elements/search-bar.svelte';
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
@@ -55,7 +55,8 @@
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
   <SearchBar
     bind:name
-    {isSearchingPeople}
+    isSearching={isSearchingPeople}
+    placeholder="Search people"
     on:reset={() => {
       people = peopleCopy;
     }}

web/src/lib/components/layouts/user-page-layout.svelte

@@ -11,7 +11,7 @@
   export let scrollbar = true;
   export let admin = false;
 
-  $: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden';
+  $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
   $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
 </script>