diff --git a/mobile/openapi/lib/model/metadata_search_dto.dart b/mobile/openapi/lib/model/metadata_search_dto.dart
index 654883b38a..5f9e3f8e15 100644
--- a/mobile/openapi/lib/model/metadata_search_dto.dart
+++ b/mobile/openapi/lib/model/metadata_search_dto.dart
@@ -41,6 +41,7 @@ class MetadataSearchDto {
this.previewPath,
this.size,
this.state,
+ this.tagIds = const [],
this.takenAfter,
this.takenBefore,
this.thumbnailPath,
@@ -235,6 +236,8 @@ class MetadataSearchDto {
String? state;
+ List<String> tagIds;
+
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
@@ -363,6 +366,7 @@ class MetadataSearchDto {
other.previewPath == previewPath &&
other.size == size &&
other.state == state &&
+ _deepEquality.equals(other.tagIds, tagIds) &&
other.takenAfter == takenAfter &&
other.takenBefore == takenBefore &&
other.thumbnailPath == thumbnailPath &&
@@ -408,6 +412,7 @@ class MetadataSearchDto {
(previewPath == null ? 0 : previewPath!.hashCode) +
(size == null ? 0 : size!.hashCode) +
(state == null ? 0 : state!.hashCode) +
+ (tagIds.hashCode) +
(takenAfter == null ? 0 : takenAfter!.hashCode) +
(takenBefore == null ? 0 : takenBefore!.hashCode) +
(thumbnailPath == null ? 0 : thumbnailPath!.hashCode) +
@@ -423,7 +428,7 @@ class MetadataSearchDto {
(withStacked == null ? 0 : withStacked!.hashCode);
@override
- String toString() => 'MetadataSearchDto[checksum=$checksum, city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceAssetId=$deviceAssetId, deviceId=$deviceId, encodedVideoPath=$encodedVideoPath, id=$id, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, order=$order, originalFileName=$originalFileName, originalPath=$originalPath, page=$page, personIds=$personIds, previewPath=$previewPath, size=$size, state=$state, takenAfter=$takenAfter, takenBefore=$takenBefore, thumbnailPath=$thumbnailPath, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif, withPeople=$withPeople, withStacked=$withStacked]';
+ String toString() => 'MetadataSearchDto[checksum=$checksum, city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceAssetId=$deviceAssetId, deviceId=$deviceId, encodedVideoPath=$encodedVideoPath, id=$id, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, order=$order, originalFileName=$originalFileName, originalPath=$originalPath, page=$page, personIds=$personIds, previewPath=$previewPath, size=$size, state=$state, tagIds=$tagIds, takenAfter=$takenAfter, takenBefore=$takenBefore, thumbnailPath=$thumbnailPath, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif, withPeople=$withPeople, withStacked=$withStacked]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
@@ -559,6 +564,7 @@ class MetadataSearchDto {
} else {
// json[r'state'] = null;
}
+ json[r'tagIds'] = this.tagIds;
if (this.takenAfter != null) {
json[r'takenAfter'] = this.takenAfter!.toUtc().toIso8601String();
} else {
@@ -662,6 +668,9 @@ class MetadataSearchDto {
previewPath: mapValueOfType<String>(json, r'previewPath'),
size: num.parse('${json[r'size']}'),
state: mapValueOfType<String>(json, r'state'),
+ tagIds: json[r'tagIds'] is Iterable
+ ? (json[r'tagIds'] as Iterable).cast<String>().toList(growable: false)
+ : const [],
takenAfter: mapDateTime(json, r'takenAfter', r''),
takenBefore: mapDateTime(json, r'takenBefore', r''),
thumbnailPath: mapValueOfType<String>(json, r'thumbnailPath'),
diff --git a/mobile/openapi/lib/model/random_search_dto.dart b/mobile/openapi/lib/model/random_search_dto.dart
index 3fcab05bbb..c63d7e82f6 100644
--- a/mobile/openapi/lib/model/random_search_dto.dart
+++ b/mobile/openapi/lib/model/random_search_dto.dart
@@ -32,6 +32,7 @@ class RandomSearchDto {
this.personIds = const [],
this.size,
this.state,
+ this.tagIds = const [],
this.takenAfter,
this.takenBefore,
this.trashedAfter,
@@ -158,6 +159,8 @@ class RandomSearchDto {
String? state;
+ List<String> tagIds;
+
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
@@ -269,6 +272,7 @@ class RandomSearchDto {
_deepEquality.equals(other.personIds, personIds) &&
other.size == size &&
other.state == state &&
+ _deepEquality.equals(other.tagIds, tagIds) &&
other.takenAfter == takenAfter &&
other.takenBefore == takenBefore &&
other.trashedAfter == trashedAfter &&
@@ -304,6 +308,7 @@ class RandomSearchDto {
(personIds.hashCode) +
(size == null ? 0 : size!.hashCode) +
(state == null ? 0 : state!.hashCode) +
+ (tagIds.hashCode) +
(takenAfter == null ? 0 : takenAfter!.hashCode) +
(takenBefore == null ? 0 : takenBefore!.hashCode) +
(trashedAfter == null ? 0 : trashedAfter!.hashCode) +
@@ -318,7 +323,7 @@ class RandomSearchDto {
(withStacked == null ? 0 : withStacked!.hashCode);
@override
- String toString() => 'RandomSearchDto[city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, personIds=$personIds, size=$size, state=$state, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif, withPeople=$withPeople, withStacked=$withStacked]';
+ String toString() => 'RandomSearchDto[city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, personIds=$personIds, size=$size, state=$state, tagIds=$tagIds, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif, withPeople=$withPeople, withStacked=$withStacked]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
@@ -413,6 +418,7 @@ class RandomSearchDto {
} else {
// json[r'state'] = null;
}
+ json[r'tagIds'] = this.tagIds;
if (this.takenAfter != null) {
json[r'takenAfter'] = this.takenAfter!.toUtc().toIso8601String();
} else {
@@ -502,6 +508,9 @@ class RandomSearchDto {
: const [],
size: num.parse('${json[r'size']}'),
state: mapValueOfType<String>(json, r'state'),
+ tagIds: json[r'tagIds'] is Iterable
+ ? (json[r'tagIds'] as Iterable).cast<String>().toList(growable: false)
+ : const [],
takenAfter: mapDateTime(json, r'takenAfter', r''),
takenBefore: mapDateTime(json, r'takenBefore', r''),
trashedAfter: mapDateTime(json, r'trashedAfter', r''),
diff --git a/mobile/openapi/lib/model/smart_search_dto.dart b/mobile/openapi/lib/model/smart_search_dto.dart
index 4e1408cafa..c81e1519b4 100644
--- a/mobile/openapi/lib/model/smart_search_dto.dart
+++ b/mobile/openapi/lib/model/smart_search_dto.dart
@@ -34,6 +34,7 @@ class SmartSearchDto {
required this.query,
this.size,
this.state,
+ this.tagIds = const [],
this.takenAfter,
this.takenBefore,
this.trashedAfter,
@@ -169,6 +170,8 @@ class SmartSearchDto {
String? state;
+ List<String> tagIds;
+
///
/// Please note: This property should have been non-nullable! Since the specification file
/// does not include a default value (using the "default:" property), however, the generated
@@ -266,6 +269,7 @@ class SmartSearchDto {
other.query == query &&
other.size == size &&
other.state == state &&
+ _deepEquality.equals(other.tagIds, tagIds) &&
other.takenAfter == takenAfter &&
other.takenBefore == takenBefore &&
other.trashedAfter == trashedAfter &&
@@ -301,6 +305,7 @@ class SmartSearchDto {
(query.hashCode) +
(size == null ? 0 : size!.hashCode) +
(state == null ? 0 : state!.hashCode) +
+ (tagIds.hashCode) +
(takenAfter == null ? 0 : takenAfter!.hashCode) +
(takenBefore == null ? 0 : takenBefore!.hashCode) +
(trashedAfter == null ? 0 : trashedAfter!.hashCode) +
@@ -313,7 +318,7 @@ class SmartSearchDto {
(withExif == null ? 0 : withExif!.hashCode);
@override
- String toString() => 'SmartSearchDto[city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, page=$page, personIds=$personIds, query=$query, size=$size, state=$state, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif]';
+ String toString() => 'SmartSearchDto[city=$city, country=$country, createdAfter=$createdAfter, createdBefore=$createdBefore, deviceId=$deviceId, isArchived=$isArchived, isEncoded=$isEncoded, isFavorite=$isFavorite, isMotion=$isMotion, isNotInAlbum=$isNotInAlbum, isOffline=$isOffline, isVisible=$isVisible, lensModel=$lensModel, libraryId=$libraryId, make=$make, model=$model, page=$page, personIds=$personIds, query=$query, size=$size, state=$state, tagIds=$tagIds, takenAfter=$takenAfter, takenBefore=$takenBefore, trashedAfter=$trashedAfter, trashedBefore=$trashedBefore, type=$type, updatedAfter=$updatedAfter, updatedBefore=$updatedBefore, withArchived=$withArchived, withDeleted=$withDeleted, withExif=$withExif]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
@@ -414,6 +419,7 @@ class SmartSearchDto {
} else {
// json[r'state'] = null;
}
+ json[r'tagIds'] = this.tagIds;
if (this.takenAfter != null) {
json[r'takenAfter'] = this.takenAfter!.toUtc().toIso8601String();
} else {
@@ -495,6 +501,9 @@ class SmartSearchDto {
query: mapValueOfType<String>(json, r'query')!,
size: num.parse('${json[r'size']}'),
state: mapValueOfType<String>(json, r'state'),
+ tagIds: json[r'tagIds'] is Iterable
+ ? (json[r'tagIds'] as Iterable).cast<String>().toList(growable: false)
+ : const [],
takenAfter: mapDateTime(json, r'takenAfter', r''),
takenBefore: mapDateTime(json, r'takenBefore', r''),
trashedAfter: mapDateTime(json, r'trashedAfter', r''),
diff --git a/open-api/immich-openapi-specs.json b/open-api/immich-openapi-specs.json
index 0bb00103ba..090a3267d4 100644
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@@ -10036,6 +10036,13 @@
"nullable": true,
"type": "string"
},
+ "tagIds": {
+ "items": {
+ "format": "uuid",
+ "type": "string"
+ },
+ "type": "array"
+ },
"takenAfter": {
"format": "date-time",
"type": "string"
@@ -10649,6 +10656,13 @@
"nullable": true,
"type": "string"
},
+ "tagIds": {
+ "items": {
+ "format": "uuid",
+ "type": "string"
+ },
+ "type": "array"
+ },
"takenAfter": {
"format": "date-time",
"type": "string"
@@ -11564,6 +11578,13 @@
"nullable": true,
"type": "string"
},
+ "tagIds": {
+ "items": {
+ "format": "uuid",
+ "type": "string"
+ },
+ "type": "array"
+ },
"takenAfter": {
"format": "date-time",
"type": "string"
diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts
index 0c6ed43249..bbd41c3ecb 100644
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -792,6 +792,7 @@ export type MetadataSearchDto = {
previewPath?: string;
size?: number;
state?: string | null;
+ tagIds?: string[];
takenAfter?: string;
takenBefore?: string;
thumbnailPath?: string;
@@ -858,6 +859,7 @@ export type RandomSearchDto = {
personIds?: string[];
size?: number;
state?: string | null;
+ tagIds?: string[];
takenAfter?: string;
takenBefore?: string;
trashedAfter?: string;
@@ -893,6 +895,7 @@ export type SmartSearchDto = {
query: string;
size?: number;
state?: string | null;
+ tagIds?: string[];
takenAfter?: string;
takenBefore?: string;
trashedAfter?: string;
diff --git a/server/src/dtos/search.dto.ts b/server/src/dtos/search.dto.ts
index f3f45af44d..9dabfff25f 100644
--- a/server/src/dtos/search.dto.ts
+++ b/server/src/dtos/search.dto.ts
@@ -111,6 +111,9 @@ class BaseSearchDto {
@ValidateUUID({ each: true, optional: true })
personIds?: string[];
+
+ @ValidateUUID({ each: true, optional: true })
+ tagIds?: string[];
}
export class RandomSearchDto extends BaseSearchDto {
diff --git a/server/src/entities/asset.entity.ts b/server/src/entities/asset.entity.ts
index 879c2c5169..605fbb0456 100644
--- a/server/src/entities/asset.entity.ts
+++ b/server/src/entities/asset.entity.ts
@@ -252,6 +252,21 @@ export function hasPeople<O>(qb: SelectQueryBuilder<DB, 'assets', O>, personIds:
);
}
+export function hasTags<O>(qb: SelectQueryBuilder<DB, 'assets', O>, tagIds: string[]) {
+ return qb.innerJoin(
+ (eb) =>
+ eb
+ .selectFrom('tag_asset')
+ .select('assetsId')
+ .innerJoin('tags_closure', 'tag_asset.tagsId', 'tags_closure.id_descendant')
+ .where('tags_closure.id_ancestor', '=', anyUuid(tagIds))
+ .groupBy('assetsId')
+ .having((eb) => eb.fn.count('tags_closure.id_ancestor').distinct(), '>=', tagIds.length)
+ .as('has_tags'),
+ (join) => join.onRef('has_tags.assetsId', '=', 'assets.id'),
+ );
+}
+
export function withOwner(eb: ExpressionBuilder<DB, 'assets'>) {
return jsonObjectFrom(eb.selectFrom('users').selectAll().whereRef('users.id', '=', 'assets.ownerId')).as('owner');
}
@@ -326,6 +341,7 @@ export function searchAssetBuilder(kysely: Kysely<DB>, options: AssetSearchBuild
.withPlugin(joinDeduplicationPlugin)
.selectFrom('assets')
.selectAll('assets')
+ .$if(!!options.tagIds && options.tagIds.length > 0, (qb) => hasTags(qb, options.tagIds!))
.$if(!!options.personIds && options.personIds.length > 0, (qb) => hasPeople(qb, options.personIds!))
.$if(!!options.createdBefore, (qb) => qb.where('assets.createdAt', '<=', options.createdBefore!))
.$if(!!options.createdAfter, (qb) => qb.where('assets.createdAt', '>=', options.createdAfter!))
diff --git a/server/src/interfaces/search.interface.ts b/server/src/interfaces/search.interface.ts
index bb76ff7b1f..e6f9acbd21 100644
--- a/server/src/interfaces/search.interface.ts
+++ b/server/src/interfaces/search.interface.ts
@@ -112,6 +112,10 @@ export interface SearchPeopleOptions {
personIds?: string[];
}
+export interface SearchTagOptions {
+ tagIds?: string[];
+}
+
export interface SearchOrderOptions {
orderDirection?: 'asc' | 'desc';
}
@@ -128,7 +132,8 @@ type BaseAssetSearchOptions = SearchDateOptions &
SearchPathOptions &
SearchStatusOptions &
SearchUserIdOptions &
- SearchPeopleOptions;
+ SearchPeopleOptions &
+ SearchTagOptions;
export type AssetSearchOptions = BaseAssetSearchOptions & SearchRelationOptions;
@@ -142,7 +147,8 @@ export type SmartSearchOptions = SearchDateOptions &
SearchOneToOneRelationOptions &
SearchStatusOptions &
SearchUserIdOptions &
- SearchPeopleOptions;
+ SearchPeopleOptions &
+ SearchTagOptions;
export interface FaceEmbeddingSearch extends SearchEmbeddingOptions {
hasPerson?: boolean;
diff --git a/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte b/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
index c367d001f2..7653ad3413 100644
--- a/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
@@ -8,6 +8,7 @@
query: string;
queryType: 'smart' | 'metadata';
personIds: SvelteSet<string>;
+ tagIds: SvelteSet<string>;
location: SearchLocationFilter;
camera: SearchCameraFilter;
date: SearchDateFilter;
@@ -20,6 +21,7 @@
import { Button } from '@immich/ui';
import { AssetTypeEnum, type SmartSearchDto, type MetadataSearchDto } from '@immich/sdk';
import SearchPeopleSection from './search-people-section.svelte';
+ import SearchTagsSection from './search-tags-section.svelte';
import SearchLocationSection from './search-location-section.svelte';
import SearchCameraSection, { type SearchCameraFilter } from './search-camera-section.svelte';
import SearchDateSection from './search-date-section.svelte';
@@ -54,6 +56,7 @@
query: 'query' in searchQuery ? searchQuery.query : searchQuery.originalFileName || '',
queryType: 'query' in searchQuery ? 'smart' : 'metadata',
personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
+ tagIds: new SvelteSet('tagIds' in searchQuery ? searchQuery.tagIds : []),
location: {
country: withNullAsUndefined(searchQuery.country),
state: withNullAsUndefined(searchQuery.state),
@@ -85,6 +88,7 @@
query: '',
queryType: 'smart',
personIds: new SvelteSet(),
+ tagIds: new SvelteSet(),
location: {},
camera: {},
date: {},
@@ -117,6 +121,7 @@
isFavorite: filter.display.isFavorite || undefined,
isNotInAlbum: filter.display.isNotInAlbum || undefined,
personIds: filter.personIds.size > 0 ? [...filter.personIds] : undefined,
+ tagIds: filter.tagIds.size > 0 ? [...filter.tagIds] : undefined,
type,
};
@@ -143,6 +148,9 @@
<!-- TEXT -->
<SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
+ <!-- TAGS -->
+ <SearchTagsSection bind:selectedTags={filter.tagIds} />
+
<!-- LOCATION -->
<SearchLocationSection bind:filters={filter.location} />
diff --git a/web/src/lib/components/shared-components/search-bar/search-tags-section.svelte b/web/src/lib/components/shared-components/search-bar/search-tags-section.svelte
new file mode 100644
index 0000000000..6071da1460
--- /dev/null
+++ b/web/src/lib/components/shared-components/search-bar/search-tags-section.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+ import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+ import { getAllTags, type TagResponseDto } from '@immich/sdk';
+ import { t } from 'svelte-i18n';
+ import { onMount } from 'svelte';
+ import { SvelteSet } from 'svelte/reactivity';
+ import Icon from '$lib/components/elements/icon.svelte';
+ import { mdiClose } from '@mdi/js';
+ import { preferences } from '$lib/stores/user.store';
+
+ interface Props {
+ selectedTags: SvelteSet<string>;
+ }
+
+ let { selectedTags = $bindable() }: Props = $props();
+
+ let allTags: TagResponseDto[] = $state([]);
+ let tagMap = $derived(Object.fromEntries(allTags.map((tag) => [tag.id, tag])));
+ let selectedOption = $state(undefined);
+
+ onMount(async () => {
+ allTags = await getAllTags();
+ });
+
+ const handleSelect = (option?: ComboBoxOption) => {
+ if (!option || !option.id) {
+ return;
+ }
+
+ selectedTags.add(option.value);
+ selectedOption = undefined;
+ };
+
+ const handleRemove = (tag: string) => {
+ selectedTags.delete(tag);
+ };
+</script>
+
+{#if $preferences?.tags?.enabled}
+ <div id="location-selection">
+ <form autocomplete="off" id="create-tag-form">
+ <div class="my-4 flex flex-col gap-2">
+ <Combobox
+ onSelect={handleSelect}
+ label={$t('tags').toUpperCase()}
+ defaultFirstOption
+ options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
+ bind:selectedOption
+ placeholder={$t('search_tags')}
+ />
+ </div>
+ </form>
+
+ <section class="flex flex-wrap pt-2 gap-1">
+ {#each selectedTags as tagId (tagId)}
+ {@const tag = tagMap[tagId]}
+ {#if tag}
+ <div class="flex group transition-all">
+ <span
+ class="inline-block h-min whitespace-nowrap pl-3 pr-1 group-hover:pl-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-tl-full rounded-bl-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+ >
+ <p class="text-sm">
+ {tag.value}
+ </p>
+ </span>
+
+ <button
+ type="button"
+ class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-tr-full rounded-br-full place-items-center place-content-center pr-2 pl-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+ title="Remove tag"
+ onclick={() => handleRemove(tagId)}
+ >
+ <Icon path={mdiClose} />
+ </button>
+ </div>
+ {/if}
+ {/each}
+ </section>
+ </div>
+{/if}
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 97d0cacdce..c416226c41 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
@@ -29,6 +29,7 @@
type SmartSearchDto,
type MetadataSearchDto,
type AlbumResponseDto,
+ getTagById,
} from '@immich/sdk';
import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
import type { Viewport } from '$lib/stores/assets.store';
@@ -194,6 +195,7 @@
model: $t('camera_model'),
lensModel: $t('lens_model'),
personIds: $t('people'),
+ tagIds: $t('tags'),
originalFileName: $t('file_name'),
};
return keyMap[key] || key;
@@ -215,6 +217,18 @@
return personNames.join(', ');
}
+ async function getTagNames(tagIds: string[]) {
+ const tagNames = await Promise.all(
+ tagIds.map(async (tagId) => {
+ const tag = await getTagById({ id: tagId });
+
+ return tag.value;
+ }),
+ );
+
+ return tagNames.join(', ');
+ }
+
const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
const onAddToAlbum = (assetIds: string[]) => {
@@ -299,6 +313,10 @@
{#await getPersonName(value) then personName}
{personName}
{/await}
+ {:else if key === 'tagIds' && Array.isArray(value)}
+ {#await getTagNames(value) then tagNames}
+ {tagNames}
+ {/await}
{:else if value === null || value === ''}
{$t('unknown')}
{:else}