Skip to content

Commit 238b679

Browse files
ChenNimaclaude
ChenNima
and
claude
authored
fix: replace checkbox role display with badges on settings page (#54)
Agent roles in API Key cards were shown as checkboxes, misleading users into thinking they were interactive. Now displays only assigned roles as colored badges (blue=Developer, orange=PM, red=Admin). Also removes the red card border/background for admin agents since the red badge suffices. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 5fff5ba commit 238b679

2 files changed

Lines changed: 59 additions & 182 deletions

File tree

‎docs/design.pen‎

Lines changed: 38 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -54677,74 +54677,49 @@
5467754677
},
5467854678
{
5467954679
"type": "frame",
54680-
"id": "G7q7g",
54680+
"id": "9oziV",
5468154681
"name": "key1Role1",
54682-
"gap": 8,
54682+
"fill": "#E3F2FD",
54683+
"cornerRadius": 12,
54684+
"padding": [
54685+
4,
54686+
10
54687+
],
5468354688
"alignItems": "center",
5468454689
"children": [
54685-
{
54686-
"type": "frame",
54687-
"id": "mGGe3",
54688-
"name": "key1Check1",
54689-
"width": 18,
54690-
"height": 18,
54691-
"fill": "#C67A52",
54692-
"cornerRadius": 4,
54693-
"justifyContent": "center",
54694-
"alignItems": "center",
54695-
"children": [
54696-
{
54697-
"type": "icon_font",
54698-
"id": "HrZDh",
54699-
"name": "key1Check1Icon",
54700-
"width": 12,
54701-
"height": 12,
54702-
"iconFontName": "check",
54703-
"iconFontFamily": "lucide",
54704-
"fill": "#FFFFFF"
54705-
}
54706-
]
54707-
},
5470854690
{
5470954691
"type": "text",
54710-
"id": "bffKc",
54711-
"name": "key1Role1Text",
54712-
"fill": "#2C2C2C",
54692+
"id": "4POWP",
54693+
"name": "badge1text",
54694+
"fill": "#1976D2",
5471354695
"content": "Developer Agent",
5471454696
"fontFamily": "IBM Plex Sans",
54715-
"fontSize": 12,
54716-
"fontWeight": "normal"
54697+
"fontSize": 11,
54698+
"fontWeight": "500"
5471754699
}
5471854700
]
5471954701
},
5472054702
{
5472154703
"type": "frame",
54722-
"id": "qPBMP",
54723-
"name": "key1Role2",
54724-
"gap": 8,
54704+
"id": "NJBJH",
54705+
"name": "key1RoleAdmin",
54706+
"fill": "#FDEDED",
54707+
"cornerRadius": 12,
54708+
"padding": [
54709+
4,
54710+
10
54711+
],
5472554712
"alignItems": "center",
5472654713
"children": [
54727-
{
54728-
"type": "frame",
54729-
"id": "sJDh8",
54730-
"name": "key1Check2",
54731-
"width": 18,
54732-
"height": 18,
54733-
"cornerRadius": 4,
54734-
"stroke": {
54735-
"thickness": 2,
54736-
"fill": "#E5E0D8"
54737-
}
54738-
},
5473954714
{
5474054715
"type": "text",
54741-
"id": "XMp0w",
54742-
"name": "key1Role2Text",
54743-
"fill": "#6B6B6B",
54744-
"content": "PM Agent",
54716+
"id": "ZQPmF",
54717+
"name": "adminText",
54718+
"fill": "#D32F2F",
54719+
"content": "Admin Agent",
5474554720
"fontFamily": "IBM Plex Sans",
54746-
"fontSize": 12,
54747-
"fontWeight": "normal"
54721+
"fontSize": 11,
54722+
"fontWeight": "500"
5474854723
}
5474954724
]
5475054725
}
@@ -55216,74 +55191,25 @@
5521655191
},
5521755192
{
5521855193
"type": "frame",
55219-
"id": "XoLed",
55220-
"name": "key2Role1",
55221-
"gap": 8,
55222-
"alignItems": "center",
55223-
"children": [
55224-
{
55225-
"type": "frame",
55226-
"id": "JdMOf",
55227-
"name": "key2Check1",
55228-
"width": 18,
55229-
"height": 18,
55230-
"cornerRadius": 4,
55231-
"stroke": {
55232-
"thickness": 2,
55233-
"fill": "#E5E0D8"
55234-
}
55235-
},
55236-
{
55237-
"type": "text",
55238-
"id": "HrUq2",
55239-
"name": "key2Role1Text",
55240-
"fill": "#6B6B6B",
55241-
"content": "Developer Agent",
55242-
"fontFamily": "IBM Plex Sans",
55243-
"fontSize": 12,
55244-
"fontWeight": "normal"
55245-
}
55246-
]
55247-
},
55248-
{
55249-
"type": "frame",
55250-
"id": "KET8w",
55194+
"id": "kNiK9",
5525155195
"name": "key2Role2",
55252-
"gap": 8,
55196+
"fill": "#FFF3E0",
55197+
"cornerRadius": 12,
55198+
"padding": [
55199+
4,
55200+
10
55201+
],
5525355202
"alignItems": "center",
5525455203
"children": [
55255-
{
55256-
"type": "frame",
55257-
"id": "bz52d",
55258-
"name": "key2Check2",
55259-
"width": 18,
55260-
"height": 18,
55261-
"fill": "#C67A52",
55262-
"cornerRadius": 4,
55263-
"justifyContent": "center",
55264-
"alignItems": "center",
55265-
"children": [
55266-
{
55267-
"type": "icon_font",
55268-
"id": "W8Pcl",
55269-
"name": "key2Check2Icon",
55270-
"width": 12,
55271-
"height": 12,
55272-
"iconFontName": "check",
55273-
"iconFontFamily": "lucide",
55274-
"fill": "#FFFFFF"
55275-
}
55276-
]
55277-
},
5527855204
{
5527955205
"type": "text",
55280-
"id": "kq5HF",
55281-
"name": "key2Role2Text",
55282-
"fill": "#2C2C2C",
55206+
"id": "d0LhI",
55207+
"name": "badge4text",
55208+
"fill": "#E65100",
5528355209
"content": "PM Agent",
5528455210
"fontFamily": "IBM Plex Sans",
55285-
"fontSize": 12,
55286-
"fontWeight": "normal"
55211+
"fontSize": 11,
55212+
"fontWeight": "500"
5528755213
}
5528855214
]
5528955215
}

