twitch4steamdeck/CLAUDE_PROGRESS.md

Twitch4SteamDeck — Fortschritts-Snapshot

Stand: 2026-04-07. Diese Datei dient als Übergabe zwischen Sessions. Lies zuerst: diese Datei + todo.md. Der vollständige Architekturplan liegt unter C:\Users\andre\.claude\plans\smooth-shimmying-parasol.md (im Repo gespiegelt als plan.md).

---

Bereits abgeschlossen

✅ Projekt-Skelett (Electron + Vite + React + TypeScript)

• package.json, tsconfig.json, tsconfig.node.json, tsconfig.web.json
• electron.vite.config.ts, electron-builder.yml, .gitignore
• Main-Prozess Stub: src/main/index.ts (BrowserWindow 1280×800, dunkles Theme)
• Preload-Stub: src/preload/index.ts (contextBridge → window.t4sd)
• Renderer: src/renderer/index.html, src/renderer/src/main.tsx, App.tsx, styles/global.css (Big-Screen-Baseline)
• Status: vom User bestätigt — npm run dev öffnet Fenster mit „Twitch4SteamDeck".

✅ Twitch OAuth Device Code Flow

• src/main/auth/deviceCodeFlow.ts — requestDeviceCode(), pollForToken(), refreshAccessToken(). Endpoints: https://id.twitch.tv/oauth2/device, https://id.twitch.tv/oauth2/token. Polling respektiert interval, slow_down, expired, denied, cancelled.
• src/main/auth/tokenStore.ts — Persistenz via Electron safeStorage (kein keytar/native module), Datei: userData/twitch-tokens.bin. Fallback unverschlüsselt mit 0o600 falls Encryption nicht verfügbar.
• src/main/auth/authService.ts — EventEmitter, Methoden: init(), startDeviceFlow(), cancelFlow(), logout(), getValidAccessToken() (mit Auto-Refresh, 60s Safety-Margin). Scope MVP: ['user:read:follows']. Emittiert 'auth-event'.
• src/main/ipc/handlers.ts — IPC-Kanäle: auth:get-status, auth:start-device-flow, auth:cancel, auth:logout, auth:is-configured, auth:event (main → renderer).
• src/preload/index.ts — exponiert window.t4sd.auth.{isConfigured, getStatus, startDeviceFlow, cancel, logout, onEvent}.
• src/renderer/src/screens/LoginScreen.tsx — Phasen idle | starting | awaiting | error | not-configured, QR-Code via qrcode-Lib, Countdown, Cancel-Button.
• src/renderer/src/App.tsx — Statusbasiertes Routing (logged-out → LoginScreen, logged-in → Platzhalter mit Logout-Button).
• src/renderer/src/types/t4sd.d.ts — globale Window-Typen (manuell synchron zu Preload).
• .env.example — Vorlage für MAIN_VITE_TWITCH_CLIENT_ID.
• Status: ✅ End-to-End vom User verifiziert (2026-04-07). Login, Token-Persistenz nach Neustart funktionieren. Logout noch nicht getestet (kommt später).

---

✅ Phase 2 — Twitch Helix-Client + Sidebar-Layout (2026-04-07, code-complete)

• src/main/twitch/types.ts, helixClient.ts — Helix-Wrapper: eigener User, followed channels (paginiert), live streams (batched), Avatare
• IPC twitch:get-followed in handlers.ts, index.ts (HelixClient-Instanz)
• Preload + t4sd.d.ts um window.t4sd.twitch.getFollowed erweitert
• Sidebar-Layout: AppShell.tsx als Post-Auth-Container mit Sidebar.tsx (Heart / Compass / User icons)
  • Tabs: "Du folgst" (Default), "Durchsuchen" (Placeholder), "Mein Account" (Placeholder + Logout)
  • Region-basierte Spatial-Navigation (sidebar ↔ main), Arrow-Left am linken Card-Grid-Rand springt in Sidebar
