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>