From cda4a2a5fc3b030e259fc7fd96a779fef4a2b32f Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 18 Mar 2026 09:32:54 -0400
Subject: [PATCH] fix: filter after searching by asset id (#26994)

* fix: filter after searching by asset id

* Update web/src/lib/modals/SearchFilterModal.svelte

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
---
 .../search-bar/search-bar.svelte              |   4 +-
 .../search-bar/search-camera-section.svelte   |  13 +-
 .../search-bar/search-date-section.svelte     |  13 +-
 .../search-bar/search-display-section.svelte  |  14 +-
 .../search-bar/search-location-section.svelte |  13 +-
 web/src/lib/modals/SearchFilterModal.svelte   | 127 ++++++++----------
 web/src/lib/types.ts                          |  41 ++++++
 7 files changed, 111 insertions(+), 114 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 6a84acff44..a5fae6c3f3 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -14,11 +14,11 @@
   import { t } from 'svelte-i18n';
   import SearchHistoryBox from './search-history-box.svelte';
 
-  interface Props {
+  type Props = {
     value?: string;
     grayTheme: boolean;
     searchQuery?: MetadataSearchDto | SmartSearchDto;
-  }
+  };
 
   let { value = $bindable(''), grayTheme, searchQuery = {} }: Props = $props();
 
diff --git a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
index 098471c1d2..34f336a4ed 100644
--- a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
@@ -1,21 +1,14 @@
-<script lang="ts" module>
-  export interface SearchCameraFilter {
-    make?: string;
-    model?: string;
-    lensModel?: string;
-  }
-</script>
-
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import type { SearchCameraFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     filters: SearchCameraFilter;
-  }
+  };
 
   let { filters = $bindable() }: Props = $props();
 
diff --git a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
index eaf11de4bd..6aae917438 100644
--- a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
@@ -1,18 +1,11 @@
-<script lang="ts" module>
-  export interface SearchDateFilter {
-    takenBefore?: DateTime;
-    takenAfter?: DateTime;
-  }
-</script>
-
 <script lang="ts">
+  import type { SearchDateFilter } from '$lib/types';
   import { DatePicker, Text } from '@immich/ui';
-  import type { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     filters: SearchDateFilter;
-  }
+  };
 
   let { filters = $bindable() }: Props = $props();
 
diff --git a/web/src/lib/components/shared-components/search-bar/search-display-section.svelte b/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
index 7097ab7a8b..68aee7a133 100644
--- a/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
@@ -1,19 +1,11 @@
-<script lang="ts" module>
-  export interface SearchDisplayFilters {
-    isNotInAlbum: boolean;
-    isArchive: boolean;
-    isFavorite: boolean;
-  }
-</script>
-
 <script lang="ts">
+  import type { SearchDisplayFilters } from '$lib/types';
   import { Checkbox, Label, Text } from '@immich/ui';
-
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     filters: SearchDisplayFilters;
-  }
+  };
 
   let { filters = $bindable() }: Props = $props();
 </script>
diff --git a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
index a85626c4cd..c130217b09 100644
--- a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
@@ -1,22 +1,15 @@
-<script lang="ts" module>
-  export interface SearchLocationFilter {
-    country?: string;
-    state?: string;
-    city?: string;
-  }
-</script>
-
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import type { SearchLocationFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     filters: SearchLocationFilter;
-  }
+  };
 
   let { filters = $bindable() }: Props = $props();
 
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
index a372207bc0..7d5df86b2f 100644
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ b/web/src/lib/modals/SearchFilterModal.svelte
@@ -1,28 +1,5 @@
-<script lang="ts" module>
-  import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
-  import type { SearchDateFilter } from '../components/shared-components/search-bar/search-date-section.svelte';
-  import type { SearchDisplayFilters } from '../components/shared-components/search-bar/search-display-section.svelte';
-  import type { SearchLocationFilter } from '../components/shared-components/search-bar/search-location-section.svelte';
-
-  export type SearchFilter = {
-    query: string;
-    ocr?: string;
-    queryType: 'smart' | 'metadata' | 'description' | 'ocr';
-    personIds: SvelteSet<string>;
-    tagIds: SvelteSet<string> | null;
-    location: SearchLocationFilter;
-    camera: SearchCameraFilter;
-    date: SearchDateFilter;
-    display: SearchDisplayFilters;
-    mediaType: MediaType;
-    rating?: number | null;
-  };
-</script>
-
 <script lang="ts">
