List view
**Goal:** A complete set of theme-aware, accessible, typed base components exists so every feature milestone can compose UI without building primitives from scratch. → "Any developer starting a feature milestone can build their entire screen using only imports from @/shared/components—no one invents a Button twice." **Features in this milestone:** Primitives - [ ] #10 — Button (variant: primary/secondary/danger/ghost, size: sm/md/lg, loading state, disabled state) - [ ] #11 — Badge (variant: pending/escalated/resolved/ dismissed/info/type, size: sm/md) - [ ] #12 — Avatar (initials fallback, size variants, online indicator) - [ ] #13 — Divider (horizontal/vertical) - [ ] #14 — Tooltip (hover, accessible, portal-rendered) Inputs - [ ] #15 — Input (label, error state, helper text, prefix/suffix icon) - [ ] #16 — Select / Dropdown (single select, searchable) - [ ] #17 — Chip / FilterPill (selectable, dismissible, multi-select group) - [ ] #18 — Checkbox + CheckboxGroup - [ ] #19 — Textarea Layout & Containers - [ ] #20 — Card / Surface (elevation variants, padding variants) - [ ] #21 — Modal (portal, focus trap, ESC to close, backdrop click) - [ ] #22 — Drawer / Sheet (left/right/bottom, mobile-first) - [ ] #23 — Sidebar nav item (icon, label, badge, active state) Feedback - [ ] #24 — Toast / Snackbar (success/error/warning/info, auto-dismiss, queue) - [ ] #25 — Skeleton loader (text, card, avatar variants) - [ ] #26 — Empty state (icon, title, description, optional CTA) - [ ] #27 — Error boundary fallback UI - [ ] #28 — Spinner / Loading indicator Data Display - [ ] #29 — Progress bar (value, color variant, label optional) - [ ] #30 — Stat / MetricCard (label, value, sub-label, color variant) - [ ] #31 — Table (sortable headers, loading state, empty state, pagination) - [ ] #32 — Pagination controls **Definition of Done:** - [ ] Every component accepts and forwards className prop - [ ] Every component uses only CSS variable tokens — zero hardcoded hex values - [ ] Every interactive component is keyboard accessible (Tab, Enter, Escape, Arrow keys where applicable) - [ ] Every component has TypeScript props interface exported from its file - [ ] Every component handles its own loading, empty, and error states where applicable - [ ] Has a `.stories.tsx` file covering all variants and states - [ ] Tested on mobile viewport - [ ] No TypeScript errors **Target Date:** YYYY-MM-DD **Owner:** @sarthaksam003
No due date•0/15 issues closed**Goal:** The application is production-ready — performant, accessible, secure against misuse, and operable at scale. → "The app passes a WCAG 2.1 AA audit, all pages score ≥ 90 on Lighthouse, bulk moderation works on 50+ reports, and the report filing endpoint is protected against abuse." **Features in this milestone:** - [ ] #58 — Bulk moderation actions (select multiple reports → apply action to all) - [ ] #59 — Rate limiting feedback on report filing (surface 429 errors with retry countdown) - [ ] #60 — Audit log export (CSV / JSON download for compliance) - [ ] #61 — Accessibility audit + fixes (keyboard navigation, ARIA labels, focus management) - [ ] #62 — Lighthouse performance pass (lazy loading, code splitting per route, image optimisation) - [ ] #63 — Error boundary per feature (no single crash takes down the full dashboard) - [ ] #64 — End-to-end tests (Playwright) for critical paths: file report, moderate, ban user - [ ] #65 — `coming soon` gate on Digital and Monochrome themes in ThemePicker **Definition of Done:** - [ ] All features merged to main - [ ] Lighthouse score ≥ 90 on Performance, Accessibility, Best Practices - [ ] WCAG 2.1 AA — all interactive elements keyboard accessible, all images have alt text - [ ] Bulk action tested with 50 reports selected simultaneously — no UI freeze - [ ] All Playwright E2E tests pass on CI - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Security review sign-off from backend team **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Moderators receive live queue updates and alerts for new escalations without manually refreshing the page. → "When a new report is escalated to human review, the moderator's dashboard queue count increments live, a toast notification appears, and the new report card slides into the queue — all without a page refresh." **Features in this milestone:** - [ ] #52 — WebSocket or polling client setup (decide and document in ADR) - [ ] #53 — Live queue count updates (Pending + Escalated badges in sidebar/bottom nav) - [ ] #54 — New escalation toast notification - [ ] #55 — In-app notification bell (unread count, notification list) - [ ] #56 — Moderator online presence indicator (show active moderators in dashboard) - [ ] #57 — `useRealtimeQueue` hook (abstracts WebSocket / polling behind same interface) **Definition of Done:** - [ ] All features merged to main - [ ] Queue updates within 3 seconds of a report being escalated on the backend - [ ] Notifications persist across page refresh (unread count restored from API on mount) - [ ] WebSocket disconnection is handled gracefully — falls back to polling, shows reconnecting indicator - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on WebSocket event schema or polling endpoint **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Admins can view aggregated moderation data — report trends, AI performance, and moderator throughput — to make informed policy decisions. → "An admin can open the Analytics tab and see a breakdown of report reasons, AI auto-resolve rate, escalation rate over time, and per-moderator action counts, all filterable by date range." **Features in this milestone:** - [ ] #45 — Report reason breakdown chart (bar chart, this week / this month) - [ ] #46 — AI auto-resolve rate trend (line chart over time) - [ ] #47 — Escalation rate by reason (grouped bar) - [ ] #48 — Moderator action breakdown (per moderator: Remove / Warn / Ban / Dismiss counts) - [ ] #49 — Date range filter (today / this week / this month / custom) - [ ] #50 — Exportable report summary (CSV download) - [ ] #51 — `useAnalytics` hook + `analyticsService.ts` **Definition of Done:** - [ ] All features merged to main - [ ] All charts render correctly with empty data (no crashes, show empty state) - [ ] CSV export includes all visible filtered data - [ ] Charts use theme-aware colors via `useTheme().tokens` (no hardcoded hex in chart props) - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on analytics aggregation endpoint and date range query params **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Human moderators can review escalated reports, see AI confidence scores, take moderation actions, and have every decision recorded in the audit trail. → "A moderator can open the admin dashboard, see all pending and escalated reports with AI scores, take action (Remove / Warn / Ban / Dismiss) with a confirmation step, and see the report resolve and the queue counter decrement in real time." **Features in this milestone:** - [ ] #34 — Admin dashboard layout (sidebar, topbar, metrics row) - [ ] #35 — Moderation queue with filter chips (All / Escalated / Spam / Hate speech etc.) - [ ] #36 — `ReportCard` component (collapsed + expanded states, pipeline stepper, audit trail) - [ ] #37 — AI confidence score bar (color-coded: red ≥ 0.85, amber 0.60–0.85, green < 0.60) - [ ] #38 — Moderation action buttons (Remove content / Ban author / Warn author / Dismiss) - [ ] #39 — Confirmation modal for destructive actions (with action summary) - [ ] #40 — Moderator claim-lock (show "Moderator X is reviewing" to prevent double-handling) - [ ] #41 — AI screening trigger (manual "Run AI screening" for unscreened reports) - [ ] #42 — Metrics row (Pending count, Escalated count, AI auto-resolved, Escalation rate) - [ ] #43 — Mobile-responsive moderation queue (bottom nav, card-based layout) - [ ] #44 — `useModerateAction` hook + optimistic UI update **Definition of Done:** - [ ] All features merged to main - [ ] Destructive actions (Ban, Remove) require confirmation before firing - [ ] Optimistic UI updates queue count immediately on action — no waiting for server round-trip - [ ] Claim-lock prevents two moderators from acting on the same report simultaneously - [ ] Report status transitions match backend state machine exactly (no invalid transitions possible from UI) - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on moderation action endpoint and claim-lock mechanism **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Any authenticated non-banned user can file a report against a post, comment, or user, with all validation rules enforced and the report visible in the moderation queue. → "A user can report content for any valid reason, duplicate and self-reports are rejected with clear error messages, and every filed report appears in the admin queue with its full audit trail." **Features in this milestone:** - [ ] #26 — Report filing UI (reason selector, details field, submit) - [ ] #27 — Validation feedback (self-report, duplicate, banned reporter — all surface as inline errors) - [ ] #28 — Report status display (`PENDING` / `AI_SCREENING` / `ESCALATED_TO_HUMAN` / `RESOLVED_AUTO` / `RESOLVED_HUMAN` / `DISMISSED`) - [ ] #29 — Report queue list view (filterable by status, reason, content type) - [ ] #30 — Report detail view (target content, reporter info, reason, details, audit trail) - [ ] #31 — Status pipeline stepper component (shows current stage visually) - [ ] #32 — `useReports` hook + `reportService.ts` - [ ] #33 — `ReportReason` and `ReportStatus` enums aligned with backend **Definition of Done:** - [ ] All features merged to main - [ ] All three validation rules enforced: no self-report, no duplicate, no banned reporter - [ ] Report audit log renders all entries with timestamps - [ ] Queue updates without full page reload after a new report is filed - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on Report API contract and validation error response shapes **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Posts, comments, and user profiles can be viewed and managed through the UI, giving moderators the content context they need before M3 report filing begins. → "An admin can view any user's profile, post history, comment history, ban status, and report count from a single panel." **Features in this milestone:** - [ ] #19 — User list view (searchable, filterable by role/ban status) - [ ] #20 — User profile panel (role, ban history, report count, reports filed count) - [ ] #21 — Post detail view (content, author, created date, removed state) - [ ] #22 — Comment detail view (description, parent post, author, removed state) - [ ] #23 — Content state display (`[removed]` vs active) - [ ] #24 — User repository hooks (`useUser`, `useUserList`) - [ ] #25 — Content repository hooks (`usePost`, `useComment`) **Definition of Done:** - [ ] All features merged to main - [ ] Removed content shows `[removed]` placeholder, not a blank or error - [ ] Banned user profiles are visually distinct from active users - [ ] All views handle empty states and loading skeletons - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on User, Post, Comment API response shapes **Target Date:** YYYY-MM-DD **Owner:** @username
No due date**Goal:** Users can log in via credentials or OAuth, receive role-appropriate access, and stay authenticated across sessions with automatic token refresh. → "A USER, MODERATOR, and ADMIN can each log in and land on their correct dashboard with access gates enforced on both the route and API layer." **Features in this milestone:** - [ ] #11 — Login page (email/password + Google OAuth) - [ ] #12 — JWT decode + role extraction (`USER` / `HUMAN_MODERATOR` / `AI_MODERATOR` / `ADMIN`) - [ ] #13 — Protected route guards by role - [ ] #14 — Token refresh + silent re-auth on 401 - [ ] #15 — Logout + session teardown (clear store, cookies, redirect) - [ ] #16 — `AuthContext` + `useAuth` hook - [ ] #17 — OAuth callback handler (`/auth/callback`) - [ ] #18 — Post-login redirect (return user to intended route) **Definition of Done:** - [ ] All features merged to main - [ ] A banned user is redirected and cannot access any protected route - [ ] Token refresh is silent — user never sees a logout on expiry - [ ] Role mismatch redirects to 403, not a blank screen - [ ] No TypeScript errors - [ ] Tested on mobile viewport - [ ] Backend team sign-off on token shape and refresh endpoint contract **Target Date:** YYYY-MM-DD **Owner:** @username
No due date•0/2 issues closed**Goal:** The development environment, folder architecture, global infrastructure, and design system are fully configured so every future feature milestone can start without any setup overhead. → "Any developer can clone the repo, run one command, and have a fully working dev environment with routing, auth scaffolding, theming, and HTTP clients ready." **Features in this milestone:** - [ ] #01 — Folder structure & feature-based architecture setup - [ ] #02 — TypeScript strict config + path aliases (`@/`) - [ ] #03 — Tailwind + Theme system (token-based, light/dark/digital/monochrome) - [ ] #04 — Axios instances + interceptors (auth, refresh, retry, error) - [ ] #05 — React Router setup + route guards scaffold - [ ] #06 — Zustand store root setup + devtools - [ ] #07 — React Query global client + error boundary - [ ] #08 — ESLint + Prettier + pre-commit hooks (Husky) - [ ] #09 — CI pipeline (lint, type-check, test on PR) - [ ] #10 — Environment config (`.env` schema, `import.meta.env` types) **Definition of Done:** - [ ] All features merged to main - [ ] `pnpm install && pnpm dev` works on a clean clone with zero manual steps - [ ] No TypeScript errors on strict mode - [ ] Path aliases resolve correctly in both dev and build - [ ] Theme switches correctly between light and dark with persistence - [ ] CI pipeline passes on every PR - [ ] `README.md` updated with setup instructions and folder conventions **Target Date:** YYYY-MM-DD **Owner:** @nayan458
No due date•5/12 issues closed