jeffemmett
/
rswag-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: standardize SpaceSwitcher to use subdomain URLs 

Space links now go to <space>.<app-domain> (e.g., myspace.rswag.online)
instead of rspace.online/<space>. Matches the standard rApp header
pattern used across all rStack apps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-24 23:17:55 -08:00
parent 9b85041226
commit f4f1e140a9
3 changed files with 124 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/layout.tsx
View File

@ -59,7 +59,7 @@ export default async function RootLayout({
</head> </head>
<body className={GeistSans.className}> <body className={GeistSans.className}>
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
<HeaderBar name={name} logoUrl={logoUrl ?? null} spaceId={spaceId} /> <HeaderBar name={name} logoUrl={logoUrl ?? null} />
{/* ── Main Content ────────────────────────────────── */} {/* ── Main Content ────────────────────────────────── */}
<main className="flex-1">{children}</main> <main className="flex-1">{children}</main>

13
frontend/components/HeaderBar.tsx
View File

@ -8,22 +8,19 @@ import { AuthButton } from '@/components/AuthButton';
interface HeaderBarProps { interface HeaderBarProps {
name: string; name: string;
logoUrl: string | null; logoUrl: string | null;
spaceId?: string;
} }
export function HeaderBar({ name, logoUrl, spaceId = 'default' }: HeaderBarProps) { export function HeaderBar({ name, logoUrl }: HeaderBarProps) {
return ( return (
<header className="border-b sticky top-0 z-50 bg-background/90 backdrop-blur-sm"> <header className="border-b border-slate-800 sticky top-0 z-50 bg-background/90 backdrop-blur-sm">
<div className="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between gap-3"> <div className="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between gap-3">
{/* Left: App switcher + Space switcher + Logo */} {/* Left: App switcher + Space switcher + Logo */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 min-w-0">
<AppSwitcher current="swag" /> <AppSwitcher current="swag" />
<div className="w-px h-5 bg-white/10 hidden sm:block" /> <SpaceSwitcher />
<SpaceSwitcher currentSpaceId={spaceId} />
<div className="w-px h-5 bg-white/10 hidden sm:block" />
<Link <Link
href="/" href="/"
className="flex items-center gap-2 font-bold text-lg" className="flex items-center gap-2 font-bold text-lg ml-1"
> >
{logoUrl ? ( {logoUrl ? (
<img src={logoUrl} alt="" className="h-7 w-7 rounded" /> <img src={logoUrl} alt="" className="h-7 w-7 rounded" />

210
frontend/components/SpaceSwitcher.tsx
View File

@ -2,27 +2,30 @@
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
interface SpaceInfo { interface SpaceInfo {
id: string; slug: string;
name: string; name: string;
tagline: string; icon?: string;
description: string; role?: string;
domain: string;
logo_url: string | null;
} }
interface SpaceSwitcherProps { interface SpaceSwitcherProps {
currentSpaceId?: string; /** Current app domain, e.g. 'rswag.online'. Space links become <space>.<domain> */
domain?: string;
} }
export function SpaceSwitcher({ currentSpaceId = 'default' }: SpaceSwitcherProps) { export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [spaces, setSpaces] = useState<SpaceInfo[]>([]); const [spaces, setSpaces] = useState<SpaceInfo[]>([]);
const [loaded, setLoaded] = useState(false);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
// Click-outside to close // Derive domain from window.location if not provided
const appDomain = domain || (typeof window !== 'undefined'
? window.location.hostname.split('.').slice(-2).join('.')
: 'rspace.online');
useEffect(() => { useEffect(() => {
function handleClick(e: MouseEvent) { function handleClick(e: MouseEvent) {
if (ref.current && !ref.current.contains(e.target as Node)) { if (ref.current && !ref.current.contains(e.target as Node)) {
@ -33,105 +36,128 @@ export function SpaceSwitcher({ currentSpaceId = 'default' }: SpaceSwitcherProps
return () => document.removeEventListener('click', handleClick); return () => document.removeEventListener('click', handleClick);
}, []); }, []);
// Fetch available spaces // Check auth status on mount
useEffect(() => { useEffect(() => {
fetch(`${API_URL}/spaces`) fetch('/api/me')
.then((r) => (r.ok ? r.json() : [])) .then((r) => r.json())
.then((data: SpaceInfo[]) => setSpaces(data)) .then((data) => {
if (data.authenticated) setIsAuthenticated(true);
})
.catch(() => {}); .catch(() => {});
}, []); }, []);
const currentSpace = spaces.find((s) => s.id === currentSpaceId) || { const loadSpaces = async () => {
id: 'default', if (loaded) return;
name: 'rSwag', try {
tagline: 'Community Merch', const res = await fetch('/api/spaces');
domain: 'rswag.online', if (res.ok) {
logo_url: null, const data = await res.json();
setSpaces(data.spaces || []);
}
} catch {
// API not available
}
setLoaded(true);
}; };
function switchSpace(spaceId: string) { const handleOpen = async () => {
// Set cookie and reload to apply space theme const nowOpen = !open;
document.cookie = `space_id=${spaceId}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`; setOpen(nowOpen);
setOpen(false); if (nowOpen && !loaded) {
window.location.reload(); 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 ( return (
<div className="relative" ref={ref}> <div className="relative" ref={ref}>
{/* Trigger */}
<button <button
onClick={(e) => { e.stopPropagation(); setOpen(!open); }} onClick={(e) => { e.stopPropagation(); handleOpen(); }}
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" 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="w-6 h-6 rounded-md bg-gradient-to-br from-primary/80 to-secondary/80 flex items-center justify-center text-[9px] font-black text-white leading-none flex-shrink-0"> <span className="opacity-40 font-light mr-0.5">/</span>
{currentSpace.name.charAt(0).toUpperCase()} <span className="max-w-[160px] truncate">personal</span>
</span> <span className="text-[0.7em] opacity-50">&#9662;</span>
<span className="hidden sm:inline max-w-[100px] truncate">{currentSpace.name}</span>
<span className="text-[0.7em] opacity-60">&#9662;</span>
</button> </button>
{/* Dropdown */}
{open && ( {open && (
<div className="absolute top-full left-0 mt-1.5 w-[280px] rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]"> <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]">
{/* Header */} {!loaded ? (
<div className="px-3.5 py-3 border-b border-white/[0.08]"> <div className="px-4 py-4 text-center text-sm text-slate-400">Loading spaces...</div>
<div className="text-[0.6rem] font-bold uppercase tracking-widest text-slate-500 select-none"> ) : spaces.length === 0 ? (
Spaces <>
</div> <div className="px-4 py-4 text-center text-sm text-slate-400">
</div> {isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'}
</div>
{/* Space list */} <a
{spaces.length > 0 ? ( href="https://rspace.online/new"
spaces.map((s) => ( 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"
<button onClick={() => setOpen(false)}
key={s.id}
onClick={() => switchSpace(s.id)}
className={`flex items-center gap-2.5 w-full px-3.5 py-2.5 text-left transition-colors ${
s.id === currentSpaceId
? 'bg-white/[0.07]'
: 'hover:bg-white/[0.04]'
}`}
> >
{/* Space avatar */} + Create new space
<span className="w-7 h-7 rounded-md bg-gradient-to-br from-primary/60 to-secondary/60 flex items-center justify-center text-[10px] font-black text-white leading-none flex-shrink-0"> </a>
{s.name.charAt(0).toUpperCase()} </>
</span>
<div className="flex flex-col min-w-0 flex-1">
<div className="flex items-center gap-1.5">
<span className="text-sm font-semibold text-slate-200 truncate">
{s.name}
</span>
{s.id === currentSpaceId && (
<span className="text-[10px] text-primary">&#10003;</span>
)}
</div>
{s.tagline && (
<span className="text-[11px] text-slate-400 truncate">
{s.tagline}
</span>
)}
</div>
</button>
))
) : ( ) : (
<div className="px-3.5 py-4 text-sm text-slate-500 text-center"> <>
No spaces available {mySpaces.length > 0 && (
</div> <>
)} <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>
))}
</>
)}
{/* Footer */} {publicSpaces.length > 0 && (
<div className="px-3.5 py-2.5 border-t border-white/[0.08] flex items-center justify-between"> <>
<span className="text-[11px] text-slate-500"> {mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
{spaces.length} space{spaces.length !== 1 ? 's' : ''} <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
</span> Public spaces
<a </div>
href="/spaces/new" {publicSpaces.map((s) => (
className="text-[11px] text-primary hover:text-primary/80 transition-colors no-underline font-medium" <a
onClick={() => setOpen(false)} key={s.slug}
> href={spaceUrl(s.slug)}
+ Create Space 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]"
</a> onClick={() => setOpen(false)}
</div> >
<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>
)} )}
</div> </div>