diff --git a/materialious/src/lib/components/ComboBox.svelte b/materialious/src/lib/components/ComboBox.svelte
new file mode 100644
index 00000000..68163656
--- /dev/null
+++ b/materialious/src/lib/components/ComboBox.svelte
@@ -0,0 +1,77 @@
+
+
+
+
+
+
keyboard_arrow_down
+
+
+ {#each filtered as option (option)}
+
+ {option.label}
+ {#if combobox.isSelected(option.value)}
+ check
+ {/if}
+
+ {:else}
+
{$_('noResult')}
+ {/each}
+
+
diff --git a/materialious/src/lib/components/settings/Interface.svelte b/materialious/src/lib/components/settings/Interface.svelte
index 77abf0ee..52546e3d 100644
--- a/materialious/src/lib/components/settings/Interface.svelte
+++ b/materialious/src/lib/components/settings/Interface.svelte
@@ -35,6 +35,7 @@
} from '../../store';
import { tick } from 'svelte';
import { isOwnBackend } from '$lib/shared';
+ import ComboBox from '../ComboBox.svelte';
let invidiousInstance = $state(get(invidiousInstanceStore));
let region = $state(get(interfaceRegionStore));
@@ -81,10 +82,8 @@
location.reload();
}
- async function setBackend(event: Event) {
- const select = event.target as HTMLSelectElement;
- backendInUseStore.set(select.value as 'ivg' | 'yt');
-
+ async function setBackend(backend: string) {
+ backendInUseStore.set(backend as 'ivg' | 'yt');
await timeout(100);
location.reload();
}
@@ -120,14 +119,15 @@
{#if isUnrestrictedPlatform()}
-
-
-
- arrow_drop_down
-
+
{#if $backendInUseStore === 'ivg'}