From f7a04346b39cb43d8d851b0064b11660806c04c7 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Tue, 24 Feb 2026 18:50:31 -0800 Subject: [PATCH] feat: rebrand AppSwitcher with rStack identity and pastel badges All apps now use 'r' prefix (rSpace, rNotes, rPubs, etc.), rStack appears as the top-level header, pastel rainbow favicon badges (rS, rN, rP...), emoji to the right of each title, and descriptions emphasize group/collaborative/real-time/self-hosted/community-run. Co-Authored-By: Claude Opus 4.6 --- src/components/AppSwitcher.tsx | 128 +++++++++++++++++++++------------ 1 file changed, 82 insertions(+), 46 deletions(-) diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx index e6b148a..45614f2 100644 --- a/src/components/AppSwitcher.tsx +++ b/src/components/AppSwitcher.tsx @@ -5,55 +5,55 @@ import { useState, useRef, useEffect } from 'react'; export interface AppModule { id: string; name: string; - icon: 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: 'canvas', name: 'Canvas', icon: '🎨', description: 'Collaborative workspace', domain: 'rspace.online' }, - { id: 'notes', name: 'Notes', icon: 'πŸ“', description: 'Rich note-taking', domain: 'rnotes.online' }, - { id: 'pubs', name: 'Pubs', icon: 'πŸ“°', description: 'Publishing platform', domain: 'rpubs.online' }, + { 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: 'Community-run publishing platform', domain: 'rpubs.online' }, // Planning - { id: 'cal', name: 'Calendar', icon: 'πŸ“…', description: 'Scheduling & events', domain: 'rcal.online' }, - { id: 'trips', name: 'Trips', icon: '✈️', description: 'Travel planning', domain: 'rtrips.online' }, - { id: 'stack', name: 'Stack', icon: 'πŸ“‹', description: 'Task management', domain: 'rstack.online' }, + { 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' }, // Discussing & Deciding - { id: 'inbox', name: 'Inbox', icon: 'πŸ“¬', description: 'Messaging & email', domain: 'rinbox.online' }, - { id: 'choices', name: 'Choices', icon: 'πŸ”€', description: 'Decision making', domain: 'rchoices.online' }, - { id: 'vote', name: 'Vote', icon: 'πŸ—³οΈ', description: 'Polls & voting', domain: 'rvote.online' }, + { id: 'inbox', name: 'rInbox', badge: 'rI', color: 'bg-indigo-300', emoji: 'πŸ“¬', description: 'Self-hosted 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 & community governance', domain: 'rvote.online' }, // Funding & Commerce - { id: 'funds', name: 'Funds', icon: 'πŸ’°', description: 'Fundraising', domain: 'rfunds.online' }, - { id: 'wallet', name: 'Wallet', icon: 'πŸ‘›', description: 'Crypto wallet', domain: 'rwallet.online' }, - { id: 'cart', name: 'Cart', icon: 'πŸ›’', description: 'Shopping & commerce', domain: 'rcart.online' }, - { id: 'auctions', name: 'Auctions', icon: 'πŸ”¨', description: 'Auction platform', domain: 'rauctions.online' }, + { id: 'funds', name: 'rFunds', badge: 'rF', color: 'bg-lime-300', emoji: 'πŸ’°', description: 'Community-run fundraising & grants', domain: 'rfunds.online' }, + { id: 'wallet', name: 'rWallet', badge: 'rW', color: 'bg-yellow-300', emoji: 'πŸ‘›', description: 'Self-hosted 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: 'Community auction platform', domain: 'rauctions.online' }, // Sharing & Media - { id: 'files', name: 'Files', icon: 'πŸ“', description: 'File storage', domain: 'rfiles.online' }, - { id: 'tube', name: 'Tube', icon: '🎬', description: 'Video platform', domain: 'rtube.online' }, - { id: 'data', name: 'Data', icon: 'πŸ“Š', description: 'Analytics', domain: 'rdata.online' }, - { id: 'maps', name: 'Maps', icon: 'πŸ—ΊοΈ', description: 'Mapping tool', domain: 'rmaps.online' }, - { id: 'network', name: 'Network', icon: '🌐', description: 'Social network', domain: 'rnetwork.online' }, + { id: 'files', name: 'rFiles', badge: 'rFi', color: 'bg-cyan-300', emoji: 'πŸ“', description: 'Self-hosted collaborative file storage', domain: 'rfiles.online' }, + { id: 'tube', name: 'rTube', badge: 'rTu', color: 'bg-pink-300', emoji: '🎬', description: 'Community-run video platform', domain: 'rtube.online' }, + { id: 'data', name: 'rData', badge: 'rD', color: 'bg-purple-300', emoji: 'πŸ“Š', description: 'Self-hosted analytics & insights', domain: 'rdata.online' }, + { id: 'maps', name: 'rMaps', badge: 'rM', color: 'bg-green-300', emoji: 'πŸ—ΊοΈ', description: 'Collaborative real-time mapping', domain: 'rmaps.online' }, + { id: 'network', name: 'rNetwork', badge: 'rNe', color: 'bg-blue-300', emoji: '🌐', description: 'Self-hosted community network', domain: 'rnetwork.online' }, ]; const MODULE_CATEGORIES: Record = { - canvas: 'Creating', - notes: 'Creating', - pubs: 'Creating', - cal: 'Planning', - trips: 'Planning', - stack: 'Planning', - inbox: 'Discussing & Deciding', + 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', - files: 'Sharing & Media', - tube: 'Sharing & Media', - data: 'Sharing & Media', - maps: 'Sharing & Media', + vote: 'Discussing & Deciding', + funds: 'Funding & Commerce', + wallet: 'Funding & Commerce', + cart: 'Funding & Commerce', + auctions:'Funding & Commerce', + files: 'Sharing & Media', + tube: 'Sharing & Media', + data: 'Sharing & Media', + maps: 'Sharing & Media', network: 'Sharing & Media', }; @@ -84,7 +84,6 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) { }, []); const currentMod = MODULES.find((m) => m.id === current); - const label = currentMod ? `${currentMod.icon} ${currentMod.name}` : 'πŸ“ rNotes'; // Group modules by category const groups = new Map(); @@ -96,40 +95,66 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) { return (
+ {/* Trigger button */} + {/* Dropdown */} {open && ( -
+
+ {/* rStack header */} +
+ + r* + +
+
rStack
+
Self-hosted community app suite
+
+
+ + {/* Categories */} {CATEGORY_ORDER.map((cat) => { const items = groups.get(cat); if (!items || items.length === 0) return null; return (