feat: Add multiselect for currencies

package.json

@@ -63,7 +63,8 @@
 		"nostr-tools": "^2.7.1",
 		"patch-package": "^8.0.0",
 		"svelte-bootstrap-icons": "^3.1.1",
-		"svelte-i18n": "^4.0.0"
+		"svelte-i18n": "^4.0.0",
+		"svelte-multiselect": "^11.0.0-rc.1"
 	},
 	"resolutions": {
 		"es5-ext": ">=0.10.64",

src/lib/components/settings/ScreenSpecificSettings.svelte

@@ -6,7 +6,7 @@
 	import { uiSettings } from '$lib/uiSettings';
 	import { DataSourceType } from '$lib/types/dataSource';
 	import { onMount } from 'svelte';
-
+	import MultiSelect from 'svelte-multiselect';
 	export let settings;
 	export let isOpen = false;
 
@@ -29,15 +29,24 @@
 		}
 	}
 
+	let activeCurrencies: { label: string; value: string }[] = [];
+
 	onMount(() => {
 		prevLnbitsEnabled = $settings.lnbitsEnabled;
 		updateCurrencies($settings.lnbitsEnabled);
 	});
 
-	$: if (prevLnbitsEnabled !== $settings.lnbitsEnabled) {
+	$: {
+		if (prevLnbitsEnabled !== $settings.lnbitsEnabled) {
 			prevLnbitsEnabled = $settings.lnbitsEnabled;
 			updateCurrencies($settings.lnbitsEnabled);
 		}
+		if (!activeCurrencies.length) {
+			activeCurrencies = $settings.actCurrencies;
+		} else {
+			$settings.actCurrencies = activeCurrencies;
+		}
+	}
 </script>
 
 <Row>
@@ -124,22 +133,14 @@
 			<Row>
 				<h5>{$_('section.settings.currencies')}</h5>
 				<small>{$_('restartRequired')}</small>
-				{#if availableCurrencies}
-					{#each availableCurrencies as c}
-						<Col md="6" xl="3" xxl="3">
-							<div class="form-check form-control-{$uiSettings.inputSize}">
-								<input
-									id="currency_{c}"
-									bind:group={$settings.actCurrencies}
-									value={c}
-									type="checkbox"
-									class="form-check-input"
+				<Col>
+					<MultiSelect
+						options={availableCurrencies}
+						bind:value={activeCurrencies}
+						placeholder={$_('section.settings.currencies')}
+						--sms-options-bg="var(--bs-body-bg, #212529)"
 					/>
-								<label class="form-check-label" for="currency_{c}">{c}</label>
-							</div>
 				</Col>
-					{/each}
-				{/if}
 			</Row>
 		{/if}
 	</ToggleHeader>

yarn.lock

@@ -3144,11 +3144,38 @@ svelte-i18n@^4.0.0:
     sade "^1.8.1"
     tiny-glob "^0.2.9"
 
+svelte-multiselect@^11.0.0-rc.1:
+  version "11.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/svelte-multiselect/-/svelte-multiselect-11.0.0-rc.1.tgz#1238a6b768902afbdde23165e6dc922555f27342"
+  integrity sha512-dyUzja9AJfDejfafDj6PKNk3F51HavArevkJxZ0upJKUlPnPx5pDKY24BQYQvUpitTqVtsEoHevKr93WebBtwA==
+  dependencies:
+    svelte "4.2.12"
+
 svelte-preprocess@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz#fdc1f9dc41b6f22bf8b1f059e9f21eaaae181eeb"
   integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==
 
+svelte@4.2.12:
+  version "4.2.12"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.12.tgz#13d98d2274d24d3ad216c8fdc801511171c70bb1"
+  integrity sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==
+  dependencies:
+    "@ampproject/remapping" "^2.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/estree" "^1.0.1"
+    acorn "^8.9.0"
+    aria-query "^5.3.0"
+    axobject-query "^4.0.0"
+    code-red "^1.0.3"
+    css-tree "^2.3.1"
+    estree-walker "^3.0.3"
+    is-reference "^3.0.1"
+    locate-character "^3.0.0"
+    magic-string "^0.30.4"
+    periscopic "^3.1.0"
+
 svelte@^4.2.19:
   version "4.2.19"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"