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>

web/src/components/save/Omnibox.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-    import { IconLink } from '@tabler/icons-svelte';
+    import { IconLink } from "@tabler/icons-svelte";
 
-    import DownloadButton from './buttons/DownloadButton.svelte';
+    import DownloadButton from "./buttons/DownloadButton.svelte";
-    import ClearButton from './buttons/ClearButton.svelte';
+    import ClearButton from "./buttons/ClearButton.svelte";
-    import ActionButton from '../buttons/ActionButton.svelte';
+    import ActionButton from "../buttons/ActionButton.svelte";
 
-    import IconClipboard from '$lib/icons/Clipboard.svelte';
+    import Switcher from "../buttons/Switcher.svelte";
-    import IconMusic from '$lib/icons/Music.svelte';
+
-    import IconSparkles from '$lib/icons/Sparkles.svelte';
+    import IconSparkles from "$lib/icons/Sparkles.svelte";
+    import IconMusic from "$lib/icons/Music.svelte";
+    import IconMute from "$lib/icons/Mute.svelte";
+
+    import IconClipboard from "$lib/icons/Clipboard.svelte";
 
     let link: string = "";
     let isFocused = false;
@@ -16,68 +20,63 @@
         try {
             return /^https:/i.test(new URL(link).protocol);
         } catch {
-            return false
+            return false;
         }
-    }
+    };
 
     const pasteClipboard = () => {
-        navigator.clipboard.readText().then(text => {
+        navigator.clipboard.readText().then((text) => {
             let matchLink = text.match(/https:\/\/[^\s]+/g);
             if (matchLink) {
                 link = matchLink[0];
             }
         });
-    }
+    };
 </script>
 
 <div id="omnibox">
-    <div id="input-container" class:focused={isFocused} class:downloadable={validLink(link)}>
+    <div
+        id="input-container"
+        class:focused={isFocused}
+        class:downloadable={validLink(link)}
+    >
         <IconLink id="input-link-icon" color="var(--gray)" size="18px" />
 
         <input
             id="link-area"
             bind:value={link}
-
+            on:input={() => (isFocused = true)}
-            on:input={() => isFocused = true}
+            on:focus={() => (isFocused = true)}
-            on:focus={() => isFocused = true}
+            on:blur={() => (isFocused = false)}
-            on:blur={() => isFocused = false}
-
             spellcheck="false"
             autocomplete="off"
             autocapitalize="off"
             maxlength="256"
-
             placeholder="paste the link here"
             aria-label="link input area"
-        >
+        />
 
         {#if link.length > 0}
-            <ClearButton click={() => link = ""} />
+            <ClearButton click={() => (link = "")} />
         {/if}
         {#if validLink(link)}
             <DownloadButton />
         {/if}
     </div>
+
     <div id="action-container">
-        <div id="mode-switcher">
+        <Switcher settingId="save-downloadMode">
-            <ActionButton
+            <ActionButton id="auto-mode-button" text="auto">
-                id="auto-mode-button"
+                <IconSparkles />
-                text="auto"
-            >
-                <IconSparkles/>
             </ActionButton>
-            <ActionButton
+            <ActionButton id="audio-mode-button" text="audio">
-                id="audio-mode-button"
-                text="audio"
-            >
                 <IconMusic />
             </ActionButton>
-        </div>
+            <ActionButton id="mute-mode-button" text="mute">
-        <ActionButton
+                <IconMute />
-            id="paste-button"
+            </ActionButton>
-            click={pasteClipboard}
+        </Switcher>
-            text="paste"
+        <ActionButton id="paste-button" click={pasteClipboard} text="paste">
-        >
             <IconClipboard />
         </ActionButton>
     </div>
@@ -100,7 +99,7 @@
         align-items: center;
         gap: 10px;
         font-size: 14px;
-        flex: 1
+        flex: 1;
     }
 
     #input-container.downloadable {
@@ -143,14 +142,14 @@
     }
 
     #link-area::placeholder {
-        color: var(--gray)
+        color: var(--gray);
     }
 
-    #action-container,
+    #action-container {
-    #mode-switcher {
         display: flex;
         flex-direction: row;
     }
+
     #action-container {
         justify-content: space-between;
     }

web/src/lib/icons/Mute.svelte

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.80282 23H12.0122L13.0122 16L12.0122 9H7.80282C6.80707 9 6 9.84705 6 10.8921V21.1079C6 22.153 6.80707 23 7.80282 23ZM26 16.0232C26 17.7104 24.6322 19.0781 22.945 19.0781C21.2579 19.0781 19.8901 17.7104 19.8901 16.0232C19.8901 14.336 21.2579 12.9683 22.945 12.9683C24.6322 12.9683 26 14.336 26 16.0232Z" fill="#9B9B9B"/>
+    <path d="M20.6106 26.8309L11.9976 23.0011L11.9976 9.01942L20.0474 5.23153C21.1704 4.70349 23.0356 5.2552 23.0356 6.49651V25.3045C23.0356 26.5512 21.7343 27.3705 20.6106 26.8309Z" fill="#D3D3D3"/>
+    <path d="M24.9692 26.6519L5.1497 6.83167C4.68545 6.36742 4.68545 5.61418 5.1497 5.14994C5.61394 4.6857 6.36718 4.6857 6.83142 5.14994L26.6509 24.9694C27.1151 25.4337 27.1151 26.1869 26.6509 26.6511C26.1866 27.1161 25.4342 27.1161 24.9692 26.6519Z" fill="#F8312F"/>
+</svg>