feat: UI Overhaul

extension/modules/ui/overlays/players.js

@@ -0,0 +1,34 @@
+import { WindowManager } from './window_manager.js';
+
+export const PlayersOverlay = {
+    open() {
+        const { win, content } = WindowManager.create('window-players', '👥 Players', { x: 20, y: 120, width: 200, height: 200 });
+        this.update(content);
+    },
+
+    update(container) {
+        if (!container) container = document.getElementById('window-players-content');
+        if (!container) return;
+
+        const MB = window.MagicBot;
+        if (!MB || !MB.state || !MB.state.players) {
+            container.innerHTML = '<div style="color:red">No Data</div>';
+            return;
+        }
+
+        container.innerHTML = '';
+        const list = document.createElement('div');
+        list.style.cssText = "display: flex; flex-direction: column; gap: 4px; font-size: 11px;";
+
+        MB.state.players.forEach(p => {
+            const isSelf = p.id === MB.state.playerId;
+            const color = p.isConnected ? '#66bb6a' : '#666';
+            const row = document.createElement('div');
+            row.style.cssText = `background: rgba(255,255,255,${isSelf ? '0.1' : '0.05'}); padding: 4px; border-radius: 4px; display: flex; align-items: center; gap: 8px;`;
+            row.innerHTML = `<div style="width:8px; height:8px; border-radius:50%; background:${color};"></div><span style="color:${isSelf ? '#448aff' : '#eee'}; font-weight:${isSelf ? 'bold' : 'normal'};">${p.name}</span>`;
+            list.appendChild(row);
+        });
+
+        container.appendChild(list);
+    }
+};