feat(web): enhance ux/ui of the album list page (#8499)

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/album-page/album-card.svelte

@@ -2,43 +2,25 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetThumbnailUrl } from '$lib/utils';
-  import { ThumbnailFormat, getAssetThumbnail, getUserById, type AlbumResponseDto } from '@immich/sdk';
+  import type { AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { getContextMenuPosition, type ContextMenuPosition } from '../../utils/context-menu';
-  import IconButton from '../elements/buttons/icon-button.svelte';
+  import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
+  import { getShortDateRange } from '$lib/utils/date-time';
+  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
+  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
 
   export let album: AlbumResponseDto;
-  export let isSharingView = false;
-  export let showItemCount = true;
+  export let showOwner = false;
+  export let showDateRange = false;
+  export let showItemCount = false;
   export let preload = false;
-  export let onShowContextMenu: ((position: ContextMenuPosition) => void) | undefined = undefined;
-
-  $: imageData = album.albumThumbnailAssetId
-    ? getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
-    : null;
-
-  const loadHighQualityThumbnail = async (assetId: string | null) => {
-    if (!assetId) {
-      return;
-    }
-
-    const data = await getAssetThumbnail({ id: assetId, format: ThumbnailFormat.Jpeg });
-    return URL.createObjectURL(data);
-  };
+  export let onShowContextMenu: ((position: ContextMenuPosition) => unknown) | undefined = undefined;
 
   const showAlbumContextMenu = (e: MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
     onShowContextMenu?.(getContextMenuPosition(e));
   };
-
-  onMount(async () => {
-    imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || null;
-  });
-
-  const getAlbumOwnerInfo = () => getUserById({ id: album.ownerId });
 </script>
 
 <div
@@ -57,60 +39,43 @@
     </div>
   {/if}
 
-  <div class={`relative aspect-square`}>
-    {#if album.albumThumbnailAssetId}
-      <img
-        loading={preload ? 'eager' : 'lazy'}
-        src={imageData}
-        alt={album.albumName}
-        class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
-        data-testid="album-image"
-        draggable="false"
-      />
-    {:else}
-      <enhanced:img
-        loading={preload ? 'eager' : 'lazy'}
-        src="$lib/assets/no-thumbnail.png"
-        sizes="min(271px,186px)"
-        alt={album.albumName}
-        class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
-        data-testid="album-image"
-        draggable="false"
-      />
-    {/if}
-  </div>
+  <AlbumCover {album} {preload} css="h-full w-full transition-all duration-300 hover:shadow-lg" />
 
   <div class="mt-4">
     <p
-      class="w-full truncate text-lg font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary"
+      class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary"
       data-testid="album-name"
       title={album.albumName}
     >
       {album.albumName}
     </p>
 
-    <span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
+    {#if showDateRange && album.startDate && album.endDate}
+      <p class="flex text-sm dark:text-immich-dark-fg capitalize">
+        {getShortDateRange(album.startDate, album.endDate)}
+      </p>
+    {/if}
+
+    <span class="flex gap-2 text-sm" data-testid="album-details">
       {#if showItemCount}
         <p>
           {album.assetCount.toLocaleString($locale)}
-          {album.assetCount == 1 ? `item` : `items`}
+          {album.assetCount === 1 ? `item` : `items`}
         </p>
       {/if}
 
-      {#if isSharingView || album.shared}
-        <p>·</p>
+      {#if (showOwner || album.shared) && showItemCount}
+        <p>•</p>
       {/if}
 
-      {#if isSharingView}
-        {#await getAlbumOwnerInfo() then albumOwner}
-          {#if $user.email == albumOwner.email}
-            <p>Owned</p>
-          {:else}
-            <p>
-              Shared by {albumOwner.name}
-            </p>
-          {/if}
-        {/await}
+      {#if showOwner}
+        {#if $user.id === album.ownerId}
+          <p>Owned</p>
+        {:else if album.owner}
+          <p>Shared by {album.owner.name}</p>
+        {:else}
+          <p>Shared</p>
+        {/if}
       {:else if album.shared}
         <p>Shared</p>
       {/if}