feat: React app shell with global styles and state-based routing (Task 8)

- index.css: brand CSS custom properties, .btn, input styles, .app-shell layout - App.tsx: session token extraction from URL, /api/auth/me validation, 4-route shell - main.tsx: renders App with StrictMode Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 02:07:19 +00:00
parent 85ba992432
commit 2dd6402c86
3 changed files with 151 additions and 1 deletions
@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import './index.css'
+
+type Route = 'login' | 'onboarding' | 'game' | 'admin'
+
+export default function App() {
+  const [route, setRoute] = useState<Route>('login')
+  const [sessionToken, setSessionToken] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // 1. Check for ?session=<token> in URL (from magic link redirect)
+    const params = new URLSearchParams(window.location.search)
+    const urlToken = params.get('session')
+    if (urlToken) {
+      localStorage.setItem('session', urlToken)
+      window.history.replaceState({}, '', window.location.pathname)
+    }
+
+    // 2. Try stored token
+    const stored = urlToken || localStorage.getItem('session')
+    if (!stored) { setLoading(false); return }
+
+    // 3. Validate token with /api/auth/me
+    fetch('/api/auth/me', {
+      headers: { Authorization: `Bearer ${stored}` },
+    })
+      .then(r => {
+        if (r.ok) {
+          setSessionToken(stored)
+          // TODO in Task 9: check if onboarding complete, route accordingly
+          setRoute('game')
+        } else {
+          localStorage.removeItem('session')
+        }
+      })
+      .catch(() => localStorage.removeItem('session'))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="app-shell" style={{ textAlign: 'center', paddingTop: '4rem' }}>
+        <p style={{ fontFamily: 'var(--font-header)', color: 'var(--color-forest)' }}>
+          Loading quest...
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="app-shell">
+      {route === 'login' && (
+        <div>
+          <h1 style={{ marginBottom: '1rem' }}>MorseQuest</h1>
+          <p>Login page coming in Task 9.</p>
+          <button className="btn" onClick={() => setRoute('game')}>
+            Continue as Guest (dev)
+          </button>
+        </div>
+      )}
+      {route === 'onboarding' && (
+        <div>
+          <h1>Onboarding</h1>
+          <p>Mnemonic builder coming in Task 10.</p>
+        </div>
+      )}
+      {route === 'game' && (
+        <div>
+          <h1>Practice</h1>
+          <p>Game loop coming in Task 11.</p>
+          <button className="btn" onClick={() => { localStorage.removeItem('session'); setRoute('login') }}>
+            Log out
+          </button>
+        </div>
+      )}
+      {route === 'admin' && (
+        <div>
+          <h1>Admin</h1>
+          <p>Admin panel coming in Task 12.</p>
+        </div>
+      )}
+    </div>
+  )
+}