asepharyana
d59b59a7a7
Frontend: - migrate from Vite to Astro (astro.config.mjs, pages/, layouts/) - add admin panel, settings page, command palette, error boundary - refactor App.tsx, MascotChatbot, Sidebar, Header, DashboardLayout - update API client, WebSocket, auth, dashboard features Backend: - add admin module and config routes - refactor middlewares, Redis connection, WebSocket server/bridge - add runtime config loader Discord Gateway: - refactor AI moderation: circuit breaker, concurrency limiter, fallback processor - add media analysis client, Seaxng search, user profile learner - add new drizzle migration Shared: - extend database schema, add new config fields
111 lines
3.2 KiB
Markdown
111 lines
3.2 KiB
Markdown
# Moderation UI Patterns — The Watchful Eye
|
|
|
|
> *"With great power comes great responsibility."*
|
|
> — Adapted for content moderation interfaces.
|
|
|
|
---
|
|
|
|
## 🎯 Filosofi UI Moderasi
|
|
|
|
1. **At-a-glance severity** — Warna & label yang langsung terbaca
|
|
2. **Context-rich** — Setiap keputusan disertai konteks
|
|
3. **Non-destructive by default** — Flag dulu, action kemudian
|
|
4. **Audit trail** — Setiap aksi tercatat
|
|
|
|
---
|
|
|
|
## 🏷️ Severity Scale
|
|
|
|
```css
|
|
.severity--safe { background: oklch(0.60 0.130 145 / 0.15); color: oklch(0.60 0.130 145); }
|
|
.severity--low { background: oklch(0.70 0.120 75 / 0.15); color: oklch(0.70 0.120 75); }
|
|
.severity--medium { background: oklch(0.65 0.150 50 / 0.15); color: oklch(0.65 0.150 50); }
|
|
.severity--high { background: oklch(0.60 0.150 30 / 0.15); color: oklch(0.60 0.150 30); }
|
|
.severity--critical { background: oklch(0.55 0.165 25 / 0.15); color: oklch(0.55 0.165 25); }
|
|
```
|
|
|
|
| Severity | Warna | Ikon | Action |
|
|
|----------|-------|------|--------|
|
|
| Safe | Emerald | ✅ Shield | None |
|
|
| Low | Amber | ⚠️ | Review |
|
|
| Medium | Orange | 🔶 | Alert + review |
|
|
| High | Red-Orange | 🚫 | Notify + action |
|
|
| Critical | Ruby | 🔴 | Immediate |
|
|
|
|
---
|
|
|
|
## 📋 Moderation Queue
|
|
|
|
```tsx
|
|
interface ModerationQueueItem {
|
|
id: string;
|
|
message: { preview: string; author: { name: string; }; timestamp: number; channel: string; };
|
|
analysis: { severity: Severity; categories: string[]; confidence: number; summary: string; };
|
|
status: 'pending' | 'reviewed' | 'actioned' | 'dismissed';
|
|
}
|
|
```
|
|
|
|
**Layout per item:**
|
|
```
|
|
┌──────────────────────────────────────────────────────┐
|
|
│ 🔴 CRITICAL │ [User]: "message preview..." │
|
|
│ 🏷️ toxicity, │ in #general · 2m ago │
|
|
│ harassment │ [Review] [Dismiss] [Action] │
|
|
└──────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Filter Bar
|
|
```
|
|
Severity: [All] [Safe] [Low] [Medium] [High] [Critical]
|
|
Channel: [#general ▼]
|
|
Date: [Last 24h ▼]
|
|
Search: [.................. 🔍]
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Action Confirmation
|
|
|
|
| Action | Confirm | Duration | Undo |
|
|
|--------|---------|----------|------|
|
|
| Dismiss | No | 2s toast | Yes (5s) |
|
|
| Warn | No | 3s toast | No |
|
|
| Delete | Yes (modal) | 4s toast | No |
|
|
| Ban | Yes (modal + reason) | — | Manual |
|
|
|
|
---
|
|
|
|
## 📊 Moderation Metrics
|
|
|
|
| Metric | Format | Frequency |
|
|
|--------|--------|-----------|
|
|
| Messages analyzed | Number | Real-time |
|
|
| Flag rate | % | Hourly |
|
|
| Response time | ms avg | Real-time |
|
|
| False positive rate | % | Daily |
|
|
| Queue depth | Number | Real-time |
|
|
|
|
---
|
|
|
|
## ⚠️ Anti-Patterns
|
|
|
|
### ❌ Ambiguous severity
|
|
```tsx
|
|
// ❌ Warna tanpa label
|
|
<div className="bg-red-200">...</div>
|
|
// ✅ Color + icon + text
|
|
<SeverityBadge severity="critical" />
|
|
```
|
|
|
|
### ❌ One-click destructive
|
|
```tsx
|
|
// ❌ Delete tanpa konfirmasi
|
|
<Button onClick={handleDelete}>Delete</Button>
|
|
// ✅ Confirm dialog
|
|
<ConfirmDialog variant="destructive" ... />
|
|
```
|
|
|
|
---
|
|
|
|
*"Mata waspada adalah penjaga ingatan — setiap flag adalah catatan sejarah."* ❄️🩵
|