fix: support previous server versions for edit ready events

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

web/src/lib/commands.ts

@@ -1,35 +1,17 @@
 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';
 
@@ -67,133 +49,7 @@ export const getPagesProvider = ($t: MessageFormatter) => {
     },
   ].map((route) => ({ ...route, $if: () => authManager.authenticated && authManager.user.isAdmin }));
 
-  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] });
+  return defaultProvider({ name: $t('page'), actions: adminPages });
 };
 
 const getMyImmichLink = () => {

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

@@ -1,5 +1,6 @@
 <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';
@@ -12,8 +13,6 @@
 
   type Props = {
     viewerAssets: ViewerAsset[];
-    firstActiveIndex: number;
-    lastActiveIndex: number;
     width: number;
     height: number;
     manager: VirtualScrollManager;
@@ -28,27 +27,15 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const {
-    viewerAssets,
-    firstActiveIndex,
-    lastActiveIndex,
-    width,
-    height,
-    manager,
-    thumbnail,
-    customThumbnailLayout,
-  }: Props = $props();
+  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-  const visibleViewerAssets = $derived(
-    firstActiveIndex === -1 ? [] : viewerAssets.slice(firstActiveIndex, lastActiveIndex + 1),
-  );
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each visibleViewerAssets as viewerAsset (viewerAsset.id)}
+  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

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

@@ -101,8 +101,6 @@
     <AssetLayout
       {manager}
       viewerAssets={timelineDay.viewerAssets}
-      firstActiveIndex={timelineDay.firstActiveIndex}
-      lastActiveIndex={timelineDay.lastActiveIndex}
       height={timelineDay.height}
       width={timelineDay.width}
       {customThumbnailLayout}

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/managers/timeline-manager/internal/intersection-support.svelte.ts

@@ -53,3 +53,17 @@ 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,
+  );
+}

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -1,31 +1,12 @@
 import { AssetOrder, AssetOrderBy } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
-import type { CommonLayoutOptions, CommonPosition } from '$lib/utils/layout-utils';
+import type { CommonLayoutOptions } 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 = (lo + hi) >>> 1;
-    if (key(assets[mid].position!) < target) {
-      lo = mid + 1;
-    } else {
-      hi = mid;
-    }
-  }
-  return lo;
-}
-
 export class TimelineDay {
   readonly timelineMonth: TimelineMonth;
   readonly index: number;
@@ -36,11 +17,7 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
-
-  // Assets in or near the viewport; active assets should be added to the DOM.
-  firstActiveIndex = $state(-1);
-  lastActiveIndex = $state(-1);
-  isInOrNearViewport = $derived(this.firstActiveIndex !== -1);
+  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
@@ -172,29 +149,6 @@ 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.firstActiveIndex = -1;
-      this.lastActiveIndex = -1;
-      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.firstActiveIndex = hasActive ? first : -1;
-    this.lastActiveIndex = hasActive ? last : -1;
   }
 
   get absoluteTimelineDayTop() {

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -214,11 +214,6 @@ 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);

web/src/lib/managers/timeline-manager/timeline-month.svelte.ts

@@ -254,7 +254,7 @@ export class TimelineMonth {
       addContext.newTimelineDays.add(timelineDay);
     }
 
-    const viewerAsset = new ViewerAsset(timelineAsset);
+    const viewerAsset = new ViewerAsset(timelineDay, timelineAsset);
     timelineDay.viewerAssets.push(viewerAsset);
     addContext.changedTimelineDays.add(timelineDay);
   }

web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts

@@ -1,12 +1,36 @@
 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(asset: TimelineAsset) {
+  constructor(group: TimelineDay, asset: TimelineAsset) {
+    this.#group = group;
     this.asset = asset;
   }
 }

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