feat: tags (#11980)

* feat: tags

* fix: folder tree icons

* navigate to tag from detail panel

* delete tag

* Tag position and add tag button

* Tag asset in detail panel

* refactor form

* feat: navigate to tag page from clicking on a tag

* feat: delete tags from the tag page

* refactor: moving tag section in detail panel and add + tag button

* feat: tag asset action in detail panel

* refactor add tag form

* fdisable add tag button when there is no selection

* feat: tag bulk endpoint

* feat: tag colors

* chore: clean up

* chore: unit tests

* feat: write tags to sidecar

* Remove tag and auto focus on tag creation form opened

* chore: regenerate migration

* chore: linting

* add color picker to tag edit form

* fix: force render tags timeline on navigating back from asset viewer

* feat: read tags from keywords

* chore: clean up

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/asset-viewer/detail-panel-tags.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { isSharedLink } from '$lib/utils';
+  import { removeTag, tagAssets } from '$lib/utils/asset-utils';
+  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
+  import { mdiClose, mdiPlus } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let isOwner: boolean;
+
+  $: tags = asset.tags || [];
+
+  let isOpen = false;
+
+  const handleAdd = () => (isOpen = true);
+
+  const handleCancel = () => (isOpen = false);
+
+  const handleTag = async (tagIds: string[]) => {
+    const ids = await tagAssets({ tagIds, assetIds: [asset.id], showNotification: false });
+    if (ids) {
+      isOpen = false;
+    }
+
+    asset = await getAssetInfo({ id: asset.id });
+  };
+
+  const handleRemove = async (tagId: string) => {
+    const ids = await removeTag({ tagIds: [tagId], assetIds: [asset.id], showNotification: false });
+    if (ids) {
+      asset = await getAssetInfo({ id: asset.id });
+    }
+  };
+</script>
+
+{#if isOwner && !isSharedLink()}
+  <section class="px-4 mt-4">
+    <div class="flex h-10 w-full items-center justify-between text-sm">
+      <h2>{$t('tags').toUpperCase()}</h2>
+    </div>
+    <section class="flex flex-wrap pt-2 gap-1">
+      {#each tags as tag (tag.id)}
+        <div class="flex group transition-all">
+          <a
+            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"
+            href={encodeURI(`${AppRoute.TAGS}/?path=${tag.value}`)}
+          >
+            <p class="text-sm">
+              {tag.value}
+            </p>
+          </a>
+
+          <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"
+            on:click={() => handleRemove(tag.id)}
+          >
+            <Icon path={mdiClose} />
+          </button>
+        </div>
+      {/each}
+      <button
+        type="button"
+        class="rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 flex place-items-center place-content-center gap-1 px-2 py-1"
+        title="Add tag"
+        on:click={handleAdd}
+      >
+        <span class="text-sm px-1 flex place-items-center place-content-center gap-1"><Icon path={mdiPlus} />Add</span>
+      </button>
+    </section>
+  </section>
+{/if}
+
+{#if isOpen}
+  <TagAssetForm onTag={(tagsIds) => handleTag(tagsIds)} onCancel={handleCancel} />
+{/if}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -43,6 +43,7 @@
   import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
   import { t } from 'svelte-i18n';
   import { goto } from '$app/navigation';
+  import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -157,7 +158,7 @@
   <DetailPanelRating {asset} {isOwner} />
 
   {#if (!isSharedLink() && unassignedFaces.length > 0) || people.length > 0}
-    <section class="px-4 py-4 text-sm">
+    <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>{$t('people').toUpperCase()}</h2>
         <div class="flex gap-2 items-center">
@@ -472,11 +473,11 @@
 {/if}
 
 {#if albums.length > 0}
-  <section class="p-6 dark:text-immich-dark-fg">
+  <section class="px-6 pt-6 dark:text-immich-dark-fg">
     <p class="pb-4 text-sm">{$t('appears_in').toUpperCase()}</p>
     {#each albums as album}
       <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
-        <div class="flex gap-4 py-2 hover:cursor-pointer items-center">
+        <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
           <div>
             <img
               alt={album.albumName}
@@ -501,6 +502,10 @@
   </section>
 {/if}
 
+<section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
+  <DetailPanelTags {asset} {isOwner} />
+</section>
+
 {#if showEditFaces}
   <PersonSidePanel
     assetId={asset.id}