feat: standardize Header, EcosystemFooter, and shared components
Move nav to shared Header in layout.tsx, remove inline header/footer from page.tsx. Add UserMenu, SpaceSwitcher, and updated AppSwitcher. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b7308ffabc
commit
f4629a48c2
|
|
@ -1,6 +1,8 @@
|
||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import localFont from 'next/font/local'
|
import localFont from 'next/font/local'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import { Header } from '@/components/Header'
|
||||||
|
import { EcosystemFooter } from '@/components/EcosystemFooter'
|
||||||
|
|
||||||
const geistSans = localFont({
|
const geistSans = localFont({
|
||||||
src: './fonts/GeistVF.woff',
|
src: './fonts/GeistVF.woff',
|
||||||
|
|
@ -35,7 +37,9 @@ export default function RootLayout({
|
||||||
<script defer src="https://rdata.online/collect.js" data-website-id="0ebf1cfd-57e4-4fbe-925d-cd541d7bb3a8" />
|
<script defer src="https://rdata.online/collect.js" data-website-id="0ebf1cfd-57e4-4fbe-925d-cd541d7bb3a8" />
|
||||||
</head>
|
</head>
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||||
|
<Header current="funds" />
|
||||||
{children}
|
{children}
|
||||||
|
<EcosystemFooter current="funds" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
67
app/page.tsx
67
app/page.tsx
|
|
@ -1,44 +1,8 @@
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { AppSwitcher } from '@/components/AppSwitcher'
|
|
||||||
import { AuthButton } from '@/components/AuthButton'
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
||||||
{/* Nav */}
|
|
||||||
<nav className="border-b border-slate-700/50 backdrop-blur-sm">
|
|
||||||
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<AppSwitcher current="funds" />
|
|
||||||
<div className="w-8 h-8 bg-gradient-to-br from-amber-400 to-emerald-500 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
|
|
||||||
rF
|
|
||||||
</div>
|
|
||||||
<span className="font-semibold text-lg">rFunds</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Link
|
|
||||||
href="/tbff"
|
|
||||||
className="text-sm text-slate-300 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
Demo
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/river"
|
|
||||||
className="text-sm text-slate-300 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
River View
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/space"
|
|
||||||
className="text-sm px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg transition-colors font-medium"
|
|
||||||
>
|
|
||||||
Create Space
|
|
||||||
</Link>
|
|
||||||
<AuthButton />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
||||||
<div className="text-center max-w-3xl mx-auto">
|
<div className="text-center max-w-3xl mx-auto">
|
||||||
|
|
@ -175,37 +139,6 @@ export default function Home() {
|
||||||
Create Your Space
|
Create Your Space
|
||||||
</Link>
|
</Link>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<footer className="border-t border-slate-700/50 py-8">
|
|
||||||
<div className="max-w-6xl mx-auto px-6">
|
|
||||||
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-500 mb-4">
|
|
||||||
<span className="font-medium text-slate-400">r* Ecosystem</span>
|
|
||||||
<a href="https://rspace.online" className="hover:text-slate-300 transition-colors">rSpace</a>
|
|
||||||
<a href="https://rmaps.online" className="hover:text-slate-300 transition-colors">rMaps</a>
|
|
||||||
<a href="https://rnotes.online" className="hover:text-slate-300 transition-colors">rNotes</a>
|
|
||||||
<a href="https://rvote.online" className="hover:text-slate-300 transition-colors">rVote</a>
|
|
||||||
<a href="https://rfunds.online" className="hover:text-slate-300 transition-colors font-medium text-slate-300">rFunds</a>
|
|
||||||
<a href="https://rtrips.online" className="hover:text-slate-300 transition-colors">rTrips</a>
|
|
||||||
<a href="https://rcart.online" className="hover:text-slate-300 transition-colors">rCart</a>
|
|
||||||
<a href="https://rchoices.online" className="hover:text-slate-300 transition-colors">rChoices</a>
|
|
||||||
<a href="https://rwallet.online" className="hover:text-slate-300 transition-colors">rWallet</a>
|
|
||||||
<a href="https://rfiles.online" className="hover:text-slate-300 transition-colors">rFiles</a>
|
|
||||||
<a href="https://rtube.online" className="hover:text-slate-300 transition-colors">rTube</a>
|
|
||||||
<a href="https://rcal.online" className="hover:text-slate-300 transition-colors">rCal</a>
|
|
||||||
<a href="https://rnetwork.online" className="hover:text-slate-300 transition-colors">rNetwork</a>
|
|
||||||
<a href="https://rinbox.online" className="hover:text-slate-300 transition-colors">rInbox</a>
|
|
||||||
<a href="https://rstack.online" className="hover:text-slate-300 transition-colors">rStack</a>
|
|
||||||
<a href="https://rauctions.online" className="hover:text-slate-300 transition-colors">rAuctions</a>
|
|
||||||
<a href="https://rpubs.online" className="hover:text-slate-300 transition-colors">rPubs</a>
|
|
||||||
<a href="https://rbooks.online" className="hover:text-slate-300 transition-colors">rBooks</a>
|
|
||||||
<a href="https://rdata.online" className="hover:text-slate-300 transition-colors">rData</a>
|
|
||||||
</div>
|
|
||||||
<p className="text-center text-xs text-slate-600">
|
|
||||||
Part of the r* ecosystem — collaborative tools for communities.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,56 +21,91 @@ const MODULES: AppModule[] = [
|
||||||
{ id: 'cal', name: 'rCal', badge: 'rC', color: 'bg-sky-300', emoji: '📅', description: 'Collaborative scheduling & events', domain: 'rcal.online' },
|
{ 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: '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: 'maps', name: 'rMaps', badge: 'rM', color: 'bg-green-300', emoji: '🗺️', description: 'Collaborative real-time mapping', domain: 'rmaps.online' },
|
||||||
// Discussing & Deciding
|
// 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: '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: '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' },
|
{ id: 'vote', name: 'rVote', badge: 'rV', color: 'bg-violet-300', emoji: '🗳️', description: 'Real-time polls & governance', domain: 'rvote.online' },
|
||||||
// Funding & Commerce
|
// Funding & Commerce
|
||||||
{ id: 'funds', name: 'rFunds', badge: 'rF', color: 'bg-lime-300', emoji: '💸', description: 'Collaborative fundraising & grants', domain: 'rfunds.online' },
|
{ 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: '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: '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' },
|
{ id: 'auctions', name: 'rAuctions', badge: 'rA', color: 'bg-red-300', emoji: '🔨', description: 'Live auction platform', domain: 'rauctions.online' },
|
||||||
// Social & Sharing
|
{ id: 'swag', name: 'rSwag', badge: 'rSw', color: 'bg-red-200', emoji: '👕', description: 'Community merch & swag store', domain: 'rswag.online' },
|
||||||
{ id: 'network', name: 'rNetwork', badge: 'rNe', color: 'bg-blue-300', emoji: '🌐', description: 'Community network & social graph', domain: 'rnetwork.online' },
|
// Social & Media
|
||||||
{ id: 'files', name: 'rFiles', badge: 'rFi', color: 'bg-cyan-300', emoji: '📁', description: 'Collaborative file storage', domain: 'rfiles.online' },
|
{ id: 'photos', name: 'rPhotos', badge: 'rPh', color: 'bg-pink-200', emoji: '📸', description: 'Shared community photo albums', domain: 'rphotos.online' },
|
||||||
{ id: 'tube', name: 'rTube', badge: 'rTu', color: 'bg-pink-300', emoji: '🎬', description: 'Group video platform', domain: 'rtube.online' },
|
{ id: 'tube', name: 'rTube', badge: 'rTu', color: 'bg-pink-300', emoji: '🎬', description: 'Group video platform', domain: 'rtube.online' },
|
||||||
|
{ id: 'network', name: 'rNetwork', badge: 'rNe', color: 'bg-blue-300', emoji: '🌐', description: 'Community network & social graph', domain: 'rnetwork.online' },
|
||||||
|
{ id: 'socials', name: 'rSocials', badge: 'rSo', color: 'bg-sky-200', emoji: '📢', description: 'Social media management', domain: 'rsocials.online' },
|
||||||
|
{ id: 'files', name: 'rFiles', badge: 'rFi', color: 'bg-cyan-300', emoji: '📁', description: 'Collaborative file storage', domain: 'rfiles.online' },
|
||||||
{ id: 'data', name: 'rData', badge: 'rD', color: 'bg-purple-300', emoji: '📊', description: 'Analytics & insights dashboard', domain: 'rdata.online' },
|
{ 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> = {
|
const MODULE_CATEGORIES: Record<string, string> = {
|
||||||
space: 'Creating',
|
space: 'Creating',
|
||||||
notes: 'Creating',
|
notes: 'Creating',
|
||||||
pubs: 'Creating',
|
pubs: 'Creating',
|
||||||
cal: 'Planning',
|
cal: 'Planning',
|
||||||
trips: 'Planning',
|
trips: 'Planning',
|
||||||
inbox: 'Discussing & Deciding',
|
maps: 'Planning',
|
||||||
choices: 'Discussing & Deciding',
|
chats: 'Communicating',
|
||||||
vote: 'Discussing & Deciding',
|
inbox: 'Communicating',
|
||||||
funds: 'Funding & Commerce',
|
mail: 'Communicating',
|
||||||
wallet: 'Funding & Commerce',
|
forum: 'Communicating',
|
||||||
cart: 'Funding & Commerce',
|
choices: 'Deciding',
|
||||||
auctions:'Funding & Commerce',
|
vote: 'Deciding',
|
||||||
maps: 'Planning',
|
funds: 'Funding & Commerce',
|
||||||
network: 'Social & Sharing',
|
wallet: 'Funding & Commerce',
|
||||||
files: 'Social & Sharing',
|
cart: 'Funding & Commerce',
|
||||||
tube: 'Social & Sharing',
|
auctions: 'Funding & Commerce',
|
||||||
data: 'Social & Sharing',
|
swag: 'Funding & Commerce',
|
||||||
|
photos: 'Social & Media',
|
||||||
|
tube: 'Social & Media',
|
||||||
|
network: 'Social & Media',
|
||||||
|
socials: 'Social & Media',
|
||||||
|
files: 'Social & Media',
|
||||||
|
data: 'Social & Media',
|
||||||
|
work: 'Work & Productivity',
|
||||||
|
ids: 'Identity & Infrastructure',
|
||||||
|
stack: 'Identity & Infrastructure',
|
||||||
};
|
};
|
||||||
|
|
||||||
const CATEGORY_ORDER = [
|
const CATEGORY_ORDER = [
|
||||||
'Creating',
|
'Creating',
|
||||||
'Planning',
|
'Planning',
|
||||||
'Discussing & Deciding',
|
'Communicating',
|
||||||
|
'Deciding',
|
||||||
'Funding & Commerce',
|
'Funding & Commerce',
|
||||||
'Social & Sharing',
|
'Social & Media',
|
||||||
|
'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 {
|
interface AppSwitcherProps {
|
||||||
current?: string;
|
current?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
|
export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const [username, setUsername] = useState<string | null>(null);
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -83,6 +118,18 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
|
||||||
return () => document.removeEventListener('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);
|
const currentMod = MODULES.find((m) => m.id === current);
|
||||||
|
|
||||||
// Group modules by category
|
// Group modules by category
|
||||||
|
|
@ -140,7 +187,7 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
|
||||||
} transition-colors`}
|
} transition-colors`}
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href={m.domain ? `https://${m.domain}` : '#'}
|
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"
|
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)}
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
const FOOTER_LINKS = [
|
||||||
|
{ name: 'rSpace', href: 'https://rspace.online' },
|
||||||
|
{ name: 'rNotes', href: 'https://rnotes.online' },
|
||||||
|
{ name: 'rPubs', href: 'https://rpubs.online' },
|
||||||
|
{ name: 'rCal', href: 'https://rcal.online' },
|
||||||
|
{ name: 'rTrips', href: 'https://rtrips.online' },
|
||||||
|
{ name: 'rMaps', href: 'https://rmaps.online' },
|
||||||
|
{ name: 'rChats', href: 'https://rchats.online' },
|
||||||
|
{ name: 'rInbox', href: 'https://rinbox.online' },
|
||||||
|
{ name: 'rMail', href: 'https://rmail.online' },
|
||||||
|
{ name: 'rForum', href: 'https://rforum.online' },
|
||||||
|
{ name: 'rChoices', href: 'https://rchoices.online' },
|
||||||
|
{ name: 'rVote', href: 'https://rvote.online' },
|
||||||
|
{ name: 'rFunds', href: 'https://rfunds.online' },
|
||||||
|
{ name: 'rWallet', href: 'https://rwallet.online' },
|
||||||
|
{ name: 'rCart', href: 'https://rcart.online' },
|
||||||
|
{ name: 'rAuctions', href: 'https://rauctions.online' },
|
||||||
|
{ name: 'rSwag', href: 'https://rswag.online' },
|
||||||
|
{ name: 'rPhotos', href: 'https://rphotos.online' },
|
||||||
|
{ name: 'rTube', href: 'https://rtube.online' },
|
||||||
|
{ name: 'rNetwork', href: 'https://rnetwork.online' },
|
||||||
|
{ name: 'rSocials', href: 'https://rsocials.online' },
|
||||||
|
{ name: 'rFiles', href: 'https://rfiles.online' },
|
||||||
|
{ name: 'rData', href: 'https://rdata.online' },
|
||||||
|
{ name: 'rWork', href: 'https://rwork.online' },
|
||||||
|
{ name: 'rIDs', href: 'https://ridentity.online' },
|
||||||
|
{ name: 'rStack', href: 'https://rstack.online' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface EcosystemFooterProps {
|
||||||
|
current?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EcosystemFooter({ current }: EcosystemFooterProps) {
|
||||||
|
return (
|
||||||
|
<footer className="border-t border-slate-800 py-8">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-500 mb-4">
|
||||||
|
<span className="font-medium text-slate-400">r* Ecosystem</span>
|
||||||
|
{FOOTER_LINKS.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.name}
|
||||||
|
href={link.href}
|
||||||
|
className={`hover:text-slate-300 transition-colors ${
|
||||||
|
current && link.name.toLowerCase() === current.toLowerCase()
|
||||||
|
? 'font-medium text-slate-300'
|
||||||
|
: ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-center text-xs text-slate-600">
|
||||||
|
Part of the <a href="https://rstack.online" className="hover:text-slate-400 transition-colors">r* ecosystem</a> — open source, self-hosted, community-owned
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { AppSwitcher } from './AppSwitcher';
|
||||||
|
import { SpaceSwitcher } from './SpaceSwitcher';
|
||||||
|
import { UserMenu } from './UserMenu';
|
||||||
|
|
||||||
|
export interface BreadcrumbItem {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
/** Which r*App is current (e.g. 'notes', 'vote', 'funds') */
|
||||||
|
current?: string;
|
||||||
|
/** Breadcrumb trail after the switchers */
|
||||||
|
breadcrumbs?: BreadcrumbItem[];
|
||||||
|
/** Right-side actions (rendered between breadcrumbs and UserMenu) */
|
||||||
|
actions?: React.ReactNode;
|
||||||
|
/** Max width class for the inner container */
|
||||||
|
maxWidth?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header({ current = 'notes', breadcrumbs, actions, maxWidth = 'max-w-6xl' }: HeaderProps) {
|
||||||
|
return (
|
||||||
|
<nav className="border-b border-slate-800 backdrop-blur-sm bg-[#0a0a0a]/90 sticky top-0 z-50">
|
||||||
|
<div className={`${maxWidth} mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-2`}>
|
||||||
|
{/* Left: App switcher + Space switcher + Breadcrumbs */}
|
||||||
|
<div className="flex items-center gap-1 min-w-0">
|
||||||
|
<AppSwitcher current={current} />
|
||||||
|
<SpaceSwitcher />
|
||||||
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||||
|
<>
|
||||||
|
{breadcrumbs.map((crumb, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-1 min-w-0">
|
||||||
|
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||||
|
{crumb.href ? (
|
||||||
|
<a
|
||||||
|
href={crumb.href}
|
||||||
|
className="text-slate-400 hover:text-white transition-colors text-sm hidden sm:inline truncate max-w-[140px]"
|
||||||
|
>
|
||||||
|
{crumb.label}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-white text-sm truncate max-w-[140px] md:max-w-[200px]">{crumb.label}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Actions + UserMenu */}
|
||||||
|
<div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
|
||||||
|
{actions}
|
||||||
|
<UserMenu />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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