a

static/app.js

@@ -45,6 +45,7 @@ const el = {
   addGuildBtn: document.getElementById("add-guild-btn"),
   guildTitle: document.getElementById("guild-title"),
   createInviteBtn: document.getElementById("create-invite-btn"),
+  inviteCopiedBadge: document.getElementById("invite-copied-badge"),
 
   // Channels
   channelList: document.getElementById("channel-list"),
@@ -510,7 +511,7 @@ async function createInviteLink() {
     const link = `${location.origin}/?invite=${encodeURIComponent(invite.code)}`;
     try {
       await navigator.clipboard.writeText(link);
-      alert(`Invite link copied:\n${link}`);
+      showCopiedBadge();
     } catch {
       prompt("Copy invite link:", link);
     }
@@ -519,6 +520,13 @@ async function createInviteLink() {
   }
 }
 
+function showCopiedBadge() {
+  el.inviteCopiedBadge.classList.remove("hidden");
+  setTimeout(() => {
+    el.inviteCopiedBadge.classList.add("hidden");
+  }, 2000);
+}
+
 // --- Logic ---
 
 async function loadGuilds() {

static/index.html

@@ -40,6 +40,7 @@
       <header class="sidebar-header clickable" id="guild-header">
         <h2 id="guild-title">No server selected</h2>
         <div class="sidebar-header-actions">
+          <span id="invite-copied-badge" class="copied-badge hidden">Copied!</span>
           <button id="create-invite-btn" class="header-action-btn" title="Create Invite Link">
             <i data-lucide="link-2"></i>
           </button>

static/styles.css

@@ -354,6 +354,43 @@ select {
   color: var(--text-strong);
 }
 
+.copied-badge {
+  background: var(--brand);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  animation: fadeInOut 2s ease forwards;
+  pointer-events: none;
+  white-space: nowrap;
+  order: -1;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  15% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  85% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
 .header-action-btn i {
   width: 16px;
   height: 16px;