feat: add show/hide locked toggle to all panels

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

@@ -1,6 +1,7 @@
 import type { Quest } from "@elysium/types";
 import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
+import { LockToggle } from "../ui/LockToggle.js";
 import { ZoneSelector } from "./ZoneSelector.js";
 
 const formatDuration = (seconds: number): string => {
@@ -65,15 +66,27 @@ const QuestCard = ({ quest }: QuestCardProps): React.JSX.Element => {
 export const QuestPanel = (): React.JSX.Element => {
   const { state } = useGame();
   const [activeZoneId, setActiveZoneId] = useState("verdant_vale");
+  const [showLocked, setShowLocked] = useState(true);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
   const zones = state.zones ?? [];
   const zoneQuests = state.quests.filter((q) => q.zoneId === activeZoneId);
+  const lockedCount = zoneQuests.filter((q) => q.status === "locked").length;
+  const visibleQuests = showLocked
+    ? zoneQuests
+    : zoneQuests.filter((q) => q.status !== "locked");
 
   return (
     <section className="panel quest-panel">
-      <h2>Quests</h2>
+      <div className="panel-header">
+        <h2>Quests</h2>
+        <LockToggle
+          lockedCount={lockedCount}
+          showLocked={showLocked}
+          onToggle={() => { setShowLocked((v) => !v); }}
+        />
+      </div>
 
       <ZoneSelector
         activeZoneId={activeZoneId}
@@ -82,11 +95,11 @@ export const QuestPanel = (): React.JSX.Element => {
       />
 
       <div className="quest-list">
-        {zoneQuests.map((quest) => (
+        {visibleQuests.map((quest) => (
           <QuestCard key={quest.id} quest={quest} />
         ))}
-        {zoneQuests.length === 0 && (
-          <p className="empty-zone">No quests in this zone yet.</p>
+        {visibleQuests.length === 0 && (
+          <p className="empty-zone">No quests to show in this zone.</p>
         )}
       </div>
     </section>