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
docs/gotchas.md
+5 -4
View File
@@ -60,12 +60,13 @@ touching the adjacent code.
- **A new surface token needs an AMOLED line, or AMOLED stops being
all-black.** The two `[data-dark-tone='darker']` blocks re-declare every
surface (`--chrome`, `--toolbar`, `--toolbar-active`, `--row-alt`, …) as
`#000`; a token added only to the dark blocks shows through in AMOLED.
surface (`--chrome`, `--toolbar`, `--row-alt`, …) as `#000`; a token added
only to the dark blocks shows through in AMOLED.
- **Never declare one token in both the AMOLED blocks and the accent dark
formula blocks.** Both are (0,3,0), so source order decides and the later
accent block wins. That is why `--toolbar-active` lives in the base theme
blocks — its `var(--primary)` resolves per accent on `:root` anyway.
accent block wins. A token that must follow the accent belongs in the base
theme blocks instead — a `var(--primary)` there still resolves per accent on
`:root`.
- **Hover/selected color is a translucent overlay (`--accent`).** An opaque
hover vanishes on a surface of its own lightness — light's old 0.967 hover
on the 0.965 header strip did exactly that. Keep `--accent` alpha-based when
ui/src/app/skins/shadlike/file-panel/file-panel.html
+6 -4
View File
@@ -1,5 +1,8 @@
<!-- session strip -->
<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1" [class]="headerSurface()">
<div
class="relative flex items-center gap-1.5 border-b border-border bg-toolbar px-2 py-1"
[style.box-shadow]="activeMarker()"
>
<button
(click)="toggleMenu()"
class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
@@ -158,7 +161,7 @@
</div>
<!-- path bar -->
<div class="flex items-center gap-1 border-b border-border px-2 py-1.5" [class]="headerSurface()">
<div class="flex items-center gap-1 border-b border-border bg-toolbar px-2 py-1.5">
<button
(click)="panel().up()"
[disabled]="blocked()"
@@ -195,8 +198,7 @@
<div
(contextmenu)="headerContextMenu($event)"
[style.grid-template-columns]="gridTemplate()"
class="grid border-b border-border text-[0.6875rem] font-medium text-muted-foreground"
[class]="headerSurface()"
class="grid border-b border-border bg-toolbar text-[0.6875rem] font-medium text-muted-foreground"
>
<button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
{{ i18n.t('columns.name') }} {{ sortIndicator('name') }}
ui/src/app/skins/shadlike/file-panel/file-panel.ts
+5 -3
View File
@@ -55,9 +55,11 @@ export class FilePanel {
private readonly rpc = inject(RpcService);
readonly panel = computed(() => this.panels.get(this.side()));
readonly isActive = computed(() => this.panels.activeSide() === this.side());
/** The header strip's surface (session strip, path bar, column headers):
* the active panel's carries the accent tint. */
readonly headerSurface = computed(() => (this.isActive() ? 'bg-toolbar-active' : 'bg-toolbar'));
/** The active panel's marker: an accent line along its top edge. Inset, so
* switching panels never shifts the layout. */
readonly activeMarker = computed(() =>
this.isActive() ? 'inset 0 0.125rem 0 var(--primary)' : null,
);
readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
/** Input is ignored while the panel is connecting or a listing is in flight. */
readonly blocked = computed(() => this.panel().busy());
ui/src/styles.css
+2 -9
View File
@@ -19,8 +19,6 @@
--background: oklch(1 0 0);
--chrome: oklch(0.935 0.002 286.375);
--toolbar: oklch(0.965 0.001 286.375);
/* the active panel's header strip: a whisper of the accent (graphite: neutral) */
--toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
--row-alt: oklch(0.978 0.001 286.375);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
@@ -60,7 +58,6 @@
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
/* above --toolbar, so a popover never reads darker than the strip it covers */
@@ -93,7 +90,6 @@
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.285 0.002 107);
@@ -127,8 +123,8 @@
#000 (OLED pixels actually off). Elevation survives only through --card and
--accent; --border/--input are raised to 16%/18% because on pure black those
lines are the only thing defining panes, bars and rows. The surface layers
(--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
one flat black on purpose, so every NEW surface token needs a line here.
(--toolbar, --row-alt) collapse to black too: AMOLED stays one flat black on
purpose, so every NEW surface token needs a line here.
Duplicated for forced-dark and system-dark like the token blocks above — the
extra attribute outranks them. Never declare a token both here and in the
accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
@@ -136,7 +132,6 @@
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--toolbar-active: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
@@ -151,7 +146,6 @@
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--toolbar-active: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
@@ -167,7 +161,6 @@
--color-background: var(--background);
--color-chrome: var(--chrome);
--color-toolbar: var(--toolbar);
--color-toolbar-active: var(--toolbar-active);
--color-row-alt: var(--row-alt);
--color-foreground: var(--foreground);
--color-card: var(--card);