kai/web-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish(v0.6): redesign Sessions/Projects toggle + hide keybar on home

Browse Source 
- Segmented control: replace the two free-standing bordered boxes with a
  single rounded track holding two pill buttons (iOS-style), active segment
  filled Amber; centred via fit-content + margin auto. Panel top-offset 44→68px.
- Hide the bottom key-bar on the home chooser (it only targets an active
  terminal): updateHomeView toggles body.home-open; CSS hides #keybar.

Frontend-only. 415 tests green; both typechecks clean; verified in-browser
(toggle pill renders, keybar hidden on home, reappears when a tab opens).
This commit is contained in:
Yaojia Wang
2026-06-30 11:51:47 +02:00
parent 985ff8a178
commit 32fb4b09b1
3 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/style.css
View File

@@ -684,7 +684,7 @@ body {
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
.launcher {
position: absolute;
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
overflow-y: auto;
padding: 22px 18px 40px;
box-sizing: border-box;
@@ -898,7 +898,7 @@ body {
/* Panel wrapper (same host as .launcher; toggled via display) */
.proj-panel {
position: absolute;
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
overflow-y: auto;
padding: 22px 18px 40px;
box-sizing: border-box;
@@ -1118,46 +1118,49 @@ body {
/* ── Home segmented control (P6 builds the DOM; styles defined here per spec) */
/* Horizontal pill container, centered above the home grid */
/* Segmented control: a single rounded "track" holding two pill buttons, with
* the active one filled (iOS-style). Centred with fit-content + margin auto. */
.home-seg {
width: fit-content;
margin: 14px auto 18px;
display: flex;
justify-content: center;
margin-bottom: 20px;
gap: 3px;
padding: 3px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
}
/* Inactive segment */
.home-seg-btn {
background: var(--surface-2);
border: 1px solid var(--border-strong);
background: transparent;
border: none;
color: var(--text-dim);
cursor: pointer;
font: inherit;
font-size: 13px;
padding: 8px 20px;
font-weight: 500;
padding: 6px 22px;
border-radius: 999px;
transition: background 0.12s ease, color 0.12s ease;
}
.home-seg-btn:first-child {
border-radius: 20px 0 0 20px;
}
.home-seg-btn:last-child {
border-radius: 0 20px 20px 0;
border-left: none;
}
.home-seg-btn:only-child {
border-radius: 20px;
}
.home-seg-btn:not(.active):hover {
background: var(--surface-3);
color: var(--text);
background: var(--surface-3);
}
/* Active segment — Amber accent; text uses --on-accent for contrast */
.home-seg-btn.active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
font-weight: 600;
}
.home-seg-btn.active:hover {
background: var(--accent-2);
border-color: var(--accent-2);
}
/* On the home chooser (Sessions/Projects), there is no active terminal, so the
* bottom key-bar is just noise — hide it. Toggled by TabApp.updateHomeView(). */
body.home-open #keybar {
display: none;
}