Fix calculator link copy icon and tooltips

hdyc-svelte/src/lib/components/Calculator.svelte

@@ -2,7 +2,7 @@
   import { solve } from '$lib/engine';
   import type { CalculatorDef } from '$lib/data/calculators';
   import { page } from '$app/stores';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { browser } from '$app/environment';
   import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte';
   import QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
@@ -18,8 +18,12 @@
   let swapState: { originalField: 1 | 2; originalValue: string } | null = null;
   let copyStatus: 'idle' | 'copied' | 'failed' = 'idle';
   let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  let tooltipFadeTimeout: ReturnType<typeof setTimeout> | null = null;
+  let tooltipHideTimeout: ReturnType<typeof setTimeout> | null = null;
+  let showCopyTooltip = false;
+  let isTooltipFading = false;
+  let showHoverTooltip = false;
   let copyStatusMessage = '';
-  let hasInputs = false;
 
   $: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3;
   $: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type);
@@ -86,13 +90,49 @@
     return shareUrl.toString();
   }
 
+  async function copyText(text: string) {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.setAttribute('readonly', '');
+    textArea.style.position = 'absolute';
+    textArea.style.left = '-9999px';
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    const copied = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    if (!copied) {
+      throw new Error('execCommand copy failed');
+    }
+  }
+
+  function triggerCopyTooltip() {
+    if (tooltipFadeTimeout) clearTimeout(tooltipFadeTimeout);
+    if (tooltipHideTimeout) clearTimeout(tooltipHideTimeout);
+    showCopyTooltip = true;
+    isTooltipFading = false;
+    tooltipFadeTimeout = setTimeout(() => {
+      isTooltipFading = true;
+    }, 900);
+    tooltipHideTimeout = setTimeout(() => {
+      showCopyTooltip = false;
+      isTooltipFading = false;
+    }, 1300);
+  }
+
   async function copyLink() {
     if (!browser) return;
     const url = buildShareUrl();
 
     try {
-      await navigator.clipboard.writeText(url);
+      await copyText(url);
       copyStatus = 'copied';
+      triggerCopyTooltip();
     } catch (error) {
       console.error('Failed to copy link', error);
       copyStatus = 'failed';
@@ -106,12 +146,6 @@
     }
   }
 
-  $: hasInputs =
-    Boolean(
-      val1.trim() ||
-        val2.trim() ||
-        (has3 && val3.trim())
-    );
   $: copyStatusMessage =
     copyStatus === 'copied'
       ? 'Link copied to clipboard'
@@ -126,6 +160,12 @@
     else if (params.has('v3') && has3) { val3 = params.get('v3')!; handleInput(3); }
     setTimeout(() => { paramsInitializing = false; }, 0);
   });
+
+  onDestroy(() => {
+    if (statusTimeout) clearTimeout(statusTimeout);
+    if (tooltipFadeTimeout) clearTimeout(tooltipFadeTimeout);
+    if (tooltipHideTimeout) clearTimeout(tooltipHideTimeout);
+  });
 </script>
 
 <div class="calculator-card">
@@ -205,20 +245,29 @@
         type="button"
         class="icon-btn"
         on:click={copyLink}
+        on:mouseenter={() => (showHoverTooltip = true)}
+        on:mouseleave={() => (showHoverTooltip = false)}
+        on:focus={() => (showHoverTooltip = true)}
+        on:blur={() => (showHoverTooltip = false)}
         aria-label="Copy calculator link"
-        disabled={!hasInputs}
       >
         <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true">
           <path
-            d="M10 14a1 1 0 0 1-1 1H6a4 4 0 0 1 0-8h3a1 1 0 1 1 0 2H6a2 2 0 0 0 0 4h3a1 1 0 0 1 1 1zm4-2a1 1 0 0 1 1-1h3a2 2 0 0 0 0-4h-3a1 1 0 1 1 0-2h3a4 4 0 0 1 0 8h-3a1 1 0 0 1-1-1zm-1.293 2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4zM12 16l-4-4 4-4"
+            d="M13.5 6.5l1.5-1.5a4.243 4.243 0 0 1 6 6L19.5 12.5M10.5 17.5L9 19a4.243 4.243 0 1 1-6-6L4.5 11.5M8 16l8-8"
             fill="none"
             stroke="currentColor"
-            stroke-width="1.6"
+            stroke-width="1.9"
             stroke-linecap="round"
             stroke-linejoin="round"
           />
         </svg>
       </button>
+      {#if showHoverTooltip && !showCopyTooltip}
+        <span class="copy-tooltip hover">Copy link</span>
+      {/if}
+      {#if showCopyTooltip && copyStatus === 'copied'}
+        <span class="copy-tooltip" class:fading={isTooltipFading}>Link copied!</span>
+      {/if}
       <span class="sr-only" aria-live="polite">
         {copyStatusMessage}
       </span>
@@ -414,6 +463,33 @@
     border-color: var(--accent);
     background: var(--surface-hover);
   }
+  .copy-tooltip {
+    position: absolute;
+    top: calc(100% + 0.4rem);
+    right: 0;
+    background: color-mix(in srgb, var(--accent) 90%, black 10%);
+    color: #fff;
+    border-radius: 6px;
+    padding: 0.35rem 0.55rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    pointer-events: none;
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.35s ease, transform 0.35s ease;
+    white-space: nowrap;
+    z-index: 2;
+  }
+  .copy-tooltip.hover {
+    background: var(--section-bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+  }
+  .copy-tooltip.fading {
+    opacity: 0;
+    transform: translateY(-0.2rem);
+  }
   .sr-only {
     position: absolute;
     width: 1px;