mirror of
https://github.com/Andre-Bzk/twitch4steamdeck.git
synced 2026-11-15 15:43:08 +01:00
Andre
1f5d1254db
- Twitch Helix-Client + Followed-Channels-Home-Screen - Navigation über Sidebar - Karten-Design überarbeitet
116 lines
6.9 KiB
Markdown
116 lines
6.9 KiB
Markdown
# 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."
|