refactor(web): albums list (2) (#8214)

* refactor: albums list

* fix: responsive design

* keep albums in sharing

web/src/lib/components/album-page/albums-controls.svelte

@@ -2,7 +2,7 @@
   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 { AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
+  import { AlbumFilter, AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
   import {
     mdiArrowDownThin,
     mdiArrowUpThin,
@@ -12,6 +12,7 @@
   } from '@mdi/js';
   import { sortByOptions, type Sort, handleCreateAlbum } from '$lib/components/album-page/albums-list.svelte';
   import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import GroupTab from '$lib/components/elements/group-tab.svelte';
 
   export let searchAlbum: string;
 
@@ -25,13 +26,20 @@
   };
 </script>
 
-<div class="hidden lg:block lg:w-40 xl:w-60 2xl:w-80 h-10">
+<div class="hidden xl:block">
+  <GroupTab
+    filters={Object.keys(AlbumFilter)}
+    selected={$albumViewSettings.filter}
+    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} />
 </div>
 <LinkButton on:click={handleCreateAlbum}>
   <div class="flex place-items-center gap-2 text-sm">
     <Icon path={mdiPlusBoxOutline} size="18" />
-    Create album
+    <p class="hidden md:block">Create album</p>
   </div>
 </LinkButton>
 

web/src/lib/components/album-page/albums-list.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
+  import { AlbumFilter, AlbumViewMode, albumViewSettings } from '$lib/stores/preferences.store';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
   import { createAlbum, deleteAlbum, type AlbumResponseDto } from '@immich/sdk';
@@ -118,10 +118,14 @@
   import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
+  import GroupTab from '$lib/components/elements/group-tab.svelte';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
 
-  export let albums: AlbumResponseDto[];
+  export let ownedAlbums: AlbumResponseDto[];
+  export let sharedAlbums: AlbumResponseDto[];
   export let searchAlbum: string;
 
+  let albums: AlbumResponseDto[] = [];
   let shouldShowEditAlbumForm = false;
   let selectedAlbum: AlbumResponseDto;
   let albumToDelete: AlbumResponseDto | null;
@@ -131,13 +135,35 @@
   $: {
     for (const key of sortByOptions) {
       if (key.title === $albumViewSettings.sortBy) {
-        albums = key.sortFn(key.sortDesc, albums);
+        switch ($albumViewSettings.filter) {
-        $albumViewSettings.sortDesc = key.sortDesc; // "Save" sortDesc
+          case AlbumFilter.All: {
+            albums = key.sortFn(
+              key.sortDesc,
+              [...sharedAlbums, ...ownedAlbums].filter(
+                (album, index, self) => index === self.findIndex((item) => album.id === item.id),
+              ),
+            );
+            break;
+          }
+
+          case AlbumFilter.Owned: {
+            albums = key.sortFn(key.sortDesc, ownedAlbums);
+            break;
+          }
+
+          case AlbumFilter.Shared: {
+            albums = key.sortFn(key.sortDesc, sharedAlbums);
+            break;
+          }
+        }
+
+        $albumViewSettings.sortDesc = key.sortDesc;
         $albumViewSettings.sortBy = key.title;
         break;
       }
     }
   }
+
   $: isShowContextMenu = !!contextMenuTargetAlbum;
   $: albumsFiltered = albums.filter((album) => album.albumName.toLowerCase().includes(searchAlbum.toLowerCase()));
 
@@ -159,7 +185,7 @@
 
   async function handleDeleteAlbum(albumToDelete: AlbumResponseDto): Promise<void> {
     await deleteAlbum({ id: albumToDelete.id });
-    albums = albums.filter(({ id }) => id !== albumToDelete.id);
+    ownedAlbums = ownedAlbums.filter(({ id }) => id !== albumToDelete.id);
   }
 
   const chooseAlbumToDelete = (album: AlbumResponseDto) => {
@@ -194,7 +220,7 @@
   };
 
   const removeAlbumsIfEmpty = async () => {
-    for (const album of albums) {
+    for (const album of ownedAlbums) {
       if (album.assetCount == 0 && album.albumName == '') {
         try {
           await handleDeleteAlbum(album);
@@ -211,7 +237,7 @@
       message: 'Album infos updated',
       type: NotificationType.Info,
     });
-    albums[albums.findIndex((x) => x.id === selectedAlbum.id)] = selectedAlbum;
+    ownedAlbums[ownedAlbums.findIndex((x) => x.id === selectedAlbum.id)] = selectedAlbum;
   };
 </script>
 
@@ -227,6 +253,18 @@
 
 {#if albums.length > 0}
   <!-- Album Card -->
+  <div class=" block xl:hidden">
+    <div class="w-fit 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={searchAlbum} isSearching={false} />
+    </div>
+  </div>
   {#if $albumViewSettings.view === AlbumViewMode.Cover}
     <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] mt-4 gap-y-4">
       {#each albumsFiltered as album, index (album.id)}

web/src/lib/components/album-page/albums-table.svelte

@@ -8,6 +8,7 @@
   import type { Sort } from '$lib/components/album-page/albums-list.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { dateFormats } from '$lib/constants';
+  import { user } from '$lib/stores/user.store';
 
   export let albumsFiltered: AlbumResponseDto[];
   export let sortByOptions: Sort[];
@@ -66,18 +67,20 @@
           >
         </a>
         <td class="text-md hidden text-ellipsis text-center 2xl:block xl:w-[15%] 2xl:w-[12%]">
-          <button
+          {#if $user.id === album.ownerId}
-            on:click|stopPropagation={() => onAlbumToEdit(album)}
+            <button
-            class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+              on:click|stopPropagation={() => onAlbumToEdit(album)}
-          >
+              class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-            <Icon path={mdiPencilOutline} size="16" />
+            >
-          </button>
+              <Icon path={mdiPencilOutline} size="16" />
-          <button
+            </button>
-            on:click|stopPropagation={() => onChooseAlbumToDelete(album)}
+            <button
-            class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+              on:click|stopPropagation={() => onChooseAlbumToDelete(album)}
-          >
+              class="rounded-full z-1 bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-            <Icon path={mdiTrashCanOutline} size="16" />
+            >
-          </button>
+              <Icon path={mdiTrashCanOutline} size="16" />
+            </button>
+          {/if}
         </td>
       </tr>
     {/each}

web/src/lib/components/elements/group-tab.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let filters: string[];
+  export let selected: string;
+  export let onSelect: (selected: string) => void;
+</script>
+
+<div class=" flex bg-gray-100 dark:bg-gray-700 rounded-lg">
+  {#each filters as filter, index}
+    <button
+      class="flex py-2 px-4 {filter === selected
+        ? 'dark:bg-gray-900 bg-gray-300'
+        : 'dark:hover:bg-gray-800 hover:bg-gray-200'}  {index === 0 ? 'rounded-l-lg' : ''} {index === filters.length - 1
+        ? 'rounded-r-lg'
+        : ''}"
+      on:click={() => onSelect(filter)}
+    >
+      {filter}
+    </button>
+  {/each}
+</div>

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

@@ -70,6 +70,7 @@ export interface AlbumViewSettings {
   sortBy: string;
   sortDesc: boolean;
   view: string;
+  filter: string;
 }
 
 export interface SidebarSettings {
@@ -87,10 +88,17 @@ export enum AlbumViewMode {
   List = 'List',
 }
 
+export enum AlbumFilter {
+  All = 'All',
+  Owned = 'Owned',
+  Shared = 'Shared',
+}
+
 export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
   sortBy: 'Most recent photo',
   sortDesc: true,
   view: AlbumViewMode.Cover,
+  filter: AlbumFilter.All,
 });
 
 export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});

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

@@ -13,5 +13,5 @@
   <div class="flex place-items-center gap-2" slot="buttons">
     <AlbumsControls bind:searchAlbum />
   </div>
-  <Albums albums={data.albums} {searchAlbum} />
+  <Albums ownedAlbums={data.albums} {searchAlbum} sharedAlbums={data.sharedAlbums} />
 </UserPageLayout>

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

@@ -4,10 +4,12 @@ import type { PageLoad } from './$types';
 
 export const load = (async () => {
   await authenticate();
+  const sharedAlbums = await getAllAlbums({ shared: true });
   const albums = await getAllAlbums({});
 
   return {
     albums,
+    sharedAlbums,
     meta: {
       title: 'Albums',
     },