feat: standardize header, categories, cross-app spaces

- AppSwitcher: rTube/rSwag → Creating, rSocials → Sharing, rData → Observing
- EcosystemFooter: updated link order to match new categories
- UserMenu: 🔑 Sign In button, 🔐 lock when logged in
- SpaceSwitcher: reads EncryptID token, sends Bearer header
- /api/spaces proxy: forwards to rspace.online (canonical spaces)
- /api/me: verifies EncryptID token for auth status
- Header.tsx: standardized bg-slate-900/85 across all apps

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/api/me/route.ts

@@ -0,0 +1,52 @@
+/**
+ * /api/me — Returns current user's auth status.
+ *
+ * Checks for EncryptID token in Authorization header or cookie,
+ * then verifies it against the EncryptID server.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const ENCRYPTID_URL = process.env.ENCRYPTID_URL || 'https://auth.ridentity.online';
+
+export async function GET(req: NextRequest) {
+  // Extract token from Authorization header or cookie
+  const auth = req.headers.get('Authorization');
+  let token: string | null = null;
+
+  if (auth?.startsWith('Bearer ')) {
+    token = auth.slice(7);
+  } else {
+    const tokenCookie = req.cookies.get('encryptid_token');
+    if (tokenCookie) token = tokenCookie.value;
+  }
+
+  if (!token) {
+    return NextResponse.json({ authenticated: false });
+  }
+
+  try {
+    const res = await fetch(`${ENCRYPTID_URL}/api/session/verify`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+
+    if (!res.ok) {
+      return NextResponse.json({ authenticated: false });
+    }
+
+    const data = await res.json();
+    if (data.valid) {
+      return NextResponse.json({
+        authenticated: true,
+        user: {
+          username: data.username || null,
+          did: data.did || data.userId || null,
+        },
+      });
+    }
+
+    return NextResponse.json({ authenticated: false });
+  } catch {
+    return NextResponse.json({ authenticated: false });
+  }
+}

src/app/api/spaces/route.ts

@@ -0,0 +1,45 @@
+/**
+ * Spaces API proxy — forwards to rSpace (the canonical spaces authority).
+ *
+ * Every r*App proxies /api/spaces to rSpace so the SpaceSwitcher dropdown
+ * shows the same spaces everywhere. The EncryptID token is forwarded so
+ * rSpace can return user-specific spaces (owned/member).
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const RSPACE_API = process.env.RSPACE_API_URL || 'https://rspace.online';
+
+export async function GET(req: NextRequest) {
+  const headers: Record<string, string> = {};
+
+  // Forward the EncryptID token (from Authorization header or cookie)
+  const auth = req.headers.get('Authorization');
+  if (auth) {
+    headers['Authorization'] = auth;
+  } else {
+    // Fallback: check for encryptid_token cookie
+    const tokenCookie = req.cookies.get('encryptid_token');
+    if (tokenCookie) {
+      headers['Authorization'] = `Bearer ${tokenCookie.value}`;
+    }
+  }
+
+  try {
+    const res = await fetch(`${RSPACE_API}/api/spaces`, {
+      headers,
+      next: { revalidate: 30 }, // cache for 30s to avoid hammering rSpace
+    });
+
+    if (!res.ok) {
+      // If rSpace is down, return empty spaces (graceful degradation)
+      return NextResponse.json({ spaces: [] });
+    }
+
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch {
+    // rSpace unreachable — return empty list
+    return NextResponse.json({ spaces: [] });
+  }
+}

src/components/AppSwitcher.tsx

@@ -17,6 +17,8 @@ const MODULES: AppModule[] = [
   { id: 'space',    name: 'rSpace',    badge: 'rS',  color: 'bg-teal-300',    emoji: '🎨', description: 'Real-time collaborative canvas',               domain: 'rspace.online' },
   { id: 'notes',    name: 'rNotes',    badge: 'rN',  color: 'bg-amber-300',   emoji: '📝', description: 'Group note-taking & knowledge capture',        domain: 'rnotes.online' },
   { id: 'pubs',     name: 'rPubs',     badge: 'rP',  color: 'bg-rose-300',    emoji: '📖', description: 'Collaborative publishing platform',              domain: 'rpubs.online' },
+  { id: 'tube',     name: 'rTube',     badge: 'rTu', color: 'bg-pink-300',    emoji: '🎬', description: 'Community video platform',                      domain: 'rtube.online' },
+  { 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: 'trips',    name: 'rTrips',    badge: 'rT',  color: 'bg-emerald-300', emoji: '✈️', description: 'Group travel planning in real time',            domain: 'rtrips.online' },
@@ -34,13 +36,12 @@ const MODULES: AppModule[] = [
   { 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: 'auctions', name: 'rAuctions', badge: 'rA',  color: 'bg-red-300',     emoji: '🔨', description: 'Live auction platform',                          domain: 'rauctions.online' },
-  { id: 'swag',     name: 'rSwag',     badge: 'rSw', color: 'bg-red-200',     emoji: '👕', description: 'Community merch & swag store',                  domain: 'rswag.online' },
+  // Sharing
-  // Social & Media
+  { id: 'photos',   name: 'rPhotos',   badge: 'rPh', color: 'bg-pink-200',    emoji: '📸', description: 'Community photo commons',                      domain: 'rphotos.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: '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: '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' },
   // Work & Productivity
   { id: 'work',     name: 'rWork',     badge: 'rWo', color: 'bg-slate-300',   emoji: '📋', description: 'Project & task management',                     domain: 'rwork.online' },
@@ -53,6 +54,8 @@ const MODULE_CATEGORIES: Record<string, string> = {
   space:    'Creating',
   notes:    'Creating',
   pubs:     'Creating',
+  tube:     'Creating',
+  swag:     'Creating',
   cal:      'Planning',
   trips:    'Planning',
   maps:     'Planning',
@@ -66,13 +69,11 @@ const MODULE_CATEGORIES: Record<string, string> = {
   wallet:   'Funding & Commerce',
   cart:     'Funding & Commerce',
   auctions: 'Funding & Commerce',
-  swag:     'Funding & Commerce',
+  photos:   'Sharing',
-  photos:   'Social & Media',
+  network:  'Sharing',
-  tube:     'Social & Media',
+  files:    'Sharing',
-  network:  'Social & Media',
+  socials:  'Sharing',
-  socials:  'Social & Media',
+  data:     'Observing',
-  files:    'Social & Media',
-  data:     'Social & Media',
   work:     'Work & Productivity',
   ids:      'Identity & Infrastructure',
   stack:    'Identity & Infrastructure',
@@ -84,7 +85,8 @@ const CATEGORY_ORDER = [
   'Communicating',
   'Deciding',
   'Funding & Commerce',
-  'Social & Media',
+  'Sharing',
+  'Observing',
   'Work & Productivity',
   'Identity & Infrastructure',
 ];

src/components/EcosystemFooter.tsx

@@ -1,30 +1,39 @@
 'use client';
 
 const FOOTER_LINKS = [
+  // Creating
   { name: 'rSpace', href: 'https://rspace.online' },
   { name: 'rNotes', href: 'https://rnotes.online' },
   { name: 'rPubs', href: 'https://rpubs.online' },
+  { name: 'rTube', href: 'https://rtube.online' },
+  { name: 'rSwag', href: 'https://rswag.online' },
+  // Planning
   { name: 'rCal', href: 'https://rcal.online' },
   { name: 'rTrips', href: 'https://rtrips.online' },
   { name: 'rMaps', href: 'https://rmaps.online' },
+  // Communicating
   { name: 'rChats', href: 'https://rchats.online' },
   { name: 'rInbox', href: 'https://rinbox.online' },
   { name: 'rMail', href: 'https://rmail.online' },
   { name: 'rForum', href: 'https://rforum.online' },
+  // Deciding
   { name: 'rChoices', href: 'https://rchoices.online' },
   { name: 'rVote', href: 'https://rvote.online' },
+  // Funding & Commerce
   { 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' },
+  // Sharing
   { 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: 'rSocials', href: 'https://rsocials.online' },
+  // Observing
   { name: 'rData', href: 'https://rdata.online' },
+  // Work & Productivity
   { name: 'rWork', href: 'https://rwork.online' },
+  // Identity & Infrastructure
   { name: 'rIDs', href: 'https://ridentity.online' },
   { name: 'rStack', href: 'https://rstack.online' },
 ];

src/components/Header.tsx

@@ -22,7 +22,7 @@ interface HeaderProps {
 
 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">
+    <nav className="border-b border-slate-800 backdrop-blur-sm bg-slate-900/85 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">

src/components/SpaceSwitcher.tsx

@@ -10,10 +10,20 @@ interface SpaceInfo {
 }
 
 interface SpaceSwitcherProps {
-  /** Current app domain, e.g. 'rfunds.online'. Space links become <space>.<domain> */
+  /** Current app domain, e.g. 'rchats.online'. Space links become <space>.<domain> */
   domain?: string;
 }
 
