feat: persistent memories (#15953)

feat: memories

refactor

chore: use heart as favorite icon

fix: linting

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

@@ -13,25 +13,45 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import { cancelMultiselect } from '$lib/utils/asset-utils';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { type Viewport } from '$lib/stores/assets.store';
-  import { memoryStore } from '$lib/stores/memory.store';
+  import { loadMemories, memoryStore } from '$lib/stores/memory.store';
   import { locale } from '$lib/stores/preferences.store';
+  import { preferences } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
+  import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { fromLocalDateTime } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, getMemoryLane, type AssetResponseDto, type MemoryLaneResponseDto } from '@immich/sdk';
   import {
+    AssetMediaSize,
+    deleteMemory,
+    removeMemoryAssets,
+    updateMemory,
+    type AssetResponseDto,
+    type MemoryResponseDto,
+  } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
+  import {
+    mdiCardsOutline,
     mdiChevronDown,
     mdiChevronLeft,
     mdiChevronRight,
     mdiChevronUp,
     mdiDotsVertical,
+    mdiHeart,
+    mdiHeartOutline,
+    mdiImageMinusOutline,
     mdiImageSearch,
     mdiPause,
     mdiPlay,
@@ -45,9 +65,6 @@
   import { tweened } from 'svelte/motion';
   import { derived as storeDerived } from 'svelte/store';
   import { fade } from 'svelte/transition';
-  import { preferences } from '$lib/stores/user.store';
-  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 
   type MemoryIndex = {
     memoryIndex: number;
@@ -55,20 +72,20 @@
   };
 
   type MemoryAsset = MemoryIndex & {
-    memory: MemoryLaneResponseDto;
+    memory: MemoryResponseDto;
     asset: AssetResponseDto;
-    previousMemory?: MemoryLaneResponseDto;
+    previousMemory?: MemoryResponseDto;
     previous?: MemoryAsset;
     next?: MemoryAsset;
-    nextMemory?: MemoryLaneResponseDto;
+    nextMemory?: MemoryResponseDto;
   };
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
   let galleryInView = $state(false);
   let paused = $state(false);
-  let current: MemoryAsset | undefined = $state(undefined);
-  // let memories: MemoryAsset[] = [];
+  let current = $state<MemoryAsset | undefined>(undefined);
+  let isSaved = $derived(current?.memory.isSaved);
   let resetPromise = $state(Promise.resolve());
 
   const { isViewing } = assetViewingStore;
@@ -168,6 +185,7 @@
     }
     current.memory.assets = current.memory.assets;
   };
