feat(web): album list options (#3667)

* Album view option for cover or list view

* Dropdown can now receive list of icons to display with selected option

* Formatting

* Use table element with formatting similar to other pages

* Make table rows clickable with hover styling

* Also make row navigateable using keyboard without mouse

* Formatting

* Define DropdownOption interface

* Album view mode type definition for typescript support in if statements

* format

* fix typing

---------

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

web/src/lib/components/elements/dropdown.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
   import Check from 'svelte-material-icons/Check.svelte';
   import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
   import { fly } from 'svelte/transition';
+  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
 
-  export let options: string[] = [];
+  interface DropdownOption {
+    value: string;
+    icon?: Icon;
+  }
+
+  export let options: DropdownOption[] | string[] = [];
   export let value = options[0];
+  export let icons: (typeof Icon)[] | undefined = undefined;
 
   let showMenu = false;
 
@@ -18,13 +24,18 @@
     value = options[index];
     showMenu = false;
   };
+
+  $: index = options.findIndex((option) => option === value);
+  $: icon = icons?.[index];
 </script>
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
   <!-- BUTTON TITLE -->
   <LinkButton on:click={() => (showMenu = true)}>
     <div class="flex place-items-center gap-2 text-sm">
-      <SwapVertical size="18" />
+      {#if icon}
+        <svelte:component this={icon} size="18" />
+      {/if}
       {value}
     </div>
   </LinkButton>

web/src/lib/stores/preferences.store.ts

@@ -41,8 +41,15 @@ export const isShowDetail = persisted<boolean>('info-opened', false, {});
 
 export interface AlbumViewSettings {
   sortBy: string;
+  view: string;
+}
+
+export enum AlbumViewMode {
+  Cover = 'Cover',
+  List = 'List',
 }
 
 export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
   sortBy: 'Most recent photo',
+  view: AlbumViewMode.Cover,
 });

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

@@ -5,6 +5,9 @@
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
+  import FormatListBulletedSquare from 'svelte-material-icons/FormatListBulletedSquare.svelte';
+  import ViewGridOutline from 'svelte-material-icons/ViewGridOutline.svelte';
   import type { PageData } from './$types';
   import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
   import { useAlbums } from './albums.bloc';
@@ -15,15 +18,30 @@
   import { flip } from 'svelte/animate';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import { dateFormats } from '$lib/constants';
+  import { locale, AlbumViewMode } from '$lib/stores/preferences.store';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import type { AlbumResponseDto } from '@api';
+  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
 
   export let data: PageData;
 
   const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
+  const viewOptions = [
+    {
+      name: AlbumViewMode.Cover,
+      icon: ViewGridOutline,
+    },
+    {
+      name: AlbumViewMode.List,
+      icon: FormatListBulletedSquare,
+    },
+  ];
+  const viewOptionNames = viewOptions.map((option) => option.name);
+  const viewOptionIcons: (typeof Icon)[] = viewOptions.map((option) => option.icon);
 
   const {
     albums: unsortedAlbums,
@@ -88,6 +106,10 @@
     }
   };
 
+  const dateLocaleString = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString($locale, dateFormats.album);
+  };
+
   onMount(() => {
     removeAlbumsIfEmpty();
   });
@@ -114,10 +136,12 @@
       </div>
     </LinkButton>
 
-    <Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} />
+    <Dropdown options={sortByOptions} bind:value={$albumViewSettings.sortBy} icons={[SwapVertical]} />
+    <Dropdown options={viewOptionNames} bind:value={$albumViewSettings.view} icons={viewOptionIcons} />
   </div>
 
   <!-- Album Card -->
+  {#if $albumViewSettings.view === AlbumViewMode.Cover}
     <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
       {#each $albums as album (album.id)}
         <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
@@ -125,6 +149,40 @@
         </a>
       {/each}
     </div>
+  {:else if $albumViewSettings.view === AlbumViewMode.List}
+    <table class="mt-5 w-full text-left">
+      <thead
+        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+      >
+        <tr class="flex w-full place-items-center">
+          <th class="w-1/4 text-center text-sm font-medium">Album title</th>
+          <th class="w-1/4 text-center text-sm font-medium">Assets</th>
+          <th class="w-1/4 text-center text-sm font-medium">Updated date</th>
+          <th class="w-1/4 text-center text-sm font-medium">Created date</th>
+        </tr>
+      </thead>
+      <tbody
+        class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
+      >
+        {#each $albums as album (album.id)}
+          <tr
+            class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75"
+            on:click={() => goto(`albums/${album.id}`)}
+            on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
+            tabindex="0"
+          >
+            <td class="text-md w-1/4 text-ellipsis px-2">{album.albumName}</td>
+            <td class="text-md w-1/4 text-ellipsis px-2">
+              {album.assetCount}
+              {album.assetCount == 1 ? `item` : `items`}
+            </td>
+            <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.updatedAt)}</td>
+            <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.createdAt)}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
 
   <!-- Empty Message -->
   {#if $albums.length === 0}