+/** Read the EncryptID token from localStorage (set by token-relay across r*.online) */
+function getEncryptIDToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    return localStorage.getItem('encryptid_token');
+  } catch {
+    return null;
+  }
+}
+
 export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
   const [open, setOpen] = useState(false);
   const [spaces, setSpaces] = useState<SpaceInfo[]>([]);
@@ -38,18 +48,29 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
 
   // Check auth status on mount
   useEffect(() => {
-    fetch('/api/me')
+    const token = getEncryptIDToken();
-      .then((r) => r.json())
+    if (token) {
-      .then((data) => {
+      setIsAuthenticated(true);
-        if (data.authenticated) setIsAuthenticated(true);
+    } else {
-      })
+      // Fallback: check /api/me
-      .catch(() => {});
+      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');
+      // Pass EncryptID token so the proxy can forward it to rSpace
+      const token = getEncryptIDToken();
+      const headers: Record<string, string> = {};
+      if (token) headers['Authorization'] = `Bearer ${token}`;
+
+      const res = await fetch('/api/spaces', { headers });
       if (res.ok) {
         const data = await res.json();
         setSpaces(data.spaces || []);

src/components/UserMenu.tsx

@@ -47,7 +47,7 @@ export function UserMenu() {
         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
+        🔑 Sign In
       </a>
     );
   }
@@ -63,7 +63,7 @@ export function UserMenu() {
         <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-sm text-slate-300 hidden sm:inline">🔐 {displayName}</span>
         <span className="text-[0.7em] text-slate-500 hidden sm:inline">&#9662;</span>
       </button>