web: data-driven switcher & save mode switcher

also:
- disabled ssr to enable localstorage
- removed the workaround for hover, as it looks bad

web/src/components/buttons/ActionButton.svelte

@@ -3,13 +3,6 @@
     export let click = () => { alert('no function assigned') };
 </script>
 
-<button id={id} class="button" on:click={click}>
+<button id="button-{id}" class="button" on:click={click}>
     <slot></slot>
 </button>
-
-<style>
-    :global(.button.selected) {
-        background: var(--secondary);
-        color: var(--primary);
-    }
-</style>

web/src/components/buttons/SettingsContextButton.svelte

@@ -0,0 +1,32 @@
+<script
+    lang="ts"
+    generics="
+        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
+        Id extends keyof CobaltSettings[Context],
+        Key extends CobaltSettings[Context][Id]
+    "
+>
+    import settings, { updateSetting } from "$lib/settings";
+    import type { CobaltSettings } from "$lib/types/settings";
+
+    export let settingContext: Context;
+    export let settingId: Id;
+    export let settingKey: Key;
+
+    $: setting = $settings[settingContext][settingId];
+    $: isSelected = setting === settingKey;
+</script>
+
+<button
+    id="setting-button-{settingContext}-{String(settingId)}-{settingKey}"
+    class="button"
+    class:selected={isSelected}
+    on:click={() =>
+        updateSetting({
+            [settingContext]: {
+                [settingId]: settingKey,
+            },
+        })}
+>
+    <slot></slot>
+</button>

web/src/components/buttons/Switcher.svelte

@@ -1,8 +1,4 @@
-<script lang="ts">
+<div id="switcher-container" class="switcher">
-    export let settingId: string;
-</script>
-
-<div id="switcher-{settingId}" class="switcher">
     <slot></slot>
 </div>
 
@@ -31,7 +27,8 @@
         border-radius: 0;
     }
 
+    /* clumsy hack to get rid of double border in a list of switches */
     .switcher > :global(:not(.button:first-child)) {
-        margin-left: -1.5px; /* hack to get rid of double border in a list of switches */
+        margin-left: -1.5px;
     }
 </style>

web/src/components/save/Omnibox.svelte

@@ -12,6 +12,7 @@
     import IconMute from "$lib/icons/Mute.svelte";
 
     import IconClipboard from "$lib/icons/Clipboard.svelte";
+    import SettingsContextButton from "../buttons/SettingsContextButton.svelte";
 
     let link: string = "";
     let isFocused = false;
@@ -66,18 +67,18 @@
     </div>
 
     <div id="action-container">
-        <Switcher settingId="save-downloadMode">
+        <Switcher>
-            <ActionButton id="auto-mode-button">
+            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="auto">
                 <IconSparkles /> auto
-            </ActionButton>
+            </SettingsContextButton>
-            <ActionButton id="audio-mode-button">
+            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="audio">
                 <IconMusic /> audio
-            </ActionButton>
+            </SettingsContextButton>
-            <ActionButton id="mute-mode-button">
+            <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="mute">
                 <IconMute /> mute
-            </ActionButton>
+            </SettingsContextButton>
         </Switcher>
-        <ActionButton id="paste-button" click={pasteClipboard}>
+        <ActionButton id="paste" click={pasteClipboard}>
             <IconClipboard />
             <span id="paste-desktop-text">paste</span>
             <span id="paste-mobile-text">paste and download</span>

web/src/lib/settings.ts

@@ -18,7 +18,7 @@ const writeToStorage = (settings: CobaltSettings) => {
 const loadFromStorage = () => {
     const settings = localStorage.getItem('settings');
     if (!settings) {
-        return writeToStorage(defaultSettings);
+        return defaultSettings;
     }
 
     return JSON.parse(settings) as CobaltSettings;

web/src/routes/+layout.svelte

@@ -133,10 +133,14 @@
         transform: scale(0.95);
     }
 
+    :global(.button.selected) {
+        background: var(--secondary);
+        color: var(--primary);
+    }
+
     @media (hover: hover) {
         :global(button:hover) {
             background-color: var(--button-hover);
-            z-index: 1;
         }
     }
 

web/src/routes/+layout.ts

@@ -1 +1,2 @@
 export const prerender = true;
+export const ssr = false;