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/photos-page/actions/tag-action.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { tagAssets } from '$lib/utils/asset-utils';
+  import { mdiTagMultipleOutline, mdiTimerSand } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
+
+  export let menuItem = false;
+
+  const text = $t('tag');
+  const icon = mdiTagMultipleOutline;
+
+  let loading = false;
+  let isOpen = false;
+
+  const { clearSelect, getOwnedAssets } = getAssetControlContext();
+
+  const handleOpen = () => (isOpen = true);
+  const handleCancel = () => (isOpen = false);
+  const handleTag = async (tagIds: string[]) => {
+    const assets = [...getOwnedAssets()];
+    loading = true;
+    const ids = await tagAssets({ tagIds, assetIds: assets.map((asset) => asset.id) });
+    if (ids) {
+      clearSelect();
+    }
+    loading = false;
+  };
+</script>
+
+{#if menuItem}
+  <MenuOption {text} {icon} onClick={handleOpen} />
+{/if}
+
+{#if !menuItem}
+  {#if loading}
+    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
+  {:else}
+    <CircleIconButton title={text} {icon} on:click={handleOpen} />
+  {/if}
+{/if}
+
+{#if isOpen}
+  <TagAssetForm onTag={(tagIds) => handleTag(tagIds)} onCancel={handleCancel} />
+{/if}