feat: add zone system to bosses and quests

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

@@ -1,5 +1,7 @@
 import type { Quest } from "@elysium/types";
+import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
+import { ZoneSelector } from "./ZoneSelector.js";
 
 const formatDuration = (seconds: number): string => {
   if (seconds >= 3600) return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
@@ -62,16 +64,30 @@ const QuestCard = ({ quest }: QuestCardProps): React.JSX.Element => {
 
 export const QuestPanel = (): React.JSX.Element => {
   const { state } = useGame();
+  const [activeZoneId, setActiveZoneId] = useState("verdant_vale");
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
+  const zones = state.zones ?? [];
+  const zoneQuests = state.quests.filter((q) => q.zoneId === activeZoneId);
+
   return (
     <section className="panel quest-panel">
       <h2>Quests</h2>
+
+      <ZoneSelector
+        activeZoneId={activeZoneId}
+        zones={zones}
+        onSelectZone={setActiveZoneId}
+      />
+
       <div className="quest-list">
-        {state.quests.map((quest) => (
+        {zoneQuests.map((quest) => (
           <QuestCard key={quest.id} quest={quest} />
         ))}
+        {zoneQuests.length === 0 && (
+          <p className="empty-zone">No quests in this zone yet.</p>
+        )}
       </div>
     </section>
   );