fix(ui): tooltips, full emoji map, and onboarding layout

chore(release): prep for v1.8.1
fix(ui): add missing avatar emoji in episode lobby UI
2026-07-26 12:08:15 +00:00 · 2026-05-25 23:37:05 +02:00 · 2026-05-25 23:32:07 +02:00 · 2026-05-25 23:30:26 +02:00 · 2026-05-25 23:29:06 +02:00 · 2026-05-25 23:20:37 +02:00
7 changed files with 214 additions and 37 deletions
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "KoalaSync",
-  "version": "1.8.0",
+  "version": "1.8.1",
  "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, and HTML5 sites in real-time with friends.",
  "permissions": [
    "storage",
@@ -237,6 +237,53 @@
            from { opacity: 1; }
            to { opacity: 0; transform: translateY(-10px); }
        }
+
+        @keyframes fadeSlideIn {
+            from { opacity: 0; transform: translateX(5px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .tab-active-animate {
+            animation: fadeSlideIn 0.15s ease-out forwards;
+        }
+
+        /* Toggle Switch CSS */
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 36px;
+            height: 20px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #334155;
+            transition: .3s;
+            border-radius: 20px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: #94a3b8;
+            transition: .3s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--accent);
+        }
+        input:checked + .slider:before {
+            transform: translateX(16px);
+            background-color: white;
+        }
    </style>
 </head>
 <body>
@@ -244,9 +291,9 @@
    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>

    <div class="tabs">
-        <button class="tab-btn active" data-tab="tab-room">Room</button>
+        <button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</button>
        <button class="tab-btn" data-tab="tab-sync">Sync</button>
-        <button class="tab-btn" data-tab="tab-settings">Settings</button>
+        <button class="tab-btn" data-tab="tab-settings" title="Extension preferences">Settings</button>
        <button class="tab-btn" data-tab="tab-dev" title="Advanced Diagnostics & Logs">Status</button>
    </div>

@@ -276,7 +323,7 @@
                <input type="password" id="password" placeholder="Room password">
            </div>
            <div id="roomError" style="display:none; color:var(--error); font-size:11px; margin-bottom:8px; text-align:center;"></div>
-            <button id="joinBtn" class="primary">Join Room</button>
+            <button id="joinBtn" class="primary" title="Connect to the room">Join Room</button>
            
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; margin-bottom: 8px;">
                <label style="margin:0;">Public Rooms</label>
@@ -329,15 +376,18 @@
            </select>
        </div>
        
-        <label>Remote Control</label>
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+            <label style="margin: 0;">Remote Control</label>
+            <button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border:none; padding:4px; font-size:14px; cursor:pointer; opacity:0.8; transition: opacity 0.2s;">🔗</button>
+        </div>
        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-            <button id="playBtn" class="primary" style="flex:1; background: var(--success);">▶ Play</button>
-            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);">⏸ Pause</button>
+            <button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>
+            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone">⏸ Pause</button>
        </div>

        <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
-            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;">⚡ Sync All Viewers</button>
-            <select id="forceSyncMode" style="width: auto; min-width: 130px; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
+            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up">⚡ SYNC</button>
+            <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
                <option value="jump-to-others">Jump to Others</option>
                <option value="jump-to-me">Jump to Me</option>
            </select>
@@ -379,23 +429,35 @@
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;" title="Hides non-video sites like search engines or social media.">Hide Clutter Tabs ℹ️</label>
-            <input type="checkbox" id="filterNoise" style="width: auto;" checked>
+            <label style="margin-bottom: 0; cursor: help;" title="Hides non-video sites like search engines or social media." title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="filterNoise" checked>
+                <span class="slider"></span>
+            </label>
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode ℹ️</label>
-            <input type="checkbox" id="autoSyncNextEpisode" style="width: auto;">
+            <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." title="Automatically clicks 'Next Episode' on supported sites like Netflix when others do">Auto-Sync Next Episode</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="autoSyncNextEpisode">
+                <span class="slider"></span>
+            </label>
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label>
-            <input type="checkbox" id="autoCopyInvite" style="width: auto;" checked>
+            <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="autoCopyInvite" checked>
+                <span class="slider"></span>
+            </label>
        </div>

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;">Browser Notifications</label>
-            <input type="checkbox" id="browserNotifications" style="width: auto;">
+            <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications</label>
+            <label class="toggle-switch">
+                <input type="checkbox" id="browserNotifications">
+                <span class="slider"></span>
+            </label>
        </div>
        

