pr feedback

web/src/lib/modals/AddWorkflowStepModal.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
   import type { PluginActionResponseDto, PluginFilterResponseDto } from '@immich/sdk';
-  import { Icon, Modal, ModalBody } from '@immich/ui';
+  import { Icon, Modal, ModalBody, Text } from '@immich/ui';
   import { mdiFilterOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
     filters: PluginFilterResponseDto[];
     actions: PluginActionResponseDto[];
-    addedFilters?: PluginFilterResponseDto[];
-    addedActions?: PluginActionResponseDto[];
     onClose: (result?: { type: 'filter' | 'action'; item: PluginFilterResponseDto | PluginActionResponseDto }) => void;
     type?: 'filter' | 'action';
   }
 
-  let { filters, actions, addedFilters = [], addedActions = [], onClose, type }: Props = $props();
-
-  // Filter out already-added items
-  const availableFilters = $derived(filters.filter((f) => !addedFilters.some((af) => af.id === f.id)));
-  const availableActions = $derived(actions.filter((a) => !addedActions.some((aa) => aa.id === a.id)));
+  let { filters, actions, onClose, type }: Props = $props();
 
   type StepType = 'filter' | 'action';
 
@@ -30,7 +24,7 @@
   <ModalBody>
     <div class="space-y-6">
       <!-- Filters Section -->
-      {#if availableFilters.length > 0 && (!type || type === 'filter')}
+      {#if filters.length > 0 && (!type || type === 'filter')}
         <div class="flex items-center gap-2 mb-3">
           <div class="h-6 w-6 rounded-md bg-warning-100 flex items-center justify-center">
             <Icon icon={mdiFilterOutline} size="16" class="text-warning" />
@@ -38,7 +32,7 @@
           <h3 class="text-sm font-semibold">Filters</h3>
         </div>
         <div class="grid grid-cols-1 gap-2">
-          {#each availableFilters as filter (filter.id)}
+          {#each filters as filter (filter.id)}
             <button
               type="button"
               onclick={() => handleSelect('filter', filter)}
@@ -56,7 +50,7 @@
       {/if}
 
       <!-- Actions Section -->
-      {#if availableActions.length > 0 && (!type || type === 'action')}
+      {#if actions.length > 0 && (!type || type === 'action')}
         <div>
           <div class="flex items-center gap-2 mb-3">
             <div class="h-6 w-6 rounded-md bg-success-50 flex items-center justify-center">
@@ -65,7 +59,7 @@
             <h3 class="text-sm font-semibold">Actions</h3>
           </div>
           <div class="grid grid-cols-1 gap-2">
-            {#each availableActions as action (action.id)}
+            {#each actions as action (action.id)}
               <button
                 type="button"
                 onclick={() => handleSelect('action', action)}
@@ -74,7 +68,7 @@
                 <div class="flex-1">
                   <p class="font-medium text-sm">{action.title}</p>
                   {#if action.description}
-                    <p class="text-xs text-light-500 mt-1">{action.description}</p>
+                    <Text size="small" class="text-light-500 mt-1">{action.description}</Text>
                   {/if}
                 </div>
               </button>