refactor: memory lane (#25134)

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -270,7 +270,7 @@
   };
 
   afterNavigate(({ from, to }) => {
-    memoryStore.initialize().then(
+    memoryStore.ready().then(
       () => {
         let target = null;
         if (to?.params?.assetId) {

web/src/lib/components/photos-page/memory-lane.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-  import { resizeObserver } from '$lib/actions/resize-observer';
-  import { AppRoute, QueryParameter } from '$lib/constants';
-  import { memoryStore } from '$lib/stores/memory.store.svelte';
-  import { getAssetThumbnailUrl, memoryLaneTitle } from '$lib/utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { Icon } from '@immich/ui';
-  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  let shouldRender = $derived(memoryStore.memories?.length > 0);
-
-  onMount(async () => {
-    await memoryStore.initialize();
-  });
-
-  let memoryLaneElement: HTMLElement | undefined = $state();
-  let offsetWidth = $state(0);
-  let innerWidth = $state(0);
-
-  let scrollLeftPosition = $state(0);
-
-  const onScroll = () => {
-    scrollLeftPosition = memoryLaneElement?.scrollLeft ?? 0;
-  };
-
-  let canScrollLeft = $derived(scrollLeftPosition > 0);
-  let canScrollRight = $derived(Math.ceil(scrollLeftPosition) < Math.floor(innerWidth - offsetWidth));
-
-  const scrollBy = 400;
-  const scrollLeft = () => memoryLaneElement?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
-  const scrollRight = () => memoryLaneElement?.scrollBy({ left: scrollBy, behavior: 'smooth' });
-</script>
-
-{#if shouldRender}
-  <section
-    id="memory-lane"
-    bind:this={memoryLaneElement}
-    class="relative mt-3 overflow-x-scroll overflow-y-hidden whitespace-nowrap transition-all"
-    style="scrollbar-width:none"
-    use:resizeObserver={({ width }) => (offsetWidth = width)}
-    onscroll={onScroll}
-  >
-    {#if canScrollLeft || canScrollRight}
-      <div class="sticky start-0 z-1">
-        {#if canScrollLeft}
-          <div class="absolute start-4 max-md:top-19 top-27 -translate-y-1/2" transition:fade={{ duration: 200 }}>
-            <button
-              type="button"
-              class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
-              title={$t('previous')}
-              aria-label={$t('previous')}
-              onclick={scrollLeft}
-            >
-              <Icon icon={mdiChevronLeft} size="36" aria-label={$t('previous')} /></button
-            >
-          </div>
-        {/if}
-        {#if canScrollRight}
-          <div class="absolute end-4 max-md:top-19 top-27 -translate-y-1/2 z-1" transition:fade={{ duration: 200 }}>
-            <button
-              type="button"
-              class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
-              title={$t('next')}
-              aria-label={$t('next')}
-              onclick={scrollRight}
-            >
-              <Icon icon={mdiChevronRight} size="36" aria-label={$t('next')} /></button
-            >
-          </div>
-        {/if}
-      </div>
-    {/if}
-    <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
-      {#each memoryStore.memories as memory (memory.id)}
-        <a
-          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-3/4 md:aspect-4/3 max-md:h-37.5 xl:aspect-video h-54 rounded-xl"
-          href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
-        >
-          <img
-            class="h-full w-full rounded-xl object-cover"
-            src={getAssetThumbnailUrl(memory.assets[0].id)}
-            alt={$t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } })}
-            draggable="false"
-          />
-          <div
-            class="absolute start-0 top-0 h-full w-full rounded-xl bg-linear-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
-          ></div>
-          <p class="absolute bottom-2 start-4 text-lg text-white max-md:text-sm">
-            {$memoryLaneTitle(memory)}
-          </p>
-        </a>
-      {/each}
-    </div>
-  </section>
-{/if}
-
-<style>
-  .memory-card {
-    box-shadow:
-      rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
-      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
-  }
-</style>