fix: support previous server versions for edit ready events

e2e/src/ui/specs/timeline/timeline.e2e-spec.ts

@@ -536,7 +536,7 @@ test.describe('Timeline', () => {
         force: false,
         ids: [assetToTrash.id],
       });
-      await page.keyboard.press('Escape');
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByText('Trash', { exact: true }).click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToTrash.id);
@@ -676,7 +676,7 @@ test.describe('Timeline', () => {
         ids: [assetToArchive.id],
       });
       await thumbnailUtils.expectThumbnailIsArchive(page, assetToArchive.id);
-      await page.keyboard.press('Escape');
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Archive').click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToArchive.id);
@@ -823,7 +823,7 @@ test.describe('Timeline', () => {
       });
       // ensure thumbnail still exists and has favorite icon
       await thumbnailUtils.expectThumbnailIsFavorite(page, assetToFavorite.id);
-      await page.keyboard.press('Escape');
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Favorites').click();
       await timelineUtils.waitForTimelineLoad(page);
       await pageUtils.goToAsset(page, assetToFavorite.fileCreatedAt);

mobile/lib/providers/infrastructure/action.provider.dart

@@ -14,6 +14,7 @@ import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.da
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart' show assetExifProvider;
 import 'package:immich_mobile/providers/infrastructure/tag.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/providers/websocket.provider.dart';
@@ -21,6 +22,7 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/services/action.service.dart';
 import 'package:immich_mobile/services/download.service.dart';
 import 'package:immich_mobile/services/foreground_upload.service.dart';
+import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
@@ -536,14 +538,22 @@ class ActionNotifier extends Notifier<void> {
       return ActionResult(count: ids.length, success: false, error: 'Expected single asset for applying edits');
     }
 
-    final completer = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV1", (dynamic data) {
-      final eventAsset = SyncAssetV1.fromJson(data["asset"]);
-      return eventAsset?.id == ids.first;
-    }, const Duration(seconds: 10));
+    Future<void> editReady;
+    if (ref.read(serverInfoProvider).serverVersion >= const SemVer(major: 3, minor: 0, patch: 0)) {
+      editReady = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV2", (dynamic data) {
+        final eventAsset = SyncAssetV2.fromJson(data["asset"]);
+        return eventAsset?.id == ids.first;
+      }, const Duration(seconds: 10));
+    } else {
+      editReady = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV1", (dynamic data) {
+        final eventAsset = SyncAssetV1.fromJson(data["asset"]);
+        return eventAsset?.id == ids.first;
+      }, const Duration(seconds: 10));
+    }
 
     try {
       await _service.applyEdits(ids.first, edits);
-      await completer;
+      await editReady;
       return const ActionResult(count: 1, success: true);
     } catch (error, stack) {
       _logger.severe('Failed to apply edits to assets', error, stack);

pnpm-lock.yaml

@@ -758,8 +758,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/sdk
       '@immich/ui':
-        specifier: ^0.79.0
-        version: 0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))
+        specifier: ^0.77.0
+        version: 0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.4.0
         version: 0.4.0
@@ -3204,8 +3204,8 @@ packages:
     resolution: {integrity: sha512-O1SJ+BbeFVsUTF4af1MfagJZM+lPgLjI8lQ3SZNjpo8SGJReSbUl2ii03OKuGni/G0yp2GnRLpOTNSHYGtVrcg==}
     hasBin: true
 
-  '@immich/ui@0.79.0':
-    resolution: {integrity: sha512-UEQZrP8CTc4Kth1xCV8/6Xmk1P51GQKISC7vKqcrM0BO0fxCaNwJK8Ocn6R8baVqH52JYfPb1yQR9bweBnCjXw==}
+  '@immich/ui@0.77.3':
+    resolution: {integrity: sha512-h3jrYE3JyGDOwXF7A4tVUHenP0L7TsDV22FyFInBTdwlWjjXoknwE1HWeTvvLxLeMuO5SHCZ9Q2D2al84xVjNw==}
     peerDependencies:
       '@sveltejs/kit': ^2.13.0
       svelte: ^5.0.0
@@ -15879,7 +15879,7 @@ snapshots:
       pg-connection-string: 2.13.0
       postgres: 3.4.9
 
-  '@immich/ui@0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))':
+  '@immich/ui@0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))':
     dependencies:
       '@internationalized/date': 3.12.1
       '@mdi/js': 7.4.47

server/Dockerfile

@@ -88,8 +88,8 @@ ENV NODE_ENV=production \
 COPY --from=server /output/server-pruned ./server
 COPY --from=web /usr/src/app/web/build /build/www
 COPY --from=cli /output/cli-pruned ./cli
