From 0ce52cda927f528ab414ecfd90b4d9e539682499 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 13 Aug 2023 22:20:05 +0200
Subject: [PATCH] Dropdown can now receive list of icons to display with
 selected option

---
 web/src/lib/components/elements/dropdown.svelte | 9 +++++++--
 web/src/routes/(user)/albums/+page.svelte       | 3 +++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 5955a43a..6c0275b6 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -1,5 +1,4 @@
 <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';
@@ -7,6 +6,7 @@
 
   export let options: string[] = [];
   export let value = options[0];
+  export let icons: any[] = undefined;
 
   let showMenu = false;
 
@@ -18,13 +18,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>
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index e4a33eed..ec8ff135 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -5,6 +5,9 @@
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
+  import FormatListBulletedSquare from 'svelte-material-icons/FormatListBulletedSquare.svelte';
+  import ViewGridOutline from 'svelte-material-icons/ViewGridOutline.svelte';
   import type { PageData } from './$types';
   import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
   import { useAlbums } from './albums.bloc';