Update premium.html

premium.html

@@ -113,9 +113,19 @@
       const listEl = document.getElementById('premium-list');
       const cards = document.querySelectorAll('#features .card');
       try {
-        const r = await fetch('/api/premium');
-        const data = await r.json();
-        if (data.premium) {
+        // Check login status first to show user-specific premium status
+        let userPremium = false;
+        try {
+          const authR = await fetch('/api/me');
+          const authData = await authR.json();
+          if (authData.loggedIn) {
+            const premiumR = await fetch('/api/premium');
+            const premiumData = await premiumR.json();
+            userPremium = premiumData.premium;
+          }
+        } catch (e) { /* not logged in, that's fine */ }
+
+        if (userPremium) {
           statusEl.className = 'badge active';
           statusEl.textContent = '⭐ ACTIVE';
           textEl.textContent = 'You have Premium access! Enjoy all features.';
@@ -123,20 +133,29 @@
         } else {
           statusEl.className = 'badge inactive';
           statusEl.textContent = '— LOCKED';
-          textEl.textContent = 'Win a league match with !win to unlock Premium.';
+          textEl.textContent = 'Log in to the dashboard and win a league match with !win to unlock Premium.';
           cards.forEach(c => { c.style.borderColor = 'var(--border)'; c.style.opacity = '0.55'; c.classList.add('locked'); });
         }
-        if (data.list && data.list.length > 0) {
-          listEl.innerHTML = data.list.map(u => {
+
+        // Load public premium list
+        const listR = await fetch('/api/premium/list');
+        const listData = await listR.json();
+        if (listData.list && listData.list.length > 0) {
+          listEl.innerHTML = listData.list.map(u => {
             const date = new Date(u.grantedAt).toLocaleDateString();
-            const avatarUrl = u.avatarUrl || `https://cdn.discordapp.com/embed/avatars/0.png`;
+            const avatarUrl = u.avatarUrl || '';
             const displayName = u.userTag || u.userId;
-            return `<tr><td><div class="user-row"><div class="user-avatar"><img src="${avatarUrl}" onerror="this.parentElement.textContent='${(displayName||'?')[0].toUpperCase()}'" alt=""></div><span style="font-size:13px;font-weight:500">${displayName}</span></div></td><td style="font-size:13px">${date}</td><td style="font-size:13px;color:var(--text-dim)">${u.reason || 'manual'}</td></tr>`;
+            const initial = (displayName || '?')[0].toUpperCase();
+            const avatarHtml = avatarUrl
+              ? `<img src="${avatarUrl}" onerror="this.parentElement.textContent='${initial}'" alt="">`
+              : `<span style="font-size:14px;font-weight:700">${initial}</span>`;
+            return `<tr><td><div class="user-row"><div class="user-avatar">${avatarHtml}</div><span style="font-size:13px;font-weight:500">${displayName}</span></div></td><td style="font-size:13px">${date}</td><td style="font-size:13px;color:var(--text-dim)">${u.reason || 'manual'}</td></tr>`;
           }).join('');
         } else {
           listEl.innerHTML = '<tr><td colspan="3" style="text-align:center;color:var(--text-dim);padding:24px">No premium users yet. Win a league match to be the first!</td></tr>';
         }
       } catch (e) {
+        statusEl.className = 'badge inactive';
         statusEl.textContent = '❌ ERROR';
         textEl.textContent = 'Could not load premium data.';
         listEl.innerHTML = '<tr><td colspan="3" style="text-align:center;color:var(--red)">Failed to load.</td></tr>';