From 418d59f5ab3084cdf06cca7fda5b14c8652c86d7 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini
<38371645+ElhamDevelopmentStudio@users.noreply.github.com>
Date: Fri, 21 Nov 2025 02:20:32 +0430
Subject: [PATCH] Revert "Redesiging"
---
.vscode/settings.json | 3 -
AGENTS.md | 771 ++++++---------
AUTH_QUICKSTART.md | 1 -
app/(auth)/auth/forgot-password/page.tsx | 142 +--
app/(auth)/auth/magic-link/page.tsx | 195 +---
app/(auth)/auth/reset-password/page.tsx | 184 ++--
app/(auth)/auth/verify-email/page.tsx | 177 +---
app/(auth)/layout.tsx | 133 ++-
app/(auth)/sign-in/page.tsx | 80 +-
app/(auth)/sign-up/page.tsx | 65 +-
app/(marketing)/page.tsx | 425 ++------
app/(platform)/dashboard/page.tsx | 917 +++++++-----------
.../problems/[slug]/submissions/page.tsx | 24 +-
app/(platform)/settings/account/page.tsx | 524 ++++------
app/(platform)/settings/profile/page.tsx | 213 ++--
app/(platform)/settings/security/page.tsx | 359 +++----
app/(platform)/teams/page.tsx | 121 +--
app/(platform)/workspace/discuss/page.tsx | 131 +--
app/(platform)/workspace/editorials/page.tsx | 177 +---
.../workspace/leaderboards/page.tsx | 270 +-----
.../workspace/problems/[slug]/page.tsx | 163 +---
app/(platform)/workspace/problems/page.tsx | 139 +--
app/(platform)/workspace/trails/page.tsx | 169 +---
app/(reader)/difficulty/[level]/page.tsx | 288 +-----
app/(reader)/discuss/[threadId]/page.tsx | 15 +-
app/(reader)/discuss/page.tsx | 38 +-
app/(reader)/layout.tsx | 15 +-
app/(reader)/leaderboards/[window]/page.tsx | 3 +-
.../leaderboards/difficulty/[level]/page.tsx | 3 +-
app/(reader)/leaderboards/page.tsx | 125 +--
app/(reader)/leaderboards/tag/[slug]/page.tsx | 5 +-
.../[slug]/discuss/[threadId]/page.tsx | 105 +-
app/(reader)/problems/[slug]/discuss/page.tsx | 24 +-
.../problems/[slug]/editorial/page.tsx | 126 +--
app/(reader)/problems/[slug]/not-found.tsx | 60 +-
app/(reader)/problems/[slug]/trails/page.tsx | 56 +-
app/(reader)/tags/[slug]/page.tsx | 1 -
app/(reader)/u/[handle]/page.tsx | 17 +-
app/admin/analytics/page.tsx | 6 +-
app/admin/audit/page.tsx | 44 +-
app/admin/contests/page.tsx | 37 +-
app/admin/discussions/page.tsx | 44 +-
app/admin/page.tsx | 52 +-
app/admin/submissions/page.tsx | 44 +-
app/admin/system/page.tsx | 45 +-
app/globals.css | 335 ++-----
app/share/s/[publicId]/page.tsx | 121 +--
app/staff/problems/page.tsx | 41 +-
app/staff/proposals/page.tsx | 34 +-
.../analytics/admin-analytics-dashboard.tsx | 131 +--
components/admin/audit/admin-audit-client.tsx | 21 +-
.../admin/contests/admin-contests-client.tsx | 377 ++-----
.../contests/contest-anti-cheat-dashboard.tsx | 36 +-
.../dashboard/admin-dashboard-client.tsx | 126 +--
.../discussions/admin-discussions-client.tsx | 103 +-
.../admin/problems/admin-problems-client.tsx | 310 +++---
.../submissions/admin-submissions-client.tsx | 380 +++-----
.../admin/system/admin-system-client.tsx | 27 +-
components/admin/users/admin-users-client.tsx | 162 +---
components/auth/sign-in-form.tsx | 55 +-
components/auth/sign-up-form.tsx | 45 +-
.../contests/contest-clarifications.tsx | 223 +++--
components/contests/contest-detail.tsx | 741 ++++++++------
components/contests/contest-scoreboard.tsx | 285 +++---
components/contests/contests-overview.tsx | 300 +++---
.../dashboard/submission-outcome-chart.tsx | 99 --
.../discussions/discussion-composer.tsx | 132 +--
.../discussions/discussion-detail-shell.tsx | 172 ++--
components/discussions/discussion-reply.tsx | 43 +-
.../discussions/discussion-thread-card.tsx | 85 +-
.../discussions/global-discussions-client.tsx | 188 ++--
.../discussions/problem-discussion-panel.tsx | 34 +-
components/icons.ts | 8 -
.../leaderboards/leaderboard-client.tsx | 227 ++---
components/marketing/command-palette.tsx | 144 ---
components/marketing/split-editor.tsx | 108 ---
components/marketing/theme-toggle-landing.tsx | 22 -
components/problems/problem-filters-panel.tsx | 51 +-
components/problems/problem-library-page.tsx | 3 -
components/problems/problem-library.tsx | 164 ++--
components/problems/problem-reader.tsx | 52 +-
components/problems/problem-status-badge.tsx | 2 +-
components/problems/problem-workspace.tsx | 553 ++++-------
components/profile/profile-client.tsx | 831 +++++++---------
components/proposals/proposal-form.tsx | 183 ++--
components/proposals/proposal-list.tsx | 159 +--
components/providers/theme-provider.tsx | 2 +-
components/staff/judge/manual-queue.tsx | 9 +-
.../staff/problems/problem-editor-shell.tsx | 404 +++-----
.../staff/problems/problems-dashboard.tsx | 86 +-
.../staff/proposals/proposal-detail.tsx | 377 ++-----
.../staff/proposals/proposals-dashboard.tsx | 139 +--
components/submissions/submission-detail.tsx | 435 ++++-----
components/submissions/submissions-client.tsx | 672 ++++++-------
components/trails/trails-board.tsx | 16 +-
components/ui/accordion.tsx | 4 +-
components/ui/alert-dialog.tsx | 12 +-
components/ui/alert.tsx | 18 +-
components/ui/avatar.tsx | 10 +-
components/ui/badge.tsx | 7 +-
components/ui/breadcrumb.tsx | 6 +-
components/ui/button-group.tsx | 8 +-
components/ui/button.tsx | 18 +-
components/ui/calendar.tsx | 26 +-
components/ui/card.tsx | 10 +-
components/ui/carousel.tsx | 15 +-
components/ui/chart.tsx | 10 +-
components/ui/checkbox.tsx | 2 +-
components/ui/command.tsx | 19 +-
components/ui/confirm-dialog.tsx | 98 --
components/ui/context-menu.tsx | 21 +-
components/ui/data-table.tsx | 18 +-
components/ui/dialog.tsx | 14 +-
components/ui/drawer.tsx | 22 +-
components/ui/dropdown-menu.tsx | 19 +-
components/ui/empty.tsx | 14 +-
components/ui/field.tsx | 64 +-
components/ui/form.tsx | 6 +-
components/ui/hover-card.tsx | 2 +-
components/ui/input-group.tsx | 12 +-
components/ui/input-otp.tsx | 4 +-
components/ui/input.tsx | 4 +-
components/ui/item.tsx | 23 +-
components/ui/kbd.tsx | 4 +-
components/ui/label.tsx | 2 +-
components/ui/menubar.tsx | 25 +-
components/ui/navigation-menu.tsx | 10 +-
components/ui/pagination.tsx | 8 +-
components/ui/popover.tsx | 2 +-
components/ui/progress.tsx | 2 +-
components/ui/radio-group.tsx | 4 +-
components/ui/resizable.tsx | 2 +-
components/ui/scroll-area.tsx | 4 +-
components/ui/select.tsx | 11 +-
components/ui/sheet.tsx | 22 +-
components/ui/sidebar.tsx | 42 +-
components/ui/skeleton.tsx | 2 +-
components/ui/slider.tsx | 4 +-
components/ui/sonner.tsx | 4 +-
components/ui/switch.tsx | 4 +-
components/ui/table.tsx | 20 +-
components/ui/tabs.tsx | 8 +-
components/ui/textarea.tsx | 2 +-
components/ui/theme-toggle.tsx | 12 +-
components/ui/toggle-group.tsx | 4 +-
components/ui/toggle.tsx | 4 +-
components/ui/tooltip.tsx | 5 +-
config/admin.ts | 172 ----
config/auth.ts | 154 ---
config/contests.ts | 153 ---
config/dashboard.ts | 198 ----
config/difficulty.ts | 250 -----
config/discussions.ts | 75 --
config/landing.ts | 81 --
config/leaderboards.ts | 80 --
config/problems.ts | 248 -----
config/profile.ts | 97 --
config/proposals.ts | 86 --
config/settings.ts | 161 ---
config/share.ts | 45 -
config/staff.ts | 124 ---
config/submissions.ts | 123 ---
config/teams.ts | 52 -
config/workspace-hub.ts | 122 ---
config/workspace.ts | 52 -
docs/redesign-checklist.md | 89 --
lib/auth/audit.ts | 1 -
lib/auth/index.ts | 1 -
lib/auth/rate-limit.ts | 1 -
lib/auth/totp.ts | 1 -
lib/auth/utils.ts | 1 -
lib/email/index.ts | 1 -
lib/email/resend.ts | 1 -
lib/email/templates.ts | 1 -
lib/validators/auth.ts | 1 -
prisma.config.mjs | 13 +-
.../migration.sql | 14 -
177 files changed, 5557 insertions(+), 13323 deletions(-)
delete mode 100644 .vscode/settings.json
delete mode 100644 components/dashboard/submission-outcome-chart.tsx
delete mode 100644 components/marketing/command-palette.tsx
delete mode 100644 components/marketing/split-editor.tsx
delete mode 100644 components/marketing/theme-toggle-landing.tsx
delete mode 100644 components/ui/confirm-dialog.tsx
delete mode 100644 config/admin.ts
delete mode 100644 config/auth.ts
delete mode 100644 config/contests.ts
delete mode 100644 config/dashboard.ts
delete mode 100644 config/difficulty.ts
delete mode 100644 config/discussions.ts
delete mode 100644 config/landing.ts
delete mode 100644 config/leaderboards.ts
delete mode 100644 config/problems.ts
delete mode 100644 config/profile.ts
delete mode 100644 config/proposals.ts
delete mode 100644 config/settings.ts
delete mode 100644 config/share.ts
delete mode 100644 config/staff.ts
delete mode 100644 config/submissions.ts
delete mode 100644 config/teams.ts
delete mode 100644 config/workspace-hub.ts
delete mode 100644 config/workspace.ts
delete mode 100644 docs/redesign-checklist.md
delete mode 100644 prisma/migrations/20251120085659_security_updates/migration.sql
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 97f0e81..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "prisma.pinToPrisma6": true
-}
diff --git a/AGENTS.md b/AGENTS.md
index 8029dc9..650701c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,4 +1,4 @@
-# OPENSOLVE — DESIGN SYSTEM & IMPLEMENTATION GUIDE (Cursor Agent Spec)
+✅ OPEN SOLVE — MASTER REDESIGN & IMPLEMENTATION PROMPT
You are the **principal product/UI engineer for OpenSolve**, an open-source LeetCode alternative.
@@ -8,617 +8,444 @@ Your job is to **completely redesign** the given page(s) and all of their nested
- **Tailwind CSS**
- **Customized shadcn/ui components**
- **TanStack Table**
-- **hugeicons-react** for all icons
+- **hugeicons-react** for all icons (see Section 4.4)
This is NOT a tweak or refinement.
-This is a **full visual + UX rebuild** while keeping the **existing data structures, hooks, and behavior intact**.
+This is a **full visual + UX rebuild** while keeping the existing data structures, hooks, and behavior intact.
---
-## [00] ROLE & PRIORITIES
-
-**Role:**
-You are responsible for the **UI/UX layer** only. You may reorganize components, JSX, and Tailwind classes, but:
-
-1. **Do NOT break logic**
- - Keep existing hooks, tRPC calls, React Query usage, and business rules.
- - Keep prop names and types unless explicitly told otherwise.
-
-2. **Absolute MUSTs (never violate):**
- - `font-mono` for **all** text (headings, labels, body, buttons).
- - **No rounded corners** anywhere → always `rounded-none`.
- - **Semantic Tailwind tokens only** (`bg-background`, `text-foreground`, etc.).
- - **hugeicons-react only** for icons (via `@/components/icons` or direct imports).
- - Designs must work in **both light and dark mode**.
- - All marketing/UX copy should be configurable (via `config/*.ts`), not hard-coded in components.
-
-3. **When redesigning a page, output in this structure:**
- 1. **Brief UX Plan** (4–6 bullets).
- 2. **Main Page Component** (full TSX with imports).
- 3. **Nested Components** (any additional components you introduce).
- 4. **Config File** (if applicable; put strings/copy here).
- 5. **Notes** (integration points, assumptions, domain considerations).
-
----
-
-## [01] PROJECT CONTEXT (OPENSOLVE)
+## 0. Project Context (OpenSolve)
OpenSolve is:
-- A **competitive programming / algorithmic practice platform**.
-- Built with **Next.js**, **PostgreSQL/Prisma**, **tRPC**, **React Query**, **Tailwind**, and **shadcn/ui**.
-- Uses a **RabbitMQ + Docker judge** (plus an inline simulator fallback) for submissions.
-- Includes rich domain entities like:
+- A competitive programming / algorithmic practice platform
+- Built with **Next.js**, **PostgreSQL/Prisma**, **tRPC**, **React Query**, **Tailwind**, and **shadcn/ui**
+- Uses a **RabbitMQ + Docker judge** for submissions
+- Has rich domain entities:
- `User`, `Problem`, `ProblemVersion`, `Tag`, `Difficulty`, `Company`
- `Submission`, `Language`, `Verdict`, `TestCase`
- `Contest`, `ContestProblem`, `ContestRegistration`, `ContestSnapshot`, `ContestClarification`
- `Discussion`, `TrailInsight`, `Badge`, `Leaderboard*`, `SystemSetting`, `Incident`, etc.
-Everything you design must feel **native** to this domain:
-
-> Coding, problems, submissions, contests, leaderboards, discussions, staff tools, admin consoles.
+Everything you design must feel **native to this domain**:
+coding, problems, submissions, contests, leaderboards, discussions, admin tooling.
---
-## [02] DESIGN LANGUAGE — “BRUTALIST TERMINAL”
+## 1. Goal: Complete Redesign (Not Modification)
-### 2.1 Core Aesthetic
+**Do NOT**:
-OpenSolve uses a **brutalist, terminal-inspired** design. It should feel like a **serious developer tool**, not a generic SaaS.
+- Do not preserve or slightly improve the current layout.
+- Do not keep the same structure and just reskin.
+- Do not keep “placeholder” structures from the old UI.
-**Key principles:**
+**Instead**:
-- **No rounded corners**
- - Always use `rounded-none` (buttons, cards, chips, panels, inputs).
-- **Sharp borders**
- - Emphasis: `border-2 border-border` or `border-2 border-primary`.
- - Dividers: `border border-border`.
-- **Monospace typography**
- - `font-mono` for **all** text, including headings and buttons.
-- **Numbered sections**
- - Use bracket notation: `[01]`, `[02]`, `[03]` for major sections.
-- **Functional minimalism**
- - No decorative flourishes for their own sake.
- - Let grid, spacing, typography, and subtle gradients carry the visual weight.
-- **Magazine-style layouts**
- - Asymmetric grids, bold headings, strong hierarchy.
-
----
+- **Replace the entire page UI and all nested components** with a new, intentional, premium OpenSolve design.
+- Create a layout and visual hierarchy that looks handcrafted and product-grade—**not** like a generic AI/Tailwind template.
-## [03] COLOR SYSTEM — SEMANTIC ONLY
+The new UI must make people think:
-### 3.1 Semantic Tokens
+> “There’s no way AI built this. This looks like a serious, professionally designed product.”
-**Never** use raw hex colors or Tailwind’s gray/blue palettes (`text-gray-900`, `bg-white`, etc.).
-Only use semantic tokens (which are mapped in CSS for light/dark modes):
-
-- `bg-background` / `text-foreground` — page background and primary text.
-- `text-muted-foreground` — secondary text.
-- `bg-card` / `text-card-foreground` — card surfaces.
-- `bg-primary` / `text-primary-foreground` — primary actions and CTAs.
-- `text-primary` — emphasis text.
-- `bg-accent` — subtle backgrounds & hovers.
-- `border-border` — all default borders.
-- State colors (if defined):
- - `bg-success`, `text-success`, `bg-success/10`, `border-success/30`
- - `bg-warning`, `text-warning`, `bg-warning/10`, `border-warning/30`
- - `bg-destructive`, `text-destructive`, `bg-destructive/10`, `border-destructive/30`
- - `bg-info`, `text-info`, `bg-info/10`, `border-info/30`
-
-### 3.2 Gradients & Shadows (Subtle)
+---
-Use Tailwind’s gradient utilities (or equivalent custom ones) **sparingly**, mostly for headings and hero sections:
+## 2. Global Layout & Information Architecture (Enforce These Patterns)
-- **Text gradients (headlines):**
+OpenSolve uses a **unified app shell**:
-```tsx
-className =
- "bg-gradient-to-br from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent";
-```
+- **Left Sidebar** → main navigation (Problems, Submissions, Contests, Discussions, Trails, Profile, Admin, etc.)
+- **Topbar** → page context and actions
-- **Primary accent text:**
+For any **authenticated/internal page** you redesign:
- `className="bg-gradient-to-r from-primary via-primary to-primary/70 bg-clip-text text-transparent"`
+1. **Sidebar (persistent)**
+ - Implement a clean, slim left sidebar for primary navigation.
+ - Include:
+ - Product logo/name
+ - Main nav items (Problems, Contests, Submissions, Leaderboard, Discussions, Trails)
+ - Admin/Staff area (only if roles permit)
+ - Use **icon + label** patterns (icons from `hugeicons-react`).
+ - Support collapse/minify on smaller screens (`md:` up).
-- **Subtle background gradient:**
+2. **Topbar (always present above content)**
+ Use the top bar to convey:
+ - Page **title** and **subtitle** or short context.
+ - **Breadcrumbs** (e.g., Problems → Two Sum → Submissions).
+ - Primary **page-level actions**: “New Contest”, “Create Problem”, “Edit”, “Upsolve”, etc.
+ - User identity: avatar + small dropdown.
+ - Optional environment/light indicators (e.g., `Dev`, `Staging` badge), if reasonable.
- `className="bg-gradient-to-br from-primary/5 via-background to-background"`
+3. **Content Area**
+ - Below the topbar, design a **clear main content layout**:
+ - For simple detail pages: single column + side rail.
+ - For complex pages (problem solving, contest dashboards): **split panes**, sticky headers, and clear sections.
-- **Hover gradient overlay (e.g. cards):**
+4. **Responsiveness**
+ - On small screens:
+ - Sidebar collapses into a top menu or overlay.
+ - Topbar remains, but simplified.
+ - Content stacks vertically, no horizontal scroll.
- ``
-
-- **Shadows:**
- - Use `shadow-sm shadow-primary/10`, `shadow-md shadow-primary/20`, etc.
- - Keep them subtle; this is not a neumorphic UI.
+Use these patterns **consistently** across all redesigns unless a page is explicitly public/standalone (e.g., landing page, auth screens).
---
-## [04] TYPOGRAPHY & SPACING
-
-### 4.1 Typography Scale (all `font-mono`)
-
-- **Hero display:**
-
- `className="font-mono text-6xl sm:text-7xl lg:text-8xl font-black leading-[1.05] tracking-tighter"`
+## 3. Visual Direction & Design System
-- **Section headlines:**
+### 3.1 Color System — Modern Bright SaaS (Blue Primary)
- `className="font-mono text-4xl sm:text-5xl lg:text-6xl font-black leading-tight tracking-tight"`
+Use a **Modern Bright SaaS** style:
-- **Subsection titles:**
+- **Primary**: Blue (mid-saturated, not neon, not dull).
+ Think something in the range of Tailwind `blue-500` / `blue-600` for primary actions, with lighter tints for backgrounds/badges.
+- **Neutrals**: A refined gray scale (e.g., slate/stone) for backgrounds, borders, and typography.
+- **Accents** (used sparingly):
+ - Green for success (AC, RESOLVED, ACTIVE)
+ - Amber/orange for warnings (RETRYING, OFFSET, PENDING, FREEZE)
+ - Red/pink for errors/critical (FAILED, REJECTED, SEV1/SEV2)
+ - Purple or cyan for “special” or “featured” states (editorials, Trails, badges)
- `className="font-mono text-xl font-bold"`
+Support **both light and dark mode**:
-- **Body text:**
+- Use Tailwind `dark:` variants and/or CSS variables.
+- Avoid hard-coded colors like `#000`, `#fff`; instead rely on semantic tokens and classes (e.g. `bg-background`, `text-foreground`, `border-border` if using shadcn theme).
- `className="font-mono text-base leading-relaxed"`
+### 3.2 Typography
-- **Small / labels:**
+- Use a clean, modern sans-serif.
+- Establish a clear hierarchy:
+ - Page title: `text-2xl` / `text-3xl`, `font-semibold`
+ - Section headings: `text-lg` / `text-xl`, `font-semibold`
+ - Body: `text-sm` / `text/base`, comfortable line-height
+ - Meta text: `text-xs` / `text-[13px]`, muted
+- Use consistent letter spacing and alignment. No random mix of weights.
- `className="font-mono text-sm"`
+### 3.3 Spacing & Layout Rhythm
-- **Meta / micro text:**
+- Use an **8-point spacing system**: 4, 8, 12, 16, 20, 24, etc.
+- Prefer Tailwind spacing tokens (`p-4`, `px-6`, `gap-4`, `gap-6`) over arbitrary pixels.
+- Use `max-w-*` and `mx-auto` for constrained layouts where it makes sense (e.g. auth pages, simple forms).
- `className="font-mono text-xs text-muted-foreground"`
+### 3.4 Surfaces & Depth
-- **Section markers:**
-
- `className="font-mono text-xs font-bold text-primary/80"`
-
-### 4.2 Spacing System (8px base)
-
-Use Tailwind spacing aligned with 8px increments:
-
-- `gap-2` (8px), `gap-3` (12px), `gap-4` (16px), `gap-6` (24px), `gap-8` (32px), `gap-12` (48px).
-- `p-4`, `p-6`, `p-8`, `p-12` for padding.
-- Section vertical spacing: `py-24 lg:py-32` for major sections.
+- Cards and panels should be:
+ - Subtly rounded (`rounded-xl`, `rounded-2xl` for primary surfaces).
+ - Light shadows (`shadow-sm`, `shadow-md`), not heavy, with subtle contrast between layers.
+- Use separators and soft borders (`border-border`) to structure dense information (tables, timelines, details).
---
-## [05] CORE COMPONENT PATTERNS
-
-### 5.1 Buttons (shadcn/ui-based)
-
-**Primary CTA:**
-
-```jsx
-
-```
-
-**Secondary / Outline:**
+## 4. Components, Icons & Libraries (OpenSolve Constraints)
-```jsx
-
-```
-
-**Ghost / text button:**
-
-```jsx
-
-```
-
-**Icon button:**
+### 4.1 Tech Stack
-```jsx
-
-```
+- **Next.js + TypeScript**
+- **Tailwind CSS**
+- **shadcn/ui components (customized)**
+- **TanStack Query (React Query) over tRPC**
+- **TanStack Table** for data tables
+- **hugeicons-react** for all icons (see below)
-### 5.2 Cards / Panels
+Do NOT introduce:
-**Default card:**
+- New UI libraries (no MUI, Chakra, DaisyUI, etc.).
+- New motion libraries (no Framer Motion, no GSAP).
+- Heavy CSS frameworks beyond Tailwind.
-```jsx
-
{/* content */}
-```
+### 4.2 shadcn/ui
-**Interactive card with hover highlight:**
+- Use shadcn components as your base: `Button`, `Card`, `Tabs`, `Dialog`, `DropdownMenu`, `Badge`, `Tooltip`, `Skeleton`, `Alert`, `Toast`, `Form`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, `Tabs`, `ScrollArea`, etc.
+- **Customize them** to match the OpenSolve design system, instead of using vanilla shadcn styles:
+ - Adjust radii, colors, typography via classNames/tokens.
+ - Ensure consistency across all redesigned pages.
-```jsx
-
- {" "}
- {" "}
-
{/* content */}
-
-```
+### 4.3 Data Tables — Use TanStack Table
-### 5.3 Section Headers
+For any list-heavy / admin / analytics page:
-```jsx
-
- [01] SECTION NAME
- SECTION HEADLINE
-```
+- Use the **existing TanStack Table abstraction** (e.g. a `DataTable` component already in the codebase).
+- Do NOT hand-roll random HTML tables when a proper data table is needed.
+- Enhance table UX with:
+ - Sticky headers
+ - Row hover states
+ - Clear sorting indicators
+ - Optional column visibility toggles
+ - Search & filters integrated into a table toolbar
+ - Pagination controls that feel native to the design
-### 5.4 Stats
+### 4.4 Icon System — Migrate to `hugeicons-react` (No `lucide-react`)
-```jsx
-
- {" "}
-
- 50K+{" "}
-
{" "}
-
DEVELOPERS
-
-```
+OpenSolve is moving from `lucide-react` to **`hugeicons-react`**.
+You must:
-### 5.5 Grid with Pixel Dividers
+1. **Never import from `lucide-react`.**
+ - Remove all existing lucide imports.
+ - Do not introduce new ones.
+ - Replace every lucide icon with a `hugeicons-react` icon.
-```jsx
-
- {" "}
-
Item 1
{" "}
-
Item 2
{" "}
-
Item 3
-
-```
+2. **Use `hugeicons-react` for every icon**:
+ - Navigation icons (sidebar, topbar)
+ - Action icons (buttons, fab, menus)
+ - Status icons (success, error, warning, info)
+ - Domain icons (problems, contests, submissions, discussions, leaderboard, admin, incidents, settings, feature flags, judge, queues, etc.)
----
+3. **If you don’t know which `hugeicons-react` icon to use or how to import it**, you MUST:
+ - Perform an internet search to look up:
+ - The `hugeicons-react` package,
+ - Its icon list and naming conventions,
+ - The appropriate icon component name and import syntax.
+ - Then choose the most semantically appropriate icon (e.g. problem→code/algorithm icon, contests→trophy/flag, submissions→checklist or code-run icon, incidents→alert, etc.).
-## [06] LAYOUT PATTERNS
+4. **Consistency**:
+ - Use a consistent size (e.g. `className="h-4 w-4"` or `h-5 w-5`) for icons in a given context.
+ - Use consistent stroke/fill style (outlined vs filled) for icons in the same UI area.
+ - Use Tailwind utility classes to align icons (`inline-flex`, `items-center`, `gap-2`).
-### 6.1 Top Navigation (Marketing / Public)
+Example (illustrative, not exact):
-```html
-
-```
+```tsx
+import { CodeCircle01Icon, Trophy01Icon } from "hugeicons-react";
-### 6.2 App Shell (Authenticated)
-
-- Use existing `app-shell` / layout wrappers when present.
-- Left sidebar with icons + labels.
-- Collapsible on mobile.
-
-### 6.3 Hero Sections
-
-```jsx
-
- {" "}
-
-```
+- **Discussions & Trails**
+ - Thread layout with clear indentation, reply counts, voting buttons, spoiler handling.
+ - Trail insights as structured cards with categories and upvotes, maybe a graph or relationship hints.
-### 8.2 Domain-Specific Badges
+- **Admin Panel**
+ - Use a **denser layout**, but still breathable.
+ - Overview metrics at top (incidents open, queue depth, recent failures).
+ - Tabs for Users, Problems, Submissions, Contests, Discussions, Incidents, Feature Flags, System Settings.
+ - Remember: **Admin can do everything**. Show powerful tools but with clear warnings and safeguards.
-Use `Badge` from shadcn, customized:
+Apply what’s relevant to the specific page you are redesigning.
-` STATUS `
+---
-**Verdict:**
+## 7. Forms, Modals, and Feedback
-- `SUCCEEDED` → `AC` (Accepted):
+### 7.1 Forms
- ` AC `
+If the page includes a non-trivial form (contest builder, problem editor, settings, etc.):
-- `FAILED` → `WA` / `RE` / etc (depending on verdict):
+- For long/complex forms → convert into a **multi-step flow** with:
+ - Progress indicator
+ - Clear section grouping
+ - “Next” / “Back” actions
- ` WA `
+- Use shadcn `Form` with proper label, description, and error text.
+- Show inline validation and top-level error summary when needed.
+- Mobile-friendly: no cramped inputs, adequate tap targets.
-- `RUNNING`:
+### 7.2 Modals (Preferred) vs Drawers
- ` RUNNING `
+- Prefer **modals (Dialogs)** over drawers/sheets.
+- Use shadcn `Dialog` for:
+ - Confirmation flows
+ - Quick create/edit forms
+ - Dangerous actions (delete problem, ban user, rejudge contest, etc.)
-**Problem State:**
+- Only use drawers/sheets if absolutely necessary for mobile or workflows that must remain anchored.
-- `PUBLISHED`, `DRAFT`, `REVIEW` with matching semantic tokens.
+### 7.3 Toasts / Feedback System
-**Contest State:**
+Every redesigned page must integrate the existing or new **toast system** using shadcn (or compatible pattern):
-- `RUNNING` → `LIVE`
-- `UPCOMING`
-- `FINISHED` → `ENDED`
+- Types:
+ - success
+ - error/failure
+ - warning
+ - info
----
+- Toasts must:
+ - Be accessible (ARIA labels, understandable message).
+ - Be responsive (sane max-width on mobile).
+ - Have distinct but subtle styling per variant.
-## [09] FORMS, MODALS & TOASTS
+Provide **example toast usages** in your response for key flows (e.g., save success, validation error, network failure).
-### 9.1 Forms
+---
-Multi-step for complex flows (problem authoring, contest creation):
+## 8. Motion, Micro-Interactions & Performance
-- Show progress: `[01]`, `[02]`, `[03]`.
-- Use clear section breaks.
+- **No external animation libraries** (no Framer Motion, no heavy animation packages).
+- Use **lightweight CSS transitions** and Tailwind utilities only:
+ - `transition-all`, `transition-colors`, `transition-opacity`
+ - `duration-150` to `duration-300`
+ - `ease-out`, `ease-in-out`
-Input pattern:
+- Add reusable animation utilities in `globals.css` (or equivalent), e.g.:
+ - `.fade-in-soft`
+ - `.slide-up-soft`
+ - `.scale-on-hover`
-```tsx
-
- {" "}
- {" "}
- {" "}
-
Helper text
-
-```
+- Apply them sparingly:
+ - Hover effects on cards/buttons
+ - Subtle entry animations for modals or dropdowns
+ - Soft highlight when data updates (optional)
-### 9.2 Modals (Dialog)
-
-```tsx
-
-```
-
-### 9.3 Toasts
-
-`toast({ title: "Success", description: "Problem created successfully", className: "rounded-none border-2 border-success bg-success/5 font-mono text-sm",
-});`
+Do NOT over-animate. Prioritize **clarity and snappiness**.
---
-## [10] RESPONSIVE DESIGN
+## 9. Implementation Rules (Very Important)
-Use mobile-first Tailwind patterns:
+When you respond:
-`className="text-sm sm:text-base md:text-lg lg:text-xl"`
+1. **Do NOT add unnecessary comments** in the code.
+ - Only minimal structural comments where absolutely helpful (e.g., `// Main content`, `// Filters`).
+ - No conversational or explanatory comments inside the TSX.
-Grids:
+2. **Do NOT change data contracts**:
+ - Keep props, hooks, and API calls consistent with the existing page unless explicitly required.
+ - You’re redesigning the UI, not redefining backend contracts.
-`className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"`
+3. **TypeScript discipline**:
+ - Avoid `any`.
+ - Type component props properly.
-Page container:
+4. **Lint & Build Discipline**:
+ - Assume you will run:
+ - `npm run lint`
+ - `npm run build`
-`className="mx-auto max-w-screen-2xl px-6 lg:px-12"`
+ - Your code must be valid, type-safe, and buildable.
+ - If you introduce patterns that would cause type/lint errors, fix them before finalizing your answer.
-Always verify layouts for:
+5. **Support dark & light mode** in all new styles:
+ - Use Tailwind `dark:` variants consistently.
+ - Ensure contrast ratios are readable.
-- Small mobile (~375px)
-- Tablet (~768px)
-- Desktop (≥ 1280px)
+6. **Icons**:
+ - Never use `lucide-react`.
+ - Always use `hugeicons-react`, and if unsure, look up the correct icon and import syntax via internet search.
---
-## [11] ICON SYSTEM — HUGEICONS ONLY
-
-- **Never** use `lucide-react`.
-- Use **hugeicons-react** or a local alias module:
+## 10. Response Structure & Deliverables
- ```tsx
- import { Code2Icon, GithubIcon, ArrowRightIcon } from "@/components/icons";`
- ```
-
-- Sizes:
- - Small: `className="h-4 w-4"`
- - Medium: `className="h-5 w-5"`
- - Large: `className="h-6 w-6"`
-
-If you don’t know the icon name, pick a semantically close one.
-
----
+When you answer, always structure your response like this:
-## [12] IMPLEMENTATION RULES
-
-### 12.1 TypeScript & Imports
-
-- TypeScript strict: **no `any`**.
-- Prefer types inferred from existing code and types from `@/types`, `@/lib`, etc.
-- Import order:
- 1. React/Next.
- 2. External libraries.
- 3. Components (`@/components/...`).
- 4. Utilities (`@/lib/...`).
- 5. Config (`@/config/...`).
- 6. Types.
-
-### 12.2 File Organization
-
-Follow this general layout:
-
-```txt
-`components/
- marketing/ # Landing & public pages
- problems/ # Problem-related components
- contests/ # Contest-related components
- workspace/ # Creator workspace components
- admin/ # Admin console pieces
- staff/ # Staff tools
- ui/ # shadcn base components
-
-config/
- landing.ts # Landing page content
- navigation.ts # Nav structure
- page-*.ts # Per-page configs when needed
-
-lib/
- utils.ts # Utilities`
-```
+1. **High-Level UX & Visual Plan (short)**
+ - 4–8 bullet points explaining the new layout and design decisions.
-### 12.3 Config-Driven Content
+2. **Updated Page Component(s)**
+ - Full **TSX/JSX** for the redesigned page.
+ - Include imports.
+ - Assume Next.js + TypeScript.
-Example `config/landing.ts`:
+3. **Nested Components**
+ - TSX for all **new or redesigned nested components** used by this page (e.g. toolbars, filters, summary cards, side panels, modals).
+ - Keep them in realistic locations (`components/...` etc.), but you don’t need to show file paths—just clear component definitions.
-```tsx
-`export const landingConfig = { hero: { badge: "ALPHA v0.1.0", headline: { line1: "CODE", line2: "COMPETE", line3: "CONQUER",
- }, description: "Open-source algorithmic practice platform...",
- }, stats: [
- { value: "50K+", label: "DEVELOPERS" },
- { value: "1M+", label: "SUBMISSIONS" },
- ], features: { items: [
- { num: "01", title: "...", description: "..." },
- ],
- },
-}; export type LandingConfig = typeof landingConfig;`;
-```
+4. **Styling / Theme Adjustments**
+ - Any Tailwind or `globals.css` additions (reusable animation utilities, color tokens, etc.).
+ - Any shadcn theme overrides if needed (can be shown as code snippets).
-Usage:
+5. **Toasts & State Handling Examples**
+ - Brief code snippet showing how to trigger success/error/warning/info toasts on this page.
+ - Show sample handling for loading, empty, and error states in the main UI.
-```tsx
-import { landingConfig } from "@/config/landing";
{landingConfig.hero.headline.line1}
;`
-```
+6. **Short Notes for Future Pages**
+ - 3–5 bullets explaining how this design ties back into the global OpenSolve system so future pages can follow the same patterns.
---
-## [13] REDESIGN RESPONSE STRUCTURE
-
-When asked to redesign a page:
+## 11. Core Reminder
-1. **Brief UX Plan**
- - 4–6 bullets describing:
- - Layout (sections, grids, split panes).
- - Main interactions (filters, tables, command palette, etc.).
- - How it applies OpenSolve brutalist/terminal principles.
+- The current UI is **just a temporary testing version**.
+- You are here to create a **premium, modern, bespoke** interface that feels:
+ - intentional
+ - cohesive across all OpenSolve surfaces
+ - tuned for serious power users (competitive programmers, problem setters, contest organizers, admins)
-2. **Main Page Component (TSX)**
- - Full component with imports.
- - Uses semantic Tailwind classes and config-driven content.
+- Avoid anything that looks like a copy-paste Tailwind template, a generic AI dashboard, or a portfolio starter.
-3. **Nested Components**
- - Any supporting components introduced (e.g. `ContestHeader`, `SubmissionsToolbar`).
- - Keep responsibilities focused.
+---
-4. **Config File (if necessary)**
- - All non-trivial copy moved into `config/.ts`.
+## 12. Input
-5. **Notes**
- - Any deviations from patterns.
- - Integration with existing hooks, tRPC, or domain objects.
+You will now be given **one or more pages** from the OpenSolve codebase.
+Apply all rules above.
diff --git a/AUTH_QUICKSTART.md b/AUTH_QUICKSTART.md
index 127ac06..f4bbe2a 100644
--- a/AUTH_QUICKSTART.md
+++ b/AUTH_QUICKSTART.md
@@ -236,4 +236,3 @@ Session is auto-loaded in tRPC context. Use appropriate procedure type:
- [ ] Review audit logs regularly
- [ ] Test 2FA enrollment & recovery flows
- [ ] Test email deliverability across providers
-
diff --git a/app/(auth)/auth/forgot-password/page.tsx b/app/(auth)/auth/forgot-password/page.tsx
index 466290c..d1f0728 100644
--- a/app/(auth)/auth/forgot-password/page.tsx
+++ b/app/(auth)/auth/forgot-password/page.tsx
@@ -2,12 +2,8 @@
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
-import { toast } from "sonner";
-
import { trpc } from "@/lib/trpc/client";
import { requestPasswordResetSchema, type RequestPasswordResetInput } from "@/lib/validators/auth";
-import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
@@ -15,14 +11,18 @@ import {
FormItem,
FormLabel,
FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { ArrowRight, CheckCircle2, Mail } from "@/components/icons";
-import { authConfig } from "@/config/auth";
+ Button,
+ Input,
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui";
+import { toast } from "sonner";
+import Link from "next/link";
export default function ForgotPasswordPage() {
- const { forgotPassword } = authConfig;
-
const form = useForm({
resolver: zodResolver(requestPasswordResetSchema),
defaultValues: {
@@ -45,95 +45,47 @@ export default function ForgotPasswordPage() {
};
return (
-
-