From 58586483dc6bd34c80be112ef1f6a6ace4fa8b4b Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Fri, 29 May 2026 10:37:37 -0500
Subject: [PATCH] feat: render album's name in workflow step card (#28680)

* feat: render album name in step card body

* clean up

* i18n
---
 .../[workflowId]/WorkflowStepCard.svelte      | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
index d6b20d3cc8..6110572e5b 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
@@ -1,5 +1,25 @@
+<script module lang="ts">
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { getAlbumInfo } from '@immich/sdk';
+
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const albumNameCache = new Map<string, Promise<string>>();
+
+  const getAlbumName = (id: string): Promise<string> => {
+    let albumName = albumNameCache.get(id);
+    if (!albumName) {
+      albumName = getAlbumInfo({ ...authManager.params, id })
+        .then((album) => album.albumName)
+        .catch(() => id);
+      albumNameCache.set(id, albumName);
+    }
+    return albumName;
+  };
+</script>
+
 <script lang="ts">
   import { pluginManager } from '$lib/managers/plugin-manager.svelte';
+  import type { JSONSchemaProperty } from '$lib/types';
   import type { WorkflowStepDto } from '@immich/sdk';
   import { Badge, Card, CardBody, CardDescription, CardHeader, CardTitle, Icon, IconButton } from '@immich/ui';
   import {
@@ -27,9 +47,13 @@
 
   const method = $derived(pluginManager.getMethod(step.method));
   const isFilter = $derived(method?.uiHints?.includes('Filter') ?? false);
+  const schema = $derived(method?.schema as JSONSchemaProperty | undefined);
   const configEntries = $derived(
     Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
   );
+
+  const getUiHint = (key: string) => schema?.properties?.[key]?.uiHint;
+  const toIds = (value: unknown): string[] => (Array.isArray(value) ? value.map(String) : [String(value)]);
   let dragImage = $state<Element>();
   let isDropTarget = $state(false);
   let hoverDrag = $state(false);
@@ -204,15 +228,28 @@
       {#if configEntries.length > 0}
         <CardBody class="py-3">
           <div class="flex flex-wrap items-center gap-1.5">
-            {#each configEntries as [key, value] (key)}
+            {#snippet badge(key: string, content: string)}
               <Badge
                 color={isFilter ? 'info' : 'warning'}
                 shape="round"
                 size="small"
                 class="border font-mono {isFilter ? 'border-primary-200' : 'border-warning-200'}"
               >
-                <span class="opacity-60">{key}</span>{formatConfigValue(value)}
+                <span class="opacity-60">{key}</span>{content}
               </Badge>
+            {/snippet}
+            {#each configEntries as [key, value] (key)}
+              {#if getUiHint(key) === 'AlbumId'}
+                {#each toIds(value) as albumId (albumId)}
+                  {#await getAlbumName(albumId)}
+                    {@render badge($t('album'), '…')}
+                  {:then albumName}
+                    {@render badge($t('album'), `"${truncate(albumName)}"`)}
+                  {/await}
+                {/each}
+              {:else}
+                {@render badge(key, formatConfigValue(value))}
+              {/if}
             {/each}
           </div>
         </CardBody>