Fix persistent damage tag ordering and differentiate condition icons

- Render persistent damage tags before the "+" button, not after
- Use insertion order for conditions on the row instead of definition order
- Differentiate Undetected condition (EyeClosed/slate) from Invisible (Ghost/violet)
- Use purple for void persistent damage to distinguish from violet conditions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -618,14 +618,17 @@ export function CombatantRow({
 							onRemove={(conditionId) => toggleCondition(id, conditionId)}
 							onDecrement={(conditionId) => decrementCondition(id, conditionId)}
 							onOpenPicker={() => setPickerOpen((prev) => !prev)}
-						/>
+						>
+							{isPf2e && (
+								<PersistentDamageTags
+									entries={combatant.persistentDamage}
+									onRemove={(damageType) =>
+										removePersistentDamage(id, damageType)
+									}
+								/>
+							)}
+						</ConditionTags>
 					</div>
-					{isPf2e && (
-						<PersistentDamageTags
-							entries={combatant.persistentDamage}
-							onRemove={(damageType) => removePersistentDamage(id, damageType)}
-						/>
-					)}
 					{!!pickerOpen && (
 						<ConditionPicker
 							anchorRef={conditionAnchorRef}

apps/web/src/components/condition-styles.ts

@@ -13,6 +13,7 @@ import {
 	EarOff,
 	Eclipse,
 	Eye,
+	EyeClosed,
 	EyeOff,
 	Flame,
 	FlaskConical,
@@ -57,6 +58,7 @@ export const CONDITION_ICON_MAP: Record<string, LucideIcon> = {
 	EarOff,
 	Eclipse,
 	Eye,
+	EyeClosed,
 	EyeOff,
 	Flame,
 	FlaskConical,
@@ -92,6 +94,7 @@ export const CONDITION_COLOR_CLASSES: Record<string, string> = {
 	pink: "text-pink-400",
 	amber: "text-amber-400",
 	orange: "text-orange-400",
+	purple: "text-purple-400",
 	gray: "text-gray-400",
 	violet: "text-violet-400",
 	yellow: "text-yellow-400",

apps/web/src/components/condition-tags.tsx

@@ -5,6 +5,7 @@ import {
 	getConditionDescription,
 } from "@initiative/domain";
 import { Plus } from "lucide-react";
+import type { ReactNode } from "react";
 import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { cn } from "../lib/utils.js";
 import {
@@ -18,6 +19,7 @@ interface ConditionTagsProps {
 	onRemove: (conditionId: ConditionId) => void;
 	onDecrement: (conditionId: ConditionId) => void;
 	onOpenPicker: () => void;
+	children?: ReactNode;
 }
 
 export function ConditionTags({
@@ -25,6 +27,7 @@ export function ConditionTags({
 	onRemove,
 	onDecrement,
 	onOpenPicker,
+	children,
 }: Readonly<ConditionTagsProps>) {
 	const { edition } = useRulesEditionContext();
 	return (
@@ -69,6 +72,7 @@ export function ConditionTags({
 					</Tooltip>
 				);
 			})}
+			{children}
 			<button
 				type="button"
 				title="Add condition"