• FollowingScreen.tsx — Karten-Grid, live-first Sortierung, [Y] Refresh
• FocusableCard.tsx — Block-Layout (kein flex → kein overlap), Thumbnail/Avatar, LIVE-Badge, Viewer-Badge unten-links, Avatar+Name-Zeile, Titel, Spiel
• Icons.tsx — inline SVG-Icons
• gamepad.ts — Gamepad-Polling → synthetische KeyboardEvents (DPad + linker Stick + A/B)
• CSS komplett überarbeitet: .app-layout (Grid 260px / 1fr), .sidebar, .screen, .card-grid mit grid-auto-rows: max-content, .card mit Block-Layout
• Entfernt: alte HomeScreen.tsx (ersetzt durch FollowingScreen)
• Status: noch nicht vom User getestet

Wo wir gerade stehen

Mitten in: Phase 2 ist code-complete, wartet auf Verifikation durch den User.

Konkret offen:

1. User muss eine Twitch-App auf https://dev.twitch.tv/console/apps registrieren (Public Client, Redirect http://localhost) und die Client-ID in .env eintragen:

   MAIN_VITE_TWITCH_CLIENT_ID=<id>
   

2. npm install muss erneut laufen (neue Deps: qrcode, @types/qrcode).
3. npm run dev starten und den kompletten Login-Flow durchspielen:
   • Button „Mit Twitch verbinden" → QR + Code erscheinen
   • Auf Handy twitch.tv/activate öffnen, Code eingeben
   • App sollte automatisch zu „Eingeloggt"-Platzhalter wechseln
   • Neustart der App → sollte eingeloggt bleiben (Tokens in userData/twitch-tokens.bin)

Mögliche Stolpersteine, die morgen früh zu prüfen sind:

• import.meta.env.MAIN_VITE_TWITCH_CLIENT_ID im Main-Prozess: setzt voraus, dass electron-vite die .env lädt — falls nicht, alternativ process.env.MAIN_VITE_TWITCH_CLIENT_ID oder via define-Plugin in electron.vite.config.ts injizieren.
• TypeScript könnte über import.meta.env im Main-Prozess meckern. tsconfig.node.json hat "types": ["node", "electron-vite/node"] — sollte reichen.
• Renderer-Types: src/renderer/src/types/t4sd.d.ts muss von tsconfig.web.json erfasst werden (ist über src/renderer/**/*.ts abgedeckt).

---

Nächster Schritt morgen (in dieser Reihenfolge)

1. Fragen: „Hat der Login-Flow gestern durchgelaufen? Falls Fehler, welche Logs?"
2. Falls Fehler: Erst diese fixen, bevor neue Features dazukommen.
   • Häufiger Verdächtiger: import.meta.env-Loading im Main → Workaround dokumentiert oben.
3. Falls grün: Direkt in Schritt 2: Twitch Helix-Client + Followed-Channels-Home-Screen einsteigen.
   • Neue Dateien planen: src/main/twitch/helixClient.ts, src/main/twitch/types.ts, IPC-Kanäle twitch:get-followed, twitch:get-live-status, Renderer-Screen src/renderer/src/screens/HomeScreen.tsx mit Spatial-Navigation-Karten.
   • Helix-Endpoints für MVP: GET /users (own), GET /channels/followed, GET /streams (batched).

---

Wie morgen effektiv weiterarbeiten?

Empfehlung: Beim Sessionstart diese drei Dateien in dieser Reihenfolge lesen lassen:

1. CLAUDE_PROGRESS.md (diese Datei) — Snapshot
2. todo.md — Checkboxen-Tracker (jeder erledigte Schritt wird dort sofort abgehakt)
3. plan.md — gespiegelter Architekturplan (Quelle: ~/.claude/plans/smooth-shimmying-parasol.md)

Workflow:

• Vor jeder Subaufgabe: relevanten Abschnitt in todo.md checken.
• Nach Abschluss: Checkbox in todo.md setzen + 1-Zeilen-Update in CLAUDE_PROGRESS.md unter „Bereits abgeschlossen".
• Bei Architekturänderungen: plan.md updaten (nicht nur die Kopie im ~/.claude/plans/).

Erste Anweisung morgen an Claude (copy-paste):

„Lies CLAUDE_PROGRESS.md, todo.md und plan.md. Frag mich, ob der Login-Flow gestern durchgelaufen ist, und mach dann mit dem nächsten offenen Schritt weiter."