feat: add show/hide locked toggle to all panels

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

@@ -1,5 +1,7 @@
 import type { Equipment, EquipmentType } from "@elysium/types";
+import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
+import { LockToggle } from "../ui/LockToggle.js";
 
 const RARITY_LABEL: Record<string, string> = {
   common: "Common",
@@ -72,20 +74,31 @@ const SLOT_LABEL: Record<EquipmentType, string> = {
 
 export const EquipmentPanel = (): React.JSX.Element => {
   const { state } = useGame();
+  const [showLocked, setShowLocked] = useState(true);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
   const equipment = state.equipment ?? [];
+  const unownedCount = equipment.filter((e) => !e.owned).length;
 
   return (
     <section className="panel equipment-panel">
-      <h2>Equipment</h2>
+      <div className="panel-header">
+        <h2>Equipment</h2>
+        <LockToggle
+          lockedCount={unownedCount}
+          showLocked={showLocked}
+          onToggle={() => { setShowLocked((v) => !v); }}
+        />
+      </div>
       <p className="equipment-intro">
         Equipment drops from bosses and grants passive bonuses. Only one item per slot can be equipped at a time.
       </p>
 
       {SLOT_ORDER.map((slotType) => {
-        const items = equipment.filter((e) => e.type === slotType);
+        const items = equipment.filter(
+          (e) => e.type === slotType && (showLocked || e.owned),
+        );
         return (
           <div key={slotType} className="equipment-slot-section">
             <h3 className="slot-heading">{SLOT_LABEL[slotType]}</h3>
@@ -93,6 +106,9 @@ export const EquipmentPanel = (): React.JSX.Element => {
               {items.map((item) => (
                 <EquipmentCard key={item.id} item={item} />
               ))}
+              {items.length === 0 && (
+                <p className="empty-zone">No items to show in this slot.</p>
+              )}
             </div>
           </div>
         );