From faaeaace1de4e4dd8bfc774f3e2d9938fc031660 Mon Sep 17 00:00:00 2001
From: bwees <brandonwees@gmail.com>
Date: Fri, 22 May 2026 16:50:18 -0500
Subject: [PATCH] fix: memory viewer bar

---
 .../shared-components/ControlAppBar.svelte    | 17 ++------
 .../timeline/AssetSelectControlBar.svelte     |  7 ++--
 .../[[assetId=id]]/MemoryViewer.svelte        | 39 ++++++++++++-------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/web/src/lib/components/shared-components/ControlAppBar.svelte b/web/src/lib/components/shared-components/ControlAppBar.svelte
index 00dc2711b6..6626e4619e 100644
--- a/web/src/lib/components/shared-components/ControlAppBar.svelte
+++ b/web/src/lib/components/shared-components/ControlAppBar.svelte
@@ -2,11 +2,11 @@
   import { ControlBar, ControlBarContent, ControlBarHeader, ControlBarOverflow, ControlBarTitle } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
     backIcon?: string;
-    class?: string;
-    forceDark?: boolean;
+    class?: ClassValue;
     onClose?: () => void;
     title?: Snippet | string;
     leading?: Snippet;
@@ -14,19 +14,10 @@
     trailing?: Snippet;
   }
 
-  let {
-    backIcon = mdiClose,
-    class: className = '',
-    forceDark = false,
-    onClose,
-    title,
-    leading,
-    children,
-    trailing,
-  }: Props = $props();
+  let { backIcon = mdiClose, class: className = '', onClose, title, leading, children, trailing }: Props = $props();
 </script>
 
-<div class={['absolute top-0 w-full bg-transparent p-2', forceDark && 'dark']}>
+<div class={['absolute top-0 w-full bg-transparent p-2']}>
   <ControlBar closeIcon={backIcon} {onClose} shape="round" class={className}>
     {#if title || leading}
       <ControlBarHeader>
diff --git a/web/src/lib/components/timeline/AssetSelectControlBar.svelte b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
index 1567dae9fd..b88213a3b0 100644
--- 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} class="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>
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
index 6b373de8cb..7eaa73140c 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@@ -2,11 +2,8 @@
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcuts } from '$lib/actions/shortcut';
-  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
-  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@@ -37,6 +34,7 @@
     mdiChevronLeft,
     mdiChevronRight,
     mdiChevronUp,
+    mdiClose,
     mdiDotsVertical,
     mdiHeart,
     mdiHeartOutline,
@@ -54,6 +52,8 @@
   import { t } from 'svelte-i18n';
   import type { Attachment } from 'svelte/attachments';
   import { Tween } from 'svelte/motion';
+  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
+  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
@@ -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)]"
       >