jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mark the active panel with an accent line, not a tinted header

Browse Source 
Tinting the whole header strip of the focused panel was too much: the
strip changed color every time focus moved. Both panels now share one
neutral header strip, and the active panel is marked by a thin accent
line along its top edge (an inset shadow, so switching panels never
shifts the layout).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-10-05 09:59:40 +02:00
co-authored by Claude
parent 141d675bf7
commit 318760efa6
5 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture.md
+9 -7
View File
@@ -46,9 +46,10 @@ no-op functions, reassigned in `src/bun/index.ts` after everything exists:
`src/bun/windows.ts` — `buildPreload(mode, settings, ctx?)` injects
`__APP_PLATFORM`, `__APP_MODE` (`main|editor|manager|settings`), `__APP_CTX`
before any page script, plus the persisted theme attributes and interface
scale so the first paint is already right. `ui/src/main.ts` picks the root component from
`APP_MODE`; all four roots use selector `app-root` (index.html hosts only that
tag). `chromeOptions()` is the ONLY place the native frame is decided, spread by
scale so the first paint is already right. `ui/src/main.ts` picks the root
component from `APP_MODE`; all four roots use selector `app-root` (index.html
hosts only that tag). `chromeOptions()` is the ONLY place the native frame is
decided, spread by
the main window and `openSecondaryWindow`: macOS `hiddenInset` +
`trafficLightOffset {x:12,y:13}` (the UI renders an `h-10 pl-24` drag-region
header via `IS_MAC_CHROME`); other platforms keep the native titlebar and a
@@ -308,9 +309,10 @@ dark neutrals are a **warm gray family (hue 107)** anchored on `#1a1a19`
and cool surfaces clash. **Surface layers**, each its own shade: `--chrome`
(frame — tab/transfer/status bars, editor/manager header+footer strips, the
manager's connection sidebar), `--toolbar` (each file panel's header strip —
session strip, path bar, column headers — and the editor's search bar; the
ACTIVE panel's strip is `--toolbar-active`, a `color-mix` of `--primary` into
`--toolbar`, so it follows the accent), `--background` (file lists, editor
session strip, path bar, column headers — and the editor's search bar; both
panels share one neutral strip, and the ACTIVE panel is marked by a 0.125rem
`--primary` line along its top edge, an inset box-shadow on the session strip so
switching panels never shifts layout), `--background` (file lists, editor
text, forms; `--row-alt` stripes odd file rows, skipped on the cursor/selected
row so two `bg-*` utilities never fight) and `--card` (popovers, dialogs,
toasts). Dark climbs frame 0.165 < list 0.218 < header 0.265 < card 0.285;
@@ -318,7 +320,7 @@ light steps greys out from white content: frame 0.935 < header 0.965 < list =
card 1. **`--accent` is translucent** (6% zinc-900 light, 9% white dark):
hover/selected states sit on every layer, and an opaque hover vanishes on a
surface of its own lightness. The "darker" tone is true-black AMOLED: chrome,
background, toolbar (+active) and row-alt are all `#000` (the layers collapse
background, toolbar and row-alt are all `#000` (the layers collapse
on purpose), elevation survives only via `--card`/`--accent` (opaque there),
and `--border`/`--input` go to 16%/18% white because those lines then carry the
whole layout. Accent tones: one