Update production compose and improve app/space switcher components

Update docker-compose.prod.yml configuration and enhance AppSwitcher.tsx and SpaceSwitcher.tsx frontend components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 21:19:44 +00:00 · 2026-03-21 21:19:44 +00:00 · 5d61849681
parent c5c5fd79c8
commit 5d61849681
3 changed files with 247 additions and 42 deletions
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@ -1,22 +1,103 @@
+# Production stack — use with: docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d
 services:
-  backend:
-    volumes:
-      - /opt/apps/rswag/designs:/app/designs
-      - /opt/apps/rswag/config:/app/config:ro
-      - /opt/apps/rswag/spaces:/app/spaces:ro
+  # PostgreSQL Database
+  db:
+    image: postgres:16-alpine
+    container_name: rswag-db
+    restart: unless-stopped
    environment:
+      POSTGRES_USER: rswag
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-devpassword}
+      POSTGRES_DB: rswag
+    volumes:
+      - rswag-db-data:/var/lib/postgresql/data
+    networks:
+      - rswag-internal
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U rswag"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  # Redis for sessions/cache
+  redis:
+    image: redis:7-alpine
+    container_name: rswag-redis
+    restart: unless-stopped
+    volumes:
+      - rswag-redis-data:/data
+    networks:
+      - rswag-internal
+
+  # FastAPI Backend
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: rswag-backend
+    restart: unless-stopped
+    environment:
+      # Infrastructure wiring (not secrets)
+      - DATABASE_URL=postgresql://rswag:${DB_PASSWORD:-devpassword}@db:5432/rswag
+      - REDIS_URL=redis://redis:6379
      - DESIGNS_PATH=/app/designs
      - CONFIG_PATH=/app/config
      - SPACES_PATH=/app/spaces
+      - POD_SANDBOX_MODE=${POD_SANDBOX_MODE:-true}
+      - CORS_ORIGINS=${CORS_ORIGINS:-https://rswag.online}
+      # Infisical injects all other secrets at startup
+      - INFISICAL_CLIENT_ID=${INFISICAL_CLIENT_ID}
+      - INFISICAL_CLIENT_SECRET=${INFISICAL_CLIENT_SECRET}
+      - INFISICAL_URL=http://infisical:8080
+      - INFISICAL_PROJECT_SLUG=rswag
+      - INFISICAL_ENV=prod
+    volumes:
+      - ./designs:/app/designs
+      - ./config:/app/config:ro
+      - ./spaces:/app/spaces:ro
+      - ./frontend/public/mockups:/app/mockups:ro
+    depends_on:
+      db:
+        condition: service_healthy
+    networks:
+      - rswag-internal
+      - traefik-public
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.rswag-api.rule=(Host(`rswag.online`) || Host(`fungiswag.jeffemmett.com`) || HostRegexp(`{subdomain:[a-z0-9-]+}.rswag.online`)) && PathPrefix(`/api`)"
+      - "traefik.http.routers.rswag-api.entrypoints=web"
+      - "traefik.http.services.rswag-api.loadbalancer.server.port=8000"
+      - "traefik.docker.network=traefik-public"

+  # Next.js Frontend
  frontend:
    build:
+      context: ./frontend
+      dockerfile: Dockerfile
      args:
-        - NEXT_PUBLIC_API_URL=https://rswag.online/api
+        - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-https://rswag.online/api}
+    container_name: rswag-frontend
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - backend
+    networks:
+      - rswag-internal
+      - traefik-public
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.rswag-web.rule=Host(`rswag.online`) || Host(`fungiswag.jeffemmett.com`) || HostRegexp(`{subdomain:[a-z0-9-]+}.rswag.online`)"
+      - "traefik.http.routers.rswag-web.entrypoints=web"
+      - "traefik.http.services.rswag-web.loadbalancer.server.port=3000"
+      - "traefik.docker.network=traefik-public"
+
+volumes:
+  rswag-db-data:
+  rswag-redis-data:

 networks:
  rswag-internal:
    driver: bridge
-    ipam:
-      config:
-        - subnet: 10.200.1.0/24
+  traefik-public:
+    external: true
--- a/frontend/components/AppSwitcher.tsx
+++ b/frontend/components/AppSwitcher.tsx
@ -21,6 +21,7 @@ const MODULES: AppModule[] = [
  { 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: 'events',   name: 'rEvents',   badge: 'rEv', color: 'bg-violet-200',  emoji: '🎪', description: 'Event aggregation & discovery',                 domain: 'revents.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' },
  // Communicating
@ -43,6 +44,8 @@ const MODULES: AppModule[] = [
  { 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' },
+  // Learning
+  { id: 'books',    name: 'rBooks',    badge: 'rB',  color: 'bg-amber-200',   emoji: '📚', description: 'Collaborative library',                          domain: 'rbooks.online' },
  // Work & Productivity
  { id: 'work',     name: 'rWork',     badge: 'rWo', color: 'bg-slate-300',   emoji: '📋', description: 'Project & task management',                     domain: 'rwork.online' },
  // Identity & Infrastructure
@ -57,6 +60,7 @@ const MODULE_CATEGORIES: Record<string, string> = {
  tube:     'Creating',
  swag:     'Creating',
  cal:      'Planning',
+  events:   'Planning',
  trips:    'Planning',
  maps:     'Planning',
  chats:    'Communicating',
@ -74,6 +78,7 @@ const MODULE_CATEGORIES: Record<string, string> = {
  files:    'Sharing',
  socials:  'Sharing',
  data:     'Observing',
+  books:    'Learning',
  work:     'Work & Productivity',
  ids:      'Identity & Infrastructure',
  stack:    'Identity & Infrastructure',
@ -87,10 +92,25 @@ const CATEGORY_ORDER = [
  'Funding & Commerce',
  'Sharing',
  'Observing',
+  'Learning',
  'Work & Productivity',
  'Identity & Infrastructure',
 ];

+/** Read the username from the EncryptID session in localStorage */
+function getSessionUsername(): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const stored = localStorage.getItem('encryptid_session');
+    if (!stored) return null;
+    const parsed = JSON.parse(stored);
+    const claims = parsed?.claims || parsed;
+    return claims?.eid?.username || claims?.username || null;
+  } catch {
+    return null;
+  }
+}
+
 /** Build the URL for a module, using username subdomain if logged in */
 function getModuleUrl(m: AppModule, username: string | null): string {
  if (!m.domain) return '#';
@ -120,16 +140,22 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
    return () => document.removeEventListener('click', handleClick);
  }, []);

-  // Fetch current user's username for subdomain links
+  // Read username from EncryptID session in localStorage
  useEffect(() => {
-    fetch('/api/me')
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.authenticated && data.user?.username) {
-          setUsername(data.user.username);
-        }
-      })
-      .catch(() => { /* not logged in */ });
+    const sessionUsername = getSessionUsername();
+    if (sessionUsername) {
+      setUsername(sessionUsername);
+    } else {
+      // Fallback: check /api/me
+      fetch('/api/me')
+        .then((r) => r.json())
+        .then((data) => {
+          if (data.authenticated && data.user?.username) {
+            setUsername(data.user.username);
+          }
+        })
+        .catch(() => {});
+    }
  }, []);

  const currentMod = MODULES.find((m) => m.id === current);
