React-Frontend: Login, Registrierung, Header, neuer Beitrag

- AuthBox mit Login/Registrierung (Auto-Login nach Registrierung)
- Compose mit Zwischenablage-Bild, Feed springt danach an den Anfang
- Headerbar mit Profil-Link und Logout
- useAuthChanged: me und Votes nach Login/Logout neu laden
- kein Aufblitzen der Login-Box, solange der Anmeldestatus lädt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiXsPUqw7oeomZ8wZrQW5q

frontend/src/Layout.tsx

@@ -1,4 +1,6 @@
 import { Link, Outlet, useLocation } from "react-router";
+import { api } from "./api";
+import { useAuthChanged, useMe } from "./auth";
 
 // Tage ohne Datenverlust (fester Startpunkt, Kontinuität seit der alten
 // Version).
@@ -30,7 +32,7 @@ export function Layout() {
             <p id="stats" className="tagline">
               Ohne Datenverlust seit {plural(days, "Tag", "Tagen")}
             </p>
-            <div id="headerbar"></div>
+            <Headerbar />
           </>
         ) : (
           <div id="headerbar"><Link className="button" to="/">zurück zum Feed</Link></div>
@@ -43,3 +45,22 @@ export function Layout() {
     </>
   );
 }
+
+// Headerbar der Startseite: angemeldet Profil-Link und Logout, sonst leer.
+function Headerbar() {
+  const me = useMe().data;
+  const authChanged = useAuthChanged();
+  if (!me) return <div id="headerbar"></div>;
+
+  // POST statt GET: als GET wäre Logout per fremdem Link auslösbar (CSRF).
+  const logout = async () => {
+    await api.post("/auth/logout").catch(() => undefined);
+    await authChanged();
+  };
+  return (
+    <div id="headerbar">
+      <Link className="button" to={`/u/${encodeURIComponent(me.username)}`}>mein Profil</Link>{" "}
+      <button id="logout-btn" onClick={logout}>Logout</button>
+    </div>
+  );
+}