fix: always show team color badge via deterministic fallback

Color resolution chain: approval.teamColor → teamSummary.color
→ getMemberColorByName(teamName). Third fallback guarantees
a color is always available — no more neutral grey badges.
Removed dead fallback branch since teamColor can never be null.
This commit is contained in:
iliya 2026-03-21 12:19:05 +02:00
parent ab2c40d358
commit 0ebfd85b47

View file

@ -4,6 +4,7 @@ import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors'
import { useTheme } from '@renderer/hooks/useTheme'; import { useTheme } from '@renderer/hooks/useTheme';
import { useStore } from '@renderer/store'; import { useStore } from '@renderer/store';
import { highlightLines } from '@renderer/utils/syntaxHighlighter'; import { highlightLines } from '@renderer/utils/syntaxHighlighter';
import { getMemberColorByName } from '@shared/constants/memberColors';
import { AlertTriangle, FileText, Search, Terminal } from 'lucide-react'; import { AlertTriangle, FileText, Search, Terminal } from 'lucide-react';
import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview'; import { ToolApprovalDiffPreview } from './ToolApprovalDiffPreview';
@ -169,10 +170,11 @@ export const ToolApprovalSheet: React.FC = () => {
if (!current) return null; if (!current) return null;
// Prefer color from the approval itself (always available, even during provisioning), // Prefer color from the approval itself (always available, even during provisioning),
// fall back to teams list for older approvals without the field. // fall back to teams list, then deterministic color from team name.
const teamSummary = teams.find((t) => t.teamName === current.teamName); const teamSummary = teams.find((t) => t.teamName === current.teamName);
const colorName = current.teamColor ?? teamSummary?.color; const colorName =
const teamColor = colorName ? getTeamColorSet(colorName) : null; current.teamColor ?? teamSummary?.color ?? getMemberColorByName(current.teamName);
const teamColor = getTeamColorSet(colorName);
const displayName = current.teamDisplayName ?? teamSummary?.displayName ?? current.teamName; const displayName = current.teamDisplayName ?? teamSummary?.displayName ?? current.teamName;
return ( return (
@ -196,30 +198,18 @@ export const ToolApprovalSheet: React.FC = () => {
</span> </span>
</div> </div>
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
{selectedTeamName !== current.teamName && {selectedTeamName !== current.teamName && (
(teamColor ? ( <span
<span className="rounded-full px-2 py-0.5 text-[10px] font-medium"
className="rounded-full px-2 py-0.5 text-[10px] font-medium" style={{
style={{ backgroundColor: getThemedBadge(teamColor, isLight),
backgroundColor: getThemedBadge(teamColor, isLight), color: teamColor.text,
color: teamColor.text, border: `1px solid ${teamColor.border}`,
border: `1px solid ${teamColor.border}`, }}
}} >
> {displayName}
{displayName} </span>
</span> )}
) : (
<span
className="rounded-full px-2 py-0.5 text-[10px] font-medium"
style={{
backgroundColor: 'var(--color-surface-raised)',
color: 'var(--color-text-secondary)',
border: '1px solid var(--color-border-emphasis)',
}}
>
{displayName}
</span>
))}
<ElapsedDisplay receivedAt={current.receivedAt} /> <ElapsedDisplay receivedAt={current.receivedAt} />
</div> </div>
</div> </div>