From 76ec9e3ebf05652e623caf91e6e5d9838cf2cb6f Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Fri, 5 Dec 2025 16:47:46 +0000
Subject: [PATCH] refactor ActionItem

---
 web/src/lib/managers/event-manager.svelte.ts  |  4 +++
 web/src/lib/services/workflow.service.ts      |  3 ++
 .../(user)/utilities/workflows/+page.svelte   | 31 +++++++------------
 .../workflows/[workflowId]/+page.svelte       |  2 +-
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts
index 66a2db8787..dff27ef4fd 100644
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -8,6 +8,7 @@ import type {
   SharedLinkResponseDto,
   SystemConfigDto,
   UserAdminResponseDto,
+  WorkflowResponseDto,
 } from '@immich/sdk';
 
 export type Events = {
@@ -42,6 +43,9 @@ export type Events = {
   LibraryUpdate: [LibraryResponseDto];
   LibraryDelete: [{ id: string }];
 
+  WorkflowUpdate: [WorkflowResponseDto];
+  WorkflowDelete: [WorkflowResponseDto];
+
   ReleaseEvent: [ReleaseEvent];
 };
 
diff --git a/web/src/lib/services/workflow.service.ts b/web/src/lib/services/workflow.service.ts
index 3fe4691c25..f42f15cb10 100644
--- a/web/src/lib/services/workflow.service.ts
+++ b/web/src/lib/services/workflow.service.ts
@@ -1,5 +1,6 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -377,6 +378,7 @@ export const handleToggleWorkflowEnabled = async (
       workflowUpdateDto: { enabled: !workflow.enabled },
     });
 
+    eventManager.emit('WorkflowUpdate', updated);
     toastManager.success($t('workflow_updated'));
     return updated;
   } catch (error) {
@@ -398,6 +400,7 @@ export const handleDeleteWorkflow = async (workflow: WorkflowResponseDto): Promi
 
   try {
     await deleteWorkflow({ id: workflow.id });
+    eventManager.emit('WorkflowDelete', workflow);
     toastManager.success($t('workflow_deleted'));
     return true;
   } catch (error) {
diff --git a/web/src/routes/(user)/utilities/workflows/+page.svelte b/web/src/routes/(user)/utilities/workflows/+page.svelte
index af66adb31d..84924901c8 100644
--- a/web/src/routes/(user)/utilities/workflows/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import emptyWorkflows from '$lib/assets/empty-workflows.svg';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     getWorkflowActions,
     getWorkflowShowSchemaAction,
     handleCreateWorkflow,
-    handleDeleteWorkflow,
-    handleToggleWorkflowEnabled,
     type WorkflowPayload,
   } from '$lib/services/workflow.service';
   import type { PluginFilterResponseDto, WorkflowResponseDto } from '@immich/sdk';
@@ -91,18 +90,14 @@
 
   const getJson = (workflow: WorkflowResponseDto) => JSON.stringify(constructPayload(workflow), null, 2);
 
-  const onToggleEnabled = async (workflow: WorkflowResponseDto) => {
-    const updated = await handleToggleWorkflowEnabled(workflow);
-    if (updated) {
-      workflows = workflows.map((w) => (w.id === updated.id ? updated : w));
-    }
+  const onWorkflowUpdate = (updatedWorkflow: WorkflowResponseDto) => {
+    workflows = workflows.map((currentWorkflow) =>
+      currentWorkflow.id === updatedWorkflow.id ? updatedWorkflow : currentWorkflow,
+    );
   };
 
-  const onDeleteWorkflow = async (workflow: WorkflowResponseDto) => {
-    const deleted = await handleDeleteWorkflow(workflow);
-    if (deleted) {
-      workflows = workflows.filter((w) => w.id !== workflow.id);
-    }
+  const onWorkflowDelete = (deletedWorkflow: WorkflowResponseDto) => {
+    workflows = workflows.filter((currentWorkflow) => currentWorkflow.id !== deletedWorkflow.id);
   };
 
   const getFilterLabel = (filterId: string) => {
@@ -135,22 +130,18 @@
       target: event.currentTarget as HTMLElement,
       position: 'top-left',
       items: [
-        {
-          ...ToggleEnabled,
-          onAction: () => void onToggleEnabled(workflow),
-        },
+        ToggleEnabled,
         Edit,
         getWorkflowShowSchemaAction($t, expandedWorkflows.has(workflow.id), () => toggleShowingSchema(workflow.id)),
         MenuItemType.Divider,
-        {
-          ...Delete,
-          onAction: () => void onDeleteWorkflow(workflow),
-        },
+        Delete,
       ],
     });
   };
 </script>
 
+<OnEvents {onWorkflowUpdate} {onWorkflowDelete} />
+
 {#snippet chipItem(title: string)}
   <span class="rounded-xl border border-gray-200/80 px-3 py-1.5 text-sm dark:border-gray-600 bg-light">
     <span class="font-medium text-dark">{title}</span>
diff --git a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
index 6248d5ae10..61f7402c35 100644
--- a/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte
@@ -533,7 +533,7 @@
                     isDragging: draggedActionIndex === index,
                     isDragOver: dragOverActionIndex === index,
                   })}
-                  class="mb-4 cursor-move rounded-2xl border-2 p-4 transition-all bg-light-100 border-dashed hover:border-light-300"
+                  class="mb-4 cursor-move rounded-2xl border-2 p-4 transition-all bg-light-50 border-dashed hover:border-light-300"
                 >
                   <div class="flex items-start gap-4">
                     {@render cardOrder(index)}