Show confirmation tooltip on copying URL (#3184)

* Show confirmation tooltip on copying URL.

* Update src/frontend/src/lib/components/ui/Tooltip.svelte

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: sea-snake

src/frontend/src/lib/components/ui/Tooltip.svelte

@@ -12,6 +12,8 @@
     align?: Align;
     distance?: string;
     hidden?: boolean;
+    arrow?: boolean;
+    manual?: boolean; // Always render tooltip, even when not hovered
     anchor?: HTMLElement;
   };
 
@@ -23,6 +25,8 @@
     align = "center",
     distance = "0.5rem",
     hidden = false,
+    manual = false,
+    arrow = true,
     anchor,
     children,
     class: className,
@@ -31,7 +35,7 @@
 
   let wrapperRef = $state<HTMLElement>();
   let tooltipRef = $state<HTMLElement>();
-  let isTooltipVisible = $state(false);
+  let isTooltipVisible = $state(manual ? !hidden : false);
 
   const anchorRef = $derived(
     anchor ??
@@ -94,20 +98,26 @@
       tooltipRef?.hidePopover();
     }
   });
+
+  $effect(() => {
+    if (manual) {
+      isTooltipVisible = !hidden;
+    }
+  });
 </script>
 
-{#if hidden}
+{#if !manual && hidden}
   {@render children?.()}
 {:else}
   <!-- Wrapper used for event handlers and (optionally) anchoring -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={wrapperRef}
-    onmouseenter={() => (isTooltipVisible = true)}
-    onmouseleave={() => (isTooltipVisible = false)}
-    onfocusin={() => (isTooltipVisible = true)}
-    onfocusout={() => (isTooltipVisible = false)}
-    ontouchend={() => (isTooltipVisible = !isTooltipVisible)}
+    onmouseenter={() => !manual && (isTooltipVisible = true)}
+    onmouseleave={() => !manual && (isTooltipVisible = false)}
+    onfocusin={() => !manual && (isTooltipVisible = true)}
+    onfocusout={() => !manual && (isTooltipVisible = false)}
+    ontouchend={() => !manual && (isTooltipVisible = !isTooltipVisible)}
     class="contents"
     aria-describedby={id}
   >
@@ -161,45 +171,47 @@
         </span>
       {/if}
       <!-- Tooltip arrow -->
-      <div
-        class={[
-          "absolute size-0",
-          {
-            up: {
-              start: "bottom-0 left-7",
-              center: "bottom-0 left-[50%]",
-              end: "right-7 bottom-0",
-            }[align],
-            right: {
-              start: "top-7 left-0",
-              center: "top-[50%] left-0",
-              end: "bottom-7 left-0",
-            }[align],
-            down: {
-              start: "top-0 left-7",
-              center: "top-0 left-[50%]",
-              end: "top-0 right-7",
-            }[align],
-            left: {
-              start: "top-7 right-0",
-              center: "top-[50%] right-0",
-              end: "right-0 bottom-7",
-            }[align],
-          }[direction],
-        ]}
-      >
+      {#if arrow}
         <div
           class={[
-            "bg-fg-primary size-2 origin-center -translate-1 rotate-45",
+            "absolute size-0",
             {
-              up: "rounded-br-xs",
-              right: "rounded-bl-xs",
-              down: "rounded-tl-xs",
-              left: "rounded-tr-xs",
+              up: {
+                start: "bottom-0 left-7",
+                center: "bottom-0 left-[50%]",
+                end: "right-7 bottom-0",
+              }[align],
+              right: {
+                start: "top-7 left-0",
+                center: "top-[50%] left-0",
+                end: "bottom-7 left-0",
+              }[align],
+              down: {
+                start: "top-0 left-7",
+                center: "top-0 left-[50%]",
+                end: "top-0 right-7",
+              }[align],
+              left: {
+                start: "top-7 right-0",
+                center: "top-[50%] right-0",
+                end: "right-0 bottom-7",
+              }[align],
             }[direction],
           ]}
-        ></div>
-      </div>
+        >
+          <div
+            class={[
+              "bg-fg-primary size-2 origin-center -translate-1 rotate-45",
+              {
+                up: "rounded-br-xs",
+                right: "rounded-bl-xs",
+                down: "rounded-tl-xs",
+                left: "rounded-tr-xs",
+              }[direction],
+            ]}
+          ></div>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}

src/frontend/src/lib/components/views/ContinueOnAnotherDevice.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
   import Button from "$lib/components/ui/Button.svelte";
-  import { CopyIcon } from "@lucide/svelte";
+  import { CopyIcon, CheckIcon } from "@lucide/svelte";
   import QrCode from "$lib/components/ui/QrCode.svelte";
+  import Tooltip from "$lib/components/ui/Tooltip.svelte";
+  import { waitFor } from "$lib/utils/utils";
 
   interface Props {
     url: URL;
   }
 
   const { url }: Props = $props();
 
-  const handleCopyLink = () => navigator.clipboard.writeText(url.href);
+  let copied = $state(false);
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url.href);
+    copied = true;
+    await waitFor(700);
+    copied = false;
+  };
 </script>
 
 <div class="flex flex-col">
@@ -21,10 +30,17 @@
     Scan the above QR code with your
     <b class="text-text-primary">new device</b> or enter the URL manually.
   </p>
-  <Button onclick={handleCopyLink} variant="secondary" size="lg" class="mt-6">
-    <span>
-      {url.host + url.pathname}
-    </span>
-    <CopyIcon size="1.25rem" />
-  </Button>
+  <Tooltip
+    label="Link copied to clipboard"
+    hidden={!copied}
+    arrow={false}
+    manual
+  >
+    <Button onclick={handleCopyLink} variant="secondary" size="lg" class="mt-6">
+      <span>
+        {url.host + url.pathname + url.search}
+      </span>
+      <CopyIcon size="1.25rem" />
+    </Button>
+  </Tooltip>
 </div>