From 979f57f184c318c41d286e1c89967d18ff29bf44 Mon Sep 17 00:00:00 2001
From: Julian Tabel <juliantabel.jt@gmail.com>
Date: Sun, 8 Feb 2026 12:03:11 +0100
Subject: [PATCH] Add collapsible boss teams and hide attempts in hardcore mode

Boss battle cards now collapse the pokemon team by default with a
chevron toggle. Expanded teams show larger sprites with "Lvl" prefix.
In hardcore mode, the BossDefeatModal hides the attempts field and
lost button since a loss ends the run.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ...-card-collapsible-team-hardcore-mode-cl.md | 11 ++++
 frontend/src/components/BossDefeatModal.tsx   | 53 ++++++++++---------
 frontend/src/pages/RunEncounters.tsx          | 36 ++++++++++---
 3 files changed, 70 insertions(+), 30 deletions(-)
 create mode 100644 .beans/nuzlocke-tracker-qars--boss-battle-card-collapsible-team-hardcore-mode-cl.md

diff --git a/.beans/nuzlocke-tracker-qars--boss-battle-card-collapsible-team-hardcore-mode-cl.md b/.beans/nuzlocke-tracker-qars--boss-battle-card-collapsible-team-hardcore-mode-cl.md
new file mode 100644
index 0000000..94d33eb
--- /dev/null
+++ b/.beans/nuzlocke-tracker-qars--boss-battle-card-collapsible-team-hardcore-mode-cl.md
@@ -0,0 +1,11 @@
+---
+# nuzlocke-tracker-qars
+title: 'Boss battle card: collapsible team + hardcore mode cleanup'
+status: completed
+type: feature
+priority: normal
+created_at: 2026-02-08T11:01:17Z
+updated_at: 2026-02-08T11:02:45Z
+---
+
+Make boss battle cards collapsible (team hidden by default), larger sprites with Lvl prefix, and hide attempts/lost button in hardcore mode
\ No newline at end of file
diff --git a/frontend/src/components/BossDefeatModal.tsx b/frontend/src/components/BossDefeatModal.tsx
index e3c2089..324f387 100644
--- a/frontend/src/components/BossDefeatModal.tsx
+++ b/frontend/src/components/BossDefeatModal.tsx
@@ -6,9 +6,10 @@ interface BossDefeatModalProps {
   onSubmit: (data: CreateBossResultInput) => void
   onClose: () => void
   isPending?: boolean
+  hardcoreMode?: boolean
 }
 
-export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefeatModalProps) {
+export function BossDefeatModal({ boss, onSubmit, onClose, isPending, hardcoreMode }: BossDefeatModalProps) {
   const [result, setResult] = useState<'won' | 'lost'>('won')
   const [attempts, setAttempts] = useState('1')
 
@@ -16,8 +17,8 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
     e.preventDefault()
     onSubmit({
       bossBattleId: boss.id,
-      result,
-      attempts: Number(attempts) || 1,
+      result: hardcoreMode ? 'won' : result,
+      attempts: hardcoreMode ? 1 : Number(attempts) || 1,
     })
   }
 
@@ -71,30 +72,34 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
                 >
                   Won
                 </button>
-                <button
-                  type="button"
-                  onClick={() => setResult('lost')}
-                  className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${
-                    result === 'lost'
-                      ? 'bg-red-600 text-white border-red-600'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                >
-                  Lost
-                </button>
+                {!hardcoreMode && (
+                  <button
+                    type="button"
+                    onClick={() => setResult('lost')}
+                    className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${
+                      result === 'lost'
+                        ? 'bg-red-600 text-white border-red-600'
+                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+                    }`}
+                  >
+                    Lost
+                  </button>
+                )}
               </div>
             </div>
 
-            <div>
-              <label className="block text-sm font-medium mb-1">Attempts</label>
-              <input
-                type="number"
-                min={1}
-                value={attempts}
-                onChange={(e) => setAttempts(e.target.value)}
-                className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
-              />
-            </div>
+            {!hardcoreMode && (
+              <div>
+                <label className="block text-sm font-medium mb-1">Attempts</label>
+                <input
+                  type="number"
+                  min={1}
+                  value={attempts}
+                  onChange={(e) => setAttempts(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+                />
+              </div>
+            )}
           </div>
 
           <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
diff --git a/frontend/src/pages/RunEncounters.tsx b/frontend/src/pages/RunEncounters.tsx
index f1456f8..f740a24 100644
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -337,6 +337,7 @@ export function RunEncounters() {
     useState<EncounterDetail | null>(null)
   const [showEndRun, setShowEndRun] = useState(false)
   const [showShinyModal, setShowShinyModal] = useState(false)
+  const [expandedBosses, setExpandedBosses] = useState<Set<number>>(new Set())
   const [showTeam, setShowTeam] = useState(true)
   const [filter, setFilter] = useState<'all' | RouteStatus>('all')
 
@@ -1021,6 +1022,16 @@ export function RunEncounters() {
                   other: 'border-gray-400 dark:border-gray-500',
                 }
 
+                const isBossExpanded = expandedBosses.has(boss.id)
+                const toggleBoss = () => {
+                  setExpandedBosses((prev) => {
+                    const next = new Set(prev)
+                    if (next.has(boss.id)) next.delete(boss.id)
+                    else next.add(boss.id)
+                    return next
+                  })
+                }
+
                 return (
                   <div
                     key={`boss-${boss.id}`}
@@ -1028,8 +1039,20 @@ export function RunEncounters() {
                       isDefeated ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-white dark:bg-gray-800'
                     } px-4 py-3`}
                   >
-                    <div className="flex items-start justify-between">
+                    <div
+                      className="flex items-start justify-between cursor-pointer select-none"
+                      onClick={toggleBoss}
+                    >
                       <div className="flex items-center gap-3">
+                        <svg
+                          className={`w-4 h-4 text-gray-400 transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                        </svg>
                         {boss.spriteUrl && (
                           <img src={boss.spriteUrl} alt={boss.name} className="w-10 h-10" />
                         )}
@@ -1047,7 +1070,7 @@ export function RunEncounters() {
                           </p>
                         </div>
                       </div>
-                      <div>
+                      <div onClick={(e) => e.stopPropagation()}>
                         {isDefeated ? (
                           <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
                             Defeated &#10003;
@@ -1063,19 +1086,19 @@ export function RunEncounters() {
                       </div>
                     </div>
                     {/* Boss pokemon team */}
-                    {boss.pokemon.length > 0 && (
+                    {isBossExpanded && boss.pokemon.length > 0 && (
                       <div className="flex gap-2 mt-2 flex-wrap">
                         {boss.pokemon
                           .sort((a, b) => a.order - b.order)
                           .map((bp) => (
                             <div key={bp.id} className="flex items-center gap-1">
                               {bp.pokemon.spriteUrl ? (
-                                <img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-6 h-6" />
+                                <img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-10 h-10" />
                               ) : (
-                                <div className="w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded-full" />
+                                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full" />
                               )}
                               <span className="text-xs text-gray-500 dark:text-gray-400">
-                                {bp.level}
+                                Lvl {bp.level}
                               </span>
                             </div>
                           ))}
@@ -1141,6 +1164,7 @@ export function RunEncounters() {
           }}
           onClose={() => setSelectedBoss(null)}
           isPending={createBossResult.isPending}
+          hardcoreMode={run?.rules?.hardcoreMode}
         />
       )}