web: basic switcher component & mute mode button

web/src/components/buttons/ActionButton.svelte

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

web/src/components/buttons/Switcher.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    export let settingId: string;
+</script>
+
+<div id="switcher-{settingId}" class="switcher">
+    <slot></slot>
+</div>
+
+<style>
+    .switcher {
+        display: flex;
+        width: auto;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        scrollbar-width: none;
+    }
+
+    .switcher :global(.button:first-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .switcher :global(.button:last-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .switcher > :global(:not(.button:first-child):not(.button:last-child)) {
+        border-radius: 0;
+    }
+
+    .switcher > :global(:not(.button:first-child)) {
+        margin-left: -1.5px; /* hack to get rid of double border in a list of switches */
+    }
+</style>