web/Omnibox: show a tooltip if turnstile isn't solved

web/i18n/en/save.json

@@ -21,5 +21,7 @@
     "tutorial.shortcut.photos": "to photos",
     "tutorial.shortcut.files": "to files",
 
-    "label.community_instance": "community instance"
+    "label.community_instance": "community instance",
+
+    "tooltip.captcha": "cloudflare turnstile is checking if you're not a bot, please wait!"
 }

web/src/components/save/CaptchaTooltip.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    type Props = {
+        visible: boolean;
+    };
+
+    let { visible }: Props = $props();
+</script>
+
+<div class="tooltip-holder" class:visible aria-hidden="true">
+    <div class="tooltip-body">
+        <div class="tooltip-content subtext">
+            {$t("save.tooltip.captcha")}
+        </div>
+        <div class="tooltip-pointer border"></div>
+        <div class="tooltip-pointer"></div>
+    </div>
+</div>
+
+<style>
+    .tooltip-holder {
+        position: absolute;
+        bottom: calc(100% + 10px);
+
+        opacity: 0;
+        transform: scale(0) translateX(25px) translateY(15px);
+        transform-origin: bottom left;
+
+        transition:
+            transform 0.25s cubic-bezier(0.53, 0.05, 0.23, 1.15),
+            opacity 0.2s cubic-bezier(0.53, 0.05, 0.23, 0.99);
+
+        will-change: transform, opacity;
+    }
+
+    .tooltip-holder.visible {
+        opacity: 1;
+        transform: none;
+    }
+
+    .tooltip-body {
+        max-width: 180px;
+        position: relative;
+
+        pointer-events: none;
+
+        padding: 8px 14px;
+        border-radius: 11px;
+
+        background: var(--button);
+        box-shadow: var(--button-box-shadow);
+
+        filter: drop-shadow(0 0 8px var(--popover-glow));
+    }
+
+    .tooltip-content {
+        padding: 0;
+    }
+
+    .tooltip-pointer {
+        position: absolute;
+        top: calc(100% - 7px);
+        left: 14px;
+        transform: rotate(45deg);
+        background: var(--button);
+        z-index: 2;
+        height: 10px;
+        width: 10px;
+    }
+
+    .tooltip-pointer.border {
+        box-shadow: var(--button-box-shadow);
+        z-index: 1;
+        margin-top: 2px;
+    }
+</style>

web/src/components/save/Omnibox.svelte

@@ -25,6 +25,7 @@
     import Switcher from "$components/buttons/Switcher.svelte";
     import OmniboxIcon from "$components/save/OmniboxIcon.svelte";
     import ActionButton from "$components/buttons/ActionButton.svelte";
+    import CaptchaTooltip from "$components/save/CaptchaTooltip.svelte";
     import SettingsButton from "$components/buttons/SettingsButton.svelte";
 
     import IconMute from "$components/icons/Mute.svelte";
@@ -44,6 +45,8 @@
     let isDisabled = $state(false);
     let isLoading = $state(false);
 
+    let isHovered = $state(false);
+
     let isBotCheckOngoing = $derived($turnstileEnabled && !$turnstileSolved);
 
     let linkPrefill = $derived(
@@ -148,6 +151,12 @@
 {/if}
 
 <div id="omnibox">
+    {#if $turnstileEnabled}
+        <CaptchaTooltip
+            visible={isBotCheckOngoing && (isHovered || isFocused)}
+        />
+    {/if}
+
     <div
         id="input-container"
         class:focused={isFocused}
@@ -155,6 +164,7 @@
         class:clear-visible={clearVisible}
     >
         <OmniboxIcon loading={isLoading || isBotCheckOngoing} />
+
         <input
             id="link-area"
             bind:value={$link}
@@ -162,6 +172,8 @@
             oninput={() => (isFocused = true)}
             onfocus={() => (isFocused = true)}
             onblur={() => (isFocused = false)}
+            onmouseover={() => (isHovered = true)}
+            onmouseleave={() => (isHovered = false)}
             spellcheck="false"
             autocomplete="off"
             autocapitalize="off"
@@ -225,6 +237,7 @@
         max-width: 640px;
         width: 100%;
         gap: 6px;
+        position: relative;
     }
 
     #input-container {