From bf26988cde771e1b4c41a3cfac71cc9b85b6cb72 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 15 Jun 2024 20:39:34 +0600
Subject: [PATCH] web/save: add paste button & dummy mode buttons

tuned default button look, moved custom icons to lib for easy access
---
 .../components/buttons/ActionButton.svelte    | 10 ++++
 web/src/components/save/Omnibox.svelte        | 46 +++++++++++++++++++
 .../save/buttons/DownloadButton.svelte        |  3 ++
 web/src/components/sidebar/CobaltLogo.svelte  |  9 ++--
 web/src/lib/icons/Clipboard.svelte            | 11 +++++
 web/src/lib/icons/Cobalt.svelte               |  4 ++
 web/src/lib/icons/Music.svelte                |  5 ++
 web/src/lib/icons/Sparkles.svelte             |  5 ++
 web/src/routes/+layout.svelte                 | 18 +++++---
 9 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 web/src/components/buttons/ActionButton.svelte
 create mode 100644 web/src/lib/icons/Clipboard.svelte
 create mode 100644 web/src/lib/icons/Cobalt.svelte
 create mode 100644 web/src/lib/icons/Music.svelte
 create mode 100644 web/src/lib/icons/Sparkles.svelte

diff --git a/web/src/components/buttons/ActionButton.svelte b/web/src/components/buttons/ActionButton.svelte
new file mode 100644
index 00000000..13c126bf
--- /dev/null
+++ b/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>
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 5926135b..7ec197e4 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/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>
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index a9b09945..6e2f004c 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/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;
diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte
index 9cb25ff2..891da1da 100644
--- a/web/src/components/sidebar/CobaltLogo.svelte
+++ b/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>
diff --git a/web/src/lib/icons/Clipboard.svelte b/web/src/lib/icons/Clipboard.svelte
new file mode 100644
index 00000000..5d6b4773
--- /dev/null
+++ b/web/src/lib/icons/Clipboard.svelte
@@ -0,0 +1,11 @@
+<svg width="26" height="26" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M25.5 2H6.5C5.67157 2 5 2.67157 5 3.5V27.5C5 28.3284 5.67157 29 6.5 29H16.4244C16.795 29 17.1524 28.8628 17.4278 28.6149L26.5034 20.4469C26.8195 20.1624 27 19.7572 27 19.332V3.5C27 2.67157 26.3284 2 25.5 2Z" fill="#E19747"/>
+    <rect x="7" y="4" width="18" height="23" rx="1" fill="#F3EEF8"/>
+    <path d="M18 3C18 1.89543 17.1046 1 16 1C14.8954 1 14 1.89543 14 3H13C11.8954 3 11 3.89543 11 5V6.5C11 6.77614 11.2239 7 11.5 7H20.5C20.7761 7 21 6.77614 21 6.5V5C21 3.89543 20.1046 3 19 3H18ZM17 3C17 3.55228 16.5523 4 16 4C15.4477 4 15 3.55228 15 3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3Z" fill="#9B9B9B"/>
+    <path d="M28 11C28.5523 11 29 11.4477 29 12V26L28.5 26.5L24 31H14C13.4477 31 13 30.5523 13 30V12C13 11.4477 13.4477 11 14 11H28Z" fill="#D9D9D9"/>
+    <path d="M29 26H24.846C24.3788 26 24 26.3788 24 26.846V31C24.0914 30.9584 24.1755 30.9005 24.2478 30.8282L28.8282 26.2478C28.9005 26.1755 28.9584 26.0914 29 26Z" fill="#B9B9B9"/>
+    <path d="M15 15.5C15 15.2239 15.1919 15 15.4286 15H26.5714C26.8081 15 27 15.2239 27 15.5C27 15.7761 26.8081 16 26.5714 16H15.4286C15.1919 16 15 15.7761 15 15.5Z" fill="#9B9B9B"/>
+    <path d="M15 18.5C15 18.2239 15.1919 18 15.4286 18H26.5714C26.8081 18 27 18.2239 27 18.5C27 18.7761 26.8081 19 26.5714 19H15.4286C15.1919 19 15 18.7761 15 18.5Z" fill="#9B9B9B"/>
+    <path d="M15.4286 21C15.1919 21 15 21.2239 15 21.5C15 21.7761 15.1919 22 15.4286 22H26.5714C26.8081 22 27 21.7761 27 21.5C27 21.2239 26.8081 21 26.5714 21H15.4286Z" fill="#9B9B9B"/>
+    <path d="M15 24.5C15 24.2239 15.199 24 15.4444 24H22.5556C22.801 24 23 24.2239 23 24.5C23 24.7761 22.801 25 22.5556 25H15.4444C15.199 25 15 24.7761 15 24.5Z" fill="#9B9B9B"/>
+</svg>
diff --git a/web/src/lib/icons/Cobalt.svelte b/web/src/lib/icons/Cobalt.svelte
new file mode 100644
index 00000000..a14ac29c
--- /dev/null
+++ b/web/src/lib/icons/Cobalt.svelte
@@ -0,0 +1,4 @@
+<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>
diff --git a/web/src/lib/icons/Music.svelte b/web/src/lib/icons/Music.svelte
new file mode 100644
index 00000000..77c5445c
--- /dev/null
+++ b/web/src/lib/icons/Music.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="M14.3599 3.00421L8.21995 3.80421C7.89995 3.84421 7.65995 4.12421 7.65995 4.44421V12.0642C7.08995 11.8642 6.45995 11.7842 5.79995 11.8542C3.74995 12.0742 2.12995 13.7742 1.99995 15.8342C1.83995 18.3242 3.80995 20.3842 6.26995 20.3842C8.62995 20.3842 10.5499 18.4742 10.5499 16.1042C10.5499 16.0142 10.5499 15.9242 10.5399 15.8342V8.00421C10.5399 7.72421 10.7499 7.48421 11.0299 7.44421L14.4899 6.99421C14.7499 6.96421 14.9499 6.73421 14.9499 6.46421V3.53421C14.9599 3.21421 14.6799 2.96421 14.3599 3.00421Z" fill="#6B438B"/>
+    <path d="M29.4 5.37423L23.26 6.17423C22.94 6.21423 22.7 6.48423 22.7 6.80423V16.8142C22.13 16.6142 21.5 16.5342 20.84 16.6042C18.79 16.8242 17.17 18.5242 17.04 20.5842C16.88 23.0742 18.85 25.1342 21.31 25.1342C23.67 25.1342 25.59 23.2242 25.59 20.8542C25.59 20.7642 25.59 20.6742 25.58 20.5842V10.3742C25.58 10.0942 25.79 9.85423 26.07 9.81423L29.53 9.36423C29.8 9.32423 30 9.10424 30 8.83424V5.89423C30 5.57423 29.72 5.33423 29.4 5.37423Z" fill="#6B438B"/>
+    <path d="M13.09 10.6543L19.23 9.85429C19.55 9.80429 19.83 10.0543 19.83 10.3743V13.3043C19.83 13.5743 19.63 13.8043 19.37 13.8343L15.91 14.2843C15.63 14.3243 15.42 14.5643 15.42 14.8443V25.0643C15.43 25.1543 15.43 25.2443 15.43 25.3343C15.43 27.7043 13.51 29.6143 11.15 29.6143C8.68995 29.6143 6.71995 27.5543 6.87995 25.0643C6.99995 23.0043 8.61995 21.3143 10.67 21.0943C11.33 21.0243 11.96 21.1043 12.53 21.3043V11.2943C12.53 10.9643 12.77 10.6943 13.09 10.6543Z" fill="#6B438B"/>
+</svg>
diff --git a/web/src/lib/icons/Sparkles.svelte b/web/src/lib/icons/Sparkles.svelte
new file mode 100644
index 00000000..b9066093
--- /dev/null
+++ b/web/src/lib/icons/Sparkles.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="M10.5194 7.0517C10.2265 6.93064 9.99626 6.69861 9.88117 6.41614L8.929 4.25725C8.75112 3.91425 8.23842 3.91425 8.071 4.25725L7.11883 6.41614C6.99327 6.69861 6.76308 6.92055 6.48057 7.0517L5.26682 7.57629C4.91106 7.74779 4.91106 8.24212 5.26682 8.41362L6.48057 8.93821C6.77354 9.05927 7.00374 9.2913 7.11883 9.57377L8.071 11.7427C8.24888 12.0858 8.76158 12.0858 8.929 11.7427L9.88117 9.57377C10.0067 9.2913 10.2369 9.06936 10.5194 8.93821L11.7332 8.41362C12.0889 8.24212 12.0889 7.74779 11.7332 7.57629L10.5194 7.0517Z" fill="#FFB02E"/>
+    <path d="M25.5744 13.5546C24.7045 13.1673 24.0166 12.4539 23.6525 11.5775L20.7897 4.81023C20.2637 3.72992 18.7363 3.72992 18.2103 4.81023L15.3475 11.5775C14.9733 12.4539 14.2854 13.1673 13.4256 13.5546L9.80419 15.1955C8.73194 15.7254 8.73194 17.2746 9.80419 17.8045L13.4256 19.4454C14.2955 19.8327 14.9834 20.5461 15.3475 21.4225L18.2103 28.1898C18.7363 29.2701 20.2637 29.2701 20.7897 28.1898L23.6525 21.4225C24.0267 20.5461 24.7146 19.8327 25.5744 19.4454L29.1958 17.8045C30.2681 17.2746 30.2681 15.7254 29.1958 15.1955L25.5744 13.5546Z" fill="#FFB02E"/>
+    <path d="M8.2811 20.3304C8.44173 20.7222 8.73465 21.0258 9.10315 21.2021L10.6528 21.927C11.1157 22.1621 11.1157 22.8379 10.6528 23.073L9.10315 23.7979C8.73465 23.9742 8.44173 24.2876 8.2811 24.6696L7.05276 27.6474C6.82598 28.1175 6.17402 28.1175 5.94724 27.6474L4.7189 24.6696C4.55827 24.2778 4.26535 23.9742 3.89685 23.7979L2.34724 23.073C1.88425 22.8379 1.88425 22.1621 2.34724 21.927L3.89685 21.2021C4.26535 21.0258 4.55827 20.7124 4.7189 20.3304L5.94724 17.3526C6.17402 16.8825 6.82598 16.8825 7.05276 17.3526L8.2811 20.3304Z" fill="#FFB02E"/>
+</svg>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 48bb34bd..066dc161 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -18,9 +18,9 @@
         --gray: #8d8d95;
 
         --button: #eeeeee;
-        --button-hover: rgb(215, 215, 215);
-        --button-hover-transparent: rgba(215, 215, 215, 0.5);
-        --button-stroke: rgba(0, 0, 0, 0.8);
+        --button-hover: #e8e8e8;
+        --button-hover-transparent: rgba(0, 0, 0, 0.03);
+        --button-stroke: rgba(0, 0, 0, 0.08);
 
         --padding: 12px;
 
@@ -55,13 +55,19 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 7px 13px;
+        padding: 8px 15px;
+        gap: 8px;
         border: none;
-        border-radius: 10px;
-        font-size: 14px;
+        border-radius: 11px;
+        font-size: 16px;
         cursor: pointer;
         background-color: var(--button);
         color: var(--secondary);
+        box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
+    }
+
+    :global(button:active) {
+        transform: scale(0.95);
     }
 
     :global(button:hover) {