-  import SearchCameraSection, {
-    type SearchCameraFilter,
-  } from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
+  import SearchCameraSection from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
   import SearchDateSection from '$lib/components/shared-components/search-bar/search-date-section.svelte';
   import SearchDisplaySection from '$lib/components/shared-components/search-bar/search-display-section.svelte';
   import SearchLocationSection from '$lib/components/shared-components/search-bar/search-location-section.svelte';
@@ -31,7 +8,9 @@
   import SearchRatingsSection from '$lib/components/shared-components/search-bar/search-ratings-section.svelte';
   import SearchTagsSection from '$lib/components/shared-components/search-bar/search-tags-section.svelte';
   import SearchTextSection from '$lib/components/shared-components/search-bar/search-text-section.svelte';
+  import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
   import { preferences } from '$lib/stores/user.store';
+  import type { SearchFilter } from '$lib/types';
   import { parseUtcDate } from '$lib/utils/date-time';
   import { generateId } from '$lib/utils/generate-id';
   import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
@@ -41,10 +20,10 @@
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
 
-  interface Props {
+  type Props = {
     searchQuery: MetadataSearchDto | SmartSearchDto;
     onClose: (search?: SmartSearchDto | MetadataSearchDto) => void;
-  }
+  };
 
   let { searchQuery, onClose }: Props = $props();
 
@@ -66,52 +45,57 @@
     return validQueryTypes.has(storedQueryType) ? storedQueryType : QueryType.SMART;
   }
 
