silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theseus 0.3.124 (cont'd): Shield panel gets its own close button

Browse source 
Shield is a right-side add-on panel (no `side` in the manifest). Unlike
left panels, right-side ones get no shared chrome from Theseus — the
panel-header with Maximize/Close only draws over left panels. So the
Shield panel had no visible close button and the user had to re-click
the Shield icon in the dock to toggle it off.

Added a × button in the add-on's own header that calls
window.silentmode.close() (sidebar-preload's close IPC). Minimal CSS
with a hover tint that matches the panel-header's own close.
This commit is contained in:
Local Dev 2026-10-27 22:02:23 +02:00
parent 1f394bb524
commit 1916d6adfe
1 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
bundled-addons/blocker/panel.html
View file

@ -17,6 +17,10 @@ body { background: var(--bg); color: var(--ink); font: 13px/1.5 system-ui, -appl
header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
header h1 { margin: 0; font-size: 14px; font-weight: 600; }
header .pill { margin-left: auto; }
header .close { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--mut); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
header .close:hover { background: rgba(255,255,255,.08); color: var(--ink); }
header .close svg { width: 14px; height: 14px; display: block; }
@media (prefers-color-scheme: light) { header .close:hover { background: rgba(0,0,0,.06); } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
background: rgba(139,152,169,.14); color: var(--mut); }
@ -52,7 +56,7 @@ h2 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
</style>
</head>
<body>
<header><span>🛡</span><h1>Shield</h1><span class="pill" id="pill"><span class="dot"></span><span id="pillText">…</span></span></header>
<header><span>🛡</span><h1>Shield</h1><span class="pill" id="pill"><span class="dot"></span><span id="pillText">…</span></span><button class="close" id="close" title="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button></header>
<div class="body">
<div class="card site" id="siteCard">
<div class="lbl" id="siteLbl">Open a site to see what Shield stops there.</div>
@ -116,6 +120,10 @@ h2 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
$("enabled").onclick = () => window.silentmode.invoke("set-enabled", { enabled: !(state && state.enabled) }).then(render);
$("toSettings").onclick = (e) => { e.preventDefault(); window.silentmode.invoke("open-settings"); };
// Close the Shield panel. Right-side add-on panels have no Theseus-drawn
// chrome (unlike left panels, which get the shared panel-header with a
// close button), so the panel ships its own.
$("close").onclick = () => { try { window.silentmode.close(); } catch (e) {} };
$("refresh").onclick = () => { $("refresh").disabled = true; window.silentmode.invoke("refresh-lists").then((r) => { if (r && !r.ok) $("updated").textContent = "Update failed: " + (r.error || "unknown"); }); };
window.silentmode.on("state", render);
window.silentmode.invoke("state").then(render);