fix(web): update search filters when edited in results

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

@@ -62,8 +62,10 @@
   let searchHistory = $state<SearchHistorySection>();
 
   let activeFilter: string = $state('type');
-  let people: Promise<PersonResponseDto[]> | undefined = $state(undefined);
-  let tags: Promise<TagResponseDto[]> | undefined = $state(undefined);
+  let peoplePromise: Promise<PersonResponseDto[]> | undefined = $state(undefined);
+  let people: PersonResponseDto[] | undefined = $state(undefined);
+  let tagsPromise: Promise<TagResponseDto[]> | undefined = $state(undefined);
+  let tags: TagResponseDto[] | undefined = $state(undefined);
 
   let typeTitle: string | undefined = $derived(searchTypeTitle(searchManager.filter.queryType));
   let peopleTitle: string | undefined = $state(undefined);
@@ -82,7 +84,7 @@
     ),
   );
   let tagsTitle: string | undefined = $state(undefined);
-  let mediaTitle: string | undefined = $state(searchMediaTitle(searchManager.filter.mediaType));
+  let mediaTitle: string | undefined = $derived(searchMediaTitle(searchManager.filter.mediaType));
 
   let filters = [
     {
@@ -136,28 +138,30 @@
 
   const clear = () => {
     searchManager.reset();
-    peopleTitle = tagsTitle = mediaTitle = undefined;
+    peopleTitle = tagsTitle = undefined;
   };
 
   onMount(() => {
-    if (searchManager.filter.personIds.size > 0) {
-      if (!people) {
-        people = getPeople(searchManager.filter.personIds);
-      }
-
-      void people.then((res) => {
-        peopleTitle = searchPeopleTitle(res, searchManager.filter.personIds);
-      });
+    if (searchManager.filter.personIds.size > 0 && !peoplePromise) {
+      peoplePromise = getPeople(searchManager.filter.personIds);
+      void peoplePromise.then((res) => (people = res));
     }
 
-    if (searchManager.filter.tagIds?.size) {
-      if (!tags) {
-        tags = getAllTags();
-      }
+    if (searchManager.filter.tagIds?.size && !tagsPromise) {
+      tagsPromise = getAllTags();
+      void tagsPromise.then((res) => (tags = res));
+    }
+  });
 
-      void tags.then((res) => {
-        tagsTitle = searchTagsTitle(res, searchManager.filter.tagIds!);
-      });
+  $effect(() => {
+    if (people) {
+      peopleTitle = searchPeopleTitle(people, searchManager.filter.personIds);
+    }
+  });
+
+  $effect(() => {
+    if (tags) {
+      tagsTitle = searchTagsTitle(tags, searchManager.filter.tagIds!);
     }
   });
 
@@ -222,15 +226,15 @@
           {#if activeFilter === 'type'}
             <SearchTextSection />
           {:else if activeFilter === 'people'}
-            <SearchPeopleSection bind:title={peopleTitle} parentPromise={people} />
+            <SearchPeopleSection bind:title={peopleTitle} parentPromise={peoplePromise} />
           {:else if activeFilter === 'date'}
             <SearchDateSection />
           {:else if activeFilter === 'places'}
             <SearchLocationSection />
           {:else if activeFilter === 'tags'}
-            <SearchTagsSection bind:title={tagsTitle} parentPromise={tags} />
+            <SearchTagsSection bind:title={tagsTitle} parentPromise={tagsPromise} />
           {:else if activeFilter === 'media'}
-            <SearchMediaSection bind:title={mediaTitle} />
+            <SearchMediaSection />
           {/if}
         </div>
       {/if}

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

@@ -1,23 +1,11 @@
 <script lang="ts">
-  import { searchMediaTitle } from './search-bar-utils';
   import { MediaType } from '$lib/constants';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { searchManager } from '$lib/managers/search-manager.svelte';
   import SearchButton from './SearchButton.svelte';
 
-  interface Props {
-    title: string | undefined;
-  }
-
-  // eslint-disable-next-line no-useless-assignment
-  let { title = $bindable() }: Props = $props();
   let filteredMedia = $derived(searchManager.filter.mediaType);
-
-  const setMedia = (media: MediaType) => {
-    searchManager.filter.mediaType = media;
-    title = searchMediaTitle(media);
-  };
 </script>
 
 <div id="media-type-selection">
@@ -25,13 +13,25 @@
     <Text class="pb-5">{$t('media_type_description')}</Text>
 
     <div class="flex flex-wrap gap-2">
-      <SearchButton checked active={filteredMedia === MediaType.All} onclick={() => setMedia(MediaType.All)}>
+      <SearchButton
+        checked
+        active={filteredMedia === MediaType.All}
+        onclick={() => (searchManager.filter.mediaType = MediaType.All)}
+      >
         {$t('all')}
       </SearchButton>
-      <SearchButton checked active={filteredMedia === MediaType.Image} onclick={() => setMedia(MediaType.Image)}>
+      <SearchButton
+        checked
+        active={filteredMedia === MediaType.Image}
+        onclick={() => (searchManager.filter.mediaType = MediaType.Image)}
+      >
         {$t('image')}
       </SearchButton>
-      <SearchButton checked active={filteredMedia === MediaType.Video} onclick={() => setMedia(MediaType.Video)}>
+      <SearchButton
+        checked
+        active={filteredMedia === MediaType.Video}
+        onclick={() => (searchManager.filter.mediaType = MediaType.Video)}
+      >
         {$t('video')}
       </SearchButton>
     </div>

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -245,6 +245,7 @@
     delete terms[key];
     assetMultiSelectManager.clear();
     void goto(Route.search(terms));
+    searchManager.setQuery(terms);
   }
 
   onMount(() => searchManager.setQuery(terms));