+
{$t('search_type_description')}
+
{#if featureFlagsManager.value.smartSearch}
-
+ setType('smart')}>
+ {$t('context')}
+
{/if}
-
-
-
+ setType('metadata')}>
+ {getSearchTypeTitle('metadata')}
+
+ setType('description')}>
+ {getSearchTypeTitle('description')}
+
+ setType('fullPath')}>
+ {getSearchTypeTitle('fullPath')}
+
{#if featureFlagsManager.value.ocr}
-
+ setType('ocr')}>
+ {getSearchTypeTitle('ocr')}
+
{/if}
-
- {#if queryType === 'smart'}
-
-
-
- {:else if queryType === 'metadata'}
-
-
-
- {:else if queryType === 'description'}
-
-
-
- {:else if queryType === 'fullPath'}
-
-
-
- {:else if queryType === 'ocr'}
-
-
-
- {/if}
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts b/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts
new file mode 100644
index 00000000000000..4dd99edbba12a2
--- /dev/null
+++ b/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts
@@ -0,0 +1,157 @@
+import { getAllPeople, type PersonResponseDto, type TagResponseDto } from '@immich/sdk';
+import { DateTime } from 'luxon';
+import { t } from 'svelte-i18n';
+import type { SvelteSet } from 'svelte/reactivity';
+import { get } from 'svelte/store';
+import { MediaType } from '$lib/constants';
+import { handleError } from '$lib/utils/handle-error';
+
+export enum SearchDatePreset {
+ ThisYear,
+ LastYear,
+ Last30Days,
+ Custom,
+}
+
+export const getSearchDatePreset = (after: DateTime | undefined, before: DateTime | undefined) => {
+ if (!after && !before) {
+ return;
+ }
+
+ const start = after?.toMillis();
+ const end = before?.endOf('day').toMillis();
+
+ if (start === DateTime.utc().startOf('year').toMillis() && end === DateTime.utc().endOf('year').toMillis()) {
+ return SearchDatePreset.ThisYear;
+ }
+
+ if (
+ start === DateTime.utc().minus({ years: 1 }).startOf('year').toMillis() &&
+ end === DateTime.utc().minus({ years: 1 }).endOf('year').toMillis()
+ ) {
+ return SearchDatePreset.LastYear;
+ }
+
+ if (
+ start === DateTime.utc().minus({ days: 30 }).startOf('day').toMillis() &&
+ end === DateTime.utc().endOf('day').toMillis()
+ ) {
+ return SearchDatePreset.Last30Days;
+ }
+
+ return SearchDatePreset.Custom;
+};
+
+export const getSearchDateRange = (after: DateTime | undefined, before: DateTime | undefined) => {
+ const $t = get(t);
+ const start = after?.toLocaleString(DateTime.DATE_MED);
+ const end = before?.toLocaleString(DateTime.DATE_MED);
+ return start && end ? $t('search_filter_date_interval', { values: { start, end } }) : (start ?? end);
+};
+
+export const getSearchDateTitle = (
+ preset: SearchDatePreset | undefined,
+ before: DateTime | undefined,
+ after: DateTime | undefined,
+): string | undefined => {
+ const $t = get(t);
+ switch (preset) {
+ case SearchDatePreset.ThisYear: {
+ return $t('search_filter_date_this_year');
+ }
+ case SearchDatePreset.LastYear: {
+ return $t('search_filter_date_last_year');
+ }
+ case SearchDatePreset.Last30Days: {
+ return $t('search_filter_date_last_30_days');
+ }
+ case SearchDatePreset.Custom: {
+ return getSearchDateRange(before, after);
+ }
+ default: {
+ return;
+ }
+ }
+};
+
+export const getSearchTypeTitle = (type: string) => {
+ const $t = get(t);
+ switch (type) {
+ case 'metadata': {
+ return $t('file_name_text');
+ }
+ case 'description': {
+ return $t('description');
+ }
+ case 'fullPath': {
+ return $t('full_path_or_folder');
+ }
+ case 'ocr': {
+ return $t('ocr');
+ }
+ default: {
+ return;
+ }
+ }
+};
+
+export const getSearchPlacesTitle = (city?: string, state?: string, country?: string) =>
+ [city, state, country].filter(Boolean).join(', ') || undefined;
+
+export const getSearchMediaTitle = (mediaType: MediaType) => {
+ const $t = get(t);
+ switch (mediaType) {
+ case MediaType.Image: {
+ return $t('image');
+ }
+ case MediaType.Video: {
+ return $t('video');
+ }
+ default: {
+ return;
+ }
+ }
+};
+
+export const getPeople = async (selected: SvelteSet
): Promise => {
+ const $t = get(t);
+ try {
+ const res = await getAllPeople({ withHidden: false });
+ res.people.sort((a, b) => (selected.has(a.id) ? -1 : selected.has(b.id) ? 1 : 0));
+ return res.people;
+ } catch (error) {
+ handleError(error, $t('errors.failed_to_get_people'));
+ }
+ return [];
+};
+
+export const getSearchPeopleTitle = (people: PersonResponseDto[], selected: SvelteSet) => {
+ if (selected.size === 0) {
+ return;
+ }
+
+ const $t = get(t);
+
+ const name = people.find(({ id, name }) => name && selected.has(id))?.name;
+ if (name) {
+ return selected.size === 1 ? name : $t('name_plus_more_people', { values: { name, count: selected.size - 1 } });
+ }
+
+ return $t('people_count', { values: { count: selected.size } });
+};
+
+export const getSearchTagsTitle = (tags: TagResponseDto[], selected: SvelteSet) => {
+ const $t = get(t);
+
+ const id = selected.values().next().value;
+ if (!id) {
+ return undefined;
+ }
+
+ const tag = tags.find((t) => t.id === id)?.name;
+ if (!tag) {
+ return undefined;
+ }
+
+ return selected.size === 1 ? tag : $t('tag_plus_more_tags', { values: { tag, count: selected.size - 1 } });
+};
diff --git a/web/src/lib/elements/SearchBar.svelte b/web/src/lib/elements/SearchBar.svelte
index c20eda2928d554..c380e7667bd78f 100644
--- a/web/src/lib/elements/SearchBar.svelte
+++ b/web/src/lib/elements/SearchBar.svelte
@@ -39,7 +39,7 @@
onSearch({ force: true })}
/>
(this.#fromQuery({}));
+
+ get filter() {
+ return this.#filter;
+ }
+
+ reset() {
+ this.#filter = this.#fromQuery({});
+ }
+
+ setQuery(query: MetadataSearchDto | SmartSearchDto) {
+ this.#filter = this.#fromQuery(query);
+ }
+
+ async submit() {
+ await goto(Route.search(this.#toQuery()));
+ }
+
+ #fromQuery(searchQuery: MetadataSearchDto | SmartSearchDto): SearchFilter {
+ let query = 'query' in searchQuery && searchQuery.query ? searchQuery.query : '';
+
+ if ('originalFileName' in searchQuery && searchQuery.originalFileName) {
+ query = searchQuery.originalFileName;
+ }
+
+ if ('originalPath' in searchQuery && searchQuery.originalPath) {
+ query = searchQuery.originalPath;
+ }
+
+ return {
+ query,
+ ocr: searchQuery.ocr,
+ queryType: this.#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: this.#withNullAsEmptyString(searchQuery.country),
+ state: this.#withNullAsEmptyString(searchQuery.state),
+ city: this.#withNullAsEmptyString(searchQuery.city),
+ },
+ camera: {
+ make: this.#withNullAsEmptyString(searchQuery.make),
+ model: this.#withNullAsEmptyString(searchQuery.model),
+ lensModel: this.#withNullAsEmptyString(searchQuery.lensModel),
+ },
+ date: {
+ takenAfter: searchQuery.takenAfter ? this.#toStartOfDayDate(searchQuery.takenAfter) : undefined,
+ takenBefore: searchQuery.takenBefore ? this.#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,
+ };
+ }
+
+ #toQuery(): MetadataSearchDto | SmartSearchDto {
+ let type: AssetTypeEnum | undefined = undefined;
+ if (this.filter.mediaType === MediaType.Image) {
+ type = AssetTypeEnum.Image;
+ } else if (this.filter.mediaType === MediaType.Video) {
+ type = AssetTypeEnum.Video;
+ }
+
+ const query = this.filter.query || undefined;
+
+ return {
+ query: this.filter.queryType === 'smart' ? query : undefined,
+ queryAssetId: this.filter.queryAssetId || undefined,
+ ocr: this.filter.queryType === 'ocr' ? query : undefined,
+ originalFileName: this.filter.queryType === 'metadata' ? query : undefined,
+ description: this.filter.queryType === 'description' ? query : undefined,
+ originalPath: this.filter.queryType === 'fullPath' ? this.filter.query.trim() || undefined : undefined,
+ country: this.#emptyStringToNull(this.filter.location.country),
+ state: this.#emptyStringToNull(this.filter.location.state),
+ city: this.#emptyStringToNull(this.filter.location.city),
+ make: this.#emptyStringToNull(this.filter.camera.make),
+ model: this.#emptyStringToNull(this.filter.camera.model),
+ lensModel: this.#emptyStringToNull(this.filter.camera.lensModel),
+ takenAfter: this.filter.date.takenAfter
+ ? asLocalTimeISO(this.filter.date.takenAfter.startOf('day') as DateTime)
+ : undefined,
+ takenBefore: this.filter.date.takenBefore
+ ? asLocalTimeISO(this.filter.date.takenBefore.endOf('day') as DateTime)
+ : undefined,
+ visibility: this.filter.display.isArchive ? AssetVisibility.Archive : undefined,
+ isFavorite: this.filter.display.isFavorite || undefined,
+ isNotInAlbum: this.filter.display.isNotInAlbum || undefined,
+ personIds: this.filter.personIds.size > 0 ? [...this.filter.personIds] : undefined,
+ tagIds: this.filter.tagIds === null ? null : this.filter.tagIds.size > 0 ? [...this.filter.tagIds] : undefined,
+ type,
+ rating: this.filter.rating,
+ };
+ }
+
+ #withNullAsEmptyString(value: T | null) {
+ return value === null ? '' : value;
+ }
+
+ #emptyStringToNull(value: string | undefined) {
+ return value === '' ? null : value;
+ }
+
+ #toStartOfDayDate(dateString: string) {
+ return parseUtcDate(dateString)?.startOf('day') || undefined;
+ }
+
+ #defaultQueryType(): QueryType {
+ const storedQueryType = localStorage.getItem('searchQueryType') as QueryType;
+ return validQueryTypes.has(storedQueryType) ? storedQueryType : QueryType.SMART;
+ }
+}
+
+export const searchManager = new SearchManager();
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
deleted file mode 100644
index 2acb885d4a9793..00000000000000
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ /dev/null
@@ -1,225 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 6683dbfe2e97fa..649527af9b18f5 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -22,6 +22,7 @@
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+ import { searchManager } from '$lib/managers/search-manager.svelte';
import type { Viewport } from '$lib/managers/timeline-manager/types';
import { Route } from '$lib/route';
import { getAssetBulkActions } from '$lib/services/asset.service';
@@ -44,7 +45,7 @@
} from '@immich/sdk';
import { ActionButton, CommandPaletteDefaultProvider, Icon, IconButton, LoadingSpinner } from '@immich/ui';
import { mdiArrowLeft, mdiClose, mdiDotsVertical, mdiImageOffOutline, mdiSelectAll } from '@mdi/js';
- import { tick, untrack } from 'svelte';
+ import { onMount, tick, untrack } from 'svelte';
import { t } from 'svelte-i18n';
const viewport: Viewport = $state({ width: 0, height: 0 });
@@ -244,7 +245,10 @@
delete terms[key];
assetMultiSelectManager.clear();
void goto(Route.search(terms));
+ searchManager.setQuery(terms);
}
+
+ onMount(() => searchManager.setQuery(terms));
@@ -392,7 +396,7 @@
goto(previousRoute)} backIcon={mdiArrowLeft}>
-
+