From ef075ccb9b54c543bfda7f962cb67589e673d204 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 24 Jan 2026 20:12:43 +0000 Subject: [PATCH] feat: Move world nav buttons into search bars - Remove top world nav bar - Add Islands/Planets buttons to Map search bar - Add Map/Planets buttons to Islands search bar - Add Map/Islands buttons to Planets search bar - Move search bars to fixed position just below topbar - Compact button styling matching map design - v0.0.107 Co-Authored-By: Claude Opus 4.5 --- package-lock.json | 4 +-- package.json | 2 +- src/App.jsx | 28 ++--------------- src/components/Map/MapView.jsx | 11 ++++++- src/components/World/IslandsWorld.css | 44 ++++++++++++++++++++++----- src/components/World/IslandsWorld.jsx | 12 ++++++-- src/components/World/PlanetsWorld.css | 44 ++++++++++++++++++++++----- src/components/World/PlanetsWorld.jsx | 12 ++++++-- src/styles/layout.css | 6 +++- 9 files changed, 113 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index c13ae2f..fb6b129 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sociowire-frontend", - "version": "0.0.104", + "version": "0.0.107", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sociowire-frontend", - "version": "0.0.104", + "version": "0.0.107", "dependencies": { "@fortawesome/fontawesome-free": "^7.1.0", "axios": "^1.13.2", diff --git a/package.json b/package.json index 5d0c769..415778c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sociowire-frontend", "private": true, - "version": "0.0.104", + "version": "0.0.107", "type": "module", "scripts": { "dev": "vite --host 0.0.0.0", diff --git a/src/App.jsx b/src/App.jsx index f50cbde..ae0b653 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -214,31 +214,6 @@ export default function App() { currentView={currentView} /> - {/* World Switcher Navigation */} -
- - - -
-
{/* MAP WORLD - Reality */} @@ -262,6 +237,7 @@ export default function App() { selectedIsland={selectedIsland} onSelectIsland={setSelectedIsland} onOpenIslands={handleOpenIslands} + onOpenPlanets={handleOpenPlanets} />
@@ -308,6 +284,7 @@ export default function App() { theme={theme} onIslandClick={handleIslandClick} onOpenMap={handleOpenMap} + onOpenPlanets={handleOpenPlanets} /> @@ -327,6 +304,7 @@ export default function App() { diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index 6e6fd18..d86d3d9 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -142,6 +142,7 @@ export default function MapView({ selectedIsland, onSelectIsland, onOpenIslands, + onOpenPlanets, }) { const { authenticated, username, token, needsEmailVerification } = useAuth(); const CLUSTERS_ENABLED = false; @@ -2238,11 +2239,19 @@ export default function MapView({ + diff --git a/src/components/World/IslandsWorld.css b/src/components/World/IslandsWorld.css index d173f88..2d0fad0 100644 --- a/src/components/World/IslandsWorld.css +++ b/src/components/World/IslandsWorld.css @@ -2,7 +2,9 @@ .islands-world { position: relative; width: 100%; - min-height: 100vh; + min-height: calc(100vh - 100px); + margin: 0; + padding: 0; background: linear-gradient(180deg, #0a1628 0%, #0d2847 50%, #1e3a5f 100%); overflow: hidden; } @@ -16,21 +18,21 @@ /* Search bar */ .islands-world-search { - position: absolute; - top: 16px; + position: fixed; + top: 56px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; - gap: 10px; - background: rgba(15, 23, 42, 0.9); + gap: 8px; + background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 50px; - padding: 10px 16px; - width: 90%; - max-width: 360px; + padding: 8px 12px; + width: auto; + max-width: 500px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } @@ -53,6 +55,32 @@ border-radius: 20px; } +.islands-world-search .world-nav-inline { + display: flex; + gap: 4px; + margin-left: 6px; +} + +.islands-world-search .world-nav-btn-sm { + width: 30px; + height: 30px; + border: none; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); + font-size: 13px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.islands-world-search .world-nav-btn-sm:hover { + background: rgba(56, 189, 248, 0.3); + color: white; +} + .islands-world-search input { flex: 1; background: transparent; diff --git a/src/components/World/IslandsWorld.jsx b/src/components/World/IslandsWorld.jsx index 1fe1476..eac1657 100644 --- a/src/components/World/IslandsWorld.jsx +++ b/src/components/World/IslandsWorld.jsx @@ -10,7 +10,7 @@ import './IslandsWorld.css'; * IslandsWorld: Full-screen metaverse for personal islands * Each user has their own floating island in this virtual ocean */ -export default function IslandsWorld({ theme, onIslandClick, onOpenMap }) { +export default function IslandsWorld({ theme, onIslandClick, onOpenMap, onOpenPlanets }) { const { t } = useTranslation(); const { authenticated, username } = useAuth(); const containerRef = useRef(null); @@ -180,7 +180,7 @@ export default function IslandsWorld({ theme, onIslandClick, onOpenMap }) { return (
- {/* Search bar with icon */} + {/* Search bar with icon and world nav */}
@@ -196,6 +196,14 @@ export default function IslandsWorld({ theme, onIslandClick, onOpenMap }) { )} {islands.length} +
+ + +
{/* Main canvas */} diff --git a/src/components/World/PlanetsWorld.css b/src/components/World/PlanetsWorld.css index b3c3c90..00d2190 100644 --- a/src/components/World/PlanetsWorld.css +++ b/src/components/World/PlanetsWorld.css @@ -2,7 +2,9 @@ .planets-world { position: relative; width: 100%; - min-height: 100vh; + min-height: calc(100vh - 100px); + margin: 0; + padding: 0; background: radial-gradient(ellipse at center, #0f0f1a 0%, #050510 70%, #000005 100%); overflow: hidden; } @@ -16,21 +18,21 @@ /* Search bar */ .planets-world-search { - position: absolute; - top: 16px; + position: fixed; + top: 56px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; - gap: 10px; - background: rgba(15, 15, 26, 0.9); + gap: 8px; + background: rgba(15, 15, 26, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(155, 89, 182, 0.3); border-radius: 50px; - padding: 10px 16px; - width: 90%; - max-width: 360px; + padding: 8px 12px; + width: auto; + max-width: 500px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); } @@ -53,6 +55,32 @@ border-radius: 20px; } +.planets-world-search .world-nav-inline { + display: flex; + gap: 4px; + margin-left: 6px; +} + +.planets-world-search .world-nav-btn-sm { + width: 30px; + height: 30px; + border: none; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); + font-size: 13px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.planets-world-search .world-nav-btn-sm:hover { + background: rgba(155, 89, 182, 0.3); + color: white; +} + .planets-world-search input { flex: 1; background: transparent; diff --git a/src/components/World/PlanetsWorld.jsx b/src/components/World/PlanetsWorld.jsx index ec97e8b..b05b232 100644 --- a/src/components/World/PlanetsWorld.jsx +++ b/src/components/World/PlanetsWorld.jsx @@ -10,7 +10,7 @@ import './PlanetsWorld.css'; * PlanetsWorld: Full-screen metaverse for group spaces (planets) * Each planet represents a community/group floating in space */ -export default function PlanetsWorld({ theme, onOpenMap }) { +export default function PlanetsWorld({ theme, onOpenMap, onOpenIslands }) { const { t } = useTranslation(); const { authenticated } = useAuth(); const containerRef = useRef(null); @@ -168,7 +168,7 @@ export default function PlanetsWorld({ theme, onOpenMap }) { return (
- {/* Search bar with icon */} + {/* Search bar with icon and world nav */}
@@ -184,6 +184,14 @@ export default function PlanetsWorld({ theme, onOpenMap }) { )} {planets.length} +
+ + +
{/* Main canvas */} diff --git a/src/styles/layout.css b/src/styles/layout.css index df067b8..a7defe2 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -210,10 +210,14 @@ /* World containers */ .world-container { width: 100%; + margin: 0; + padding: 0; } .world-fullscreen { - min-height: calc(100vh - 110px); + min-height: calc(100vh - 100px); + margin: 0; + padding: 0; } /* World placeholder */