Single-line member rows + purple umbral name

- Flatten member row to strict single line: avatar | name | umbral name (violet) | pending badge | permission toggle | controls
- Umbral name shown in text-violet-400 for visual differentiation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-06 16:58:51 +08:00
parent 1b36e6b6a7
commit a2f4d297a3

View File

@ -35,19 +35,17 @@ export default function CalendarMemberRow({
<span className="text-sm text-violet-400 font-medium">{initial}</span> <span className="text-sm text-violet-400 font-medium">{initial}</span>
</div> </div>
<div className="min-w-0 flex-1"> <div className="flex items-center gap-2 min-w-0 flex-1 truncate">
<div className="flex items-center gap-2">
<span className="text-sm font-medium truncate">{displayName}</span> <span className="text-sm font-medium truncate">{displayName}</span>
{member.preferred_name && (
<span className="text-xs text-violet-400 truncate shrink-0">{member.umbral_name}</span>
)}
{member.status === 'pending' && ( {member.status === 'pending' && (
<span className="text-[9px] px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-400 font-medium"> <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-400 font-medium shrink-0">
Pending Pending
</span> </span>
)} )}
</div> </div>
{member.preferred_name && (
<span className="text-xs text-muted-foreground">{member.umbral_name}</span>
)}
</div>
{readOnly ? ( {readOnly ? (
<PermissionBadge permission={member.permission} /> <PermissionBadge permission={member.permission} />