feat: Adding tags to search modal

i18n/en.json

@@ -754,6 +754,7 @@
   "filename": "Filename",
   "filetype": "Filetype",
   "filter_people": "Filter people",
+  "filter_tags": "Filter tags",
   "find_them_fast": "Find them fast by name with search",
   "fix_incorrect_match": "Fix incorrect match",
   "folders": "Folders",
@@ -1348,4 +1349,4 @@
   "yes": "Yes",
   "you_dont_have_any_shared_links": "You don't have any shared links",
   "zoom_image": "Zoom Image"
-}
+}

open-api/immich-openapi-specs.json

@@ -10032,6 +10032,13 @@
             "nullable": true,
             "type": "string"
           },
+          "tagIds": {
+            "items": {
+              "format": "uuid",
+              "type": "string"
+            },
+            "type": "array"
+          },
           "takenAfter": {
             "format": "date-time",
             "type": "string"
@@ -10645,6 +10652,13 @@
             "nullable": true,
             "type": "string"
           },
+          "tagIds": {
+            "items": {
+              "format": "uuid",
+              "type": "string"
+            },
+            "type": "array"
+          },
           "takenAfter": {
             "format": "date-time",
             "type": "string"
@@ -11560,6 +11574,13 @@
             "nullable": true,
             "type": "string"
           },
+          "tagIds": {
+            "items": {
+              "format": "uuid",
+              "type": "string"
+            },
+            "type": "array"
+          },
           "takenAfter": {
             "format": "date-time",
             "type": "string"

open-api/typescript-sdk/src/fetch-client.ts

@@ -794,6 +794,7 @@ export type MetadataSearchDto = {
     state?: string | null;
     takenAfter?: string;
     takenBefore?: string;
+    tagIds?: string[];
     thumbnailPath?: string;
     trashedAfter?: string;
     trashedBefore?: string;

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 {

server/src/interfaces/search.interface.ts

@@ -112,6 +112,10 @@ export interface SearchPeopleOptions {
   personIds?: string[];
 }
 
+export interface SearchTagsOptions {
+  tagIds?: string[];
+}
+
 export interface SearchOrderOptions {
   orderDirection?: 'asc' | 'desc';
 }
@@ -128,7 +132,8 @@ type BaseAssetSearchOptions = SearchDateOptions &
   SearchPathOptions &
   SearchStatusOptions &
   SearchUserIdOptions &
-  SearchPeopleOptions;
+  SearchPeopleOptions &
+  SearchTagsOptions;
 
 export type AssetSearchOptions = BaseAssetSearchOptions & SearchRelationOptions;
 

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;
@@ -26,6 +27,7 @@
   import SearchMediaSection from './search-media-section.svelte';
   import { parseUtcDate } from '$lib/utils/date-time';
   import SearchDisplaySection from './search-display-section.svelte';
+  import SearchTagSection from './search-tag-section.svelte';
   import SearchTextSection from './search-text-section.svelte';
   import { t } from 'svelte-i18n';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -78,6 +80,7 @@
         : searchQuery.type === AssetTypeEnum.Video
           ? MediaType.Video
           : MediaType.All,
+    tagIds: new SvelteSet('tagIds' in searchQuery ? searchQuery.tagIds : []),
   });
 
   const resetForm = () => {
@@ -90,6 +93,7 @@
       date: {},
       display: {},
       mediaType: MediaType.All,
+      tagIds: new SvelteSet()
     };
   };
 
@@ -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} />
 
+      <!-- TAG -->
+      <SearchTagSection bind:selectedTagIds={filter.tagIds} />
+
       <!-- LOCATION -->
       <SearchLocationSection bind:filters={filter.location} />
 

