fix: landing page improvements and SpaceSwitcher domain support
- SpaceSwitcher auto-derives domain from window.location - Fix landing page issues (redirect bug, duplicate footers, broken links, missing content) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d97adce1cd
commit
b7308ffabc
|
|
@ -0,0 +1,165 @@
|
|||
'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. 'rfunds.online'. Space links become <space>.<domain> */
|
||||
domain?: string;
|
||||
}
|
||||
|
||||
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(() => {
|
||||
fetch('/api/me')
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) setIsAuthenticated(true);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const loadSpaces = async () => {
|
||||
if (loaded) return;
|
||||
try {
|
||||
const res = await fetch('/api/spaces');
|
||||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue