feat: rebrand AppSwitcher with pastel badges, rStack header, updated categories

- Pastel rainbow badges (rS, rN, rP, rC, rT...) replace plain emoji icons
- Emoji moved to right of app name in dropdown items
- rStack header with gradient badge at top of dropdown
- rStack footer link at bottom
- Canvas renamed to rSpace
- rMaps moved to Planning category
- "Sharing & Media" renamed to "Social & Sharing" with rNetwork at top
- Trigger button shows pastel badge + app name

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

modules/canvas/mod.ts

@@ -51,8 +51,8 @@ routes.get("/", async (c) => {
 
 export const canvasModule: RSpaceModule = {
 	id: "canvas",
-	name: "Canvas",
+	name: "rSpace",
 	icon: "🎨",
-	description: "Collaborative infinite canvas",
+	description: "Real-time collaborative canvas",
 	routes,
 };

shared/components/rstack-app-switcher.ts

@@ -16,6 +16,33 @@ export interface AppSwitcherModule {
 	standaloneDomain?: string;
 }
 
+// Pastel badge abbreviations & colors for each module
+const MODULE_BADGES: Record<string, { badge: string; color: string }> = {
+	canvas:    { badge: "rS",  color: "#5eead4" }, // teal-300
+	notes:     { badge: "rN",  color: "#fcd34d" }, // amber-300
+	pubs:      { badge: "rP",  color: "#fda4af" }, // rose-300
+	swag:      { badge: "rSw", color: "#fda4af" }, // rose-300
+	splat:     { badge: "r3",  color: "#d8b4fe" }, // purple-300
+	cal:       { badge: "rC",  color: "#7dd3fc" }, // sky-300
+	trips:     { badge: "rT",  color: "#6ee7b7" }, // emerald-300
+	maps:      { badge: "rM",  color: "#86efac" }, // green-300
+	work:      { badge: "rWk", color: "#fdba74" }, // orange-300
+	forum:     { badge: "rFo", color: "#a5b4fc" }, // indigo-300
+	inbox:     { badge: "rI",  color: "#a5b4fc" }, // indigo-300
+	choices:   { badge: "rCh", color: "#f0abfc" }, // fuchsia-300
+	vote:      { badge: "rV",  color: "#c4b5fd" }, // violet-300
+	funds:     { badge: "rF",  color: "#bef264" }, // lime-300
+	wallet:    { badge: "rW",  color: "#fde047" }, // yellow-300
+	cart:      { badge: "rCt", color: "#fdba74" }, // orange-300
+	providers: { badge: "rPr", color: "#fdba74" }, // orange-300
+	books:     { badge: "rB",  color: "#fda4af" }, // rose-300
+	files:     { badge: "rFi", color: "#67e8f9" }, // cyan-300
+	tube:      { badge: "rTu", color: "#f9a8d4" }, // pink-300
+	data:      { badge: "rD",  color: "#d8b4fe" }, // purple-300
+	network:   { badge: "rNe", color: "#93c5fd" }, // blue-300
+	auctions:  { badge: "rA",  color: "#fca5a5" }, // red-300
+};
+
 // Category definitions for the rApp dropdown (display-only grouping)
 const MODULE_CATEGORIES: Record<string, string> = {
 	canvas: "Creating",
@@ -25,6 +52,7 @@ const MODULE_CATEGORIES: Record<string, string> = {
 	splat: "Creating",
 	cal: "Planning",
 	trips: "Planning",
+	maps: "Planning",
 	work: "Planning",
 	forum: "Discussing & Deciding",
 	inbox: "Discussing & Deciding",
@@ -34,12 +62,12 @@ const MODULE_CATEGORIES: Record<string, string> = {
 	wallet: "Funding & Commerce",
 	cart: "Funding & Commerce",
 	providers: "Funding & Commerce",
-	books: "Sharing & Media",
+	auctions: "Funding & Commerce",
-	files: "Sharing & Media",
+	network: "Social & Sharing",
-	tube: "Sharing & Media",
+	books: "Social & Sharing",
-	data: "Sharing & Media",
+	files: "Social & Sharing",
-	maps: "Sharing & Media",
+	tube: "Social & Sharing",
-	network: "Sharing & Media",
+	data: "Social & Sharing",
 };
 
 const CATEGORY_ORDER = [
@@ -47,7 +75,7 @@ const CATEGORY_ORDER = [
 	"Planning",
 	"Discussing & Deciding",
 	"Funding & Commerce",
-	"Sharing & Media",
+	"Social & Sharing",
 ];
 
 export class RStackAppSwitcher extends HTMLElement {
@@ -95,7 +123,17 @@ export class RStackAppSwitcher extends HTMLElement {
 			}
 		}
 
-		let html = "";
+		// rStack header
+		let html = `
+			<div class="rstack-header">
+				<span class="rstack-badge">r*</span>
+				<div class="rstack-info">
+					<span class="rstack-title">rStack</span>
+					<span class="rstack-subtitle">Self-hosted community app suite</span>
+				</div>
+			</div>
+		`;
+
 		for (const cat of CATEGORY_ORDER) {
 			const items = groups.get(cat);
 			if (!items || items.length === 0) continue;
@@ -106,18 +144,34 @@ export class RStackAppSwitcher extends HTMLElement {
 			html += `<div class="category-header">Other</div>`;
 			html += uncategorized.map((m) => this.#renderItem(m, current)).join("");
 		}
+
+		// Footer
+		html += `
+			<div class="rstack-footer">
+				<a href="https://rstack.online" target="_blank" rel="noopener">rstack.online — self-hosted, community-run</a>
+			</div>
+		`;
+
 		return html;
 	}
 
 	#renderItem(m: AppSwitcherModule, current: string): string {
+		const badgeInfo = MODULE_BADGES[m.id];
+		const badgeHtml = badgeInfo
+			? `<span class="item-badge" style="background:${badgeInfo.color}">${badgeInfo.badge}</span>`
+			: `<span class="item-icon">${m.icon}</span>`;
+
 		return `
 			<div class="item-row ${m.id === current ? "active" : ""}">
 				<a class="item"
 				   href="/${this.#getSpaceSlug()}/${m.id}"
 				   data-id="${m.id}">
-					<span class="item-icon">${m.icon}</span>
+					${badgeHtml}
 					<div class="item-text">
+						<span class="item-name-row">
 							<span class="item-name">${m.name}</span>
+							<span class="item-emoji">${m.icon}</span>
+						</span>
 						<span class="item-desc">${m.description}</span>
 					</div>
 				</a>
@@ -129,12 +183,18 @@ export class RStackAppSwitcher extends HTMLElement {
 	#render() {
 		const current = this.current;
 		const currentMod = this.#modules.find((m) => m.id === current);
-		const label = currentMod ? `${currentMod.icon} ${currentMod.name}` : "🌌 rSpace";
+		const badgeInfo = currentMod ? MODULE_BADGES[currentMod.id] : null;
+
+		const triggerContent = badgeInfo
+			? `<span class="trigger-badge" style="background:${badgeInfo.color}">${badgeInfo.badge}</span> ${currentMod!.name}`
+			: currentMod
+				? `${currentMod.icon} ${currentMod.name}`
+				: `<span class="trigger-badge rstack-gradient">r*</span> rStack`;
 
 		this.#shadow.innerHTML = `
 			<style>${STYLES}</style>
 			<div class="switcher">
-				<button class="trigger" id="trigger">${label} <span class="caret">▾</span></button>
+				<button class="trigger" id="trigger">${triggerContent} <span class="caret">▾</span></button>
 				<div class="menu" id="menu">
 					${this.#renderGroupedModules(current)}
 				</div>
@@ -192,11 +252,21 @@ const STYLES = `
 .trigger:hover { background: rgba(255,255,255,0.12); }
 :host-context([data-theme="light"]) .trigger:hover { background: rgba(0,0,0,0.08); }
 
+.trigger-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 5px;
+  font-size: 0.6rem; font-weight: 900; color: #0f172a;
+  line-height: 1; flex-shrink: 0;
+}
+.trigger-badge.rstack-gradient {
+  background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af);
+}
+
 .caret { font-size: 0.7em; opacity: 0.6; }
 
 .menu {
   position: absolute; top: 100%; left: 0; margin-top: 6px;
-  min-width: 260px; border-radius: 12px; overflow: hidden;
+  min-width: 300px; border-radius: 12px; overflow: hidden;
   overflow-y: auto; max-height: 70vh;
   box-shadow: 0 8px 30px rgba(0,0,0,0.25); display: none; z-index: 200;
 }
@@ -208,6 +278,37 @@ const STYLES = `
   background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
 }
 
+/* rStack header */
+.rstack-header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 14px; border-bottom: 1px solid rgba(128,128,128,0.15);
+}
+.rstack-badge {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 8px;
+  background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af);
+  font-size: 0.7rem; font-weight: 900; color: #0f172a; line-height: 1;
+  flex-shrink: 0;
+}
+.rstack-info { display: flex; flex-direction: column; }
+.rstack-title { font-size: 0.875rem; font-weight: 700; }
+.rstack-subtitle { font-size: 0.65rem; opacity: 0.5; }
+:host-context([data-theme="light"]) .rstack-title { color: #0f172a; }
+:host-context([data-theme="dark"]) .rstack-title { color: white; }
+
+/* Footer */
+.rstack-footer {
+  padding: 10px 14px; text-align: center;
+  border-top: 1px solid rgba(128,128,128,0.15);
+}
+.rstack-footer a {
+  font-size: 0.7rem; opacity: 0.4; text-decoration: none; color: inherit;
+  transition: opacity 0.15s;
+}
+.rstack-footer a:hover { opacity: 0.8; }
+:host-context([data-theme="light"]) .rstack-footer a:hover { color: #06b6d4; }
+:host-context([data-theme="dark"]) .rstack-footer a:hover { color: #22d3ee; }
+
 .item-row {
   display: flex; align-items: center;
   transition: background 0.12s;
@@ -220,8 +321,8 @@ const STYLES = `
 :host-context([data-theme="dark"]) .item-row.active { background: rgba(6,182,212,0.1); }
 
 .item {
-  display: flex; align-items: center; gap: 12px;
+  display: flex; align-items: center; gap: 10px;
-  padding: 10px 14px; text-decoration: none;
+  padding: 8px 14px; text-decoration: none;
   cursor: pointer; flex: 1; min-width: 0; color: inherit;
 }
 
@@ -236,14 +337,22 @@ const STYLES = `
 :host-context([data-theme="light"]) .item-ext { color: #06b6d4; }
 :host-context([data-theme="dark"]) .item-ext { color: #22d3ee; }
 
+.item-badge {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  font-size: 0.6rem; font-weight: 900; color: #0f172a;
+  line-height: 1; flex-shrink: 0;
+}
 .item-icon { font-size: 1.3rem; width: 28px; text-align: center; flex-shrink: 0; }
-.item-text { display: flex; flex-direction: column; min-width: 0; }
+.item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.item-name-row { display: flex; align-items: center; gap: 6px; }
 .item-name { font-size: 0.875rem; font-weight: 600; }
-.item-desc { font-size: 0.75rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.item-emoji { font-size: 0.875rem; flex-shrink: 0; }
+.item-desc { font-size: 0.7rem; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 .category-header {
-  padding: 8px 14px 4px; font-size: 0.7rem; font-weight: 700;
+  padding: 8px 14px 4px; font-size: 0.6rem; font-weight: 700;
-  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5;
+  text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5;
   user-select: none;
 }
 .category-header:not(:first-child) {