From fc42fd7a8603daef3c625e542ba1527daee7faf8 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 2 Apr 2025 21:14:24 +0600
Subject: [PATCH] web/Omnibox: make the entire input bar focusable

now it's possible to click through the omnibox icon
---
 web/src/components/save/Omnibox.svelte     | 30 ++++++++++++++++++----
 web/src/components/save/OmniboxIcon.svelte |  9 ++++++-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 1a4e0e3c..0849ec64 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -126,6 +126,9 @@
                 break;
         }
     };
+
+    $: downloadable = validLink($link);
+    $: clearVisible = $link && !isLoading;
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -144,7 +147,8 @@
     <div
         id="input-container"
         class:focused={isFocused}
-        class:downloadable={validLink($link)}
+        class:downloadable
+        class:clear-visible={clearVisible}
     >
         <OmniboxIcon loading={isLoading || isBotCheckOngoing} />
         <input
@@ -166,10 +170,10 @@
             disabled={isDisabled}
         />
 
-        {#if $link && !isLoading}
+        {#if clearVisible}
             <ClearButton click={() => ($link = "")} />
         {/if}
-        {#if validLink($link)}
+        {#if downloadable}
             <DownloadButton
                 url={$link}
                 bind:this={downloadButton}
@@ -229,19 +233,26 @@
         display: flex;
         box-shadow: 0 0 0 1.5px var(--input-border) inset;
         border-radius: var(--border-radius);
-        padding: 0 var(--input-padding);
         align-items: center;
         gap: var(--input-padding);
         font-size: 14px;
         flex: 1;
     }
 
+    #input-container.clear-visible {
+        padding-right: var(--input-padding);
+    }
+
+    :global([dir="rtl"]) #input-container.clear-visible {
+        padding-right: unset;
+        padding-left: var(--input-padding);
+    }
+
     #input-container.downloadable {
         padding-right: 0;
     }
 
     #input-container.downloadable:dir(rtl) {
-        padding-right: var(--input-padding);
         padding-left: 0;
     }
 
@@ -263,6 +274,7 @@
         width: 100%;
         margin: 0;
         padding: var(--input-padding) 0;
+        padding-left: calc(var(--input-padding) + 28px);
         height: 18px;
 
         align-items: center;
@@ -279,6 +291,14 @@
 
         /* workaround for safari */
         font-size: inherit;
+
+        /* prevents input from poking outside of rounded corners */
+        border-radius: var(--border-radius);
+    }
+
+    :global([dir="rtl"]) #link-area {
+        padding-left: unset;
+        padding-right: calc(var(--input-padding) + 28px);
     }
 
     #link-area:focus-visible {
diff --git a/web/src/components/save/OmniboxIcon.svelte b/web/src/components/save/OmniboxIcon.svelte
index 31784981..b5e9dfdd 100644
--- a/web/src/components/save/OmniboxIcon.svelte
+++ b/web/src/components/save/OmniboxIcon.svelte
@@ -53,7 +53,14 @@
 
     #input-icons {
         display: flex;
-        position: relative;
+        position: absolute;
+        margin-left: var(--input-padding);
+        pointer-events: none;
+    }
+
+    :global([dir="rtl"]) #input-icons {
+        margin-left: unset;
+        margin-right: var(--input-padding);
     }
 
     #input-icons :global(svg) {