From ad996d1b8815d03a3e6308b0e81baf74e27b9f94 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sun, 26 Apr 2026 22:05:56 -0500
Subject: [PATCH] wip: fav button

---
 .../components/album-page/AlbumCard.svelte    | 79 +++++++++++++------
 .../album-page/__tests__/AlbumCard.spec.ts    |  8 +-
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/web/src/lib/components/album-page/AlbumCard.svelte b/web/src/lib/components/album-page/AlbumCard.svelte
index 61b1777fbb..fe5734a218 100644
--- a/web/src/lib/components/album-page/AlbumCard.svelte
+++ b/web/src/lib/components/album-page/AlbumCard.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { toggleAlbumFavorite } from '$lib/services/album.service';
   import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { Icon, IconButton } from '@immich/ui';
-  import { mdiDotsVertical, mdiHeart } from '@mdi/js';
+  import { mdiDotsVertical, mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -26,48 +27,78 @@
     onShowContextMenu = undefined,
   }: Props = $props();
 
+  let togglingFavorite = $state(false);
+
   const showAlbumContextMenu = (e: MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
     onShowContextMenu?.(getContextMenuPositionFromEvent(e));
   };
+
+  const onToggleFavorite = async (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (togglingFavorite) {
+      return;
+    }
+    togglingFavorite = true;
+    try {
+      await toggleAlbumFavorite(album);
+    } finally {
+      togglingFavorite = false;
+    }
+  };
 </script>
 
 <div
   class="group relative rounded-2xl border border-transparent p-5 hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
   data-testid="album-card"
 >
-  {#if onShowContextMenu}
-    <div
-      id="icon-{album.id}"
-      class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
-      data-testid="context-button-parent"
+  <div class="relative">
+    <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
+    {#if onShowContextMenu}
+      <div
+        id="icon-{album.id}"
+        class="absolute inset-e-3 top-3 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
+        data-testid="context-button-parent"
+      >
+        <IconButton
+          color="secondary"
+          aria-label={$t('show_album_options')}
+          icon={mdiDotsVertical}
+          shape="round"
+          variant="filled"
+          size="medium"
+          class="icon-white-drop-shadow"
+          onclick={showAlbumContextMenu}
+        />
+      </div>
+    {/if}
+    <button
+      type="button"
+      class="absolute inset-e-3 bottom-3 inline-flex items-center justify-center rounded-full p-2 bg-white/50 dark:bg-gray-900/90 backdrop-blur-md shadow-lg ring-1 ring-black/5 transition-all duration-150 hover:scale-110 active:scale-95 disabled:opacity-50 {album.isFavorite
+        ? 'text-red-500 dark:text-red-400'
+        : 'text-gray-500 dark:text-gray-300 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:text-red-500 dark:hover:text-red-400'}"
+      aria-label={$t(album.isFavorite ? 'unfavorite' : 'favorite')}
+      aria-pressed={album.isFavorite}
+      disabled={togglingFavorite}
+      onclick={onToggleFavorite}
     >
-      <IconButton
-        color="secondary"
-        aria-label={$t('show_album_options')}
-        icon={mdiDotsVertical}
-        shape="round"
-        variant="filled"
-        size="medium"
-        class="icon-white-drop-shadow"
-        onclick={showAlbumContextMenu}
+      <Icon
+        icon={album.isFavorite ? mdiHeart : mdiHeartOutline}
+        size="1.125em"
+        class={album.isFavorite ? 'drop-shadow-[0_1px_2px_rgba(239,68,68,0.5)]' : ''}
       />
-    </div>
-  {/if}
-
-  <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
+    </button>
+  </div>
 
   <div class="mt-4">
     <p
-      class="flex items-center gap-1 w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
+      class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
       data-testid="album-name"
       title={album.albumName}
     >
-      {#if album.isFavorite}
-        <Icon icon={mdiHeart} size="1em" aria-label={$t('favorite')} class="text-primary shrink-0" />
-      {/if}
-      <span class="line-clamp-2">{album.albumName}</span>
+      {album.albumName}
     </p>
 
     {#if showDateRange && album.startDate && album.endDate}
diff --git a/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
index 573c73b408..83ae5e039d 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, waitFor, type RenderResult } from '@testing-library/svelte';
+import { waitFor, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { init, register, waitLocale } from 'svelte-i18n';
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
@@ -40,7 +40,7 @@ describe('AlbumCard component', () => {
       shared: true,
     },
   ])('shows album data without thumbnail with count $count - shared: $shared', async ({ album, count, shared }) => {
-    sut = render(AlbumCard, { album, showItemCount: true });
+    sut = renderWithTooltips(AlbumCard, { album, showItemCount: true });
 
     const albumImgElement = sut.getByTestId('album-image');
     const albumNameElement = sut.getByTestId('album-name');
@@ -64,7 +64,7 @@ describe('AlbumCard component', () => {
       shared: false,
       albumName: 'some album name',
     });
-    sut = render(AlbumCard, { album, showItemCount: true });
+    sut = renderWithTooltips(AlbumCard, { album, showItemCount: true });
 
     const albumImgElement = sut.getByTestId('album-image');
     const albumNameElement = sut.getByTestId('album-name');
@@ -79,7 +79,7 @@ describe('AlbumCard component', () => {
 
   it('hides context menu when "onShowContextMenu" is undefined', () => {
     const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
-    sut = render(AlbumCard, { album });
+    sut = renderWithTooltips(AlbumCard, { album });
 
     const contextButtonParent = sut.queryByTestId('context-button-parent');
     expect(contextButtonParent).not.toBeInTheDocument();