Merge remote-tracking branch 'origin/main' into feat/yucca-integration

2026-08-22 13:13:05 +00:00 · 2026-06-01 10:04:33 +01:00 · 2026-06-01 10:04:33 +01:00 · cf6cbfdcd6
commit cf6cbfdcd6
parent 676831f052 2382894fa2
407 changed files with 25974 additions and 10708 deletions
--- a/web/package.json
+++ b/web/package.json
@ -28,7 +28,7 @@
    "@futo-org/backups-orchestrator-ui": "0.1.73",
    "@immich/justified-layout-wasm": "^0.4.3",
    "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.77.0",
+    "@immich/ui": "^0.79.2",
    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
    "@mdi/js": "^7.4.47",
    "@noble/hashes": "^2.2.0",
@ -77,7 +77,7 @@
    "@sveltejs/adapter-static": "^3.0.8",
    "@sveltejs/enhanced-img": "^0.10.4",
    "@sveltejs/kit": "^2.56.1",
-    "@sveltejs/vite-plugin-svelte": "7.0.0",
+    "@sveltejs/vite-plugin-svelte": "7.1.2",
    "@tailwindcss/vite": "^4.2.4",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/svelte": "^5.2.8",
--- a/web/src/app.css
+++ b/web/src/app.css
@ -34,7 +34,7 @@
 }

@utility immich-form-input {
-  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
+  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-primary focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 dark:focus-within:ring-primary flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
 }

