tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-09-02 22:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(accounts-ui): simplify left action column hierarchy

Browse Source
This commit is contained in:
Tam Nhu Tran
2026-02-26 21:15:05 +07:00
parent cfdad81bee
commit 7fccb1843d
1 changed files with 125 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/accounts.tsx
+125 -120
View File
@@ -75,142 +75,147 @@ export function AccountsPage() {
<div className="p-4 space-y-3"> <div className="p-4 space-y-3">
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm">Immediate Actions</CardTitle> <CardTitle className="text-sm">Action Center</CardTitle>
<CardDescription>
Primary actions plus migration status in one place.
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-3">
<Button <div className="space-y-2">
size="sm" <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
className="w-full justify-start" Primary Actions
onClick={() => setCreateDialogOpen(true)} </p>
> <Button
<Plus className="w-4 h-4 mr-2" /> size="sm"
Create Account className="w-full justify-start"
</Button> onClick={() => setCreateDialogOpen(true)}
<Button >
size="sm" <Plus className="w-4 h-4 mr-2" />
className="w-full justify-start" Create Account
onClick={handleOpenClaudePoolAuth} </Button>
> <Button
<Zap className="w-4 h-4 mr-2" /> size="sm"
Authenticate Claude in Pool className="w-full justify-start"
</Button> onClick={handleOpenClaudePoolAuth}
<Button >
variant="outline" <Zap className="w-4 h-4 mr-2" />
size="sm" Authenticate Claude in Pool
className="w-full justify-start" </Button>
onClick={handleOpenClaudePool} <Button
> variant="outline"
Open Claude Pool Settings size="sm"
<ArrowRight className="w-4 h-4 ml-auto" /> className="w-full justify-start"
</Button> onClick={handleOpenClaudePool}
<Button >
variant="outline" Open Claude Pool Settings
size="sm" <ArrowRight className="w-4 h-4 ml-auto" />
className="w-full justify-start" </Button>
onClick={handleConfirmLegacy} </div>
disabled={confirmLegacyMutation.isPending || legacyTargetCount === 0}
> <div className="border-t pt-3 space-y-2">
{confirmLegacyMutation.isPending <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
? 'Confirming Legacy Policies...' Legacy Migration
: `Confirm Legacy Policies (${legacyTargetCount})`} </p>
</Button> {hasLegacyFollowUp ? (
<div className="rounded-md border border-amber-500/50 bg-amber-500/10 p-3 space-y-3">
<div className="flex items-start gap-2">
<AlertTriangle className="h-4 w-4 mt-0.5 text-amber-700 dark:text-amber-400 shrink-0" />
<div className="space-y-1 text-xs">
{legacyContextCount > 0 && (
<p className="text-amber-800 dark:text-amber-300">
{legacyContextCount} account
{legacyContextCount > 1 ? 's still need' : ' still needs'}{' '}
first-time mode confirmation.
</p>
)}
{legacyContinuityCount > 0 && (
<p className="text-amber-800 dark:text-amber-300">
{legacyContinuityCount} shared account
{legacyContinuityCount > 1 ? 's remain' : ' remains'} on standard
legacy continuity depth.
</p>
)}
</div>
</div>
<Button
variant="secondary"
size="sm"
className="w-full justify-start"
onClick={handleConfirmLegacy}
disabled={confirmLegacyMutation.isPending || legacyTargetCount === 0}
>
{confirmLegacyMutation.isPending
? 'Confirming Legacy Policies...'
: `Confirm Legacy Policies (${legacyTargetCount})`}
</Button>
</div>
) : (
<div className="rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
No legacy follow-up pending.
</div>
)}
</div>
</CardContent> </CardContent>
</Card> </Card>
{hasLegacyFollowUp && ( <Card>
<section className="space-y-2"> <CardHeader className="pb-2">
<p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground"> <CardTitle className="text-sm">Guide & Commands</CardTitle>
Migration Follow-up <CardDescription>Continuity modes and CLI shortcuts.</CardDescription>
</p> </CardHeader>
<div className="rounded-md border border-amber-500/50 bg-amber-500/10 p-3 space-y-3"> <CardContent className="space-y-3">
<div className="flex items-start gap-2"> <Collapsible open={guideOpen} onOpenChange={setGuideOpen}>
<AlertTriangle className="h-4 w-4 mt-0.5 text-amber-700 dark:text-amber-400 shrink-0" />
<div className="space-y-1 text-xs">
{legacyContextCount > 0 && (
<p className="text-amber-800 dark:text-amber-300">
{legacyContextCount} account
{legacyContextCount > 1 ? 's still need' : ' still needs'} first-time
mode confirmation.
</p>
)}
{legacyContinuityCount > 0 && (
<p className="text-amber-800 dark:text-amber-300">
{legacyContinuityCount} shared account
{legacyContinuityCount > 1 ? 's remain' : ' remains'} on standard legacy
continuity depth.
</p>
)}
</div>
</div>
</div>
</section>
)}
{!hasLegacyFollowUp && (
<div className="rounded-md border bg-background px-3 py-2 text-xs text-muted-foreground">
No legacy follow-up pending.
</div>
)}
<Collapsible open={guideOpen} onOpenChange={setGuideOpen}>
<Card>
<CardHeader className="pb-2">
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<Button variant="ghost" className="h-auto w-full justify-between px-0 py-0"> <Button variant="ghost" className="h-auto w-full justify-between px-0 py-0">
<div className="text-left"> <div className="text-left">
<CardTitle className="text-sm">Continuity Guide</CardTitle> <p className="text-sm font-semibold">Continuity Guide</p>
<CardDescription className="mt-1"> <p className="mt-1 text-xs text-muted-foreground">
Expand only when needed. Expand only when needed.
</CardDescription> </p>
</div> </div>
<ChevronDown <ChevronDown
className={cn('h-4 w-4 transition-transform', guideOpen && 'rotate-180')} className={cn('h-4 w-4 transition-transform', guideOpen && 'rotate-180')}
/> />
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
</CardHeader> <CollapsibleContent className="pt-2">
<CollapsibleContent> <div className="space-y-2 text-xs text-muted-foreground">
<CardContent className="space-y-3 text-xs text-muted-foreground"> <div className="rounded-md border p-2.5">
<div className="rounded-md border p-2.5"> <p className="font-semibold text-foreground">Shared Standard</p>
<p className="font-semibold text-foreground">Shared Standard</p> <p className="mt-1">
<p className="mt-1"> Project workspace sync only. Best default for most teams.
Project workspace sync only. Best default for most teams. </p>
</p> </div>
<div className="rounded-md border p-2.5">
<p className="font-semibold text-foreground">Shared Deeper</p>
<p className="mt-1">
Adds <code>session-env</code>, <code>file-history</code>,{' '}
<code>shell-snapshots</code>, <code>todos</code>.
</p>
</div>
<div className="rounded-md border p-2.5">
<p className="font-semibold text-foreground">Isolated</p>
<p className="mt-1">No link. Best for strict separation.</p>
</div>
</div> </div>
<div className="rounded-md border p-2.5"> </CollapsibleContent>
<p className="font-semibold text-foreground">Shared Deeper</p> </Collapsible>
<p className="mt-1">
Adds <code>session-env</code>, <code>file-history</code>,{' '}
<code>shell-snapshots</code>, <code>todos</code>.
</p>
</div>
<div className="rounded-md border p-2.5">
<p className="font-semibold text-foreground">Isolated</p>
<p className="mt-1">No link. Best for strict separation.</p>
</div>
</CardContent>
</CollapsibleContent>
</Card>
</Collapsible>
<Card> <div className="space-y-2">
<CardHeader className="pb-2"> <p className="text-xs font-semibold">Quick Commands</p>
<CardTitle className="text-sm">Quick Commands</CardTitle> <div className="rounded-md border bg-background px-2 py-2 font-mono text-[11px] flex items-start gap-2">
<CardDescription>Copy and run in terminal.</CardDescription> <span className="flex-1 break-all">
</CardHeader> ccs auth create work --context-group sprint-a --deeper-continuity
<CardContent className="space-y-2"> </span>
<div className="rounded-md border bg-background px-2 py-2 font-mono text-[11px] flex items-start gap-2"> <CopyButton
<span className="flex-1 break-all"> value="ccs auth create work --context-group sprint-a --deeper-continuity"
ccs auth create work --context-group sprint-a --deeper-continuity size="icon"
</span> />
<CopyButton </div>
value="ccs auth create work --context-group sprint-a --deeper-continuity" <div className="rounded-md border bg-background px-2 py-2 font-mono text-[11px] flex items-start gap-2">
size="icon" <span className="flex-1 break-all">ccs cliproxy auth claude</span>
/> <CopyButton value="ccs cliproxy auth claude" size="icon" />
</div> </div>
<div className="rounded-md border bg-background px-2 py-2 font-mono text-[11px] flex items-start gap-2">
<span className="flex-1 break-all">ccs cliproxy auth claude</span>
<CopyButton value="ccs cliproxy auth claude" size="icon" />
</div> </div>
</CardContent> </CardContent>
</Card> </Card>