2026-03-22 11:36:00 +01:00
7 changed files with 568 additions and 526 deletions
--- a/.beans/nuzlocke-tracker-532i--ux-remove-level-field-from-boss-defeat-modal.md
+++ b/.beans/nuzlocke-tracker-532i--ux-remove-level-field-from-boss-defeat-modal.md
@@ -1,11 +1,11 @@
 ---
 # nuzlocke-tracker-532i
 title: 'UX: Make level field optional in boss defeat modal'
-status: todo
+status: completed
 type: feature
 priority: normal
 created_at: 2026-03-21T21:50:48Z
-updated_at: 2026-03-21T22:04:08Z
+updated_at: 2026-03-22T09:16:12Z
 ---

 ## Problem
@@ -22,8 +22,17 @@ When recording which team members beat a boss, users must manually enter a level

 Remove the level field entirely from the UI and make it optional in the backend:

- [ ] Remove level input from `BossDefeatModal.tsx`
- [ ] Make `level` column nullable in the database (alembic migration)
- [ ] Update the API schema to make level optional (default to null)
- [ ] Update any backend validation that requires level
- [ ] Verify boss result display still works without level data
+- [x] Remove level input from `BossDefeatModal.tsx`
+- [x] Make `level` column nullable in the database (alembic migration)
+- [x] Update the API schema to make level optional (default to null)
+- [x] Update any backend validation that requires level
+- [x] Verify boss result display still works without level data
+
+
+## Summary of Changes
+
+- Removed level input field from BossDefeatModal.tsx, simplifying team selection to just checkboxes
+- Created alembic migration to make boss_result_team.level column nullable
+- Updated SQLAlchemy model and Pydantic schemas to make level optional (defaults to null)
+- Updated RunEncounters.tsx to conditionally render level only when present
+- Updated frontend TypeScript types for BossResultTeamMember and BossResultTeamMemberInput
--- a/backend/src/app/alembic/versions/903e0cdbfe5a_make_boss_result_team_level_nullable.py
+++ b/backend/src/app/alembic/versions/903e0cdbfe5a_make_boss_result_team_level_nullable.py
@@ -0,0 +1,37 @@
+"""make_boss_result_team_level_nullable
+
+Revision ID: 903e0cdbfe5a
+Revises: p7e8f9a0b1c2
+Create Date: 2026-03-22 10:13:41.828406
+
+"""
+
+from collections.abc import Sequence
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = "903e0cdbfe5a"
+down_revision: str | Sequence[str] | None = "p7e8f9a0b1c2"
+branch_labels: str | Sequence[str] | None = None
+depends_on: str | Sequence[str] | None = None
+
+
+def upgrade() -> None:
+    op.alter_column(
+        "boss_result_team",
+        "level",
+        existing_type=sa.SmallInteger(),
+        nullable=True,
+    )
+
+
+def downgrade() -> None:
+    op.execute("UPDATE boss_result_team SET level = 1 WHERE level IS NULL")
+    op.alter_column(
+        "boss_result_team",
+        "level",
+        existing_type=sa.SmallInteger(),
+        nullable=False,
+    )
--- a/backend/src/app/models/boss_result_team.py
+++ b/backend/src/app/models/boss_result_team.py
@@ -14,7 +14,7 @@ class BossResultTeam(Base):
    encounter_id: Mapped[int] = mapped_column(
        ForeignKey("encounters.id", ondelete="CASCADE"), index=True
    )
-    level: Mapped[int] = mapped_column(SmallInteger)
+    level: Mapped[int | None] = mapped_column(SmallInteger, nullable=True)

    boss_result: Mapped[BossResult] = relationship(back_populates="team")
    encounter: Mapped[Encounter] = relationship()
--- a/backend/src/app/schemas/boss.py
+++ b/backend/src/app/schemas/boss.py
@@ -57,7 +57,7 @@ class BossBattleResponse(CamelModel):
 class BossResultTeamMemberResponse(CamelModel):
    id: int
    encounter_id: int
-    level: int
+    level: int | None


 class BossResultResponse(CamelModel):
@@ -120,7 +120,7 @@ class BossPokemonInput(CamelModel):

 class BossResultTeamMemberInput(CamelModel):
    encounter_id: int
-    level: int
+    level: int | None = None


 class BossResultCreate(CamelModel):
--- a/frontend/src/components/BossDefeatModal.tsx
+++ b/frontend/src/components/BossDefeatModal.tsx
@@ -23,10 +23,7 @@ function matchVariant(labels: string[], starterName?: string | null): string | n
  return matches.length === 1 ? (matches[0] ?? null) : null
 }

