feat(web): album list options (#3667)

* Album view option for cover or list view

* Dropdown can now receive list of icons to display with selected option

* Formatting

* Use table element with formatting similar to other pages

* Make table rows clickable with hover styling

* Also make row navigateable using keyboard without mouse

* Formatting

* Define DropdownOption interface

* Album view mode type definition for typescript support in if statements

* format

* fix typing

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -1,12 +1,18 @@
 <script lang="ts">
-  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
   import Check from 'svelte-material-icons/Check.svelte';
   import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
   import { fly } from 'svelte/transition';
+  import type Icon from 'svelte-material-icons/DotsVertical.svelte';
 
-  export let options: string[] = [];
+  interface DropdownOption {
+    value: string;
+    icon?: Icon;
+  }
+
+  export let options: DropdownOption[] | string[] = [];
   export let value = options[0];
+  export let icons: (typeof Icon)[] | undefined = undefined;
 
   let showMenu = false;
 
@@ -18,13 +24,18 @@
     value = options[index];
     showMenu = false;
   };
+
+  $: index = options.findIndex((option) => option === value);
+  $: icon = icons?.[index];
 </script>
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
   <!-- BUTTON TITLE -->
   <LinkButton on:click={() => (showMenu = true)}>
     <div class="flex place-items-center gap-2 text-sm">
-      <SwapVertical size="18" />
+      {#if icon}
+        <svelte:component this={icon} size="18" />
+      {/if}
       {value}
     </div>
   </LinkButton>