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

2026-08-29 13:15:45 +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/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) {