.beans/nuzlocke-tracker-l12w--add-condition-badges-for-boss-pokemon-mechanics.md

@@ -0,0 +1,18 @@
+---
+# nuzlocke-tracker-l12w
+title: Add condition badges for boss Pokemon mechanics
+status: in-progress
+type: feature
+priority: normal
+created_at: 2026-02-16T20:11:02Z
+updated_at: 2026-02-16T20:11:52Z
+---
+
+Add visible badges on boss Pokemon that have mechanic-related conditions (Mega Evolution, Gigantamax, Dynamax, Terastallize). Create a ConditionBadge component following the EncounterMethodBadge pattern and integrate it into BossDefeatModal and BossTeamPreview.
+
+## Checklist
+
+- [x] Create ConditionBadge component in frontend/src/components/ConditionBadge.tsx
+- [x] Add ConditionBadge to BossDefeatModal.tsx boss team preview
+- [x] Add ConditionBadge to RunEncounters.tsx BossTeamPreview
+- [x] Verify with tsc and oxlint

frontend/src/components/BossDefeatModal.tsx

@@ -1,5 +1,6 @@
 import { type FormEvent, useState, useMemo } from 'react'
 import type { BossBattle, CreateBossResultInput } from '../types/game'
+import { ConditionBadge } from './ConditionBadge'
 
 interface BossDefeatModalProps {
   boss: BossBattle
@@ -108,6 +109,7 @@ export function BossDefeatModal({
                     <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
                       Lv.{bp.level}
                     </span>
+                    <ConditionBadge condition={bp.conditionLabel} size="xs" />
                   </div>
                 ))}
             </div>

frontend/src/components/ConditionBadge.tsx

@@ -0,0 +1,36 @@
+const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
+  'Mega Evolution': {
+    label: 'Mega',
+    color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900/40 dark:text-fuchsia-300',
+  },
+  Gigantamax: {
+    label: 'G-Max',
+    color: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  },
+  Dynamax: {
+    label: 'D-Max',
+    color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
+  },
+  Terastallize: {
+    label: 'Tera',
+    color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
+  },
+}
+
+export function ConditionBadge({
+  condition,
+  size = 'sm',
+}: {
+  condition: string | null
+  size?: 'sm' | 'xs'
+}) {
+  if (!condition) return null
+  const config = CONDITION_CONFIG[condition]
+  if (!config) return null
+  const sizeClass = size === 'xs' ? 'text-[8px] px-1 py-0' : 'text-[9px] px-1.5 py-0.5'
+  return (
+    <span className={`${sizeClass} font-medium rounded-full whitespace-nowrap ${config.color}`}>
+      {config.label}
+    </span>
+  )
+}

frontend/src/pages/RunEncounters.tsx

@@ -22,6 +22,7 @@ import {
   TypeBadge,
 } from '../components'
 import { BossDefeatModal } from '../components/BossDefeatModal'
+import { ConditionBadge } from '../components/ConditionBadge'
 import type {
   Route,
   RouteWithChildren,
@@ -239,7 +240,10 @@ function BossTeamPreview({
               ) : (
                 <div className="w-20 h-20 bg-gray-200 dark:bg-gray-700 rounded-full" />
               )}
-              <span className="text-xs text-gray-500 dark:text-gray-400">Lvl {bp.level}</span>
+              <div className="flex flex-col items-start gap-0.5">
+                <span className="text-xs text-gray-500 dark:text-gray-400">Lvl {bp.level}</span>
+                <ConditionBadge condition={bp.conditionLabel} size="xs" />
+              </div>
             </div>
           ))}
       </div>