web/src/lib/components/shared-components/search-bar/search-tag-section.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import {getAllTags, type TagResponseDto} from '@immich/sdk';
+  import { mdiClose, mdiArrowRight } from '@mdi/js';
+  import { handleError } from '$lib/utils/handle-error';
+  import { t } from 'svelte-i18n';
+  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
+  import type { SvelteSet } from 'svelte/reactivity';
+
+  interface Props {
+    selectedTagIds: SvelteSet<string>;
+  }
+
+  let { selectedTagIds = $bindable() }: Props = $props();
+
+  let tagPromise = getTags();
+  let showAllTags = $state(false);
+  let name = $state('');
+  let numberOfTags = $state(1);
+
+  function orderBySelectedTagIdsFirst(tags: TagResponseDto[]) {
+    return [
+      ...tags.filter((t) => selectedTagIds.has(t.id)), //
+      ...tags.filter((t) => !selectedTagIds.has(t.id)),
+    ];
+  }
+
+  async function getTags() {
+    try {
+      const res = await getAllTags({ withHidden: false });
+      return orderBySelectedTagIdsFirst(res);
+    } catch (error) {
+      handleError(error, $t('errors.failed_to_get_tags'));
+    }
+  }
+
+  function toggleTagSelection(id: string) {
+    if (selectedTagIds.has(id)) {
+      selectedTagIds.delete(id);
+    } else {
+      selectedTagIds.add(id);
+    }
+  }
+
+  const filterTags = (list: TagResponseDto[], name: string) => {
+    const nameLower = name.toLowerCase();
+    return name ? list.filter((t) => t.name.toLowerCase().includes(nameLower)) : list;
+  };
+</script>
+
+{#await tagPromise then tags}
+  {#if tags && tags.length > 0}
+    {@const tagList = showAllTags
+      ? filterTags(tags, name)
+      : filterTags(tags, name).slice(0, numberOfTags)}
+
+    <div id="tags-selection" class="-mb-4">
+      <div class="flex items-center w-full justify-between gap-6">
+        <p class="immich-form-label py-3">{$t('tags').toUpperCase()}</p>
+        <SearchBar bind:name placeholder={$t('filter_tags')} showLoadingSpinner={false} />
+      </div>
+
+      <SingleGridRow
+        class="grid grid-auto-fill-20 -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        bind:itemCount={numberOfTags}
+      >
+        {#each tagList as tag (tag.id)}
+          <button
+            type="button"
+            class="flex flex-col itemsV-center rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedTagIds.has(
+              tag.id,
+            )
+              ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
+              : 'border-transparent'}"
+            onclick={() => toggleTagSelection(tag.id)}
+          >
+            <p class="mt-2 line-clamp-2 text-sm font-medium dark:text-white">{tag.name}</p>
+          </button>
+        {/each}
+      </SingleGridRow>
+
+      {#if showAllTags || tags.length > tagList.length}
+        <div class="flex justify-center mt-2">
+          <Button
+            shadow={false}
+            color="text-primary"
+            class="flex gap-2 place-items-center"
+            onclick={() => (showAllTags = !showAllTags)}
+          >
+            {#if showAllTags}
+              <span><Icon path={mdiClose} ariaHidden /></span>
+              {$t('collapse')}
+            {:else}
+              <span><Icon path={mdiArrowRight} ariaHidden /></span>
+              {$t('see_all_tags')}
+            {/if}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/await}

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

@@ -26,6 +26,7 @@
     searchAssets,
     searchSmart,
     getPerson,
+    getTagById,
     type SmartSearchDto,
     type MetadataSearchDto,
     type AlbumResponseDto,
@@ -193,11 +194,28 @@
       make: $t('camera_brand'),
       model: $t('camera_model'),
       personIds: $t('people'),
+      tagIds: $t('tags'),
       originalFileName: $t('file_name'),
     };
     return keyMap[key] || key;
   }
 
+  async function getTagName(tagIds: string[]) {
+    const tagNames = await Promise.all(
+      tagIds.map(async (tagId) => {
+        const tag = await getTagById({ id: tagId });
+
+        if (tag.name == '') {
+          return $t('no_name');
+        }
+
+        return tag.name;
+      }),
+    );
+
+    return tagNames.join(', ');
+  }
+
   async function getPersonName(personIds: string[]) {
     const personNames = await Promise.all(
       personIds.map(async (personId) => {
@@ -298,6 +316,10 @@
               {#await getPersonName(value) then personName}
                 {personName}
               {/await}
+            {:else if key === 'tagIds' && Array.isArray(value)}
+              {#await getTagName(value) then tagName}
+                {tagName}
+              {/await}
             {:else if value === null || value === ''}
               {$t('unknown')}
             {:else}