Loading...
```
- [ ] **Step 6: Verify components compile**
Run:
```bash
cd services/frontend && pnpm build 2>&1 | tail -10
```
Expected: Build succeeds, zero errors.
- [ ] **Step 7: Commit**
```bash
git add services/frontend/src/components/ui/
git commit -m "feat(frontend): add Astro UI components (Button, Badge, Card, Skeleton, Spinner)"
```
---
### Task 1.3: Create Layout Components (Sidebar, Header, States)
**Files:**
- Create: `services/frontend/src/components/sidebar/NavItem.astro`
- Create: `services/frontend/src/components/sidebar/Sidebar.astro`
- Create: `services/frontend/src/components/header/Header.astro`
- Create: `services/frontend/src/components/states/EmptyState.astro`
- Create: `services/frontend/src/components/states/ErrorState.astro`
- Create: `services/frontend/src/components/states/LoadingSkeleton.astro`
**Interfaces:**
- Consumes: UI components from Task 1.2
- Produces: Layout shell components used by DashboardLayout
- [ ] **Step 1: Create `NavItem.astro`**
```astro
---
export interface Props {
href: string;
icon: string; // Lucide icon name
label: string;
active?: boolean;
collapsed?: boolean;
notificationCount?: number;
}
const { href, icon, label, active = false, collapsed = false, notificationCount = 0 } = Astro.props;
---
{!collapsed && (
<>
{notificationCount > 0 && (
)}
)}
```
- [ ] **Step 2: Create `Sidebar.astro`**
```astro
---
import NavItem from './NavItem.astro';
export interface Props {
collapsed?: boolean;
activeTab?: string;
notificationCount?: number;
class?: string;
}
const { collapsed = false, activeTab = 'live', notificationCount = 0, class: className = '' } = Astro.props;
const NAV_ITEMS = [
{ id: 'live', icon: 'radio', href: '/live', label: 'Live' },
{ id: 'messages', icon: 'message-square', href: '/messages', label: 'Messages' },
{ id: 'recordings', icon: 'mic', href: '/recordings', label: 'Recordings' },
{ id: 'settings', icon: 'settings', href: '/settings', label: 'Settings' },
];
---
```
- [ ] **Step 3: Create `Header.astro`**
```astro
---
export interface Props {
title?: string;
class?: string;
}
const { title = 'Dashboard', class: className = '' } = Astro.props;
---
{title}
{icon && }
```
`ErrorState.astro`:
```astro
---
export interface Props {
message?: string;
class?: string;
}
const { message = 'Something went wrong', class: className = '' } = Astro.props;
---
{title}
{description &&{description}
}{message}
{Array.from({ length: count }).map(() => (
variant === 'list' ? (
```
- [ ] **Step 5: Commit**
```bash
git add services/frontend/src/components/
git commit -m "feat(frontend): add Astro layout components (Sidebar, Header, states)"
```
---
### Task 1.4: Update BaseLayout and Create AuthLayout + Pages
**Files:**
- Modify: `services/frontend/src/layouts/BaseLayout.astro`
- Create: `services/frontend/src/layouts/AuthLayout.astro`
- Create: `services/frontend/src/pages/login.astro`
- Create: `services/frontend/src/pages/404.astro`
- Modify: `services/frontend/src/pages/index.astro`
**Interfaces:**
- Consumes: No prior tasks (independent)
- Produces: Working routes and layout shell
- [ ] **Step 1: Update `BaseLayout.astro`**
```astro
---
const FONT_HREF =
"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
const FONT_MONO_HREF =
"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap";
export interface Props {
title?: string;
description?: string;
}
const { title = 'IMPHNEN — Discord Moderation', description = 'Real-time Discord AI Moderation & Voice Recording Dashboard' } = Astro.props;
---
BETE
Discord Moderation Dashboard
Please enter admin password to continue.
{/* Login form with password input */}
{Array.from({ length: 5 }).map((_, i) => (
))}
);
}
// Empty state
if (!loading && messages.length === 0) {
return (
💬
No messages yet
Messages will appear here once captured.
!
Failed to load messages
{messages.map((msg) => (
))}
{loadingMore && (
)}
);
}
```
- [ ] **Step 3: Create `messages.astro` page**
```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Sidebar from '../components/sidebar/Sidebar.astro';
import Header from '../components/header/Header.astro';
import ThemeToggle from '../islands/ThemeToggle.tsx';
import MessageFeed from '../islands/MessageFeed.tsx';
---
{msg.username}
{msg.ai_severity && (
{msg.ai_severity.toUpperCase()}
)}
{msg.content || msg.edited_content}
{/* Guild select */}
{/* Channel select */}
{/* Connect/Disconnect */}
{!connected ? (
) : (
)}
);
}
```
- [ ] **Step 2: Create `ActiveSpeakers.tsx`**
```tsx
import { useVoiceStore } from '../stores/voice-store';
export default function ActiveSpeakers() {
const activeSpeakers = useVoiceStore((s) => s.activeSpeakers);
if (activeSpeakers.length === 0) {
return (
No active speakers
-
{activeSpeakers.map((speaker) => (
-
{speaker.username} {speaker.speaking && (
{Array.from({ length: 4 }).map((_, i) => ( ))})}
))}
Voice Connection
Now Playing
{Array.from({ length: 3 }).map((_, i) => (
))}
);
}
if (error) {
return (
!
{error}
No recordings
Join a voice channel to start recording.
{recordings.map((rec) => (
{rec.download_url && (
Download
)}
))}
);
}
```
- [ ] **Step 2: Create `recordings.astro` page**
```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Sidebar from '../components/sidebar/Sidebar.astro';
import Header from '../components/header/Header.astro';
import Card from '../components/ui/Card.astro';
import RecordingsList from '../islands/RecordingsList.tsx';
import ThemeToggle from '../islands/ThemeToggle.tsx';
---
{rec.username}
{rec.channel_name} · {new Date(rec.created_at).toLocaleString()}
Appearance
{(['dark', 'light', 'system'] as const).map((mode) => (
))}
{open && (
)}
);
}
```
- [ ] **Step 3: Commit**
```bash
git add services/frontend/src/islands/Particles.tsx services/frontend/src/islands/MascotChat.tsx
git commit -m "feat(frontend): add deferred islands (Particles, MascotChat)"
```
---
### Task 5.2: Delete Legacy Code + Cleanup
**Files:**
- Delete: `services/frontend/src/App.tsx`
- Delete: `services/frontend/src/App.client.tsx`
- Delete: `services/frontend/src/entities/` (entire directory)
- Delete: `services/frontend/src/features/` (entire directory)
- Delete: `services/frontend/src/hooks/` (entire directory)
- Delete: `services/frontend/src/widgets/` (entire directory)
**Interfaces:**
- Consumes: All prior tasks proving feature parity
- Produces: Clean Astro project structure
- [ ] **Step 1: Verify all features are ported before deletion**
Check each feature directory has been ported to equivalent island/page:
- `features/auth/` → `islands/AuthGuard.tsx` ✓ (Task 2.2)
- `features/messages/` → `islands/MessageFeed.tsx` ✓ (Task 3.1)
- `features/live/` → `islands/VoiceControls.tsx` + `ActiveSpeakers.tsx` + `AudioVisualizer.tsx` + `NowPlaying.tsx` ✓ (Task 4.1)
- `features/settings/` → `islands/SettingsForm.tsx` ✓ (Task 4.2)
- `widgets/DashboardLayout.tsx` → replaced by `components/sidebar/` + `components/header/` + page layouts ✓ (Task 1.3)
- `entities/` → moved to `@bete/shared` or inline types ✓
- [ ] **Step 2: Remove legacy files**
Run:
```bash
git rm -r services/frontend/src/App.tsx services/frontend/src/App.client.tsx services/frontend/src/entities services/frontend/src/features services/frontend/src/hooks services/frontend/src/widgets
```
- [ ] **Step 3: Remove legacy shared/ui (replaced by Astro components)**
Run:
```bash
git rm -r services/frontend/src/shared/ui
```
(Keep `shared/api`, `shared/ws`, `shared/hooks`, `shared/lib` — these still used)
- [ ] **Step 4: Build to verify**
Run:
```bash
cd services/frontend && pnpm build 2>&1 | tail -30
```
Expected: Build succeeds, no missing imports.
- [ ] **Step 5: Commit**
```bash
git commit -m "refactor(frontend): remove legacy React SPA files, clean project structure"
```
---
### Task 5.3: Final Verification
- [ ] **Step 1: Verify all pages render**
Run dev server and check each route:
```bash
cd services/frontend && pnpm dev
```
Check: `/live`, `/messages`, `/recordings`, `/settings`, `/login`, `/404`
- [ ] **Step 2: Build production bundle**
```bash
cd services/frontend && pnpm build
```
Expected: Build succeeds, output in `dist/`.
- [ ] **Step 3: Run typecheck**
```bash
cd services/frontend && pnpm typecheck
```
Expected: No type errors.
- [ ] **Step 4: Final commit**
```bash
git commit -m "chore(frontend): finalize Astro migration with full design system"
```
---
## Self-Review Checklist
**1. Spec coverage:**
- All 5 migration phases match the spec ✓
- Design tokens from `design/` implemented in Task 1.1 ✓
- Component taxonomy from `05-component-architecture.md` in Task 1.2 ✓
- State machines from `09-state-machines.md` in all islands (loading/error/empty) ✓
- Responsive patterns from `10-responsive-system.md` in layout CSS ✓
- Glassmorphism from `01-color-system.md` in `base.css` ✓
- Motion system from `04-motion-system.md` in animations + reduced motion ✓
- Theme architecture from `15-theme-architecture.md` in `base.css` ✓
**2. Placeholder scan:** No TBD, TODO, or incomplete code. All steps contain actual implementation code.
**3. Type consistency:** All store interfaces use the same types consistently. `ActiveSpeaker`, `MessageRecord`, `VoiceStatus` referenced from `@bete/shared/types`.
Hi! I'm BETE's mascot. Ask me anything about the dashboard.