refactor(web): album listing page (#4146)

* feat: add more options to album page

* pr feedback

* pr feedback

* feat: add quick actions on the list mode

* feat: responsive design

* feat: remove dropdown for display mode

* pr feedback

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

@@ -4,13 +4,12 @@
   import { clickOutside } from '$lib/utils/click-outside';
   import { fly } from 'svelte/transition';
   import type Icon from 'svelte-material-icons/DotsVertical.svelte';
+  import { createEventDispatcher } from 'svelte';
 
-  interface DropdownOption {
-    value: string;
-    icon?: Icon;
-  }
-
-  export let options: DropdownOption[] | string[] = [];
+  const dispatch = createEventDispatcher<{
+    select: string;
+  }>();
+  export let options: string[];
   export let value = options[0];
   export let icons: (typeof Icon)[] | undefined = undefined;
 
@@ -21,7 +20,12 @@
   };
 
   const handleSelectOption = (index: number) => {
-    value = options[index];
+    if (options[index] === value) {
+      dispatch('select', value);
+    } else {
+      value = options[index];
+    }
+
     showMenu = false;
   };
 
@@ -36,7 +40,7 @@
       {#if icon}
         <svelte:component this={icon} size="18" />
       {/if}
-      {value}
+      <p class="hidden sm:block">{value}</p>
     </div>
   </LinkButton>
 

web/src/lib/components/elements/table-header.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Sort } from '../../../routes/(user)/albums/+page.svelte';
+
+  export let albumViewSettings: string;
+  export let option: Sort;
+
+  const handleSort = () => {
+    if (albumViewSettings === option.sortTitle) {
+      option.sortDesc = !option.sortDesc;
+    } else {
+      albumViewSettings = option.sortTitle;
+    }
+  };
+</script>
+
+<th class="{option.widthClass} text-sm font-medium"
+  ><button
+    class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+    on:click={() => handleSort()}
+  >
+    {#if albumViewSettings === option.sortTitle}
+      {#if option.sortDesc}
+        &#8595;
+      {:else}
+        &#8593;
+      {/if}
+    {/if}{option.table}</button
+  ></th
+>

web/src/lib/components/forms/edit-album-form.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { AlbumResponseDto, api } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
+
+  import Button from '../elements/buttons/button.svelte';
+
+  import { handleError } from '../../utils/handle-error';
+
+  export let album: AlbumResponseDto;
+
+  const dispatch = createEventDispatcher();
+
+  const editUser = async () => {
+    try {
+      const { status } = await api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumName: album.albumName,
+          description: album.description,
+        },
+      });
+
+      if (status === 200) {
+        dispatch('edit-success');
+      }
+    } catch (error) {
+      handleError(error, 'Unable to update user');
+    }
+  };
+</script>
+
+<div
+  class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+>
+  <div
+    class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+  >
+    <ImageAlbum size="4em" />
+    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit album</h1>
+  </div>
+
+  <form on:submit|preventDefault={editUser} autocomplete="off">
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="name">Name</label>
+      <input class="immich-form-input" id="name" type="text" bind:value={album.albumName} />
+    </div>
+
+    <div class="m-4 flex flex-col gap-2">
+      <label class="immich-form-label" for="description">Description</label>
+      <textarea class="immich-form-input" id="description" bind:value={album.description} />
+    </div>
+
+    <div class="mt-8 flex w-full gap-4 px-4">
+      <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>Cancel</Button>
+      <Button type="submit" fullwidth>Confirm</Button>
+    </div>
+  </form>
+</div>

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -3,7 +3,7 @@
 
 <section
   id="sidebar"
-  class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto pt-8 transition-all duration-200 hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
+  class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
 >
   <slot />
 </section>