From 95f9beeb629f5655a57b50e73eadc3990e83a9a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 29 May 2026 16:48:37 +0000
Subject: [PATCH] docs+ui: Demo-Modus im Projektplan dokumentieren,
 Login-Einstieg verbessern

- Projektplan: neue Subsektion "Demo-Modus (Login umgehen)" unter
  Authentifizierung (Zweck, Aktivierung, Umsetzungsvorschlag, Grenzen)
  sowie Hinweis im Login-Screen (10.1)
- Login-Form: Demo-Einstieg von kleinem Text-Link zu prominentem
  Outline-Button ("Ohne Login ausprobieren") mit Hinweistext

https://claude.ai/code/session_01FVY3E3QvCEMjXz9qMLgyj2
---
 docs/Kommit_Projektplan.md         | 26 ++++++++++++++++++++++++++
 src/components/auth/login-form.tsx | 24 +++++++++++++++---------
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/docs/Kommit_Projektplan.md b/docs/Kommit_Projektplan.md
index 66fd7bb..8a7a45f 100644
--- a/docs/Kommit_Projektplan.md
+++ b/docs/Kommit_Projektplan.md
@@ -122,6 +122,31 @@ Beim allerersten Login (neuer Account):
 
 Bei bestehenden Accounts: direkt zur Liste.
 
+### Demo-Modus (Login umgehen)
+
+**Zweck:** Die App soll sich ohne Supabase-Setup, Telefonnummer oder Telegram-Code
+durchklicken lassen — etwa für Vercel-Preview-Links, schnelle UI-Reviews oder eine
+Onboarding-Demo.
+
+**Aktivierung:** Button „Ohne Login ausprobieren" am unteren Rand der Login-Seite.
+Er setzt das Flag `localStorage["kommit_demo"] = "1"` und lädt die App neu. Beendet
+wird der Modus über den „Beenden"-Link im Demo-Banner (löscht das Flag + Reload).
+
+**Vorschlag zur Umsetzung / Architektur:**
+- Zentrales, client-seitiges localStorage-Flag in `src/lib/demo.ts`
+  (`isDemoMode()` / `enableDemoMode()` / `disableDemoMode()`).
+- `useAuth` (`src/hooks/use-auth.ts`) initialisiert bei aktivem Demo-Modus direkt mit
+  einer Mock-Session (`DEMO_SESSION` / `DEMO_USER` / `DEMO_PROFILE`) statt Supabase
+  abzufragen; `signOut()` ruft im Demo-Fall `disableDemoMode()`.
+- Daten-Hooks (z. B. `useListings`) liefern bei aktivem Demo-Modus die Mock-Daten
+  (`DEMO_LISTINGS`, `DEMO_PROFILES`) statt einer DB-Query.
+- Der Demo-User hat die Rolle `admin`, damit auch der Admin-Bereich erkundbar ist.
+- Die App-Shell zeigt ein Hinweis-Banner: „Demo-Modus — Änderungen werden nicht
+  gespeichert" mit „Beenden"-Button.
+
+**Grenzen:** Keine Persistenz — Änderungen verschwinden beim Reload. Es werden keine
+echten OTP-, Telegram- oder Push-Aufrufe ausgeführt.
+
 ---
 
 ## 5. Datenmodell
@@ -517,6 +542,7 @@ In den Einstellungen kann der User „Auch via Telegram benachrichtigen" aktivie
 - Step 2 (gleicher Screen): 6-stelliges OTP-Feld mit `autocomplete="one-time-code"` (iOS-Suggest)
 - Mini-Text: „Wir schicken dir den Code via Telegram"
 - Bei neuem User: zusätzliches Profilformular (Vor- + Nachname)
+- Am unteren Rand: Button „Ohne Login ausprobieren →" als Einstieg in den Demo-Modus (siehe Abschnitt 4)
 
 ### 10.2 Liste (Hauptscreen)
 - Header: Logo links, Avatar des Users rechts (→ Profil)
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index a94af76..10b97b5 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -38,6 +38,11 @@ export function LoginForm({ onSendOtp, onVerifyOtp }: LoginFormProps) {
     }
   };
 
+  const handleDemo = () => {
+    enableDemoMode();
+    window.location.reload();
+  };
+
   const handleVerifyOtp = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
@@ -134,17 +139,18 @@ export function LoginForm({ onSendOtp, onVerifyOtp }: LoginFormProps) {
         </form>
       )}
 
-      <div className="border-t pt-4 text-center">
-        <button
+      <div className="space-y-2 border-t pt-4 text-center">
+        <Button
           type="button"
-          className="text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
-          onClick={() => {
-            enableDemoMode();
-            window.location.reload();
-          }}
+          variant="outline"
+          className="w-full"
+          onClick={handleDemo}
         >
-          Demo ohne Login →
-        </button>
+          Ohne Login ausprobieren →
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          Zum Reinschnuppern — ganz ohne Telefonnummer.
+        </p>
       </div>
     </div>
   );