refactor(web): refactor album selection modal and album summary component (#9658)

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

@@ -26,7 +26,7 @@
 </script>
 
 <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-  <p>{getDateRange(startDate, endDate)}</p>
+  <span>{getDateRange(startDate, endDate)}</span>
-  <p>·</p>
+  <span>•</span>
-  <p>{album.assetCount} items</p>
+  <span>{album.assetCount} items</span>
 </span>

web/src/lib/components/asset-viewer/album-list-item-details.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { AlbumResponseDto } from '@immich/sdk';
+
+  export let album: AlbumResponseDto;
+</script>
+
+<span>{album.assetCount} items</span>
+{#if album.shared}
+  <span>• Shared</span>
+{/if}

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -3,13 +3,13 @@
   import { ThumbnailFormat, type AlbumResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import { normalizeSearchString } from '$lib/utils/string-utils.js';
+  import AlbumListItemDetails from './album-list-item-details.svelte';
 
   const dispatch = createEventDispatcher<{
     album: void;
   }>();
 
   export let album: AlbumResponseDto;
-  export let variant: 'simple' | 'full' = 'full';
   export let searchQuery = '';
   let albumNameArray: string[] = ['', '', ''];
 
@@ -31,7 +31,7 @@
   on:click={() => dispatch('album')}
   class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
 >
-  <div class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
+  <span class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
     {#if album.albumThumbnailAssetId}
       <img
         src={getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
@@ -41,17 +41,13 @@
         draggable="false"
       />
     {/if}
-  </div>
+  </span>
-  <div class="flex h-12 flex-col items-start justify-center overflow-hidden">
+  <span class="flex h-12 flex-col items-start justify-center overflow-hidden">
     <span class="w-full shrink overflow-hidden text-ellipsis whitespace-nowrap"
       >{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span
     >
     <span class="flex gap-1 text-sm">
-      {#if variant === 'simple'}
+      <AlbumListItemDetails {album} />
-        <span>{album.shared ? 'Shared' : ''}</span>
+    </span>
-      {:else}
-        <span>{album.assetCount} items{album.shared ? ' - Shared' : ''}</span>
-      {/if}
   </span>
-  </div>
 </button>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -33,8 +33,8 @@
   import { DateTime } from 'luxon';
   import { createEventDispatcher, onMount } from 'svelte';
   import { slide } from 'svelte/transition';
-  import { asByteUnitString } from '../../utils/byte-units';
+  import { asByteUnitString } from '$lib/utils/byte-units';
-  import { handleError } from '../../utils/handle-error';
+  import { handleError } from '$lib/utils/handle-error';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import PersonSidePanel from '../faces-page/person-side-panel.svelte';
@@ -43,6 +43,7 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import { shortcut } from '$lib/utils/shortcut';
+  import AlbumListItemDetails from './album-list-item-details.svelte';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -607,10 +608,7 @@
             <p class="dark:text-immich-dark-primary">{album.albumName}</p>
             <div class="flex flex-col gap-0 text-sm">
               <div>
-                <span>{album.assetCount} items</span>
+                <AlbumListItemDetails {album} />
-                {#if album.shared}
-                  <span> • Shared</span>
-                {/if}
               </div>
             </div>
           </div>

web/src/lib/components/shared-components/album-selection-modal.svelte

@@ -89,7 +89,7 @@
           {#if !shared && search.length === 0}
             <p class="px-5 py-3 text-xs">RECENT</p>
             {#each recentAlbums as album (album.id)}
-              <AlbumListItem variant="simple" {album} on:album={() => handleSelect(album)} />
+              <AlbumListItem {album} on:album={() => handleSelect(album)} />
             {/each}
           {/if}