use showDialog directly

web/src/lib/components/workflows/WorkflowSummary.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import type { PluginActionResponseDto, PluginFilterResponseDto, PluginTriggerResponseDto } from '@immich/sdk';
+  import {
+    PluginTriggerType,
+    type PluginActionResponseDto,
+    type PluginFilterResponseDto,
+    type PluginTriggerResponseDto,
+  } from '@immich/sdk';
   import { Icon, IconButton, Text } from '@immich/ui';
   import { mdiClose, mdiFilterOutline, mdiFlashOutline, mdiPlayCircleOutline, mdiViewDashboardOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -12,6 +17,20 @@
 
   let { trigger, filters, actions }: Props = $props();
 
+  const getTriggerName = (triggerType: PluginTriggerType) => {
+    switch (triggerType) {
+      case PluginTriggerType.AssetCreate: {
+        return $t('trigger_asset_uploaded');
+      }
+      case PluginTriggerType.PersonRecognized: {
+        return $t('trigger_person_recognized');
+      }
+      default: {
+        return triggerType;
+      }
+    }
+  };
+
   let isOpen = $state(false);
   let position = $state({ x: 0, y: 0 });
   let isDragging = $state(false);
@@ -96,7 +115,7 @@
             <Icon icon={mdiFlashOutline} size="18" class="text-primary" />
             <span class="text-[10px] font-semibold uppercase tracking-wide">{$t('trigger')}</span>
           </div>
-          <p class="text-sm truncate pl-5">{trigger.name}</p>
+          <p class="text-sm truncate pl-5">{getTriggerName(trigger.type)}</p>
         </div>
 
         <!-- Connector -->

web/src/lib/components/workflows/WorkflowTriggerCard.svelte

@@ -2,6 +2,7 @@
   import { PluginTriggerType, type PluginTriggerResponseDto } from '@immich/sdk';
   import { Icon, Text } from '@immich/ui';
   import { mdiFaceRecognition, mdiFileUploadOutline, mdiLightningBolt } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     trigger: PluginTriggerResponseDto;
@@ -24,6 +25,34 @@
       }
     }
   };
+
+  const getTriggerName = (triggerType: PluginTriggerType) => {
+    switch (triggerType) {
+      case PluginTriggerType.AssetCreate: {
+        return $t('trigger_asset_uploaded');
+      }
+      case PluginTriggerType.PersonRecognized: {
+        return $t('trigger_person_recognized');
+      }
+      default: {
+        return triggerType;
+      }
+    }
+  };
+
+  const getTriggerDescription = (triggerType: PluginTriggerType) => {
+    switch (triggerType) {
+      case PluginTriggerType.AssetCreate: {
+        return $t('trigger_asset_uploaded_description');
+      }
+      case PluginTriggerType.PersonRecognized: {
+        return $t('trigger_person_recognized_description');
+      }
+      default: {
+        return '';
+      }
+    }
+  };
 </script>
 
 <button
@@ -42,9 +71,9 @@
       <Icon icon={getTriggerIcon(trigger.type)} size="24" />
     </div>
     <div class="flex-1">
-      <Text class="font-semibold mb-1">{trigger.name}</Text>
-      {#if trigger.description}
-        <Text size="small">{trigger.description}</Text>
+      <Text class="font-semibold mb-1">{getTriggerName(trigger.type)}</Text>
+      {#if getTriggerDescription(trigger.type)}
+        <Text size="small">{getTriggerDescription(trigger.type)}</Text>
       {/if}
     </div>
   </div>

web/src/lib/modals/WorkflowDeleteConfirmModal.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { ConfirmModal } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: (confirmed: boolean) => void;
-  };
-
-  let { onClose }: Props = $props();
-</script>
-
-<ConfirmModal
-  confirmColor="danger"
-  prompt={$t('workflow_delete_prompt')}
-  onClose={(confirmed) => (confirmed ? onClose(true) : onClose(false))}
-/>

web/src/lib/modals/WorkflowNavigationConfirmModal.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { ConfirmModal } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: (confirmed: boolean) => void;
-  };
-
-  let { onClose }: Props = $props();
-</script>
-
-<ConfirmModal
-  confirmColor="primary"
-  prompt={$t('workflow_navigation_prompt')}
-  onClose={(confirmed) => (confirmed ? onClose(true) : onClose(false))}
-/>

web/src/lib/modals/WorkflowTriggerUpdateConfirmModal.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { ConfirmModal } from '@immich/ui';
-  import { mdiLightningBolt } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: (confirmed: boolean) => void;
-  };
-
-  let { onClose }: Props = $props();
-</script>
-
-<ConfirmModal
-  confirmColor="primary"
-  title={$t('change_trigger')}
-  icon={mdiLightningBolt}
-  prompt={$t('change_trigger_prompt')}
-  onClose={(confirmed) => (confirmed ? onClose(true) : onClose(false))}
-/>

web/src/routes/(user)/utilities/workflows/+page.svelte

@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { AppRoute } from '$lib/constants';
-  import WorkflowDeleteConfirmModal from '$lib/modals/WorkflowDeleteConfirmModal.svelte';
   import type { WorkflowPayload } from '$lib/services/workflow.service';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -109,7 +108,11 @@
 
   const handleDeleteWorkflow = async (workflow: WorkflowResponseDto) => {
     try {
-      const confirmed = await modalManager.show(WorkflowDeleteConfirmModal);
+      const confirmed = await modalManager.showDialog({
+        prompt: $t('workflow_delete_prompt'),
+        confirmColor: 'danger',
+      });
+
       if (!confirmed) {
         return;
       }

web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte

@@ -9,8 +9,6 @@
   import WorkflowTriggerCard from '$lib/components/workflows/WorkflowTriggerCard.svelte';
   import { AppRoute } from '$lib/constants';
   import AddWorkflowStepModal from '$lib/modals/AddWorkflowStepModal.svelte';
-  import WorkflowNavigationConfirmModal from '$lib/modals/WorkflowNavigationConfirmModal.svelte';
-  import WorkflowTriggerUpdateConfirmModal from '$lib/modals/WorkflowTriggerUpdateConfirmModal.svelte';
   import {
     buildWorkflowPayload,
     getActionsByContext,
@@ -287,7 +285,11 @@
   };
 
   const handleTriggerChange = async (newTrigger: PluginTriggerResponseDto) => {
-    const confirmed = await modalManager.show(WorkflowTriggerUpdateConfirmModal);
+    const confirmed = await modalManager.showDialog({
+      prompt: $t('change_trigger_prompt'),
+      title: $t('change_trigger'),
+      confirmColor: 'primary',
+    });
 
     if (!confirmed) {
       return;
@@ -303,7 +305,10 @@
       cancel();
 
       modalManager
-        .show(WorkflowNavigationConfirmModal)
+        .showDialog({
+          prompt: $t('workflow_navigation_prompt'),
+          confirmColor: 'primary',
+        })
         .then((isConfirmed) => {
           if (isConfirmed && to) {
             allowNavigation = true;
@@ -398,7 +403,7 @@
 
           <CardBody>
             <div class="grid grid-cols-2 gap-4">
-              {#each triggers as trigger (trigger.name)}
+              {#each triggers as trigger (trigger.type)}
                 <WorkflowTriggerCard
                   {trigger}
                   selected={selectedTrigger.type === trigger.type}