diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 8243c44..366b060 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -5,6 +5,8 @@ import Link from "next/link"; import "./globals.css"; import type { SpaceConfig } from "@/lib/spaces"; import { themeToCSS } from "@/lib/spaces"; +import { AppSwitcher } from "@/components/AppSwitcher"; +import { SpaceSwitcher } from "@/components/SpaceSwitcher"; const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api"; @@ -80,46 +82,57 @@ export default async function RootLayout({
{/* ── Sticky Nav ──────────────────────────────────── */}
-
- - {logoUrl ? ( - - ) : ( -
- rS -
- )} - - r - {name === "rSwag" ? "Swag" : name} - - +
+ {/* Left: App switcher + Logo */} +
+ +
+ + {logoUrl ? ( + + ) : ( +
+ rSw +
+ )} + + r + {name === "rSwag" ? "Swag" : name} + + +
- +
diff --git a/frontend/components/AppSwitcher.tsx b/frontend/components/AppSwitcher.tsx new file mode 100644 index 0000000..4880e65 --- /dev/null +++ b/frontend/components/AppSwitcher.tsx @@ -0,0 +1,188 @@ +'use client'; + +import { useState, useRef, useEffect } from 'react'; + +interface AppModule { + id: string; + name: string; + badge: string; + color: string; + emoji: string; + description: string; + domain?: string; +} + +const MODULES: AppModule[] = [ + // Creating + { id: 'space', name: 'rSpace', badge: 'rS', color: 'bg-teal-300', emoji: '🎨', description: 'Real-time collaborative canvas', domain: 'rspace.online' }, + { id: 'notes', name: 'rNotes', badge: 'rN', color: 'bg-amber-300', emoji: '📝', description: 'Group note-taking & knowledge capture', domain: 'rnotes.online' }, + { id: 'pubs', name: 'rPubs', badge: 'rP', color: 'bg-rose-300', emoji: '📰', description: 'Collaborative publishing platform', domain: 'rpubs.online' }, + // Planning + { id: 'cal', name: 'rCal', badge: 'rC', color: 'bg-sky-300', emoji: '📅', description: 'Collaborative scheduling & events', domain: 'rcal.online' }, + { id: 'trips', name: 'rTrips', badge: 'rT', color: 'bg-emerald-300', emoji: '✈️', description: 'Group travel planning in real time', domain: 'rtrips.online' }, + { id: 'maps', name: 'rMaps', badge: 'rM', color: 'bg-green-300', emoji: '🗺️', description: 'Collaborative real-time mapping', domain: 'rmaps.online' }, + // Discussing & Deciding + { id: 'inbox', name: 'rInbox', badge: 'rI', color: 'bg-indigo-300', emoji: '📬', description: 'Private group messaging', domain: 'rinbox.online' }, + { id: 'choices', name: 'rChoices', badge: 'rCh', color: 'bg-fuchsia-300', emoji: '🔀', description: 'Collaborative decision making', domain: 'rchoices.online' }, + { id: 'vote', name: 'rVote', badge: 'rV', color: 'bg-violet-300', emoji: '🗳️', description: 'Real-time polls & governance', domain: 'rvote.online' }, + // Funding & Commerce + { id: 'funds', name: 'rFunds', badge: 'rF', color: 'bg-lime-300', emoji: '💸', description: 'Collaborative fundraising & grants', domain: 'rfunds.online' }, + { id: 'wallet', name: 'rWallet', badge: 'rW', color: 'bg-yellow-300', emoji: '💰', description: 'Multi-chain crypto wallet', domain: 'rwallet.online' }, + { id: 'cart', name: 'rCart', badge: 'rCt', color: 'bg-orange-300', emoji: '🛒', description: 'Group commerce & shared shopping', domain: 'rcart.online' }, + { id: 'swag', name: 'rSwag', badge: 'rSw', color: 'bg-cyan-300', emoji: '👕', description: 'Community merch & print-on-demand', domain: 'rswag.online' }, + { id: 'auctions', name: 'rAuctions', badge: 'rA', color: 'bg-red-300', emoji: '🔨', description: 'Live auction platform', domain: 'rauctions.online' }, + // Social & Sharing + { id: 'network', name: 'rNetwork', badge: 'rNe', color: 'bg-blue-300', emoji: '🌐', description: 'Community network & social graph', domain: 'rnetwork.online' }, + { id: 'files', name: 'rFiles', badge: 'rFi', color: 'bg-cyan-300', emoji: '📁', description: 'Collaborative file storage', domain: 'rfiles.online' }, + { id: 'tube', name: 'rTube', badge: 'rTu', color: 'bg-pink-300', emoji: '🎬', description: 'Group video platform', domain: 'rtube.online' }, + { id: 'data', name: 'rData', badge: 'rD', color: 'bg-purple-300', emoji: '📊', description: 'Analytics & insights dashboard', domain: 'rdata.online' }, + { id: 'work', name: 'rWork', badge: 'rWk', color: 'bg-slate-300', emoji: '📋', description: 'Collective task management', domain: 'rwork.online' }, +]; + +const MODULE_CATEGORIES: Record = { + space: 'Creating', + notes: 'Creating', + pubs: 'Creating', + cal: 'Planning', + trips: 'Planning', + maps: 'Planning', + inbox: 'Discussing & Deciding', + choices: 'Discussing & Deciding', + vote: 'Discussing & Deciding', + funds: 'Funding & Commerce', + wallet: 'Funding & Commerce', + cart: 'Funding & Commerce', + swag: 'Funding & Commerce', + auctions: 'Funding & Commerce', + network: 'Social & Sharing', + files: 'Social & Sharing', + tube: 'Social & Sharing', + data: 'Social & Sharing', + work: 'Social & Sharing', +}; + +const CATEGORY_ORDER = [ + 'Creating', + 'Planning', + 'Discussing & Deciding', + 'Funding & Commerce', + 'Social & Sharing', +]; + +interface AppSwitcherProps { + current?: string; +} + +export function AppSwitcher({ current = 'swag' }: AppSwitcherProps) { + const [open, setOpen] = useState(false); + const ref = useRef(null); + + useEffect(() => { + function handleClick(e: MouseEvent) { + if (ref.current && !ref.current.contains(e.target as Node)) { + setOpen(false); + } + } + document.addEventListener('click', handleClick); + return () => document.removeEventListener('click', handleClick); + }, []); + + const currentMod = MODULES.find((m) => m.id === current); + + const groups = new Map(); + for (const m of MODULES) { + const cat = MODULE_CATEGORIES[m.id] || 'Other'; + if (!groups.has(cat)) groups.set(cat, []); + groups.get(cat)!.push(m); + } + + return ( +
+ + + {open && ( +
+
+ + r* + +
+
rStack
+
Self-hosted community app suite
+
+
+ + {CATEGORY_ORDER.map((cat) => { + const items = groups.get(cat); + if (!items || items.length === 0) return null; + return ( + + ); + })} + + +
+ )} +
+ ); +} diff --git a/frontend/components/SpaceSwitcher.tsx b/frontend/components/SpaceSwitcher.tsx new file mode 100644 index 0000000..f70b491 --- /dev/null +++ b/frontend/components/SpaceSwitcher.tsx @@ -0,0 +1,115 @@ +'use client'; + +import { useState, useRef, useEffect } from 'react'; +import { getSpaceIdFromCookie } from '@/lib/spaces'; + +const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api'; + +interface SpaceItem { + id: string; + name: string; + tagline: string; + domain: string; + logo_url: string | null; +} + +export function SpaceSwitcher() { + const [open, setOpen] = useState(false); + const [spaces, setSpaces] = useState([]); + const [currentSpaceId, setCurrentSpaceId] = useState('default'); + const ref = useRef(null); + + useEffect(() => { + setCurrentSpaceId(getSpaceIdFromCookie()); + }, []); + + useEffect(() => { + fetch(`${API_URL}/spaces`) + .then((res) => (res.ok ? res.json() : [])) + .then((data: SpaceItem[]) => setSpaces(data)) + .catch(() => {}); + }, []); + + useEffect(() => { + function handleClick(e: MouseEvent) { + if (ref.current && !ref.current.contains(e.target as Node)) { + setOpen(false); + } + } + document.addEventListener('click', handleClick); + return () => document.removeEventListener('click', handleClick); + }, []); + + const currentSpace = spaces.find((s) => s.id === currentSpaceId) || { + id: 'default', + name: 'rSwag', + tagline: 'Community Merch, On Demand', + domain: 'rswag.online', + logo_url: null, + }; + + if (spaces.length <= 1) return null; + + return ( +
+ + + {open && ( + + )} +
+ ); +}