feat: UI Overhaul

extension/modules/ui/overlays/shop.js

@@ -0,0 +1,50 @@
+import { WindowManager } from './window_manager.js';
+
+export const ShopOverlay = {
+    open() {
+        const { win, content } = WindowManager.create('window-shop', '🏪 Shop', { x: 790, y: 20, width: 250, height: 350 });
+        this.update(content);
+    },
+
+    update(container) {
+        if (!container) container = document.getElementById('window-shop-content');
+        if (!container) return;
+
+        const MB = window.MagicBot;
+        if (!MB || !MB.state || !MB.state.shops?.seed) {
+            container.innerHTML = '<div style="color:red">No Shop Data</div>';
+            return;
+        }
+
+        container.innerHTML = '';
+        const grid = document.createElement('div');
+        grid.style.cssText = "display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; font-size: 11px;";
+
+        MB.state.shops.seed.inventory.forEach(item => {
+            const purchased = MB.state.shopPurchases?.seed?.purchases?.[item.species] || 0;
+            const stock = Math.max(0, item.initialStock - purchased);
+            const stockColor = stock > 0 ? '#66bb6a' : '#ff5252';
+            const auto = MB.automation?.autoBuyItems?.has(item.species);
+
+            const div = document.createElement('div');
+            div.style.cssText = `background: rgba(255,255,255,0.05); padding: 5px; border-radius: 4px; border-left: 2px solid ${stockColor}; border-right: 2px solid ${auto ? '#ffd700' : 'transparent'}; cursor: pointer;`;
+
+            div.innerHTML = `<div style="font-weight:bold;">${item.species}</div><div style="color:#888;">${stock}/${item.initialStock}</div>`;
+
+            div.oncontextmenu = (e) => {
+                e.preventDefault();
+                if (auto) MB.automation.autoBuyItems.delete(item.species);
+                else MB.automation.autoBuyItems.add(item.species);
+                this.update(container); // Refresh immediately to show border change
+            };
+
+            div.onclick = () => {
+                if (stock > 0) MB.sendMsg({ scopePath: ["Room", "Quinoa"], type: "PurchaseSeed", species: item.species });
+            };
+
+            grid.appendChild(div);
+        });
+
+        container.appendChild(grid);
+    }
+};