61 lines
2.3 KiB
Markdown
61 lines
2.3 KiB
Markdown
|
# React SSR Dashboard Implementation Plan
|
||
|
|
|
||
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
|
|
||
|
|
**Goal:** Replace static client-rendered homepage with React server-side rendering while keeping live WebSocket/voice behavior as progressive enhancement.
|
||
|
|
|
||
|
|
**Architecture:** Express `GET /` builds dashboard data, renders React component to HTML with `react-dom/server`, injects bootstrap JSON for client script. CSS/JS move to static assets; React owns initial markup only, lightweight browser JS handles tab switching, voice bridge, WebSocket updates, and async thread discovery.
|
||
|
|
|
||
|
|
**Tech Stack:** React, ReactDOM server, Bun, Express, TypeScript, vanilla browser JS for progressive enhancement.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Task 1: Add React dependencies
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Modify: `package.json`
|
||
|
|
- Modify: `bun.lockb`
|
||
|
|
|
||
|
|
- [ ] Run `bun add react react-dom`.
|
||
|
|
- [ ] Run `bun add -d @types/react @types/react-dom`.
|
||
|
|
- [ ] Verify `bun run typecheck`.
|
||
|
|
|
||
|
|
### Task 2: Extract dashboard assets
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Create: `public/dashboard.css`
|
||
|
|
- Create: `public/dashboard.js`
|
||
|
|
- Modify: `public/index.html`
|
||
|
|
|
||
|
|
- [ ] Move current `<style>` content to `dashboard.css`.
|
||
|
|
- [ ] Move current `<script>` content to `dashboard.js`.
|
||
|
|
- [ ] Keep client behavior independent from static HTML.
|
||
|
|
|
||
|
|
### Task 3: Create React SSR renderer
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Create: `src/web/dashboardPage.tsx`
|
||
|
|
|
||
|
|
- [ ] Create `DashboardPage` React component accepting: guilds, voiceChannels, watchChannels, selectedChannel, messages, status.
|
||
|
|
- [ ] Render same Voice/Text layout as current homepage.
|
||
|
|
- [ ] Render message cards server-side from DB metadata.
|
||
|
|
- [ ] Export `renderDashboardPage(props)` returning full HTML with CSS/JS links and bootstrap JSON.
|
||
|
|
|
||
|
|
### Task 4: Wire Express SSR route
|
||
|
|
|
||
|
|
**Files:**
|
||
|
|
- Modify: `src/webserver.ts`
|
||
|
|
|
||
|
|
- [ ] Add `GET /` before static middleware fallback or before static index handling.
|
||
|
|
- [ ] Build props from `voiceController` and `getMessagesByChannel`.
|
||
|
|
- [ ] Respect query `?guild=<id>&channel=<id>`.
|
||
|
|
- [ ] Render HTML with `renderDashboardPage`.
|
||
|
|
|
||
|
|
### Task 5: Verify
|
||
|
|
|
||
|
|
**Files:** all touched files
|
||
|
|
|
||
|
|
- [ ] Run `bun run typecheck`.
|
||
|
|
- [ ] Run `bun run test`.
|
||
|
|
- [ ] Run short SSR import smoke if possible.
|