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/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>