docs: add Discord Automod Neo Surveillance redesign spec
Full frontend redesign spec covering: - Neo Surveillance layout with floating top nav + hidden sidebar - Glassmorphic dark design system with teal-cyan accent - Live2D vtuber mascot chatbot - Rich analytics dashboard (Ops Center) - Split-pane messages, voice connection center - Floating media player overlay - State management, data flow, and implementation phases Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
4c9786c988
commit
236c7b3c81
@@ -0,0 +1,508 @@
|
|||||||
|
---
|
||||||
|
name: "Discord Automod — Neo Surveillance Redesign"
|
||||||
|
version: "1.0.0"
|
||||||
|
date: "2026-07-28"
|
||||||
|
status: "approved"
|
||||||
|
inspiration:
|
||||||
|
- "Summit Cloud Migration Platform (glassmorphic, dark premium)"
|
||||||
|
- "AeroNet Visualization (data panels, modular layout)"
|
||||||
|
colors:
|
||||||
|
canvas: "oklch(0.07 0.015 250)"
|
||||||
|
surface: "oklch(0.11 0.02 245 / 0.6)"
|
||||||
|
surface-hover: "oklch(0.15 0.02 245 / 0.7)"
|
||||||
|
border: "oklch(1 0 0 / 0.06)"
|
||||||
|
border-glow: "oklch(0.62 0.17 215 / 0.3)"
|
||||||
|
primary: "oklch(0.62 0.17 215)"
|
||||||
|
primary-glow: "oklch(0.62 0.17 215 / 0.4)"
|
||||||
|
accent-purple: "oklch(0.65 0.2 280)"
|
||||||
|
accent-amber: "oklch(0.7 0.17 75)"
|
||||||
|
text-primary: "oklch(0.93 0.01 245)"
|
||||||
|
text-secondary: "oklch(0.55 0.02 245)"
|
||||||
|
text-mono: "oklch(0.62 0.17 215)"
|
||||||
|
glass-bg: "oklch(1 0 0 / 0.04)"
|
||||||
|
glass-border: "oklch(1 0 0 / 0.08)"
|
||||||
|
glass-shadow: "0 8px 32px oklch(0 0 0 / 0.4)"
|
||||||
|
typography:
|
||||||
|
display: "Inter 28-48px weight 600"
|
||||||
|
body: "Inter 14-16px weight 400"
|
||||||
|
mono: "JetBrains Mono 11-13px weight 500-600"
|
||||||
|
data: "JetBrains Mono 24-36px weight 600, teal tint"
|
||||||
|
radius:
|
||||||
|
card: "16px"
|
||||||
|
panel: "12px"
|
||||||
|
control: "8px"
|
||||||
|
pill: "9999px"
|
||||||
|
---
|
||||||
|
|
||||||
|
# Discord Automod — Neo Surveillance Redesign
|
||||||
|
|
||||||
|
Full frontend redesign for Discord Automod, a Discord moderation watcher dashboard. Complete rewrite of layout, design system, navigation, and page architecture.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Design Philosophy
|
||||||
|
|
||||||
|
**"Neo Surveillance"** — a Security Operations Center (SOC) inspired dashboard where monitoring feels immersive and powerful. Full-screen glass panels float over a dark animated canvas. No persistent sidebar clutter. The interface disappears into the background, letting live data and alerts take center stage.
|
||||||
|
|
||||||
|
Key pillars:
|
||||||
|
- **Immersion** — Full-viewport canvas with ambient motion, glass panels float over content
|
||||||
|
- **Awareness** — Live data streams, real-time voice waveforms, animated moderation alerts
|
||||||
|
- **Presence** — Live2D vtuber mascot character as chatbot interface, reacts to server events
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Layout & Navigation System
|
||||||
|
|
||||||
|
### 2.1 Global Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────┐
|
||||||
|
│ ● Discord Automod Dashboard Msgs Voice … 🟢 ● │ ← Floating Top Bar (~44px)
|
||||||
|
├──────────────────────────────────────────────────────┤
|
||||||
|
│ [Sub-navigation tabs] ← muncul per-page │
|
||||||
|
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│
|
||||||
|
│ │
|
||||||
|
│ ┌─────────┐ ┌──────────────┐ │
|
||||||
|
│ │ Glass │ │ Content │ │
|
||||||
|
│ │ Panels │ │ Area │ │
|
||||||
|
│ │ │ │ (scroll) │ │
|
||||||
|
│ └─────────┘ └──────────────┘ │
|
||||||
|
│ │
|
||||||
|
├──────────────────────────────────────────────────────┤
|
||||||
|
│ 🎵 [Mini-player] ← bottom-left 🎭 [Mascot] ← BR │
|
||||||
|
└──────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.2 Floating Top Navigation Bar
|
||||||
|
|
||||||
|
- **Style:** Glass (`backdrop-blur-xl`), subtle glow border bottom, `h-11` (44px)
|
||||||
|
- **Left:** App logo "Discord Automod" with teal live dot indicator + current page name
|
||||||
|
- **Center:** Horizontal nav links — Dashboard, Messages, Voice, Recordings, Settings
|
||||||
|
- Icon + label, active state with glow underline (`box-shadow` teal)
|
||||||
|
- Hover: text brighter, no background fill
|
||||||
|
- **Search** has no nav link — triggered globally via Cmd+K or `/` shortcut, opens spotlight
|
||||||
|
- **Right:** Connection status dot (pulse when connected) + theme toggle (sun/moon icon)
|
||||||
|
- **Hover sidebar hotspot:** Left edge 4px trigger → slide-in sidebar with guild selector, bookmarks, recent channels (auto-hide 300ms after mouse leave)
|
||||||
|
|
||||||
|
### 2.3 Sub-navigation
|
||||||
|
|
||||||
|
Each page has its own tab bar below the top nav, also glass-styled:
|
||||||
|
- Dashboard: Stats | Live | Activity
|
||||||
|
- Messages: All | Images | Review
|
||||||
|
- Voice: Connection | Activity
|
||||||
|
- Recordings: Library | Stats
|
||||||
|
- Settings: Connection | Appearance | Config | About
|
||||||
|
|
||||||
|
### 2.4 Hidden Sidebar (Hover-activated)
|
||||||
|
|
||||||
|
- Trigger: 4px hotspot at left screen edge
|
||||||
|
- Slide-in animation (150ms, ease-out-expo)
|
||||||
|
- Contains: guild selector dropdown, bookmarked channels, recent activity shortcuts
|
||||||
|
- Auto-hide on mouse leave with 300ms delay
|
||||||
|
|
||||||
|
### 2.5 Floating Media Player
|
||||||
|
|
||||||
|
- No dedicated Media page — persistent floating mini-player at bottom-left
|
||||||
|
- Visible only when a track is active
|
||||||
|
- Click to expand: full queue management overlay
|
||||||
|
- Controls: play/pause, skip, stop, volume slider, progress bar
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Design Tokens
|
||||||
|
|
||||||
|
### 3.1 Color Palette
|
||||||
|
|
||||||
|
| Token | Value | Usage |
|
||||||
|
|-------|-------|-------|
|
||||||
|
| `--canvas` | `oklch(0.07 0.015 250)` | Deep navy background |
|
||||||
|
| `--surface` | `oklch(0.11 0.02 245 / 0.6)` | Glass card base |
|
||||||
|
| `--surface-hover` | `oklch(0.15 0.02 245 / 0.7)` | Card hover state |
|
||||||
|
| `--border` | `oklch(1 0 0 / 0.06)` | Subtle border |
|
||||||
|
| `--border-glow` | `oklch(0.62 0.17 215 / 0.3)` | Active card border glow |
|
||||||
|
| `--primary` | `oklch(0.62 0.17 215)` | Teal-cyan accent, buttons |
|
||||||
|
| `--primary-glow` | `oklch(0.62 0.17 215 / 0.4)` | Active state glow |
|
||||||
|
| `--accent-purple` | `oklch(0.65 0.2 280)` | Moderation flagged items |
|
||||||
|
| `--accent-amber` | `oklch(0.7 0.17 75)` | Warnings |
|
||||||
|
| `--text-primary` | `oklch(0.93 0.01 245)` | Body text |
|
||||||
|
| `--text-secondary` | `oklch(0.55 0.02 245)` | Secondary labels |
|
||||||
|
| `--text-mono` | `oklch(0.62 0.17 215)` | Data metrics (teal tint) |
|
||||||
|
| `--glass-bg` | `oklch(1 0 0 / 0.04)` | Glass base |
|
||||||
|
| `--glass-border` | `oklch(1 0 0 / 0.08)` | Glass border |
|
||||||
|
| `--glass-shadow` | `0 8px 32px oklch(0 0 0 / 0.4)` | Glass shadow |
|
||||||
|
|
||||||
|
### 3.2 Typography
|
||||||
|
|
||||||
|
| Role | Font | Size / Weight |
|
||||||
|
|------|------|--------------|
|
||||||
|
| Display | Inter | 28-48px, weight 600 |
|
||||||
|
| Body | Inter | 14-16px, weight 400 |
|
||||||
|
| Label / Mono | JetBrains Mono | 11-13px, weight 500-600 |
|
||||||
|
| Data metrics | JetBrains Mono | 24-36px, weight 600, teal tint |
|
||||||
|
|
||||||
|
### 3.3 Radius System
|
||||||
|
|
||||||
|
| Token | Value |
|
||||||
|
|-------|-------|
|
||||||
|
| Card | 16px |
|
||||||
|
| Panel | 12px |
|
||||||
|
| Button / Control | 8px |
|
||||||
|
| Pill | 9999px |
|
||||||
|
|
||||||
|
### 3.4 Motion Tokens
|
||||||
|
|
||||||
|
```css
|
||||||
|
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--duration-fast: 150ms;
|
||||||
|
--duration-normal: 250ms;
|
||||||
|
--duration-slow: 400ms;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Component System
|
||||||
|
|
||||||
|
### 4.1 Glass Card System
|
||||||
|
|
||||||
|
- **Base:** `glass-bg` + `glass-border` + border-radius `16px`
|
||||||
|
- **Elevated:** Deeper shadow + subtle primary glow border
|
||||||
|
- **Interactive:** Hover `scale(1.01)` + border glow intensify
|
||||||
|
- **Danger:** Red-tinted border for critical items
|
||||||
|
- Inner padding: `20px` (card), `16px` (panel), `12px` (dense)
|
||||||
|
|
||||||
|
### 4.2 Button Variants
|
||||||
|
|
||||||
|
| Variant | Style |
|
||||||
|
|---------|-------|
|
||||||
|
| Primary | `bg-primary` + `shadow-[0_0_12px] shadow-primary/40` (glow) |
|
||||||
|
| Secondary | `glass-bg` + `border` |
|
||||||
|
| Ghost | Transparent, hover → subtle glass bg |
|
||||||
|
| Icon | Size 32px, rounded 8px |
|
||||||
|
| Danger | Red-tinted variant for destructive actions |
|
||||||
|
|
||||||
|
### 4.3 Status Indicators
|
||||||
|
|
||||||
|
- **Live dot:** Pulsing ring animation (`pulse-ring` 1.5s)
|
||||||
|
- **AI Badge:** Teal pill with sparkle icon, mono font
|
||||||
|
- **Severity badges:** Clean (green), Warn (amber), Flagged (purple), Critical (red)
|
||||||
|
- **Connection:** Green (connected), Yellow (connecting), Red (disconnected)
|
||||||
|
|
||||||
|
### 4.4 Charts (Recharts)
|
||||||
|
|
||||||
|
Custom theme matching design tokens:
|
||||||
|
- Line/Area: gradient fill (primary → transparent)
|
||||||
|
- Bar: rounded bars, teal-cyan gradient
|
||||||
|
- Heatmap: activity by hour × weekday
|
||||||
|
- Radar: multi-axis for moderation categories
|
||||||
|
|
||||||
|
### 4.5 Live2D Mascot / Chatbot
|
||||||
|
|
||||||
|
- Replaces the existing `Chatbot` component entirely — mascot panel is the new chat interface
|
||||||
|
- **Location:** Floating panel, bottom-right corner, draggable
|
||||||
|
- **Default size:** Compact — upper body visible (~200×280px)
|
||||||
|
- **Click character:** Expand with full chat panel
|
||||||
|
- **Dynamic expressions:**
|
||||||
|
- Idle: subtle breathing, blink every 4s
|
||||||
|
- New message: head tilt "listening"
|
||||||
|
- Flagged detected: eyes widen, ! bubble
|
||||||
|
- User click: happy wave
|
||||||
|
- Voice active: ear/head tilt toward audio
|
||||||
|
- Chat reply: mouth sync animation
|
||||||
|
- Disconnect: sad expression
|
||||||
|
- **Technology:** Live2D Cubism SDK (WebGL via pixi.js wrapper), `.model3.json` + `.moc3` format
|
||||||
|
- **Chat panel:** Glass-styled input + message history, context-aware (server context)
|
||||||
|
|
||||||
|
### 4.6 Loading States
|
||||||
|
|
||||||
|
- **Skeleton:** Glass card shape with shimmer gradient (teal → transparent → teal)
|
||||||
|
- **Button loading:** Spinner within button
|
||||||
|
- **Full page:** Glass skeleton grid matching target layout
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Page Layouts
|
||||||
|
|
||||||
|
### 5.1 Dashboard — "Ops Center"
|
||||||
|
|
||||||
|
Full-viewport command center:
|
||||||
|
- **Stat cards row:** Total Messages, Today, Users, Active 24h, Flagged, Clean — each with micro sparkline chart (Recharts mini area) behind the number
|
||||||
|
- **Live Message Stream:** Auto-scrolling glass panel showing recent messages, fade-in animation, click for detail
|
||||||
|
- **Mod Queue:** Flagged messages with quick action buttons (approve/delete/escalate)
|
||||||
|
- **Message Trend Chart:** 7-day area chart
|
||||||
|
- **Activity Heatmap:** Hour × day-of-week, moderation event density
|
||||||
|
- **Top Channels:** Bar chart with channel names
|
||||||
|
- **Mascot visible** floating bottom-right
|
||||||
|
|
||||||
|
### 5.2 Messages — Split Pane
|
||||||
|
|
||||||
|
- **Left pane:** Scrollable message list, glass cards with severity badge, channel tag, timestamp
|
||||||
|
- **Right pane:** Detail/preview — full message content, attachments gallery, AI analysis breakdown (severity, flags, confidence, categories)
|
||||||
|
- **Global search bar** in top area: spotlight-style overlay (Cmd+K)
|
||||||
|
- **State in URL params:** `?guild=xxx&channel=yyy&selected=msg123&tab=all`
|
||||||
|
- **Tabs:** All | Images (grid view) | Review (flagged queue)
|
||||||
|
- **Actions:** Reanalyze, Moderate (dropdown: delete/warn/escalate)
|
||||||
|
|
||||||
|
### 5.3 Voice — Connection Center
|
||||||
|
|
||||||
|
- **Connection card:** Guild/channel selectors, status with live dot + duration
|
||||||
|
- **Active Speakers:** Per-user waveform visualization (canvas-based, 100ms update)
|
||||||
|
- **Microphone/Transmit:** Toggle mic, volume slider
|
||||||
|
- **Voice Activity Timeline:** Bar chart showing who spoke and total duration
|
||||||
|
- **Recordings quick link** to Recordings page
|
||||||
|
|
||||||
|
### 5.4 Recordings — Voice Library
|
||||||
|
|
||||||
|
- **Search + filter bar:** By user, channel, date range
|
||||||
|
- **Recording cards:** Glass card, waveform preview (canvas), duration, timestamp
|
||||||
|
- **Inline playback:** Play button, audio player without leaving page
|
||||||
|
- **Actions:** Download, Copy Link
|
||||||
|
|
||||||
|
### 5.5 Settings
|
||||||
|
|
||||||
|
- **Sections:** Connection (WebSocket status, guild info), Appearance (theme toggle), Server Config (read-only), About
|
||||||
|
- All glass cards, mono font for config values
|
||||||
|
- Toggle switches with glass styling
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Animations & Micro-interactions
|
||||||
|
|
||||||
|
### 6.1 Ambient Background
|
||||||
|
- Gradient mesh with slow-shift (30s cycle)
|
||||||
|
- 2-3 soft color blobs (teal, purple, amber), opacity 0.03-0.06
|
||||||
|
- Grid dot pattern: `radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px)`, 24px spacing
|
||||||
|
|
||||||
|
### 6.2 Page Transitions
|
||||||
|
- Route change: `fade-in-up` 200ms ease-out
|
||||||
|
- Content section: `scale(0.98→1)` + `opacity(0.6→1)`
|
||||||
|
|
||||||
|
### 6.3 Card Interactions
|
||||||
|
- Hover: `scale(1.01)` + border glow intensify + shadow lift
|
||||||
|
- Click: `scale(0.98)` brief (100ms)
|
||||||
|
- Panel enter: `translateY(-4px)` + `opacity` fade-in
|
||||||
|
- Stat counter: count-up animation (JS tween, 400ms)
|
||||||
|
|
||||||
|
### 6.4 Live Data
|
||||||
|
- Message stream: fade-in from top, slide down as new arrive
|
||||||
|
- Voice waveform: real-time canvas draw, 100ms interval
|
||||||
|
- Recording: pulsing dot + ring expansion (1.5s loop)
|
||||||
|
- Connection: slow pulse when connected
|
||||||
|
- Flagged: brief red/purple border flash on new flagged message
|
||||||
|
|
||||||
|
### 6.5 Micro-interactions
|
||||||
|
- Toggle: slide with glow
|
||||||
|
- Scrollbar: custom thin (6px), auto-hide, rounded
|
||||||
|
- Drag handle: subtle dot grip for split pane
|
||||||
|
- Copy: brief "Copied!" toast
|
||||||
|
- Reanalyze: 360° icon rotation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Data Flow & State Management
|
||||||
|
|
||||||
|
### 7.1 Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
WS Provider (auto-reconnect, typed events, event buffer)
|
||||||
|
↓
|
||||||
|
TanStack Query (fetches + cache)
|
||||||
|
↓
|
||||||
|
Query invalidation on WS events
|
||||||
|
↓
|
||||||
|
Optimistic cache updates for real-time data
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.2 WS → Cache Strategy
|
||||||
|
|
||||||
|
| WS Event | Action |
|
||||||
|
|----------|--------|
|
||||||
|
| `message_created` | Optimistic insert to message list + dashboard stats |
|
||||||
|
| `message_analyzed` | Update AI fields in message cache |
|
||||||
|
| `message_deleted` | Remove from cache + update counters |
|
||||||
|
| `voice_recording_started` | Update voice status |
|
||||||
|
| `voice_pcm_data` | Buffer to waveform canvas (bypass React) |
|
||||||
|
| `voice_active_user` | Update speakers cache |
|
||||||
|
| `analysis_queue_status` | Update queue progress |
|
||||||
|
|
||||||
|
### 7.3 Query Config
|
||||||
|
|
||||||
|
- `staleTime: 10_000` (10s)
|
||||||
|
- `gcTime: 5 * 60 * 1000` (5 min)
|
||||||
|
- `refetchOnWindowFocus: false`
|
||||||
|
|
||||||
|
### 7.4 Global State (React Context)
|
||||||
|
|
||||||
|
- `useMediaPlayer()` — current track, queue, play/skip/stop/volume
|
||||||
|
- `useMascot()` — expression, minimized, chatHistory, setExpression
|
||||||
|
- Externally triggerable: `mascot.setExpression("surprise")` on flagged message, `("listening")` on voice activity
|
||||||
|
|
||||||
|
### 7.5 URL State
|
||||||
|
|
||||||
|
Persistent page state via search params (not React state):
|
||||||
|
```
|
||||||
|
/messages?guild=xxx&channel=yyy&selected=msg123&tab=all
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7.6 Error Boundaries
|
||||||
|
|
||||||
|
Each page has its own error boundary. One page failure doesn't affect others.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Technology Stack
|
||||||
|
|
||||||
|
- **Framework:** Next.js 16 (App Router, static export)
|
||||||
|
- **Language:** TypeScript strict
|
||||||
|
- **Styling:** Tailwind v4 + CSS custom properties
|
||||||
|
- **UI Base:** shadcn/ui components (adapted for glass theme)
|
||||||
|
- **Icons:** lucide-react
|
||||||
|
- **State/data:** @tanstack/react-query v5
|
||||||
|
- **Charts:** Recharts 3.8 (with custom theme)
|
||||||
|
- **3D/Mascot:** Live2D Cubism SDK WebGL (pixi.js wrapper)
|
||||||
|
- **Audio:** Web Audio API for waveform visualization
|
||||||
|
- **Animation:** CSS animations + transitions (no GSAP/framer-motion dependency unless specifically needed)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. File Structure (New)
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── app/
|
||||||
|
│ ├── layout.tsx # Root layout (fonts, theme script, Toaster)
|
||||||
|
│ ├── page.tsx # Redirect → /dashboard
|
||||||
|
│ ├── globals.css # Complete redesign CSS (tokens, glass, animations)
|
||||||
|
│ └── (dashboard)/
|
||||||
|
│ ├── layout.tsx # Dashboard layout (top nav, QueryClient, WS, mascot)
|
||||||
|
│ ├── dashboard/
|
||||||
|
│ │ └── page.tsx # Ops Center
|
||||||
|
│ ├── messages/
|
||||||
|
│ │ └── page.tsx # Split pane messages
|
||||||
|
│ ├── voice/
|
||||||
|
│ │ └── page.tsx # Voice connection center
|
||||||
|
│ ├── recordings/
|
||||||
|
│ │ └── page.tsx # Recording library
|
||||||
|
│ └── settings/
|
||||||
|
│ └── page.tsx # Settings page
|
||||||
|
│
|
||||||
|
├── components/
|
||||||
|
│ ├── layout/
|
||||||
|
│ │ ├── top-nav.tsx # Floating top navigation bar
|
||||||
|
│ │ ├── sub-nav.tsx # Per-page sub-navigation tabs
|
||||||
|
│ │ ├── hidden-sidebar.tsx # Hover-activated guild sidebar
|
||||||
|
│ │ └── mobile-nav.tsx # Mobile bottom nav (updated design)
|
||||||
|
│ │
|
||||||
|
│ ├── glass/
|
||||||
|
│ │ ├── card.tsx # Glass card component (base, elevated, interactive)
|
||||||
|
│ │ ├── panel.tsx # Glass panel wrapper
|
||||||
|
│ │ └── divider.tsx # Glass-styled separator
|
||||||
|
│ │
|
||||||
|
│ ├── dashboard/
|
||||||
|
│ │ ├── stat-card.tsx # Stat card with micro sparkline
|
||||||
|
│ │ ├── live-stream.tsx # Auto-scrolling message stream
|
||||||
|
│ │ ├── mod-queue.tsx # Moderation queue with quick actions
|
||||||
|
│ │ ├── message-trend-chart.tsx # 7-day area chart
|
||||||
|
│ │ ├── activity-heatmap.tsx # Hour × day heatmap
|
||||||
|
│ │ └── top-channels-chart.tsx # Top channels bar chart
|
||||||
|
│ │
|
||||||
|
│ ├── messages/
|
||||||
|
│ │ ├── message-list.tsx # Left pane — scrollable message list
|
||||||
|
│ │ ├── message-card.tsx # Individual message card (redesigned)
|
||||||
|
│ │ ├── message-detail.tsx # Right pane — full detail
|
||||||
|
│ │ ├── attachments-grid.tsx # Attachments gallery
|
||||||
|
│ │ ├── ai-analysis-panel.tsx # AI analysis breakdown
|
||||||
|
│ │ └── search-overlay.tsx # Cmd+K search spotlight
|
||||||
|
│ │
|
||||||
|
│ ├── voice/
|
||||||
|
│ │ ├── connection-card.tsx # Guild/channel selector + status
|
||||||
|
│ │ ├── speaker-waveform.tsx # Canvas waveform per speaker
|
||||||
|
│ │ ├── mic-control.tsx # Mic toggle + volume
|
||||||
|
│ │ └── activity-timeline.tsx # Voice activity bar chart
|
||||||
|
│ │
|
||||||
|
│ ├── recordings/
|
||||||
|
│ │ ├── recording-card.tsx # Glass card with waveform preview
|
||||||
|
│ │ └── recording-player.tsx # Inline audio player
|
||||||
|
│ │
|
||||||
|
│ ├── mascot/
|
||||||
|
│ │ ├── mascot-container.tsx # Floating L2D container
|
||||||
|
│ │ ├── mascot-canvas.tsx # WebGL canvas for L2D rendering
|
||||||
|
│ │ ├── chat-panel.tsx # Chat input + history
|
||||||
|
│ │ └── mascot-context.tsx # Context provider
|
||||||
|
│ │
|
||||||
|
│ ├── media/
|
||||||
|
│ │ └── mini-player.tsx # Floating mini media player
|
||||||
|
│ │
|
||||||
|
│ ├── shared/
|
||||||
|
│ │ ├── error-state.tsx # Error boundary fallback
|
||||||
|
│ │ ├── loading-skeleton.tsx # Glass shimmer skeleton
|
||||||
|
│ │ └── empty-state.tsx # Empty state illustration
|
||||||
|
│ │
|
||||||
|
│ └── ui/ # shadcn/ui components (adapted to glass)
|
||||||
|
│ ├── button.tsx, badge.tsx, dialog.tsx, ...
|
||||||
|
│
|
||||||
|
├── lib/
|
||||||
|
│ ├── api/ # Existing API client (unchanged)
|
||||||
|
│ ├── ws/
|
||||||
|
│ │ ├── context.tsx # WS provider (unchanged)
|
||||||
|
│ │ └── types.ts # WS event types
|
||||||
|
│ ├── hooks/ # Existing hooks + new ones
|
||||||
|
│ │ ├── use-media-player.ts # Global media state
|
||||||
|
│ │ ├── use-mascot.ts # Mascot context hook
|
||||||
|
│ │ └── use-heatmap.ts # Heatmap data hook
|
||||||
|
│ ├── types/ # Existing types (unchanged)
|
||||||
|
│ ├── navigation.ts # Nav items (updated)
|
||||||
|
│ └── format.ts # Format utilities
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Implementation Order
|
||||||
|
|
||||||
|
### Phase 1 — Foundation
|
||||||
|
1. Update `globals.css` with new design tokens (colors, glass, radius, typography, animations)
|
||||||
|
2. Rewrite root `layout.tsx` with theme system
|
||||||
|
3. Build glass component system (`card.tsx`, `panel.tsx`)
|
||||||
|
4. Build `top-nav.tsx`, `sub-nav.tsx`, `hidden-sidebar.tsx`
|
||||||
|
5. Update dashboard layout with new nav
|
||||||
|
|
||||||
|
### Phase 2 — Dashboard Ops Center
|
||||||
|
6. Build `stat-card.tsx` with micro sparkline
|
||||||
|
7. Build `live-stream.tsx`
|
||||||
|
8. Build `mod-queue.tsx`
|
||||||
|
9. Build charts: `message-trend-chart.tsx`, `activity-heatmap.tsx`, `top-channels-chart.tsx`
|
||||||
|
10. Rewrite dashboard page
|
||||||
|
|
||||||
|
### Phase 3 — Messages (Split Pane)
|
||||||
|
11. Build `message-list.tsx`, `message-card.tsx` (redesigned)
|
||||||
|
12. Build `message-detail.tsx`, `ai-analysis-panel.tsx`, `attachments-grid.tsx`
|
||||||
|
13. Build `search-overlay.tsx`
|
||||||
|
14. Rewrite messages page with split-pane layout
|
||||||
|
|
||||||
|
### Phase 4 — Voice, Recordings, Settings
|
||||||
|
15. Build voice components and rewrite voice page
|
||||||
|
16. Build recording components and rewrite recordings page
|
||||||
|
17. Rewrite settings page
|
||||||
|
|
||||||
|
### Phase 5 — Floating Elements
|
||||||
|
18. Build `mini-player.tsx` for media
|
||||||
|
19. Build mascot components (L2D integration)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Testing
|
||||||
|
|
||||||
|
- Visual regression checks per component
|
||||||
|
- WS integration tests for cache updates
|
||||||
|
- Responsive breakpoint testing (mobile bottom nav)
|
||||||
|
- L2D mascot load + expression trigger
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 12. Non-Goals (Out of Scope)
|
||||||
|
|
||||||
|
- Authentication — remains public
|
||||||
|
- Backend API changes — only frontend redesign
|
||||||
|
- Database changes — no schema modifications
|
||||||
|
- New backend WebSocket events — reuse existing
|
||||||
|
- L2D model creation — integration only (model file provided separately)
|
||||||
Reference in New Issue
Block a user