‎src/app/(dashboard)/settings/page.tsx‎

Lines changed: 21 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -400,40 +400,28 @@ export default function SettingsPage() {
400400
</div>
401401
) : (
402402
<div className="space-y-3">
403-
{apiKeys.map((key) => {
404-
const isAdmin = key.roles.includes("admin_agent");
405-
return (
403+
{apiKeys.map((key) => (
406404
<div
407405
key={key.uuid}
408-
className={`rounded-xl border p-5 ${
409-
isAdmin
410-
? "border-red-300 bg-red-50 dark:border-red-800 dark:bg-red-950/50"
411-
: "border-border bg-card"
412-
}`}
406+
className="rounded-xl border border-border bg-card p-5"
413407
>
414408
{/* Header Row */}
415409
<div className="flex items-center justify-between">
416410
<div className="flex items-center gap-3">
417411
<div
418412
className={`flex h-9 w-9 items-center justify-center rounded-lg ${
419-
isAdmin
420-
? "bg-red-100 dark:bg-red-900"
421-
: key.roles.includes("developer_agent")
422-
? "bg-green-100"
423-
: "bg-primary/10"
413+
key.roles.includes("developer_agent")
414+
? "bg-green-100"
415+
: "bg-primary/10"
424416
}`}
425417
>
426-
{isAdmin ? (
427-
<ShieldAlert className="h-[18px] w-[18px] text-red-600 dark:text-red-400" />
428-
) : (
429418
<Key
430419
className={`h-[18px] w-[18px] ${
431420
key.roles.includes("developer_agent")
432421
? "text-green-600"
433422
: "text-primary"
434423
}`}
435424
/>
436-
)}
437425
</div>
438426
<div>
439427
<div className="text-sm font-medium text-foreground">
@@ -469,58 +457,21 @@ export default function SettingsPage() {
469457
<div className="mt-4 flex items-center gap-4">
470458
<span className="text-xs text-muted-foreground">{t("settings.roles")}</span>
471459
<div className="flex items-center gap-2">
472-
<div
473-
className={`flex h-[18px] w-[18px] items-center justify-center rounded ${
474-
key.roles.includes("developer_agent")
475-
? "bg-primary"
476-
: "border-2 border-border"
477-
}`}
478-
>
479-
{key.roles.includes("developer_agent") && (
480-
<Check className="h-3 w-3 text-primary-foreground" strokeWidth={3} />
481-
)}
482-
</div>
483-
<span
484-
className={`text-xs ${key.roles.includes("developer_agent") ? "text-foreground" : "text-muted-foreground"}`}
485-
>
486-
{t("settings.developerAgent")}
487-
</span>
488-
</div>
489-
<div className="flex items-center gap-2">
490-
<div
491-
className={`flex h-[18px] w-[18px] items-center justify-center rounded ${
492-
key.roles.includes("pm_agent")
493-
? "bg-primary"
494-
: "border-2 border-border"
495-
}`}
496-
>
497-
{key.roles.includes("pm_agent") && (
498-
<Check className="h-3 w-3 text-primary-foreground" strokeWidth={3} />
499-
)}
500-
</div>
501-
<span
502-
className={`text-xs ${key.roles.includes("pm_agent") ? "text-foreground" : "text-muted-foreground"}`}
503-
>
504-
{t("settings.pmAgent")}
505-
</span>
506-
</div>
507-
<div className="flex items-center gap-2">
508-
<div
509-
className={`flex h-[18px] w-[18px] items-center justify-center rounded ${
510-
key.roles.includes("admin_agent")
511-
? "bg-red-500"
512-
: "border-2 border-border"
513-
}`}
514-
>
515-
{key.roles.includes("admin_agent") && (
516-
<Check className="h-3 w-3 text-white" strokeWidth={3} />
517-
)}
518-
</div>
519-
<span
520-
className={`text-xs ${key.roles.includes("admin_agent") ? "font-medium text-red-600 dark:text-red-400" : "text-muted-foreground"}`}
521-
>
522-
{t("settings.adminAgent")}
523-
</span>
460+
{key.roles.includes("developer_agent") && (
461+
<Badge variant="secondary" className="bg-blue-50 text-blue-700 hover:bg-blue-50 dark:bg-blue-950 dark:text-blue-300">
462+
{t("settings.developerAgent")}
463+
</Badge>
464+
)}
465+
{key.roles.includes("pm_agent") && (
466+
<Badge variant="secondary" className="bg-orange-50 text-orange-700 hover:bg-orange-50 dark:bg-orange-950 dark:text-orange-300">
467+
{t("settings.pmAgent")}
468+
</Badge>
469+
)}
470+
{key.roles.includes("admin_agent") && (
471+
<Badge variant="secondary" className="bg-red-50 text-red-700 hover:bg-red-50 dark:bg-red-950 dark:text-red-300">
472+
{t("settings.adminAgent")}
473+
</Badge>
474+
)}
524475
</div>
525476
</div>
526477

@@ -613,7 +564,7 @@ export default function SettingsPage() {
613564
)}
614565
</div>
615566
</div>
616-
)})}
567+
))}
617568
</div>
618569
)}
619570
</div>

0 commit comments

Comments
 (0)