diff --git a/chrome.html b/chrome.html index 9431ea3..65f4c9b 100644 --- a/chrome.html +++ b/chrome.html @@ -102,6 +102,20 @@ .ic.active { background: rgba(214,255,61,.12); color: var(--acid); } .ic:active { background: var(--line); } .ic:disabled { opacity: .28; cursor: default; background: transparent; } + /* One toolbar button per registered addon sidebar-panel, plus a static + placeholder for the built-in wallet before it lands. Each button + shows the panel's icon (usually a single emoji from the manifest); + click toggles the sidebar open on that panel, or collapses if it + was already the active panel. */ + .extdock { display: flex; gap: 2px; align-items: center; padding-left: 4px; margin-left: 2px; + border-left: 1px solid var(--line); } + .extbtn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; + cursor: pointer; border: none; background: transparent; padding: 0; + font-size: 15px; line-height: 1; color: var(--mut); } + .extbtn:hover { background: var(--line2); color: var(--ink); } + .extbtn.active { background: rgba(214,255,61,.12); color: var(--acid); box-shadow: inset 0 -2px 0 var(--acid); } + .extbtn.soon { opacity: .45; cursor: help; } + .extbtn.soon:hover { opacity: .7; background: var(--line2); } /* downloads button — a small badge sits over the icon when there's activity */ .dlbtn { position: relative; } .dlbtn.spin::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; @@ -278,9 +292,10 @@ - + @@ -408,18 +423,43 @@ T.getDownloads && T.getDownloads().then(renderDownloads); T.onDownloads && T.onDownloads(renderDownloads); - // ---- add-on sidebar toggle ---- - // Only surfaces the button when at least one add-on has registered a - // sidebar panel; a fresh install with no add-ons keeps the toolbar clean. - const sideBtn = $("sidebarbtn"); + // ---- extension dock ---- + // One toolbar button per registered addon sidebar-panel, plus a static + // "coming soon" placeholder for Aegis (the built-in BCH wallet, in + // progress). Click a live button → open the sidebar on that panel; if + // the sidebar was already open on that panel, collapse it. + const extDock = $("extdock"); + const extButtons = $("extbuttons"); + let lastPanels = [], sidebarOpen = false, activePanelId = null; function renderSidebarState(d) { if (!d) return; - const has = Array.isArray(d.panels) && d.panels.length > 0; - sideBtn.hidden = !has; - sideBtn.classList.toggle("active", !!d.visible); - if (has && d.panels[0]) sideBtn.title = "Toggle " + d.panels[0].title; + lastPanels = Array.isArray(d.panels) ? d.panels : []; + sidebarOpen = !!d.visible; + activePanelId = d.active || null; + // Dock is always visible when either at least one addon panel exists + // OR the Aegis placeholder is meant to show. Aegis is always shown + // for now, so the dock is always visible. + extDock.hidden = false; + extButtons.innerHTML = lastPanels.map((p) => { + const isActive = sidebarOpen && p.panelId === activePanelId; + const icon = String(p.icon || "•"); + return `