feat: add rApp-style header with AppSwitcher and SpaceSwitcher dropdowns
Matches the shared header pattern used across rWork, rMaps, and other rApps. AppSwitcher shows all 19 r* ecosystem apps grouped by category. SpaceSwitcher allows switching between rSwag spaces (e.g. Fungi Flows). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d5f742341b
commit
52ba999dda
|
|
@ -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({
|
|||
<div className="min-h-screen flex flex-col">
|
||||
{/* ── Sticky Nav ──────────────────────────────────── */}
|
||||
<header className="border-b sticky top-0 z-50 bg-background/90 backdrop-blur-sm">
|
||||
<div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 font-bold text-lg"
|
||||
>
|
||||
{logoUrl ? (
|
||||
<img src={logoUrl} alt="" className="h-8 w-8 rounded" />
|
||||
) : (
|
||||
<div className="h-8 w-8 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center text-primary-foreground text-sm font-bold">
|
||||
rS
|
||||
</div>
|
||||
)}
|
||||
<span>
|
||||
<span className="text-primary">r</span>
|
||||
{name === "rSwag" ? "Swag" : name}
|
||||
</span>
|
||||
</Link>
|
||||
<div className="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between gap-3">
|
||||
{/* Left: App switcher + Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<AppSwitcher current="swag" />
|
||||
<div className="w-px h-5 bg-white/10 hidden sm:block" />
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 font-bold text-lg"
|
||||
>
|
||||
{logoUrl ? (
|
||||
<img src={logoUrl} alt="" className="h-7 w-7 rounded" />
|
||||
) : (
|
||||
<div className="h-7 w-7 bg-gradient-to-br from-cyan-300 to-amber-300 rounded-lg flex items-center justify-center text-slate-900 text-[10px] font-black leading-none">
|
||||
rSw
|
||||
</div>
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
<span className="text-primary">r</span>
|
||||
{name === "rSwag" ? "Swag" : name}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="flex items-center gap-1 sm:gap-4">
|
||||
{/* Center: Nav links */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2">
|
||||
<Link
|
||||
href="/design"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5 hidden sm:inline-flex"
|
||||
className="text-sm text-slate-300 hover:text-white transition-colors px-2.5 py-1.5 rounded-md hover:bg-white/[0.06] hidden sm:inline-flex"
|
||||
>
|
||||
Design
|
||||
</Link>
|
||||
<Link
|
||||
href="/upload"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5"
|
||||
className="text-sm text-slate-300 hover:text-white transition-colors px-2.5 py-1.5 rounded-md hover:bg-white/[0.06]"
|
||||
>
|
||||
Upload
|
||||
</Link>
|
||||
<Link
|
||||
href="/products"
|
||||
className="text-sm px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
|
||||
className="text-sm px-4 py-1.5 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Shop
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Right: Space switcher + Cart */}
|
||||
<div className="flex items-center gap-2">
|
||||
<SpaceSwitcher />
|
||||
<Link
|
||||
href="/cart"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5"
|
||||
className="text-slate-300 hover:text-white transition-colors p-2 rounded-md hover:bg-white/[0.06]"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
|
|
@ -135,7 +148,7 @@ export default async function RootLayout({
|
|||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -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<string, string> = {
|
||||
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<HTMLDivElement>(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<string, AppModule[]>();
|
||||
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 (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
|
||||
className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm font-semibold bg-white/[0.08] hover:bg-white/[0.12] text-slate-200 transition-colors"
|
||||
>
|
||||
{currentMod && (
|
||||
<span className={`w-6 h-6 rounded-md ${currentMod.color} flex items-center justify-center text-[10px] font-black text-slate-900 leading-none flex-shrink-0`}>
|
||||
{currentMod.badge}
|
||||
</span>
|
||||
)}
|
||||
<span className="hidden sm:inline">{currentMod?.name || 'rStack'}</span>
|
||||
<span className="text-[0.7em] opacity-60">▾</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 mt-1.5 w-[300px] max-h-[70vh] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
|
||||
<div className="px-3.5 py-3 border-b border-white/[0.08] flex items-center gap-2.5">
|
||||
<span className="w-7 h-7 rounded-lg bg-gradient-to-br from-cyan-300 via-violet-300 to-rose-300 flex items-center justify-center text-[11px] font-black text-slate-900 leading-none">
|
||||
r*
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-white">rStack</div>
|
||||
<div className="text-[10px] text-slate-400">Self-hosted community app suite</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{CATEGORY_ORDER.map((cat) => {
|
||||
const items = groups.get(cat);
|
||||
if (!items || items.length === 0) return null;
|
||||
return (
|
||||
<div key={cat}>
|
||||
<div className="px-3.5 pt-3 pb-1 text-[0.6rem] font-bold uppercase tracking-widest text-slate-500 select-none">
|
||||
{cat}
|
||||
</div>
|
||||
{items.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`flex items-center group ${
|
||||
m.id === current ? 'bg-white/[0.07]' : 'hover:bg-white/[0.04]'
|
||||
} transition-colors`}
|
||||
>
|
||||
<a
|
||||
href={m.domain ? `https://${m.domain}` : '#'}
|
||||
className="flex items-center gap-2.5 flex-1 px-3.5 py-2 text-slate-200 no-underline min-w-0"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className={`w-7 h-7 rounded-md ${m.color} flex items-center justify-center text-[10px] font-black text-slate-900 leading-none flex-shrink-0`}>
|
||||
{m.badge}
|
||||
</span>
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-semibold">{m.name}</span>
|
||||
<span className="text-sm flex-shrink-0">{m.emoji}</span>
|
||||
</div>
|
||||
<span className="text-[11px] text-slate-400 truncate">{m.description}</span>
|
||||
</div>
|
||||
</a>
|
||||
{m.domain && (
|
||||
<a
|
||||
href={`https://${m.domain}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 flex items-center justify-center text-xs text-cyan-400 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity flex-shrink-0"
|
||||
title={m.domain}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="px-3.5 py-2.5 border-t border-white/[0.08] text-center">
|
||||
<a
|
||||
href="https://rstack.online"
|
||||
className="text-[11px] text-slate-500 hover:text-cyan-400 transition-colors no-underline"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
rstack.online — self-hosted, community-run
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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<SpaceItem[]>([]);
|
||||
const [currentSpaceId, setCurrentSpaceId] = useState('default');
|
||||
const ref = useRef<HTMLDivElement>(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 (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
|
||||
className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm font-medium bg-white/[0.08] hover:bg-white/[0.12] text-slate-200 transition-colors"
|
||||
>
|
||||
{currentSpace.logo_url ? (
|
||||
<img src={currentSpace.logo_url} alt="" className="w-5 h-5 rounded" />
|
||||
) : (
|
||||
<span className="w-5 h-5 rounded bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-[9px] font-bold text-primary-foreground leading-none flex-shrink-0">
|
||||
{currentSpace.name.slice(0, 2)}
|
||||
</span>
|
||||
)}
|
||||
<span className="hidden sm:inline">{currentSpace.name}</span>
|
||||
<span className="text-[0.7em] opacity-60">▾</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 mt-1.5 w-[260px] rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
|
||||
<div className="px-3.5 py-2.5 border-b border-white/[0.08]">
|
||||
<div className="text-[0.6rem] font-bold uppercase tracking-widest text-slate-500 select-none">
|
||||
Spaces
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{spaces.map((s) => (
|
||||
<a
|
||||
key={s.id}
|
||||
href={s.domain ? `https://${s.domain}` : '#'}
|
||||
className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors ${
|
||||
s.id === currentSpaceId
|
||||
? 'bg-white/[0.07]'
|
||||
: 'hover:bg-white/[0.04]'
|
||||
}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{s.logo_url ? (
|
||||
<img src={s.logo_url} alt="" className="w-7 h-7 rounded-md flex-shrink-0" />
|
||||
) : (
|
||||
<span className="w-7 h-7 rounded-md bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-[10px] font-bold text-primary-foreground leading-none flex-shrink-0">
|
||||
{s.name.slice(0, 2)}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<span className="text-sm font-semibold">{s.name}</span>
|
||||
<span className="text-[11px] text-slate-400 truncate">{s.tagline}</span>
|
||||
</div>
|
||||
{s.id === currentSpaceId && (
|
||||
<span className="text-xs text-cyan-400 flex-shrink-0">✓</span>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<div className="px-3.5 py-2 border-t border-white/[0.08] text-center">
|
||||
<span className="text-[11px] text-slate-500">
|
||||
Each space has its own designs & theme
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue