Color player character names instead of left border

Player characters now show their chosen color on their name text
rather than as a left border glow. Left border is reserved for
active row (accent) and concentration (purple).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/combatant-row.tsx

@@ -49,11 +49,13 @@ function EditableName({
 	combatantId,
 	onRename,
 	onShowStatBlock,
+	color,
 }: {
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	onShowStatBlock?: () => void;
+	color?: string;
 }) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
@@ -143,6 +145,7 @@ function EditableName({
 				onTouchCancel={cancelLongPress}
 				onTouchMove={cancelLongPress}
 				className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
+				style={color ? { color } : undefined}
 			>
 				{name}
 			</button>
@@ -482,8 +485,7 @@ export function CombatantRow({
 		}
 	}, [combatant.isConcentrating]);
 
-	const pcColor =
-		combatant.color && !isActive && !combatant.isConcentrating
+	const pcColor = combatant.color
 		? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
 		: undefined;
 
@@ -499,7 +501,6 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 				onShowStatBlock && "cursor-pointer",
 			)}
-			style={pcColor ? { borderLeftColor: pcColor } : undefined}
 			onClick={onShowStatBlock}
 			onKeyDown={
 				onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
@@ -566,6 +567,7 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={onRename}
 						onShowStatBlock={onShowStatBlock}
+						color={pcColor}
 					/>
 					<ConditionTags
 						conditions={combatant.conditions}