--- a/frontend/components/SpaceSwitcher.tsx
+++ b/frontend/components/SpaceSwitcher.tsx
@ -10,15 +10,47 @@ interface SpaceInfo {
 }

 interface SpaceSwitcherProps {
-  /** Current app domain, e.g. 'rswag.online'. Space links become <space>.<domain> */
+  /** Current app domain, e.g. 'rcal.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;
+  }
+}
+
+/** Read the username from the EncryptID session in localStorage */
+function getSessionUsername(): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const stored = localStorage.getItem('encryptid_session');
+    if (!stored) return null;
+    const parsed = JSON.parse(stored);
+    const claims = parsed?.claims || parsed;
+    return claims?.eid?.username || claims?.username || null;
+  } catch {
+    return null;
+  }
+}
+
+/** Read the current space_id from the cookie set by middleware */
+function getCurrentSpaceId(): string {
+  if (typeof document === 'undefined') return 'default';
+  const match = document.cookie.match(/(?:^|;\s*)space_id=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : 'default';
+}
+
 export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
  const [open, setOpen] = useState(false);
  const [spaces, setSpaces] = useState<SpaceInfo[]>([]);
  const [loaded, setLoaded] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [username, setUsername] = useState<string | null>(null);
  const ref = useRef<HTMLDivElement>(null);

  // Derive domain from window.location if not provided
@ -26,6 +58,8 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
    ? window.location.hostname.split('.').slice(-2).join('.')
    : 'rspace.online');

