From b7308ffabce8a8a326bc86e20fe51f029f13794f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Feb 2026 23:32:47 -0800
Subject: [PATCH] fix: landing page improvements and SpaceSwitcher domain
 support

- SpaceSwitcher auto-derives domain from window.location
- Fix landing page issues (redirect bug, duplicate footers,
  broken links, missing content)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/SpaceSwitcher.tsx | 165 +++++++++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 components/SpaceSwitcher.tsx

diff --git a/components/SpaceSwitcher.tsx b/components/SpaceSwitcher.tsx
new file mode 100644
index 0000000..f5a9450
--- /dev/null
+++ b/components/SpaceSwitcher.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface SpaceInfo {
+  slug: string;
+  name: string;
+  icon?: string;
+  role?: string;
+}
+
+interface SpaceSwitcherProps {
+  /** Current app domain, e.g. 'rfunds.online'. Space links become <space>.<domain> */
+  domain?: string;
+}
+
+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 ref = useRef<HTMLDivElement>(null);
+
+  // Derive domain from window.location if not provided
+  const appDomain = domain || (typeof window !== 'undefined'
+    ? window.location.hostname.split('.').slice(-2).join('.')
+    : 'rspace.online');
+
+  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);
+  }, []);
+
+  // Check auth status on mount
+  useEffect(() => {
+    fetch('/api/me')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated) setIsAuthenticated(true);
+      })
+      .catch(() => {});
+  }, []);
+
+  const loadSpaces = async () => {
+    if (loaded) return;
+    try {
+      const res = await fetch('/api/spaces');
+      if (res.ok) {
+        const data = await res.json();
+        setSpaces(data.spaces || []);
+      }
+    } catch {
+      // API not available
+    }
+    setLoaded(true);
+  };
+
+  const handleOpen = async () => {
+    const nowOpen = !open;
+    setOpen(nowOpen);
+    if (nowOpen && !loaded) {
+      await loadSpaces();
+    }
+  };
+
+  /** 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);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); handleOpen(); }}
+        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="text-[0.7em] opacity-50">&#9662;</span>
+      </button>
+
+      {open && (
+        <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 ? (
+            <>
+              <div className="px-4 py-4 text-center text-sm text-slate-400">
+                {isAuthenticated ? 'No spaces yet' : '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>
+            </>
+          ) : (
+            <>
+              {mySpaces.length > 0 && (
+                <>
+                  <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>
+                  {mySpaces.map((s) => (
+                    <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]"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="text-base">{s.icon || '🌐'}</span>
+                      <span className="text-sm font-medium flex-1">{s.name}</span>
+                      {s.role && (
+                        <span className="text-[0.6rem] font-bold uppercase bg-cyan-500/15 text-cyan-300 px-1.5 py-0.5 rounded tracking-wide">
+                          {s.role}
+                        </span>
+                      )}
+                    </a>
+                  ))}
+                </>
+              )}
+
+              {publicSpaces.length > 0 && (
+                <>
+                  {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>
+                  {publicSpaces.map((s) => (
+                    <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]"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="text-base">{s.icon || '🌐'}</span>
+                      <span className="text-sm font-medium flex-1">{s.name}</span>
+                    </a>
+                  ))}
+                </>
+              )}
+
+              <div className="h-px bg-white/[0.08] my-1" />
+              <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>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}