feat: add show/hide locked toggle to all panels

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

@@ -2,6 +2,7 @@ import type { Boss } from "@elysium/types";
 import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
 import { formatNumber } from "../../utils/format.js";
+import { LockToggle } from "../ui/LockToggle.js";
 import { ZoneSelector } from "./ZoneSelector.js";
 
 interface BossCardProps {
@@ -89,6 +90,7 @@ export const BossPanel = (): React.JSX.Element => {
   const { state, challengeBoss } = useGame();
   const [challengingBossId, setChallengingBossId] = useState<string | null>(null);
   const [activeZoneId, setActiveZoneId] = useState("verdant_vale");
+  const [showLocked, setShowLocked] = useState(true);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
@@ -139,10 +141,21 @@ export const BossPanel = (): React.JSX.Element => {
 
   const zones = state.zones ?? [];
   const zoneBosses = state.bosses.filter((b) => b.zoneId === activeZoneId);
+  const lockedCount = zoneBosses.filter((b) => b.status === "locked").length;
+  const visibleBosses = showLocked
+    ? zoneBosses
+    : zoneBosses.filter((b) => b.status !== "locked");
 
   return (
     <section className="panel boss-panel">
-      <h2>Boss Encounters</h2>
+      <div className="panel-header">
+        <h2>Boss Encounters</h2>
+        <LockToggle
+          lockedCount={lockedCount}
+          showLocked={showLocked}
+          onToggle={() => { setShowLocked((v) => !v); }}
+        />
+      </div>
 
       <ZoneSelector
         activeZoneId={activeZoneId}
@@ -162,7 +175,7 @@ export const BossPanel = (): React.JSX.Element => {
       </div>
 
       <div className="boss-list">
-        {zoneBosses.map((boss) => (
+        {visibleBosses.map((boss) => (
           <BossCard
             key={boss.id}
             boss={boss}
@@ -173,8 +186,8 @@ export const BossPanel = (): React.JSX.Element => {
             }}
           />
         ))}
-        {zoneBosses.length === 0 && (
-          <p className="empty-zone">No bosses in this zone yet.</p>
+        {visibleBosses.length === 0 && (
+          <p className="empty-zone">No bosses to show in this zone.</p>
         )}
       </div>
     </section>