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:
parent
ab2c40d358
commit
0ebfd85b47
1 changed files with 17 additions and 27 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue