fix: memory viewer bar

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

@@ -536,7 +536,7 @@ test.describe('Timeline', () => {
         force: false,
         ids: [assetToTrash.id],
       });
-      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
+      await page.keyboard.press('Escape');
       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.locator('#asset-selection-app-bar').getByLabel('Close').click();
+      await page.keyboard.press('Escape');
       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.locator('#asset-selection-app-bar').getByLabel('Close').click();
+      await page.keyboard.press('Escape');
       await page.getByRole('link').getByText('Favorites').click();
       await timelineUtils.waitForTimelineLoad(page);
       await pageUtils.goToAsset(page, assetToFavorite.fileCreatedAt);

pnpm-lock.yaml

@@ -758,8 +758,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/sdk
       '@immich/ui':
-        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))
+        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))
       '@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.77.3':
-    resolution: {integrity: sha512-h3jrYE3JyGDOwXF7A4tVUHenP0L7TsDV22FyFInBTdwlWjjXoknwE1HWeTvvLxLeMuO5SHCZ9Q2D2al84xVjNw==}
+  '@immich/ui@0.79.0':
+    resolution: {integrity: sha512-UEQZrP8CTc4Kth1xCV8/6Xmk1P51GQKISC7vKqcrM0BO0fxCaNwJK8Ocn6R8baVqH52JYfPb1yQR9bweBnCjXw==}
     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.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))':
+  '@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))':
     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-plugin-core/dist
-COPY --from=plugins /app/packages/plugin-core/manifest.json /build/plugins/immich-plugin-core/manifest.json
+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
 RUN ln -s ../../cli/bin/immich server/bin/immich
 COPY LICENSE /licenses/LICENSE.txt
 COPY LICENSE /LICENSE

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

@@ -0,0 +1,9 @@
+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.77.0",
+    "@immich/ui": "^0.79.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 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" />

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" />

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" />

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']}>
+  <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>

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[];
-    firstInOrNearIndex: number;
-    lastInOrNearIndex: number;
     width: number;
     height: number;
     manager: VirtualScrollManager;
