Simplify share button

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

@@ -18,6 +18,9 @@
   let swapState: { originalField: 1 | 2; originalValue: string } | null = null;
   let copyStatus: 'idle' | 'copied' | 'failed' = 'idle';
   let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  let copyStatusMessage = '';
+  let hasInputs = false;
+  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);
@@ -104,6 +107,19 @@
     }
   }
 
+  $: hasInputs =
+    Boolean(
+      val1.trim() ||
+        val2.trim() ||
+        (has3 && val3.trim())
+    );
+  $: copyStatusMessage =
+    copyStatus === 'copied'
+      ? 'Link copied to clipboard'
+      : copyStatus === 'failed'
+        ? 'Failed to copy link'
+        : '';
+
   onMount(() => {
     const params = new URLSearchParams($page.url.search);
     if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); }
@@ -182,33 +198,32 @@
   </div>
 
   <div class="calc-footer">
-    <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
-      Clear
-    </button>
-    <button
-      type="button"
-      class="link-btn"
-      on:click={copyLink}
-      aria-label="Copy calculator link"
-      disabled={!val1 && !val2 && !(val3 && has3)}
-    >
-      <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"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.6"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      Link
-      {#if copyStatus === 'copied'}
-        <span class="status-badge">Copied</span>
-      {:else if copyStatus === 'failed'}
-        <span class="status-badge">Failed</span>
-      {/if}
-    </button>
+    <div class="footer-controls">
+      <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
+        Clear
+      </button>
+      <button
+        type="button"
+        class="icon-btn"
+        on:click={copyLink}
+        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"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <span class="sr-only" aria-live="polite">
+        {copyStatusMessage}
+      </span>
+    </div>
     {#if config.factor && config.type === 'standard'}
       <span class="formula-hint">
         1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
@@ -348,6 +363,13 @@
     padding: 1rem 2rem 1.25rem;
     border-top: 1px solid var(--border);
   }
+  .footer-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+  }
+
   .clear-btn {
     padding: 0.5rem 1.25rem;
     border: 1px solid var(--border);
@@ -367,39 +389,42 @@
     outline: none;
     box-shadow: 0 0 0 3px var(--accent-glow);
   }
-  .link-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.5rem 1rem;
+  .icon-btn {
+    width: 40px;
+    height: 40px;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--section-bg);
     color: var(--text);
-    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
   }
-  .link-btn svg {
-    width: 1rem;
-    height: 1rem;
+  .icon-btn svg {
+    width: 1.1rem;
+    height: 1.1rem;
   }
-  .link-btn:disabled {
+  .icon-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .link-btn:not(:disabled):hover {
+  .icon-btn:not(:disabled):hover {
     border-color: var(--accent);
     background: var(--surface-hover);
   }
-  .status-badge {
-    font-size: 0.7rem;
-    background: var(--accent);
-    color: #fff;
-    border-radius: 999px;
-    padding: 0.05rem 0.55rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
   .formula-hint {
     font-size: 0.78rem;