feat: adds option to search only for untagged assets (#19730)

Co-authored-by: SkwalExe <skwal@skwal.net>

i18n/en.json

@@ -1886,6 +1886,7 @@
   "unselect_all_in": "Unselect all in {group}",
   "unstack": "Un-stack",
   "unstacked_assets_count": "Un-stacked {count, plural, one {# asset} other {# assets}}",
+  "untagged": "Untagged",
   "up_next": "Up next",
   "updated_at": "Updated",
   "updated_password": "Updated password",

open-api/immich-openapi-specs.json

@@ -11203,6 +11203,7 @@
               "format": "uuid",
               "type": "string"
             },
+            "nullable": true,
             "type": "array"
           },
           "takenAfter": {
@@ -12092,6 +12093,7 @@
               "format": "uuid",
               "type": "string"
             },
+            "nullable": true,
             "type": "array"
           },
           "takenAfter": {
@@ -13157,6 +13159,7 @@
               "format": "uuid",
               "type": "string"
             },
+            "nullable": true,
             "type": "array"
           },
           "takenAfter": {
@@ -13348,6 +13351,7 @@
               "format": "uuid",
               "type": "string"
             },
+            "nullable": true,
             "type": "array"
           },
           "takenAfter": {

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

@@ -889,7 +889,7 @@ export type MetadataSearchDto = {
     rating?: number;
     size?: number;
     state?: string | null;
-    tagIds?: string[];
+    tagIds?: string[] | null;
     takenAfter?: string;
     takenBefore?: string;
     thumbnailPath?: string;
@@ -956,7 +956,7 @@ export type RandomSearchDto = {
     rating?: number;
     size?: number;
     state?: string | null;
-    tagIds?: string[];
+    tagIds?: string[] | null;
     takenAfter?: string;
     takenBefore?: string;
     trashedAfter?: string;
@@ -993,7 +993,7 @@ export type SmartSearchDto = {
     rating?: number;
     size?: number;
     state?: string | null;
-    tagIds?: string[];
+    tagIds?: string[] | null;
     takenAfter?: string;
     takenBefore?: string;
     trashedAfter?: string;
@@ -1025,7 +1025,7 @@ export type StatisticsSearchDto = {
     personIds?: string[];
     rating?: number;
     state?: string | null;
-    tagIds?: string[];
+    tagIds?: string[] | null;
     takenAfter?: string;
     takenBefore?: string;
     trashedAfter?: string;

server/src/dtos/search.dto.ts

@@ -92,8 +92,8 @@ class BaseSearchDto {
   @ValidateUUID({ each: true, optional: true })
   personIds?: string[];
 
-  @ValidateUUID({ each: true, optional: true })
-  tagIds?: string[];
+  @ValidateUUID({ each: true, optional: true, nullable: true })
+  tagIds?: string[] | null;
 
   @ValidateUUID({ each: true, optional: true })
   albumIds?: string[];

server/src/repositories/search.repository.ts

@@ -89,7 +89,7 @@ export interface SearchPeopleOptions {
 }
 
 export interface SearchTagOptions {
-  tagIds?: string[];
+  tagIds?: string[] | null;
 }
 
 export interface SearchAlbumOptions {

server/src/utils/database.ts

@@ -307,6 +307,9 @@ export function searchAssetBuilder(kysely: Kysely<DB>, options: AssetSearchBuild
     .where('assets.visibility', '=', visibility)
     .$if(!!options.albumIds && options.albumIds.length > 0, (qb) => inAlbums(qb, options.albumIds!))
     .$if(!!options.tagIds && options.tagIds.length > 0, (qb) => hasTags(qb, options.tagIds!))
+    .$if(options.tagIds === null, (qb) =>
+      qb.where((eb) => eb.not(eb.exists((eb) => eb.selectFrom('tag_asset').whereRef('assetsId', '=', 'assets.id')))),
+    )
     .$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!))

web/src/lib/components/shared-components/combobox.svelte

@@ -33,6 +33,7 @@
 
   interface Props {
     label: string;
+    disabled?: boolean;
     hideLabel?: boolean;
     options?: ComboBoxOption[];
     selectedOption?: ComboBoxOption | undefined;
@@ -52,6 +53,7 @@
   let {
     label,
     hideLabel = false,
+    disabled = false,
     options = [],
     selectedOption = $bindable(),
     placeholder = '',
@@ -275,6 +277,7 @@
 
     <input
       {placeholder}
+      {disabled}
       aria-activedescendant={selectedIndex || selectedIndex === 0 ? `${listboxId}-${selectedIndex}` : ''}
       aria-autocomplete="list"
       aria-controls={listboxId}

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

@@ -3,13 +3,14 @@
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
+  import { Checkbox, Label } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
 
   interface Props {
-    selectedTags: SvelteSet<string>;
+    selectedTags: SvelteSet<string> | null;
   }
 
   let { selectedTags = $bindable() }: Props = $props();
@@ -23,7 +24,7 @@
   });
 
   const handleSelect = (option?: ComboBoxOption) => {
-    if (!option || !option.id) {
+    if (!option || !option.id || selectedTags === null) {
       return;
     }
 
@@ -32,6 +33,10 @@
   };
 
   const handleRemove = (tag: string) => {
+    if (selectedTags === null) {
+      return;
+    }
+
     selectedTags.delete(tag);
   };
 </script>
@@ -41,6 +46,7 @@
     <form autocomplete="off" id="create-tag-form">
       <div class="my-4 flex flex-col gap-2">
         <Combobox
+          disabled={selectedTags === null}
           onSelect={handleSelect}
           label={$t('tags').toUpperCase()}
           defaultFirstOption
@@ -49,10 +55,21 @@
           placeholder={$t('search_tags')}
         />
       </div>
+      <div class="flex items-center gap-2">
+        <Checkbox
+          id="untagged-checkbox"
+          size="tiny"
+          checked={selectedTags === null}
+          onCheckedChange={(checked) => {
+            selectedTags = checked ? null : new SvelteSet();
+          }}
+        />
+        <Label label={$t('untagged')} for="untagged-checkbox" />
+      </div>
     </form>
 
     <section class="flex flex-wrap pt-2 gap-1">
-      {#each selectedTags as tagId (tagId)}
+      {#each selectedTags ?? [] as tagId (tagId)}
         {@const tag = tagMap[tagId]}
         {#if tag}
           <div class="flex group transition-all">

web/src/lib/modals/SearchFilterModal.svelte

@@ -8,7 +8,7 @@
     query: string;
     queryType: 'smart' | 'metadata' | 'description';
     personIds: SvelteSet<string>;
-    tagIds: SvelteSet<string>;
+    tagIds: SvelteSet<string> | null;
     location: SearchLocationFilter;
     camera: SearchCameraFilter;
     date: SearchDateFilter;
@@ -68,7 +68,12 @@
     query: 'query' in searchQuery ? searchQuery.query : searchQuery.originalFileName || '',
     queryType: defaultQueryType(),
     personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
-    tagIds: new SvelteSet('tagIds' in searchQuery ? searchQuery.tagIds : []),
+    tagIds:
+      'tagIds' in searchQuery
+        ? searchQuery.tagIds === null
+          ? null
+          : new SvelteSet(searchQuery.tagIds)
+        : new SvelteSet(),
     location: {
       country: withNullAsUndefined(searchQuery.country),
       state: withNullAsUndefined(searchQuery.state),
@@ -140,7 +145,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,
+      tagIds: filter.tagIds === null ? null : filter.tagIds.size > 0 ? [...filter.tagIds] : undefined,
       type,
       rating: filter.rating,
     };

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

@@ -233,7 +233,10 @@
     return personNames.join(', ');
   }
 
-  async function getTagNames(tagIds: string[]) {
+  async function getTagNames(tagIds: string[] | null) {
+    if (tagIds === null) {
+      return $t('untagged');
+    }
     const tagNames = await Promise.all(
       tagIds.map(async (tagId) => {
         const tag = await getTagById({ id: tagId });
@@ -343,7 +346,7 @@
               {#await getPersonName(value) then personName}
                 {personName}
               {/await}
-            {:else if searchKey === 'tagIds' && Array.isArray(value)}
+            {:else if searchKey === 'tagIds' && (Array.isArray(value) || value === null)}
               {#await getTagNames(value) then tagNames}
                 {tagNames}
               {/await}