+  const currentSpaceId = getCurrentSpaceId();
+
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
@ -38,21 +72,47 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {

  // Check auth status on mount
  useEffect(() => {
-    fetch('/api/me')
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.authenticated) setIsAuthenticated(true);
-      })
-      .catch(() => {});
+    const token = getEncryptIDToken();
+    const sessionUsername = getSessionUsername();
+    if (token) {
+      setIsAuthenticated(true);
+      if (sessionUsername) {
+        setUsername(sessionUsername);
+      }
+    } else {
+      // Fallback: check /api/me
+      fetch('/api/me')
+        .then((r) => r.json())
+        .then((data) => {
+          if (data.authenticated) {
+            setIsAuthenticated(true);
+            if (data.user?.username) setUsername(data.user.username);
+          }
+        })
+        .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 || []);
+        // Handle both flat array and { spaces: [...] } response formats
+        const raw: Array<{ id?: string; slug?: string; name: string; icon?: string; role?: string }> =
+          Array.isArray(data) ? data : (data.spaces || []);
+        setSpaces(raw.map((s) => ({
+          slug: s.slug || s.id || '',
+          name: s.name,
+          icon: s.icon,
+          role: s.role,
+        })));
      }
    } catch {
      // API not available
@ -71,8 +131,24 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
  /** Build URL for a space: <space>.<current-app-domain> */
  const spaceUrl = (slug: string) => `https://${slug}.${appDomain}`;

-  const mySpaces = spaces.filter((s) => s.role);
-  const publicSpaces = spaces.filter((s) => !s.role);
+  // Build personal space entry for logged-in user
+  const personalSpace: SpaceInfo | null =
+    isAuthenticated && username
+      ? { slug: username, name: 'Personal', icon: '👤', role: 'owner' }
+      : null;
+
+  // Deduplicate: remove personal space from fetched list if it already appears
+  const dedupedSpaces = personalSpace
+    ? spaces.filter((s) => s.slug !== personalSpace.slug)
+    : spaces;
+
+  const mySpaces = dedupedSpaces.filter((s) => s.role);
+  const publicSpaces = dedupedSpaces.filter((s) => !s.role);
+
+  // Determine what to show in the button
+  const currentLabel = currentSpaceId === 'default'
+    ? (personalSpace ? 'personal' : 'public')
+    : currentSpaceId;

  return (
    <div className="relative" ref={ref}>
@ -81,7 +157,7 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
        className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-white/[0.05] transition-colors"
      >
        <span className="opacity-40 font-light mr-0.5">/</span>
-        <span className="max-w-[160px] truncate">personal</span>
+        <span className="max-w-[160px] truncate">{currentLabel}</span>
        <span className="text-[0.7em] opacity-50">&#9662;</span>
      </button>

@ -89,23 +165,40 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
        <div className="absolute top-full left-0 mt-1.5 min-w-[240px] max-h-[400px] overflow-y-auto rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
          {!loaded ? (
            <div className="px-4 py-4 text-center text-sm text-slate-400">Loading spaces...</div>
-          ) : spaces.length === 0 ? (
+          ) : !isAuthenticated && spaces.length === 0 ? (
            <>
              <div className="px-4 py-4 text-center text-sm text-slate-400">
-                {isAuthenticated ? 'No spaces yet' : 'Sign in to see your spaces'}
+                Sign in to see your spaces
              </div>
-              <a
-                href="https://rspace.online/new"
-                className="flex items-center px-3.5 py-2.5 text-sm font-semibold text-cyan-400 hover:bg-cyan-500/[0.08] transition-colors no-underline"
-                onClick={() => setOpen(false)}
-              >
-                + Create new space
-              </a>
            </>
          ) : (
            <>
+              {/* Personal space — always first when logged in */}
+              {personalSpace && (
+                <>
+                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
+                    Personal
+                  </div>
+                  <a
+                    href={spaceUrl(personalSpace.slug)}
+                    className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05] ${
+                      currentSpaceId === personalSpace.slug ? 'bg-white/[0.07]' : ''
+                    }`}
+                    onClick={() => setOpen(false)}
+                  >
+                    <span className="text-base">{personalSpace.icon}</span>
+                    <span className="text-sm font-medium flex-1">{username}</span>
+                    <span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
+                      owner
+                    </span>
+                  </a>
+                </>
+              )}
+
+              {/* Other spaces the user belongs to */}
              {mySpaces.length > 0 && (
                <>
+                  {personalSpace && <div className="h-px bg-white/[0.08] my-1" />}
                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
                    Your spaces
                  </div>
@ -113,7 +206,9 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
                    <a
                      key={s.slug}
                      href={spaceUrl(s.slug)}
-                      className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
+                      className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05] ${
+                        currentSpaceId === s.slug ? 'bg-white/[0.07]' : ''
+                      }`}
                      onClick={() => setOpen(false)}
                    >
                      <span className="text-base">{s.icon || '🌐'}</span>
@ -128,9 +223,10 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
                </>
              )}

+              {/* Public spaces */}
              {publicSpaces.length > 0 && (
                <>
-                  {mySpaces.length > 0 && <div className="h-px bg-white/[0.08] my-1" />}
+                  {(personalSpace || mySpaces.length > 0) && <div className="h-px bg-white/[0.08] my-1" />}
                  <div className="px-3.5 pt-2.5 pb-1 text-[0.65rem] font-bold uppercase tracking-wider text-slate-500 select-none">
                    Public spaces
                  </div>
@ -138,7 +234,9 @@ export function SpaceSwitcher({ domain }: SpaceSwitcherProps) {
                    <a
                      key={s.slug}
                      href={spaceUrl(s.slug)}
-                      className="flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05]"
+                      className={`flex items-center gap-2.5 px-3.5 py-2.5 text-slate-200 no-underline transition-colors hover:bg-white/[0.05] ${
+                        currentSpaceId === s.slug ? 'bg-white/[0.07]' : ''
+                      }`}
                      onClick={() => setOpen(false)}
                    >
                      <span className="text-base">{s.icon || '🌐'}</span>