@utility immich-form-label {
--- a/web/src/lib/commands.ts
+++ b/web/src/lib/commands.ts
@ -1,17 +1,35 @@
 import { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
 import {
  mdiAccountMultipleOutline,
+  mdiAccountOutline,
+  mdiArchiveArrowDownOutline,
  mdiBookshelf,
  mdiCog,
+  mdiContentDuplicate,
+  mdiCrosshairsGps,
+  mdiFolderOutline,
+  mdiHeartOutline,
+  mdiImageAlbum,
+  mdiImageMultipleOutline,
+  mdiImageSizeSelectLarge,
  mdiKeyboard,
+  mdiLink,
+  mdiLockOutline,
+  mdiMagnify,
+  mdiMapOutline,
  mdiServer,
+  mdiStateMachine,
  mdiSync,
+  mdiTagMultipleOutline,
  mdiThemeLightDark,
+  mdiToolboxOutline,
+  mdiTrashCanOutline,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
 import { Route } from '$lib/route';
 import { copyToClipboard } from '$lib/utils';

@ -49,7 +67,133 @@ export const getPagesProvider = ($t: MessageFormatter) => {
    },
  ].map((route) => ({ ...route, $if: () => authManager.authenticated && authManager.user.isAdmin }));

-  return defaultProvider({ name: $t('page'), actions: adminPages });
+  const userPages: ActionItem[] = [
+    {
+      title: $t('photos'),
+      icon: mdiImageMultipleOutline,
+      onAction: () => goto(Route.photos()),
+    },
+    {
+      title: $t('explore'),
+      icon: mdiMagnify,
+      onAction: () => goto(Route.explore()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.search,
+    },
+
+    {
+      title: $t('map'),
+      icon: mdiMapOutline,
+      onAction: () => goto(Route.map()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.map,
+    },
+    {
+      title: $t('people'),
+      description: $t('people_feature_description'),
+      icon: mdiAccountOutline,
+      onAction: () => goto(Route.people()),
+      $if: () => authManager.authenticated && authManager.preferences.people.enabled,
+    },
+    {
+      title: $t('shared_links'),
+      icon: mdiLink,
+      onAction: () => goto(Route.sharedLinks()),
+      $if: () => authManager.authenticated && authManager.preferences.sharedLinks.enabled,
+    },
+    {
+      title: $t('recently_added'),
+      icon: mdiMagnify,
+      onAction: () => goto(Route.recentlyAdded()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('sharing'),
+      icon: mdiAccountMultipleOutline,
+      onAction: () => goto(Route.sharing()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('favorites'),
+      icon: mdiHeartOutline,
+      onAction: () => goto(Route.favorites()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('albums'),
+      description: $t('albums_feature_description'),
+      icon: mdiImageAlbum,
+      onAction: () => goto(Route.albums()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('tags'),
+      description: $t('tag_feature_description'),
+      icon: mdiTagMultipleOutline,
+      onAction: () => goto(Route.tags()),
+      $if: () => authManager.authenticated && authManager.preferences.tags.enabled,
+    },
+    {
+      title: $t('folders'),
+      description: $t('folders_feature_description'),
+      icon: mdiFolderOutline,
+      onAction: () => goto(Route.folders()),
+      $if: () => authManager.authenticated && authManager.preferences.folders.enabled,
+    },
+    {
+      title: $t('utilities'),
+      icon: mdiToolboxOutline,
+      onAction: () => goto(Route.utilities()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('archive'),
+      icon: mdiArchiveArrowDownOutline,
+      onAction: () => goto(Route.archive()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('locked_folder'),
+      icon: mdiLockOutline,
+      onAction: () => goto(Route.locked()),
+      $if: () => authManager.authenticated,
+    },
+    {
+      title: $t('trash'),
+      icon: mdiTrashCanOutline,
+      onAction: () => goto(Route.trash()),
+      $if: () => authManager.authenticated && featureFlagsManager.value.trash,
+    },
+    {
+      title: $t('admin.user_settings'),
+      icon: mdiCog,
+      onAction: () => goto(Route.userSettings()),
+      $if: () => authManager.authenticated,
+    },
+  ].map((route) => ({ $if: () => authManager.authenticated, ...route }));
+
+  const utilityPages: ActionItem[] = [
+    {
+      title: $t('review_duplicates'),
+      icon: mdiContentDuplicate,
+      onAction: () => goto(Route.duplicatesUtility()),
+    },
+    {
+      title: $t('review_large_files'),
+      icon: mdiImageSizeSelectLarge,
+      onAction: () => goto(Route.largeFileUtility()),
+    },
+    {
+      title: $t('manage_geolocation'),
+      icon: mdiCrosshairsGps,
+      onAction: () => goto(Route.geolocationUtility()),
+    },
+    {
+      title: $t('workflows'),
+      icon: mdiStateMachine,
+      onAction: () => goto(Route.workflows()),
+    },
+  ].map((route) => ({ ...route, $if: () => authManager.authenticated }));
+
+  return defaultProvider({ name: $t('page'), actions: [...userPages, ...utilityPages, ...adminPages] });
 };

 const getMyImmichLink = () => {
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@ -149,29 +149,35 @@
    return { width: 1, height: 1 };
  });

-  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    const { width, height } = scaleFn(imageDimensions, container);
-    if (maxRasterPixels === 0) {
+  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
+    () => {
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
+      if (maxRasterPixels === 0) {
+        return {
+          insetInlineStart: (container.width - width) / 2 + 'px',
+          top: (container.height - height) / 2 + 'px',
+          displayWidth: width + 'px',
+          displayHeight: height + 'px',
+          rasterWidth: width + 'px',
+          rasterHeight: height + 'px',
+          rasterScale: 1,
+        };
+      }
+      const nativeRatio = imageDimensions.width / width;
+      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
      return {
        insetInlineStart: (container.width - width) / 2 + 'px',
        top: (container.height - height) / 2 + 'px',
-        rasterWidth: width + 'px',
-        rasterHeight: height + 'px',
-        rasterScale: 1,
+        displayWidth: width + 'px',
+        displayHeight: height + 'px',
+        rasterWidth: width * rasterRatio + 'px',
+        rasterHeight: height * rasterRatio + 'px',
+        rasterScale: 1 / rasterRatio,
      };
-    }
-    const nativeRatio = imageDimensions.width / width;
-    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
-    return {
-      insetInlineStart: (container.width - width) / 2 + 'px',
-      top: (container.height - height) / 2 + 'px',
-      rasterWidth: width * rasterRatio + 'px',
-      rasterHeight: height * rasterRatio + 'px',
-      rasterScale: 1 / rasterRatio,
-    };
-  });
+    },
+  );

  const { status } = $derived(adaptiveImageLoader);
  const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@ -216,69 +222,78 @@
  {@render backdrop?.()}

  <div
-    class="pointer-events-none absolute"
+    class="pointer-events-none absolute overflow-hidden"
    style:inset-inline-start={insetInlineStart}
    style:top
-    style:width={rasterWidth}
-    style:height={rasterHeight}
-    style:transform="scale({rasterScale})"
-    style:transform-origin="0 0"
-    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    style:width={displayWidth}
+    style:height={displayHeight}
  >
-    {#if show.alphaBackground}
-      <AlphaBackground />
-    {/if}
-
-    {#if show.thumbhash}
-      {#if asset.thumbhash}
-        <!-- Thumbhash / spinner layer  -->
-        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-      {:else if show.spinner}
-        <DelayedLoadingSpinner />
+    <div
+      style:width={rasterWidth}
+      style:height={rasterHeight}
+      style:transform="scale({rasterScale})"
+      style:transform-origin="0 0"
+      style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    >
+      {#if show.alphaBackground}
+        <AlphaBackground />
      {/if}
-    {/if}

-    {#if show.thumbnail}
-      <ImageLayer
-        {adaptiveImageLoader}
-        width={rasterWidth}
-        height={rasterHeight}
-        quality="thumbnail"
-        src={status.urls.thumbnail}
-        alt=""
-        role="presentation"
-        bind:ref={thumbnailElement}
-      />
-    {/if}
+      {#if show.thumbhash}
+        {#if asset.thumbhash}
+          <!-- Thumbhash / spinner layer  -->
+          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+        {:else if show.spinner}
+          <DelayedLoadingSpinner />
+        {/if}
+      {/if}

-    {#if show.brokenAsset}
-      <BrokenAsset class="absolute size-full text-xl" />
-    {/if}
+      {#if show.thumbnail}
+        <ImageLayer
+          {adaptiveImageLoader}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="thumbnail"
+          src={status.urls.thumbnail}
+          alt=""
+          role="presentation"
+          bind:ref={thumbnailElement}
+        />
+      {/if}

-    {#if show.preview}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        width={rasterWidth}
-        height={rasterHeight}
-        {overlays}
-        quality="preview"
-        src={status.urls.preview}
-        bind:ref={previewElement}
-      />
-    {/if}
+      {#if show.brokenAsset}
+        <BrokenAsset class="absolute size-full text-xl" />
+      {/if}

-    {#if show.original}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        width={rasterWidth}
-        height={rasterHeight}
-        {overlays}
-        quality="original"
-        src={status.urls.original}
-        bind:ref={originalElement}
-      />
+      {#if show.preview}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="preview"
+          src={status.urls.preview}
+          bind:ref={previewElement}
+        />
+      {/if}
+
+      {#if show.original}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="original"
+          src={status.urls.original}
+          bind:ref={originalElement}
+        />
+      {/if}
+    </div>
+
+    {#if overlays}
+      <div class="pointer-events-none absolute inset-0">
+        {@render overlays()}
+      </div>
    {/if}
  </div>
 </div>
--- a/web/src/lib/components/ImageLayer.svelte
+++ b/web/src/lib/components/ImageLayer.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
  import Image from '$lib/components/Image.svelte';
  import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
-  import type { Snippet } from 'svelte';

  type Props = {
    adaptiveImageLoader: AdaptiveImageLoader;
@ -12,20 +11,9 @@
    ref?: HTMLImageElement;
    width: string;
    height: string;
-    overlays?: Snippet;
  };

-  let {
-    adaptiveImageLoader,
-    quality,
-    src,
-    alt = '',
-    role,
-    ref = $bindable(),
-    width,
-    height,
-    overlays,
-  }: Props = $props();
+  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
 </script>

 {#key adaptiveImageLoader}
@ -42,6 +30,5 @@
      draggable={false}
      data-testid={quality}
    />
-    {@render overlays?.()}
  </div>
 {/key}
--- a/web/src/lib/components/SchemaConfiguration.svelte
+++ b/web/src/lib/components/SchemaConfiguration.svelte
@ -64,7 +64,7 @@
      <Self schema={childSchema} key={childKey} bind:config={getValue, setValue} />
    {/each}
  </div>
-{:else if schema.uiHint === 'albumId'}
+{:else if schema.uiHint === 'AlbumId'}
  <SchemaAlbumPicker {label} {description} array={schema.array} bind:albumIds={getUiHintValue, setUiHintValue} />
 {:else if schema.enum && schema.array}
  <Field {label} {description}>
--- a/web/src/lib/components/album-page/AlbumThumbnail.svelte
+++ b/web/src/lib/components/album-page/AlbumThumbnail.svelte
@ -2,7 +2,7 @@
  import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { getAlbumInfo } from '@immich/sdk';
-  import { IconButton, LoadingSpinner } from '@immich/ui';
+  import { IconButton, Text, LoadingSpinner } from '@immich/ui';
  import { mdiTrashCanOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

@ -46,5 +46,22 @@
        />
      </div>
    </div>
+  {:catch}
+    <div class="flex justify-between gap-2">
+      <div class="flex flex-col gap-1">
+        <Text>{$t('unknown')}</Text>
+        <Text color="muted" size="small" variant="italic">{albumId}</Text>
+      </div>
+      <div class="">
+        <IconButton
+          icon={mdiTrashCanOutline}
+          shape="round"
+          color="danger"
+          variant="ghost"
+          onclick={onDelete}
+          aria-label={$t('remove')}
+        />
+      </div>
+    </div>
  {/await}
 </div>
--- a/web/src/lib/components/album-page/AlbumViewer.svelte
+++ b/web/src/lib/components/album-page/AlbumViewer.svelte
@ -103,7 +103,7 @@
      {/if}
    </AssetSelectControlBar>
  {:else}
-    <ControlAppBar showBackButton={false}>
+    <ControlAppBar>
      {#snippet leading()}
        <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
          <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
--- a/web/src/lib/components/asset-viewer/ActivityViewer.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
@ -128,7 +128,7 @@
    </div>
    {#if innerHeight}
      <div
-        class="relative w-full overflow-y-auto px-2 immich-scrollbar"
+        class="relative w-full immich-scrollbar overflow-y-auto px-2"
        style="height: {divHeight}px;padding-bottom: {chatHeight}px"
      >
        {#each activityManager.activities as reaction, index (reaction.id)}
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@ -205,11 +205,7 @@
 </script>

 <div
-  class={[
-    'group flex overflow-hidden transition-[background-color,border-radius] focus-visible:outline-none',
-    backgroundColorClass,
-    { 'rounded-xl': selected },
-  ]}
+  class={['group flex overflow-hidden focus-visible:outline-none', backgroundColorClass, { 'rounded-xl': selected }]}
  style:width="{width}px"
  style:height="{height}px"
  onmouseenter={onMouseEnter}
@ -249,16 +245,8 @@
      ]}
    >
      <ImageThumbnail
-        class={[
-          'absolute transition-[border-radius] group-focus-visible:rounded-lg',
-          { 'rounded-xl': selected },
-          imageClass,
-        ]}
-        brokenAssetClass={[
-          'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
-          { 'rounded-xl': selected },
-          brokenAssetClass,
-        ]}
+        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
        url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
        altText={$getAltText(asset)}
        widthStyle="{width}px"
--- a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
+++ b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
@ -153,7 +153,7 @@
        <LoadingSpinner />
      </div>
    {:else}
-      <div class="mt-4 flex flex-wrap gap-2 overflow-y-auto immich-scrollbar">
+      <div class="mt-4 flex immich-scrollbar flex-wrap gap-2 overflow-y-auto">
        {#each showPeople as person (person.id)}
          {#if !editedFace.person || person.id !== editedFace.person.id}
            <div class="w-fit">
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkPage.svelte
@ -91,7 +91,7 @@
    </div>
  </main>
  <header>
-    <ControlAppBar showBackButton={false}>
+    <ControlAppBar>
      {#snippet leading()}
        <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
          <Logo variant="inline" />
--- a/web/src/lib/components/share-page/IndividualSharedViewer.svelte
+++ b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
@ -18,7 +18,7 @@
  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
  import { IconButton, Logo, toastManager } from '@immich/ui';
-  import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
+  import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
  import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';
@ -97,7 +97,7 @@
        {/if}
      </AssetSelectControlBar>
    {:else}
-      <ControlAppBar onClose={() => goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}>
+      <ControlAppBar>
        {#snippet leading()}
          <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
            <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />
--- a/web/src/lib/components/shared-components/ControlAppBar.svelte
+++ b/web/src/lib/components/shared-components/ControlAppBar.svelte
@ -1,97 +1,49 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
-  import { IconButton } from '@immich/ui';
+  import { ControlBar, ControlBarContent, ControlBarHeader, ControlBarOverflow, ControlBarTitle } from '@immich/ui';
  import { mdiClose } from '@mdi/js';
-  import { onDestroy, onMount, type Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';

  interface Props {
-    showBackButton?: boolean;
    backIcon?: string;
-    tailwindClasses?: string;
-    forceDark?: boolean;
-    multiRow?: boolean;
+    class?: ClassValue;
    onClose?: () => void;
+    title?: Snippet | string;
    leading?: Snippet;
    children?: Snippet;
    trailing?: Snippet;
  }

-  let {
-    showBackButton = true,
-    backIcon = mdiClose,
-    tailwindClasses = '',
-    forceDark = false,
-    multiRow = false,
-    onClose = () => {},
-    leading,
-    children,
-    trailing,
-  }: Props = $props();
-
-  let appBarBorder = $state('border border-subtle');
-
-  const onScroll = () => {
-    if (window.scrollY > 80) {
-      appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
-
-      if (forceDark) {
-        appBarBorder = 'border border-gray-600';
-      }
-    } else {
-      appBarBorder = 'border border-subtle';
-    }
-  };
-
-  onMount(() => {
-    if (browser) {
-      document.addEventListener('scroll', onScroll, { passive: true });
-    }
-  });
-
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener('scroll', onScroll);
-    }
-  });
+  let { backIcon = mdiClose, class: className = '', onClose, title, leading, children, trailing }: Props = $props();
 </script>

-<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
-  <nav
-    id="asset-selection-app-bar"
-    class={[
-      'grid',
-      multiRow && 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]',
-      !multiRow && 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]',
-      'justify-between lg:grid-cols-[25%_50%_25%]',
-      appBarBorder,
-      'm-2 place-items-center rounded-full p-2 transition-all max-md:p-0',
-      tailwindClasses,
-      forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-light-50 dark:bg-immich-dark-gray',
-    ]}
-  >
-    <div class="flex place-items-center justify-self-start sm:gap-6 dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">
-      {#if showBackButton}
-        <IconButton
-          aria-label={$t('close')}
-          onclick={onClose}
-          color="secondary"
-          shape="round"
-          variant="ghost"
-          icon={backIcon}
-          size="large"
-        />
-      {/if}
-      {@render leading?.()}
-    </div>
+<div class="absolute top-0 w-full bg-transparent p-2" id="control-bar">
+  <ControlBar closeIcon={backIcon} {onClose} shape="round" class={className}>
+    {#if title || leading}
+      <ControlBarHeader>
+        {#if title}
+          <ControlBarTitle>
+            {#if typeof title === 'string'}
+              {title}
+            {:else}
+              {@render title()}
+            {/if}
+          </ControlBarTitle>
+        {/if}
+        {@render leading?.()}
+      </ControlBarHeader>
+    {/if}

-    <div class="w-full">
-      {@render children?.()}
-    </div>
+    {#if children}
+      <ControlBarContent>
+        {@render children()}
+      </ControlBarContent>
+    {/if}

-    <div class="me-4 flex place-items-center gap-1 justify-self-end max-[350px]:me-0 max-[350px]:gap-0">
-      {@render trailing?.()}
-    </div>
-  </nav>
+    {#if trailing}
+      <ControlBarOverflow>
+        {@render trailing()}
+      </ControlBarOverflow>
+    {/if}
+  </ControlBar>
 </div>
--- a/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
@ -64,7 +64,7 @@
 <div
  bind:this={menuScrollView}
  class={[
-    'fixed z-1 w-max max-w-75 min-w-50 rounded-lg bg-slate-100 shadow-lg duration-250 ease-in-out immich-scrollbar',
+    'fixed z-1 w-max max-w-75 min-w-50 immich-scrollbar rounded-lg bg-slate-100 shadow-lg duration-250 ease-in-out',
    position.needScrollBar ? 'overflow-auto' : 'overflow-hidden',
  ]}
  style:left="{position.left}px"
--- a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
@ -72,14 +72,14 @@
      ? filterPeople(people, name)
      : filterPeople(people, name).slice(0, numberOfPeople)}

-    <div id="people-selection" class="-mb-4 max-h-60 overflow-y-auto immich-scrollbar">
+    <div id="people-selection" class="-mb-4 max-h-60 immich-scrollbar overflow-y-auto">
      <div class="flex w-full items-center justify-between gap-6">
        <Text class="py-3" fontWeight="medium">{$t('people')}</Text>
        <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
      </div>

      <SingleGridRow
-        class="space-between mt-2 grid grid-auto-fill-20 gap-1 overflow-y-auto immich-scrollbar"
+        class="space-between mt-2 grid immich-scrollbar grid-auto-fill-20 gap-1 overflow-y-auto"
        bind:itemCount={numberOfPeople}
      >
        {#each peopleList as person (person.id)}
--- a/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
+++ b/web/src/lib/components/shared-components/tree/Breadcrumbs.svelte
@ -35,7 +35,7 @@
  {/if}

  <div
-    class="w-full overflow-y-auto rounded-2xl border border-gray-100 bg-gray-50 p-2 immich-scrollbar dark:border-gray-900 dark:bg-immich-dark-gray/50"
+    class="w-full immich-scrollbar overflow-y-auto rounded-2xl border border-gray-100 bg-gray-50 p-2 dark:border-gray-900 dark:bg-immich-dark-gray/50"
  >
    <ol class="flex items-center gap-2">
      <li>
--- a/web/src/lib/components/sidebar/Sidebar.svelte
+++ b/web/src/lib/components/sidebar/Sidebar.svelte
@ -35,7 +35,7 @@
  id="sidebar"
  aria-label={ariaLabel}
  tabindex="-1"
-  class="relative z-1 w-0 overflow-x-hidden overflow-y-auto bg-light pt-8 transition-all duration-200 immich-scrollbar sidebar:w-64"
+  class="relative z-1 w-0 immich-scrollbar overflow-x-hidden overflow-y-auto bg-light pt-8 transition-all duration-200 sidebar:w-64"
  class:shadow-2xl={isExpanded}
  class:dark:border-e-immich-dark-gray={isExpanded}
  class:border-r={isExpanded}
--- a/web/src/lib/components/timeline/AssetLayout.svelte
+++ b/web/src/lib/components/timeline/AssetLayout.svelte
@ -1,6 +1,5 @@
 <script lang="ts">
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
  import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
  import { uploadAssetsStore } from '$lib/stores/upload';
@ -35,7 +34,7 @@

 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
+  {#each viewerAssets as viewerAsset (viewerAsset.id)}
    {@const position = viewerAsset.position!}
    {@const asset = viewerAsset.asset!}

--- a/web/src/lib/components/timeline/AssetSelectControlBar.svelte
+++ b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
@ -7,19 +7,18 @@

  type Props = {
    children?: Snippet;
-    forceDark?: boolean;
  };

-  let { children, forceDark }: Props = $props();
+  let { children }: Props = $props();

  const onClose = () => assetMultiSelectManager.clear();

  const assets = $derived(assetMultiSelectManager.assets);
 </script>

-<ControlAppBar {onClose} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
+<ControlAppBar {onClose} backIcon={mdiClose}>
  {#snippet leading()}
-    <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
+    <div class="font-medium text-primary">
      <p class="block sm:hidden">{assets.length}</p>
      <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
    </div>
--- a/web/src/lib/components/timeline/Month.svelte
+++ b/web/src/lib/components/timeline/Month.svelte
@ -100,7 +100,7 @@

    <AssetLayout
      {manager}
-      viewerAssets={timelineDay.viewerAssets}
+      viewerAssets={timelineDay.activeViewerAssets}
      height={timelineDay.height}
      width={timelineDay.width}
      {customThumbnailLayout}
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@ -616,7 +616,7 @@
 <!-- Right margin MUST be equal to the width of scrubber -->
 <section
  id="asset-grid"
-  class={['h-full overflow-y-auto outline-none scrollbar-hidden', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
+  class={['h-full scrollbar-hidden overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
  style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
  tabindex="-1"
  bind:clientHeight={timelineManager.viewportHeight}
--- a/web/src/lib/elements/Dropdown.svelte
+++ b/web/src/lib/elements/Dropdown.svelte
@ -107,7 +107,7 @@
  {#if showMenu}
    <div
      transition:fly={{ y: -30, duration: 250 }}
-      class="absolute z-1 flex max-h-[70vh] min-w-75 flex-col overflow-y-auto rounded-2xl bg-gray-100 py-2 text-sm font-medium text-black shadow-lg immich-scrollbar dark:bg-gray-700 dark:text-white {className} {getAlignClass(
+      class="absolute z-1 flex max-h-[70vh] min-w-75 immich-scrollbar flex-col overflow-y-auto rounded-2xl bg-gray-100 py-2 text-sm font-medium text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
        position,
      )}"
    >
--- a/web/src/lib/managers/edit/edit-manager.svelte.ts
+++ b/web/src/lib/managers/edit/edit-manager.svelte.ts
@ -127,7 +127,7 @@ export class EditManager {

    try {
      // Setup the websocket listener before sending the edit request
-      const editCompleted = waitForWebsocketEvent('AssetEditReadyV1', (event) => event.asset.id === assetId, 10_000);
+      const editCompleted = waitForWebsocketEvent('AssetEditReadyV2', (event) => event.asset.id === assetId, 10_000);

      await (edits.length === 0
        ? removeAssetEdits({ id: assetId })
--- a/web/src/lib/managers/plugin-manager.svelte.ts
+++ b/web/src/lib/managers/plugin-manager.svelte.ts
@ -1,8 +1,10 @@
 import {
  getWorkflowTriggers,
  searchPluginMethods,
+  searchPluginTemplates,
  WorkflowTrigger,
  type PluginMethodResponseDto,
+  type PluginTemplateResponseDto,
  type WorkflowTriggerResponseDto,
 } from '@immich/sdk';
 import { t } from 'svelte-i18n';
@ -16,6 +18,7 @@ class PluginManager {
  #methodMap = new SvelteMap<string, PluginMethodResponseDto>();
  #methods = $state<PluginMethodResponseDto[]>([]);
  #triggers = $state<WorkflowTriggerResponseDto[]>([]);
+  #templates = $state<PluginTemplateResponseDto[]>([]);

  constructor() {
    eventManager.on({
@ -33,6 +36,10 @@ class PluginManager {
    return this.#triggers;
  }

+  get templates() {
+    return this.#templates;
+  }
+
  ready() {
    return this.initialize();
  }
@ -70,7 +77,11 @@ class PluginManager {
  }

  private async load() {
-    const [methods, triggers] = await Promise.all([searchPluginMethods({}), getWorkflowTriggers()]);
+    const [methods, triggers, templates] = await Promise.all([
+      searchPluginMethods({}),
+      getWorkflowTriggers(),
+      searchPluginTemplates(),
+    ]);

    this.#methods = methods;
    for (const method of this.#methods) {
@ -78,6 +89,7 @@ class PluginManager {
    }

    this.#triggers = triggers;
+    this.#templates = templates;
  }
 }

--- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
@ -53,17 +53,3 @@ export function updateTimelineMonthViewportProximity(timelineManager: TimelineMa
    timelineManager.clearDeferredLayout(month);
  }
 }
-
-export function calculateViewerAssetViewportProximity(
-  timelineManager: TimelineManager,
-  positionTop: number,
-  positionHeight: number,
-) {
-  const headerHeight = timelineManager.headerHeight;
-  return calculateViewportProximity(
-    positionTop,
-    positionTop + positionHeight,
-    timelineManager.visibleWindow.top - headerHeight,
-    timelineManager.visibleWindow.bottom + headerHeight,
-  );
-}
--- a/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
@ -1,12 +1,31 @@
 import { AssetOrder, AssetOrderBy } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
-import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
+import type { CommonLayoutOptions, CommonPosition } from '$lib/utils/layout-utils';
 import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
 import { getOrderingDate, plainDateTimeCompare } from '$lib/utils/timeline-util';
+import { TUNABLES } from '$lib/utils/tunables';
 import type { TimelineMonth } from './timeline-month.svelte';
 import type { Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';

+const {
+  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
+} = TUNABLES;
+
+function lowerBound(assets: ViewerAsset[], target: number, key: (pos: CommonPosition) => number): number {
+  let lo = 0;
+  let hi = assets.length;
+  while (lo < hi) {
+    const mid = Math.floor((lo + hi) / 2);
+    if (key(assets[mid].position!) < target) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  return lo;
+}
+
 export class TimelineDay {
  readonly timelineMonth: TimelineMonth;
  readonly index: number;
@ -17,7 +36,10 @@ export class TimelineDay {

  height = $state(0);
  width = $state(0);
-  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
+
+  // Assets in or near the viewport; active assets should be added to the DOM.
+  activeViewerAssets: ViewerAsset[] = $state([]);
+  isInOrNearViewport = $state(false);

  #top: number = $state(0);
  #start: number = $state(0);
@ -149,6 +171,29 @@ export class TimelineDay {
    for (let i = 0; i < this.viewerAssets.length; i++) {
      this.viewerAssets[i].position = geometry.getPosition(i);
    }
+    this.updateAssetBoundaries();
+  }
+
+  updateAssetBoundaries() {
+    const manager = this.timelineMonth.timelineManager;
+    const visibleWindow = manager.visibleWindow;
+    if (this.viewerAssets.length === 0 || !this.viewerAssets[0].position) {
+      this.activeViewerAssets = [];
+      this.isInOrNearViewport = false;
+      return;
+    }
+
+    const dayOffset = this.absoluteTimelineDayTop;
+    const headerHeight = manager.headerHeight;
+    const expandedTop = visibleWindow.top - headerHeight - INTERSECTION_EXPAND_TOP - dayOffset;
+    const expandedBottom = visibleWindow.bottom + headerHeight + INTERSECTION_EXPAND_BOTTOM - dayOffset;
+
+    const first = lowerBound(this.viewerAssets, expandedTop, (p) => p.top + p.height);
+    const last = lowerBound(this.viewerAssets, expandedBottom, (p) => p.top) - 1;
+
+    const hasActive = last >= first && first < this.viewerAssets.length;
+    this.activeViewerAssets = hasActive ? this.viewerAssets.slice(first, last + 1) : [];
+    this.isInOrNearViewport = hasActive;
  }

  get absoluteTimelineDayTop() {
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@ -214,6 +214,11 @@ export class TimelineManager extends VirtualScrollManager {

    for (const month of this.months) {
      updateTimelineMonthViewportProximity(this, month);
+      if (month.isInOrNearViewport && month.isLoaded) {
+        for (const day of month.timelineDays) {
+          day.updateAssetBoundaries();
+        }
+      }
    }

    const month = this.months.find((month) => month.isInViewport);
--- a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
@ -179,8 +179,8 @@ export class TimelineMonth {
      );

      const timelineAsset: TimelineAsset = {
-        city: bucketAssets.city[i],
-        country: bucketAssets.country[i],
+        city: bucketAssets.city?.[i] ?? null,
+        country: bucketAssets.country?.[i] ?? null,
        duration: bucketAssets.duration[i],
        id: bucketAssets.id[i],
        visibility: bucketAssets.visibility[i],
@ -254,7 +254,7 @@ export class TimelineMonth {
      addContext.newTimelineDays.add(timelineDay);
    }

-    const viewerAsset = new ViewerAsset(timelineDay, timelineAsset);
+    const viewerAsset = new ViewerAsset(timelineAsset);
    timelineDay.viewerAssets.push(viewerAsset);
    addContext.changedTimelineDays.add(timelineDay);
  }
--- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
@ -1,36 +1,12 @@
 import type { CommonPosition } from '$lib/utils/layout-utils';
-import {
-  ViewportProximity,
-  calculateViewerAssetViewportProximity,
-  isInOrNearViewport,
-} from './internal/intersection-support.svelte';
-import type { TimelineDay } from './timeline-day.svelte';
 import type { TimelineAsset } from './types';

 export class ViewerAsset {
-  readonly #group: TimelineDay;
-
-  #viewportProximity = $derived.by(() => {
-    if (!this.position) {
-      return ViewportProximity.FarFromViewport;
-    }
-
-    const store = this.#group.timelineMonth.timelineManager;
-    const positionTop = this.#group.absoluteTimelineDayTop + this.position.top;
-
-    return calculateViewerAssetViewportProximity(store, positionTop, this.position.height);
-  });
-
-  get isInOrNearViewport() {
-    return isInOrNearViewport(this.#viewportProximity);
-  }
-
  position: CommonPosition | undefined = $state.raw();
  asset: TimelineAsset = $state() as TimelineAsset;
  id: string = $derived(this.asset.id);

-  constructor(group: TimelineDay, asset: TimelineAsset) {
-    this.#group = group;
+  constructor(asset: TimelineAsset) {
    this.asset = asset;
  }
 }
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@ -172,7 +172,7 @@
          bind:value={search}
          use:initInput
        />
-        <div class="overflow-y-auto immich-scrollbar">
+        <div class="immich-scrollbar overflow-y-auto">
          <!-- eslint-disable-next-line svelte/require-each-key -->
          {#each albumModalRows as row}
            {#if row.type === AlbumModalRowType.NEW_ALBUM}
--- a/web/src/lib/modals/PartnerSelectionModal.svelte
+++ b/web/src/lib/modals/PartnerSelectionModal.svelte
@ -41,7 +41,7 @@
      </div>
    {:then _}
      {#if availableUsers.length > 0}
-        <div class="flex max-h-75 flex-col gap-2 overflow-y-auto immich-scrollbar">
+        <div class="flex max-h-75 immich-scrollbar flex-col gap-2 overflow-y-auto">
          {#each availableUsers as user (user.id)}
            <ListButton onclick={() => selectUser(user)} selected={selectedUsers.includes(user)}>
              <UserAvatar {user} size="md" />
--- a/web/src/lib/modals/PeoplePickerModal.svelte
+++ b/web/src/lib/modals/PeoplePickerModal.svelte
@ -61,7 +61,7 @@
    <div class="flex flex-col gap-4">
      <SearchBar bind:name={searchName} placeholder={$t('search_people')} showLoadingSpinner={false} />

-      <div class="max-h-96 overflow-y-auto immich-scrollbar">
+      <div class="max-h-96 immich-scrollbar overflow-y-auto">
        {#if loading}
          <div class="flex justify-center p-8">
            <LoadingSpinner />
--- a/web/src/lib/modals/PluginMethodPicker.svelte
+++ b/web/src/lib/modals/PluginMethodPicker.svelte
@ -12,7 +12,7 @@
  const { trigger, selectedKey, onClose }: Props = $props();
 </script>

-<BasicModal title={$t('add_step')} {onClose}>
+<BasicModal title={$t('add_step')} {onClose} size="medium">
  {#await searchPluginMethods({ trigger })}
    <div class="flex w-full place-content-center place-items-center">
      <LoadingSpinner />
@ -24,7 +24,7 @@
          <div class="grow text-start">
            <Text fontWeight="medium" class="flex items-center gap-1"
              >{method.title}
-              {#if method.uiHints.includes('filter')}
+              {#if method.uiHints.includes('Filter')}
                <Badge size="tiny" color="info" title={$t('plugin_method_filter_type_description')}
                  >{$t('plugin_method_filter_type')}</Badge
                >
--- a/web/src/lib/modals/WorkflowAddStepModal.svelte
+++ b/web/src/lib/modals/WorkflowAddStepModal.svelte
@ -38,7 +38,7 @@
 </script>

 {#if method}
-  <FormModal title={$t('add_step')} {onClose} {onSubmit} disabled={!method} size="small">
+  <FormModal title={$t('add_step')} {onClose} {onSubmit} disabled={!method} size="medium">
    <div class="flex items-center justify-between gap-2">
      <div class="grow text-start">
        <Text fontWeight="medium">{method.title}</Text>
--- a/web/src/lib/modals/WorkflowDuplicateModal.svelte
+++ b/web/src/lib/modals/WorkflowDuplicateModal.svelte
@ -0,0 +1,53 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { Route } from '$lib/route';
+  import { handleCreateWorkflow } from '$lib/services/workflow.service';
+  import { WorkflowTrigger, type WorkflowResponseDto } from '@immich/sdk';
+  import { Field, FormModal, Input, Textarea, VStack } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    workflow: WorkflowResponseDto;
+    onClose: () => void;
+  };
+
+  const { workflow, onClose }: Props = $props();
+
+  let name = $state(workflow.name ?? '');
+  let description = $state(workflow.description ?? '');
+  let trigger = $state<WorkflowTrigger>(workflow.trigger);
+
+  const onSubmit = async () => {
+    const response = await handleCreateWorkflow({
+      name,
+      description,
+      trigger,
+      steps: workflow.steps,
+      enabled: false,
+    });
+
+    if (response) {
+      await goto(Route.viewWorkflow({ id: response.id }));
+      onClose();
+    }
+  };
+</script>
+
+<FormModal
+  title={$t('duplicate_workflow')}
+  {onClose}
+  {onSubmit}
+  disabled={!name || !trigger}
+  size="medium"
+  submitText={$t('create')}
+>
+  <VStack gap={4}>
+    <Field label={$t('name')} required>
+      <Input placeholder={$t('workflow_name')} bind:value={name} />
+    </Field>
+
+    <Field label={$t('description')}>
+      <Textarea grow placeholder={$t('workflow_description')} bind:value={description} />
+    </Field>
+  </VStack>
+</FormModal>
--- a/web/src/lib/modals/WorkflowEditStepModal.svelte
+++ b/web/src/lib/modals/WorkflowEditStepModal.svelte
@ -35,7 +35,7 @@
 </script>

 {#if method}
-  <FormModal title={$t('step_details')} {onClose} {onSubmit} disabled={!method} size="small">
+  <FormModal title={$t('step_details')} {onClose} {onSubmit} disabled={!method} size="medium">
    <div class="flex items-center justify-between gap-2">
      <div class="grow text-start">
        <Text fontWeight="medium">{method.title}</Text>
--- a/web/src/lib/modals/WorkflowEditTrigger.svelte
+++ b/web/src/lib/modals/WorkflowEditTrigger.svelte
@ -1,37 +0,0 @@
-<script lang="ts">
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
-  import { handleUpdateWorkflow } from '$lib/services/workflow.service';
-  import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import { type WorkflowResponseDto } from '@immich/sdk';
-  import { FormModal, ListButton, Text } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    workflow: WorkflowResponseDto;
-    onClose: () => void;
-  };
-
-  const { workflow, onClose }: Props = $props();
-
-  let selected = $state(pluginManager.getTrigger(workflow.trigger));
-
-  const onSubmit = async () => {
-    const success = await handleUpdateWorkflow(workflow.id, { trigger: selected.trigger });
-    if (success) {
-      onClose();
-    }
-  };
-</script>
-
-<FormModal title={$t('trigger')} {onClose} {onSubmit} size="small">
-  <div class="flex flex-col gap-2">
-    {#each pluginManager.triggers as item (item.trigger)}
-      <ListButton selected={item.trigger === selected.trigger} onclick={() => (selected = item)}>
-        <div class="grow text-start">
-          <Text fontWeight="medium">{getTriggerName($t, item.trigger)}</Text>
-          <Text size="tiny" color="muted">{getTriggerDescription($t, item.trigger)}</Text>
-        </div>
-      </ListButton>
-    {/each}
-  </div>
-</FormModal>
--- a/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
+++ b/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
@ -0,0 +1,71 @@
+<script lang="ts">
+  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
+  import { handleCreateWorkflow } from '$lib/services/workflow.service';
+  import { type PluginTemplateResponseDto } from '@immich/sdk';
+  import { Badge, FormModal, Icon, ListButton, Text } from '@immich/ui';
+  import { mdiFlashOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+  };
+
+  const { onClose }: Props = $props();
+
+  let selected = $state<PluginTemplateResponseDto>();
+
+  const onSubmit = async () => {
+    if (!selected) {
+      return;
+    }
+
+    const success = await handleCreateWorkflow({
+      trigger: selected.trigger,
+      steps: selected.steps,
+      name: selected.title,
+      description: selected.description,
+      enabled: false,
+    });
+
+    if (success) {
+      onClose();
+    }
+  };
+
+  const isSelected = (template: PluginTemplateResponseDto) => selected?.key === template.key;
+</script>
+
+<FormModal
+  title={$t('workflow_templates')}
+  {onClose}
+  {onSubmit}
+  disabled={!selected}
+  size="medium"
+  submitText={$t('use_template')}
+>
+  <div class="flex flex-col gap-2">
+    {#each pluginManager.templates as template (template.key)}
+      <ListButton
+        selected={isSelected(template)}
+        onclick={() => (selected = isSelected(template) ? undefined : template)}
+      >
+        <div class="flex w-full items-center gap-3 text-start">
+          <div
+            class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-immich-primary/10 text-immich-primary dark:bg-immich-dark-primary/15 dark:text-immich-dark-primary"
+          >
+            <Icon icon={mdiFlashOutline} size="18" />
+          </div>
+          <div class="min-w-0 grow">
+            <Text fontWeight="medium">{template.title}</Text>
+            <Text size="tiny" color="muted">{template.description}</Text>
+          </div>
+          {#if template.uiHints.includes('SmartAlbum')}
+            <div class="shrink-0">
+              <Badge size="small">{$t('smart_album')}</Badge>
+            </div>
+          {/if}
+        </div>
+      </ListButton>
+    {/each}
+  </div>
+</FormModal>
--- a/web/src/lib/modals/WorkflowTriggerPicker.svelte
+++ b/web/src/lib/modals/WorkflowTriggerPicker.svelte
@ -17,7 +17,7 @@
  const onSubmit = () => onClose(selected);
 </script>

-<FormModal title={$t('trigger')} {onClose} {onSubmit} size="small">
+<FormModal title={$t('trigger')} {onClose} {onSubmit} size="medium">
  <div class="flex flex-col gap-2">
    {#each pluginManager.triggers as item (item.trigger)}
      <ListButton selected={selected === item.trigger} onclick={() => (selected = item.trigger)}>
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@ -42,7 +42,7 @@ import AssetAddToAlbumModal from '$lib/modals/AssetAddToAlbumModal.svelte';
 import AssetTagModal from '$lib/modals/AssetTagModal.svelte';
 import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
-import { downloadUrl } from '$lib/utils/asset-utils';
+import { downloadUrl } from '$lib/utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';

--- a/web/src/lib/services/system-config.service.ts
+++ b/web/src/lib/services/system-config.service.ts
@ -3,10 +3,8 @@ import { toastManager, type ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
 import { isEqual } from 'lodash-es';
 import type { MessageFormatter } from 'svelte-i18n';
-import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import { copyToClipboard } from '$lib/utils';
-import { downloadBlob } from '$lib/utils/asset-utils';
+import { copyToClipboard, downloadJson } from '$lib/utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';

@ -19,7 +17,7 @@ export const getSystemConfigActions = (
    title: $t('copy_to_clipboard'),
    description: $t('admin.copy_config_to_clipboard_description'),
    icon: mdiContentCopy,
-    onAction: () => handleCopyToClipboard(config),
+    onAction: () => copyToClipboard(config),
    shortcuts: { shift: true, key: 'c' },
  };

@ -27,7 +25,7 @@ export const getSystemConfigActions = (
    title: $t('export_as_json'),
    description: $t('admin.export_config_as_json_description'),
    icon: mdiDownload,
-    onAction: () => handleDownloadConfig(config),
+    onAction: () => downloadJson(config, 'immich-config.json'),
    shortcuts: [
      { shift: true, key: 's' },
      { shift: true, key: 'd' },
@ -65,31 +63,6 @@ export const handleSystemConfigSave = async (update: Partial<SystemConfigDto>) =
  }
 };

-// https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/43636793#43636793
-const jsonReplacer = (_key: string, value: unknown) =>
-  value instanceof Object && !Array.isArray(value)
-    ? Object.keys(value)
-        .sort()
-        // eslint-disable-next-line unicorn/no-array-reduce
-        .reduce((sorted: { [key: string]: unknown }, key) => {
-          sorted[key] = (value as { [key: string]: unknown })[key];
-          return sorted;
-        }, {})
-    : value;
-
-export const handleCopyToClipboard = async (config: SystemConfigDto) => {
-  await copyToClipboard(JSON.stringify(config, jsonReplacer, 2));
-};
-
-export const handleDownloadConfig = (config: SystemConfigDto) => {
-  const blob = new Blob([JSON.stringify(config, jsonReplacer, 2)], { type: 'application/json' });
-  const downloadKey = 'immich-config.json';
-  downloadManager.add(downloadKey, blob.size);
-  downloadManager.update(downloadKey, blob.size);
-  downloadBlob(blob, downloadKey);
-  setTimeout(() => downloadManager.clear(downloadKey), 5000);
-};
-
 export const handleUploadConfig = () => {
  const input = globalThis.document.createElement('input');
  input.setAttribute('type', 'file');
--- a/web/src/lib/services/workflow.service.ts
+++ b/web/src/lib/services/workflow.service.ts
@ -10,11 +10,25 @@ import {
  type WorkflowUpdateDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiCodeJson, mdiDelete, mdiPause, mdiPencil, mdiPlay, mdiPlus } from '@mdi/js';
+import {
+  mdiCodeJson,
+  mdiContentCopy,
+  mdiContentDuplicate,
+  mdiDeleteOutline,
+  mdiDownload,
+  mdiFileDocumentMultipleOutline,
+  mdiPause,
+  mdiPencil,
+  mdiPlay,
+  mdiPlus,
+} from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import WorkflowDuplicateModal from '$lib/modals/WorkflowDuplicateModal.svelte';
+import WorkflowTemplatePickerModal from '$lib/modals/WorkflowTemplatePickerModal.svelte';
 import { Route } from '$lib/route';
+import { copyToClipboard, downloadJson } from '$lib/utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';

@ -33,17 +47,63 @@ export const getWorkflowsActions = ($t: MessageFormatter) => {
      }),
  };

-  return { Create };
+  const UseTemplate: ActionItem = {
+    title: $t('browse_templates'),
+    icon: mdiFileDocumentMultipleOutline,
+    onAction: () => modalManager.show(WorkflowTemplatePickerModal, {}),
+  };
+
+  return { Create, UseTemplate };
 };

 export const getWorkflowActions = ($t: MessageFormatter, workflow: WorkflowResponseDto) => {
  const ToggleEnabled: ActionItem = {
    title: workflow.enabled ? $t('disable') : $t('enable'),
    icon: workflow.enabled ? mdiPause : mdiPlay,
-    color: workflow.enabled ? 'danger' : 'primary',
    onAction: () => handleUpdateWorkflow(workflow.id, { enabled: !workflow.enabled }),
  };

+  const CopyJson: ActionItem = {
+    title: $t('copy_json'),
+    icon: mdiContentCopy,
+    onAction: () =>
+      copyToClipboard(
+        JSON.stringify(
+          {
+            name: workflow.name,
+            description: workflow.description,
+            enabled: workflow.enabled,
+            trigger: workflow.trigger,
+            steps: workflow.steps,
+          },
+          null,
+          2,
+        ),
+      ),
+  };
+
+  const Download: ActionItem = {
+    title: $t('download'),
+    icon: mdiDownload,
+    onAction: () =>
+      downloadJson(
+        {
+          name: workflow.name,
+          description: workflow.description,
+          enabled: workflow.enabled,
+          trigger: workflow.trigger,
+          steps: workflow.steps,
+        },
+        'workflow.json',
+      ),
+  };
+
+  const Duplicate: ActionItem = {
+    title: $t('duplicate'),
+    icon: mdiContentDuplicate,
+    onAction: async () => modalManager.show(WorkflowDuplicateModal, { workflow }),
+  };
+
  const Edit: ActionItem = {
    title: $t('edit'),
    icon: mdiPencil,
@ -52,14 +112,12 @@ export const getWorkflowActions = ($t: MessageFormatter, workflow: WorkflowRespo

  const Delete: ActionItem = {
    title: $t('delete'),
-    icon: mdiDelete,
+    icon: mdiDeleteOutline,
    color: 'danger',
-    onAction: async () => {
-      await handleDeleteWorkflow(workflow);
-    },
+    onAction: () => handleDeleteWorkflow(workflow),
  };

-  return { ToggleEnabled, Edit, Delete };
+  return { CopyJson, Download, Duplicate, ToggleEnabled, Edit, Delete };
 };

 export const getWorkflowShowSchemaAction = (
@ -72,12 +130,14 @@ export const getWorkflowShowSchemaAction = (
  onAction: onToggle,
 });

-const handleCreateWorkflow = async (dto: WorkflowCreateDto) => {
+export const handleCreateWorkflow = async (dto: WorkflowCreateDto) => {
  const $t = await getFormatter();

  try {
    const response = await createWorkflow({ workflowCreateDto: dto });
    eventManager.emit('WorkflowCreate', response);
+    toastManager.success();
+    return response;
  } catch (error) {
    handleError(error, $t('errors.unable_to_create'));
  }
--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@ -5,7 +5,7 @@ import {
  type NotificationDto,
  type ServerVersionResponseDto,
  type SyncAssetEditV1,
-  type SyncAssetV1,
+  type SyncAssetV2,
 } from '@immich/sdk';
 import { io, type Socket } from 'socket.io-client';
 import { get, writable } from 'svelte/store';
@ -41,7 +41,7 @@ export interface Events {
  AppRestartV1: (event: AppRestartEvent) => void;

  MaintenanceStatusV1: (event: MaintenanceStatusResponseDto) => void;
-  AssetEditReadyV1: (data: { asset: SyncAssetV1; edit: SyncAssetEditV1[] }) => void;
+  AssetEditReadyV2: (data: { asset: SyncAssetV2; edit: SyncAssetEditV1[] }) => void;
 }

 const websocket: Socket<Events> = io({
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@ -104,7 +104,7 @@ export type JSONSchemaProperty = {
  array?: boolean;
  properties?: Record<string, JSONSchemaProperty>;
  required?: string[];
-  uiHint?: 'albumId' | 'assetId' | 'personId';
+  uiHint?: 'AlbumId' | 'AssetId' | 'PersonId';
 };

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@ -24,6 +24,7 @@ import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 import { defaultLang, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { alwaysLoadOriginalFile, lang } from '$lib/stores/preferences.store';
 import { isWebCompatibleImage } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
@ -249,17 +250,53 @@ export const getProfileImageUrl = (user: UserResponseDto) =>
 export const getPeopleThumbnailUrl = (person: PersonResponseDto, updatedAt?: string) =>
  createUrl(getPeopleThumbnailPath(person.id), { updatedAt: updatedAt ?? person.updatedAt });

-export const copyToClipboard = async (secret: string) => {
+export const copyToClipboard = async (secret: string | unknown) => {
  const $t = get(t);

  try {
-    await navigator.clipboard.writeText(secret);
+    const value = typeof secret === 'string' ? secret : JSON.stringify(secret, jsonReplacer, 2);
+    await navigator.clipboard.writeText(value);
    toastManager.info($t('copied_to_clipboard'));
  } catch (error) {
    handleError(error, $t('errors.unable_to_copy_to_clipboard'));
  }
 };

+// https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/43636793#43636793
+const jsonReplacer = (_key: string, value: unknown) =>
+  value instanceof Object && !Array.isArray(value)
+    ? Object.keys(value)
+        .sort()
+        // eslint-disable-next-line unicorn/no-array-reduce
+        .reduce((sorted: { [key: string]: unknown }, key) => {
+          sorted[key] = (value as { [key: string]: unknown })[key];
+          return sorted;
+        }, {})
+    : value;
+
+export const downloadUrl = (url: string, filename: string) => {
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+
+  URL.revokeObjectURL(url);
+};
+
+export const downloadBlob = (data: Blob, filename: string) => downloadUrl(URL.createObjectURL(data), filename);
+
+export const downloadJson = (data: unknown, filename: string) => {
+  const blob = new Blob([JSON.stringify(data, jsonReplacer, 2)], { type: 'application/json' });
+  const downloadKey = filename;
+  downloadManager.add(downloadKey, blob.size);
+  downloadManager.update(downloadKey, blob.size);
+  downloadBlob(blob, downloadKey);
+  setTimeout(() => downloadManager.clear(downloadKey), 5000);
+};
+
 export const oauth = {
  isCallback: (location: Location) => {
    const search = location.search;
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@ -26,7 +26,7 @@ import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { downloadRequest, withError } from '$lib/utils';
+import { downloadBlob, downloadRequest, withError } from '$lib/utils';
 import { getByteUnitString } from '$lib/utils/byte-units';
 import { getFormatter } from '$lib/utils/i18n';
 import { navigate } from '$lib/utils/navigation';
@ -73,32 +73,6 @@ export const removeTag = async ({
  return assetIds;
 };

-export const downloadBlob = (data: Blob, filename: string) => {
-  const url = URL.createObjectURL(data);
-
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = filename;
-
-  document.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-
-  URL.revokeObjectURL(url);
-};
-
-export const downloadUrl = (url: string, filename: string) => {
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = filename;
-
-  document.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-
-  URL.revokeObjectURL(url);
-};
-
 export const downloadArchive = async (fileName: string, options: Omit<DownloadInfoDto, 'archiveSize'>) => {
  const archiveSize = authManager.authenticated ? authManager.preferences.download.archiveSize : undefined;
  const dto = { ...options, archiveSize };
--- a/web/src/lib/utils/sw-messaging.ts
+++ b/web/src/lib/utils/sw-messaging.ts
@ -1,6 +1,7 @@
 import { ServiceWorkerMessenger } from './sw-messenger';

 const hasServiceWorker = globalThis.isSecureContext && 'serviceWorker' in navigator;
+// eslint-disable-next-line compat/compat
 const messenger = hasServiceWorker ? new ServiceWorkerMessenger(navigator.serviceWorker) : undefined;

 export function cancelImageUrl(url: string | undefined | null) {
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -1,10 +1,8 @@
 <script lang="ts">
  import { goto, invalidate, onNavigate } from '$app/navigation';
  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import AlbumDescription from './AlbumDescription.svelte';
  import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
  import AlbumSummary from '$lib/components/album-page/AlbumSummary.svelte';
-  import AlbumTitle from './AlbumTitle.svelte';
  import ActivityStatus from '$lib/components/asset-viewer/ActivityStatus.svelte';
  import ActivityViewer from '$lib/components/asset-viewer/ActivityViewer.svelte';
  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
@ -78,6 +76,8 @@
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
  import type { PageData } from './$types';
+  import AlbumDescription from './AlbumDescription.svelte';
+  import AlbumTitle from './AlbumTitle.svelte';

  interface Props {
    data: PageData;
@ -499,7 +499,7 @@
      </AssetSelectControlBar>
    {:else}
      {#if viewMode === AlbumPageViewMode.VIEW}
-        <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
+        <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
          {#snippet trailing()}
            <ActionButton action={Cast} />

--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -94,7 +94,7 @@

  <Breadcrumbs node={data.tree} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />

-  <section class="mt-2 h-[calc(100%-(--spacing(25)))] overflow-auto immich-scrollbar">
+  <section class="mt-2 h-[calc(100%-(--spacing(25)))] immich-scrollbar overflow-auto">
    <TreeItemThumbnails items={data.tree.children} icon={mdiFolder} onClick={handleNavigateToFolder} />

    <!-- Assets -->
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@ -2,11 +2,8 @@
  import { afterNavigate, goto } from '$app/navigation';
  import { page } from '$app/state';
  import { shortcuts } from '$lib/actions/shortcut';
-  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
-  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@ -37,6 +34,7 @@
    mdiChevronLeft,
    mdiChevronRight,
    mdiChevronUp,
+    mdiClose,
    mdiDotsVertical,
    mdiHeart,
    mdiHeartOutline,
@ -54,6 +52,8 @@
  import { t } from 'svelte-i18n';
  import type { Attachment } from 'svelte/attachments';
  import { Tween } from 'svelte/motion';
+  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
+  import MemoryVideoViewer from './MemoryVideoViewer.svelte';

  let memoryGallery: HTMLElement | undefined = $state();
  let memoryWrapper: HTMLElement | undefined = $state();
@ -328,7 +328,7 @@

 {#if assetMultiSelectManager.selectionActive}
  <div class="dark sticky top-0 z-1">
-    <AssetSelectControlBar forceDark>
+    <AssetSelectControlBar>
      {@const Actions = getAssetBulkActions($t)}
      <CreateSharedLink />
      <IconButton
@ -365,22 +365,31 @@

 <section
  id="memory-viewer"
-  class="w-full bg-immich-dark-gray"
+  class="dark w-full bg-immich-dark-gray text-white"
  bind:this={memoryWrapper}
  bind:clientHeight={viewport.height}
  bind:clientWidth={viewport.width}
 >
  {#if current}
-    <ControlAppBar onClose={() => goto(Route.photos())} forceDark multiRow>
-      {#snippet leading()}
-        {#if current}
+    <div class="dark grid grid-cols-[100%] p-2 max-md:h-auto max-md:flex-col md:grid-cols-[25%_50%_25%] md:p-4">
+      {#if current}
+        <div class="flex items-center gap-2 md:gap-6">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            icon={mdiClose}
+            aria-label={$t('close')}
+            size="large"
+            onclick={() => goto(Route.photos())}
+          />
          <p class="text-lg">
            {$memoryLaneTitle(current.memory)}
          </p>
-        {/if}
-      {/snippet}
+        </div>
+      {/if}

-      <div class="dark flex place-content-center place-items-center gap-2">
+      <div class="dark flex w-full place-content-center place-items-center gap-2">
        <IconButton
          shape="round"
          variant="ghost"
@ -438,7 +447,7 @@
          </media-mute-button>
        {/if}
      </div>
-    </ControlAppBar>
+    </div>

    {#if galleryInView}
      <div
@ -462,7 +471,7 @@
      </div>
    {/if}
    <!-- Viewer -->
-    <section class="overflow-hidden pt-32 md:pt-20" bind:clientHeight={viewerHeight}>
+    <section class="overflow-hidden pt-6 md:pt-0" bind:clientHeight={viewerHeight}>
      <div
        class="ms-[-100%] box-border flex h-[calc(100vh-224px)] w-[300%] items-center justify-center gap-10 overflow-hidden md:h-[calc(100vh-180px)]"
      >
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -47,7 +47,7 @@
    <DownloadAction />
  </AssetSelectControlBar>
 {:else}
-  <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
+  <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
    {#snippet leading()}
      <p class="whitespace-nowrap text-immich-fg dark:text-immich-dark-fg">
        {$t('partner_list_user_photos', { values: { user: data.partner.name } })}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -5,9 +5,6 @@
  import { listNavigation } from '$lib/actions/list-navigation';
  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import EditNameInput from './EditNameInput.svelte';
-  import MergeFaceSelector from './MergeFaceSelector.svelte';
-  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
@ -54,6 +51,9 @@
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
+  import EditNameInput from './EditNameInput.svelte';
+  import MergeFaceSelector from './MergeFaceSelector.svelte';
+  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';

  interface Props {
    data: PageData;
@ -493,7 +493,7 @@
    </AssetSelectControlBar>
  {:else}
    {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
-      <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
+      <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
        {#snippet trailing()}
          <ContextMenuButton
            items={[SelectFeaturePhoto, HidePerson, ShowPerson, SetDateOfBirth, Merge, Favorite, Unfavorite]}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
@ -47,7 +47,7 @@
 </div>

 <div
-  class="mt-6 overflow-y-auto rounded-3xl bg-gray-200 p-10 immich-scrollbar dark:bg-immich-dark-gray"
+  class="mt-6 immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
  style:max-height={screenHeight - 400 + 'px'}
 >
  <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -387,8 +387,7 @@
    {:else}
      <div class="fixed inset-s-0 top-0 z-2 w-full">
        <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
-          <div class="absolute bg-light"></div>
-          <div class="w-full flex-1 ps-4">
+          <div class="mx-auto w-full max-w-2xl pe-2">
            <SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
          </div>
        </ControlAppBar>
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -91,7 +91,7 @@

  <Breadcrumbs node={tag} icon={mdiTagMultiple} title={$t('tags')} {getLink} />

-  <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
+  <section class="mt-2 h-[calc(100%-(--spacing(20)))] immich-scrollbar overflow-auto">
    {#if tag.hasAssets}
      <Timeline
        enableRouting={true}
--- a/web/src/routes/(user)/workflows/+page.svelte
+++ b/web/src/routes/(user)/workflows/+page.svelte
@ -4,26 +4,23 @@
  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
  import { Route } from '$lib/route';
  import { getWorkflowActions, getWorkflowsActions, getWorkflowShowSchemaAction } from '$lib/services/workflow.service';
  import { getWorkflowForShare, type WorkflowResponseDto } from '@immich/sdk';
  import {
+    Badge,
    Button,
    Card,
-    CardBody,
    CardDescription,
    CardHeader,
    CardTitle,
    CodeBlock,
    Container,
-    IconButton,
+    ContextMenuButton,
+    Icon,
    MenuItemType,
-    menuManager,
-    Text,
-    VStack,
  } from '@immich/ui';
-  import { mdiClose, mdiDotsVertical } from '@mdi/js';
+  import { mdiClose, mdiFlashOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import { SvelteSet } from 'svelte/reactivity';
  import type { PageData } from './$types';
@ -38,7 +35,7 @@

  const expandedIds = new SvelteSet<string>();

-  const toggleExpanded = (id: string) => {
+  const onToggleExpand = (id: string) => {
    if (expandedIds.has(id)) {
      expandedIds.delete(id);
    } else {
@ -46,36 +43,7 @@
    }
  };

-  const getTriggerLabel = (triggerType: string) => {
-    const labels: Record<string, string> = {
-      AssetCreate: $t('asset_created'),
-      PersonRecognized: $t('person_recognized'),
-    };
-    return labels[triggerType] || triggerType;
-  };
-
-  const formatTimestamp = (createdAt: string) =>
-    new Intl.DateTimeFormat(undefined, {
-      dateStyle: 'medium',
-      timeStyle: 'short',
-    }).format(new Date(createdAt));
-
-  const showWorkflowMenu = (event: MouseEvent, workflow: WorkflowResponseDto) => {
-    const { ToggleEnabled, Edit, Delete } = getWorkflowActions($t, workflow);
-    void menuManager.show({
-      target: event.currentTarget as HTMLElement,
-      position: 'top-left',
-      items: [
-        ToggleEnabled,
-        Edit,
-        getWorkflowShowSchemaAction($t, expandedIds.has(workflow.id), () => toggleExpanded(workflow.id)),
-        MenuItemType.Divider,
-        Delete,
-      ],
-    });
-  };
-
-  const { Create } = $derived(getWorkflowsActions($t));
+  const { Create, UseTemplate } = $derived(getWorkflowsActions($t));

  const onWorkflowCreate = async (response: WorkflowResponseDto) => {
    await goto(Route.viewWorkflow(response));
@ -92,13 +60,7 @@

 <OnEvents {onWorkflowCreate} {onWorkflowUpdate} {onWorkflowDelete} />

-{#snippet chipItem(title: string)}
-  <span class="rounded-xl border border-gray-200/80 bg-light px-3 py-1.5 text-sm dark:border-gray-600">
-    <span class="font-medium text-dark">{title}</span>
-  </span>
-{/snippet}
-
-<UserPageLayout title={data.meta.title} actions={[Create]} scrollbar={false}>
+<UserPageLayout title={data.meta.title} actions={[UseTemplate, Create]} scrollbar={false}>
  <section class="flex place-content-center sm:mx-4">
    <Container center size="large" class="pb-28">
      {#if workflows.length === 0}
@ -111,92 +73,78 @@
          class="mx-auto mt-10"
        />
      {:else}
-        <div class="my-6 grid gap-6">
+        <div class="my-6 flex flex-col gap-3">
          {#each workflows as workflow (workflow.id)}
-            <Card class="border border-light-200">
-              <CardHeader
-                class={`flex flex-row gap-4 px-8 py-6 sm:items-center sm:gap-6 ${
-                  workflow.enabled
-                    ? 'bg-linear-to-r from-green-50 to-white dark:from-green-800/50 dark:to-green-950/45'
-                    : 'bg-neutral-50 dark:bg-neutral-900'
-                }`}
-              >
-                <div class="flex-1">
-                  <div class="flex items-center gap-3">
-                    <span class="rounded-full {workflow.enabled ? 'size-3 bg-success' : 'size-3 rounded-full bg-muted'}"
-                    ></span>
-                    <CardTitle>{workflow.name || $t('workflow')}</CardTitle>
-                  </div>
-                  {#if workflow.description}
-                    <CardDescription class="mt-1 text-sm">{workflow.description}</CardDescription>
-                  {/if}
-                </div>
+            {@const { ToggleEnabled, Duplicate, Edit, Delete } = getWorkflowActions($t, workflow)}

-                <div class="flex items-center gap-4">
-                  <div class="hidden text-right sm:block">
-                    <Text size="tiny">{$t('created_at')}</Text>
-                    <Text size="small" fontWeight="medium">
-                      {formatTimestamp(workflow.createdAt)}
-                    </Text>
-                  </div>
-                  <IconButton
-                    shape="round"
-                    variant="ghost"
-                    color="secondary"
-                    icon={mdiDotsVertical}
-                    aria-label={$t('menu')}
-                    onclick={(event: MouseEvent) => showWorkflowMenu(event, workflow)}
-                  />
-                </div>
-              </CardHeader>
-
-              <CardBody class="space-y-6">
-                <div class="grid gap-4 md:grid-cols-3">
-                  <!-- Trigger Section -->
-                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
-                    <div class="mb-3">
-                      <Text size="tiny" color="muted" fontWeight="medium">{$t('trigger')}</Text>
-                    </div>
-                    {@render chipItem(getTriggerLabel(workflow.trigger))}
+            <Card class="group shadow-none transition-colors hover:border-primary">
+              <CardHeader>
+                <a
+                  href={Route.viewWorkflow({ id: workflow.id })}
+                  class="flex items-center gap-4"
+                  class:opacity-55={!workflow.enabled}
+                >
+                  <div
+                    class={`flex size-11 shrink-0 items-center justify-center rounded-xl ${
+                      workflow.enabled
+                        ? 'bg-immich-primary/10 text-immich-primary dark:bg-immich-dark-primary/15 dark:text-immich-dark-primary'
+                        : 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'
+                    }`}
+                  >
+                    <Icon icon={mdiFlashOutline} size="20" />
                  </div>

-                  <!-- Actions Section -->
-                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
-                    <div class="mb-3">
-                      <Text size="tiny" color="muted" fontWeight="medium">{$t('steps')}</Text>
-                    </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-center gap-2">
+                      <CardTitle class="truncate font-semibold text-dark group-hover:text-primary">
+                        {workflow.name || $t('workflow')}
+                      </CardTitle>

-                    <div>
-                      {#if workflow.steps.length === 0}
-                        <span class="text-sm text-light-600">
-                          {$t('no_steps')}
-                        </span>
-                      {:else}
-                        <div class="flex flex-wrap gap-2">
-                          {#each workflow.steps as step, i (i)}
-                            {@render chipItem(pluginManager.getMethodLabel(step.method))}
-                          {/each}
-                        </div>
+                      {#if !workflow.enabled}
+                        <Badge size="small" color="secondary">
+                          {$t('disabled')}
+                        </Badge>
                      {/if}
                    </div>
+
+                    {#if workflow.description}
+                      <CardDescription class="mt-0.5 truncate">
+                        {workflow.description}
+                      </CardDescription>
+                    {/if}
                  </div>
-                </div>
+
+                  <ContextMenuButton
+                    position="top-left"
+                    items={[
+                      ToggleEnabled,
+                      Edit,
+                      Duplicate,
+                      getWorkflowShowSchemaAction($t, expandedIds.has(workflow.id), () => onToggleExpand(workflow.id)),
+                      MenuItemType.Divider,
+                      Delete,
+                    ]}
+                  />
+                </a>

                {#if expandedIds.has(workflow.id)}
                  {#await getWorkflowForShare({ id: workflow.id }) then result}
-                    <VStack gap={2} class="w-full rounded-2xl border border-light-200 bg-light-50 p-4">
+                    <div class="border-t border-gray-200 p-4 dark:border-gray-800">
                      <CodeBlock code={JSON.stringify(result, null, 2)} lineNumbers />
                      <Button
+                        class="mt-2"
                        leadingIcon={mdiClose}
                        fullWidth
                        variant="ghost"
                        color="secondary"
-                        onclick={() => toggleExpanded(workflow.id)}>{$t('close')}</Button
+                        onclick={() => onToggleExpand(workflow.id)}
                      >
-                    </VStack>
+                        {$t('close')}
+                      </Button>
+                    </div>
                  {/await}
                {/if}
-              </CardBody>
+              </CardHeader>
            </Card>
          {/each}
        </div>
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
@ -1,14 +1,13 @@
 <script lang="ts">
-  import { goto, invalidate } from '$app/navigation';
+  import { beforeNavigate, goto, invalidate } from '$app/navigation';
  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
  import WorkflowAddStepModal from '$lib/modals/WorkflowAddStepModal.svelte';
  import WorkflowEditStepModal from '$lib/modals/WorkflowEditStepModal.svelte';
  import WorkflowTriggerPicker from '$lib/modals/WorkflowTriggerPicker.svelte';
  import { Route } from '$lib/route';
-  import { handleUpdateWorkflow } from '$lib/services/workflow.service';
+  import { getWorkflowActions, handleUpdateWorkflow } from '$lib/services/workflow.service';
  import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto, WorkflowStepDto } from '@immich/sdk';
+  import type { WorkflowResponseDto, WorkflowUpdateDto } from '@immich/sdk';
  import {
    ActionBar,
    AppShell,
@ -29,26 +28,32 @@
    IconButton,
    Input,
    modalManager,
-    Stack,
    Switch,
-    Text,
    Textarea,
    VStack,
-    type ActionItem,
  } from '@immich/ui';
  import {
    mdiArrowLeft,
+    mdiCodeJson,
    mdiContentSave,
    mdiFlashOutline,
    mdiFormatListBulletedSquare,
    mdiInformationOutline,
    mdiPencilOutline,
    mdiPlus,
-    mdiTrashCanOutline,
  } from '@mdi/js';
+  import { cloneDeep, isEqual } from 'lodash-es';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
+  import WorkflowStepCard from './WorkflowStepCard.svelte';
+  import WorkflowSummary from './WorkflowSummary.svelte';
+
+  type WorkflowJsonContent = Required<
+    Pick<WorkflowUpdateDto, 'description' | 'enabled' | 'name' | 'steps' | 'trigger'>
+  >;
+
+  type EditMode = 'visual' | 'json';

  type Props = {
    data: PageData;
@ -56,35 +61,81 @@

  let { data }: Props = $props();

-  let { id, enabled, name, description, trigger, steps } = $derived(data.workflow);
+  let { id, enabled, name, description, trigger } = $derived(data.workflow);
+  let steps = $state(data.workflow.steps);
+  let savedWorkflow = $state(cloneDeep(data.workflow));
+  let allowNavigation = $state(false);
+  let isShowingNavigationDialog = $state(false);
+  let isSaving = $state(false);
+  let editMode = $state<EditMode>('visual');
+
+  const workflowSummary = $derived({ name, description, trigger, steps });
+  const workflowJsonContent = $derived<WorkflowJsonContent>({ name, description, enabled, trigger, steps });
+
+  const hasChanges = $derived(
+    enabled !== savedWorkflow.enabled ||
+      name !== savedWorkflow.name ||
+      description !== savedWorkflow.description ||
+      !isEqual(trigger, savedWorkflow.trigger) ||
+      !isEqual(steps, savedWorkflow.steps),
+  );

  const handleAddStep = async () => {
    const step = await modalManager.show(WorkflowAddStepModal, { trigger });
    if (step) {
-      steps = [...steps, step];
+      steps.push(step);
    }
  };

-  const handleEditStep = async (step: WorkflowStepDto) => {
-    const result = await modalManager.show(WorkflowEditStepModal, { trigger, step });
-    if (result) {
-      Object.assign(step, result);
+  const handleInsertStep = async (index: number) => {
+    const step = await modalManager.show(WorkflowAddStepModal, { trigger });
+    if (step) {
+      steps = [...steps.slice(0, index), step, ...steps.slice(index)];
    }
  };

+  const handleEditStep = async (index: number) => {
+    const step = steps[index];
+    if (!step) {
+      return;
+    }
+
+    const result = await modalManager.show(WorkflowEditStepModal, { trigger, step: cloneDeep(step) });
+    if (result) {
+      steps[index] = result;
+    }
+  };
+
+  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) {
      steps.splice(index, 1);
-      steps = [...steps];
    }
  };

-  const onClose = async () => {
-    // check for pending changes
-    await goto(Route.workflows());
+  const handleJsonContentChange = (content: WorkflowJsonContent) => {
+    enabled = content.enabled;
+    name = content.name;
+    description = content.description;
+    trigger = content.trigger;
+    steps = cloneDeep(content.steps);
  };

+  const onClose = () => goto(Route.workflows());
+
  const onChangeTrigger = async () => {
    const newTrigger = await modalManager.show(WorkflowTriggerPicker, { selected: trigger });
    if (newTrigger) {
@ -95,163 +146,230 @@
  const onWorkflowUpdate = async (response: WorkflowResponseDto) => {
    if (id === response.id) {
      data.workflow = response;
+      savedWorkflow = cloneDeep(response);
      await invalidate('workflow:data');
    }
  };

-  const Done: ActionItem = {
-    title: $t('save'),
-    icon: mdiContentSave,
-    color: 'primary',
-    onAction: () => handleUpdateWorkflow(id, { enabled, name, description, trigger, steps }),
+  const onWorkflowDelete = async (response: WorkflowResponseDto) => {
+    if (id === response.id) {
+      await goto(Route.workflows());
+    }
  };
+
+  const confirmNavigation = async () => {
+    if (!hasChanges) {
+      return true;
+    }
+
+    if (isShowingNavigationDialog) {
+      return false;
+    }
+
+    try {
+      isShowingNavigationDialog = true;
+      return await modalManager.showDialog({
+        prompt: $t('workflow_navigation_prompt'),
+        confirmColor: 'primary',
+      });
+    } finally {
+      isShowingNavigationDialog = false;
+    }
+  };
+
+  const saveWorkflow = async () => {
+    if (!hasChanges || isSaving) {
+      return;
+    }
+
+    isSaving = true;
+    try {
+      const submitted = { enabled, name, description, trigger, steps: cloneDeep(steps) };
+      const saved = await handleUpdateWorkflow(id, submitted);
+
+      if (saved) {
+        Object.assign(savedWorkflow, submitted);
+      }
+    } finally {
+      isSaving = false;
+    }
+  };
+
+  beforeNavigate(({ cancel, to, willUnload }) => {
+    if (!hasChanges || allowNavigation) {
+      return;
+    }
+
+    cancel();
+
+    if (willUnload || !to) {
+      return;
+    }
+
+    void confirmNavigation().then((confirmed) => {
+      if (confirmed) {
+        allowNavigation = true;
+        void goto(to.url);
+      }
+    });
+  });
+
+  const { Download, Duplicate, CopyJson, Delete } = $derived(
+    getWorkflowActions($t, { ...savedWorkflow, name, description, enabled, trigger, steps }),
+  );
 </script>

-<OnEvents {onWorkflowUpdate} />
+<OnEvents {onWorkflowUpdate} {onWorkflowDelete} />

-<AppShell>
+<AppShell class="">
  <AppShellBar>
-    <ActionBar static {onClose} translations={{ close: $t('back') }} closeIcon={mdiArrowLeft}>
+    <ActionBar
+      shape="round"
+      static
+      {onClose}
+      translations={{ close: $t('back') }}
+      closeIcon={mdiArrowLeft}
+      actions={[Duplicate, CopyJson, Download, Delete].map((item) => ({ ...item, color: undefined }))}
+    >
      <ControlBarHeader>
        <ControlBarTitle>{data.workflow.name}</ControlBarTitle>
        <ControlBarDescription>{data.workflow.description}</ControlBarDescription>
      </ControlBarHeader>
-      <ControlBarContent class="flex justify-end">
-        <HeaderActionButton action={Done} variant="filled" />
+      <ControlBarContent class="flex items-center justify-end gap-6">
+        {#if hasChanges}
+          <Button
+            variant="filled"
+            size="small"
+            color="primary"
+            leadingIcon={mdiContentSave}
+            disabled={!hasChanges || isSaving}
+            loading={isSaving}
+            onclick={saveWorkflow}
+          >
+            {$t('save')}
+          </Button>
+        {/if}
      </ControlBarContent>
    </ActionBar>
  </AppShellBar>

  <Container size="medium" class="pt-8 pb-24" center>
    <VStack gap={4}>
-      <Card expandable>
-        <CardHeader>
-          <div class="flex place-items-start gap-3">
-            <Icon icon={mdiInformationOutline} size="20" class="mt-1" />
-            <div class="flex flex-col">
-              <CardTitle>
-                {$t('workflow_info')}
-              </CardTitle>
-            </div>
-          </div>
-        </CardHeader>
+      <div class="flex gap-1 rounded-full border border-light-200 bg-light p-1" role="group">
+        <Button
+          variant={editMode === 'visual' ? 'filled' : 'ghost'}
+          color={editMode === 'visual' ? 'primary' : 'secondary'}
+          size="small"
+          leadingIcon={mdiFormatListBulletedSquare}
+          aria-pressed={editMode === 'visual'}
+          onclick={() => (editMode = 'visual')}
+          shape="round"
+        >
+          {$t('visual')}
+        </Button>
+        <Button
+          variant={editMode === 'json' ? 'filled' : 'ghost'}
+          color={editMode === 'json' ? 'primary' : 'secondary'}
+          size="small"
+          leadingIcon={mdiCodeJson}
+          aria-pressed={editMode === 'json'}
+          onclick={() => (editMode = 'json')}
+          shape="round"
+        >
+          JSON
+        </Button>
+      </div>

-        <CardBody>
-          <VStack gap={4}>
-            <div class="relative w-full overflow-hidden rounded-xl border p-4" class:bg-primary-50={enabled}>
-              <Field label={enabled ? $t('enabled') : $t('disabled')} color={enabled ? 'primary' : 'secondary'}>
-                <Switch bind:checked={enabled} />
+      {#if editMode === 'visual'}
+        <Card class="shadow-none" expandable>
+          <CardHeader>
+            <div class="flex place-items-start gap-3">
+              <Icon icon={mdiInformationOutline} size="20" class="mt-1" />
+              <div class="flex flex-col">
+                <CardTitle>
+                  {$t('workflow_info')}
+                </CardTitle>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardBody>
+            <VStack gap={4}>
+              <div class="relative w-full overflow-hidden rounded-xl border p-4" class:bg-primary-50={enabled}>
+                <Field label={enabled ? $t('enabled') : $t('disabled')} color={enabled ? 'primary' : 'secondary'}>
+                  <Switch bind:checked={enabled} />
+                </Field>
+              </div>
+
+              <Field label={$t('name')} required>
+                <Input
+                  placeholder={$t('workflow_name')}
+                  bind:value={() => name ?? '', (value) => (name = value || null)}
+                />
              </Field>
-            </div>
+              <Field label={$t('description')}>
+                <Textarea
+                  grow
+                  placeholder={$t('workflow_description')}
+                  bind:value={() => description ?? '', (value) => (description = value || null)}
+                />
+              </Field>
+            </VStack>
+          </CardBody>
+        </Card>

-            <Field label={$t('name')} required>
-              <Input
-                placeholder={$t('workflow_name')}
-                bind:value={() => name ?? '', (value) => (name = value || null)}
+        <div class="my-4 h-px w-[98%] bg-light-200"></div>
+
+        <Card class="shadow-none">
+          <CardHeader>
+            <div class="flex items-center gap-3">
+              <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-success-50">
+                <Icon icon={mdiFlashOutline} size="20" class="text-success" />
+              </div>
+              <div class="flex min-w-0 flex-1 flex-col">
+                <CardTitle class="truncate">{getTriggerName($t, trigger)}</CardTitle>
+                <CardDescription class="truncate">{getTriggerDescription($t, trigger)}</CardDescription>
+              </div>
+
+              <IconButton
+                icon={mdiPencilOutline}
+                aria-label={$t('edit')}
+                variant="ghost"
+                shape="round"
+                color="secondary"
+                size="small"
+                onclick={onChangeTrigger}
              />
-            </Field>
-            <Field label={$t('description')} for="workflow-description">
-              <Textarea
-                id="workflow-description"
-                grow
-                placeholder={$t('workflow_description')}
-                bind:value={() => description ?? '', (value) => (description = value || null)}
-              />
-            </Field>
-          </VStack>
-        </CardBody>
-      </Card>
-
-      <div class="my-4 h-px w-[98%] bg-light-200"></div>
-
-      <Card>
-        <CardHeader class="bg-success-50">
-          <div class="flex items-start gap-3">
-            <Icon icon={mdiFlashOutline} size="20" class="mt-1 text-success" />
-            <div class="flex grow flex-col">
-              <CardTitle class="text-left text-success">{$t('trigger')}</CardTitle>
-              <CardDescription>{$t('trigger_description')}</CardDescription>
            </div>
-            <div class="flex items-center justify-end">
-              <Button leadingIcon={mdiPencilOutline} size="small" color="secondary" onclick={onChangeTrigger}>
-                {$t('edit')}
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
+          </CardHeader>
+        </Card>

-        <CardBody>
-          <div class="flex flex-col items-start">
-            <Text>{getTriggerName($t, trigger)}</Text>
-            <Text size="small" color="muted">{getTriggerDescription($t, trigger)}</Text>
-          </div>
-        </CardBody>
-      </Card>
+        {#each steps as step, index (step.method + index)}
+          <WorkflowStepCard
+            {step}
+            {index}
+            onEdit={handleEditStep}
+            onDelete={handleDeleteStep}
+            onInsertBefore={handleInsertStep}
+            onDrop={handleDrop}
+          />
+        {/each}

-      <Card>
-        <CardHeader class="bg-primary-50">
-          <div class="flex items-start gap-3">
-            <Icon icon={mdiFormatListBulletedSquare} size="20" class="mt-1 text-primary" />
-            <CardTitle class="text-left text-primary">{$t('steps')}</CardTitle>
-          </div>
-        </CardHeader>
-
-        <CardBody>
-          {#if steps.length === 0}
-            <Button leadingIcon={mdiPlus} onclick={handleAddStep}>{$t('add_step')}</Button>
-          {:else}
-            <Stack gap={2}>
-              {#each steps as step, index (index)}
-                {@const method = pluginManager.getMethod(step.method)}
-                {#if index > 0}
-                  <hr />
-                {/if}
-                <div
-                  // {@attach dragAndDrop({
-                  //   index,
-                  //   onDragStart: handleFilterDragStart,
-                  //   onDragEnter: handleFilterDragEnter,
-                  //   onDrop: handleFilterDrop,
-                  //   onDragEnd: handleFilterDragEnd,
-                  //   isDragging: draggedIndex === index,
-                  //   isDragOver: dragOverIndex === index,
-                  // })}
-                  class="flex cursor-move justify-between gap-2 rounded-2xl border-2 border-dashed bg-light-50 p-4 transition-all hover:border-light-300"
-                >
-                  <div class="flex flex-col gap-1">
-                    <Text>{pluginManager.getMethodLabel(step.method)}</Text>
-                    {#if method?.description}
-                      <Text color="muted" size="small">{method.description}</Text>
-                    {/if}
-                  </div>
-                  <div class="flex gap-1">
-                    <IconButton
-                      icon={mdiPencilOutline}
-                      aria-label={$t('edit')}
-                      variant="ghost"
-                      shape="round"
-                      color="secondary"
-                      onclick={() => handleEditStep(step)}
-                    />
-                    <IconButton
-                      icon={mdiTrashCanOutline}
-                      aria-label={$t('delete')}
-                      variant="ghost"
-                      shape="round"
-                      color="danger"
-                      onclick={() => handleDeleteStep(index)}
-                    />
-                  </div>
-                </div>
-              {/each}
-
-              <Button size="small" fullWidth variant="ghost" leadingIcon={mdiPlus} onclick={handleAddStep}>
-                {$t('add_step')}
-              </Button>
-            </Stack>
-          {/if}
-        </CardBody>
-      </Card>
+        <Button
+          size="small"
+          fullWidth
+          variant="ghost"
+          leadingIcon={mdiPlus}
+          class="border border-dashed"
+          onclick={handleAddStep}
+        >
+          {$t('add_step')}
+        </Button>
+      {:else}
+        <WorkflowJsonEditor jsonContent={workflowJsonContent} onContentChange={handleJsonContentChange} />
+      {/if}
    </VStack>
  </Container>
+
+  <WorkflowSummary workflow={workflowSummary} />
 </AppShell>
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowJsonEditor.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowJsonEditor.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
-  import type { WorkflowResponseDto } from '@immich/sdk';
+  import { WorkflowTrigger, type WorkflowStepDto, type WorkflowUpdateDto } from '@immich/sdk';
  import {
-    Button,
    Card,
    CardBody,
    CardDescription,
@ -13,40 +12,91 @@
    VStack,
  } from '@immich/ui';
  import { mdiCodeJson } from '@mdi/js';
+  import { isEqual } from 'lodash-es';
+  import { untrack } from 'svelte';
  import { JSONEditor, Mode, type Content, type OnChangeStatus } from 'svelte-jsoneditor';
+  import { t } from 'svelte-i18n';
+
+  type WorkflowJsonContent = Required<
+    Pick<WorkflowUpdateDto, 'description' | 'enabled' | 'name' | 'steps' | 'trigger'>
+  >;

  type Props = {
-    jsonContent: WorkflowResponseDto;
-    onApply: () => void;
-    onContentChange: (content: WorkflowResponseDto) => void;
+    jsonContent: WorkflowJsonContent;
+    onContentChange: (content: WorkflowJsonContent) => void;
  };

-  let { jsonContent, onApply, onContentChange }: Props = $props();
+  let { jsonContent, onContentChange }: Props = $props();

-  let content: Content = $derived({ json: jsonContent });
-  let canApply = $state(false);
+  let content: Content = $state({ json: jsonContent });
  let editorClass = $derived(themeManager.value === Theme.Dark ? 'jse-theme-dark' : '');

+  const isWorkflowStep = (value: unknown): value is WorkflowStepDto => {
+    if (!value || typeof value !== 'object') {
+      return false;
+    }
+
+    const step = value as Partial<WorkflowStepDto>;
+    return (
+      typeof step.method === 'string' &&
+      (step.config === null || (typeof step.config === 'object' && !Array.isArray(step.config))) &&
+      (step.enabled === undefined || typeof step.enabled === 'boolean')
+    );
+  };
+
+  const isWorkflowJsonContent = (value: unknown): value is WorkflowJsonContent => {
+    if (!value || typeof value !== 'object') {
+      return false;
+    }
+
+    const workflow = value as Partial<WorkflowJsonContent>;
+    return (
+      typeof workflow.enabled === 'boolean' &&
+      (workflow.name === null || typeof workflow.name === 'string') &&
+      (workflow.description === null || typeof workflow.description === 'string') &&
+      Object.values(WorkflowTrigger).includes(workflow.trigger as WorkflowTrigger) &&
+      Array.isArray(workflow.steps) &&
+      workflow.steps.every(isWorkflowStep)
+    );
+  };
+
+  const parseContent = (updated: Content) => {
+    if ('json' in updated) {
+      return updated.json;
+    }
+
+    return JSON.parse(updated.text);
+  };
+
+  $effect(() => {
+    const nextContent = jsonContent;
+    let isSynced = false;
+
+    try {
+      isSynced = isEqual(
+        untrack(() => parseContent(content)),
+        nextContent,
+      );
+    } catch {
+      // The editor can be temporarily invalid while typing in text mode.
+    }
+
+    if (!isSynced) {
+      content = { json: nextContent };
+    }
+  });
+
  const handleChange = (updated: Content, _: Content, status: OnChangeStatus) => {
    if (status.contentErrors) {
      return;
    }

-    canApply = true;
-
-    if ('text' in updated && updated.text !== undefined) {
-      try {
-        const parsed = JSON.parse(updated.text);
-        onContentChange(parsed);
-      } catch (error_) {
-        console.error('Invalid JSON in text mode:', error_);
-      }
+    const parsed = parseContent(updated);
+    if (!isWorkflowJsonContent(parsed)) {
+      return;
    }
-  };

-  const handleApply = () => {
-    onApply();
-    canApply = false;
+    onContentChange(parsed);
  };
 </script>

@ -57,17 +107,16 @@
        <div class="flex items-start gap-3">
          <Icon icon={mdiCodeJson} size="20" class="mt-1" />
          <div class="flex flex-col">
-            <CardTitle>Workflow JSON</CardTitle>
-            <CardDescription>Edit the workflow configuration directly in JSON format</CardDescription>
+            <CardTitle>{$t('workflow_json')}</CardTitle>
+            <CardDescription>{$t('workflow_json_help')}</CardDescription>
          </div>
        </div>
-        <Button size="small" color="primary" onclick={handleApply} disabled={!canApply}>Apply Changes</Button>
      </div>
    </CardHeader>
    <CardBody>
      <VStack gap={2}>
        <div class="h-[600px] w-full overflow-hidden rounded-lg border {editorClass}">
-          <JSONEditor {content} onChange={handleChange} mainMenuBar={false} mode={Mode.text} />
+          <JSONEditor bind:content onChange={handleChange} mainMenuBar={false} mode={Mode.text} />
        </div>
      </VStack>
    </CardBody>
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
@ -0,0 +1,259 @@
+<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 {
+    mdiAutoFix,
+    mdiDragVertical,
+    mdiFilterVariant,
+    mdiPencilOutline,
+    mdiPlus,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
+  import { mount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import WorkflowStepDragImage from './WorkflowStepDragImage.svelte';
+
+  type Props = {
+    step: WorkflowStepDto;
+    index: number;
+    onEdit: (index: number) => void;
+    onDelete: (index: number) => void;
+    onInsertBefore: (index: number) => void;
+    onDrop: (index: number, event: DragEvent) => void;
+  };
+
+  let { step, index, onEdit, onDelete, onInsertBefore, onDrop }: Props = $props();
+
+  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);
+
+  const truncate = (input: string, max = 24) => (input.length > max ? input.slice(0, max - 1) + '…' : input);
+
+  const formatConfigValue = (value: unknown): string => {
+    if (value === null || value === undefined) {
+      return '—';
+    }
+    if (typeof value === 'boolean') {
+      return value ? 'on' : 'off';
+    }
+    if (typeof value === 'number') {
+      return String(value);
+    }
+    if (typeof value === 'string') {
+      return `"${truncate(value)}"`;
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return $t('none');
+      }
+      const items = value.map((v) => (v !== null && typeof v === 'object' ? JSON.stringify(v) : String(v)));
+      const joined = items.join(' · ');
+      if (joined.length <= 28) {
+        return `"${joined}"`;
+      }
+      return $t('items_count', { values: { count: value.length } });
+    }
+    return JSON.stringify(value);
+  };
+
+  const handleDragStart = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
+
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', String(index));
+
+    mount(WorkflowStepDragImage, {
+      target: document.body,
+      props: {
+        description: method?.description,
+        isFilter: method?.uiHints?.includes('Filter') ?? false,
+        label: step ? pluginManager.getMethodLabel(step.method) : '',
+        stepNumber: index + 1,
+      },
+    });
+
+    dragImage = document.body.querySelector('#workflow-step-drag-image')!;
+    event.dataTransfer.setDragImage(dragImage, 16, 22);
+  };
+
+  const handleDrop = (index: number, event: DragEvent) => {
+    if (!event.dataTransfer) {
+      return;
+    }
+    event.preventDefault();
+
+    const from = Number(event.dataTransfer.getData('text/plain'));
+    if (from === index) {
+      return;
+    }
+
+    onDrop(index, event);
+  };
+
+  const handleDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    isDropTarget = true;
+  };
+
+  const handleDragEnd = () => {
+    dragImage?.remove();
+    dragImage = undefined;
+    isDropTarget = false;
+  };
+</script>
+
+<div class="group/step-row flex w-full flex-col">
+  <div class="-mt-4 ml-18 flex w-full items-center gap-4">
+    <div class="relative flex w-1 shrink-0 justify-start">
+      <div class="h-10 w-0.5 bg-light-200"></div>
+      <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"
+        aria-label={$t('add_step')}
+        title={$t('add_step')}
+        onclick={() => onInsertBefore(index)}
+      >
+        <Icon icon={mdiPlus} size="14" />
+      </button>
+    </div>
+  </div>
+
+  <div
+    class="w-full transition-all"
+    class:opacity-40={!!dragImage}
+    class:scale-[0.99]={!!dragImage}
+    ondragover={handleDragOver}
+    ondragleave={() => (isDropTarget = false)}
+    ondrop={(event) => handleDrop(index, event)}
+    role="listitem"
+  >
+    <Card
+      class="shadow-none transition-colors {isDropTarget
+        ? 'border-primary ring-2 ring-primary-200'
+        : hoverDrag
+          ? 'border-dashed border-primary'
+          : ''}"
+    >
+      <CardHeader>
+        <div class="flex items-center gap-2">
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="flex shrink-0 cursor-grab items-center justify-center rounded-md border border-transparent p-1 text-light-400 select-none hover:border-primary-200 hover:bg-primary-50 hover:text-primary active:cursor-grabbing"
+            aria-label={$t('drag_to_reorder')}
+            draggable="true"
+            onmouseenter={() => (hoverDrag = true)}
+            onmouseleave={() => (hoverDrag = false)}
+            ondragstart={(event) => handleDragStart(index, event)}
+            ondragend={handleDragEnd}
+            title={$t('drag_to_reorder')}
+          >
+            <Icon icon={mdiDragVertical} size="20" />
+          </div>
+          <div
+            class="flex size-10 shrink-0 items-center justify-center rounded-lg"
+            class:bg-primary-50={isFilter}
+            class:bg-warning-50={!isFilter}
+          >
+            <Icon
+              icon={isFilter ? mdiFilterVariant : mdiAutoFix}
+              size="20"
+              class={isFilter ? 'text-primary' : 'text-warning'}
+            />
+          </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>
+              {pluginManager.getMethodLabel(step.method)}
+            </CardTitle>
+            {#if method?.description}
+              <CardDescription class="truncate">{method.description}</CardDescription>
+            {/if}
+          </div>
+          <div class="flex shrink-0 items-center gap-1">
+            <IconButton
+              icon={mdiPencilOutline}
+              aria-label={$t('edit')}
+              variant="ghost"
+              shape="round"
+              color="secondary"
+              size="small"
+              onclick={() => onEdit(index)}
+            />
+            <IconButton
+              icon={mdiTrashCanOutline}
+              aria-label={$t('delete')}
+              variant="ghost"
+              shape="round"
+              color="danger"
+              size="small"
+              onclick={() => onDelete(index)}
+            />
+          </div>
+        </div>
+      </CardHeader>
+
+      {#if configEntries.length > 0}
+        <CardBody class="py-3">
+          <div class="flex flex-wrap items-center gap-1.5">
+            {#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>{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>
+      {/if}
+    </Card>
+  </div>
+</div>
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte
@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Icon } from '@immich/ui';
+  import { mdiAutoFix, mdiFilterVariant } from '@mdi/js';
+
+  type Props = {
+    description?: string;
+    isFilter: boolean;
+    label: string;
+    stepNumber: number;
+  };
+
+  let { description, isFilter, label, stepNumber }: Props = $props();
+</script>
+
+<div
+  id="workflow-step-drag-image"
+  aria-hidden="true"
+  class="pointer-events-none fixed top-[-1000px] left-0 flex w-80 items-center gap-2.5 rounded-lg border border-light-200 bg-light px-3 py-2.5 text-sm/5 text-dark shadow-2xl"
+>
+  <div
+    class="flex size-8 shrink-0 items-center justify-center rounded-lg"
+    class:bg-primary-50={isFilter}
+    class:bg-warning-50={!isFilter}
+  >
+    <Icon
+      icon={isFilter ? mdiFilterVariant : mdiAutoFix}
+      size="18"
+      class={isFilter ? 'text-primary' : 'text-warning'}
+    />
+  </div>
+
+  <div class="min-w-0 flex-1">
+    <div class="flex min-w-0 items-center gap-2">
+      <span class="shrink-0 font-bold text-light-500">#{stepNumber}</span>
+      <span class="truncate font-bold">{label}</span>
+    </div>
+
+    {#if description}
+      <div class="mt-0.5 truncate text-xs/4 text-light-500">{description}</div>
+    {/if}
+  </div>
+</div>
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
@ -1,137 +1,146 @@
 <script lang="ts">
+  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
  import { getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, Text } from '@immich/ui';
-  import { mdiClose, mdiFlashOutline, mdiPlayCircleOutline, mdiViewDashboardOutline } from '@mdi/js';
+  import type { WorkflowStepDto, WorkflowTrigger } from '@immich/sdk';
+  import { Icon, IconButton, shortcut, Text } from '@immich/ui';
+  import { mdiCheck, mdiClose, mdiContentCopy, mdiViewDashboardOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';

  type Props = {
-    workflow: WorkflowResponseDto;
+    workflow: {
+      name: string | null;
+      description: string | null;
+      trigger: WorkflowTrigger;
+      steps: WorkflowStepDto[];
+    };
  };

  let { workflow }: Props = $props();
-  const { trigger, steps } = $derived(workflow);

  let isOpen = $state(false);
-  let position = $state({ x: 0, y: 0 });
-  let isDragging = $state(false);
-  let dragOffset = $state({ x: 0, y: 0 });
-  let containerEl: HTMLDivElement | undefined = $state();
+  let justCopied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;

-  const handleMouseDown = (e: MouseEvent) => {
-    if (!containerEl) {
-      return;
+  const formatConfigValue = (value: unknown): string => {
+    if (value === null || value === undefined) {
+      return '—';
    }
-    isDragging = true;
-    const rect = containerEl.getBoundingClientRect();
-    dragOffset = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+    if (typeof value === 'boolean') {
+      return value ? 'true' : 'false';
+    }
+    if (typeof value === 'number') {
+      return String(value);
+    }
+    if (typeof value === 'string') {
+      return `"${value}"`;
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return '[]';
+      }
+      return '[' + value.map((v) => (v !== null && typeof v === 'object' ? '{…}' : String(v))).join(', ') + ']';
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
  };

-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging) {
-      return;
-    }
-    position = {
-      x: e.clientX - dragOffset.x,
-      y: e.clientY - dragOffset.y,
-    };
-  };
+  const getConfigEntries = (config: WorkflowStepDto['config']) =>
+    Object.entries(config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== '');

-  const handleMouseUp = () => {
-    isDragging = false;
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-  };
-
-  $effect(() => {
-    // Initialize position to bottom-right on mount
-    if (globalThis.window && position.x === 0 && position.y === 0) {
-      position = {
-        x: globalThis.innerWidth - 280,
-        y: globalThis.innerHeight - 400,
-      };
+  const asciiSummary = $derived.by(() => {
+    const lines: string[] = [];
+    const title = workflow.name ?? $t('no_name');
+    lines.push(`${title}`);
+    if (workflow.description) {
+      lines.push(workflow.description);
    }
+
+    lines.push('', '  WHEN', `    ⚡ ${getTriggerName($t, workflow.trigger)}`, '', '  THEN');
+
+    if (workflow.steps.length === 0) {
+      lines.push(`    ${$t('no_steps')}`);
+      return lines.join('\n');
+    }
+
+    for (const [i, step] of workflow.steps.entries()) {
+      const method = pluginManager.getMethod(step.method);
+      const isFilter = method?.uiHints?.includes('Filter') ?? false;
+      const type = isFilter ? $t('filter') : $t('action');
+      const label = pluginManager.getMethodLabel(step.method);
+      lines.push(`    [${i + 1}] ${type.toUpperCase()} · ${label}`);
+      for (const [key, value] of getConfigEntries(step.config)) {
+        lines.push(`          ${key} = ${formatConfigValue(value)}`);
+      }
+      if (i < workflow.steps.length - 1) {
+        lines.push('');
+      }
+    }
+
+    return lines.join('\n');
  });
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(asciiSummary);
+      justCopied = true;
+      if (copyTimer) {
+        clearTimeout(copyTimer);
+      }
+      copyTimer = setTimeout(() => (justCopied = false), 1500);
+    } catch {
+      // ignore — clipboard may be unavailable
+    }
+  };
 </script>

+<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: () => (isOpen = false) }} />
+
 {#if isOpen}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    bind:this={containerEl}
-    class="fixed hidden w-64 select-none hover:cursor-grab sm:block"
-    style="left: {position.x}px; top: {position.y}px;"
-    class:cursor-grabbing={isDragging}
-    onmousedown={handleMouseDown}
+  <aside
+    class="fixed inset-y-20 right-4 bottom-4 hidden max-w-lg flex-col overflow-hidden rounded-2xl border border-light-200 bg-light shadow-2xl sm:flex"
+    transition:fly={{ x: 400, duration: 250 }}
+    aria-label={$t('workflow_summary')}
  >
-    <div
-      class="rounded-xl border-2 border-transparent bg-light-50 p-4 shadow-sm transition-all hover:border-dashed hover:border-light-300 hover:shadow-xl"
-    >
-      <div class="mb-4 flex cursor-grab items-center justify-between select-none">
-        <Text size="small" fontWeight="semi-bold">{$t('workflow_summary')}</Text>
-        <div class="flex items-center gap-1">
-          <IconButton
-            icon={mdiClose}
-            size="small"
-            variant="ghost"
-            color="secondary"
-            title="Close summary"
-            aria-label="Close summary"
-            onclick={(e: MouseEvent) => {
-              e.stopPropagation();
-              isOpen = false;
-            }}
-          />
-        </div>
-      </div>
-
-      <div class="space-y-2">
-        <!-- Trigger -->
-        <div class="rounded-lg border bg-light-100 p-3">
-          <div class="mb-1 flex items-center gap-2">
-            <Icon icon={mdiFlashOutline} size="18" class="text-primary" />
-            <Text size="tiny" fontWeight="semi-bold">{$t('trigger')}</Text>
-          </div>
-          <p class="truncate pl-5 text-sm">{getTriggerName($t, trigger)}</p>
-        </div>
-
-        <!-- Connector -->
-        <div class="flex justify-center">
-          <div class="h-3 w-0.5 bg-light-400"></div>
-        </div>
-
-        <!-- Steps -->
-        {#if steps.length > 0}
-          <div class="rounded-lg border bg-light-100 p-3">
-            <div class="mb-2 flex items-center gap-2">
-              <Icon icon={mdiPlayCircleOutline} size="18" class="text-success" />
-              <Text size="tiny" fontWeight="semi-bold">{$t('actions')}</Text>
-            </div>
-            <div class="space-y-1 pl-5">
-              {#each steps as step, index (index)}
-                <div class="flex items-center gap-2">
-                  <span
-                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-light-200 text-[10px] font-medium"
-                    >{index + 1}</span
-                  >
-                  <p class="truncate text-sm">{step.method}</p>
-                </div>
-              {/each}
-            </div>
-          </div>
-        {/if}
+    <!-- Header -->
+    <div class="flex shrink-0 items-center justify-between border-b border-light-200 px-4 py-2.5">
+      <Text size="small" fontWeight="semi-bold" color="muted">{$t('workflow_summary')}</Text>
+      <div class="flex items-center gap-1">
+        <IconButton
+          icon={justCopied ? mdiCheck : mdiContentCopy}
+          size="small"
+          variant="ghost"
+          color={justCopied ? 'success' : 'secondary'}
+          title={$t('copy_to_clipboard')}
+          aria-label={$t('copy_to_clipboard')}
+          onclick={handleCopy}
+        />
+        <IconButton
+          icon={mdiClose}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          title="Close summary"
+          aria-label="Close summary"
+          onclick={() => (isOpen = false)}
+        />
      </div>
    </div>
-  </div>
+
+    <!-- ASCII body — what you see is what you copy -->
+    <div class="flex-1 overflow-auto p-4">
+      <pre
+        class="m-0 overflow-auto rounded-lg border border-light-200 bg-light-100 px-4 py-3 font-mono text-xs/relaxed whitespace-pre">{asciiSummary}</pre>
+    </div>
+  </aside>
 {:else}
  <button
    type="button"
    class="fixed right-6 bottom-6 hidden size-14 items-center justify-center rounded-full bg-primary text-light shadow-lg transition-colors hover:bg-primary/90 sm:flex"
    title={$t('workflow_summary')}
+    aria-label={$t('workflow_summary')}
    onclick={() => (isOpen = true)}
  >
    <Icon icon={mdiViewDashboardOutline} size="24" />
--- a/web/src/routes/UploadPanel.svelte
+++ b/web/src/routes/UploadPanel.svelte
@ -101,7 +101,7 @@
          </div>
        </div>
        {#if showOptions}
-          <div class="mb-4 max-h-100 overflow-y-auto rounded-lg immich-scrollbar">
+          <div class="mb-4 max-h-100 immich-scrollbar overflow-y-auto rounded-lg">
            <div class="flex h-6.5 place-items-center gap-1">
              <label class="immich-form-label" for="upload-concurrency">{$t('upload_concurrency')}</label>
            </div>
@ -119,7 +119,7 @@
            />
          </div>
        {/if}
-        <div class="flex max-h-[400px] flex-col gap-2 overflow-y-auto rounded-lg immich-scrollbar">
+        <div class="flex max-h-[400px] immich-scrollbar flex-col gap-2 overflow-y-auto rounded-lg">
          {#each $uploadAssetsStore as uploadAsset (uploadAsset.id)}
            <UploadAssetPreview {uploadAsset} />
          {/each}
--- a/web/src/test-data/factories/asset-factory.ts
+++ b/web/src/test-data/factories/asset-factory.ts
@ -76,8 +76,8 @@ export const toResponseDto = (...timelineAsset: TimelineAsset[]) => {
  };
  for (const asset of timelineAsset) {
    const fileCreatedAt = fromTimelinePlainDateTime(asset.fileCreatedAt).toISO();
-    bucketAssets.city.push(asset.city);
-    bucketAssets.country.push(asset.country);
+    bucketAssets.city?.push(asset.city);
+    bucketAssets.country?.push(asset.country);
    bucketAssets.duration.push(asset.duration!);
    bucketAssets.id.push(asset.id);
    bucketAssets.visibility.push(asset.visibility);