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">
-    export let settingId: string;
-</script>
-
-<div id="switcher-{settingId}" class="switcher">
+<div id="switcher-container" 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>