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/albums-controls.svelte

@@ -2,30 +2,94 @@
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { AlbumFilter, AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
+  import {
+    AlbumFilter,
+    AlbumGroupBy,
+    AlbumViewMode,
+    albumViewSettings,
+    SortOrder,
+  } from '$lib/stores/preferences.store';
   import {
     mdiArrowDownThin,
     mdiArrowUpThin,
+    mdiFolderArrowDownOutline,
+    mdiFolderArrowUpOutline,
+    mdiFolderRemoveOutline,
     mdiFormatListBulletedSquare,
     mdiPlusBoxOutline,
+    mdiUnfoldLessHorizontal,
+    mdiUnfoldMoreHorizontal,
     mdiViewGridOutline,
   } from '@mdi/js';
-  import { sortByOptions, type Sort, handleCreateAlbum } from '$lib/components/album-page/albums-list.svelte';
+  import {
+    type AlbumGroupOptionMetadata,
+    type AlbumSortOptionMetadata,
+    findGroupOptionMetadata,
+    findSortOptionMetadata,
+    getSelectedAlbumGroupOption,
+    groupOptionsMetadata,
+    sortOptionsMetadata,
+  } from '$lib/utils/album-utils';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
   import GroupTab from '$lib/components/elements/group-tab.svelte';
+  import { createAlbumAndRedirect, collapseAllAlbumGroups, expandAllAlbumGroups } from '$lib/utils/album-utils';
+  import { fly } from 'svelte/transition';
 
-  export let searchAlbum: string;
+  export let albumGroups: string[];
+  export let searchQuery: string;
 
-  const searchSort = (searched: string): Sort => {
-    return sortByOptions.find((option) => option.title === searched) || sortByOptions[0];
+  const flipOrdering = (ordering: string) => {
+    return ordering === SortOrder.Asc ? SortOrder.Desc : SortOrder.Asc;
+  };
+
+  const handleChangeGroupBy = ({ id, defaultOrder }: AlbumGroupOptionMetadata) => {
+    if ($albumViewSettings.groupBy === id) {
+      $albumViewSettings.groupOrder = flipOrdering($albumViewSettings.groupOrder);
+    } else {
+      $albumViewSettings.groupBy = id;
+      $albumViewSettings.groupOrder = defaultOrder;
+    }
+  };
+
+  const handleChangeSortBy = ({ id, defaultOrder }: AlbumSortOptionMetadata) => {
+    if ($albumViewSettings.sortBy === id) {
+      $albumViewSettings.sortOrder = flipOrdering($albumViewSettings.sortOrder);
+    } else {
+      $albumViewSettings.sortBy = id;
+      $albumViewSettings.sortOrder = defaultOrder;
+    }
   };
 
   const handleChangeListMode = () => {
     $albumViewSettings.view =
       $albumViewSettings.view === AlbumViewMode.Cover ? AlbumViewMode.List : AlbumViewMode.Cover;
   };
+
+  let selectedGroupOption: AlbumGroupOptionMetadata;
+  let groupIcon: string;
+
+  $: {
+    selectedGroupOption = findGroupOptionMetadata($albumViewSettings.groupBy);
+    if (selectedGroupOption.isDisabled()) {
+      selectedGroupOption = findGroupOptionMetadata(AlbumGroupBy.None);
+    }
+  }
+
+  $: selectedSortOption = findSortOptionMetadata($albumViewSettings.sortBy);
+
+  $: {
+    if (selectedGroupOption.id === AlbumGroupBy.None) {
+      groupIcon = mdiFolderRemoveOutline;
+    } else {
+      groupIcon =
+        $albumViewSettings.groupOrder === SortOrder.Desc ? mdiFolderArrowDownOutline : mdiFolderArrowUpOutline;
+    }
+  }
+
+  $: sortIcon = $albumViewSettings.sortOrder === SortOrder.Desc ? mdiArrowDownThin : mdiArrowUpThin;
 </script>
 
+<!-- Filter Albums by Sharing Status (All, Owned, Shared) -->
 <div class="hidden xl:block h-10">
   <GroupTab
     filters={Object.keys(AlbumFilter)}
@@ -33,44 +97,78 @@
     onSelect={(selected) => ($albumViewSettings.filter = selected)}
   />
 </div>
-<div class="hidden xl:block xl:w-60 2xl:w-80 h-10">
-  <SearchBar placeholder="Search albums" bind:name={searchAlbum} isSearching={false} />
+
+<!-- Search Albums -->
+<div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
+  <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
 </div>
-<LinkButton on:click={handleCreateAlbum}>
+
+<!-- Create Album -->
+<LinkButton on:click={() => createAlbumAndRedirect()}>
   <div class="flex place-items-center gap-2 text-sm">
     <Icon path={mdiPlusBoxOutline} size="18" />
     <p class="hidden md:block">Create album</p>
   </div>
 </LinkButton>
 
+<!-- Sort Albums -->
 <Dropdown
-  options={Object.values(sortByOptions)}
-  selectedOption={searchSort($albumViewSettings.sortBy)}
-  render={(option) => {
-    return {
-      title: option.title,
-      icon: option.sortDesc ? mdiArrowDownThin : mdiArrowUpThin,
-    };
-  }}
-  on:select={(event) => {
-    for (const key of sortByOptions) {
-      if (key.title === event.detail.title) {
-        key.sortDesc = !key.sortDesc;
-        $albumViewSettings.sortBy = key.title;
-        break;
-      }
-    }
-  }}
+  title="Sort albums by..."
+  options={Object.values(sortOptionsMetadata)}
+  selectedOption={selectedSortOption}
+  on:select={({ detail }) => handleChangeSortBy(detail)}
+  render={({ text }) => ({
+    title: text,
+    icon: sortIcon,
+  })}
 />
 
+<!-- Group Albums -->
+<Dropdown
+  title="Group albums by..."
+  options={Object.values(groupOptionsMetadata)}
+  selectedOption={selectedGroupOption}
+  on:select={({ detail }) => handleChangeGroupBy(detail)}
+  render={({ text, isDisabled }) => ({
+    title: text,
+    icon: groupIcon,
+    disabled: isDisabled(),
+  })}
+/>
+
+{#if getSelectedAlbumGroupOption($albumViewSettings) !== AlbumGroupBy.None}
+  <span in:fly={{ x: -50, duration: 250 }}>
+    <!-- Expand Album Groups -->
+    <div class="hidden xl:flex gap-0">
+      <div class="block">
+        <LinkButton title="Expand all" on:click={() => expandAllAlbumGroups()}>
+          <div class="flex place-items-center gap-2 text-sm">
+            <Icon path={mdiUnfoldMoreHorizontal} size="18" />
+          </div>
+        </LinkButton>
+      </div>
+
+      <!-- Collapse Album Groups -->
+      <div class="block">
+        <LinkButton title="Collapse all" on:click={() => collapseAllAlbumGroups(albumGroups)}>
+          <div class="flex place-items-center gap-2 text-sm">
+            <Icon path={mdiUnfoldLessHorizontal} size="18" />
+          </div>
+        </LinkButton>
+      </div>
+    </div>
+  </span>
+{/if}
+
+<!-- Cover/List Display Toggle -->
 <LinkButton on:click={() => handleChangeListMode()}>
   <div class="flex place-items-center gap-2 text-sm">
     {#if $albumViewSettings.view === AlbumViewMode.List}
       <Icon path={mdiViewGridOutline} size="18" />
-      <p class="hidden sm:block">Cover</p>
+      <p class="hidden md:block">Covers</p>
     {:else}
       <Icon path={mdiFormatListBulletedSquare} size="18" />
-      <p class="hidden sm:block">List</p>
+      <p class="hidden md:block">List</p>
     {/if}
   </div>
 </LinkButton>