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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
6bfea8bd0f
commit
8b3feec25b
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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" });
|
||||
}
|
||||
|
|
@ -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<string, string> = {};
|
||||
|
||||
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: [] });
|
||||
}
|
||||
}
|
||||
|
|
@ -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({
|
|||
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
||||
<body className="bg-[#0b1120] min-h-screen text-gray-100">
|
||||
<Providers>
|
||||
<Header />
|
||||
{children}
|
||||
</Providers>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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<string, string> = {
|
||||
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 <username>.<domain> 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<string | null>(null);
|
||||
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);
|
||||
}, []);
|
||||
|
||||
// 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<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}>
|
||||
{/* Trigger button */}
|
||||
<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>{currentMod?.name || 'rStack'}</span>
|
||||
<span className="text-[0.7em] opacity-60">▾</span>
|
||||
</button>
|
||||
|
||||
{/* Dropdown */}
|
||||
{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]">
|
||||
{/* rStack header */}
|
||||
<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>
|
||||
|
||||
{/* Categories */}
|
||||
{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={getModuleUrl(m, username)}
|
||||
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)}
|
||||
>
|
||||
{/* Pastel favicon badge */}
|
||||
<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>
|
||||
{/* Name + description */}
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Footer */}
|
||||
<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,21 @@
|
|||
'use client';
|
||||
|
||||
import { AppSwitcher } from './AppSwitcher';
|
||||
import { SpaceSwitcher } from './SpaceSwitcher';
|
||||
import { UserMenu } from './UserMenu';
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<nav className="border-b border-slate-800 backdrop-blur-sm bg-slate-900/85 sticky top-0 z-50">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1 min-w-0">
|
||||
<AppSwitcher current="events" />
|
||||
<SpaceSwitcher />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 <space>.<domain> */
|
||||
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<SpaceInfo[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(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<string, string> = {};
|
||||
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: <space>.<current-app-domain> */
|
||||
const spaceUrl = (slug: string) => `https://${slug}.${appDomain}`;
|
||||
|
||||
const mySpaces = spaces.filter((s) => s.role);
|
||||
const publicSpaces = spaces.filter((s) => !s.role);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleOpen(); }}
|
||||
className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<span className="opacity-40 font-light mr-0.5">/</span>
|
||||
<span className="max-w-[160px] truncate">personal</span>
|
||||
<span className="text-[0.7em] opacity-50">▾</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full left-0 mt-1.5 min-w-[240px] max-h-[400px] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
|
||||
{!loaded ? (
|
||||
<div className="px-4 py-4 text-center text-sm text-slate-400">Loading spaces...</div>
|
||||
) : spaces.length === 0 ? (
|
||||
<>
|
||||
<div className="px-4 py-4 text-center text-sm text-slate-400">
|
||||
{isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'}
|
||||
</div>
|
||||
<a
|
||||
href="https://rspace.online/new"
|
||||
className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
+ Create new space
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{mySpaces.length > 0 && (
|
||||
<>
|
||||
<div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
|
||||
Your spaces
|
||||
</div>
|
||||
{mySpaces.map((s) => (
|
||||
<a
|
||||
key={s.slug}
|
||||
href={spaceUrl(s.slug)}
|
||||
className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="text-base">{s.icon || '🌐'}</span>
|
||||
<span className="text-sm font-medium flex-1">{s.name}</span>
|
||||
{s.role && (
|
||||
<span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
|
||||
{s.role}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{publicSpaces.length > 0 && (
|
||||
<>
|
||||
{mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
|
||||
<div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
|
||||
Public spaces
|
||||
</div>
|
||||
{publicSpaces.map((s) => (
|
||||
<a
|
||||
key={s.slug}
|
||||
href={spaceUrl(s.slug)}
|
||||
className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="text-base">{s.icon || '🌐'}</span>
|
||||
<span className="text-sm font-medium flex-1">{s.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="h-px bg-white/[0.08] my-1" />
|
||||
<a
|
||||
href="https://rspace.online/new"
|
||||
className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
+ Create new space
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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<UserInfo | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(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 (
|
||||
<div className="w-6 h-6 rounded-full bg-slate-700 animate-pulse" />
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<a
|
||||
href="https://auth.ridentity.online"
|
||||
className="px-3 py-1.5 text-sm bg-cyan-500 hover:bg-cyan-400 text-black font-medium rounded-lg transition-colors no-underline"
|
||||
>
|
||||
🔑 Sign In
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
const displayName = user.username || (user.did ? `${user.did.slice(0, 12)}...` : 'User');
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.06] transition-colors"
|
||||
>
|
||||
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-cyan-400 to-violet-500 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
|
||||
{(user.username || 'U')[0].toUpperCase()}
|
||||
</div>
|
||||
<span className="text-sm text-slate-300 hidden sm:inline">🔐 {displayName}</span>
|
||||
<span className="text-[0.7em] text-slate-500 hidden sm:inline">▾</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute top-full right-0 mt-1.5 min-w-[180px] 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-sm font-medium text-white">{displayName}</div>
|
||||
{user.did && (
|
||||
<div className="text-[11px] text-slate-500 truncate mt-0.5">{user.did}</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
fetch('/api/auth/logout', { method: 'POST' })
|
||||
.catch(() => {})
|
||||
.finally(() => window.location.reload());
|
||||
}}
|
||||
className="w-full text-left px-3.5 py-2.5 text-sm text-slate-400 hover:text-white hover:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue