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
+>