wip: fav button

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 class="relative">
-    <div
+    <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
-      id="icon-{album.id}"
+    {#if onShowContextMenu}
-      class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
+      <div
-      data-testid="context-button-parent"
+        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
+      <Icon
-        color="secondary"
+        icon={album.isFavorite ? mdiHeart : mdiHeartOutline}
-        aria-label={$t('show_album_options')}
+        size="1.125em"
-        icon={mdiDotsVertical}
+        class={album.isFavorite ? 'drop-shadow-[0_1px_2px_rgba(239,68,68,0.5)]' : ''}
-        shape="round"
-        variant="filled"
-        size="medium"
-        class="icon-white-drop-shadow"
-        onclick={showAlbumContextMenu}
       />
-    </div>
+    </button>
-  {/if}
+  </div>
-
-  <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
 
   <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}
+      {album.albumName}
-        <Icon icon={mdiHeart} size="1em" aria-label={$t('favorite')} class="text-primary shrink-0" />
-      {/if}
-      <span class="line-clamp-2">{album.albumName}</span>
     </p>
 
     {#if showDateRange && album.startDate && album.endDate}

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();