feat: Add planets fetch and tabs UI to IslandUniverse

- Fetch planets alongside islands with error handling
- Add filter tabs (All/Islands/Planets)
- Show planets count in header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Island/IslandUniverse.jsx

@@ -2,11 +2,11 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { fetchIslands } from '../../api/client';
+import { fetchIslands, fetchPlanets } from '../../api/client';
 import '../../styles/universe.css';
 
 /**
- * IslandUniverse: View all user islands floating in virtual space using MapLibre 3D
+ * IslandUniverse: View all user islands and planets floating in virtual space using MapLibre 3D
  * Lightweight alternative to Three.js - uses existing MapLibre dependency
  */
 export default function IslandUniverse({ onClose, onIslandClick }) {
@@ -15,14 +15,37 @@ export default function IslandUniverse({ onClose, onIslandClick }) {
   const mapRef = useRef(null);
   const markersRef = useRef([]);
   const [islands, setIslands] = useState([]);
+  const [planets, setPlanets] = useState([]);
+  const [activeTab, setActiveTab] = useState('all');
   const [hoveredIsland, setHoveredIsland] = useState(null);
 
-  // Fetch all islands
+  // Fetch all islands and planets
   useEffect(() => {
-    fetchIslands({ limit: 100 }).then(islandData => {
+    let mounted = true;
-      console.log('[IslandUniverse] Loaded', islandData.length, 'islands');
+
-      setIslands(islandData);
+    fetchIslands({ limit: 100 })
+      .then(data => {
+        if (mounted) {
+          console.log('[IslandUniverse] Loaded', data?.length || 0, 'islands');
+          setIslands(data || []);
+        }
+      })
+      .catch(err => {
+        console.warn('[IslandUniverse] Failed to fetch islands:', err);
       });
+
+    fetchPlanets({ limit: 50 })
+      .then(data => {
+        if (mounted) {
+          console.log('[IslandUniverse] Loaded', data?.length || 0, 'planets');
+          setPlanets(data || []);
+        }
+      })
+      .catch(err => {
+        console.warn('[IslandUniverse] Failed to fetch planets:', err);
+      });
+
+    return () => { mounted = false; };
   }, []);
 
   useEffect(() => {
@@ -211,7 +234,32 @@ export default function IslandUniverse({ onClose, onIslandClick }) {
 
         <div className="island-universe-header">
           <h1>🌌 {t('universe.title')}</h1>
-          <p>{t('universe.islandsCount', { count: islands.length })}</p>
+          <p>
+            {t('universe.islandsCount', { count: islands.length })}
+            {planets.length > 0 && ` • ${planets.length} ${t('universe.planets')}`}
+          </p>
+        </div>
+
+        {/* Filter Tabs */}
+        <div className="island-universe-tabs">
+          <button
+            className={`universe-tab ${activeTab === 'all' ? 'is-active' : ''}`}
+            onClick={() => setActiveTab('all')}
+          >
+            {t('universe.all')}
+          </button>
+          <button
+            className={`universe-tab ${activeTab === 'islands' ? 'is-active' : ''}`}
+            onClick={() => setActiveTab('islands')}
+          >
+            🏝️ {t('universe.islandsTab')}
+          </button>
+          <button
+            className={`universe-tab ${activeTab === 'planets' ? 'is-active' : ''}`}
+            onClick={() => setActiveTab('planets')}
+          >
+            🪐 {t('universe.planetsTab')}
+          </button>
         </div>
 
         <div