web/save: add paste button & dummy mode buttons

tuned default button look, moved custom icons to lib for easy access

web/src/components/buttons/ActionButton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let id: string;
+    export let text: string = "Button";
+    export let click = () => { alert('no function assigned') };
+</script>
+
+<button id={id} on:click={click}>
+    <slot></slot>
+    {text}
+</button>

web/src/components/save/Omnibox.svelte

@@ -3,6 +3,11 @@
 
     import DownloadButton from './buttons/DownloadButton.svelte';
     import ClearButton from './buttons/ClearButton.svelte';
+    import ActionButton from '../buttons/ActionButton.svelte';
+
+    import IconClipboard from '$lib/icons/Clipboard.svelte';
+    import IconMusic from '$lib/icons/Music.svelte';
+    import IconSparkles from '$lib/icons/Sparkles.svelte';
 
     let link: string = "";
     let isFocused = false;
@@ -14,6 +19,15 @@
             return false
         }
     }
+
+    const pasteClipboard = () => {
+        navigator.clipboard.readText().then(text => {
+            let matchLink = text.match(/https:\/\/[^\s]+/g);
+            if (matchLink) {
+                link = matchLink[0];
+            }
+        });
+    }
 </script>
 
 <div id="omnibox">
@@ -44,6 +58,29 @@
             <DownloadButton />
         {/if}
     </div>
+    <div id="action-container">
+        <div id="mode-switcher">
+            <ActionButton
+                id="auto-mode-button"
+                text="auto"
+            >
+                <IconSparkles/>
+            </ActionButton>
+            <ActionButton
+                id="audio-mode-button"
+                text="audio"
+            >
+                <IconMusic />
+            </ActionButton>
+        </div>
+        <ActionButton
+            id="paste-button"
+            click={pasteClipboard}
+            text="paste"
+        >
+            <IconClipboard />
+        </ActionButton>
+    </div>
 </div>
 
 <style>
@@ -108,4 +145,13 @@
     #link-area::placeholder {
         color: var(--gray)
     }
+
+    #action-container,
+    #mode-switcher {
+        display: flex;
+        flex-direction: row;
+    }
+    #action-container {
+        justify-content: space-between;
+    }
 </style>

web/src/components/save/buttons/DownloadButton.svelte

@@ -17,7 +17,10 @@
 
         border-radius: 0;
         padding: 0 12px;
+
         background: none;
+        box-shadow: none;
+        transform: none;
 
         border-left: 1px var(--gray) solid;
         border-top-right-radius: 11px;

web/src/components/sidebar/CobaltLogo.svelte

@@ -1,8 +1,9 @@
+<script>
+    import IconCobalt from '$lib/icons/Cobalt.svelte';
+</script>
+
 <div id="cobalt-logo">
-    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M0 15.6363L0 12.8594L9.47552 8.293L0 3.14038L0 0.363525L12.8575 7.4908V9.21862L0 15.6363Z" fill="white"/>
-        <path d="M11.1425 15.6363V12.8594L20.6181 8.293L11.1425 3.14038V0.363525L24 7.4908V9.21862L11.1425 15.6363Z" fill="white"/>
-    </svg>
+    <IconCobalt />
 </div>
 
 <style>