feat: add rApp-style header with AppSwitcher and SpaceSwitcher dropdowns

Matches the shared header pattern used across rWork, rMaps, and other rApps.
AppSwitcher shows all 19 r* ecosystem apps grouped by category.
SpaceSwitcher allows switching between rSwag spaces (e.g. Fungi Flows).

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

frontend/app/layout.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import "./globals.css";
 import type { SpaceConfig } from "@/lib/spaces";
 import { themeToCSS } from "@/lib/spaces";
+import { AppSwitcher } from "@/components/AppSwitcher";
+import { SpaceSwitcher } from "@/components/SpaceSwitcher";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api";
 
@@ -80,46 +82,57 @@ export default async function RootLayout({
         <div className="min-h-screen flex flex-col">
           {/* ── Sticky Nav ──────────────────────────────────── */}
           <header className="border-b sticky top-0 z-50 bg-background/90 backdrop-blur-sm">
-            <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
+            <div className="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between gap-3">
-              <Link
+              {/* Left: App switcher + Logo */}
-                href="/"
+              <div className="flex items-center gap-3">
-                className="flex items-center gap-2 font-bold text-lg"
+                <AppSwitcher current="swag" />
-              >
+                <div className="w-px h-5 bg-white/10 hidden sm:block" />
-                {logoUrl ? (
+                <Link
-                  <img src={logoUrl} alt="" className="h-8 w-8 rounded" />
+                  href="/"
-                ) : (
+                  className="flex items-center gap-2 font-bold text-lg"
-                  <div className="h-8 w-8 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center text-primary-foreground text-sm font-bold">
+                >
-                    rS
+                  {logoUrl ? (
-                  </div>
+                    <img src={logoUrl} alt="" className="h-7 w-7 rounded" />
-                )}
+                  ) : (
-                <span>
+                    <div className="h-7 w-7 bg-gradient-to-br from-cyan-300 to-amber-300 rounded-lg flex items-center justify-center text-slate-900 text-[10px] font-black leading-none">
-                  <span className="text-primary">r</span>
+                      rSw
-                  {name === "rSwag" ? "Swag" : name}
+                    </div>
-                </span>
+                  )}
-              </Link>
+                  <span className="hidden sm:inline">
+                    <span className="text-primary">r</span>
+                    {name === "rSwag" ? "Swag" : name}
+                  </span>
+                </Link>
+              </div>
 
-              <nav className="flex items-center gap-1 sm:gap-4">
+              {/* Center: Nav links */}
+              <nav className="flex items-center gap-1 sm:gap-2">
                 <Link
                   href="/design"
-                  className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5 hidden sm:inline-flex"
+                  className="text-sm text-slate-300 hover:text-white transition-colors px-2.5 py-1.5 rounded-md hover:bg-white/[0.06] hidden sm:inline-flex"
                 >
                   Design
                 </Link>
                 <Link
                   href="/upload"
-                  className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5"
+                  className="text-sm text-slate-300 hover:text-white transition-colors px-2.5 py-1.5 rounded-md hover:bg-white/[0.06]"
                 >
                   Upload
                 </Link>
                 <Link
                   href="/products"
-                  className="text-sm px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
+                  className="text-sm px-4 py-1.5 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors"
                 >
                   Shop
                 </Link>
+              </nav>
+
+              {/* Right: Space switcher + Cart */}
+              <div className="flex items-center gap-2">
+                <SpaceSwitcher />
                 <Link
                   href="/cart"
-                  className="text-sm text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5"
+                  className="text-slate-300 hover:text-white transition-colors p-2 rounded-md hover:bg-white/[0.06]"
                 >
                   <svg
                     className="h-5 w-5"
@@ -135,7 +148,7 @@ export default async function RootLayout({
                     />
                   </svg>
                 </Link>
-              </nav>
+              </div>
             </div>
           </header>
 

frontend/components/AppSwitcher.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface AppModule {
+  id: string;
+  name: string;
+  badge: string;
+  color: string;
+  emoji: string;
+  description: string;
+  domain?: string;
+}
+
+const MODULES: AppModule[] = [
+  // Creating
+  { 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' },
+  // 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' },
+  { id: 'maps',     name: 'rMaps',     badge: 'rM',  color: 'bg-green-300',   emoji: '🗺️', description: 'Collaborative real-time mapping',               domain: 'rmaps.online' },
+  // Discussing & Deciding
+  { id: 'inbox',    name: 'rInbox',    badge: 'rI',  color: 'bg-indigo-300',  emoji: '📬', description: 'Private group messaging',                       domain: 'rinbox.online' },
+  { id: 'choices',  name: 'rChoices',  badge: 'rCh', color: 'bg-fuchsia-300', emoji: '🔀', description: 'Collaborative decision making',                domain: 'rchoices.online' },
+  { id: 'vote',     name: 'rVote',     badge: 'rV',  color: 'bg-violet-300',  emoji: '🗳️', description: 'Real-time polls & governance',                  domain: 'rvote.online' },
+  // Funding & Commerce
+  { id: 'funds',    name: 'rFunds',    badge: 'rF',  color: 'bg-lime-300',    emoji: '💸', description: 'Collaborative fundraising & grants',            domain: 'rfunds.online' },
+  { 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: 'swag',     name: 'rSwag',     badge: 'rSw', color: 'bg-cyan-300',    emoji: '👕', description: 'Community merch & print-on-demand',             domain: 'rswag.online' },
+  { id: 'auctions', name: 'rAuctions', badge: 'rA',  color: 'bg-red-300',     emoji: '🔨', description: 'Live auction platform',                         domain: 'rauctions.online' },
+  // Social & Sharing
+  { id: 'network',  name: 'rNetwork',  badge: 'rNe', color: 'bg-blue-300',    emoji: '🌐', description: 'Community network & social graph',              domain: 'rnetwork.online' },
+  { id: 'files',    name: 'rFiles',    badge: 'rFi', color: 'bg-cyan-300',    emoji: '📁', description: 'Collaborative file storage',                    domain: 'rfiles.online' },
+  { id: 'tube',     name: 'rTube',     badge: 'rTu', color: 'bg-pink-300',    emoji: '🎬', description: 'Group video platform',                          domain: 'rtube.online' },
+  { id: 'data',     name: 'rData',     badge: 'rD',  color: 'bg-purple-300',  emoji: '📊', description: 'Analytics & insights dashboard',                domain: 'rdata.online' },
+  { id: 'work',     name: 'rWork',     badge: 'rWk', color: 'bg-slate-300',   emoji: '📋', description: 'Collective task management',                    domain: 'rwork.online' },
+];
+
+const MODULE_CATEGORIES: Record<string, string> = {
+  space:    'Creating',
+  notes:    'Creating',
+  pubs:     'Creating',
+  cal:      'Planning',
+  trips:    'Planning',
+  maps:     'Planning',
+  inbox:    'Discussing & Deciding',
+  choices:  'Discussing & Deciding',
+  vote:     'Discussing & Deciding',
+  funds:    'Funding & Commerce',
+  wallet:   'Funding & Commerce',
+  cart:     'Funding & Commerce',
+  swag:     'Funding & Commerce',
+  auctions: 'Funding & Commerce',
+  network:  'Social & Sharing',
+  files:    'Social & Sharing',
+  tube:     'Social & Sharing',
+  data:     'Social & Sharing',
+  work:     'Social & Sharing',
+};
+
+const CATEGORY_ORDER = [
+  'Creating',
+  'Planning',
+  'Discussing & Deciding',
+  'Funding & Commerce',
+  'Social & Sharing',
+];
+
+interface AppSwitcherProps {
+  current?: string;
+}
+
+export function AppSwitcher({ current = 'swag' }: AppSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  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);
+  }, []);
+
+  const currentMod = MODULES.find((m) => m.id === current);
+
+  const groups = new Map<string, AppModule[]>();
+  for (const m of MODULES) {
+    const cat = MODULE_CATEGORIES[m.id] || 'Other';
+    if (!groups.has(cat)) groups.set(cat, []);
+    groups.get(cat)!.push(m);
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
+        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"
+      >
+        {currentMod && (
+          <span className={`w-6 h-6 rounded-md ${currentMod.color} flex items-center justify-center text-[10px] font-black text-slate-900 leading-none flex-shrink-0`}>
+            {currentMod.badge}
+          </span>
+        )}
+        <span className="hidden sm:inline">{currentMod?.name || 'rStack'}</span>
+        <span className="text-[0.7em] opacity-60">&#9662;</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 w-[300px] max-h-[70vh] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
+          <div className="px-3.5 py-3 border-b border-white/[0.08] flex items-center gap-2.5">
+            <span className="w-7 h-7 rounded-lg bg-gradient-to-br from-cyan-300 via-violet-300 to-rose-300 flex items-center justify-center text-[11px] font-black text-slate-900 leading-none">
+              r*
+            </span>
+            <div>
+              <div className="text-sm font-bold text-white">rStack</div>
+              <div className="text-[10px] text-slate-400">Self-hosted community app suite</div>
+            </div>
+          </div>
+
+          {CATEGORY_ORDER.map((cat) => {
+            const items = groups.get(cat);
+            if (!items || items.length === 0) return null;
+            return (
+              <div key={cat}>
+                <div className="px-3.5 pt-3 pb-1 text-[0.6rem] font-bold uppercase tracking-widest text-slate-500 select-none">
+                  {cat}
+                </div>
+                {items.map((m) => (
+                  <div
+                    key={m.id}
+                    className={`flex items-center group ${
+                      m.id === current ? 'bg-white/[0.07]' : 'hover:bg-white/[0.04]'
+                    } transition-colors`}
+                  >
+                    <a
+                      href={m.domain ? `https://${m.domain}` : '#'}
+                      className="flex items-center gap-2.5 flex-1 px-3.5 py-2 text-slate-200 no-underline min-w-0"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className={`w-7 h-7 rounded-md ${m.color} flex items-center justify-center text-[10px] font-black text-slate-900 leading-none flex-shrink-0`}>
+                        {m.badge}
+                      </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">{m.name}</span>
+                          <span className="text-sm flex-shrink-0">{m.emoji}</span>
+                        </div>
+                        <span className="text-[11px] text-slate-400 truncate">{m.description}</span>
+                      </div>
+                    </a>
+                    {m.domain && (
+                      <a
+                        href={`https://${m.domain}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="w-8 flex items-center justify-center text-xs text-cyan-400 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity flex-shrink-0"
+                        title={m.domain}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        &#8599;
+                      </a>
+                    )}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+
+          <div className="px-3.5 py-2.5 border-t border-white/[0.08] text-center">
+            <a
+              href="https://rstack.online"
+              className="text-[11px] text-slate-500 hover:text-cyan-400 transition-colors no-underline"
+              onClick={() => setOpen(false)}
+            >
+              rstack.online — self-hosted, community-run
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/SpaceSwitcher.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { getSpaceIdFromCookie } from '@/lib/spaces';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
+
+interface SpaceItem {
+  id: string;
+  name: string;
+  tagline: string;
+  domain: string;
+  logo_url: string | null;
+}
+
+export function SpaceSwitcher() {
+  const [open, setOpen] = useState(false);
+  const [spaces, setSpaces] = useState<SpaceItem[]>([]);
+  const [currentSpaceId, setCurrentSpaceId] = useState('default');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setCurrentSpaceId(getSpaceIdFromCookie());
+  }, []);
+
+  useEffect(() => {
+    fetch(`${API_URL}/spaces`)
+      .then((res) => (res.ok ? res.json() : []))
+      .then((data: SpaceItem[]) => setSpaces(data))
+      .catch(() => {});
+  }, []);
+
+  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);
+  }, []);
+
+  const currentSpace = spaces.find((s) => s.id === currentSpaceId) || {
+    id: 'default',
+    name: 'rSwag',
+    tagline: 'Community Merch, On Demand',
+    domain: 'rswag.online',
+    logo_url: null,
+  };
+
+  if (spaces.length <= 1) return null;
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
+        className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm font-medium bg-white/[0.08] hover:bg-white/[0.12] text-slate-200 transition-colors"
+      >
+        {currentSpace.logo_url ? (
+          <img src={currentSpace.logo_url} alt="" className="w-5 h-5 rounded" />
+        ) : (
+          <span className="w-5 h-5 rounded bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-[9px] font-bold text-primary-foreground leading-none flex-shrink-0">
+            {currentSpace.name.slice(0, 2)}
+          </span>
+        )}
+        <span className="hidden sm:inline">{currentSpace.name}</span>
+        <span className="text-[0.7em] opacity-60">&#9662;</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 w-[260px] rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
+          <div className="px-3.5 py-2.5 border-b border-white/[0.08]">
+            <div className="text-[0.6rem] font-bold uppercase tracking-widest text-slate-500 select-none">
+              Spaces
+            </div>
+          </div>
+
+          {spaces.map((s) => (
+            <a
+              key={s.id}
+              href={s.domain ? `https://${s.domain}` : '#'}
+              className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors ${
+                s.id === currentSpaceId
+                  ? 'bg-white/[0.07]'
+                  : 'hover:bg-white/[0.04]'
+              }`}
+              onClick={() => setOpen(false)}
+            >
+              {s.logo_url ? (
+                <img src={s.logo_url} alt="" className="w-7 h-7 rounded-md flex-shrink-0" />
+              ) : (
+                <span className="w-7 h-7 rounded-md bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-[10px] font-bold text-primary-foreground leading-none flex-shrink-0">
+                  {s.name.slice(0, 2)}
+                </span>
+              )}
+              <div className="flex flex-col min-w-0 flex-1">
+                <span className="text-sm font-semibold">{s.name}</span>
+                <span className="text-[11px] text-slate-400 truncate">{s.tagline}</span>
+              </div>
+              {s.id === currentSpaceId && (
+                <span className="text-xs text-cyan-400 flex-shrink-0">&#10003;</span>
+              )}
+            </a>
+          ))}
+
+          <div className="px-3.5 py-2 border-t border-white/[0.08] text-center">
+            <span className="text-[11px] text-slate-500">
+              Each space has its own designs & theme
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}