@@ -28,27 +27,15 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const {
-    viewerAssets,
-    firstInOrNearIndex,
-    lastInOrNearIndex,
-    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(
-    firstInOrNearIndex === -1 ? [] : viewerAssets.slice(firstInOrNearIndex, lastInOrNearIndex + 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/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>

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

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

web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts

@@ -54,3 +54,16 @@ export function updateTimelineMonthViewportProximity(timelineManager: TimelineMa
   }
 }
 
+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

@@ -3,15 +3,10 @@ import { SvelteSet } from 'svelte/reactivity';
 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;
-
 export class TimelineDay {
   readonly timelineMonth: TimelineMonth;
   readonly index: number;
@@ -22,12 +17,7 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
-
-  // Indices into viewerAssets bounding the in-or-near range. -1/-1 means no assets are in-or-near.
-  // Updated imperatively by updateAssetBoundaries() from updateViewportProximities() and layout().
-  firstInOrNearIndex = $state(-1);
-  lastInOrNearIndex = $state(-1);
-  isInOrNearViewport = $derived(this.firstInOrNearIndex !== -1);
+  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
@@ -159,73 +149,6 @@ export class TimelineDay {
     for (let i = 0; i < this.viewerAssets.length; i++) {
       this.viewerAssets[i].position = geometry.getPosition(i);
     }
-    this.updateAssetBoundaries();
-  }
-
-  // Imperatively (re)computes firstInOrNearIndex / lastInOrNearIndex via binary search on
-  // asset positions. Called from layout() (positions changed) and from
-  // updateViewportProximities() (viewport changed). Cost: O(log N) per day instead of the
-  // O(N) per-asset $derived recompute that the reactive equivalent would do.
-  updateAssetBoundaries() {
-    const manager = this.timelineMonth.timelineManager;
-    const visibleWindow = manager.visibleWindow;
-    if (this.viewerAssets.length === 0 || !this.viewerAssets[0].position) {
-      this.firstInOrNearIndex = -1;
-      this.lastInOrNearIndex = -1;
-      return;
-    }
-    // Match the asset-level proximity zone from calculateViewerAssetViewportProximity:
-    // window is expanded by headerHeight on both sides, then by INTERSECTION_EXPAND_*
-    // for the "near" band. Combined: the in-or-near zone reaches headerHeight + EXPAND
-    // beyond the visible window on each side.
-    const headerHeight = manager.headerHeight;
-    const dayOffset = this.absoluteTimelineDayTop;
-    const localExpandedTop = visibleWindow.top - headerHeight - INTERSECTION_EXPAND_TOP - dayOffset;
-    const localExpandedBottom = visibleWindow.bottom + headerHeight + INTERSECTION_EXPAND_BOTTOM - dayOffset;
-
-    // Lower bound: smallest i where asset[i].bottom >= localExpandedTop
-    // (asset's bottom edge is at or below the in-or-near top boundary).
-    let lo = 0;
-    let hi = this.viewerAssets.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >>> 1;
-      const position = this.viewerAssets[mid].position!;
-      if (position.top + position.height < localExpandedTop) {
-        lo = mid + 1;
-      } else {
-        hi = mid;
-      }
-    }
-    const firstIdx = lo;
-
-    if (firstIdx >= this.viewerAssets.length) {
-      // Entire day is above the in-or-near zone.
-      this.firstInOrNearIndex = -1;
-      this.lastInOrNearIndex = -1;
-      return;
-    }
-
-    // Upper bound: smallest i where asset[i].top >= localExpandedBottom
-    // (asset's top edge crosses past the in-or-near bottom boundary).
-    lo = firstIdx;
-    hi = this.viewerAssets.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >>> 1;
-      if (this.viewerAssets[mid].position!.top >= localExpandedBottom) {
-        hi = mid;
-      } else {
-        lo = mid + 1;
-      }
-    }
-    const lastIdx = lo - 1;
-
-    if (lastIdx < firstIdx) {
-      this.firstInOrNearIndex = -1;
-      this.lastInOrNearIndex = -1;
-    } else {
-      this.firstInOrNearIndex = firstIdx;
-      this.lastInOrNearIndex = lastIdx;
-    }
   }
 
   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/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import { goto, invalidate, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import AlbumDescription from './AlbumDescription.svelte';
   import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
   import AlbumSummary from '$lib/components/album-page/AlbumSummary.svelte';
-  import AlbumTitle from './AlbumTitle.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/ActivityStatus.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/ActivityViewer.svelte';
   import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
@@ -78,6 +76,8 @@
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
+  import AlbumDescription from './AlbumDescription.svelte';
+  import AlbumTitle from './AlbumTitle.svelte';
 
   interface Props {
     data: PageData;
@@ -499,7 +499,7 @@
       </AssetSelectControlBar>
     {:else}
       {#if viewMode === AlbumPageViewMode.VIEW}
-        <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
+        <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
           {#snippet trailing()}
             <ActionButton action={Cast} />
 

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte

@@ -2,11 +2,8 @@
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcuts } from '$lib/actions/shortcut';
-  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
-  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@@ -37,6 +34,7 @@
     mdiChevronLeft,
     mdiChevronRight,
     mdiChevronUp,
+    mdiClose,
     mdiDotsVertical,
     mdiHeart,
     mdiHeartOutline,
@@ -54,6 +52,8 @@
   import { t } from 'svelte-i18n';
   import type { Attachment } from 'svelte/attachments';
   import { Tween } from 'svelte/motion';
+  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
+  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
@@ -327,8 +327,8 @@
 />
 
 {#if assetMultiSelectManager.selectionActive}
-  <div class="dark sticky top-0 z-1">
-    <AssetSelectControlBar forceDark>
+  <div class="sticky top-0 z-1 dark">
+    <AssetSelectControlBar>
       {@const Actions = getAssetBulkActions($t)}
       <CreateSharedLink />
       <IconButton
@@ -365,22 +365,33 @@
 
 <section
   id="memory-viewer"
-  class="w-full bg-immich-dark-gray"
+  class="dark w-full text-white bg-immich-dark-gray"
   bind:this={memoryWrapper}
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
 >
   {#if current}
-    <ControlAppBar onClose={() => goto(Route.photos())} forceDark multiRow>
-      {#snippet leading()}
-        {#if current}
+    <div
+      class="max-md:h-auto max-md:flex-col dark grid grid-cols-[100%] md:grid-cols-[25%_50%_25%] px-2 py-2 md:px-4 md:py-4"
+    >
+      {#if current}
+        <div class="flex gap-2 md:gap-6 items-center">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            icon={mdiClose}
+            aria-label={$t('close')}
+            size="large"
+            onclick={() => goto(Route.photos())}
+          />
           <p class="text-lg">
             {$memoryLaneTitle(current.memory)}
           </p>
-        {/if}
-      {/snippet}
+        </div>
+      {/if}
 
-      <div class="dark flex place-content-center place-items-center gap-2">
+      <div class="dark flex w-full place-content-center place-items-center gap-2">
         <IconButton
           shape="round"
           variant="ghost"
@@ -438,7 +449,7 @@
           </media-mute-button>
         {/if}
       </div>
-    </ControlAppBar>
+    </div>
 
     {#if galleryInView}
       <div
@@ -462,7 +473,7 @@
       </div>
     {/if}
     <!-- Viewer -->
-    <section class="overflow-hidden pt-32 md:pt-20" bind:clientHeight={viewerHeight}>
+    <section class="overflow-hidden pt-6 md:pt-0" bind:clientHeight={viewerHeight}>
       <div
         class="ms-[-100%] box-border flex h-[calc(100vh-224px)] w-[300%] items-center justify-center gap-10 overflow-hidden md:h-[calc(100vh-180px)]"
       >

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

@@ -47,7 +47,7 @@
     <DownloadAction />
   </AssetSelectControlBar>
 {:else}
-  <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
+  <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
     {#snippet leading()}
       <p class="whitespace-nowrap text-immich-fg dark:text-immich-dark-fg">
         {$t('partner_list_user_photos', { values: { user: data.partner.name } })}

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

@@ -5,9 +5,6 @@
   import { listNavigation } from '$lib/actions/list-navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import EditNameInput from './EditNameInput.svelte';
-  import MergeFaceSelector from './MergeFaceSelector.svelte';
-  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
@@ -54,6 +51,9 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
+  import EditNameInput from './EditNameInput.svelte';
+  import MergeFaceSelector from './MergeFaceSelector.svelte';
+  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
 
   interface Props {
     data: PageData;
@@ -493,7 +493,7 @@
     </AssetSelectControlBar>
   {:else}
     {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
-      <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
+      <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
         {#snippet trailing()}
           <ContextMenuButton
             items={[SelectFeaturePhoto, HidePerson, ShowPerson, SetDateOfBirth, Merge, Favorite, Unfavorite]}

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

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