From 3323bc81c07d70e1588fc23cd3f4c35f44244d88 Mon Sep 17 00:00:00 2001 From: Yaojia Wang Date: Tue, 30 Jun 2026 12:03:30 +0200 Subject: [PATCH] polish(v0.6): put Sessions/Projects toggle on the filter row (kill whitespace) The toggle sat on its own dedicated row, leaving a large empty band above the project grid. On desktop (>=769px) float it top-right on the SAME row as the filter box / launcher header: panels fill from the top (inset 0), launcher-head reserves right padding for the pill. Mobile keeps the centred stacked toggle to avoid overlapping the full-width filter on narrow screens. Also reclaim the hidden key-bar's space on the home view (body.home-open #term { bottom: 0 }). CSS-only (style.css is served directly). Verified in-browser: toggle and filter share a row on Projects, no overlap with New/Manage on Sessions. --- docs/PROGRESS_LOG.md | 2 +- public/style.css | 32 +++++++++++++++++++++++++++++--- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/docs/PROGRESS_LOG.md b/docs/PROGRESS_LOG.md index f1804f6..81993df 100644 --- a/docs/PROGRESS_LOG.md +++ b/docs/PROGRESS_LOG.md @@ -151,7 +151,7 @@ - **状态**: `[x]` DONE。415 测试全绿 · 双 typecheck 干净 · `build:web` OK · 真浏览器验证通过。 - **反馈**(用户): ① Sessions/Projects 段控在 UI 上"有点别扭"(原为两个独立描边方块浮在顶部);② 首页(Sessions/Projects 视图)底部那排终端快捷键栏没必要显示。 - **修复**(纯前端,`public/style.css` + `public/tabs.ts`): ① `.home-seg` 重设计为 **iOS 风分段控件**——一个圆角"轨道"(`surface-2` 底 + 圆角 999px + 内边距)内含两个 pill 按钮,激活项填 Amber;`width:fit-content + margin:auto` 居中;去掉 first/last/only-child 圆角拼接;面板 `inset` 44→68px 适配新高度。② `TabApp.updateHomeView` 在显示首页时给 `document.body` 加 `home-open` 类,CSS `body.home-open #keybar{display:none}` 隐藏键栏;打开 tab(终端激活)即恢复。 -- **验证**: `npx tsc`(双)干净;`npx vitest run` 415/415;真浏览器:Projects 视图段控为圆角分段 pill(Projects 高亮)、键栏隐藏、83 卡片正常;开 tab 后键栏恢复。 +- **追加**(用户反馈"段控独占一行、空白太多"): 桌面端(`@media min-width:769px`)把段控 `position:absolute` 浮到**右上角**,与过滤框/启动器表头**同一行**;面板 `inset` 归 0(从顶部铺满),`.launcher-head` 留 240px 右内边距避开段控;移动端保持居中堆叠(防止与全宽过滤框重叠)。另:首页隐藏键栏时 `body.home-open #term{bottom:0}` 收回键栏占位。纯 CSS(`style.css` 直出,无需打包)。真浏览器实测:Projects 段控与过滤框同行(seg.top 56 / filter.top 62)、卡片在其下;Sessions 视图段控不与 New/Manage 重叠。 - **commit**: (本次提交) ### 2026-06-30 · v0.6 UX 修复 — 会话内无法返回 Projects 首页 diff --git a/public/style.css b/public/style.css index cb02309..3898fec 100644 --- a/public/style.css +++ b/public/style.css @@ -684,7 +684,7 @@ body { /* ── Launcher (home session chooser, shown when no tab is open) ──── */ .launcher { position: absolute; - inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */ + inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */ 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: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */ + inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */ overflow-y: auto; padding: 22px 18px 40px; box-sizing: border-box; @@ -1122,7 +1122,7 @@ body { * the active one filled (iOS-style). Centred with fit-content + margin auto. */ .home-seg { width: fit-content; - margin: 14px auto 18px; + margin: 10px auto 12px; display: flex; gap: 3px; padding: 3px; @@ -1164,3 +1164,29 @@ body { body.home-open #keybar { display: none; } +/* Home chooser hides the key-bar, so reclaim its reserved space at the bottom. */ +body.home-open #term { + bottom: 0; +} + +/* Desktop: float the Sessions/Projects toggle top-right, on the SAME row as the + * panel's filter/header — instead of a dedicated row that left a big empty band. + * The panels fill from the top; the launcher header reserves room for the pill. + * (Mobile keeps the stacked, centred toggle — see .home-seg above — to avoid + * overlapping the full-width filter box on narrow screens.) */ +@media (min-width: 769px) { + .home-seg { + position: absolute; + top: 16px; + right: 20px; + margin: 0; + z-index: 6; + } + .launcher, + .proj-panel { + inset: 0; + } + .launcher-head { + padding-right: 240px; /* clear the absolutely-positioned .home-seg */ + } +}