osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings card: WorkClaw structure (P2)

Browse Source 
Match the captured card (rec-1): rounded-xl mx-6 ring-1 bg-neutral-900 with
not-last:border-b rows (was divide-y bg-surface-warm); row label is the
prominent text (flex-1 text-sm font-medium) and the value is muted text-xs
(previously reversed). Body uses gap-5 with hero px-6 / card+access mx-6
(was a uniform p-3). Verified by rendering the panel against the capture.

86 unit + 6 panel E2E green.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-12 21:48:25 -05:00
co-authored by Claude Opus 4.8
parent b61073ce05
commit 95df0f3a98
1 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/computer/apps/SettingsApp.tsx
+16 -10
View File
@@ -149,33 +149,39 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
const agentsMode = settings.data?.access_policy.agents.mode ?? "any"; const agentsMode = settings.data?.access_policy.agents.mode ?? "any";
return ( return (
<div className="flex flex-col gap-3 p-3"> <div className="flex flex-col gap-5 pb-3">
<div className="flex flex-col items-center px-6 pt-7 pb-5"> <div className="flex flex-col items-center px-6 pt-7 pb-5">
<Avatar name={live.name} accent={live.accent} size="settings" shape="squircle" /> <Avatar name={live.name} accent={live.accent} size="settings" shape="squircle" />
<h1 className="mt-3 text-xl font-semibold tracking-tight">{live.name}</h1> <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> <p className="mt-0.5 text-sm text-muted-foreground">{live.job_title}</p>
</div> </div>
<div className="divide-y divide-divider-subtle overflow-hidden rounded-xl bg-surface-warm text-xs"> <div className="mx-6 overflow-hidden rounded-xl bg-neutral-900 ring-1 ring-neutral-800/70">
<div className="flex justify-between px-3 py-2.5"> <div className="flex w-full items-center gap-3 border-neutral-800/70 px-3 py-2.5 not-last:border-b">
<span className="text-muted-foreground">Managed by</span> <span className="flex-1 truncate text-sm font-medium">Managed by</span>
<span>{settings.data?.managed_by_name ?? "…"}</span> <span className="shrink-0 text-xs text-muted-foreground">
{settings.data?.managed_by_name ?? "…"}
</span>
</div> </div>
<button <button
type="button" type="button"
onClick={() => setScreen("edit")} onClick={() => setScreen("edit")}
className="flex w-full items-center justify-between px-3 py-2.5 transition-colors hover:bg-neutral-800/40" className="flex w-full items-center gap-3 border-neutral-800/70 px-3 py-2.5 text-left transition-colors not-last:border-b hover:bg-neutral-800/40"
> >
Edit profile <span className="flex-1 truncate text-sm font-medium">Edit profile</span>
<ChevronRight aria-hidden size={14} className="text-muted-foreground" /> <ChevronRight
aria-hidden
size={16}
className="shrink-0 text-muted-foreground"
/>
</button> </button>
</div> </div>
<p className="pt-1 text-[11px] font-medium uppercase tracking-wider text-subtle-foreground"> <p className="px-6 text-[11px] font-medium uppercase tracking-wider text-subtle-foreground">
Who else has access Who else has access
</p> </p>
<div <div
role="radiogroup" role="radiogroup"
aria-label="Other Claws" aria-label="Other Claws"
className="rounded-xl bg-surface-warm p-2 text-xs" className="mx-6 rounded-xl bg-neutral-900 p-2 text-xs ring-1 ring-neutral-800/70"
> >
<p className="px-1 pb-1 text-muted-foreground">Other Claws</p> <p className="px-1 pb-1 text-muted-foreground">Other Claws</p>
{(["any", "specific"] as const).map((mode) => ( {(["any", "specific"] as const).map((mode) => (