feat: add show/hide locked toggle to all panels

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

@@ -1,6 +1,8 @@
 import type { Achievement } 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";
 
 const conditionDescription = (achievement: Achievement): string => {
   const { condition } = achievement;
@@ -53,20 +55,30 @@ const AchievementCard = ({ achievement }: AchievementCardProps): React.JSX.Eleme
 
 export const AchievementPanel = (): React.JSX.Element => {
   const { state } = useGame();
+  const [showLocked, setShowLocked] = useState(true);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
   const achievements = state.achievements ?? [];
-  const unlocked = achievements.filter((a) => a.unlockedAt !== null).length;
+  const unlocked = achievements.filter((a) => a.unlockedAt !== null);
+  const locked = achievements.filter((a) => a.unlockedAt === null);
+  const visible = showLocked ? achievements : unlocked;
 
   return (
     <section className="panel achievement-panel">
-      <h2>Achievements</h2>
+      <div className="panel-header">
+        <h2>Achievements</h2>
+        <LockToggle
+          lockedCount={locked.length}
+          showLocked={showLocked}
+          onToggle={() => { setShowLocked((v) => !v); }}
+        />
+      </div>
       <p className="achievement-progress">
-        {unlocked} / {achievements.length} unlocked
+        {unlocked.length} / {achievements.length} unlocked
       </p>
       <div className="achievement-list">
-        {achievements.map((achievement) => (
+        {visible.map((achievement) => (
           <AchievementCard key={achievement.id} achievement={achievement} />
         ))}
       </div>