From e63bf0fbf2018ad4a98fc8b70bfa5fa016b9844a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 17 Jun 2024 19:03:26 +0600
Subject: [PATCH] web/save: dynamic paste text & component clean up

---
 .../components/buttons/ActionButton.svelte    |  2 -
 web/src/components/save/Omnibox.svelte        | 39 +++++++++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/web/src/components/buttons/ActionButton.svelte b/web/src/components/buttons/ActionButton.svelte
index f64f73e3..022e6784 100644
--- a/web/src/components/buttons/ActionButton.svelte
+++ b/web/src/components/buttons/ActionButton.svelte
@@ -1,12 +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} class="button" on:click={click}>
     <slot></slot>
-    {text}
 </button>
 
 <style>
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 2e8a8027..8cebdcad 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -67,18 +67,20 @@
 
     <div id="action-container">
         <Switcher settingId="save-downloadMode">
-            <ActionButton id="auto-mode-button" text="auto">
-                <IconSparkles />
+            <ActionButton id="auto-mode-button">
+                <IconSparkles /> auto
             </ActionButton>
-            <ActionButton id="audio-mode-button" text="audio">
-                <IconMusic />
+            <ActionButton id="audio-mode-button">
+                <IconMusic /> audio
             </ActionButton>
-            <ActionButton id="mute-mode-button" text="mute">
-                <IconMute />
+            <ActionButton id="mute-mode-button">
+                <IconMute /> mute
             </ActionButton>
         </Switcher>
-        <ActionButton id="paste-button" click={pasteClipboard} text="paste">
+        <ActionButton id="paste-button" click={pasteClipboard}>
             <IconClipboard />
+            <span id="paste-desktop-text">paste</span>
+            <span id="paste-mobile-text">paste and download</span>
         </ActionButton>
     </div>
 </div>
@@ -155,4 +157,27 @@
     #action-container {
         justify-content: space-between;
     }
+
+    #paste-mobile-text {
+        display: none;
+    }
+
+    @media screen and (max-width: 440px) {
+        #action-container {
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        #action-container :global(.button) {
+            width: 100%
+        }
+
+        #paste-mobile-text {
+            display: block;
+        }
+
+        #paste-desktop-text {
+            display: none;
+        }
+    }
 </style>