-COPY --from=plugins /app/packages/plugin-core/dist /build/plugins/immich-core-plugin/dist
-COPY --from=plugins /app/packages/plugin-core/manifest.json /build/plugins/immich-core-plugin/manifest.json
+COPY --from=plugins /app/packages/plugin-core/dist /build/plugins/immich-plugin-core/dist
+COPY --from=plugins /app/packages/plugin-core/manifest.json /build/plugins/immich-plugin-core/manifest.json
 RUN ln -s ../../cli/bin/immich server/bin/immich
 COPY LICENSE /licenses/LICENSE.txt
 COPY LICENSE /LICENSE

server/src/schema/migrations/1773175313374-Test.ts

@@ -1,9 +0,0 @@
-import { Kysely, sql } from 'kysely';
-
-export async function up(db: Kysely<any>): Promise<void> {
-  await sql`ALTER TABLE "workflow" ADD "updateId" uuid NOT NULL DEFAULT immich_uuid_v7();`.execute(db);
-}
-
-export async function down(db: Kysely<any>): Promise<void> {
-  await sql`ALTER TABLE "workflow" DROP COLUMN "updateId";`.execute(db);
-}

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.79.0",
+    "@immich/ui": "^0.77.0",
     "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@mdi/js": "^7.4.47",
     "@noble/hashes": "^2.2.0",

web/src/lib/components/album-page/AlbumViewer.svelte

@@ -103,7 +103,7 @@
       {/if}
     </AssetSelectControlBar>
   {:else}
-    <ControlAppBar>
+    <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
           <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -91,7 +91,7 @@
     </div>
   </main>
   <header>
-    <ControlAppBar>
+    <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
           <Logo variant="inline" />

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 { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
+  import { mdiArrowLeft, 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>
+      <ControlAppBar onClose={() => goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}>
         {#snippet leading()}
           <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
             <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />

web/src/lib/components/shared-components/ControlAppBar.svelte

@@ -1,58 +1,97 @@
 <script lang="ts">
-  import { ControlBar, ControlBarContent, ControlBarHeader, ControlBarOverflow, ControlBarTitle } from '@immich/ui';
+  import { browser } from '$app/environment';
+  import { IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
-  import type { Snippet } from 'svelte';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';
 
   interface Props {
+    showBackButton?: boolean;
     backIcon?: string;
-    class?: string;
+    tailwindClasses?: string;
     forceDark?: boolean;
+    multiRow?: boolean;
     onClose?: () => void;
-    title?: Snippet | string;
     leading?: Snippet;
     children?: Snippet;
     trailing?: Snippet;
   }
 
   let {
+    showBackButton = true,
     backIcon = mdiClose,
-    class: className = '',
+    tailwindClasses = '',
     forceDark = false,
-    onClose,
-    title,
+    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);
+    }
+  });
 </script>
 
-<div class={['absolute top-0 w-full bg-transparent p-2', forceDark && 'dark']}>
-  <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 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>
 
-    {#if children}
-      <ControlBarContent>
-        {@render children()}
-      </ControlBarContent>
-    {/if}
+    <div class="w-full">
+      {@render children?.()}
+    </div>
 
-    {#if trailing}
-      <ControlBarOverflow>
-        {@render trailing()}
-      </ControlBarOverflow>
-    {/if}
-  </ControlBar>
+    <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>
 </div>

web/src/lib/components/timeline/AssetSelectControlBar.svelte

@@ -17,7 +17,7 @@
   const assets = $derived(assetMultiSelectManager.assets);
 </script>
 
-<ControlAppBar {onClose} {forceDark} backIcon={mdiClose} class="bg-white shadow-md">
+<ControlAppBar {onClose} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   {#snippet leading()}
     <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
       <p class="block sm:hidden">{assets.length}</p>

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 })

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({

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,8 +1,10 @@
 <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';
@@ -76,8 +78,6 @@
   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 backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
+        <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
           {#snippet trailing()}
             <ActionButton action={Cast} />
 

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -47,7 +47,7 @@
     <DownloadAction />
   </AssetSelectControlBar>
 {:else}
-  <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
+  <ControlAppBar showBackButton 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 } })}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -5,6 +5,9 @@
   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';
@@ -51,9 +54,6 @@
   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 backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
+      <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
         {#snippet trailing()}
           <ContextMenuButton
             items={[SelectFeaturePhoto, HidePerson, ShowPerson, SetDateOfBirth, Merge, Favorite, Unfavorite]}

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -387,7 +387,8 @@
     {:else}
       <div class="fixed inset-s-0 top-0 z-2 w-full">
         <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
-          <div class="mx-auto w-full max-w-2xl pe-2">
+          <div class="absolute bg-light"></div>
+          <div class="w-full flex-1 ps-4">
             <SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
           </div>
         </ControlAppBar>