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/routes/(user)/albums/+page.svelte

@@ -1,17 +1,50 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import type { PageData } from './$types';
+  import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
+  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import AlbumsControls from '$lib/components/album-page/albums-controls.svelte';
   import Albums from '$lib/components/album-page/albums-list.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import GroupTab from '$lib/components/elements/group-tab.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
 
   export let data: PageData;
 
-  let searchAlbum = '';
+  let searchQuery = '';
+  let albumGroups: string[] = [];
 </script>
 
 <UserPageLayout title={data.meta.title}>
   <div class="flex place-items-center gap-2" slot="buttons">
-    <AlbumsControls bind:searchAlbum />
+    <AlbumsControls {albumGroups} bind:searchQuery />
   </div>
-  <Albums ownedAlbums={data.albums} {searchAlbum} sharedAlbums={data.sharedAlbums} />
+
+  <div class="xl:hidden">
+    <div class="w-fit h-14 dark:text-immich-dark-fg py-2">
+      <GroupTab
+        filters={Object.keys(AlbumFilter)}
+        selected={$albumViewSettings.filter}
+        onSelect={(selected) => ($albumViewSettings.filter = selected)}
+      />
+    </div>
+    <div class="w-60">
+      <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+    </div>
+  </div>
+
+  <Albums
+    ownedAlbums={data.albums}
+    sharedAlbums={data.sharedAlbums}
+    userSettings={$albumViewSettings}
+    allowEdit
+    {searchQuery}
+    bind:albumGroupIds={albumGroups}
+  >
+    <EmptyPlaceholder
+      slot="empty"
+      text="Create an album to organize your photos and videos"
+      onClick={() => createAlbumAndRedirect()}
+    />
+  </Albums>
 </UserPageLayout>

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -39,7 +39,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { downloadArchive } from '$lib/utils/asset-utils';
+  import { downloadAlbum } from '$lib/utils/asset-utils';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -342,7 +342,7 @@
   };
 
   const handleDownloadAlbum = async () => {
-    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
+    await downloadAlbum(album);
   };
 
   const handleRemoveAlbum = async () => {
@@ -369,6 +369,18 @@
     viewMode = ViewMode.VIEW;
     assetInteractionStore.clearMultiselect();
 
+    await updateThumbnail(assetId);
+  };
+
+  const updateThumbnailUsingCurrentSelection = async () => {
+    if ($selectedAssets.size === 1) {
+      const assetId = [...$selectedAssets][0].id;
+      assetInteractionStore.clearMultiselect();
+      await updateThumbnail(assetId);
+    }
+  };
+
+  const updateThumbnail = async (assetId: string) => {
     try {
       await updateAlbumInfo({
         id: album.id,
@@ -400,6 +412,13 @@
           {#if isAllUserOwned}
             <ChangeDate menuItem />
             <ChangeLocation menuItem />
+            {#if $selectedAssets.size === 1}
+              <MenuOption
+                text="Set as album cover"
+                icon={mdiImageOutline}
+                on:click={() => updateThumbnailUsingCurrentSelection()}
+              />
+            {/if}
             <ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
           {/if}
           {#if isOwned || isAllUserOwned}

web/src/routes/(user)/search/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -31,7 +30,6 @@
     type AlbumResponseDto,
   } from '@immich/sdk';
   import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
-  import { flip } from 'svelte/animate';
   import type { Viewport } from '$lib/stores/assets.store';
   import { locale } from '$lib/stores/preferences.store';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
@@ -39,6 +37,7 @@
   import { parseUtcDate } from '$lib/utils/date-time';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
+  import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
 
   const MAX_ASSET_COUNT = 5000;
   let { isViewing: showAssetViewer } = assetViewingStore;
@@ -275,13 +274,7 @@
     {#if searchResultAlbums.length > 0}
       <section>
         <div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div>
-        <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] mt-4 gap-y-4">
-          {#each searchResultAlbums as album, index (album.id)}
-            <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
-              <AlbumCard preload={index < 20} {album} isSharingView={false} showItemCount={false} />
-            </a>
-          {/each}
-        </div>
+        <AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
 
         <div class="m-6 text-4xl font-medium text-black/70 dark:text-white/80">PHOTOS & VIDEOS</div>
       </section>

web/src/routes/(user)/sharing/+page.svelte

@@ -1,37 +1,44 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import empty2Url from '$lib/assets/empty-2.svg';
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
-  import { createAlbum } from '@immich/sdk';
   import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
-  import { flip } from 'svelte/animate';
-  import { handleError } from '../../../lib/utils/handle-error';
   import type { PageData } from './$types';
+  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
+  import {
+    AlbumFilter,
+    AlbumGroupBy,
+    AlbumSortBy,
+    AlbumViewMode,
+    SortOrder,
+    type AlbumViewSettings,
+  } from '$lib/stores/preferences.store';
+  import Albums from '$lib/components/album-page/albums-list.svelte';
 
   export let data: PageData;
 
-  const createSharedAlbum = async () => {
-    try {
-      const newAlbum = await createAlbum({ createAlbumDto: { albumName: '' } });
-      await goto(`${AppRoute.ALBUMS}/${newAlbum.id}`);
-    } catch (error) {
-      handleError(error, 'Unable to create album');
-    }
+  const settings: AlbumViewSettings = {
+    view: AlbumViewMode.Cover,
+    filter: AlbumFilter.Shared,
+    groupBy: AlbumGroupBy.None,
+    groupOrder: SortOrder.Desc,
+    sortBy: AlbumSortBy.MostRecentPhoto,
+    sortOrder: SortOrder.Desc,
+    collapsedGroups: {},
   };
 </script>
 
 <UserPageLayout title={data.meta.title}>
   <div class="flex" slot="buttons">
-    <LinkButton on:click={createSharedAlbum}>
+    <LinkButton on:click={() => createAlbumAndRedirect()}>
       <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
         <Icon path={mdiPlusBoxOutline} size="18" class="shrink-0" />
-        <span class="leading-none max-sm:text-xs">Create shared album</span>
+        <span class="leading-none max-sm:text-xs">Create album</span>
       </div>
     </LinkButton>
 
@@ -79,22 +86,15 @@
       </div>
 
       <div>
-        <!-- Share Album List -->
-        <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] mt-4 gap-y-4">
-          {#each data.sharedAlbums as album, index (album.id)}
-            <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
-              <AlbumCard preload={index < 20} {album} isSharingView />
-            </a>
-          {/each}
-        </div>
-
-        <!-- Empty List -->
-        {#if data.sharedAlbums.length === 0}
+        <!-- Shared Album List -->
+        <Albums sharedAlbums={data.sharedAlbums} userSettings={settings} showOwner>
+          <!-- Empty List -->
           <EmptyPlaceholder
-            text="Create a shared album to share photos and videos with people in your network"
+            slot="empty"
+            text="Create an album to share photos and videos with people in your network"
             src={empty2Url}
           />
-        {/if}
+        </Albums>
       </div>
     </div>
   </div>