From 05db0343aff91907d162fb9443e88729df61ed9e Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Feb 2026 19:15:52 -0800
Subject: [PATCH] feat: add rStack AppSwitcher dropdown to header

Adds the unified rStack app switcher with pastel badges, emoji icons,
and categorized navigation across all 17 rStack apps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx               |   4 +
 src/components/AppSwitcher.tsx | 192 +++++++++++++++++++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 src/components/AppSwitcher.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 73616a9..2549e0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { nanoid } from 'nanoid';
 import { AuthButton } from '@/components/AuthButton';
+import { AppSwitcher } from '@/components/AppSwitcher';
 import { useAuthStore } from '@/stores/auth';
 
 // Emoji options for avatars
@@ -125,6 +126,8 @@ export default function HomePage() {
       {/* ── Header Nav ─────────────────────────────────────────── */}
       <nav className="border-b border-slate-700/50 backdrop-blur-sm sticky top-0 z-50 bg-slate-900/90">
         <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+          <AppSwitcher current="maps" />
           <Link href="/" className="flex items-center gap-2">
             <div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
               rM
@@ -133,6 +136,7 @@ export default function HomePage() {
               <span className="text-rmaps-primary">r</span>Maps
             </span>
           </Link>
+          </div>
           <div className="flex items-center gap-4">
             <Link
               href="/demo"
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
new file mode 100644
index 0000000..8006789
--- /dev/null
+++ b/src/components/AppSwitcher.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+export interface AppModule {
+  id: string;
+  name: string;
+  badge: string;       // favicon-style abbreviation: rS, rN, rP, etc.
+  color: string;       // Tailwind bg class for the pastel badge
+  emoji: string;       // function emoji shown right of title
+  description: string;
+  domain?: string;
+}
+
+const MODULES: AppModule[] = [
+  // Creating
+  { id: 'space',    name: 'rSpace',    badge: 'rS',  color: 'bg-teal-300',    emoji: '\u{1F3A8}', description: 'Real-time collaborative canvas',               domain: 'rspace.online' },
+  { id: 'notes',    name: 'rNotes',    badge: 'rN',  color: 'bg-amber-300',   emoji: '\u{1F4DD}', description: 'Group note-taking & knowledge capture',        domain: 'rnotes.online' },
+  { id: 'pubs',     name: 'rPubs',     badge: 'rP',  color: 'bg-rose-300',    emoji: '\u{1F4F0}', description: 'Collaborative publishing platform',              domain: 'rpubs.online' },
+  // Planning
+  { id: 'cal',      name: 'rCal',      badge: 'rC',  color: 'bg-sky-300',     emoji: '\u{1F4C5}', description: 'Collaborative scheduling & events',             domain: 'rcal.online' },
+  { id: 'trips',    name: 'rTrips',    badge: 'rT',  color: 'bg-emerald-300', emoji: '\u2708\uFE0F', description: 'Group travel planning in real time',            domain: 'rtrips.online' },
+  { id: 'maps',     name: 'rMaps',     badge: 'rM',  color: 'bg-green-300',   emoji: '\u{1F5FA}\uFE0F', description: 'Collaborative real-time mapping',               domain: 'rmaps.online' },
+  // Discussing & Deciding
+  { id: 'inbox',    name: 'rInbox',    badge: 'rI',  color: 'bg-indigo-300',  emoji: '\u{1F4EC}', description: 'Private group messaging',                        domain: 'rinbox.online' },
+  { id: 'choices',  name: 'rChoices',  badge: 'rCh', color: 'bg-fuchsia-300', emoji: '\u{1F500}', description: 'Collaborative decision making',                 domain: 'rchoices.online' },
+  { id: 'vote',     name: 'rVote',     badge: 'rV',  color: 'bg-violet-300',  emoji: '\u{1F5F3}\uFE0F', description: 'Real-time polls & governance',                  domain: 'rvote.online' },
+  // Funding & Commerce
+  { id: 'funds',    name: 'rFunds',    badge: 'rF',  color: 'bg-lime-300',    emoji: '\u{1F4B8}', description: 'Collaborative fundraising & grants',            domain: 'rfunds.online' },
+  { id: 'wallet',   name: 'rWallet',   badge: 'rW',  color: 'bg-yellow-300',  emoji: '\u{1F4B0}', description: 'Multi-chain crypto wallet',                      domain: 'rwallet.online' },
+  { id: 'cart',     name: 'rCart',      badge: 'rCt', color: 'bg-orange-300',  emoji: '\u{1F6D2}', description: 'Group commerce & shared shopping',              domain: 'rcart.online' },
+  { id: 'auctions', name: 'rAuctions', badge: 'rA',  color: 'bg-red-300',     emoji: '\u{1F528}', description: 'Live auction platform',                          domain: 'rauctions.online' },
+  // Social & Sharing
+  { id: 'network',  name: 'rNetwork',  badge: 'rNe', color: 'bg-blue-300',    emoji: '\u{1F310}', description: 'Community network & social graph',              domain: 'rnetwork.online' },
+  { id: 'files',    name: 'rFiles',    badge: 'rFi', color: 'bg-cyan-300',    emoji: '\u{1F4C1}', description: 'Collaborative file storage',                    domain: 'rfiles.online' },
+  { id: 'tube',     name: 'rTube',     badge: 'rTu', color: 'bg-pink-300',    emoji: '\u{1F3AC}', description: 'Group video platform',                          domain: 'rtube.online' },
+  { id: 'data',     name: 'rData',     badge: 'rD',  color: 'bg-purple-300',  emoji: '\u{1F4CA}', description: 'Analytics & insights dashboard',                domain: 'rdata.online' },
+];
+
+const MODULE_CATEGORIES: Record<string, string> = {
+  space:   'Creating',
+  notes:   'Creating',
+  pubs:    'Creating',
+  cal:     'Planning',
+  trips:   'Planning',
+  inbox:   'Discussing & Deciding',
+  choices: 'Discussing & Deciding',
+  vote:    'Discussing & Deciding',
+  funds:   'Funding & Commerce',
+  wallet:  'Funding & Commerce',
+  cart:    'Funding & Commerce',
+  auctions:'Funding & Commerce',
+  maps:    'Planning',
+  network: 'Social & Sharing',
+  files:   'Social & Sharing',
+  tube:    'Social & Sharing',
+  data:    'Social & Sharing',
+};
+
+const CATEGORY_ORDER = [
+  'Creating',
+  'Planning',
+  'Discussing & Deciding',
+  'Funding & Commerce',
+  'Social & Sharing',
+];
+
+interface AppSwitcherProps {
+  current?: string;
+}
+
+export function AppSwitcher({ current = 'notes' }: 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);
+
+  // Group modules by category
+  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}>
+      {/* Trigger button */}
+      <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>{currentMod?.name || 'rStack'}</span>
+        <span className="text-[0.7em] opacity-60">&#9662;</span>
+      </button>
+
+      {/* Dropdown */}
+      {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]">
+          {/* rStack header */}
+          <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>
+
+          {/* Categories */}
+          {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)}
+                    >
+                      {/* Pastel favicon badge */}
+                      <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>
+                      {/* Name + description */}
+                      <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>
+            );
+          })}
+
+          {/* Footer */}
+          <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>
+  );
+}