@@ -444,8 +506,8 @@
    <script src="popup.js" type="module"></script>

    <!-- Onboarding Overlay -->
-    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:1000; align-items:center; justify-content:center;">
-        <div id="onboarding-card" style="background:var(--card); padding:24px; border-radius:16px; max-width:280px; width:90%; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.5); margin-top: 50px;">
+    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:1000; align-items:flex-end; justify-content:center; padding-bottom: 20px;">
+        <div id="onboarding-card" style="background:var(--card); padding:24px; border-radius:16px; max-width:280px; width:90%; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.5); ">
            <div id="onboarding-icon" style="font-size:48px; margin-bottom:12px;">\u{1F44B}</div>
            <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 8px; font-size:16px;">Welcome to KoalaSync!</h2>
            <p id="onboarding-text" style="color:var(--text-muted); font-size:13px; margin:0 0 16px; line-height:1.4;">Let's get you started.</p>
@@ -61,6 +61,26 @@ let populateTabsToken = null;
 let errorToken = 0;
 let forceSyncDone = false;

+// --- Helpers ---
+function getAvatarForName(username) {
+    if (!username) return '👤';
+    const lower = username.toLowerCase();
+    const map = {
+        'koala': '🐨', 'panda': '🐼', 'tiger': '🐯', 'eagle': '🦅',
+        'fox': '🦊', 'bear': '🐻', 'wolf': '🐺', 'lion': '🦁',
+        'hawk': '🦅', 'seal': '🦭', 'owl': '🦉', 'shark': '🦈',
+        'dragon': '🐉', 'phoenix': '🐦', 'falcon': '🦅', 'panther': '🐆',
+        'raven': '🐦‍⬛', 'cobra': '🐍', 'lynx': '🐈', 'jaguar': '🐆',
+        'orca': '🐋', 'mantis': '🦗', 'viper': '🐍', 'condor': '🦅',
+        'badger': '🦡', 'otter': '🦦', 'rhino': '🦏', 'crane': '🦩',
+        'mongoose': '🦦', 'specter': '👻'
+    };
+    for (const [key, emoji] of Object.entries(map)) {
+        if (lower.includes(key)) return emoji;
+    }
+    return '👤';
+}
+
 // --- Initialization ---
 async function init() {
    // Load Settings
@@ -155,9 +175,11 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
    const inRoom = !!roomId;
    toggleUIState(inRoom);
    if (inRoom) {
-        const serverFlag = useCustomServer ? '1' : '0';
-        const encodedUrl = encodeURIComponent(serverUrl || '');
-        const invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}:${serverFlag}:${encodedUrl}`;
+        let invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}`;
+        if (useCustomServer) {
+            const encodedUrl = encodeURIComponent(serverUrl || '');
+            invite += `:1:${encodedUrl}`;
+        }
        elements.inviteLink.value = invite;
        
        if (window.justCreatedRoom) {
@@ -253,6 +275,7 @@ function updateLastActionUI(state, peers) {
        const isAcked = safeAcks.includes(pId) || pId === state.senderId;
        const color = isAcked ? 'var(--success)' : '#475569';
        const icon = isAcked ? '✓' : '...';
+        const avatar = getAvatarForName(pName);
        
        const peerItem = document.createElement('div');
        peerItem.title = pName;
@@ -264,7 +287,7 @@ function updateLastActionUI(state, peers) {
        
        const nameSpan = document.createElement('span');
        nameSpan.style.cssText = 'font-size:7px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36px;';
-        nameSpan.textContent = pName;
+        nameSpan.textContent = `${avatar} ${pName}`;
        
        peerItem.appendChild(dot);
        peerItem.appendChild(nameSpan);
@@ -383,10 +406,11 @@ function updatePeerList(peers) {
            header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding-right: 24px;';

            const nameSpan = document.createElement('span');
+            const avatar = getAvatarForName(pUsername || pId);
            if (pUsername) {
                const u = document.createElement('span');
                u.style.cssText = 'font-weight:600; color:white;';
-                u.textContent = pUsername;
+                u.textContent = `${avatar} ${pUsername}`;
                const i = document.createElement('span');
                i.style.cssText = 'font-size:10px; opacity:0.6; font-style:italic;';
                i.textContent = ` (${pId})`;
@@ -394,7 +418,7 @@ function updatePeerList(peers) {
                nameSpan.appendChild(i);
            } else {
                nameSpan.style.fontWeight = '600';
-                nameSpan.textContent = `👤 ${pId}`;
+                nameSpan.textContent = `${avatar} ${pId}`;
            }

            header.appendChild(nameSpan);
@@ -583,7 +607,12 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
            option.style.color = 'var(--star)';
        }
        
+        if (tab.audible) {
+            label = `[🔊] ${label}`;
+        }
+        
        option.textContent = label;
+        option.dataset.originalTitle = tab.title;
        elements.targetTab.appendChild(option);
    });

@@ -665,7 +694,7 @@ function applyConnectionStatus(status) {

    if (elements.playBtn) elements.playBtn.textContent = '▶ Play';
    if (elements.pauseBtn) elements.pauseBtn.textContent = '⏸ Pause';
-    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ Force Sync';
+    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ SYNC';
 }

 function updateHistory(history) {
@@ -869,7 +898,14 @@ elements.tabs.forEach(btn => {
        elements.tabs.forEach(b => b.classList.remove('active'));
        elements.contents.forEach(c => c.classList.remove('active'));
        btn.classList.add('active');
-        document.getElementById(btn.dataset.tab).classList.add('active');
+        
+        const targetContent = document.getElementById(btn.dataset.tab);
+        targetContent.classList.add('active');
+        
+        targetContent.classList.remove('tab-active-animate');
+        void targetContent.offsetWidth; // Force reflow to restart animation
+        targetContent.classList.add('tab-active-animate');
+        
        isDevTabVisible = btn.dataset.tab === 'tab-dev';
        if (isDevTabVisible) refreshLogs();
        if (btn.dataset.tab === 'tab-sync') refreshHistory();
@@ -994,7 +1030,7 @@ elements.retryBtn.addEventListener('click', () => {
 elements.targetTab.addEventListener('change', () => {
    const val = elements.targetTab.value;
    const tabId = val ? parseInt(val) : null;
-    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.text.replace('⭐ MATCH: ', '') || null;
+    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.dataset.originalTitle || null;
    chrome.runtime.sendMessage({ type: 'SET_TARGET_TAB', tabId, tabTitle });
 });

@@ -1129,6 +1165,21 @@ elements.copyInvite.addEventListener('click', () => {
    });
 });

+if (elements.syncTabCopyInvite) {
+    elements.syncTabCopyInvite.addEventListener('click', () => {
+        navigator.clipboard.writeText(elements.inviteLink.value).then(() => {
+            const original = elements.syncTabCopyInvite.textContent;
+            elements.syncTabCopyInvite.textContent = '✓';
+            elements.syncTabCopyInvite.style.color = 'var(--success)';
+            showToast('Invite link copied!', 'success', 2000);
+            setTimeout(() => {
+                elements.syncTabCopyInvite.textContent = original;
+                elements.syncTabCopyInvite.style.color = '';
+            }, 2000);
+        });
+    });
+}
+
 // --- Logs & Status ---
 async function refreshLogs() {
    chrome.runtime.sendMessage({ type: 'GET_LOGS' }, (logs) => {
@@ -1162,8 +1213,8 @@ chrome.runtime.onMessage.addListener((msg) => {
                'play': '▶ Play',
                'pause': '⏸ Pause',
                'seek': '⏩ Seek',
-                'force_sync_prepare': '⚡ Force Sync',
-                'force_sync_execute': '⚡ Force Play'
+                'force_sync_prepare': '⚡ Sync',
+                'force_sync_execute': '⚡ Sync Play'
            };
            const action = actionNames[state.action] || state.action;
            showToast(`${state.senderId} ${action}`, 'info', 2000);
@@ -1195,7 +1246,7 @@ chrome.runtime.onMessage.addListener((msg) => {
                elements.forceSyncBtn.disabled = false;
                elements.forceSyncBtn.textContent = '✅ Synced!';
                setTimeout(() => {
-                    elements.forceSyncBtn.textContent = '⚡ Sync All Viewers';
+                    elements.forceSyncBtn.textContent = '⚡ SYNC';
                }, 2000);
            }
        }
@@ -1383,10 +1434,11 @@ function updateLobbyUI(lobby, peers) {
        peers.forEach(p => {
            const pId = typeof p === 'object' ? p.peerId : p;
            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 label = isReady ? 'Ready' : 'Loading...';
-            peerLines.push(`${icon} ${pName} \u2014 ${label}`);
+            peerLines.push(`${icon} ${avatar} ${pName} \u2014 ${label}`);
        });
    }

@@ -1417,6 +1469,7 @@ let onboardingStep = 0;
 function showOnboarding() {
    const overlay = document.getElementById('onboarding-overlay');
    if (!overlay) return;
+    document.body.style.minHeight = '400px';
    overlay.style.display = 'flex';
    renderOnboardingStep();
 }
@@ -1464,6 +1517,7 @@ function renderOnboardingStep() {
 function completeOnboarding() {
    const overlay = document.getElementById('onboarding-overlay');
    if (overlay) overlay.style.display = 'none';
+    document.body.style.minHeight = '';
    chrome.storage.sync.set({ onboardingComplete: true });
    
    const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';
@@ -0,0 +1,61 @@
+const fs = require('fs');
+let html = fs.readFileSync('extension/popup.html', 'utf8');
+
+// Tooltips for inputs
+html = html.replace('<input type="text" id="username" placeholder="Leave empty for random name">', '<input type="text" id="username" placeholder="Leave empty for random name" title="Your display name in the room">');
+html = html.replace('<input type="text" id="roomId" placeholder="Enter Room ID">', '<input type="text" id="roomId" placeholder="Enter Room ID" title="The unique ID of the room you want to join">');
+html = html.replace('<input type="password" id="password" placeholder="Room Password (optional)">', '<input type="password" id="password" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">');
+
+// Tooltips for buttons
+html = html.replace('<button id="joinBtn" class="primary">Join Room</button>', '<button id="joinBtn" class="primary" title="Connect to the room">Join Room</button>');
+html = html.replace('<button id="leaveBtn" class="primary" style="display:none; background: var(--error);">Leave Room</button>', '<button id="leaveBtn" class="primary" style="display:none; background: var(--error);" title="Disconnect from the room">Leave Room</button>');
+html = html.replace('<button id="createRoomBtn" class="primary">Create New Room</button>', '<button id="createRoomBtn" class="primary" title="Create a new random room and join it">Create New Room</button>');
+html = html.replace('<button id="refreshRooms" class="secondary">↻ Refresh List</button>', '<button id="refreshRooms" class="secondary" title="Refresh the list of public rooms">↻ Refresh List</button>');
+html = html.replace('<button id="playBtn" class="primary" style="flex:1; background: var(--success);">▶ Play</button>', '<button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>');
+html = html.replace('<button id="pauseBtn" class="primary" style="flex:1; background: var(--error);">⏸ Pause</button>', '<button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone">⏸ Pause</button>');
+html = html.replace('<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;">⚡ SYNC</button>', '<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up">⚡ SYNC</button>');
+html = html.replace('<button id="copyInvite" class="secondary" style="margin-top: 0; white-space: nowrap;">Copy Invite</button>', '<button id="copyInvite" class="secondary" style="margin-top: 0; white-space: nowrap;" title="Copy the room invite link to clipboard">Copy Invite</button>');
+
+// Tooltips for tabs
+html = html.replace('<button class="tab-btn active" data-tab="tab-room">Room</button>', '<button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</button>');
+html = html.replace('<button class="tab-btn" data-tab="tab-sync" id="tabSyncBtn" style="display:none;">Sync</button>', '<button class="tab-btn" data-tab="tab-sync" id="tabSyncBtn" style="display:none;" title="Remote control and video selection">Sync</button>');
+html = html.replace('<button class="tab-btn" data-tab="tab-settings">Settings</button>', '<button class="tab-btn" data-tab="tab-settings" title="Extension preferences">Settings</button>');
+html = html.replace('<button class="tab-btn" data-tab="tab-dev">Status</button>', '<button class="tab-btn" data-tab="tab-dev" title="Connection status and debug logs">Status</button>');
+
+// Remove explicit ℹ️ where not needed since it's hidden now
+html = html.replace('>Hide Clutter Tabs ℹ️<', ' title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs<');
+html = html.replace('>Auto-Sync Next Episode ℹ️<', ' title="Automatically clicks \'Next Episode\' on supported sites like Netflix when others do">Auto-Sync Next Episode<');
+html = html.replace('>Auto-copy invite on Create ℹ️<', ' title="Automatically copies the invite link to your clipboard when you create a new room">Auto-copy invite on Create<');
+html = html.replace('>Browser Notifications ℹ️<', ' title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications<');
+
+// Fix onboarding layout
+html = html.replace('align-items:center; justify-content:center;">', 'align-items:flex-end; justify-content:center; padding-bottom: 20px;">');
+html = html.replace('margin-top: 50px;', '');
+
+fs.writeFileSync('extension/popup.html', html, 'utf8');
+
+let js = fs.readFileSync('extension/popup.js', 'utf8');
+
+const newAvatarFn = `function getAvatarForName(username) {
+    if (!username) return '👤';
+    const lower = username.toLowerCase();
+    const map = {
+        'koala': '🐨', 'panda': '🐼', 'tiger': '🐯', 'eagle': '🦅',
+        'fox': '🦊', 'bear': '🐻', 'wolf': '🐺', 'lion': '🦁',
+        'hawk': '🦅', 'seal': '🦭', 'owl': '🦉', 'shark': '🦈',
+        'dragon': '🐉', 'phoenix': '🐦', 'falcon': '🦅', 'panther': '🐆',
+        'raven': '🐦‍⬛', 'cobra': '🐍', 'lynx': '🐈', 'jaguar': '🐆',
+        'orca': '🐋', 'mantis': '🦗', 'viper': '🐍', 'condor': '🦅',
+        'badger': '🦡', 'otter': '🦦', 'rhino': '🦏', 'crane': '🦩',
+        'mongoose': '🦦', 'specter': '👻'
+    };
+    for (const [key, emoji] of Object.entries(map)) {
+        if (lower.includes(key)) return emoji;
+    }
+    return '👤';
+}`;
+
+js = js.replace(/function getAvatarForName\(username\) \{[\s\S]*?return '👤';\n\}/, newAvatarFn);
+
+fs.writeFileSync('extension/popup.js', js, 'utf8');
+console.log("Fixed UI");
@@ -1,12 +1,12 @@
 {
  "name": "koalasync",
-  "version": "1.8.0",
+  "version": "1.8.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "koalasync",
-      "version": "1.8.0",
+      "version": "1.8.2",
      "devDependencies": {
        "archiver": "^7.0.1",
        "eslint": "^10.4.0",
@@ -1,6 +1,6 @@
 {
  "name": "koalasync",
-  "version": "1.8.0",
+  "version": "1.8.2",
  "description": "KoalaSync Build Scripts",
  "private": true,
  "scripts": {
@@ -1,4 +1,4 @@
 {
-  "version": "1.7.5",
-  "date": "2026-05-25T11:26:16Z"
+  "version": "1.8.0",
+  "date": "2026-05-25T21:09:07Z"
 }
Author	SHA1	Message	Date
Koala	4d294cee33	fix(ui): tooltips, full emoji map, and onboarding layout	2026-05-25 23:37:05 +02:00
Koala	8317099072	chore(release): prep for v1.8.1	2026-05-25 23:32:07 +02:00
Koala	04c63dcf68	fix(ui): add missing avatar emoji in episode lobby UI	2026-05-25 23:30:26 +02:00
Koala	fd23ccc23a	feat(ui): v1.8.1 visual upgrades (emojis, animations, audio indicator)	2026-05-25 23:29:06 +02:00
Koala	4d5caeda9e	style(ui): redesign sync button layout and rename to SYNC	2026-05-25 23:20:37 +02:00
Koala	f1f41e5cac	fix(ui): apply tooltip to full label text for settings	2026-05-25 23:19:23 +02:00
GitHub Action	473eacda22	chore(release): update versions to v1.8.0 [skip ci]	2026-05-25 21:09:07 +00:00