feat: update AppSwitcher and SpaceSwitcher with new modules and session handling
AppSwitcher: add rEvents and rBooks modules, read username from EncryptID localStorage session with /api/me fallback. SpaceSwitcher: add personal space entry for logged-in users, show current space from cookie, highlight active space, handle both array and object API response formats. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
8295febcce
commit
c788dfcb8b
|
|
@ -21,6 +21,7 @@ const MODULES: AppModule[] = [
|
|||
{ 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: 'events', name: 'rEvents', badge: 'rEv', color: 'bg-violet-200', emoji: '🎪', description: 'Event aggregation & discovery', domain: 'revents.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' },
|
||||
// Communicating
|
||||
|
|
@ -43,6 +44,8 @@ const MODULES: AppModule[] = [
|
|||
{ 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' },
|
||||
// Learning
|
||||
{ id: 'books', name: 'rBooks', badge: 'rB', color: 'bg-amber-200', emoji: '📚', description: 'Collaborative library', domain: 'rbooks.online' },
|
||||
// Work & Productivity
|
||||
{ id: 'work', name: 'rWork', badge: 'rWo', color: 'bg-slate-300', emoji: '📋', description: 'Project & task management', domain: 'rwork.online' },
|
||||
// Identity & Infrastructure
|
||||
|
|
@ -57,6 +60,7 @@ const MODULE_CATEGORIES: Record<string, string> = {
|
|||
tube: 'Creating',
|
||||
swag: 'Creating',
|
||||
cal: 'Planning',
|
||||
events: 'Planning',
|
||||
trips: 'Planning',
|
||||
maps: 'Planning',
|
||||
chats: 'Communicating',
|
||||
|
|
@ -74,6 +78,7 @@ const MODULE_CATEGORIES: Record<string, string> = {
|
|||
files: 'Sharing',
|
||||
socials: 'Sharing',
|
||||
data: 'Observing',
|
||||
books: 'Learning',
|
||||
work: 'Work & Productivity',
|
||||
ids: 'Identity & Infrastructure',
|
||||
stack: 'Identity & Infrastructure',
|
||||
|
|
@ -87,10 +92,25 @@ const CATEGORY_ORDER = [
|
|||
'Funding & Commerce',
|
||||
'Sharing',
|
||||
'Observing',
|
||||
'Learning',
|
||||
'Work & Productivity',
|
||||
'Identity & Infrastructure',
|
||||
];
|
||||
|
||||
/** Read the username from the EncryptID session in localStorage */
|
||||
function getSessionUsername(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
try {
|
||||
const stored = localStorage.getItem('encryptid_session');
|
||||
if (!stored) return null;
|
||||
const parsed = JSON.parse(stored);
|
||||
const claims = parsed?.claims || parsed;
|
||||
return claims?.eid?.username || claims?.username || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Build the URL for a module, using username subdomain if logged in */
|
||||
function getModuleUrl(m: AppModule, username: string | null): string {
|
||||
if (!m.domain) return '#';
|
||||
|
|
@ -120,16 +140,22 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
|
|||
return () => document.removeEventListener('click', handleClick);
|
||||
}, []);
|
||||
|
||||
// Fetch current user's username for subdomain links
|
||||
// Read username from EncryptID session in localStorage
|
||||
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 sessionUsername = getSessionUsername();
|
||||
if (sessionUsername) {
|
||||
setUsername(sessionUsername);
|
||||
} else {
|
||||
// Fallback: check /api/me
|
||||
fetch('/api/me')
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated && data.user?.username) {
|
||||
setUsername(data.user.username);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const currentMod = MODULES.find((m) => m.id === current);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface SpaceInfo {
|
|||
}
|
||||
|
||||
interface SpaceSwitcherProps {
|
||||
/** Current app domain, e.g. 'rchats.online'. Space links become <space>.<domain> */
|
||||
/** Current app domain, e.g. 'rcal.online'. Space links become <space>.<domain> */
|
||||
domain?: string;
|
||||
}
|
||||
|
||||
|
|
@ -24,11 +24,33 @@ function getEncryptIDToken(): string | null {
|
|||
}
|
||||
}
|
||||
|
||||
/** Read the username from the EncryptID session in localStorage */
|
||||
function getSessionUsername(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
try {
|
||||
const stored = localStorage.getItem('encryptid_session');
|
||||
if (!stored) return null;
|
||||
const parsed = JSON.parse(stored);
|
||||
const claims = parsed?.claims || parsed;
|
||||
return claims?.eid?.username || claims?.username || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Read the current space_id from the cookie set by middleware */
|
||||
function getCurrentSpaceId(): string {
|
||||
if (typeof document === 'undefined') return 'default';
|
||||
const match = document.cookie.match(/(?:^|;\s*)space_id=([^;]*)/);
|
||||
return match ? decodeURIComponent(match[1]) : 'default';
|
||||
}
|
||||
|
||||
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 [username, setUsername] = useState<string | null>(null);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Derive domain from window.location if not provided
|
||||
|
|
@ -36,6 +58,8 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
? window.location.hostname.split('.').slice(-2).join('.')
|
||||
: 'rspace.online');
|
||||
|
||||
const currentSpaceId = getCurrentSpaceId();
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
|
|
@ -49,14 +73,21 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
// Check auth status on mount
|
||||
useEffect(() => {
|
||||
const token = getEncryptIDToken();
|
||||
const sessionUsername = getSessionUsername();
|
||||
if (token) {
|
||||
setIsAuthenticated(true);
|
||||
if (sessionUsername) {
|
||||
setUsername(sessionUsername);
|
||||
}
|
||||
} else {
|
||||
// Fallback: check /api/me
|
||||
fetch('/api/me')
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.authenticated) setIsAuthenticated(true);
|
||||
if (data.authenticated) {
|
||||
setIsAuthenticated(true);
|
||||
if (data.user?.username) setUsername(data.user.username);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
|
@ -73,7 +104,15 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
const res = await fetch('/api/spaces', { headers });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setSpaces(data.spaces || []);
|
||||
// Handle both flat array and { spaces: [...] } response formats
|
||||
const raw: Array<{ id?: string; slug?: string; name: string; icon?: string; role?: string }> =
|
||||
Array.isArray(data) ? data : (data.spaces || []);
|
||||
setSpaces(raw.map((s) => ({
|
||||
slug: s.slug || s.id || '',
|
||||
name: s.name,
|
||||
icon: s.icon,
|
||||
role: s.role,
|
||||
})));
|
||||
}
|
||||
} catch {
|
||||
// API not available
|
||||
|
|
@ -92,8 +131,24 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
/** 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);
|
||||
// Build personal space entry for logged-in user
|
||||
const personalSpace: SpaceInfo | null =
|
||||
isAuthenticated && username
|
||||
? { slug: username, name: 'Personal', icon: '👤', role: 'owner' }
|
||||
: null;
|
||||
|
||||
// Deduplicate: remove personal space from fetched list if it already appears
|
||||
const dedupedSpaces = personalSpace
|
||||
? spaces.filter((s) => s.slug !== personalSpace.slug)
|
||||
: spaces;
|
||||
|
||||
const mySpaces = dedupedSpaces.filter((s) => s.role);
|
||||
const publicSpaces = dedupedSpaces.filter((s) => !s.role);
|
||||
|
||||
// Determine what to show in the button
|
||||
const currentLabel = currentSpaceId === 'default'
|
||||
? (personalSpace ? 'personal' : 'public')
|
||||
: currentSpaceId;
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
|
|
@ -102,7 +157,7 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
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="max-w-[160px] truncate">{currentLabel}</span>
|
||||
<span className="text-[0.7em] opacity-50">▾</span>
|
||||
</button>
|
||||
|
||||
|
|
@ -110,23 +165,40 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
<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 ? (
|
||||
) : !isAuthenticated && 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'}
|
||||
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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Personal space — always first when logged in */}
|
||||
{personalSpace && (
|
||||
<>
|
||||
<div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
|
||||
Personal
|
||||
</div>
|
||||
<a
|
||||
href={spaceUrl(personalSpace.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] ${
|
||||
currentSpaceId === personalSpace.slug ? 'bg-white/[0.07]' : ''
|
||||
}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="text-base">{personalSpace.icon}</span>
|
||||
<span className="text-sm font-medium flex-1">{username}</span>
|
||||
<span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
|
||||
owner
|
||||
</span>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Other spaces the user belongs to */}
|
||||
{mySpaces.length > 0 && (
|
||||
<>
|
||||
{personalSpace && <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">
|
||||
Your spaces
|
||||
</div>
|
||||
|
|
@ -134,7 +206,9 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
<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]"
|
||||
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] ${
|
||||
currentSpaceId === s.slug ? 'bg-white/[0.07]' : ''
|
||||
}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="text-base">{s.icon || '🌐'}</span>
|
||||
|
|
@ -149,9 +223,10 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* Public spaces */}
|
||||
{publicSpaces.length > 0 && (
|
||||
<>
|
||||
{mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
|
||||
{(personalSpace || 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>
|
||||
|
|
@ -159,7 +234,9 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
|
|||
<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]"
|
||||
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] ${
|
||||
currentSpaceId === s.slug ? 'bg-white/[0.07]' : ''
|
||||
}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="text-base">{s.icon || '🌐'}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue