From ed7900656d2c8a8204f9560a5fa060991b2372c6 Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Fri, 12 Jun 2026 01:18:48 -0700
Subject: [PATCH] Replace copy-link alert() with inline button feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The lobby Copy buttons now flip to a transient "✓ Copied" label instead
of popping a modal alert, matching the admin page's copy buttons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 TODO.md                                   |  2 +-
 frontend/src/components/LobbyPhase.svelte | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index d6c2181..b418b77 100644
--- a/TODO.md
+++ b/TODO.md
@@ -9,7 +9,7 @@
 ## Missing Features
 
 - [x] **Incomplete admin page.**: The Admin page should include links for players to re-join the game.
-- [ ] **Less intrusive link copied notification.** When you copy a join link from the lobby page, it pops up an alert() to let you know the link was copied. I'd prefer something more subtle, and more importantly not modal.
+- [x] **Less intrusive link copied notification.** When you copy a join link from the lobby page, it pops up an alert() to let you know the link was copied. I'd prefer something more subtle, and more importantly not modal.
 - [ ] **Rules endpoint** Make a nicely formatted HTML version of the rulebook. It should probably also be linked from a help menu somewhere that's always available, rather than only being surfaced on the splash page of the site (which joining players don't even see). Work from "Rats with Gats beta.pdf" rather than "RULEBOOK.md", which is a low fidelity AI summary of the former.
 
 ## Cosmetic
diff --git a/frontend/src/components/LobbyPhase.svelte b/frontend/src/components/LobbyPhase.svelte
index ed978cc..584523d 100644
--- a/frontend/src/components/LobbyPhase.svelte
+++ b/frontend/src/components/LobbyPhase.svelte
@@ -4,6 +4,15 @@
     export let state;
 
     let starting = false;
+    let copiedLink = null;
+    let copiedTimer = null;
+
+    function copyLink(which, value) {
+        navigator.clipboard.writeText(value);
+        copiedLink = which;
+        clearTimeout(copiedTimer);
+        copiedTimer = setTimeout(() => { copiedLink = null; }, 2000);
+    }
 
     async function startGame() {
         starting = true;
@@ -39,7 +48,9 @@
             <h4>Share Join Link:</h4>
             <div class="copy-container">
                 <input type="text" readonly value="{window.location.origin}/#/game/{state.game.id}/join" class="copy-input" id="join-link-copy">
-                <button on:click={() => { navigator.clipboard.writeText(document.getElementById('join-link-copy').value); alert('Join link copied!'); }} class="btn btn-secondary btn-small">Copy</button>
+                <button on:click={() => copyLink('join', document.getElementById('join-link-copy').value)} class="btn btn-secondary btn-small">
+                    {copiedLink === 'join' ? '✓ Copied' : 'Copy'}
+                </button>
             </div>
         </div>
         
@@ -49,7 +60,9 @@
             <p class="info-text">Save this admin link! You can use it to recover character sheets if another player loses their connection or link.</p>
             <div class="copy-container">
                 <input type="text" readonly value="{window.location.origin}/#/game/{state.game.id}/admin" class="copy-input admin-input" id="admin-link-copy">
-                <button on:click={() => { navigator.clipboard.writeText(document.getElementById('admin-link-copy').value); alert('Admin link copied!'); }} class="btn btn-gold btn-small">Copy Admin Link</button>
+                <button on:click={() => copyLink('admin', document.getElementById('admin-link-copy').value)} class="btn btn-gold btn-small">
+                    {copiedLink === 'admin' ? '✓ Copied' : 'Copy Admin Link'}
+                </button>
             </div>
             <div class="mt-4">
                 <a href="/#/game/{state.game.id}/admin" class="text-sm text-silver underline hover:text-white">Access Admin Panel directly</a>