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/shared-components/combobox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
   export type ComboBoxOption = {
+    id?: string;
     label: string;
     value: string;
   };
@@ -32,7 +33,7 @@
   export let label: string;
   export let hideLabel = false;
   export let options: ComboBoxOption[] = [];
-  export let selectedOption: ComboBoxOption | undefined;
+  export let selectedOption: ComboBoxOption | undefined = undefined;
   export let placeholder = '';
 
   /**
@@ -237,7 +238,7 @@
           {$t('no_results')}
         </li>
       {/if}
-      {#each filteredOptions as option, index (option.label)}
+      {#each filteredOptions as option, index (option.id || option.label)}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <li
           aria-selected={index === selectedIndex}

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -4,6 +4,7 @@
     TEXT = 'text',
     NUMBER = 'number',
     PASSWORD = 'password',
+    COLOR = 'color',
   }
 </script>
 
@@ -13,6 +14,7 @@
   import { fly } from 'svelte/transition';
   import PasswordField from '../password-field.svelte';
   import { t } from 'svelte-i18n';
+  import { onMount, tick } from 'svelte';
 
   export let inputType: SettingInputFieldType;
   export let value: string | number;
@@ -25,8 +27,11 @@
   export let required = false;
   export let disabled = false;
   export let isEdited = false;
+  export let autofocus = false;
   export let passwordAutocomplete: string = 'current-password';
 
+  let input: HTMLInputElement;
+
   const handleChange: FormEventHandler<HTMLInputElement> = (e) => {
     value = e.currentTarget.value;
 
@@ -41,6 +46,14 @@
       value = newValue;
     }
   };
+
+  onMount(() => {
+    if (autofocus) {
+      tick()
+        .then(() => input?.focus())
+        .catch((_) => {});
+    }
+  });
 </script>
 
 <div class="mb-4 w-full">
@@ -69,22 +82,46 @@
   {/if}
 
   {#if inputType !== SettingInputFieldType.PASSWORD}
-    <input
-      class="immich-form-input w-full pb-2"
-      aria-describedby={desc ? `${label}-desc` : undefined}
-      aria-labelledby="{label}-label"
-      id={label}
-      name={label}
-      type={inputType}
-      min={min.toString()}
-      max={max.toString()}
-      {step}
-      {required}
-      {value}
-      on:change={handleChange}
-      {disabled}
-      {title}
-    />
+    <div class="flex place-items-center place-content-center">
+      {#if inputType === SettingInputFieldType.COLOR}
+        <input
+          bind:this={input}
+          class="immich-form-input w-full pb-2 rounded-none mr-1"
+          aria-describedby={desc ? `${label}-desc` : undefined}
+          aria-labelledby="{label}-label"
+          id={label}
+          name={label}
+          type="text"
+          min={min.toString()}
+          max={max.toString()}
+          {step}
+          {required}
+          {value}
+          on:change={handleChange}
+          {disabled}
+          {title}
+        />
+      {/if}
+
+      <input
+        bind:this={input}
+        class="immich-form-input w-full pb-2"
+        class:color-picker={inputType === SettingInputFieldType.COLOR}
+        aria-describedby={desc ? `${label}-desc` : undefined}
+        aria-labelledby="{label}-label"
+        id={label}
+        name={label}
+        type={inputType}
+        min={min.toString()}
+        max={max.toString()}
+        {step}
+        {required}
+        {value}
+        on:change={handleChange}
+        {disabled}
+        {title}
+      />
+    </div>
   {:else}
     <PasswordField
       aria-describedby={desc ? `${label}-desc` : undefined}
@@ -100,3 +137,28 @@
     />
   {/if}
 </div>
+
+<style>
+  .color-picker {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 52px;
+    height: 52px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+  }
+
+  .color-picker::-webkit-color-swatch {
+    border-radius: 14px;
+    border: none;
+  }
+
+  .color-picker::-moz-color-swatch {
+    border-radius: 14px;
+    border: none;
+  }
+</style>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -21,6 +21,7 @@
     mdiToolbox,
     mdiToolboxOutline,
     mdiFolderOutline,
+    mdiTagMultipleOutline,
   } from '@mdi/js';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
@@ -105,6 +106,8 @@
       </svelte:fragment>
     </SideBarLink>
 
+    <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
+
     <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
 
     <SideBarLink

web/src/lib/components/shared-components/tree/tree-items.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
   import Tree from '$lib/components/shared-components/tree/tree.svelte';
-  import type { RecursiveObject } from '$lib/utils/tree-utils';
+  import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
 
   export let items: RecursiveObject;
   export let parent = '';
   export let active = '';
+  export let icons: { default: string; active: string };
   export let getLink: (path: string) => string;
+  export let getColor: (path: string) => string | undefined = () => undefined;
 </script>
 
 <ul class="list-none ml-2">
-  {#each Object.entries(items) as [path, tree], index (index)}
-    <li>
-      <Tree {parent} value={path} {tree} {active} {getLink} />
-    </li>
+  {#each Object.entries(items) as [path, tree]}
+    {@const value = normalizeTreePath(`${parent}/${path}`)}
+    {@const key = value + getColor(value)}
+    {#key key}
+      <li>
+        <Tree {parent} value={path} {tree} {icons} {active} {getLink} {getColor} />
+      </li>
+    {/key}
   {/each}
 </ul>

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

@@ -2,18 +2,21 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
-  import { mdiChevronDown, mdiChevronRight, mdiFolder, mdiFolderOutline } from '@mdi/js';
+  import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
 
   export let tree: RecursiveObject;
   export let parent: string;
   export let value: string;
   export let active = '';
+  export let icons: { default: string; active: string };
   export let getLink: (path: string) => string;
+  export let getColor: (path: string) => string | undefined;
 
   $: path = normalizeTreePath(`${parent}/${value}`);
   $: isActive = active.startsWith(path);
   $: isOpen = isActive;
   $: isTarget = active === path;
+  $: color = getColor(path);
 </script>
 
 <a
@@ -21,13 +24,18 @@
   title={value}
   class={`flex flex-grow place-items-center pl-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
 >
-  <button type="button" on:click|preventDefault={() => (isOpen = !isOpen)}>
+  <button
+    type="button"
+    on:click|preventDefault={() => (isOpen = !isOpen)}
+    class={Object.values(tree).length === 0 ? 'invisible' : ''}
+  >
     <Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
   </button>
   <div>
     <Icon
-      path={isActive ? mdiFolder : mdiFolderOutline}
+      path={isActive ? icons.active : icons.default}
       class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
+      {color}
       size={20}
     />
   </div>
@@ -35,5 +43,5 @@
 </a>
 
 {#if isOpen}
-  <TreeItems parent={path} items={tree} {active} {getLink} />
+  <TreeItems parent={path} items={tree} {icons} {active} {getLink} {getColor} />
 {/if}