web/settings: convert LanguageDropdown to universal SettingsDropdown

web/src/components/settings/SettingsDropdown.svelte

@@ -0,0 +1,162 @@
+<script
+    lang="ts"
+    generics="
+        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
+        Id extends keyof CobaltSettings[Context]
+    "
+>
+    import { updateSetting } from "$lib/state/settings";
+    import type { CobaltSettings } from "$lib/types/settings";
+
+    import IconSelector from "@tabler/icons-svelte/IconSelector.svelte";
+
+    export let title: string;
+    export let description: string = "";
+    export let items: Record<string, string>;
+
+    export let settingId: Id;
+    export let settingContext: Context;
+
+    export let selectedOption: string;
+    export let selectedTitle: string;
+    export let disabled = false;
+
+    const onChange = (event: Event) => {
+        const target = event.target as HTMLSelectElement;
+
+        updateSetting({
+            [settingContext]: {
+                [settingId]: target.value,
+            },
+        });
+    };
+</script>
+
+<div class="selector-parent" class:disabled aria-hidden={disabled}>
+    <div id="selector" class="selector button">
+        <div class="selector-info">
+            <h4 class="selector-title">
+                {title}
+            </h4>
+            <div class="right-side">
+                <span class="selector-current" aria-hidden="true">
+                    {selectedTitle}
+                </span>
+                <IconSelector />
+            </div>
+        </div>
+
+        <select on:change={e => onChange(e)} {disabled}>
+            {#each Object.keys(items) as value}
+                <option {value} selected={selectedOption === value}>
+                    {items[value]}
+                </option>
+            {/each}
+        </select>
+    </div>
+
+    {#if description}
+        <div class="subtext">
+            {description}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .selector-parent {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        overflow: hidden;
+        transition: opacity 0.2s;
+    }
+
+    .selector-parent.disabled {
+        opacity: 0.5;
+    }
+
+    #selector {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+
+        padding: calc(var(--switcher-padding) * 2) 16px;
+
+        pointer-events: all;
+        overflow: scroll;
+    }
+
+    .disabled #selector {
+        pointer-events: none;
+    }
+
+    .selector-info {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        gap: var(--padding);
+        min-height: 26px;
+
+        z-index: 2;
+        pointer-events: none;
+    }
+
+    .right-side {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        float: right;
+        gap: calc(var(--padding) / 2);
+    }
+
+    .selector-current,
+    .selector select {
+        font-size: 13px;
+        font-weight: 400;
+    }
+
+    .right-side :global(svg) {
+        stroke-width: 1.5px;
+        height: 20px;
+        width: 20px;
+        stroke: var(--secondary);
+    }
+
+    .selector select {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: none;
+        border: none;
+        left: 0;
+        border-radius: var(--border-radius);
+        cursor: pointer;
+        color: transparent;
+        text-align: right;
+
+        /* safari fix */
+        appearance: initial;
+        text-align-last: right;
+    }
+
+    /* fix for chrome on windows */
+    option {
+        color: initial;
+        text-align: initial;
+        text-align-last: initial;
+        border-radius: initial;
+        background: initial;
+        border: initial;
+    }
+
+    @media (hover: hover) {
+        .selector:hover {
+            background-color: var(--button-hover);
+        }
+    }
+</style>