-  let query = '';
-  if ('query' in searchQuery && searchQuery.query) {
-    query = searchQuery.query;
-  }
-  if ('originalFileName' in searchQuery && searchQuery.originalFileName) {
-    query = searchQuery.originalFileName;
-  }
+  const asFilter = (searchQuery: SmartSearchDto | MetadataSearchDto): SearchFilter => {
+    let query = '';
+    if ('query' in searchQuery && searchQuery.query) {
+      query = searchQuery.query;
+    }
+    if ('originalFileName' in searchQuery && searchQuery.originalFileName) {
+      query = searchQuery.originalFileName;
+    }
 
-  let filter: SearchFilter = $state({
-    query,
-    ocr: searchQuery.ocr,
-    queryType: defaultQueryType(),
-    personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
-    tagIds:
-      'tagIds' in searchQuery
-        ? searchQuery.tagIds === null
-          ? null
-          : new SvelteSet(searchQuery.tagIds)
-        : new SvelteSet(),
-    location: {
-      country: withNullAsUndefined(searchQuery.country),
-      state: withNullAsUndefined(searchQuery.state),
-      city: withNullAsUndefined(searchQuery.city),
-    },
-    camera: {
-      make: withNullAsUndefined(searchQuery.make),
-      model: withNullAsUndefined(searchQuery.model),
-      lensModel: withNullAsUndefined(searchQuery.lensModel),
-    },
-    date: {
-      takenAfter: searchQuery.takenAfter ? toStartOfDayDate(searchQuery.takenAfter) : undefined,
-      takenBefore: searchQuery.takenBefore ? toStartOfDayDate(searchQuery.takenBefore) : undefined,
-    },
-    display: {
-      isArchive: searchQuery.visibility === AssetVisibility.Archive,
-      isFavorite: searchQuery.isFavorite ?? false,
-      isNotInAlbum: 'isNotInAlbum' in searchQuery ? (searchQuery.isNotInAlbum ?? false) : false,
-    },
-    mediaType:
-      searchQuery.type === AssetTypeEnum.Image
-        ? MediaType.Image
-        : searchQuery.type === AssetTypeEnum.Video
-          ? MediaType.Video
-          : MediaType.All,
-    rating: searchQuery.rating,
-  });
+    return {
+      query,
+      ocr: searchQuery.ocr,
+      queryType: defaultQueryType(),
+      queryAssetId: 'queryAssetId' in searchQuery ? searchQuery.queryAssetId : undefined,
+      personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
+      tagIds:
+        'tagIds' in searchQuery
+          ? searchQuery.tagIds === null
+            ? null
+            : new SvelteSet(searchQuery.tagIds)
+          : new SvelteSet(),
+      location: {
+        country: withNullAsUndefined(searchQuery.country),
+        state: withNullAsUndefined(searchQuery.state),
+        city: withNullAsUndefined(searchQuery.city),
+      },
+      camera: {
+        make: withNullAsUndefined(searchQuery.make),
+        model: withNullAsUndefined(searchQuery.model),
+        lensModel: withNullAsUndefined(searchQuery.lensModel),
+      },
+      date: {
+        takenAfter: searchQuery.takenAfter ? toStartOfDayDate(searchQuery.takenAfter) : undefined,
+        takenBefore: searchQuery.takenBefore ? toStartOfDayDate(searchQuery.takenBefore) : undefined,
+      },
+      display: {
+        isArchive: searchQuery.visibility === AssetVisibility.Archive,
+        isFavorite: searchQuery.isFavorite ?? false,
+        isNotInAlbum: 'isNotInAlbum' in searchQuery ? (searchQuery.isNotInAlbum ?? false) : false,
+      },
+      mediaType:
+        searchQuery.type === AssetTypeEnum.Image
+          ? MediaType.Image
+          : searchQuery.type === AssetTypeEnum.Video
+            ? MediaType.Video
+            : MediaType.All,
+      rating: searchQuery.rating,
+    };
+  };
+
+  let filter: SearchFilter = $state(asFilter(searchQuery));
 
   const resetForm = () => {
     filter = {
@@ -145,6 +129,7 @@
 
     let payload: SmartSearchDto | MetadataSearchDto = {
       query: filter.queryType === 'smart' ? query : undefined,
+      queryAssetId: filter.queryAssetId || undefined,
       ocr: filter.queryType === 'ocr' ? query : undefined,
       originalFileName: filter.queryType === 'metadata' ? query : undefined,
       description: filter.queryType === 'description' ? query : undefined,
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 75d3a3ac40..25524f1eea 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -1,6 +1,9 @@
+import { MediaType } from '$lib/constants';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
+import type { DateTime } from 'luxon';
+import type { SvelteSet } from 'svelte/reactivity';
 
 export interface ReleaseEvent {
   isAvailable: boolean;
@@ -48,3 +51,41 @@ export type AssetControlContext = {
   getOwnedAssets: () => TimelineAsset[]; // Only assets owned by the user
   clearSelect: () => void;
 };
+
+export type SearchCameraFilter = {
+  make?: string;
+  model?: string;
+  lensModel?: string;
+};
+
+export type SearchDateFilter = {
+  takenBefore?: DateTime;
+  takenAfter?: DateTime;
+};
+
+export type SearchDisplayFilters = {
+  isNotInAlbum: boolean;
+  isArchive: boolean;
+  isFavorite: boolean;
+};
+
+export type SearchLocationFilter = {
+  country?: string;
+  state?: string;
+  city?: string;
+};
+
+export type SearchFilter = {
+  query: string;
+  ocr?: string;
+  queryType: 'smart' | 'metadata' | 'description' | 'ocr';
+  personIds: SvelteSet<string>;
+  tagIds: SvelteSet<string> | null;
+  location: SearchLocationFilter;
+  queryAssetId?: string;
+  camera: SearchCameraFilter;
+  date: SearchDateFilter;
+  display: SearchDisplayFilters;
+  mediaType: MediaType;
+  rating?: number | null;
+};