Panel app-header system + Settings hero (P1, capture-verified)
The panel app header now matches WorkClaw's measured pattern (dark captures
agent-settings / files-explorer / edit-profile):
- App TOP screen: the header lives on the app surface (sticky), showing the
app name (text-lg font-semibold) + a size-7 rounded-full close-X → home,
at px-5 pt-4 pb-3 — replacing the old px-8 pt-6 chevron+small-title. The
home screen keeps its dot + "{agent}'s Computer" header.
- Sub-screens (AppShell SubViewHeader): back-chevron PILL + text-lg
font-semibold title at px-5 pt-4 pb-3 (was text-xs px-3 pt-3 pb-2).
- Settings hero: 96px squircle avatar + text-xl name + text-sm role (matches
the capture; reviewer's 126px was wrong). New Avatar `settings` size.
p3-panel E2E updated (home nav is now the "Close" button). typecheck/lint/
86 unit/31 E2E/6 visual all green; no visual baseline change.
Known follow-up (P2): Settings/Files sub-screens still stack the top header +
the back-header (pre-existing) — to be unified per-app.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
db3dcff932
commit
b61073ce05
@@ -150,10 +150,10 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
|
||||
const agentsMode = settings.data?.access_policy.agents.mode ?? "any";
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-3">
|
||||
<div className="flex flex-col items-center gap-1 py-2">
|
||||
<Avatar name={live.name} accent={live.accent} size="lg" shape="squircle" />
|
||||
<p className="text-sm font-medium">{live.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{live.job_title}</p>
|
||||
<div className="flex flex-col items-center px-6 pt-7 pb-5">
|
||||
<Avatar name={live.name} accent={live.accent} size="settings" shape="squircle" />
|
||||
<h1 className="mt-3 text-xl font-semibold tracking-tight">{live.name}</h1>
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">{live.job_title}</p>
|
||||
</div>
|
||||
<div className="divide-y divide-divider-subtle overflow-hidden rounded-xl bg-surface-warm text-xs">
|
||||
<div className="flex justify-between px-3 py-2.5">
|
||||
|
||||
Reference in New Issue
Block a user