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>

src/components/AppSwitcher.tsx

@@ -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')
+    const sessionUsername = getSessionUsername();
-      .then((r) => r.json())
+    if (sessionUsername) {
-      .then((data) => {
+      setUsername(sessionUsername);
-        if (data.authenticated && data.user?.username) {
+    } else {
-          setUsername(data.user.username);
+      // Fallback: check /api/me
-        }
+      fetch('/api/me')
-      })
+        .then((r) => r.json())
-      .catch(() => { /* not logged in */ });
+        .then((data) => {
+          if (data.authenticated && data.user?.username) {
+            setUsername(data.user.username);
+          }
+        })
+        .catch(() => {});
+    }
   }, []);
 
   const currentMod = MODULES.find((m) => m.id === current);

src/components/SpaceSwitcher.tsx

@@ -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);
+  // Build personal space entry for logged-in user
-  const publicSpaces = spaces.filter((s) => !s.role);
+  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">&#9662;</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>