feat: filter users on share (#27732)

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

web/src/lib/modals/AlbumAddUsersModal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { initInput } from '$lib/actions/focus';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { handleAddUsersToAlbum } from '$lib/services/album.service';
+  import { normalizeSearchString } from '$lib/utils/string-utils';
   import { searchUsers, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
   import { FormModal, ListButton, LoadingSpinner, Stack, Text } from '@immich/ui';
   import { onMount } from 'svelte';
@@ -12,11 +14,18 @@
     onClose: () => void;
   };
 
+  let search = $state('');
+
   const { album, onClose }: Props = $props();
 
   let users: UserResponseDto[] = $state([]);
   const excludedUserIds = $derived([album.ownerId, ...album.albumUsers.map(({ user: { id } }) => id)]);
-  const filteredUsers = $derived(users.filter(({ id }) => !excludedUserIds.includes(id)));
+  const filteredUsers = $derived(
+    users.filter(
+      (user) =>
+        !excludedUserIds.includes(user.id) && normalizeSearchString(user.name).includes(normalizeSearchString(search)),
+    ),
+  );
   const selectedUsers = new SvelteMap<string, UserResponseDto>();
   let loading = $state(true);
 
@@ -55,6 +64,12 @@
     </div>
   {:else}
     <Stack>
+      <input
+        class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
+        placeholder={$t('search')}
+        bind:value={search}
+        use:initInput
+      />
       {#each filteredUsers as user (user.id)}
         <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
           <UserAvatar {user} size="md" />