From 8b3feec25b3da47e29bf8033eaad0ca1de872dfb Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sat, 14 Mar 2026 01:42:54 +0000 Subject: [PATCH] Add rStack integration: AppSwitcher, Header, SpaceSwitcher, provision - AppSwitcher with full rStack dropdown (rEvents in Planning category) - Header component with AppSwitcher + SpaceSwitcher + UserMenu - Spaces API proxy to rSpace for SpaceSwitcher dropdown - Internal provision endpoint for rSpace Registry activation - Auth logout route Co-Authored-By: Claude Opus 4.6 --- src/app/api/auth/logout/route.ts | 7 + src/app/api/internal/provision/route.ts | 17 ++ src/app/api/spaces/route.ts | 41 ++++ src/app/layout.tsx | 2 + src/components/AppSwitcher.tsx | 243 ++++++++++++++++++++++++ src/components/Header.tsx | 21 ++ src/components/SpaceSwitcher.tsx | 186 ++++++++++++++++++ src/components/UserMenu.tsx | 93 +++++++++ 8 files changed, 610 insertions(+) create mode 100644 src/app/api/auth/logout/route.ts create mode 100644 src/app/api/internal/provision/route.ts create mode 100644 src/app/api/spaces/route.ts create mode 100644 src/components/AppSwitcher.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/components/SpaceSwitcher.tsx create mode 100644 src/components/UserMenu.tsx diff --git a/src/app/api/auth/logout/route.ts b/src/app/api/auth/logout/route.ts new file mode 100644 index 0000000..58fad84 --- /dev/null +++ b/src/app/api/auth/logout/route.ts @@ -0,0 +1,7 @@ +import { NextResponse } from 'next/server'; + +export async function POST() { + const res = NextResponse.json({ ok: true }); + res.cookies.delete('encryptid_token'); + return res; +} diff --git a/src/app/api/internal/provision/route.ts b/src/app/api/internal/provision/route.ts new file mode 100644 index 0000000..47f17db --- /dev/null +++ b/src/app/api/internal/provision/route.ts @@ -0,0 +1,17 @@ +import { NextResponse } from "next/server"; + +/** + * Internal provision endpoint β€” called by rSpace Registry when activating + * this app for a space. No auth required (only reachable from Docker network). + * + * Payload: { space, description, admin_email, public, owner_did } + */ +export async function POST(request: Request) { + const body = await request.json(); + const space: string = body.space?.trim(); + if (!space) { + return NextResponse.json({ error: "Missing space name" }, { status: 400 }); + } + const ownerDid: string = body.owner_did || ""; + return NextResponse.json({ status: "ok", space, owner_did: ownerDid, message: "revents space acknowledged" }); +} diff --git a/src/app/api/spaces/route.ts b/src/app/api/spaces/route.ts new file mode 100644 index 0000000..6822303 --- /dev/null +++ b/src/app/api/spaces/route.ts @@ -0,0 +1,41 @@ +/** + * Spaces API proxy β€” forwards to rSpace (the canonical spaces authority). + * + * Every r*App proxies /api/spaces to rSpace so the SpaceSwitcher dropdown + * shows the same spaces everywhere. The EncryptID token is forwarded so + * rSpace can return user-specific spaces (owned/member). + */ + +import { NextRequest, NextResponse } from 'next/server'; + +const RSPACE_API = process.env.RSPACE_API_URL || 'https://rspace.online'; + +export async function GET(req: NextRequest) { + const headers: Record = {}; + + const auth = req.headers.get('Authorization'); + if (auth) { + headers['Authorization'] = auth; + } else { + const tokenCookie = req.cookies.get('encryptid_token'); + if (tokenCookie) { + headers['Authorization'] = `Bearer ${tokenCookie.value}`; + } + } + + try { + const res = await fetch(`${RSPACE_API}/api/spaces`, { + headers, + next: { revalidate: 30 }, + }); + + if (!res.ok) { + return NextResponse.json({ spaces: [] }); + } + + const data = await res.json(); + return NextResponse.json(data); + } catch { + return NextResponse.json({ spaces: [] }); + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 01f7448..a61bc40 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next' import { Inter, JetBrains_Mono } from 'next/font/google' import './globals.css' import { Providers } from '@/providers' +import { Header } from '@/components/Header' const inter = Inter({ subsets: ['latin'], variable: '--font-inter' }) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' }) @@ -23,6 +24,7 @@ export default function RootLayout({ +
{children} diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx new file mode 100644 index 0000000..2fc7c66 --- /dev/null +++ b/src/components/AppSwitcher.tsx @@ -0,0 +1,243 @@ +'use client'; + +import { useState, useRef, useEffect } from 'react'; + +export interface AppModule { + id: string; + name: string; + badge: string; // favicon-style abbreviation: rS, rN, rP, etc. + color: string; // Tailwind bg class for the pastel badge + emoji: string; // function emoji shown right of title + 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' }, + { id: 'tube', name: 'rTube', badge: 'rTu', color: 'bg-pink-300', emoji: '🎬', description: 'Community video platform', domain: 'rtube.online' }, + { id: 'swag', name: 'rSwag', badge: 'rSw', color: 'bg-red-200', emoji: 'πŸ‘•', description: 'Community merch & swag store', domain: 'rswag.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' }, + { id: 'events', name: 'rEvents', badge: 'rEv', color: 'bg-violet-200', emoji: 'πŸŽͺ', description: 'Event aggregation & discovery', domain: 'revents.online' }, + // Communicating + { id: 'chats', name: 'rChats', badge: 'rCh', color: 'bg-emerald-200', emoji: 'πŸ’¬', description: 'Real-time encrypted messaging', domain: 'rchats.online' }, + { id: 'inbox', name: 'rInbox', badge: 'rI', color: 'bg-indigo-300', emoji: 'πŸ“¬', description: 'Private group messaging', domain: 'rinbox.online' }, + { id: 'mail', name: 'rMail', badge: 'rMa', color: 'bg-blue-200', emoji: 'βœ‰οΈ', description: 'Community email & newsletters', domain: 'rmail.online' }, + { id: 'forum', name: 'rForum', badge: 'rFo', color: 'bg-amber-200', emoji: 'πŸ’­', description: 'Threaded community discussions', domain: 'rforum.online' }, + // Deciding + { id: 'choices', name: 'rChoices', badge: 'rCo', 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: 'auctions', name: 'rAuctions', badge: 'rA', color: 'bg-red-300', emoji: 'πŸ”¨', description: 'Live auction platform', domain: 'rauctions.online' }, + // Sharing + { id: 'photos', name: 'rPhotos', badge: 'rPh', color: 'bg-pink-200', emoji: 'πŸ“Έ', description: 'Community photo commons', domain: 'rphotos.online' }, + { 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: 'socials', name: 'rSocials', badge: 'rSo', color: 'bg-sky-200', emoji: 'πŸ“’', description: 'Social media management', domain: 'rsocials.online' }, + // Observing + { id: 'data', name: 'rData', badge: 'rD', color: 'bg-purple-300', emoji: 'πŸ“Š', description: 'Analytics & insights dashboard', domain: 'rdata.online' }, + // Work & Productivity + { id: 'work', name: 'rWork', badge: 'rWo', color: 'bg-slate-300', emoji: 'πŸ“‹', description: 'Project & task management', domain: 'rwork.online' }, + // Identity & Infrastructure + { id: 'ids', name: 'rIDs', badge: 'rId', color: 'bg-emerald-300', emoji: 'πŸ”', description: 'Passkey identity & zero-knowledge auth', domain: 'ridentity.online' }, + { id: 'stack', name: 'rStack', badge: 'r*', color: 'bg-gradient-to-br from-cyan-300 via-violet-300 to-rose-300', emoji: 'πŸ“¦', description: 'Open-source community infrastructure', domain: 'rstack.online' }, +]; + +const MODULE_CATEGORIES: Record = { + space: 'Creating', + notes: 'Creating', + pubs: 'Creating', + tube: 'Creating', + swag: 'Creating', + cal: 'Planning', + trips: 'Planning', + maps: 'Planning', + events: 'Planning', + chats: 'Communicating', + inbox: 'Communicating', + mail: 'Communicating', + forum: 'Communicating', + choices: 'Deciding', + vote: 'Deciding', + funds: 'Funding & Commerce', + wallet: 'Funding & Commerce', + cart: 'Funding & Commerce', + auctions: 'Funding & Commerce', + photos: 'Sharing', + network: 'Sharing', + files: 'Sharing', + socials: 'Sharing', + data: 'Observing', + work: 'Work & Productivity', + ids: 'Identity & Infrastructure', + stack: 'Identity & Infrastructure', +}; + +const CATEGORY_ORDER = [ + 'Creating', + 'Planning', + 'Communicating', + 'Deciding', + 'Funding & Commerce', + 'Sharing', + 'Observing', + 'Work & Productivity', + 'Identity & Infrastructure', +]; + +/** Build the URL for a module, using username subdomain if logged in */ +function getModuleUrl(m: AppModule, username: string | null): string { + if (!m.domain) return '#'; + if (username) { + // Generate . URL + return `https://${username}.${m.domain}`; + } + return `https://${m.domain}`; +} + +interface AppSwitcherProps { + current?: string; +} + +export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) { + const [open, setOpen] = useState(false); + const [username, setUsername] = useState(null); + 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); + }, []); + + // Fetch current user's username for subdomain links + useEffect(() => { + fetch('/api/me') + .then((r) => r.json()) + .then((data) => { + if (data.authenticated && data.user?.username) { + setUsername(data.user.username); + } + }) + .catch(() => { /* not logged in */ }); + }, []); + + const currentMod = MODULES.find((m) => m.id === current); + + // Group modules by category + 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 ( +
+ {/* Trigger button */} + + + {/* Dropdown */} + {open && ( +
+ {/* rStack header */} +
+ + r* + +
+
rStack
+
Self-hosted community app suite
+
+
+ + {/* Categories */} + {CATEGORY_ORDER.map((cat) => { + const items = groups.get(cat); + if (!items || items.length === 0) return null; + return ( + + ); + })} + + {/* Footer */} + +
+ )} +
+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..eac54fd --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,21 @@ +'use client'; + +import { AppSwitcher } from './AppSwitcher'; +import { SpaceSwitcher } from './SpaceSwitcher'; +import { UserMenu } from './UserMenu'; + +export function Header() { + return ( + + ); +} diff --git a/src/components/SpaceSwitcher.tsx b/src/components/SpaceSwitcher.tsx new file mode 100644 index 0000000..b23e813 --- /dev/null +++ b/src/components/SpaceSwitcher.tsx @@ -0,0 +1,186 @@ +'use client'; + +import { useState, useRef, useEffect } from 'react'; + +interface SpaceInfo { + slug: string; + name: string; + icon?: string; + role?: string; +} + +interface SpaceSwitcherProps { + /** Current app domain, e.g. 'rchats.online'. Space links become . */ + domain?: string; +} + +/** Read the EncryptID token from localStorage (set by token-relay across r*.online) */ +function getEncryptIDToken(): string | null { + if (typeof window === 'undefined') return null; + try { + return localStorage.getItem('encryptid_token'); + } catch { + return null; + } +} + +export function SpaceSwitcher({ domain }: SpaceSwitcherProps) { + const [open, setOpen] = useState(false); + const [spaces, setSpaces] = useState([]); + const [loaded, setLoaded] = useState(false); + const [isAuthenticated, setIsAuthenticated] = useState(false); + const ref = useRef(null); + + // Derive domain from window.location if not provided + const appDomain = domain || (typeof window !== 'undefined' + ? window.location.hostname.split('.').slice(-2).join('.') + : 'rspace.online'); + + 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); + }, []); + + // Check auth status on mount + useEffect(() => { + const token = getEncryptIDToken(); + if (token) { + setIsAuthenticated(true); + } else { + // Fallback: check /api/me + fetch('/api/me') + .then((r) => r.json()) + .then((data) => { + if (data.authenticated) setIsAuthenticated(true); + }) + .catch(() => {}); + } + }, []); + + const loadSpaces = async () => { + if (loaded) return; + try { + // Pass EncryptID token so the proxy can forward it to rSpace + const token = getEncryptIDToken(); + const headers: Record = {}; + if (token) headers['Authorization'] = `Bearer ${token}`; + + const res = await fetch('/api/spaces', { headers }); + if (res.ok) { + const data = await res.json(); + setSpaces(data.spaces || []); + } + } catch { + // API not available + } + setLoaded(true); + }; + + const handleOpen = async () => { + const nowOpen = !open; + setOpen(nowOpen); + if (nowOpen && !loaded) { + await loadSpaces(); + } + }; + + /** Build URL for a space: . */ + const spaceUrl = (slug: string) => `https://${slug}.${appDomain}`; + + const mySpaces = spaces.filter((s) => s.role); + const publicSpaces = spaces.filter((s) => !s.role); + + return ( +
+ + + {open && ( +
+ {!loaded ? ( +
Loading spaces...
+ ) : spaces.length === 0 ? ( + <> +
+ {isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'} +
+ setOpen(false)} + > + + Create new space + + + ) : ( + <> + {mySpaces.length > 0 && ( + <> +
+ Your spaces +
+ {mySpaces.map((s) => ( + setOpen(false)} + > + {s.icon || '🌐'} + {s.name} + {s.role && ( + + {s.role} + + )} + + ))} + + )} + + {publicSpaces.length > 0 && ( + <> + {mySpaces.length > 0 &&
} +
+ Public spaces +
+ {publicSpaces.map((s) => ( + setOpen(false)} + > + {s.icon || '🌐'} + {s.name} + + ))} + + )} + + + )} +
+ ); +} diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx new file mode 100644 index 0000000..b6e87f0 --- /dev/null +++ b/src/components/UserMenu.tsx @@ -0,0 +1,93 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; + +interface UserInfo { + username?: string; + did?: string; +} + +export function UserMenu() { + const [user, setUser] = useState(null); + const [loading, setLoading] = useState(true); + const [open, setOpen] = useState(false); + const ref = useRef(null); + + useEffect(() => { + fetch('/api/me') + .then((r) => r.json()) + .then((data) => { + if (data.authenticated && data.user) { + setUser(data.user); + } + }) + .catch(() => {}) + .finally(() => setLoading(false)); + }, []); + + 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); + }, []); + + if (loading) { + return ( +
+ ); + } + + if (!user) { + return ( + + πŸ”‘ Sign In + + ); + } + + const displayName = user.username || (user.did ? `${user.did.slice(0, 12)}...` : 'User'); + + return ( +
+ + + {open && ( +
+
+
{displayName}
+ {user.did && ( +
{user.did}
+ )} +
+ +
+ )} +
+ ); +}