feat: workflow step card with drag-n-drop ghost target

web/src/lib/attachments/drag-auto-scroll.svelte.ts

@@ -0,0 +1,65 @@
+import type { Attachment } from 'svelte/attachments';
+
+const EDGE_ZONE = 72;
+const MAX_SCROLL_SPEED = 22;
+
+const findScrollContainer = (element: HTMLElement): HTMLElement | null => {
+  let node = element.parentElement;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+};
+
+export function dragAutoScroll(isActive: () => boolean): Attachment {
+  return (node) => {
+    const element = node as HTMLElement;
+    let scrollContainer: HTMLElement | null = null;
+    let pointerY = -1;
+    let frame: number | null = null;
+
+    const trackPointer = (event: DragEvent) => {
+      pointerY = event.clientY;
+    };
+
+    const tick = () => {
+      if (scrollContainer && pointerY >= 0) {
+        const { top, bottom } = scrollContainer.getBoundingClientRect();
+        let delta = 0;
+        if (pointerY < top + EDGE_ZONE) {
+          delta = -MAX_SCROLL_SPEED * Math.min(1, (top + EDGE_ZONE - pointerY) / EDGE_ZONE);
+        } else if (pointerY > bottom - EDGE_ZONE) {
+          delta = MAX_SCROLL_SPEED * Math.min(1, (pointerY - (bottom - EDGE_ZONE)) / EDGE_ZONE);
+        }
+        if (delta !== 0) {
+          scrollContainer.scrollBy(0, delta);
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    };
+
+    $effect(() => {
+      if (!isActive()) {
+        return;
+      }
+
+      scrollContainer = findScrollContainer(element);
+      pointerY = -1;
+      globalThis.addEventListener('dragover', trackPointer);
+      frame = requestAnimationFrame(tick);
+
+      return () => {
+        globalThis.removeEventListener('dragover', trackPointer);
+        if (frame !== null) {
+          cancelAnimationFrame(frame);
+          frame = null;
+        }
+        scrollContainer = null;
+      };
+    });
+  };
+}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { beforeNavigate, goto, invalidate } from '$app/navigation';
+  import { dragAutoScroll } from '$lib/attachments/drag-auto-scroll.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import WorkflowAddStepModal from '$lib/modals/WorkflowAddStepModal.svelte';
   import WorkflowEditStepModal from '$lib/modals/WorkflowEditStepModal.svelte';
@@ -7,7 +8,7 @@
   import { Route } from '$lib/route';
   import { getWorkflowActions, handleUpdateWorkflow } from '$lib/services/workflow.service';
   import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto, WorkflowUpdateDto } from '@immich/sdk';
+  import type { WorkflowResponseDto, WorkflowStepDto, WorkflowUpdateDto } from '@immich/sdk';
   import {
     ActionBar,
     AppShell,
@@ -43,7 +44,10 @@
     mdiPlus,
   } from '@mdi/js';
   import { cloneDeep, isEqual } from 'lodash-es';
+  import { flip } from 'svelte/animate';
+  import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
+  import { createListReorder, GHOST_KEY, type ReorderEntry } from './list-reorder.svelte';
   import type { PageData } from './$types';
   import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
   import WorkflowStepCard from './WorkflowStepCard.svelte';
@@ -69,6 +73,11 @@
   let isSaving = $state(false);
   let editMode = $state<EditMode>('visual');
 
+  const reorder = createListReorder(
+    () => steps,
+    (next) => (steps = next),
+  );
+
   const workflowSummary = $derived({ name, description, trigger, steps });
   const workflowJsonContent = $derived<WorkflowJsonContent>({ name, description, enabled, trigger, steps });
 
@@ -106,19 +115,6 @@
     }
   };
 
