From 4fb8e0f53af1a91a476c1cf2d97b1dd11ad67c21 Mon Sep 17 00:00:00 2001 From: KoalaDev <6156589+Shik3i@users.noreply.github.com> Date: Sun, 12 Jul 2026 06:38:26 +0200 Subject: [PATCH] style(extension): apply UI/UX audit enhancements, consolidate footers, and style capsule badges --- extension/popup.html | 99 ++++++++++++++++++++++++++++++++----------- extension/popup.js | 22 ++++++---- website/app.js | 6 ++- website/template.html | 2 +- 4 files changed, 93 insertions(+), 36 deletions(-) diff --git a/extension/popup.html b/extension/popup.html index cf435a9..6c41919 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -279,6 +279,8 @@ border-color: var(--success) !important; color: var(--text-on-green) !important; opacity: 1 !important; + transform: scale(0.95) !important; + transition: transform 0.15s ease-out !important; } /* Info Cards */ @@ -298,6 +300,17 @@ .peer-item:last-child { border: 0; } + /* Native, thin modern scrollbars (2026 standard compliant) */ + .info-card, + #publicRooms, + #historyList, + #videoDebug, + #lastActionCard, + #logList { + scrollbar-width: thin; + scrollbar-color: var(--border-strong) transparent; + } + .status-dot { width: 8px; height: 8px; @@ -306,9 +319,54 @@ margin-right: 6px; } - .status-online { background: var(--success); box-shadow: 0 0 8px var(--success); } + .status-online { + background: var(--success); + box-shadow: 0 0 8px var(--success); + animation: pulseGreen 2s infinite ease-in-out; + } .status-offline { background: var(--error); } + @keyframes pulseGreen { + 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success), transparent 30%); } + 70% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--success), transparent 100%); } + 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success), transparent 100%); } + } + + /* Badge and Capsule styles for peers and state */ + .badge { + display: inline-block; + padding: 2px 6px; + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + border-radius: 6px; + line-height: 1.2; + vertical-align: middle; + margin-left: 4px; + } + .badge-ready { + background: color-mix(in oklch, var(--success), transparent 85%); + color: var(--success); + border: 1px solid color-mix(in oklch, var(--success), transparent 70%); + } + .badge-loading { + background: color-mix(in oklch, var(--accent-terracotta), transparent 85%); + color: var(--accent-terracotta); + border: 1px solid color-mix(in oklch, var(--accent-terracotta), transparent 70%); + } + .lobby-peer-item { + display: inline-flex; + align-items: center; + background: var(--bg-base); + border: 1px solid var(--border-soft); + padding: 4px 8px; + border-radius: 6px; + font-size: 11px; + margin-right: 6px; + margin-bottom: 6px; + color: var(--text-primary); + } + /* Logs */ #logList { max-height: 200px; @@ -667,9 +725,9 @@
-
- Manual Connect / Advanced -
+
+ Manual Connect / Advanced +
@@ -919,15 +977,6 @@

Other issue? Open a GitHub Issue

- -
-
Enjoying KoalaSync? Leave a review!
- ★ Rate us - · - Support KoalaSync - · - v0.0.0 -
@@ -961,18 +1010,6 @@
- -
- GitHub Repository -
-
Enjoying KoalaSync? Leave a review!
- ★ Rate us - · - Support KoalaSync - · - v0.0.0 -
-
@@ -987,6 +1024,18 @@
+
+
Enjoying KoalaSync? Leave a review!
+
+ GitHub + + ★ Rate us + · + Support + + v0.0.0 +
+
diff --git a/extension/popup.js b/extension/popup.js index 3510895..5e55873 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -1865,7 +1865,7 @@ elements.copyInvite.addEventListener('click', () => { setTimeout(() => { elements.copyInvite.textContent = original; elements.copyInvite.classList.remove('copy-success'); - }, 2000); + }, 1500); }).catch(() => { showToast(getMessage('TOAST_COPY_FAILED'), 'error'); }); @@ -1875,14 +1875,14 @@ if (elements.syncTabCopyInvite) { elements.syncTabCopyInvite.addEventListener('click', () => { navigator.clipboard.writeText(elements.inviteLink.value).then(() => { const original = elements.syncTabCopyInvite.textContent; - elements.syncTabCopyInvite.textContent = '✓'; + elements.syncTabCopyInvite.textContent = '✓ Copied'; elements.syncTabCopyInvite.classList.add('copy-success'); showToast(getMessage('TOAST_INVITE_COPIED'), 'success', 2000); spawnLeafBurst(elements.syncTabCopyInvite); setTimeout(() => { elements.syncTabCopyInvite.textContent = original; elements.syncTabCopyInvite.classList.remove('copy-success'); - }, 2000); + }, 1500); }); }); } @@ -2494,7 +2494,7 @@ function updateLobbyUI(lobby, peers) { // Build peer readiness list const readySet = new Set(lobby.readyPeers || []); - const peerLines = []; + const peerHtmls = []; if (peers && peers.length > 0) { peers.forEach(p => { @@ -2502,14 +2502,15 @@ function updateLobbyUI(lobby, peers) { const pName = (typeof p === 'object' && p.username) ? p.username : pId; const avatar = getAvatarForName(pName); const isReady = readySet.has(pId); - const icon = isReady ? '\u2705' : '\u23f3'; + const icon = isReady ? '✅' : '⏳'; const label = isReady ? getMessage('LABEL_LOBBY_PEER_READY') : getMessage('LABEL_LOBBY_PEER_LOADING'); - peerLines.push(`${icon} ${avatar} ${pName} \u2014 ${label}`); + const badgeClass = isReady ? 'badge-ready' : 'badge-loading'; + peerHtmls.push(`${icon} ${avatar} ${pName} ${label}`); }); } - if (peerLines.length > 0 && elements.lobbyPeerStatus) { - elements.lobbyPeerStatus.textContent = peerLines.join(' | '); + if (peerHtmls.length > 0 && elements.lobbyPeerStatus) { + elements.lobbyPeerStatus.innerHTML = peerHtmls.join(' '); } else if (elements.lobbyPeerStatus) { elements.lobbyPeerStatus.textContent = getMessage('LOBBY_WAITING_PEERS'); } @@ -2517,7 +2518,10 @@ function updateLobbyUI(lobby, peers) { // Show elapsed time if (lobby.createdAt && elements.lobbyPeerStatus) { const elapsed = Math.floor((Date.now() - lobby.createdAt) / 1000); - elements.lobbyPeerStatus.textContent += ` (${elapsed}s)`; + const timerSpan = document.createElement('span'); + timerSpan.style.cssText = 'font-size: 10px; color: var(--text-muted); margin-left: 6px; display: inline-block; vertical-align: middle;'; + timerSpan.textContent = `(${elapsed}s)`; + elements.lobbyPeerStatus.appendChild(timerSpan); } } diff --git a/website/app.js b/website/app.js index 96f53f5..8670534 100644 --- a/website/app.js +++ b/website/app.js @@ -231,7 +231,11 @@ document.addEventListener('DOMContentLoaded', () => { const sectionObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { - history.replaceState(null, null, '#' + entry.target.id); + if (entry.target.id === 'top') { + history.replaceState(null, null, window.location.pathname + window.location.search); + } else { + history.replaceState(null, null, '#' + entry.target.id); + } if (forestGreet) forestGreet(); } }); diff --git a/website/template.html b/website/template.html index 69e2098..6941ce3 100644 --- a/website/template.html +++ b/website/template.html @@ -360,7 +360,7 @@
-
+

{{HERO_TITLE}}