apps/web/src/components/game/AdventurerPanel.tsx

@@ -1,5 +1,7 @@
 import type { Adventurer } from "@elysium/types";
+import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
+import { LockToggle } from "../ui/LockToggle.js";
 
 const CLASS_ICONS: Record<string, string> = {
   warrior: "🗡️",
@@ -48,22 +50,31 @@ const AdventurerCard = ({ adventurer, currentGold }: AdventurerCardProps): React
 
 export const AdventurerPanel = (): React.JSX.Element => {
   const { state } = useGame();
+  const [showLocked, setShowLocked] = useState(true);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
+  const locked = state.adventurers.filter((a) => !a.unlocked);
+  const visible = showLocked ? state.adventurers : state.adventurers.filter((a) => a.unlocked);
+
   return (
     <section className="panel adventurer-panel">
-      <h2>Adventurers</h2>
+      <div className="panel-header">
+        <h2>Adventurers</h2>
+        <LockToggle
+          lockedCount={locked.length}
+          showLocked={showLocked}
+          onToggle={() => { setShowLocked((v) => !v); }}
+        />
+      </div>
       <div className="adventurer-list">
-        {state.adventurers
-          .filter((a) => a.unlocked)
-          .map((adventurer) => (
-            <AdventurerCard
-              key={adventurer.id}
-              adventurer={adventurer}
-              currentGold={state.resources.gold}
-            />
-          ))}
+        {visible.map((adventurer) => (
+          <AdventurerCard
+            key={adventurer.id}
+            adventurer={adventurer}
+            currentGold={state.resources.gold}
+          />
+        ))}
       </div>
     </section>
   );