+
   const handleRemove = (ids: string[]) => {
     if (!current) {
       return;
@@ -186,13 +204,65 @@
     current = loadFromParams($memories, $page);
   };
 
+  const handleDeleteMemoryAsset = async (current?: MemoryAsset) => {
+    if (!current) {
+      return;
+    }
+
+    if (current.memory.assets.length === 1) {
+      return handleDeleteMemory(current);
+    }
+
+    if (current.previous) {
+      current.previous.next = current.next;
+    }
+    if (current.next) {
+      current.next.previous = current.previous;
+    }
+
+    current.memory.assets = current.memory.assets.filter((asset) => asset.id !== current.asset.id);
+
+    $memoryStore = $memoryStore;
+
+    await removeMemoryAssets({ id: current.memory.id, bulkIdsDto: { ids: [current.asset.id] } });
+  };
+
+  const handleDeleteMemory = async (current?: MemoryAsset) => {
+    if (!current) {
+      return;
+    }
+
+    await deleteMemory({ id: current.memory.id });
+
+    notificationController.show({ message: $t('removed_memory'), type: NotificationType.Info });
+
+    await loadMemories();
+    init();
+  };
+
+  const handleSaveMemory = async (current?: MemoryAsset) => {
+    if (!current) {
+      return;
+    }
+
+    current.memory.isSaved = !current.memory.isSaved;
+
+    await updateMemory({
+      id: current.memory.id,
+      memoryUpdateDto: {
+        isSaved: current.memory.isSaved,
+      },
+    });
+
+    notificationController.show({
+      message: current.memory.isSaved ? $t('added_to_favorites') : $t('removed_from_favorites'),
+      type: NotificationType.Info,
+    });
+  };
+
   onMount(async () => {
     if (!$memoryStore) {
-      const localTime = new Date();
-      $memoryStore = await getMemoryLane({
-        month: localTime.getMonth() + 1,
-        day: localTime.getDate(),
-      });
+      await loadMemories();
     }
 
     init();
@@ -268,7 +338,7 @@
       {#snippet leading()}
         {#if current}
           <p class="text-lg">
-            {$memoryLaneTitle(current.memory.yearsAgo)}
+            {$memoryLaneTitle(current.memory)}
           </p>
         {/if}
       {/snippet}
@@ -352,7 +422,7 @@
             {#if current.previousMemory}
               <div class="absolute bottom-4 right-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('previous').toUpperCase()}</p>
-                <p class="text-xl">{$memoryLaneTitle(current.previousMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(current.previousMemory)}</p>
               </div>
             {/if}
           </button>
@@ -374,17 +444,63 @@
             {/key}
 
             <div
-              class="absolute bottom-6 right-6 transition-all"
+              class="absolute bottom-0 right-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2"
               class:opacity-0={galleryInView}
               class:opacity-100={!galleryInView}
             >
-              <CircleIconButton
-                href="{AppRoute.PHOTOS}?at={current.asset.id}"
-                icon={mdiImageSearch}
-                title={$t('view_in_timeline')}
-                color="light"
-                onclick={() => {}}
-              />
+              <div class="flex">
+                <IconButton
+                  icon={isSaved ? mdiHeart : mdiHeartOutline}
+                  shape="round"
+                  variant="ghost"
+                  size="giant"
+                  color="secondary"
+                  aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
+                  onclick={() => handleSaveMemory(current)}
+                  class="text-white dark:text-white"
+                />
+                <!-- <IconButton
+                  icon={mdiShareVariantOutline}
+                  shape="round"
+                  variant="ghost"
+                  size="giant"
+                  color="secondary"
+                  aria-label={$t('share')}
+                /> -->
+                <ButtonContextMenu
+                  icon={mdiDotsVertical}
+                  title={$t('menu')}
+                  onclick={() => handleAction('pause')}
+                  direction="left"
+                  align="bottom-right"
+                  class="text-white dark:text-white"
+                >
+                  <MenuOption
+                    onClick={() => handleDeleteMemory(current)}
+                    text={'Remove memory'}
+                    icon={mdiCardsOutline}
+                  />
+                  <MenuOption
+                    onClick={() => handleDeleteMemoryAsset(current)}
+                    text={'Remove photo from this memory'}
+                    icon={mdiImageMinusOutline}
+                  />
+                  <!-- shortcut={{ key: 'l', shift: shared }} -->
+                </ButtonContextMenu>
+              </div>
+
+              <div>
+                <IconButton
+                  href="{AppRoute.PHOTOS}?at={current.asset.id}"
+                  icon={mdiImageSearch}
+                  aria-label={$t('view_in_timeline')}
+                  color="secondary"
+                  variant="ghost"
+                  shape="round"
+                  size="giant"
+                  class="text-white dark:text-white"
+                />
+              </div>
             </div>
             <!-- CONTROL BUTTONS -->
             {#if current.previous}
@@ -449,7 +565,7 @@
             {#if current.nextMemory}
               <div class="absolute bottom-4 left-4 text-left text-white">
                 <p class="text-xs font-semibold text-gray-200">{$t('up_next').toUpperCase()}</p>
-                <p class="text-xl">{$memoryLaneTitle(current.nextMemory.yearsAgo)}</p>
+                <p class="text-xl">{$memoryLaneTitle(current.nextMemory)}</p>
               </div>
             {/if}
           </button>