Add expand page

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import DrawIt from './pages/DrawIt'
+import ExpandIt from './pages/ExpandIt'
 import GenerateIt from './pages/GenerateIt'
 import Login from './pages/Login'
 import { useAuth } from './context/AuthContext'
@@ -19,6 +20,7 @@ export default function App() {
         <Route path="/" element={<Navigate to="/draw" replace />} />
         <Route path="/draw" element={<PrivateRoute><DrawIt /></PrivateRoute>} />
         <Route path="/generate" element={<PrivateRoute><GenerateIt /></PrivateRoute>} />
+        <Route path="/expand" element={<PrivateRoute><ExpandIt /></PrivateRoute>} />
       </Routes>
     </ThemeProvider>
   )

frontend/src/components/Topbar.tsx

@@ -35,7 +35,7 @@ const CrosshairIcon = () => (
 )
 
 interface TopbarProps {
-  page: 'draw' | 'generate'
+  page: 'draw' | 'generate' | 'expand'
   center?: ReactNode
 }
 
@@ -66,6 +66,12 @@ export default function Topbar({ page, center }: TopbarProps) {
         >
           Generieren
         </button>
+        <button
+          className={`topbar-tab${page === 'expand' ? ' active' : ''}`}
+          onClick={() => navigate('/expand')}
+        >
+          Expand
+        </button>
       </nav>
 
       {center && <div className="topbar-center">{center}</div>}

frontend/src/index.css

@@ -1150,6 +1150,60 @@ select:focus {
 .status.ok { color: var(--success); }
 .status.error { color: var(--danger); }
 
+/* =====================================================
+   EXPAND PAGE
+   ===================================================== */
+.expand-page {
+  flex: 1;
+  min-height: 0;
+  background: var(--canvas-bg);
+  overflow: auto;
+  padding: 28px;
+}
+
+.expand-panel {
+  width: min(920px, 100%);
+  height: min(680px, 100%);
+  min-height: 420px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.expand-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.expand-mode-group {
+  width: 280px;
+}
+
+.expand-textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 320px;
+  resize: vertical;
+  padding: 14px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-1);
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.6;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.expand-textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(92,108,246,.12), var(--shadow-sm);
+}
+
 /* =====================================================
    AUTH / LOGIN PAGE
    ===================================================== */

frontend/src/pages/ExpandIt.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import Topbar from '../components/Topbar'
+
+type ExpandMode = 'category' | 'words'
+
+export default function ExpandIt() {
+  const [mode, setMode] = useState<ExpandMode>('category')
+  const [input, setInput] = useState('')
+
+  return (
+    <div className="app-shell">
+      <Topbar page="expand" />
+
+      <main className="expand-page">
+        <section className="expand-panel">
+          <div className="expand-toolbar">
+            <div className="mode-group expand-mode-group" aria-label="Expand-Modus">
+              <label className={`mode-btn${mode === 'category' ? ' active' : ''}`}>
+                <input
+                  type="radio"
+                  name="expand-mode"
+                  checked={mode === 'category'}
+                  onChange={() => setMode('category')}
+                />
+                Add Kategorie
+              </label>
+              <label className={`mode-btn${mode === 'words' ? ' active' : ''}`}>
+                <input
+                  type="radio"
+                  name="expand-mode"
+                  checked={mode === 'words'}
+                  onChange={() => setMode('words')}
+                />
+                Add Words
+              </label>
+            </div>
+          </div>
+
+          <textarea
+            className="expand-textarea"
+            value={input}
+            onChange={event => setInput(event.target.value)}
+            placeholder="Text eingeben..."
+            spellCheck={false}
+          />
+        </section>
+      </main>
+    </div>
+  )
+}