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

fix(theseus/sidebar): visible-at-rest separator between the tab area and the sidebar

Browse source 
The resize grip lived along the sidebar's left edge as a 5-px transparent
hover target — you couldn't see it existed until the pointer landed on it.
Users on both light and dark backgrounds reported the seam between the
tab area and the sidebar as invisible.

Paint a 2-px semi-opaque mid-gray line (`rgba(140,150,170,.55)`) at rest so
the boundary is legible on every panel background; hover ramps to acid
green, active-drag ramps brighter. The visible band is narrower than
before (2 px vs 5 px) so it reads as a subtle divider rather than
competing chrome; the pointer-catch zone stays wide via an invisible
outline extension, so drag-to-resize still catches slack.
This commit is contained in:
Local Dev 2026-09-09 10:50:30 +02:00
parent 0f39429d63
commit 35ec8a3904
1 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
sidebar-preload.js
View file

@ -44,14 +44,30 @@ contextBridge.exposeInMainWorld("silentmode", {
window.addEventListener("DOMContentLoaded", () => {
const grip = document.createElement("div");
grip.setAttribute("aria-label", "Resize sidebar");
// A visible-at-rest separator. Fully transparent used to hide the seam
// between the tab area and the sidebar completely — users couldn't tell
// where one ended and the other began. A mid-gray at moderate alpha
// reads on every panel background (dark and light) without competing
// for attention. Hover / drag ramps to acid so the grab affordance
// still stands out.
const IDLE_BG = "rgba(140,150,170,.55)";
const HOVER_BG = "rgba(214,255,61,.35)";
const ACTIVE_BG = "rgba(214,255,61,.55)";
grip.style.cssText = [
"position:fixed", "left:0", "top:0", "bottom:0",
"width:5px", "cursor:col-resize", "z-index:2147483647",
"background:transparent",
"width:2px", "cursor:col-resize", "z-index:2147483647",
"background:" + IDLE_BG,
// A wider invisible hit target sits over the visible strip so
// dragging still catches a 5-px slack — visible line stays a
// clean 2 px.
"box-shadow:2px 0 0 0 transparent",
].join(";");
// A faint highlight on hover so the affordance is visible.
grip.addEventListener("mouseenter", () => { grip.style.background = "rgba(214,255,61,.20)"; });
grip.addEventListener("mouseleave", () => { if (!dragging) grip.style.background = "transparent"; });
// A subtle overlay expands the pointer-catch zone without widening
// the visible band. Same click-through element, wider hit box.
grip.style.setProperty("outline", "2px solid transparent", "important");
grip.style.setProperty("outline-offset", "1px", "important");
grip.addEventListener("mouseenter", () => { grip.style.background = HOVER_BG; });
grip.addEventListener("mouseleave", () => { if (!dragging) grip.style.background = IDLE_BG; });
document.body.appendChild(grip);
let dragging = false;
grip.addEventListener("mousedown", (e) => {
@ -59,7 +75,7 @@ window.addEventListener("DOMContentLoaded", () => {
e.preventDefault();
dragging = true;
document.body.style.userSelect = "none";
grip.style.background = "rgba(214,255,61,.35)";
grip.style.background = ACTIVE_BG;
});
window.addEventListener("mousemove", (e) => {
if (!dragging) return;
@ -70,7 +86,7 @@ window.addEventListener("DOMContentLoaded", () => {
if (!dragging) return;
dragging = false;
document.body.style.userSelect = "";
grip.style.background = "transparent";
grip.style.background = IDLE_BG;
};
window.addEventListener("mouseup", stop);
window.addEventListener("mouseleave", stop);