-  const handleDrop = (index: number, event: DragEvent) => {
-    if (!event.dataTransfer) {
-      return;
-    }
-
-    const from = Number(event.dataTransfer.getData('text/plain'));
-
-    const next = [...steps];
-    const [moved] = next.splice(from, 1);
-    next.splice(index, 0, moved);
-    steps = next;
-  };
-
   const handleDeleteStep = async (index: number) => {
     const confirmed = await modalManager.showDialog({ title: $t('step_delete'), prompt: $t('step_delete_confirm') });
     if (confirmed) {
@@ -344,17 +340,51 @@
           </CardHeader>
         </Card>
 
-        {#each steps as step, index (step.method + index)}
+        <div class="hidden" aria-hidden="true" {@attach dragAutoScroll(() => reorder.isDragging)}></div>
+
+        {#snippet stepCard(entry: ReorderEntry<WorkflowStepDto>)}
           <WorkflowStepCard
-            {step}
-            {index}
+            step={entry.item}
+            index={entry.index}
+            position={entry.index + 1}
+            isGhost={entry.isGhost}
+            isSource={entry.isSource}
+            isDragging={reorder.isDragging}
             onEdit={handleEditStep}
             onDelete={handleDeleteStep}
             onInsertBefore={handleInsertStep}
-            onDrop={handleDrop}
+            onDragStart={reorder.start}
+            onDragOver={reorder.over}
+            onDragEnd={reorder.end}
+            onDrop={reorder.drop}
           />
+        {/snippet}
+
+        {#each reorder.entries as entry (entry.isGhost ? GHOST_KEY : entry.item)}
+          <div class="w-full" animate:flip={{ duration: 200 }}>
+            {#if entry.isGhost}
+              <div transition:fade={{ duration: 120 }}>{@render stepCard(entry)}</div>
+            {:else}
+              {@render stepCard(entry)}
+            {/if}
+          </div>
         {/each}
 
+        {#if reorder.isDragging}
+          <div
+            class="-mt-4 min-h-12 w-full"
+            role="listitem"
+            ondragover={(event) => {
+              event.preventDefault();
+              reorder.toEnd();
+            }}
+            ondrop={(event) => {
+              event.preventDefault();
+              reorder.drop();
+            }}
+          ></div>
+        {/if}
+
         <Button
           size="small"
           fullWidth

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte

@@ -17,13 +17,34 @@
   type Props = {
     step: WorkflowStepDto;
     index: number;
+    position: number;
+    isGhost: boolean;
+    isSource: boolean;
+    isDragging: boolean;
     onEdit: (index: number) => void;
     onDelete: (index: number) => void;
     onInsertBefore: (index: number) => void;
-    onDrop: (index: number, event: DragEvent) => void;
+    onDragStart: (index: number) => void;
+    onDragOver: (index: number, after: boolean) => void;
+    onDragEnd: () => void;
+    onDrop: () => void;
   };
 
-  let { step, index, onEdit, onDelete, onInsertBefore, onDrop }: Props = $props();
+  let {
+    step,
+    index,
+    position,
+    isGhost,
+    isSource,
+    isDragging,
+    onEdit,
+    onDelete,
+    onInsertBefore,
+    onDragStart,
+    onDragOver,
+    onDragEnd,
+    onDrop,
+  }: Props = $props();
 
   const method = $derived(pluginManager.getMethod(step.method));
   const isFilter = $derived(method?.uiHints?.includes('Filter') ?? false);
@@ -31,9 +52,24 @@
     Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
   );
   let dragImage = $state<Element>();
-  let isDropTarget = $state(false);
   let hoverDrag = $state(false);
 
+  const cardStateClass = $derived.by(() => {
+    if (isGhost) {
+      return 'pointer-events-none border-2 border-dashed border-primary bg-primary-50/40 shadow-lg';
+    }
+
+    if (isSource) {
+      return 'border-dashed border-primary-300 bg-primary-50/20';
+    }
+
+    if (hoverDrag) {
+      return 'border-dashed border-primary';
+    }
+
+    return '';
+  });
+
   const truncate = (input: string, max = 24) => (input.length > max ? input.slice(0, max - 1) + '…' : input);
 
   const formatConfigValue = (value: unknown): string => {
@@ -83,31 +119,31 @@
 
     dragImage = document.body.querySelector('#workflow-step-drag-image')!;
     event.dataTransfer.setDragImage(dragImage, 16, 22);
+
+    onDragStart(index);
   };
 
-  const handleDrop = (index: number, event: DragEvent) => {
-    if (!event.dataTransfer) {
-      return;
-    }
+  const handleDrop = (event: DragEvent) => {
     event.preventDefault();
+    onDrop();
+  };
 
-    const from = Number(event.dataTransfer.getData('text/plain'));
-    if (from === index) {
+  const handleDragOver = (event: DragEvent & { currentTarget: HTMLElement }) => {
+    event.preventDefault();
+    if (isGhost) {
       return;
     }
 
-    onDrop(index, event);
-  };
-
-  const handleDragOver = (event: DragEvent) => {
-    event.preventDefault();
-    isDropTarget = true;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const after = event.clientY > rect.top + rect.height / 2;
+    onDragOver(index, after);
   };
 
   const handleDragEnd = () => {
     dragImage?.remove();
     dragImage = undefined;
-    isDropTarget = false;
+    hoverDrag = false;
+    onDragEnd();
   };
 </script>
 
@@ -118,6 +154,7 @@
       <button
         type="button"
         class="absolute top-1/2 left-1/2 z-10 -translate-1/2 cursor-pointer rounded-full border border-dashed border-primary-200 bg-light p-0.5 text-primary opacity-0 transition-opacity group-hover/step-row:opacity-100 hover:bg-primary-50"
+        class:hidden={isDragging}
         aria-label={$t('add_step')}
         title={$t('add_step')}
         onclick={() => onInsertBefore(index)}
@@ -129,20 +166,12 @@
 
   <div
     class="w-full transition-all"
-    class:opacity-40={!!dragImage}
-    class:scale-[0.99]={!!dragImage}
+    class:opacity-50={isSource}
     ondragover={handleDragOver}
-    ondragleave={() => (isDropTarget = false)}
-    ondrop={(event) => handleDrop(index, event)}
+    ondrop={handleDrop}
     role="listitem"
   >
-    <Card
-      class="shadow-none transition-colors {isDropTarget
-        ? 'border-primary ring-2 ring-primary-200'
-        : hoverDrag
-          ? 'border-dashed border-primary'
-          : ''}"
-    >
+    <Card class="shadow-none transition-colors {cardStateClass}">
       <CardHeader>
         <div class="flex items-center gap-2">
           <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -171,7 +200,9 @@
           </div>
           <div class="flex min-w-0 flex-1 flex-col">
             <CardTitle class="truncate">
-              <span class="mr-1 font-bold text-light-500">{index + 1}</span>
+              {#if !isGhost}
+                <span class="mr-1 font-bold text-light-500">{position}</span>
+              {/if}
               {pluginManager.getMethodLabel(step.method)}
             </CardTitle>
             {#if method?.description}

web/src/routes/(user)/workflows/[workflowId]/list-reorder.svelte.ts

@@ -0,0 +1,78 @@
+export const GHOST_KEY = 'reorder-ghost';
+
+export type ReorderEntry<T> = {
+  item: T;
+  index: number;
+  isGhost: boolean;
+  isSource: boolean;
+};
+
+export function createListReorder<T>(getItems: () => T[], setItems: (items: T[]) => void) {
+  let draggingIndex = $state<number | null>(null);
+  let dropIndex = $state<number | null>(null);
+
+  const entries = $derived.by<ReorderEntry<T>[]>(() => {
+    const items = getItems();
+    const list: ReorderEntry<T>[] = items.map((item, index) => ({
+      item,
+      index,
+      isGhost: false,
+      isSource: index === draggingIndex,
+    }));
+
+    if (
+      draggingIndex !== null &&
+      dropIndex !== null &&
+      dropIndex !== draggingIndex &&
+      dropIndex !== draggingIndex + 1
+    ) {
+      list.splice(dropIndex, 0, { item: items[draggingIndex], index: draggingIndex, isGhost: true, isSource: false });
+    }
+
+    return list;
+  });
+
+  return {
+    get isDragging() {
+      return draggingIndex !== null;
+    },
+    get entries() {
+      return entries;
+    },
+    start(index: number) {
+      draggingIndex = index;
+      dropIndex = index;
+    },
+    over(index: number, after: boolean) {
+      if (draggingIndex === null) {
+        return;
+      }
+      dropIndex = Math.max(0, Math.min(index + (after ? 1 : 0), getItems().length));
+    },
+    toEnd() {
+      if (draggingIndex !== null) {
+        dropIndex = getItems().length;
+      }
+    },
+    end() {
+      draggingIndex = null;
+      dropIndex = null;
+    },
+    drop() {
+      if (draggingIndex === null || dropIndex === null) {
+        return;
+      }
+
+      const target = dropIndex > draggingIndex ? dropIndex - 1 : dropIndex;
+      if (target !== draggingIndex) {
+        const next = [...getItems()];
+        const [moved] = next.splice(draggingIndex, 1);
+        next.splice(target, 0, moved);
+        setItems(next);
+      }
+
+      draggingIndex = null;
+      dropIndex = null;
+    },
+  };
+}