From 5edc249fb63fb12c8dda81acb38c3e52b773f6a1 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 23:57:41 +0000
Subject: [PATCH] Roadmap: insert ThemeToggle and GalaxyMap section

cgen-7231c0e21fef4b8ca260b6d3b18216b3
---
 client/pages/Roadmap.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/client/pages/Roadmap.tsx b/client/pages/Roadmap.tsx
index 52228597..0835fabd 100644
--- a/client/pages/Roadmap.tsx
+++ b/client/pages/Roadmap.tsx
@@ -160,6 +160,20 @@ export default function Roadmap() {
           </div>
         </section>
 
+        <section className="container mx-auto px-4 pb-6">
+          <div className="grid gap-3 md:grid-cols-[1fr_1fr]">
+            <ThemeToggle value={theme} onChange={setTheme} />
+            <GalaxyMap
+              phases={["now","month1","month2","month3"].map((id) => ({
+                id: id as Quest["phase"],
+                label: id === "now" ? "Now" : id === "month1" ? "Month 1" : id === "month2" ? "Month 2" : "Month 3",
+                percent: phaseTotals[id]?.total ? Math.round((phaseTotals[id].earned / phaseTotals[id].total) * 100) : 0,
+              }))}
+              onSelect={(id) => setFocusedPhase(id)}
+            />
+          </div>
+        </section>
+
         {/* Phases */}
         <section className="container mx-auto px-4 pb-8">
           <div className="grid gap-6 md:grid-cols-2">