ui: LOCAL SYSTEM list staggers moons under their parent planet (v0.2.2)

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v0.2.2 — 2026-09-28 21:02
+- LOCAL SYSTEM tab: explorable-worlds list now staggers moons under their parent planet (indented rows) — ASHFALL attached under BRIMSTONE, new PALEMOON moon under AURELLE; badges unchanged.
+
 ## v0.2.1 — 2026-09-28 20:22
 - LOCAL SYSTEM tab: removed the system node graph (star/planets/moons) — the tab now shows only the explorable-worlds list at full panel width. WORLD MAP keeps its node graph; `components/ui/node-graph.tsx` unchanged and still in use there.
 

components/mission-control.tsx

@@ -72,11 +72,16 @@ const worldMapEdges: NodeGraphEdge[] = [
 
 // LOCAL SYSTEM — explorable worlds of the current system (regenerated per save after each jump, later).
 const explorablePlanets = [
-  { name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const },
-  { name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const },
-  { name: 'ASHFALL (MOON)', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const },
-  { name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const },
-  { name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const },
+  {
+    name: 'AURELLE', type: 'TERRESTRIAL // OCEAN CONTINENTS', state: 'UNEXPLORED' as const,
+    moons: [{ name: 'PALEMOON', type: 'ICE MOON // FROST PLAINS', state: 'UNEXPLORED' as const }],
+  },
+  {
+    name: 'BRIMSTONE', type: 'GAS GIANT // CLOUD DECKS', state: 'SCANNED' as const,
+    moons: [{ name: 'ASHFALL', type: 'VOLCANIC MOON // SULFUR VEINS', state: 'UNEXPLORED' as const }],
+  },
+  { name: 'CINDERROCK', type: 'ROCKY // IRON RICH', state: 'UNEXPLORED' as const, moons: [] },
+  { name: 'DRIFTBAND', type: 'ASTEROID FIELD // HAZARD', state: 'HAZARD' as const, moons: [] },
 ]
 
 const crew = [
@@ -389,31 +394,39 @@ export function MissionControl() {
                         >
                           EXPLORABLE WORLDS // FIND THINGS HERE (PLACEHOLDER)
                         </div>
-                        {explorablePlanets.map((planet, i) => (
+                        {explorablePlanets.flatMap((planet) => [
+                          { name: planet.name, type: planet.type, state: planet.state, depth: 0 },
+                          ...planet.moons.map((moon) => ({
+                            name: moon.name,
+                            type: moon.type,
+                            state: moon.state,
+                            depth: 1,
+                          })),
+                        ]).map((row, i, rows) => (
                           <div
-                            key={planet.name}
+                            key={row.name}
                             style={{
                               display: 'flex',
                               justifyContent: 'space-between',
                               alignItems: 'center',
                               gap: '0.5rem',
-                              padding: '0.6rem 0.75rem',
+                              padding: row.depth
+                                ? '0.6rem 0.75rem 0.6rem 1.75rem'
+                                : '0.6rem 0.75rem',
                               borderBottom:
-                                i < explorablePlanets.length - 1
-                                  ? '1px solid var(--border)'
-                                  : 'none',
+                                i < rows.length - 1 ? '1px solid var(--border)' : 'none',
                             }}
                           >
                             <div style={{ overflow: 'hidden' }}>
                               <div
                                 style={{
                                   fontSize: '0.68rem',
-                                  color: 'var(--text-secondary)',
+                                  color: row.depth ? 'var(--text-muted)' : 'var(--text-secondary)',
                                   letterSpacing: '0.04em',
                                   textTransform: 'uppercase',
                                 }}
                               >
-                                {planet.name}
+                                {row.name}
                               </div>
                               <div
                                 style={{
@@ -423,19 +436,19 @@ export function MissionControl() {
                                   marginTop: '2px',
                                 }}
                               >
-                                {planet.type}
+                                {row.type}
                               </div>
                             </div>
                             <Badge
                               variant={
-                                planet.state === 'UNEXPLORED'
+                                row.state === 'UNEXPLORED'
                                   ? 'SCANNING'
-                                  : planet.state === 'HAZARD'
+                                  : row.state === 'HAZARD'
                                     ? 'WARNING'
                                     : 'ACTIVE'
                               }
                             >
-                              {planet.state}
+                              {row.state}
                             </Badge>
                           </div>
                         ))}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-wanderer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",