chore: rework tags sidebar (#25855)

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

@@ -14,6 +14,7 @@
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { imageManager } from '$lib/managers/ImageManager.svelte';
   import { Route } from '$lib/route';
+  import { getAssetActions } from '$lib/services/asset.service';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
@@ -36,6 +37,7 @@
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
+  import { CommandPaletteDefaultProvider } from '@immich/ui';
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -426,8 +428,11 @@
       !assetViewerManager.isShowEditor &&
       ocrManager.hasOcrData,
   );
+
+  const { Tag } = $derived(getAssetActions($t, asset));
 </script>
 
+<CommandPaletteDefaultProvider name={$t('assets')} actions={[Tag]} />
 <OnEvents {onAssetReplace} {onAssetUpdate} />
 
 <svelte:document bind:fullscreenElement />

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

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
   import { Route } from '$lib/route';
+  import { getAssetActions } from '$lib/services/asset.service';
   import { removeTag } from '$lib/utils/asset-utils';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-  import { Icon, modalManager, Text } from '@immich/ui';
-  import { mdiClose, mdiPlus } from '@mdi/js';
+  import { Badge, IconButton, Link, Text } from '@immich/ui';
+  import { mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -18,22 +19,23 @@
 
   let tags = $derived(asset.tags || []);
 
-  const handleAddTag = async () => {
-    const success = await modalManager.show(AssetTagModal, { assetIds: [asset.id] });
-    if (success) {
-      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 });
     }
   };
+
+  const onAssetsTag = async (ids: string[]) => {
+    if (ids.includes(asset.id)) {
+      asset = await getAssetInfo({ id: asset.id });
+    }
+  };
+
+  const { Tag } = $derived(getAssetActions($t, asset));
 </script>
 
-<svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: handleAddTag }} />
+<OnEvents {onAssetsTag} />
 
 {#if isOwner && !authManager.isSharedLink}
   <section class="px-4 mt-4">
@@ -42,36 +44,24 @@
     </div>
     <section class="flex flex-wrap pt-2 gap-1" data-testid="detail-panel-tags">
       {#each tags as tag (tag.id)}
-        <div class="flex group transition-all">
-          <a
-            class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+        <Badge size="small" class="items-center px-0" shape="round">
+          <Link
             href={Route.tags({ path: tag.value })}
+            class="text-light no-underline rounded-full hover:bg-primary-400 px-2"
           >
-            <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-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            title="Remove tag"
+            {tag.value}
+          </Link>
+          <IconButton
+            aria-label={$t('remove_tag')}
+            icon={mdiClose}
             onclick={() => handleRemove(tag.id)}
-          >
-            <Icon icon={mdiClose} />
-          </button>
-        </div>
+            size="tiny"
+            class="hover:bg-primary-400"
+            shape="round"
+          />
+        </Badge>
       {/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={$t('add_tag')}
-        onclick={handleAddTag}
-      >
-        <span class="text-sm px-1 flex place-items-center place-content-center gap-1"
-          ><Icon icon={mdiPlus} />{$t('add')}</span
-        >
-      </button>
+      <HeaderActionButton action={Tag} />
     </section>
   </section>
 {/if}

web/src/lib/components/timeline/actions/TagAction.svelte

@@ -20,11 +20,8 @@
 
   const handleTagAssets = async () => {
     const assets = [...getOwnedAssets()];
-    const success = await modalManager.show(AssetTagModal, { assetIds: assets.map(({ id }) => id) });
-
-    if (success) {
-      clearSelect();
-    }
+    await modalManager.show(AssetTagModal, { assetIds: assets.map(({ id }) => id) });
+    clearSelect();
   };
 </script>