-interface TeamSelection {
-  encounterId: number
-  level: number
-}
+type TeamSelection = number

 export function BossDefeatModal({
  boss,
@@ -36,26 +33,15 @@ export function BossDefeatModal({
  isPending,
  starterName,
 }: BossDefeatModalProps) {
-  const [selectedTeam, setSelectedTeam] = useState<Map<number, TeamSelection>>(new Map())
+  const [selectedTeam, setSelectedTeam] = useState<Set<TeamSelection>>(new Set())

-  const toggleTeamMember = (enc: EncounterDetail) => {
+  const toggleTeamMember = (encounterId: number) => {
    setSelectedTeam((prev) => {
-      const next = new Map(prev)
-      if (next.has(enc.id)) {
-        next.delete(enc.id)
+      const next = new Set(prev)
+      if (next.has(encounterId)) {
+        next.delete(encounterId)
      } else {
-        next.set(enc.id, { encounterId: enc.id, level: enc.catchLevel ?? 1 })
-      }
-      return next
-    })
-  }
-
-  const updateLevel = (encounterId: number, level: number) => {
-    setSelectedTeam((prev) => {
-      const next = new Map(prev)
-      const existing = next.get(encounterId)
-      if (existing) {
-        next.set(encounterId, { ...existing, level })
+        next.add(encounterId)
      }
      return next
    })
@@ -87,7 +73,9 @@ export function BossDefeatModal({

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
-    const team: BossResultTeamMemberInput[] = Array.from(selectedTeam.values())
+    const team: BossResultTeamMemberInput[] = Array.from(selectedTeam).map((encounterId) => ({
+      encounterId,
+    }))
    onSubmit({
      bossBattleId: boss.id,
      result: 'won',
@@ -134,11 +122,17 @@ export function BossDefeatModal({
                  return (
                    <div key={bp.id} className="flex flex-col items-center">
                      {bp.pokemon.spriteUrl ? (
-                        <img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-10 h-10" />
+                        <img
+                          src={bp.pokemon.spriteUrl}
+                          alt={bp.pokemon.name}
+                          className="w-10 h-10"
+                        />
                      ) : (
                        <div className="w-10 h-10 bg-surface-3 rounded-full" />
                      )}
-                      <span className="text-xs text-text-tertiary capitalize">{bp.pokemon.name}</span>
+                      <span className="text-xs text-text-tertiary capitalize">
+                        {bp.pokemon.name}
+                      </span>
                      <span className="text-xs font-medium text-text-secondary">Lv.{bp.level}</span>
                      <ConditionBadge condition={bp.conditionLabel} size="xs" />
                      {bp.ability && (
@@ -166,7 +160,6 @@ export function BossDefeatModal({
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-48 overflow-y-auto">
              {aliveEncounters.map((enc) => {
                const isSelected = selectedTeam.has(enc.id)
-                const selection = selectedTeam.get(enc.id)
                const displayPokemon = enc.currentPokemon ?? enc.pokemon
                return (
                  <div
@@ -176,12 +169,12 @@ export function BossDefeatModal({
                        ? 'border-accent-500 bg-accent-500/10'
                        : 'border-border-default hover:bg-surface-2'
                    }`}
-                    onClick={() => toggleTeamMember(enc)}
+                    onClick={() => toggleTeamMember(enc.id)}
                  >
                    <input
                      type="checkbox"
                      checked={isSelected}
-                      onChange={() => toggleTeamMember(enc)}
+                      onChange={() => toggleTeamMember(enc.id)}
                      className="sr-only"
                    />
                    {displayPokemon.spriteUrl ? (
@@ -193,26 +186,9 @@ export function BossDefeatModal({
                    ) : (
                      <div className="w-8 h-8 bg-surface-3 rounded-full" />
                    )}
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs font-medium truncate">
+                    <p className="flex-1 min-w-0 text-xs font-medium truncate">
                      {enc.nickname ?? displayPokemon.name}
                    </p>
-                      {isSelected && (
-                        <input
-                          type="number"
-                          min={1}
-                          max={100}
-                          value={selection?.level ?? enc.catchLevel ?? 1}
-                          onChange={(e) => {
-                            e.stopPropagation()
-                            updateLevel(enc.id, Number.parseInt(e.target.value, 10) || 1)
-                          }}
-                          onClick={(e) => e.stopPropagation()}
-                          className="w-14 text-xs px-1 py-0.5 mt-1 rounded border border-border-default bg-surface-1"
-                          placeholder="Lv"
-                        />
-                      )}
-                    </div>
                  </div>
                )
              })}
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -1301,7 +1301,9 @@ export function RunEncounters() {
                              key={enc.id}
                              encounter={enc}
                              onClick={
-                            isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
+                                isActive && canEdit
+                                  ? () => setSelectedTeamEncounter(enc)
+                                  : undefined
                              }
                            />
                          ))}
@@ -1317,7 +1319,9 @@ export function RunEncounters() {
                                encounter={enc}
                                showFaintLevel
                                onClick={
-                              isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
+                                  isActive && canEdit
+                                    ? () => setSelectedTeamEncounter(enc)
+                                    : undefined
                                }
                              />
                            ))}
@@ -1350,7 +1354,9 @@ export function RunEncounters() {
                      <PokemonCard
                        key={enc.id}
                        encounter={enc}
-                    onClick={isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined}
+                        onClick={
+                          isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
+                        }
                      />
                    ))}
                  </div>
@@ -1475,7 +1481,9 @@ export function RunEncounters() {
                          >
                            <span className={`w-2.5 h-2.5 rounded-full shrink-0 ${si.dot}`} />
                            <div className="flex-1 min-w-0">
-                          <div className="text-sm font-medium text-text-primary">{route.name}</div>
+                              <div className="text-sm font-medium text-text-primary">
+                                {route.name}
+                              </div>
                              {encounter ? (
                                <div className="flex items-center gap-2 mt-0.5">
                                  {encounter.pokemon.spriteUrl && (
@@ -1489,7 +1497,9 @@ export function RunEncounters() {
                                    {encounter.nickname ?? encounter.pokemon.name}
                                    {encounter.status === 'caught' &&
                                      encounter.faintLevel !== null &&
-                                  (encounter.deathCause ? ` — ${encounter.deathCause}` : ' (dead)')}
+                                      (encounter.deathCause
+                                        ? ` — ${encounter.deathCause}`
+                                        : ' (dead)')}
                                  </span>
                                  {giftEncounter && (
                                    <>
@@ -1601,7 +1611,11 @@ export function RunEncounters() {
                                    />
                                  </svg>
                                  {boss.spriteUrl && (
-                                <img src={boss.spriteUrl} alt={boss.name} className="h-10 w-auto" />
+                                    <img
+                                      src={boss.spriteUrl}
+                                      alt={boss.name}
+                                      className="h-10 w-auto"
+                                    />
                                  )}
                                  <div>
                                    <div className="flex items-center gap-2">
@@ -1611,7 +1625,9 @@ export function RunEncounters() {
                                      <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-surface-2 text-text-secondary">
                                        {bossTypeLabel[boss.bossType] ?? boss.bossType}
                                      </span>
-                                  {boss.specialtyType && <TypeBadge type={boss.specialtyType} />}
+                                      {boss.specialtyType && (
+                                        <TypeBadge type={boss.specialtyType} />
+                                      )}
                                    </div>
                                    <p className="text-xs text-text-tertiary">
                                      {boss.location} &middot; Level Cap: {boss.levelCap}
@@ -1666,9 +1682,11 @@ export function RunEncounters() {
                                              <span className="text-[10px] text-text-tertiary capitalize">
                                                {enc.nickname ?? dp.name}
                                              </span>
+                                              {tm.level != null && (
                                                <span className="text-[10px] text-text-muted">
                                                  Lv.{tm.level}
                                                </span>
+                                              )}
                                            </div>
                                          )
                                        })}
@@ -1743,7 +1761,9 @@ export function RunEncounters() {
                              encounter={enc}
                              showFaintLevel
                              onClick={
-                              isActive && canEdit ? () => setSelectedTeamEncounter(enc) : undefined
+                                isActive && canEdit
+                                  ? () => setSelectedTeamEncounter(enc)
+                                  : undefined
                              }
                            />
                          ))}
--- a/frontend/src/types/game.ts
+++ b/frontend/src/types/game.ts
@@ -238,7 +238,7 @@ export interface BossBattle {
 export interface BossResultTeamMember {
  id: number
  encounterId: number
-  level: number
+  level: number | null
 }

 export interface BossResult {
@@ -253,7 +253,7 @@ export interface BossResult {

 export interface BossResultTeamMemberInput {
  encounterId: number
-  level: number
+  level?: number | null
 }

 export interface CreateBossResultInput {