From 4e6ac576559f1f2777bffa0326f372e2e3b45d2f Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Wed, 14 Aug 2024 10:20:00 +0430
Subject: [PATCH 01/21] refactor: redesign discussion components with brutalist
 terminal aesthetic

---
 .../discussions/discussion-composer.tsx       | 132 +++++++++-----
 .../discussions/discussion-detail-shell.tsx   | 172 ++++++++++++------
 components/discussions/discussion-reply.tsx   |  43 +++--
 3 files changed, 229 insertions(+), 118 deletions(-)

diff --git a/components/discussions/discussion-composer.tsx b/components/discussions/discussion-composer.tsx
index 9d79076..60fab83 100644
--- a/components/discussions/discussion-composer.tsx
+++ b/components/discussions/discussion-composer.tsx
@@ -1,13 +1,13 @@
 "use client";
 
+import Link from "next/link";
 import { startTransition, useEffect, useMemo, useState } from "react";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import { toast } from "sonner";
+
+import { Send, AlertCircle } from "@/components/icons";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { trpc } from "@/lib/trpc/client";
-import { toast } from "sonner";
 import {
   Select,
   SelectContent,
@@ -15,7 +15,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Link from "next/link";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { discussionsConfig } from "@/config/discussions";
+import { trpc } from "@/lib/trpc/client";
 
 type DiscussionComposerProps = {
   mode: "thread" | "reply";
@@ -26,12 +29,6 @@ type DiscussionComposerProps = {
   onSubmitted?: () => void;
 };
 
-const categoryOptions = [
-  { value: "trending", label: "General" },
-  { value: "help", label: "Help" },
-  { value: "meta", label: "Meta" },
-];
-
 export function DiscussionComposer({
   mode,
   problemId,
@@ -40,19 +37,24 @@ export function DiscussionComposer({
   category,
   onSubmitted,
 }: DiscussionComposerProps) {
+  const { thread: config, categories } = discussionsConfig;
+
   const utils = trpc.useUtils();
   const sessionQuery = trpc.auth.getSession.useQuery(undefined, { staleTime: 30_000 });
   const isAuthenticated = Boolean(sessionQuery.data?.user);
+
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
   const [spoiler, setSpoiler] = useState(false);
   const [selectedCategory, setSelectedCategory] = useState(category ?? "trending");
   const [isSubmitting, setIsSubmitting] = useState(false);
+
   useEffect(() => {
     if (!problemId && category && category !== selectedCategory) {
       startTransition(() => setSelectedCategory(category));
     }
   }, [category, problemId, selectedCategory]);
+
   const createThread = trpc.discussions.createThread.useMutation({
     onSuccess: () => {
       toast.success("Thread posted");
@@ -66,6 +68,7 @@ export function DiscussionComposer({
     onError: (error) => toast.error(error.message ?? "Unable to create thread"),
     onSettled: () => setIsSubmitting(false),
   });
+
   const replyMutation = trpc.discussions.reply.useMutation({
     onSuccess: () => {
       toast.success("Reply posted");
@@ -113,10 +116,14 @@ export function DiscussionComposer({
 
   if (!isAuthenticated) {
     return (
-      <div className="rounded-2xl border border-dashed border-border/70 p-6 text-sm text-muted-foreground">
-        <p>Sign in to join discussions.</p>
-        <Button asChild size="sm" className="mt-3">
-          <Link href="/sign-in">Sign in</Link>
+      <div className="border-2 border-dashed border-border bg-background p-8 text-center">
+        <AlertCircle className="mx-auto mb-3 h-8 w-8 text-muted-foreground" />
+        <p className="mb-4 font-mono text-sm text-muted-foreground">{config.auth.description}</p>
+        <Button
+          asChild
+          className="h-10 rounded-none border-2 border-primary bg-primary font-mono text-xs font-bold uppercase"
+        >
+          <Link href="/sign-in">{config.auth.action}</Link>
         </Button>
       </div>
     );
@@ -126,47 +133,88 @@ export function DiscussionComposer({
     <form onSubmit={handleSubmit} className="space-y-4">
       {mode === "thread" ? (
         <>
-          <Input
-            value={title}
-            onChange={(event) => setTitle(event.target.value)}
-            placeholder="Thread title"
-            required
-          />
-          {!problemId ? (
-            <div className="grid gap-2">
-              <Label htmlFor="discussion-category">Category</Label>
+          <div className="space-y-2">
+            <Label htmlFor="thread-title" className="font-mono text-xs font-bold uppercase">
+              {config.composer.thread.title}
+            </Label>
+            <Input
+              id="thread-title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="What would you like to discuss?"
+              required
+              className="h-11 rounded-none border-2 border-border font-mono text-sm transition-colors focus:border-primary"
+            />
+          </div>
+          {!problemId && (
+            <div className="space-y-2">
+              <Label
+                htmlFor="discussion-category"
+                className="font-mono text-xs font-bold uppercase"
+              >
+                {config.composer.thread.category}
+              </Label>
               <Select
                 value={selectedCategory}
                 onValueChange={(value) => setSelectedCategory(value as typeof selectedCategory)}
               >
-                <SelectTrigger id="discussion-category" className="w-full">
-                  <SelectValue placeholder="Select a tab" />
+                <SelectTrigger
+                  id="discussion-category"
+                  className="h-11 rounded-none border-2 border-border font-mono text-sm"
+                >
+                  <SelectValue placeholder="Select category" />
                 </SelectTrigger>
-                <SelectContent>
-                  {categoryOptions.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
+                <SelectContent className="rounded-none border-2 border-border">
+                  {categories.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      className="font-mono text-sm"
+                    >
                       {option.label}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-          ) : null}
+          )}
         </>
       ) : null}
-      <Textarea
-        value={content}
-        onChange={(event) => setContent(event.target.value)}
-        placeholder={mode === "thread" ? "Share your question or hint" : "Add a reply"}
-        rows={6}
-      />
-      <div className="flex items-center justify-between gap-3">
-        <label className="flex items-center gap-2 text-sm text-muted-foreground">
+
+      <div className="space-y-2">
+        <Label htmlFor="thread-content" className="font-mono text-xs font-bold uppercase">
+          {mode === "thread" ? "Content" : "Reply"}
+        </Label>
+        <Textarea
+          id="thread-content"
+          value={content}
+          onChange={(event) => setContent(event.target.value)}
+          placeholder={
+            mode === "thread" ? config.composer.thread.content : config.composer.reply.content
+          }
+          rows={mode === "thread" ? 8 : 4}
+          className="rounded-none border-2 border-border font-mono text-sm transition-colors focus:border-primary"
+        />
+      </div>
+
+      <div className="flex items-center justify-between gap-4 border-t border-border pt-4">
+        <label className="flex items-center gap-2 font-mono text-xs text-muted-foreground">
           <Switch checked={spoiler} onCheckedChange={setSpoiler} />
-          Mark as spoiler
+          {mode === "thread" ? config.composer.thread.spoiler : config.composer.reply.spoiler}
         </label>
-        <Button type="submit" disabled={!canSubmit || isSubmitting}>
-          {isSubmitting ? "Posting..." : mode === "thread" ? "Start discussion" : "Reply"}
+        <Button
+          type="submit"
+          disabled={!canSubmit || isSubmitting}
+          className="h-10 gap-2 rounded-none border-2 border-primary bg-primary font-mono text-xs font-bold uppercase shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+        >
+          {isSubmitting ? (
+            "Posting..."
+          ) : (
+            <>
+              {mode === "thread" ? config.composer.thread.submit : config.composer.reply.submit}
+              <Send className="h-3.5 w-3.5" />
+            </>
+          )}
         </Button>
       </div>
     </form>
diff --git a/components/discussions/discussion-detail-shell.tsx b/components/discussions/discussion-detail-shell.tsx
index e102787..5bf37f9 100644
--- a/components/discussions/discussion-detail-shell.tsx
+++ b/components/discussions/discussion-detail-shell.tsx
@@ -1,122 +1,174 @@
 "use client";
 
-import { trpc } from "@/lib/trpc/client";
-import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
-import { DiscussionReplyItem } from "@/components/discussions/discussion-reply";
+import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
+
 import { DiscussionComposer } from "@/components/discussions/discussion-composer";
+import { DiscussionReplyItem } from "@/components/discussions/discussion-reply";
 import { DiscussionReportButton } from "@/components/discussions/discussion-report-button";
+import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
 import { SpoilerBlock } from "@/components/discussions/spoiler-block";
+import { LoaderCircle, AlertTriangle, MessageSquareText, ArrowRight } from "@/components/icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import Link from "next/link";
-import { formatDistanceToNow } from "date-fns";
-import { LoaderCircle } from "@/components/icons";
+import { discussionsConfig } from "@/config/discussions";
+import { trpc } from "@/lib/trpc/client";
 
 type DiscussionDetailShellProps = {
   threadId: string;
 };
 
 export function DiscussionDetailShell({ threadId }: DiscussionDetailShellProps) {
+  const { thread: config } = discussionsConfig;
+
   const threadQuery = trpc.discussions.thread.useQuery({ id: threadId });
   const repliesQuery = trpc.discussions.replies.useInfiniteQuery(
     { threadId },
     { getNextPageParam: (last) => last.nextCursor ?? undefined },
   );
+
   if (threadQuery.isLoading) {
     return (
-      <div className="flex items-center justify-center rounded-3xl border border-border/60 bg-card/70 p-12 text-sm text-muted-foreground">
-        <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> Loading thread…
+      <div className="flex items-center justify-center border-2 border-border bg-background p-16 font-mono text-sm text-muted-foreground">
+        <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+        Loading thread...
       </div>
     );
   }
+
   const thread = threadQuery.data;
   if (!thread) {
     return (
-      <div className="rounded-3xl border border-dashed border-border/60 bg-muted/10 p-12 text-center text-sm text-muted-foreground">
-        Thread unavailable or hidden.
+      <div className="border-2 border-dashed border-border bg-background p-16 text-center">
+        <AlertTriangle className="mx-auto mb-3 h-8 w-8 text-muted-foreground" />
+        <p className="font-mono text-sm text-muted-foreground">Thread unavailable or hidden</p>
       </div>
     );
   }
+
   const replies = repliesQuery.data?.pages.flatMap((page) => page.items) ?? [];
   const createdMeta = formatDistanceToNow(thread.createdAt, { addSuffix: true });
-
   const viewerVote = (thread.viewer?.vote ?? 0) as -1 | 0 | 1;
 
   return (
     <div className="space-y-6">
-      <article className="rounded-3xl border border-border/70 bg-card/80 p-6">
-        <div className="flex flex-wrap items-start gap-4">
-          <div className="flex-1">
-            <p className="text-xs uppercase text-muted-foreground">Thread</p>
-            <h1 className="text-2xl font-semibold">{thread.title ?? "Discussion"}</h1>
-            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-              <span>@{thread.author.handle}</span>
-              <span>{createdMeta}</span>
-              {thread.problem ? (
-                <Badge variant="outline" className="text-xs">
-                  {thread.problem.title} · {thread.problem.difficulty ?? "Unrated"}
-                </Badge>
-              ) : null}
-              {thread.category ? (
-                <Badge variant="secondary" className="text-[10px] uppercase tracking-wide">
-                  {thread.category.toLowerCase()}
-                </Badge>
-              ) : null}
-            </div>
+      <article className="border-2 border-border bg-background p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="inline-flex items-center gap-2 border border-border bg-background px-2 py-1 font-mono text-xs font-bold uppercase tracking-wider text-primary/80">
+            <MessageSquareText className="h-3.5 w-3.5" />
+            {config.badge}
+          </div>
+          <div className="flex items-center gap-2">
+            <DiscussionVoteToggle
+              discussionId={thread.id}
+              initialScore={thread.score}
+              initialVote={viewerVote}
+            />
+            <DiscussionReportButton discussionId={thread.id} />
           </div>
-          <DiscussionVoteToggle
-            discussionId={thread.id}
-            initialScore={thread.score}
-            initialVote={viewerVote}
-          />
-          <DiscussionReportButton discussionId={thread.id} />
         </div>
-        <Separator className="my-4" />
-        {thread.containsSpoiler ? (
-          <SpoilerBlock>
-            <p className="whitespace-pre-line text-sm text-muted-foreground">{thread.content}</p>
-          </SpoilerBlock>
-        ) : (
-          <p className="whitespace-pre-line text-sm text-muted-foreground">{thread.content}</p>
-        )}
-        {thread.problem ? (
+
+        <div className="mb-6 space-y-3">
+          <h1 className="font-mono text-2xl font-black leading-tight sm:text-3xl">
+            {thread.title ?? "Discussion"}
+          </h1>
+          <div className="flex flex-wrap items-center gap-3 font-mono text-xs text-muted-foreground">
+            <span className="font-bold text-foreground">@{thread.author.handle}</span>
+            <span>{createdMeta}</span>
+            {thread.problem && (
+              <Badge variant="outline" className="rounded-none border font-mono text-xs uppercase">
+                {thread.problem.title} · {thread.problem.difficulty ?? "Unrated"}
+              </Badge>
+            )}
+            {thread.category && (
+              <Badge
+                variant="secondary"
+                className="rounded-none border border-primary/30 bg-primary/10 font-mono text-[10px] font-bold uppercase tracking-wider text-primary"
+              >
+                {thread.category.toLowerCase()}
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        <Separator className="my-6" />
+
+        <div className="font-mono text-sm leading-relaxed text-muted-foreground">
+          {thread.containsSpoiler ? (
+            <SpoilerBlock>
+              <p className="whitespace-pre-line">{thread.content}</p>
+            </SpoilerBlock>
+          ) : (
+            <p className="whitespace-pre-line">{thread.content}</p>
+          )}
+        </div>
+
+        {thread.problem && (
           <div className="mt-6">
-            <Button asChild>
+            <Button
+              asChild
+              variant="outline"
+              className="h-10 gap-2 rounded-none border-2 border-border font-mono text-xs font-bold uppercase hover:border-primary/50"
+            >
               <Link href={`/problems/${thread.problem.slug}/discuss/${thread.id}`}>
-                View in problem context
+                {config.actions.viewProblem}
+                <ArrowRight className="h-3.5 w-3.5" />
               </Link>
             </Button>
           </div>
-        ) : null}
+        )}
       </article>
 
-      <section className="space-y-3">
-        <h2 className="text-sm font-semibold uppercase text-muted-foreground">Replies</h2>
+      <section className="space-y-4">
+        <div className="border-2 border-border bg-background p-4">
+          <div className="flex items-center justify-between">
+            <div className="font-mono text-xs font-bold uppercase tracking-wider text-primary/80">
+              [03] {config.meta.replies}
+            </div>
+            <Badge variant="secondary" className="rounded-none border font-mono text-xs font-bold">
+              {replies.length}
+            </Badge>
+          </div>
+        </div>
+
         {replies.length === 0 ? (
-          <p className="rounded-2xl border border-dashed border-border/60 p-4 text-sm text-muted-foreground">
-            No replies yet.
-          </p>
+          <div className="border-2 border-dashed border-border bg-background p-12 text-center">
+            <p className="font-mono text-sm text-muted-foreground">{config.empty.replies}</p>
+            <p className="mt-1 font-mono text-xs text-muted-foreground">
+              {config.empty.description}
+            </p>
+          </div>
         ) : (
-          <div className="space-y-3">
+          <div className="space-y-4">
             {replies.map((reply) => (
               <DiscussionReplyItem key={reply.id} reply={reply} />
             ))}
-            {repliesQuery.hasNextPage ? (
+            {repliesQuery.hasNextPage && (
               <Button
-                variant="ghost"
-                className="w-full"
+                variant="outline"
                 disabled={repliesQuery.isFetchingNextPage}
                 onClick={() => repliesQuery.fetchNextPage()}
+                className="h-10 w-full rounded-none border-2 border-border font-mono text-xs font-bold uppercase hover:border-primary/50"
               >
-                {repliesQuery.isFetchingNextPage ? "Loading…" : "Load more"}
+                {repliesQuery.isFetchingNextPage ? (
+                  <>
+                    <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  "Load more replies"
+                )}
               </Button>
-            ) : null}
+            )}
           </div>
         )}
       </section>
 
-      <section className="rounded-3xl border border-border/70 bg-card/70 p-4">
+      <section className="border-2 border-border bg-background p-6">
+        <div className="mb-4 font-mono text-xs font-bold uppercase tracking-wider text-primary/80">
+          [04] Post your reply
+        </div>
         <DiscussionComposer
           mode="reply"
           threadId={thread.id}
diff --git a/components/discussions/discussion-reply.tsx b/components/discussions/discussion-reply.tsx
index db57b73..c1264b4 100644
--- a/components/discussions/discussion-reply.tsx
+++ b/components/discussions/discussion-reply.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import type { DiscussionReply } from "@/lib/discussions/types";
+import { formatDistanceToNow } from "date-fns";
+
+import { DiscussionReportButton } from "@/components/discussions/discussion-report-button";
 import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
 import { SpoilerBlock } from "@/components/discussions/spoiler-block";
+import { User, Reply } from "@/components/icons";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { formatDistanceToNow } from "date-fns";
-import { DiscussionReportButton } from "@/components/discussions/discussion-report-button";
+import type { DiscussionReply } from "@/lib/discussions/types";
 
 type DiscussionReplyProps = {
   reply: DiscussionReply;
@@ -17,24 +19,27 @@ export function DiscussionReplyItem({ reply, onReply }: DiscussionReplyProps) {
   const meta = formatDistanceToNow(reply.createdAt, { addSuffix: true });
   const content = reply.containsSpoiler ? (
     <SpoilerBlock>
-      <p className="text-sm text-muted-foreground whitespace-pre-line">{reply.content}</p>
+      <p className="whitespace-pre-line font-mono text-sm text-muted-foreground">{reply.content}</p>
     </SpoilerBlock>
   ) : (
-    <p className="text-sm text-muted-foreground whitespace-pre-line">{reply.content}</p>
+    <p className="whitespace-pre-line font-mono text-sm text-muted-foreground">{reply.content}</p>
   );
+
   return (
-    <div className="rounded-2xl border border-border/60 bg-card/70 p-4">
+    <div className="border-2 border-border bg-background p-4">
       <div className="flex items-start gap-3">
-        <Avatar className="h-8 w-8">
-          <AvatarFallback>{reply.author.handle.slice(0, 2).toUpperCase()}</AvatarFallback>
+        <Avatar className="h-9 w-9 rounded-none border border-border">
+          <AvatarFallback className="rounded-none bg-primary/10 font-mono text-xs font-bold uppercase text-primary">
+            <User className="h-4 w-4" />
+          </AvatarFallback>
         </Avatar>
-        <div className="flex-1 space-y-2">
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span className="font-medium text-foreground">@{reply.author.handle}</span>
+        <div className="flex-1 space-y-3">
+          <div className="flex items-center gap-2 font-mono text-xs text-muted-foreground">
+            <span className="font-bold text-foreground">@{reply.author.handle}</span>
             <span>{meta}</span>
           </div>
           {content}
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between border-t border-border pt-3">
             <DiscussionVoteToggle
               discussionId={reply.id}
               initialScore={reply.score}
@@ -42,18 +47,24 @@ export function DiscussionReplyItem({ reply, onReply }: DiscussionReplyProps) {
               size="sm"
             />
             <div className="flex items-center gap-2">
-              {onReply ? (
-                <Button variant="ghost" size="sm" onClick={() => onReply(reply.id)}>
+              {onReply && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onReply(reply.id)}
+                  className="h-8 gap-1.5 rounded-none font-mono text-xs hover:bg-primary/10 hover:text-primary"
+                >
+                  <Reply className="h-3.5 w-3.5" />
                   Reply
                 </Button>
-              ) : null}
+              )}
               <DiscussionReportButton discussionId={reply.id} />
             </div>
           </div>
         </div>
       </div>
       {reply.replies && reply.replies.length > 0 ? (
-        <div className="mt-3 space-y-3 border-l border-border/40 pl-4">
+        <div className="mt-4 space-y-4 border-l-2 border-border/40 pl-4">
           {reply.replies.map((child) => (
             <DiscussionReplyItem key={child.id} reply={child} onReply={onReply} />
           ))}

From 71be88eadaa31e35fa9ce902b1b9cdce96a97f76 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Wed, 14 Aug 2024 16:45:00 +0430
Subject: [PATCH 02/21] refactor: update discussion thread and panel components

---
 .../discussions/discussion-thread-card.tsx    |  85 +++++---
 .../discussions/global-discussions-client.tsx | 188 +++++++++++-------
 .../discussions/problem-discussion-panel.tsx  |  34 ++--
 3 files changed, 189 insertions(+), 118 deletions(-)

diff --git a/components/discussions/discussion-thread-card.tsx b/components/discussions/discussion-thread-card.tsx
index 7c3dd2f..93518ad 100644
--- a/components/discussions/discussion-thread-card.tsx
+++ b/components/discussions/discussion-thread-card.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
 import { useCallback, type KeyboardEvent, type MouseEvent } from "react";
+
+import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
+import { MessageSquare, User } from "@/components/icons";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import type { DiscussionThread } from "@/lib/discussions/types";
-import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
 import { cn } from "@/lib/utils";
-import { formatDistanceToNow } from "date-fns";
-import { MessageSquare } from "@/components/icons";
+import type { DiscussionThread } from "@/lib/discussions/types";
 
 type DiscussionThreadCardProps = {
   thread: DiscussionThread;
@@ -48,13 +49,14 @@ export function DiscussionThreadCard({
       handleSelect();
     }
   };
+
   return (
     <article
       className={cn(
-        "group rounded-2xl border border-border/60 bg-card/80 p-4 transition hover:border-primary/40 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1",
-        active && "border-primary/60 bg-primary/5",
+        "group border-2 border-border bg-background p-4 transition-all hover:border-primary/50 hover:bg-accent",
+        active && "border-primary bg-primary/5",
         selectable &&
-          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary/60",
+          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
       )}
       role={selectable ? "button" : undefined}
       tabIndex={selectable ? 0 : undefined}
@@ -62,53 +64,76 @@ export function DiscussionThreadCard({
       onClick={handleCardClick}
       onKeyDown={handleKeyDown}
     >
-      <div className="flex items-start gap-3">
-        <Avatar className="h-9 w-9">
-          <AvatarFallback>{thread.author.handle.slice(0, 2).toUpperCase()}</AvatarFallback>
+      <div className="flex items-start gap-4">
+        <Avatar className="h-10 w-10 rounded-none border border-border">
+          <AvatarFallback className="rounded-none bg-primary/10 font-mono text-xs font-bold uppercase text-primary">
+            <User className="h-4 w-4" />
+          </AvatarFallback>
         </Avatar>
-        <div className="flex-1 space-y-2">
-          <div className="flex items-center gap-2">
-            <p className="text-sm font-medium">@{thread.author.handle}</p>
-            <span className="text-xs text-muted-foreground">{meta}</span>
-            {thread.category ? (
-              <Badge variant="outline" className="ml-auto text-xs capitalize">
+
+        <div className="flex-1 space-y-3">
+          <div className="flex flex-wrap items-center gap-2 font-mono text-xs text-muted-foreground">
+            <span className="font-bold text-foreground">@{thread.author.handle}</span>
+            <span>{meta}</span>
+            {thread.category && (
+              <Badge
+                variant="outline"
+                className="ml-auto rounded-none border font-mono text-[10px] font-bold uppercase"
+              >
                 {thread.category.toLowerCase()}
               </Badge>
-            ) : null}
+            )}
           </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <h3 className="flex-1 text-base font-semibold leading-tight text-foreground line-clamp-2">
+
+          <div className="space-y-2">
+            <h3 className="font-mono text-base font-bold leading-tight line-clamp-2">
               {thread.title ?? "Discussion"}
             </h3>
-            {thread.problem ? (
-              <Badge variant="outline" className="text-[11px]">
+            {thread.problem && (
+              <Badge
+                variant="outline"
+                className="rounded-none border font-mono text-[11px] uppercase"
+              >
                 {thread.problem.title} · {thread.problem.difficulty ?? "Unrated"}
               </Badge>
-            ) : null}
+            )}
           </div>
-          <p className="text-sm text-muted-foreground line-clamp-3">{thread.content}</p>
+
+          <p className="font-mono text-sm text-muted-foreground line-clamp-3">{thread.content}</p>
         </div>
       </div>
-      <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+
+      <div className="mt-4 flex items-center justify-between border-t border-border pt-4">
         <DiscussionVoteToggle
           discussionId={thread.id}
           initialScore={thread.score}
           initialVote={(thread.viewer?.vote ?? 0) as -1 | 0 | 1}
           size="sm"
         />
-        <div className="flex items-center gap-3">
-          <span className="inline-flex items-center gap-1 text-sm">
-            <MessageSquare className="h-4 w-4" />
+        <div className="flex items-center gap-4">
+          <span className="inline-flex items-center gap-1.5 font-mono text-xs text-muted-foreground">
+            <MessageSquare className="h-3.5 w-3.5" />
             {thread.replyCount}
           </span>
           {href ? (
-            <Button asChild size="sm" variant="ghost">
+            <Button
+              asChild
+              size="sm"
+              variant="ghost"
+              className="h-8 rounded-none font-mono text-xs hover:bg-primary/10 hover:text-primary"
+            >
               <Link href={href} onClick={handleSelect}>
                 Open
               </Link>
             </Button>
           ) : (
-            <Button size="sm" variant="ghost" type="button" onClick={handleSelect}>
+            <Button
+              size="sm"
+              variant="ghost"
+              type="button"
+              onClick={handleSelect}
+              className="h-8 rounded-none font-mono text-xs hover:bg-primary/10 hover:text-primary"
+            >
               Open
             </Button>
           )}
diff --git a/components/discussions/global-discussions-client.tsx b/components/discussions/global-discussions-client.tsx
index f5b5d13..3ebac9b 100644
--- a/components/discussions/global-discussions-client.tsx
+++ b/components/discussions/global-discussions-client.tsx
@@ -1,10 +1,13 @@
 "use client";
 
+import { parseAsStringLiteral, useQueryState } from "nuqs";
+import { useMemo } from "react";
+
 import { DiscussionComposer } from "@/components/discussions/discussion-composer";
 import { DiscussionThreadCard } from "@/components/discussions/discussion-thread-card";
+import { AlertTriangle, Filter, LoaderCircle, XIcon } from "@/components/icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -13,28 +16,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { discussionsConfig } from "@/config/discussions";
 import { trpc } from "@/lib/trpc/client";
-import { Filter, LoaderCircle } from "@/components/icons";
-import { parseAsStringLiteral, useQueryState } from "nuqs";
-import { useMemo } from "react";
 
 type GlobalDiscussionsClientProps = {
   tagOptions: Array<{ slug: string; name: string }>;
   difficultyOptions: string[];
 };
 
-const tabOptions = [
-  { value: "trending", label: "Trending" },
-  { value: "latest", label: "Latest" },
-  { value: "help", label: "Help" },
-  { value: "meta", label: "Meta" },
-];
-
 export function GlobalDiscussionsClient({
   tagOptions,
   difficultyOptions,
 }: GlobalDiscussionsClientProps) {
+  const { global } = discussionsConfig;
+
   const [tab, setTab] = useQueryState(
     "tab",
     parseAsStringLiteral(["trending", "latest", "help", "meta"]).withDefault("trending"),
@@ -80,20 +75,26 @@ export function GlobalDiscussionsClient({
     setDifficultyParam(null);
   };
 
+  const hasActiveFilters = selectedTags.length > 0 || selectedDifficulty.length > 0;
+
   return (
-    <div className="space-y-8">
-      <section className="premium-card space-y-5 rounded-2xl p-8">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="space-y-1">
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Start a Topic
-            </p>
-            <h2 className="text-2xl font-semibold">Community Discussions</h2>
+    <div className="space-y-6">
+      <section className="border-2 border-border bg-background p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="font-mono text-xs font-bold uppercase tracking-wider text-primary/80">
+            [01] {global.composer.title}
           </div>
-          <Button variant="ghost" size="sm" className="gap-2 rounded-xl" onClick={resetFilters}>
-            <Filter className="h-4 w-4" />
-            Reset Filters
-          </Button>
+          {hasActiveFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={resetFilters}
+              className="h-8 gap-2 rounded-none border border-border font-mono text-xs hover:border-primary/50 hover:bg-accent"
+            >
+              <XIcon className="h-3.5 w-3.5" />
+              {global.filters.reset}
+            </Button>
+          )}
         </div>
         <DiscussionComposer
           mode="thread"
@@ -102,111 +103,155 @@ export function GlobalDiscussionsClient({
         />
       </section>
 
-      <section className="space-y-5">
-        <Tabs
-          value={tab}
-          onValueChange={(value) => setTab(value as "trending" | "latest" | "help" | "meta")}
-        >
-          <TabsList className="grid w-full grid-cols-4 rounded-xl">
-            {tabOptions.map((option) => (
-              <TabsTrigger key={option.value} value={option.value} className="rounded-lg">
-                {option.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+      <section className="space-y-4">
+        <div className="flex items-center justify-between border-2 border-border bg-background p-4">
+          <div className="font-mono text-xs font-bold uppercase tracking-wider text-primary/80">
+            [02] Filter discussions
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-px border-2 border-border bg-border sm:grid-cols-4">
+          {global.tabs.map((tabOption) => (
+            <button
+              key={tabOption.value}
+              onClick={() => setTab(tabOption.value as typeof tab)}
+              className={`border-none bg-background p-4 font-mono text-sm font-bold uppercase tracking-wide transition-colors hover:bg-accent ${
+                tab === tabOption.value
+                  ? "bg-primary/5 text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {tabOption.label}
+            </button>
+          ))}
+        </div>
+
         <div className="flex flex-wrap items-center gap-3">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm" className="gap-2 rounded-xl">
-                <Filter className="h-4 w-4" /> Tags
-                {selectedTags.length > 0 ? (
-                  <Badge variant="secondary" className="ml-1 h-5 rounded-full px-1.5 text-[10px]">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 gap-2 rounded-none border-2 border-border font-mono text-xs hover:border-primary/50"
+              >
+                <Filter className="h-3.5 w-3.5" />
+                {global.filters.tags}
+                {selectedTags.length > 0 && (
+                  <Badge
+                    variant="secondary"
+                    className="ml-1 rounded-none border border-primary/30 bg-primary/10 px-1.5 font-mono text-[10px] font-bold text-primary"
+                  >
                     {selectedTags.length}
                   </Badge>
-                ) : null}
+                )}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56">
-              <DropdownMenuLabel>Popular Tags</DropdownMenuLabel>
+            <DropdownMenuContent className="w-56 rounded-none border-2 border-border">
+              <DropdownMenuLabel className="font-mono text-xs font-bold uppercase">
+                Popular Tags
+              </DropdownMenuLabel>
               <DropdownMenuSeparator />
               {tagOptions.slice(0, 12).map((tag) => (
                 <DropdownMenuCheckboxItem
                   key={tag.slug}
                   checked={selectedTags.includes(tag.slug)}
                   onCheckedChange={() => toggleTag(tag.slug)}
+                  className="font-mono text-xs"
                 >
                   {tag.name}
                 </DropdownMenuCheckboxItem>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
+
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm" className="rounded-xl">
-                Difficulty
-                {selectedDifficulty.length > 0 ? (
-                  <Badge variant="secondary" className="ml-2 h-5 rounded-full px-1.5 text-[10px]">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 rounded-none border-2 border-border font-mono text-xs hover:border-primary/50"
+              >
+                {global.filters.difficulty}
+                {selectedDifficulty.length > 0 && (
+                  <Badge
+                    variant="secondary"
+                    className="ml-2 rounded-none border border-primary/30 bg-primary/10 px-1.5 font-mono text-[10px] font-bold text-primary"
+                  >
                     {selectedDifficulty.length}
                   </Badge>
-                ) : null}
+                )}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuLabel>Difficulty</DropdownMenuLabel>
+            <DropdownMenuContent className="rounded-none border-2 border-border">
+              <DropdownMenuLabel className="font-mono text-xs font-bold uppercase">
+                Difficulty
+              </DropdownMenuLabel>
               <DropdownMenuSeparator />
               {difficultyOptions.map((difficulty) => (
                 <DropdownMenuCheckboxItem
                   key={difficulty}
                   checked={selectedDifficulty.includes(difficulty)}
                   onCheckedChange={() => toggleDifficulty(difficulty)}
+                  className="font-mono text-xs"
                 >
                   {difficulty}
                 </DropdownMenuCheckboxItem>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
+
           {selectedTags.map((slug) => (
             <Badge
               key={slug}
               variant="secondary"
-              className="cursor-pointer rounded-full"
               onClick={() => toggleTag(slug)}
+              className="cursor-pointer rounded-none border border-border bg-background font-mono text-xs hover:border-destructive hover:bg-destructive/5"
             >
               #{slug}
+              <XIcon className="ml-1 h-3 w-3" />
             </Badge>
           ))}
           {selectedDifficulty.map((value) => (
             <Badge
               key={value}
               variant="outline"
-              className="cursor-pointer rounded-full"
               onClick={() => toggleDifficulty(value)}
+              className="cursor-pointer rounded-none border-2 border-border font-mono text-xs hover:border-destructive hover:bg-destructive/5"
             >
               {value}
+              <XIcon className="ml-1 h-3 w-3" />
             </Badge>
           ))}
         </div>
       </section>
 
       {listQuery.isLoading ? (
-        <div className="premium-card flex items-center justify-center rounded-2xl p-16 text-sm text-muted-foreground">
-          <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> Loading discussions…
+        <div className="flex items-center justify-center border-2 border-border bg-background p-16 font-mono text-sm text-muted-foreground">
+          <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+          Loading discussions...
         </div>
       ) : listQuery.isError ? (
-        <Alert variant="destructive">
-          <AlertTitle>Failed to load discussions</AlertTitle>
-          <AlertDescription className="flex flex-col gap-2">
+        <div className="border-2 border-destructive/50 bg-destructive/5 p-6">
+          <div className="mb-2 flex items-center gap-2 font-mono text-sm font-bold text-destructive">
+            <AlertTriangle className="h-4 w-4" />
+            Failed to load discussions
+          </div>
+          <p className="mb-4 font-mono text-xs text-muted-foreground">
             {listQuery.error?.message ?? "Please refresh and try again."}
-            <Button size="sm" onClick={() => listQuery.refetch()}>
-              Retry
-            </Button>
-          </AlertDescription>
-        </Alert>
+          </p>
+          <Button
+            onClick={() => listQuery.refetch()}
+            className="h-9 rounded-none border-2 border-primary bg-primary font-mono text-xs font-bold"
+          >
+            Retry
+          </Button>
+        </div>
       ) : threads.length === 0 ? (
-        <div className="rounded-2xl border-2 border-dashed border-border/60 bg-muted/10 p-16 text-center">
-          <p className="text-sm font-medium text-muted-foreground">No discussions yet</p>
-          <p className="mt-1 text-xs text-muted-foreground">Start the conversation above</p>
+        <div className="border-2 border-dashed border-border bg-background p-16 text-center">
+          <p className="mb-2 font-mono text-sm font-bold text-muted-foreground">
+            {global.empty.headline}
+          </p>
+          <p className="font-mono text-xs text-muted-foreground">{global.empty.description}</p>
         </div>
       ) : (
         <div className="space-y-4">
@@ -216,22 +261,23 @@ export function GlobalDiscussionsClient({
               : `/discuss/${thread.id}`;
             return <DiscussionThreadCard key={thread.id} thread={thread} href={href} />;
           })}
-          {listQuery.hasNextPage ? (
+          {listQuery.hasNextPage && (
             <Button
-              className="w-full rounded-xl"
               variant="outline"
               disabled={listQuery.isFetchingNextPage}
               onClick={() => listQuery.fetchNextPage()}
+              className="h-11 w-full rounded-none border-2 border-border font-mono text-sm font-bold uppercase hover:border-primary/50"
             >
               {listQuery.isFetchingNextPage ? (
                 <>
-                  <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> Loading…
+                  <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+                  Loading...
                 </>
               ) : (
-                "Load More"
+                "Load more discussions"
               )}
             </Button>
-          ) : null}
+          )}
         </div>
       )}
     </div>
diff --git a/components/discussions/problem-discussion-panel.tsx b/components/discussions/problem-discussion-panel.tsx
index 49bfa9c..437e85d 100644
--- a/components/discussions/problem-discussion-panel.tsx
+++ b/components/discussions/problem-discussion-panel.tsx
@@ -1,21 +1,21 @@
 "use client";
-import { trpc } from "@/lib/trpc/client";
-import type { DiscussionSort } from "@/lib/discussions/types";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { DiscussionThreadCard } from "@/components/discussions/discussion-thread-card";
-import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
-import { SpoilerBlock } from "@/components/discussions/spoiler-block";
 import { DiscussionComposer } from "@/components/discussions/discussion-composer";
 import { DiscussionReplyItem } from "@/components/discussions/discussion-reply";
 import { DiscussionReportButton } from "@/components/discussions/discussion-report-button";
+import { DiscussionThreadCard } from "@/components/discussions/discussion-thread-card";
+import { DiscussionVoteToggle } from "@/components/discussions/discussion-vote-toggle";
+import { SpoilerBlock } from "@/components/discussions/spoiler-block";
+import { LoaderCircle, Plus } from "@/components/icons";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { DiscussionSort } from "@/lib/discussions/types";
+import { trpc } from "@/lib/trpc/client";
 import { formatDistanceToNow } from "date-fns";
-import { useMemo } from "react";
-import { useQueryState, parseAsStringLiteral } from "nuqs";
 import Link from "next/link";
-import { LoaderCircle, Plus } from "@/components/icons";
+import { parseAsStringLiteral, useQueryState } from "nuqs";
+import { useMemo } from "react";
 
 const cuidRegex = /^c[0-9a-z]{24}$/i;
 const isCuidLike = (value?: string | null) =>
@@ -77,7 +77,7 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
   const threadVote = (thread?.viewer?.vote ?? 0) as -1 | 0 | 1;
   if (listQuery.isLoading) {
     return (
-      <div className="flex items-center justify-center rounded-3xl border border-border/60 bg-card/70 p-10 text-sm text-muted-foreground">
+      <div className="flex items-center justify-center border border-border/60 bg-card/70 p-10 text-sm text-muted-foreground">
         <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> Loading discussions…
       </div>
     );
@@ -85,7 +85,7 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
 
   return (
     <div className="space-y-6">
-      <div className="rounded-3xl border border-border/70 bg-card/80 p-6">
+      <div className="border border-border/70 bg-card/80 p-6">
         <DiscussionComposer
           mode="thread"
           problemId={problem.id}
@@ -143,7 +143,7 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
         </section>
 
         <section className="space-y-4">
-          <div className="rounded-3xl border border-border/70 bg-card/80 p-6">
+          <div className="border border-border/70 bg-card/80 p-6">
             <div className="flex items-start justify-between gap-4">
               <div>
                 <p className="text-xs uppercase text-muted-foreground">Discussion</p>
@@ -198,7 +198,7 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
             <h3 className="text-sm font-semibold uppercase text-muted-foreground">Replies</h3>
             {thread ? (
               replies.length === 0 ? (
-                <p className="rounded-2xl border border-dashed border-border/60 p-4 text-sm text-muted-foreground">
+                <p className="border border-dashed border-border/60 p-4 text-sm text-muted-foreground">
                   Be the first to reply.
                 </p>
               ) : (
@@ -219,12 +219,12 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
                 </div>
               )
             ) : (
-              <p className="rounded-2xl border border-dashed border-border/60 p-4 text-sm text-muted-foreground">
+              <p className="border border-dashed border-border/60 p-4 text-sm text-muted-foreground">
                 Select a thread to view replies.
               </p>
             )}
             {thread ? (
-              <div className="rounded-2xl border border-border/60 bg-card/70 p-4">
+              <div className="border border-border/60 bg-card/70 p-4">
                 <DiscussionComposer
                   mode="reply"
                   threadId={thread.id}
@@ -236,7 +236,7 @@ export function ProblemDiscussionPanel({ problem }: ProblemDiscussionPanelProps)
           </div>
         </section>
 
-        <section className="space-y-4 rounded-3xl border border-border/70 bg-card/60 p-6">
+        <section className="space-y-4 border border-border/70 bg-card/60 p-6">
           <div>
             <p className="text-xs uppercase text-muted-foreground">Problem</p>
             <h3 className="text-base font-semibold">{problem.title}</h3>

From 18891aa7c0758adfd7e188c4eee19b7ba466cab8 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Thu, 15 Aug 2024 15:30:00 +0430
Subject: [PATCH 03/21] config: add discussions configuration file

---
 config/discussions.ts | 75 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 config/discussions.ts

diff --git a/config/discussions.ts b/config/discussions.ts
new file mode 100644
index 0000000..b80cc7d
--- /dev/null
+++ b/config/discussions.ts
@@ -0,0 +1,75 @@
+export const discussionsConfig = {
+  global: {
+    badge: "COMMUNITY HUB",
+    headline: {
+      line1: "GLOBAL",
+      line2: "DISCUSSIONS",
+    },
+    description:
+      "Share insights, request help, discuss platform strategy. All conversations are indexed and searchable for competitive programming knowledge base.",
+    composer: {
+      title: "Start a discussion",
+      helper: "Ask questions, share solutions, or discuss meta topics",
+    },
+    tabs: [
+      { value: "trending", label: "Trending", description: "Most active discussions" },
+      { value: "latest", label: "Latest", description: "Recently created threads" },
+      { value: "help", label: "Help", description: "Questions seeking assistance" },
+      { value: "meta", label: "Meta", description: "Platform and community discussion" },
+    ],
+    filters: {
+      tags: "Filter by tags",
+      difficulty: "Filter by difficulty",
+      reset: "Reset filters",
+    },
+    empty: {
+      headline: "No discussions yet",
+      description: "Be the first to start a conversation",
+      action: "Create thread",
+    },
+  },
+  thread: {
+    badge: "DISCUSSION THREAD",
+    meta: {
+      replies: "replies",
+      views: "views",
+      created: "created",
+    },
+    actions: {
+      vote: "Vote",
+      reply: "Reply",
+      report: "Report",
+      viewProblem: "View in problem context",
+    },
+    composer: {
+      thread: {
+        title: "Thread title",
+        content: "Share your question or insight",
+        spoiler: "Mark as spoiler",
+        category: "Category",
+        submit: "Start discussion",
+      },
+      reply: {
+        content: "Add a reply",
+        spoiler: "Mark as spoiler",
+        submit: "Post reply",
+      },
+    },
+    empty: {
+      replies: "No replies yet",
+      description: "Be the first to reply",
+    },
+    auth: {
+      headline: "Sign in to join discussions",
+      description: "Create an account or sign in to participate in community discussions",
+      action: "Sign in",
+    },
+  },
+  categories: [
+    { value: "trending", label: "General", description: "General discussion topics" },
+    { value: "help", label: "Help", description: "Request assistance" },
+    { value: "meta", label: "Meta", description: "Platform discussion" },
+  ],
+};
+
+export type DiscussionsConfig = typeof discussionsConfig;

From 347f00bcd9707ae409ec1af659dab94329c6cc18 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Fri, 16 Aug 2024 09:45:00 +0430
Subject: [PATCH 04/21] refactor: redesign problem library and filters with
 monospace typography

---
 components/problems/problem-filters-panel.tsx |  44 +++----
 components/problems/problem-library-page.tsx  |   3 +
 components/problems/problem-library.tsx       | 116 ++++++++++--------
 3 files changed, 91 insertions(+), 72 deletions(-)

diff --git a/components/problems/problem-filters-panel.tsx b/components/problems/problem-filters-panel.tsx
index c0da34f..abb95bd 100644
--- a/components/problems/problem-filters-panel.tsx
+++ b/components/problems/problem-filters-panel.tsx
@@ -1,17 +1,17 @@
 "use client";
 
-import { useMemo, useState, type ReactNode } from "react";
-import type { ProblemFilterMetadata, ProblemFiltersInput } from "@/lib/trpc/router/problems";
-import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { PROBLEM_STATUS_FILTERS } from "@/lib/problems/constants";
+import type { ProblemFilterMetadata, ProblemFiltersInput } from "@/lib/trpc/router/problems";
+import { cn } from "@/lib/utils";
 import { Tick02Icon } from "hugeicons-react";
+import { useMemo, useState, type ReactNode } from "react";
 
 const DIFFICULTY_FALLBACK: ProblemFiltersInput["difficulty"] = ["EASY", "MEDIUM", "HARD"];
 
@@ -88,12 +88,12 @@ export function ProblemFiltersPanel({
   return (
     <div className="space-y-5">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold">Filters</h3>
+        <h3 className="font-mono text-sm font-semibold">Filters</h3>
         <Button
           variant="ghost"
           size="sm"
           onClick={onReset}
-          className="text-xs"
+          className="rounded-none font-mono text-xs"
           disabled={!hasActiveFilters}
         >
           Clear all
@@ -105,7 +105,7 @@ export function ProblemFiltersPanel({
           <Button
             variant={difficultyValue ? "outline" : "default"}
             size="sm"
-            className="justify-start"
+            className="justify-start rounded-none border-2 font-mono"
             onClick={() => toggleDifficulty(null)}
           >
             Any difficulty
@@ -115,7 +115,7 @@ export function ProblemFiltersPanel({
               key={difficulty}
               variant={difficultyValue === difficulty ? "default" : "outline"}
               size="sm"
-              className="justify-start"
+              className="justify-start rounded-none border-2 font-mono"
               onClick={() => toggleDifficulty(difficulty)}
             >
               {difficulty.charAt(0) + difficulty.slice(1).toLowerCase()}
@@ -142,7 +142,7 @@ export function ProblemFiltersPanel({
                   type="button"
                   onClick={() => toggleStatus(status)}
                   className={cn(
-                    "inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium transition-all hover:scale-105",
+                    "inline-flex items-center rounded-none border-2 px-3 py-1.5 font-mono text-xs font-medium transition-all hover:bg-accent",
                     active
                       ? statusTone[status]
                       : "border-border bg-background text-muted-foreground hover:bg-muted",
@@ -155,7 +155,7 @@ export function ProblemFiltersPanel({
             })}
           </div>
         ) : (
-          <p className="rounded-xl border border-dashed border-border/70 bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
+          <p className="rounded-none border border-dashed border-border/70 bg-muted/20 px-4 py-3 font-mono text-xs text-muted-foreground">
             Create a free account or sign in from the reader to use progress filters.
           </p>
         )}
@@ -167,17 +167,17 @@ export function ProblemFiltersPanel({
             placeholder="Search tags"
             value={tagQuery}
             onChange={(event) => setTagQuery(event.target.value)}
-            className="h-9"
+            className="h-9 rounded-none border-2 font-mono"
           />
-          <ScrollArea className="h-60 rounded-lg border">
+          <ScrollArea className="h-60 rounded-none border-2 border-border">
             <div className="space-y-1 p-2">
               {filteredTags.length === 0 ? (
-                <p className="text-xs text-muted-foreground">No tags found.</p>
+                <p className="font-mono text-xs text-muted-foreground">No tags found.</p>
               ) : (
                 filteredTags.map((tag) => (
                   <label
                     key={tag.slug}
-                    className="flex cursor-pointer items-center justify-between rounded-md px-2 py-1 text-sm hover:bg-muted"
+                    className="flex cursor-pointer items-center justify-between rounded-none px-2 py-1 font-mono text-sm hover:bg-muted"
                   >
                     <div className="flex items-center gap-2">
                       <Checkbox
@@ -194,7 +194,7 @@ export function ProblemFiltersPanel({
             </div>
           </ScrollArea>
           {filters.tags.length > 0 ? (
-            <Badge variant="secondary" className="rounded-full text-[11px]">
+            <Badge variant="secondary" className="rounded-none border font-mono text-[11px]">
               {filters.tags.length} selected
             </Badge>
           ) : null}
@@ -202,10 +202,10 @@ export function ProblemFiltersPanel({
       </FilterCard>
 
       <FilterCard title="Editorials" description="Show only problems with official editorials.">
-        <div className="flex items-center justify-between gap-3 rounded-xl border border-dashed border-border bg-muted/30 px-4 py-3">
+        <div className="flex items-center justify-between gap-3 rounded-none border border-dashed border-border bg-muted/30 px-4 py-3">
           <div className="flex-1">
-            <p className="text-sm font-medium">Only problems with editorials</p>
-            <p className="text-xs text-muted-foreground">Curated solutions included</p>
+            <p className="font-mono text-sm font-medium">Only problems with editorials</p>
+            <p className="font-mono text-xs text-muted-foreground">Curated solutions included</p>
           </div>
           <Switch
             checked={filters.onlyWithEditorial}
@@ -216,7 +216,7 @@ export function ProblemFiltersPanel({
       </FilterCard>
 
       <Separator />
-      <Button variant="outline" onClick={onReset} className="w-full" disabled={!hasActiveFilters}>
+      <Button variant="outline" onClick={onReset} className="w-full rounded-none border-2 font-mono" disabled={!hasActiveFilters}>
         Reset filters
       </Button>
     </div>
@@ -235,9 +235,9 @@ function FilterCard({
   return (
     <section className="space-y-3">
       <div className="space-y-1">
-        <p className="text-sm font-semibold text-foreground">{title}</p>
+        <p className="font-mono text-sm font-semibold text-foreground">{title}</p>
         {description ? (
-          <p className="text-xs leading-relaxed text-muted-foreground">{description}</p>
+          <p className="font-mono text-xs leading-relaxed text-muted-foreground">{description}</p>
         ) : null}
       </div>
       <div className="space-y-2">{children}</div>
diff --git a/components/problems/problem-library-page.tsx b/components/problems/problem-library-page.tsx
index 69e4930..b78823e 100644
--- a/components/problems/problem-library-page.tsx
+++ b/components/problems/problem-library-page.tsx
@@ -12,6 +12,7 @@ type RenderProblemLibraryOptions = {
   searchParams: Record<string, string | string[] | undefined>;
   viewerHasSession?: boolean;
   problemBasePath?: string;
+  tagSlug?: string;
 };
 
 export async function resolveViewerSessionFlag() {
@@ -23,6 +24,7 @@ export async function renderProblemLibraryPage({
   searchParams,
   viewerHasSession = false,
   problemBasePath,
+  tagSlug,
 }: RenderProblemLibraryOptions) {
   const filters = (await problemSearchParams.parse(searchParams)) as ProblemFiltersInput;
   const state = await buildHydrationState([
@@ -51,6 +53,7 @@ export async function renderProblemLibraryPage({
         initialFilters={filters}
         viewerHasSession={viewerHasSession}
         problemBasePath={problemBasePath}
+        tagSlug={tagSlug}
       />
     </HydrationBoundary>
   );
diff --git a/components/problems/problem-library.tsx b/components/problems/problem-library.tsx
index c1474fc..2dc7193 100644
--- a/components/problems/problem-library.tsx
+++ b/components/problems/problem-library.tsx
@@ -2,9 +2,9 @@
 
 import { ProblemFiltersPanel } from "@/components/problems/problem-filters-panel";
 import { ProblemStatusBadge } from "@/components/problems/problem-status-badge";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   Drawer,
   DrawerClose,
@@ -27,8 +27,8 @@ import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useProblemFilters } from "@/hooks/use-problem-filters";
-import { publicContentQueryOptions } from "@/lib/react-query/policies";
 import { trackAnalyticsEvent } from "@/lib/analytics/client";
+import { publicContentQueryOptions } from "@/lib/react-query/policies";
 import { trpc } from "@/lib/trpc/client";
 import type {
   ProblemFiltersInput,
@@ -41,11 +41,11 @@ import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import { formatDistanceToNow } from "date-fns";
 import {
   ArrowRight01Icon,
-  Search01Icon,
+  Cancel01Icon,
+  Clock01Icon,
   FilterIcon,
+  Search01Icon,
   SlidersHorizontalIcon,
-  Clock01Icon,
-  Cancel01Icon,
 } from "hugeicons-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -90,12 +90,14 @@ type ProblemLibraryShellProps = {
   initialFilters: ProblemFiltersInput;
   viewerHasSession?: boolean;
   problemBasePath?: string;
+  tagSlug?: string;
 };
 
 export function ProblemLibraryShell({
   initialFilters,
   viewerHasSession = false,
   problemBasePath = "/problems",
+  tagSlug,
 }: ProblemLibraryShellProps) {
   const router = useRouter();
   const utils = trpc.useUtils();
@@ -316,13 +318,25 @@ export function ProblemLibraryShell({
       <div className="space-y-8">
         <header className="space-y-6">
           <div className="space-y-3">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Problem Library
-            </p>
-            <h1 className="text-4xl font-bold tracking-tight lg:text-5xl">Browse Problems</h1>
-            <p className="max-w-2xl text-base text-muted-foreground">
-              Explore our curated collection of coding challenges across various topics and
-              difficulty levels
+            <div className="inline-flex items-center gap-2 border-2 border-primary/50 px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.08em] text-primary">
+              {tagSlug ? `#${tagSlug}` : "LIBRARY"}
+            </div>
+            <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-4xl font-black leading-tight text-transparent sm:text-5xl lg:text-6xl">
+              {tagSlug ? (
+                <>
+                  Problems tagged{" "}
+                  <span className="bg-linear-to-r from-primary to-primary/70 bg-clip-text">
+                    #{tagSlug}
+                  </span>
+                </>
+              ) : (
+                "Problem Library"
+              )}
+            </h1>
+            <p className="max-w-2xl font-mono text-base text-muted-foreground">
+              {tagSlug
+                ? `Browse public problems filtered by the #${tagSlug} tag.`
+                : "Browse algorithmic challenges with tags, difficulty filters, and fast search."}
             </p>
           </div>
 
@@ -337,17 +351,17 @@ export function ProblemLibraryShell({
                 onChange={(event) => setSearchValue(event.target.value)}
                 placeholder="Search problems by title or description..."
                 aria-label="Search problems"
-                className="h-12 rounded-xl pl-11 pr-24 text-base transition-all focus:shadow-lg focus:shadow-primary/5"
+                className="h-12 rounded-none border-2 border-border pl-11 pr-24 font-mono text-base transition-all focus:border-primary"
               />
               <span
-                className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-muted px-2 py-1 text-xs font-medium text-muted-foreground"
+                className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 rounded-none border border-border bg-muted px-2 py-1 font-mono text-xs font-medium text-muted-foreground"
                 aria-live="polite"
               >
                 {results?.total ?? 0} results
               </span>
             </div>
             <div className="flex items-center gap-3">
-              <Label htmlFor="sort" className="text-sm text-muted-foreground">
+              <Label htmlFor="sort" className="font-mono text-sm text-muted-foreground">
                 Sort
               </Label>
               <Select
@@ -356,10 +370,10 @@ export function ProblemLibraryShell({
                   handleFilterChange({ sort: value as ProblemFiltersInput["sort"] })
                 }
               >
-                <SelectTrigger id="sort" className="w-[170px] rounded-xl focus-ring">
+                <SelectTrigger id="sort" className="w-[170px] rounded-none border-2 border-border font-mono text-sm">
                   <SelectValue placeholder="Sort" />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent className="rounded-none border-2 border-border font-mono">
                   {Object.entries(SORT_LABELS).map(([value, label]) => (
                     <SelectItem key={value} value={value}>
                       {label}
@@ -369,21 +383,21 @@ export function ProblemLibraryShell({
               </Select>
               <Drawer open={filtersOpen} onOpenChange={setFiltersOpen} direction="bottom">
                 <DrawerTrigger asChild>
-                  <Button variant="outline" size="sm" className="gap-2 rounded-xl lg:hidden">
+                  <Button variant="outline" size="sm" className="gap-2 rounded-none border-2 border-border font-mono text-sm lg:hidden">
                     <FilterIcon className="h-4 w-4" strokeWidth={2} /> Filters
                     {hasActiveFilters && (
                       <Badge
                         variant="secondary"
-                        className="ml-1 h-5 rounded-full px-1.5 text-[10px] font-semibold"
+                        className="ml-1 h-5 rounded-none border px-1.5 font-mono text-[10px] font-semibold"
                       >
                         {activeFilterCount}
                       </Badge>
                     )}
                   </Button>
                 </DrawerTrigger>
-                <DrawerContent className="h-[88vh] rounded-t-3xl border-t bg-background p-1 pb-4">
+                <DrawerContent className="h-[88vh] rounded-none border-t-2 border-border bg-background p-1 pb-4">
                   <DrawerHeader className="pb-2">
-                    <DrawerTitle className="flex items-center justify-center gap-2 text-base">
+                    <DrawerTitle className="flex items-center justify-center gap-2 font-mono text-base">
                       <SlidersHorizontalIcon className="h-4 w-4" strokeWidth={2} /> Filters
                     </DrawerTitle>
                   </DrawerHeader>
@@ -398,11 +412,11 @@ export function ProblemLibraryShell({
                     />
                   </div>
                   <DrawerFooter className="border-t bg-background px-5">
-                    <Button variant="ghost" onClick={handleClearAll} disabled={!hasActiveFilters}>
+                    <Button variant="ghost" onClick={handleClearAll} disabled={!hasActiveFilters} className="rounded-none font-mono">
                       Reset
                     </Button>
                     <DrawerClose asChild>
-                      <Button>Done</Button>
+                      <Button className="rounded-none font-mono">Done</Button>
                     </DrawerClose>
                   </DrawerFooter>
                 </DrawerContent>
@@ -412,15 +426,15 @@ export function ProblemLibraryShell({
         </header>
 
         {listQuery.isError ? (
-          <Alert variant="destructive">
-            <AlertTitle>Unable to load problems</AlertTitle>
-            <AlertDescription>
+          <Alert variant="destructive" className="rounded-none border-2 font-mono">
+            <AlertTitle className="font-mono font-bold">Unable to load problems</AlertTitle>
+            <AlertDescription className="font-mono">
               {listQuery.error?.message ?? "Something went wrong while loading the library."}
             </AlertDescription>
             <Button
               variant="outline"
               size="sm"
-              className="mt-3"
+              className="mt-3 rounded-none border-2 font-mono"
               onClick={() => listQuery.refetch()}
             >
               Retry
@@ -430,7 +444,7 @@ export function ProblemLibraryShell({
 
         <div className="grid gap-6 lg:grid-cols-[280px_1fr]">
           <aside
-            className="hidden rounded-2xl border border-border/50 bg-card/80 p-4 shadow-sm backdrop-blur-sm lg:block"
+            className="hidden border-2 border-border bg-background p-4 lg:block"
             aria-label="Filter panel"
           >
             <ProblemFiltersPanel
@@ -443,9 +457,9 @@ export function ProblemLibraryShell({
           </aside>
           <section className="space-y-4" aria-live={isPending ? "polite" : "off"}>
             {statusFilterBlocked ? (
-              <Alert>
-                <AlertTitle>Sign in to use status filters</AlertTitle>
-                <AlertDescription>
+              <Alert className="rounded-none border-2 font-mono">
+                <AlertTitle className="font-mono font-bold">Sign in to use status filters</AlertTitle>
+                <AlertDescription className="font-mono">
                   Progress filters rely on your submission history.{" "}
                   <Link
                     href="/sign-in"
@@ -493,7 +507,7 @@ export function ProblemLibraryShell({
             )}
 
             {results && results.pageCount > 1 ? (
-              <div className="flex items-center justify-between border-t pt-4 text-sm text-muted-foreground">
+              <div className="flex items-center justify-between border-t pt-4 font-mono text-sm text-muted-foreground">
                 <div>
                   Page {results.page} of {results.pageCount}
                 </div>
@@ -505,6 +519,7 @@ export function ProblemLibraryShell({
                       handleFilterChange({ page: Math.max(1, results.page - 1) }, false)
                     }
                     disabled={results.page === 1}
+                    className="rounded-none border-2 font-mono"
                   >
                     Previous
                   </Button>
@@ -517,6 +532,7 @@ export function ProblemLibraryShell({
                       )
                     }
                     disabled={results.page === results.pageCount}
+                    className="rounded-none border-2 font-mono"
                   >
                     Next
                   </Button>
@@ -579,9 +595,9 @@ const ProblemCard = forwardRef<HTMLDivElement, ProblemCardProps>(function Proble
       onMouseEnter={triggerPrefetch}
       onFocus={triggerPrefetch}
       className={cn(
-        "group rounded-2xl border border-border/50 bg-card/90 p-5 shadow-sm backdrop-blur-sm transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/40",
+        "group border-2 border-border bg-background p-5 transition-all duration-200 focus-visible:border-primary focus-visible:outline-none",
         "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200",
-        "hover:-translate-y-1 hover:border-primary/30 hover:bg-card hover:shadow-lg hover:shadow-primary/5",
+        "hover:border-primary/50 hover:bg-accent",
         isFetching && "opacity-75",
       )}
       style={{ animationDelay: `${animationDelay}ms` }}
@@ -592,36 +608,36 @@ const ProblemCard = forwardRef<HTMLDivElement, ProblemCardProps>(function Proble
             <Link
               href={`/problems/${problem.slug}`}
               id={titleId}
-              className="text-base font-semibold leading-tight transition-colors group-hover:text-primary"
+              className="font-mono text-base font-semibold leading-tight transition-colors group-hover:text-primary"
             >
               {problem.title}
             </Link>
             {problem.version ? (
-              <span className="text-xs text-muted-foreground">v{problem.version}</span>
+              <span className="font-mono text-xs text-muted-foreground">v{problem.version}</span>
             ) : null}
             <Badge
               variant="outline"
               className={cn(
-                "border text-xs",
+                "rounded-none border font-mono text-xs font-bold uppercase",
                 difficultyTone[problem.difficulty ?? ""] ?? "text-muted-foreground",
               )}
             >
               {problem.difficulty ?? "UNRATED"}
             </Badge>
           </div>
-          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          <div className="flex flex-wrap items-center gap-2 font-mono text-xs text-muted-foreground">
             {visibleTags.map((tag) => (
               <Badge
                 key={tag.slug}
                 variant="secondary"
-                className="rounded-full px-2.5 py-0.5 text-[11px] font-medium transition-colors hover:bg-secondary/80"
+                className="rounded-none border px-2.5 py-0.5 font-mono text-[11px] font-medium transition-colors hover:bg-secondary/80"
               >
                 {tag.name}
               </Badge>
             ))}
             {showRestTags ? <span>+{problem.tags.length - visibleTags.length} more</span> : null}
             {problem.hasEditorial ? (
-              <span className="rounded-full bg-primary/10 px-2.5 py-0.5 text-[11px] font-medium text-primary ring-1 ring-primary/20">
+              <span className="rounded-none border border-primary/20 bg-primary/10 px-2.5 py-0.5 font-mono text-[11px] font-medium text-primary">
                 Editorial
               </span>
             ) : null}
@@ -630,19 +646,19 @@ const ProblemCard = forwardRef<HTMLDivElement, ProblemCardProps>(function Proble
         <ProblemStatusBadge status={problem.status} />
       </div>
 
-      <div className="mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+      <div className="mt-4 flex flex-wrap items-center gap-4 font-mono text-sm text-muted-foreground">
         <div className="flex items-center gap-2">
           <span>Acceptance</span>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex h-[2px] w-28 overflow-hidden rounded-full bg-muted">
+              <div className="flex h-[2px] w-28 overflow-hidden rounded-none bg-muted">
                 <div
                   className="bg-primary transition-[width] duration-200"
                   style={{ width: `${acceptance ?? 0}%` }}
                 />
               </div>
             </TooltipTrigger>
-            <TooltipContent>
+            <TooltipContent className="rounded-none border-2 font-mono">
               {acceptance ? `${acceptance.toFixed(1)}%` : "Not enough data"}
             </TooltipContent>
           </Tooltip>
@@ -658,7 +674,7 @@ const ProblemCard = forwardRef<HTMLDivElement, ProblemCardProps>(function Proble
         <div className="ml-auto flex items-center gap-1">
           <Link
             href={`/problems/${problem.slug}`}
-            className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary transition-colors hover:text-primary/80"
+            className="inline-flex items-center gap-1.5 font-mono text-sm font-semibold text-primary transition-colors hover:text-primary/80"
             aria-label={`View ${problem.title}`}
           >
             View problem <ArrowRight01Icon className="h-4 w-4" strokeWidth={2.5} />
@@ -673,7 +689,7 @@ function ProblemListSkeleton() {
   return (
     <div className="space-y-3" aria-hidden="true">
       {Array.from({ length: 6 }).map((_, index) => (
-        <Skeleton key={index} className="h-32 rounded-2xl" />
+        <Skeleton key={index} className="h-32 rounded-none" />
       ))}
     </div>
   );
@@ -682,18 +698,18 @@ function ProblemListSkeleton() {
 function EmptyState({ onReset }: { onReset: () => void }) {
   return (
     <div
-      className="rounded-2xl border-2 border-dashed border-border bg-card/50 p-12 text-center backdrop-blur-sm"
+      className="border-2 border-dashed border-border bg-background p-12 text-center"
       role="status"
       aria-live="polite"
     >
-      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-none border-2 border-border bg-muted">
         <Search01Icon className="h-8 w-8 text-muted-foreground" strokeWidth={2} />
       </div>
-      <p className="text-lg font-semibold text-foreground">No problems found</p>
-      <p className="mt-2 text-sm text-muted-foreground">
+      <p className="font-mono text-lg font-semibold text-foreground">No problems found</p>
+      <p className="mt-2 font-mono text-sm text-muted-foreground">
         Try adjusting your search criteria or clearing some filters to see more results.
       </p>
-      <Button className="mt-6" onClick={onReset} variant="default" size="sm">
+      <Button className="mt-6 rounded-none border-2 font-mono" onClick={onReset} variant="default" size="sm">
         <Cancel01Icon className="mr-2 h-4 w-4" strokeWidth={2} />
         Reset all filters
       </Button>

From 103e8ab5dcf2704bd3690e46c6bedac2d054e08c Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sat, 17 Aug 2024 13:20:00 +0430
Subject: [PATCH 05/21] refactor: redesign problem reader and workspace
 components

---
 components/problems/problem-reader.tsx    |  46 +-
 components/problems/problem-workspace.tsx | 547 ++++++++++++++--------
 2 files changed, 381 insertions(+), 212 deletions(-)

diff --git a/components/problems/problem-reader.tsx b/components/problems/problem-reader.tsx
index 2660ffb..0e1b3f5 100644
--- a/components/problems/problem-reader.tsx
+++ b/components/problems/problem-reader.tsx
@@ -2,13 +2,11 @@
 
 import "katex/dist/katex.min.css";
 
-import { ProblemStatusBadge } from "@/components/problems/problem-status-badge";
 import {
   ProblemAnalyticsProvider,
   useProblemAnalyticsContext,
 } from "@/components/problems/problem-analytics-provider";
-import type { ContestProblemAntiCheatContext } from "@/lib/contests/anti-cheat/types";
-import dynamic from "next/dynamic";
+import { ProblemStatusBadge } from "@/components/problems/problem-status-badge";
 import { Badge } from "@/components/ui/badge";
 import {
   Breadcrumb,
@@ -22,6 +20,7 @@ import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { trackAnalyticsEvent } from "@/lib/analytics/client";
+import type { ContestProblemAntiCheatContext } from "@/lib/contests/anti-cheat/types";
 import { ProblemDetailPayload } from "@/lib/trpc/router/problems";
 import { cn } from "@/lib/utils";
 import { formatDistanceToNow } from "date-fns";
@@ -31,9 +30,10 @@ import {
   Copy01Icon,
   Flag02Icon,
   Link01Icon,
-  Share01Icon,
   MessageMultiple02Icon,
+  Share01Icon,
 } from "hugeicons-react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
@@ -49,12 +49,12 @@ const ProblemWorkspace = dynamic(
     loading: () => (
       <section
         id="editor"
-        className="rounded-3xl border border-dashed border-primary/30 bg-card/80 p-6 text-sm text-muted-foreground"
+        className="border border-dashed border-primary/30 bg-card/80 p-6 text-sm text-muted-foreground"
       >
         <div className="animate-pulse space-y-4">
           <div className="h-5 w-48 rounded bg-muted" />
           <div className="h-4 w-full rounded bg-muted" />
-          <div className="h-[320px] rounded-xl border border-white/10 bg-background/60" />
+          <div className="h-[320px] border border-white/10 bg-background/60" />
         </div>
       </section>
     ),
@@ -225,7 +225,7 @@ function ProblemReaderContent({
         Skip to statement
       </a>
       <div ref={contentRef} id="problem-reader-content" className="space-y-10">
-        <div className="rounded-xl border border-border/50 bg-card p-6 shadow-sm">
+        <div className="border border-border/50 bg-card p-6 shadow-sm">
           <Breadcrumb>
             <BreadcrumbList className="text-sm text-muted-foreground motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-150">
               <BreadcrumbItem>
@@ -263,7 +263,7 @@ function ProblemReaderContent({
           </Breadcrumb>
         </div>
         {contestMode ? (
-          <div className="rounded-3xl border border-primary/30 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-6 shadow-inner shadow-primary/5">
+          <div className="border border-primary/30 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-6 shadow-inner shadow-primary/5">
             <div className="flex flex-wrap items-center justify-between gap-4">
               <div>
                 <p className="text-xs uppercase text-primary">Educational contest</p>
@@ -286,14 +286,14 @@ function ProblemReaderContent({
               </div>
             </div>
             {contestContext?.antiCheat.examMode.enabled ? (
-              <div className="mt-4 rounded-2xl border border-amber-400/40 bg-amber-500/15 px-4 py-3 text-xs text-amber-700 dark:text-amber-200">
+              <div className="mt-4 border border-amber-400/40 bg-amber-500/15 px-4 py-3 text-xs text-amber-700 dark:text-amber-200">
                 Exam mode enabled — context menus and text selection are restricted for this
                 workspace.
               </div>
             ) : null}
           </div>
         ) : null}
-        <header className="rounded-xl border border-border/50 bg-card p-6 shadow-sm">
+        <header className="border border-border/50 bg-card p-6 shadow-sm">
           <div className="flex flex-wrap items-center gap-3">
             <Badge variant="outline" className="text-sm">
               {formatDifficulty(problem.difficulty)}
@@ -382,7 +382,7 @@ function ProblemReaderContent({
               </a>
             </Button>
           </div>
-          <div className="mt-6 grid gap-4 rounded-xl border border-border/50 bg-muted/30 p-4 md:grid-cols-2">
+          <div className="mt-6 grid gap-4 border border-border/50 bg-muted/30 p-4 md:grid-cols-2">
             <div>
               <p className="text-xs font-medium text-muted-foreground">Acceptance</p>
               <p className="mt-1 text-lg font-semibold">
@@ -445,7 +445,7 @@ function ProblemReaderContent({
               <ProblemSection id="samples" title="Sample I/O" collapsible>
                 <div className="space-y-3">
                   {problem.content.sampleTestCases.map((test) => (
-                    <div key={test.ordinal} className="rounded-2xl border bg-muted/40 p-4">
+                    <div key={test.ordinal} className="border bg-muted/40 p-4">
                       <p className="text-sm font-semibold">Sample #{test.ordinal}</p>
                       <div className="mt-3 grid gap-3 md:grid-cols-2">
                         <CopyField
@@ -474,7 +474,7 @@ function ProblemReaderContent({
             <div className="sticky top-24 space-y-8">
               {sectionEntries.length > 0 ? (
                 <nav
-                  className="rounded-2xl border border-white/10 bg-card/80 p-4 shadow-lg shadow-black/30"
+                  className="border border-white/10 bg-card/80 p-4 shadow-md shadow-gray-200"
                   aria-label="Quick navigation"
                 >
                   <p className="text-xs font-semibold text-muted-foreground">Quick nav</p>
@@ -485,7 +485,7 @@ function ProblemReaderContent({
                           type="button"
                           onClick={() => handleAnchorClick(section.id)}
                           className={cn(
-                            "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-colors",
+                            "flex w-full items-center justify-between px-3 py-2 text-left transition-colors",
                             activeSection === section.id
                               ? "bg-primary/10 text-primary dark:text-primary/80"
                               : "text-muted-foreground hover:bg-muted",
@@ -504,14 +504,14 @@ function ProblemReaderContent({
               ) : null}
 
               {problem.relatedProblems.length > 0 ? (
-                <div className="rounded-2xl border border-white/10 bg-card/80 p-4 shadow-lg shadow-black/30">
+                <div className="border border-white/10 bg-card/80 p-4 shadow-md shadow-gray-200">
                   <p className="text-xs font-semibold text-muted-foreground">Related</p>
                   <ul className="mt-3 space-y-3 text-sm">
                     {problem.relatedProblems.map((related) => (
                       <li key={related.slug}>
                         <Link
                           href={`/problems/${related.slug}`}
-                          className="flex items-center justify-between rounded-lg bg-muted/40 px-3 py-2 transition-colors hover:bg-muted"
+                          className="flex items-center justify-between bg-muted/40 px-3 py-2 transition-colors hover:bg-muted"
                           onClick={() =>
                             trackAnalyticsEvent("navigation.path", {
                               from: `/problems/${problem.slug}`,
@@ -547,7 +547,7 @@ function ProblemReaderContent({
         <ProblemWorkspace problem={problem} contestContext={contestContext} />
       </div>
       <div className="fixed inset-x-4 bottom-4 z-40 lg:hidden">
-        <Button className="w-full shadow-lg shadow-primary/30" size="lg" asChild>
+        <Button className="w-full shadow-md shadow-gray-200" size="lg" asChild>
           <a href="#editor" onClick={() => analytics.markSolveClick("mobile-sticky")}>
             Start solving
           </a>
@@ -620,7 +620,7 @@ function ProblemSection({
     return (
       <section id={id} className="scroll-mt-28">
         <Collapsible open={open} onOpenChange={handleOpenChange}>
-          <div className="rounded-3xl border border-white/10 bg-card/90 p-6 shadow-lg shadow-black/40">
+          <div className="border border-white/10 bg-card/90 p-6 shadow-lg shadow-gray-600/40">
             {heading}
             <CollapsibleContent className="mt-4 overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down">
               {content}
@@ -633,7 +633,7 @@ function ProblemSection({
 
   return (
     <section id={id} className="scroll-mt-28">
-      <div className="rounded-3xl border border-white/10 bg-card/90 p-6 shadow-lg shadow-black/40">
+      <div className="border border-white/10 bg-card/90 p-6 shadow-lg shadow-gray-600/40">
         {heading}
         <div className="mt-4">{content}</div>
       </div>
@@ -666,7 +666,7 @@ function Markdown({
               );
             }
             return (
-              <pre className="group relative rounded-2xl bg-muted p-4">
+              <pre className="group relative bg-muted p-4">
                 <CopyButton
                   text={text}
                   className="absolute right-2 top-2 opacity-0 transition group-hover:opacity-100"
@@ -702,7 +702,7 @@ function SampleCard({
   problemId: string;
 }) {
   return (
-    <div className="group rounded-2xl border border-white/10 bg-card/80 p-4 shadow-sm shadow-black/30">
+    <div className="group border border-white/10 bg-card/80 p-4 shadow-sm shadow-black/30">
       <div className="flex items-center justify-between">
         <p className="text-sm font-semibold">Example {index + 1}</p>
         {sample.explanation ? <Badge variant="outline">Explanation included</Badge> : null}
@@ -743,7 +743,7 @@ function CopyField({
 }) {
   if (isHidden) {
     return (
-      <div className="rounded-xl border border-white/10 bg-background/30 p-3 text-sm shadow-inner shadow-black/10">
+      <div className="border border-white/10 bg-background/30 p-3 text-sm shadow-inner shadow-black/10">
         <div className="flex items-center justify-between text-xs text-muted-foreground">
           <span>{label}</span>
           <span className="rounded-full bg-muted/40 px-2 py-0.5 text-[11px] uppercase tracking-wide">
@@ -758,7 +758,7 @@ function CopyField({
   }
 
   return (
-    <div className="group rounded-xl border border-white/10 bg-background/80 p-3 text-sm shadow-inner shadow-black/20">
+    <div className="group border border-white/10 bg-background/80 p-3 text-sm shadow-inner shadow-black/20">
       <div className="flex items-center justify-between text-xs text-muted-foreground">
         <span>{label}</span>
         <CopyButton
diff --git a/components/problems/problem-workspace.tsx b/components/problems/problem-workspace.tsx
index 8564fcb..2ff46f1 100644
--- a/components/problems/problem-workspace.tsx
+++ b/components/problems/problem-workspace.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { CodeEditor } from "@/components/code/code-editor";
-import { SubmissionStatusBadge } from "@/components/submissions/status-badge";
 import { Shield } from "@/components/icons";
+import { useProblemAnalyticsContext } from "@/components/problems/problem-analytics-provider";
+import { SubmissionStatusBadge } from "@/components/submissions/status-badge";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,9 +35,11 @@ import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { useSubmissionRealtime } from "@/hooks/use-submission-realtime";
 import { useContestAntiCheat } from "@/hooks/use-contest-anti-cheat";
+import { useSubmissionRealtime } from "@/hooks/use-submission-realtime";
+import { trackAnalyticsEvent } from "@/lib/analytics/client";
 import { SUPPORTED_LANGUAGES, type SupportedLanguage } from "@/lib/constants";
+import type { ContestProblemAntiCheatContext } from "@/lib/contests/anti-cheat/types";
 import { getDefaultCodeStub } from "@/lib/problems/editor-presets";
 import { invalidateTags } from "@/lib/react-query/invalidation";
 import {
@@ -50,11 +53,8 @@ import type {
   SubmissionDetailPayload,
   SubmissionHistoryEntry,
 } from "@/lib/submissions/types";
-import { trackAnalyticsEvent } from "@/lib/analytics/client";
-import { useProblemAnalyticsContext } from "@/components/problems/problem-analytics-provider";
 import { trpc } from "@/lib/trpc/client";
 import { ProblemDetailPayload } from "@/lib/trpc/router/problems";
-import type { ContestProblemAntiCheatContext } from "@/lib/contests/anti-cheat/types";
 import { cn } from "@/lib/utils";
 import { useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
@@ -574,49 +574,74 @@ export function ProblemWorkspace({
 
   return (
     <TooltipProvider>
+      {/* Mobile Warning Banner - Shows on screens < 768px (iPad portrait) */}
+      <div className="block border-2 border-warning/50 bg-warning/10 p-6 md:hidden">
+        <div className="space-y-4 text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-none border-2 border-warning bg-warning/20">
+            <Alert01Icon className="h-6 w-6 text-warning" strokeWidth={2} />
+          </div>
+          <div className="space-y-2">
+            <h3 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-xl font-black text-transparent">
+              Device Not Supported
+            </h3>
+            <p className="font-mono text-sm text-muted-foreground">
+              The code editor requires a larger screen. Please use a laptop, desktop, or tablet (iPad
+              or larger) to solve problems.
+            </p>
+          </div>
+          <div className="flex flex-col gap-2 font-mono text-xs text-muted-foreground">
+            <p>✓ Laptops & Desktops</p>
+            <p>✓ Tablets (iPad & larger)</p>
+            <p>✗ Mobile phones</p>
+          </div>
+        </div>
+      </div>
+
       <section
         id="editor"
-        className={cn(
-          "rounded-3xl border border-dashed border-primary/40 bg-card/80 p-6 shadow-lg shadow-primary/5",
-          examModeClass,
-        )}
+        className={cn("hidden border-2 border-border bg-background p-4 md:block md:p-6", examModeClass)}
       >
-        <div className="flex flex-wrap items-center gap-4">
-          <div>
-            <p className="text-sm text-muted-foreground">Ready to solve</p>
-            <h2 className="text-2xl font-semibold tracking-tight">{problem.title}</h2>
+        <div className="flex flex-wrap items-center gap-3 md:gap-4">
+          <div className="flex-1 min-w-[200px]">
+            <p className="font-mono text-xs text-muted-foreground">Ready to solve</p>
+            <h2 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-xl font-black text-transparent md:text-2xl">
+              {problem.title}
+            </h2>
           </div>
-          <Badge variant="outline" className="rounded-full">
+          <Badge
+            variant="outline"
+            className="rounded-none border font-mono text-xs font-bold uppercase"
+          >
             {problem.difficulty ?? "Unrated"}
           </Badge>
-          <div className="ml-auto flex items-center gap-2">
+          <div className="flex w-full items-center gap-2 md:ml-auto md:w-auto">
             <Button
               variant="outline"
               size="sm"
               onClick={() => setDrawerOpen(true)}
-              className="gap-2"
+              className="h-9 flex-1 gap-2 rounded-none border-2 border-border font-mono text-sm hover:border-primary/50 hover:bg-accent md:flex-initial"
             >
               <BookOpen01Icon className="h-4 w-4" strokeWidth={2} />
-              Statement
+              <span className="md:inline">Statement</span>
             </Button>
             <PreferencesMenu preferences={preferences} onChange={setPreferences} />
           </div>
         </div>
 
         {presenceWarning ? (
-          <div className="mt-4 flex items-center gap-2 rounded-2xl border border-amber-400/50 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-200">
+          <div className="mt-4 flex items-center gap-2 border-2 border-warning/50 bg-warning/10 px-4 py-3 font-mono text-sm text-warning">
             <Alert01Icon className="h-4 w-4 shrink-0" strokeWidth={2} />
             Another tab is editing this problem. To avoid overwriting drafts, close other sessions.
           </div>
         ) : null}
         {isOffline ? (
-          <div className="mt-4 flex items-center gap-2 rounded-2xl border border-sky-400/40 bg-sky-500/10 px-4 py-3 text-sm text-sky-700 dark:text-sky-200">
+          <div className="mt-4 flex items-center gap-2 border-2 border-info/40 bg-info/10 px-4 py-3 font-mono text-sm text-info">
             <CircleArrowReload01Icon className="h-4 w-4 shrink-0" strokeWidth={2} />
             Offline mode — drafts stay local and sample runs fall back to the local simulator.
           </div>
         ) : null}
         {requiresManualReview ? (
-          <div className="mt-4 flex items-center gap-2 rounded-2xl border border-purple-400/40 bg-purple-500/10 px-4 py-3 text-sm text-purple-800 dark:text-purple-200">
+          <div className="mt-4 flex items-center gap-2 border-2 border-primary/40 bg-primary/10 px-4 py-3 font-mono text-sm text-foreground">
             <Legal01Icon className="h-4 w-4 shrink-0" strokeWidth={2} />
             {manualOnly
               ? "This problem is reviewed manually. Expect longer turnaround while a curator scores your submission."
@@ -624,27 +649,27 @@ export function ProblemWorkspace({
           </div>
         ) : null}
         {contestGuard.enabled ? (
-          <div className="mt-4 rounded-2xl border border-sky-400/60 bg-sky-500/10 px-4 py-3 text-sm">
+          <div className="mt-4 border-2 border-info/60 bg-info/10 px-4 py-3 font-mono text-sm">
             <div className="flex flex-wrap items-center gap-2">
-              <Shield className="h-4 w-4 text-sky-500" />
-              <span className="font-semibold text-sky-900 dark:text-sky-100">
+              <Shield className="h-4 w-4 text-info" />
+              <span className="font-mono text-sm font-bold text-foreground">
                 Anti-cheat guard active
               </span>
               {contestGuard.status ? (
                 <Badge
                   variant="outline"
-                  className="rounded-full border-sky-500/40 text-[10px] uppercase text-sky-500"
+                  className="rounded-none border border-info/40 font-mono text-[10px] uppercase text-info"
                 >
                   {contestGuard.status.toLowerCase()}
                 </Badge>
               ) : null}
             </div>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="mt-1 font-mono text-xs text-muted-foreground">
               {contestContext?.antiCheat.warnings.reminderCopy ??
                 "Tab switches, large pastes, and multi-device logins trigger reviews."}
             </p>
             {contestGuard.warnings.length ? (
-              <ul className="mt-2 space-y-1 text-xs text-amber-600 dark:text-amber-300">
+              <ul className="mt-2 space-y-1 font-mono text-xs text-warning">
                 {contestGuard.warnings.map((warning) => (
                   <li key={warning}>• {warning}</li>
                 ))}
@@ -653,80 +678,134 @@ export function ProblemWorkspace({
           </div>
         ) : null}
         {contestGuard.disqualified ? (
-          <div className="mt-4 rounded-2xl border border-rose-500/50 bg-rose-500/10 px-4 py-3 text-sm text-rose-700 dark:text-rose-200">
+          <div className="mt-4 border-2 border-destructive/50 bg-destructive/10 px-4 py-3 font-mono text-sm text-destructive">
             You have been disqualified from this contest. Submissions are blocked for this window.
           </div>
         ) : null}
 
-        <div className="mt-6">
-          <ResizablePanelGroup direction="horizontal" className="h-full min-h-[560px]">
-            <ResizablePanel defaultSize={65} minSize={55} className="pr-3">
-              <EditorColumn
-                activeLanguage={activeLanguage}
-                languageOptions={languageOptions}
-                onLanguageChange={handleLanguageChange}
-                code={activeCode}
-                onChange={(next) => {
-                  touchActivity();
-                  setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: next }));
-                }}
-                onCopy={handleCopy}
-                onReset={handleReset}
-                onSave={() => handleSaveDraft("manual")}
-                appearance={editorTheme === "dark" ? "dark" : "light"}
-                preferences={preferences}
-                customInput={customInput}
-                onInputChange={(value) => {
-                  touchActivity();
-                  setCustomInput(value);
-                }}
-                onPaste={contestGuard.recordPaste}
-                autosaveState={autosaveState}
-                runInProgress={runSample.isPending}
-                submitInProgress={createSubmission.isPending}
-                onRun={handleRun}
-                onSubmit={handleSubmit}
-                consoleLines={consoleLines}
-              />
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={35} minSize={30} className="pl-3">
-              <SidePanel
-                problem={problem}
-                viewMode={viewMode}
-                onViewModeChange={setViewMode}
-                result={activeResult}
-                submissionHistory={historyQuery.data?.entries ?? []}
-                onSelectSubmission={(submissionId) => {
-                  trackAnalyticsEvent(
-                    "submission.timeline_open",
-                    { submissionId },
-                    baseAnalyticsContext,
-                  );
-                  setCurrentSubmissionId(submissionId);
-                  setViewMode("submission");
-                }}
-                drafts={draftsQuery.data ?? []}
-                onRestoreDraft={(source) =>
-                  setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: source }))
-                }
-              />
-            </ResizablePanel>
-          </ResizablePanelGroup>
+        <div className="mt-4 md:mt-6">
+          {/* Desktop & Large Tablets: Horizontal split with resizable panels */}
+          <div className="hidden lg:block">
+            <ResizablePanelGroup direction="horizontal" className="h-full min-h-[560px]">
+              <ResizablePanel defaultSize={65} minSize={55} className="pr-3">
+                <EditorColumn
+                  activeLanguage={activeLanguage}
+                  languageOptions={languageOptions}
+                  onLanguageChange={handleLanguageChange}
+                  code={activeCode}
+                  onChange={(next) => {
+                    touchActivity();
+                    setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: next }));
+                  }}
+                  onCopy={handleCopy}
+                  onReset={handleReset}
+                  onSave={() => handleSaveDraft("manual")}
+                  appearance={editorTheme === "dark" ? "dark" : "light"}
+                  preferences={preferences}
+                  customInput={customInput}
+                  onInputChange={(value) => {
+                    touchActivity();
+                    setCustomInput(value);
+                  }}
+                  onPaste={contestGuard.recordPaste}
+                  autosaveState={autosaveState}
+                  runInProgress={runSample.isPending}
+                  submitInProgress={createSubmission.isPending}
+                  onRun={handleRun}
+                  onSubmit={handleSubmit}
+                  consoleLines={consoleLines}
+                />
+              </ResizablePanel>
+              <ResizableHandle withHandle />
+              <ResizablePanel defaultSize={35} minSize={30} className="pl-3">
+                <SidePanel
+                  problem={problem}
+                  viewMode={viewMode}
+                  onViewModeChange={setViewMode}
+                  result={activeResult}
+                  submissionHistory={historyQuery.data?.entries ?? []}
+                  onSelectSubmission={(submissionId) => {
+                    trackAnalyticsEvent(
+                      "submission.timeline_open",
+                      { submissionId },
+                      baseAnalyticsContext,
+                    );
+                    setCurrentSubmissionId(submissionId);
+                    setViewMode("submission");
+                  }}
+                  drafts={draftsQuery.data ?? []}
+                  onRestoreDraft={(source) =>
+                    setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: source }))
+                  }
+                />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+
+          {/* iPad Portrait: Stacked vertical layout without resizable */}
+          <div className="block space-y-4 lg:hidden">
+            <EditorColumn
+              activeLanguage={activeLanguage}
+              languageOptions={languageOptions}
+              onLanguageChange={handleLanguageChange}
+              code={activeCode}
+              onChange={(next) => {
+                touchActivity();
+                setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: next }));
+              }}
+              onCopy={handleCopy}
+              onReset={handleReset}
+              onSave={() => handleSaveDraft("manual")}
+              appearance={editorTheme === "dark" ? "dark" : "light"}
+              preferences={preferences}
+              customInput={customInput}
+              onInputChange={(value) => {
+                touchActivity();
+                setCustomInput(value);
+              }}
+              onPaste={contestGuard.recordPaste}
+              autosaveState={autosaveState}
+              runInProgress={runSample.isPending}
+              submitInProgress={createSubmission.isPending}
+              onRun={handleRun}
+              onSubmit={handleSubmit}
+              consoleLines={consoleLines}
+            />
+            <SidePanel
+              problem={problem}
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              result={activeResult}
+              submissionHistory={historyQuery.data?.entries ?? []}
+              onSelectSubmission={(submissionId) => {
+                trackAnalyticsEvent(
+                  "submission.timeline_open",
+                  { submissionId },
+                  baseAnalyticsContext,
+                );
+                setCurrentSubmissionId(submissionId);
+                setViewMode("submission");
+              }}
+              drafts={draftsQuery.data ?? []}
+              onRestoreDraft={(source) =>
+                setCodeByLanguage((prev) => ({ ...prev, [activeLanguage]: source }))
+              }
+            />
+          </div>
         </div>
       </section>
 
       <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>{problem.title}</DrawerTitle>
-            <DrawerDescription>
+        <DrawerContent className="rounded-none border-t-2 border-border bg-background">
+          <DrawerHeader className="px-4 md:px-6">
+            <DrawerTitle className="font-mono text-lg font-bold md:text-xl">{problem.title}</DrawerTitle>
+            <DrawerDescription className="font-mono text-xs text-muted-foreground md:text-sm">
               Quick reference of the statement without leaving the editor.
             </DrawerDescription>
           </DrawerHeader>
-          <ScrollArea className="max-h-[70vh] px-6 pb-6">
-            <article className="prose prose-sm dark:prose-invert">
-              <pre>{problem.content.statement}</pre>
+          <ScrollArea className="max-h-[60vh] px-4 pb-6 md:max-h-[70vh] md:px-6">
+            <article className="prose prose-sm font-mono dark:prose-invert">
+              <pre className="whitespace-pre-wrap font-mono text-xs md:text-sm">{problem.content.statement}</pre>
             </article>
           </ScrollArea>
         </DrawerContent>
@@ -782,17 +861,17 @@ function EditorColumn(props: {
     consoleLines,
   } = props;
   return (
-    <div className="flex h-full flex-col gap-4">
-      <div className="rounded-2xl border border-white/10 bg-background/80 p-4 shadow-inner shadow-black/5">
-        <div className="flex flex-wrap items-center gap-3">
+    <div className="flex h-full flex-col gap-3 md:gap-4">
+      <div className="border-2 border-border bg-background p-3 md:p-4">
+        <div className="flex flex-wrap items-center gap-2 md:gap-3">
           <Select
             value={activeLanguage}
             onValueChange={(value) => onLanguageChange(value as SupportedLanguage)}
           >
-            <SelectTrigger className="w-48">
+            <SelectTrigger className="w-full rounded-none border-2 border-border font-mono text-sm md:w-48">
               <SelectValue />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="rounded-none border-2 border-border font-mono text-sm">
               {languageOptions.map((language) => (
                 <SelectItem key={language.code} value={language.code}>
                   {language.displayName}
@@ -800,40 +879,56 @@ function EditorColumn(props: {
               ))}
             </SelectContent>
           </Select>
-          <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
+          <div className="flex w-full flex-wrap items-center gap-2 font-mono text-xs text-muted-foreground md:ml-auto md:w-auto">
             <span
               className={cn(
-                "flex items-center gap-1 rounded-full px-3 py-1 transition",
+                "flex items-center gap-1 px-2 py-1 transition md:px-3",
                 autosaveState === "saving"
-                  ? "text-amber-500"
+                  ? "text-warning"
                   : autosaveState === "saved"
-                    ? "text-emerald-500"
+                    ? "text-success"
                     : "text-muted-foreground",
               )}
             >
-              <span className="h-2 w-2 rounded-full bg-current" />
-              {autosaveState === "saving" ? "Saving…" : "Saved"}
+              <span className="h-2 w-2 rounded-none bg-current" />
+              <span className="hidden md:inline">{autosaveState === "saving" ? "Saving…" : "Saved"}</span>
+              <span className="md:hidden">{autosaveState === "saving" ? "…" : "✓"}</span>
             </span>
-            <Button variant="ghost" size="sm" onClick={onReset}>
-              Reset
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onReset}
+              className="h-8 rounded-none font-mono text-xs md:text-sm"
+            >
+              <span className="md:inline">Reset</span>
             </Button>
-            <Button variant="ghost" size="sm" onClick={onCopy} className="gap-2">
-              <Copy01Icon className="h-4 w-4" strokeWidth={2} />
-              Copy
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onCopy}
+              className="h-8 gap-1 rounded-none font-mono text-xs md:gap-2 md:text-sm"
+            >
+              <Copy01Icon className="h-3.5 w-3.5 md:h-4 md:w-4" strokeWidth={2} />
+              <span className="hidden md:inline">Copy</span>
             </Button>
-            <Button variant="ghost" size="sm" onClick={onSave} className="gap-2">
-              <SaveEnergy01Icon className="h-4 w-4" strokeWidth={2} />
-              Save
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onSave}
+              className="h-8 gap-1 rounded-none font-mono text-xs md:gap-2 md:text-sm"
+            >
+              <SaveEnergy01Icon className="h-3.5 w-3.5 md:h-4 md:w-4" strokeWidth={2} />
+              <span className="hidden md:inline">Save</span>
             </Button>
           </div>
         </div>
-        <div className="mt-4 rounded-xl border border-white/5 bg-black/20">
+        <div className="mt-3 border-2 border-border bg-background md:mt-4">
           <CodeEditor
             value={code}
             onChange={onChange}
             onPaste={onPaste}
             language={activeLanguage}
-            minHeight={420}
+            minHeight={320}
             appearance={appearance}
             fontSize={preferences.fontSize}
             wrapLines={preferences.wrapLines}
@@ -841,18 +936,25 @@ function EditorColumn(props: {
             ariaLabel="In-browser code editor"
           />
         </div>
-        <div className="mt-4 grid gap-3 md:grid-cols-2">
+        <div className="mt-3 grid gap-3 md:mt-4 md:grid-cols-2">
           <div>
-            <label className="text-xs font-semibold text-muted-foreground">Custom Input</label>
+            <label className="font-mono text-xs font-bold uppercase text-muted-foreground">
+              Custom Input
+            </label>
             <Textarea
               value={customInput}
               onChange={(event) => onInputChange(event.target.value)}
-              className="mt-1 h-24 resize-none"
+              className="mt-1 h-20 resize-none rounded-none border-2 border-border font-mono text-sm md:h-24"
               placeholder="stdin sent to the runner"
             />
           </div>
-          <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-end">
-            <Button variant="outline" className="gap-2" onClick={onRun} disabled={runInProgress}>
+          <div className="flex flex-col gap-2 md:items-end md:justify-end">
+            <Button
+              variant="outline"
+              className="h-10 w-full gap-2 rounded-none border-2 border-border font-mono text-sm hover:border-primary/50 hover:bg-accent md:w-auto"
+              onClick={onRun}
+              disabled={runInProgress}
+            >
               {runInProgress ? (
                 <Spinner className="h-4 w-4" />
               ) : (
@@ -860,7 +962,11 @@ function EditorColumn(props: {
               )}
               Run Samples
             </Button>
-            <Button className="gap-2" onClick={onSubmit} disabled={submitInProgress}>
+            <Button
+              className="h-10 w-full gap-2 rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30 md:w-auto"
+              onClick={onSubmit}
+              disabled={submitInProgress}
+            >
               {submitInProgress ? (
                 <Spinner className="h-4 w-4" />
               ) : (
@@ -879,23 +985,23 @@ function EditorColumn(props: {
 function ConsolePanel({ lines }: { lines: string[] }) {
   if (lines.length === 0) {
     return (
-      <div className="rounded-2xl border border-white/5 bg-black/20 p-4 text-sm text-muted-foreground">
+      <div className="border-2 border-border bg-background p-3 font-mono text-xs text-muted-foreground md:p-4 md:text-sm">
         <div className="flex items-center gap-2">
-          <Train01Icon className="h-4 w-4" strokeWidth={2} />
+          <Train01Icon className="h-3.5 w-3.5 md:h-4 md:w-4" strokeWidth={2} />
           Console output will appear here.
         </div>
       </div>
     );
   }
   return (
-    <div className="rounded-2xl border border-white/5 bg-black/30 p-4 font-mono text-sm text-muted-foreground">
-      <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-muted-foreground/80">
+    <div className="border-2 border-border bg-background p-3 font-mono text-xs text-muted-foreground md:p-4 md:text-sm">
+      <div className="flex items-center gap-2 font-mono text-xs font-bold uppercase tracking-wide text-primary/80">
         <Train01Icon className="h-3.5 w-3.5" strokeWidth={2} />
         Console
       </div>
-      <div className="mt-3 space-y-1 overflow-auto">
+      <div className="mt-2 max-h-32 space-y-1 overflow-auto md:mt-3 md:max-h-40">
         {lines.map((line, index) => (
-          <p key={`${line}-${index}`} className="whitespace-pre-wrap text-foreground/80">
+          <p key={`${line}-${index}`} className="whitespace-pre-wrap font-mono text-foreground/80">
             {line}
           </p>
         ))}
@@ -925,46 +1031,79 @@ function SidePanel(props: {
     onRestoreDraft,
   } = props;
   return (
-    <div className="flex h-full flex-col gap-4">
+    <div className="flex h-full flex-col gap-3 md:gap-4">
       <Tabs
         value={viewMode}
         onValueChange={(value) => onViewModeChange(value as "run" | "submission")}
       >
-        <TabsList className="w-full justify-between">
-          <TabsTrigger value="run">Run output</TabsTrigger>
-          <TabsTrigger value="submission">Judge</TabsTrigger>
+        <TabsList className="grid h-9 w-full grid-cols-2 rounded-none border-2 border-border bg-background p-0 font-mono text-xs md:h-10 md:text-sm">
+          <TabsTrigger
+            value="run"
+            className="rounded-none border-r border-border data-[state=active]:border-primary data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            <span className="hidden md:inline">Run output</span>
+            <span className="md:hidden">Run</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="submission"
+            className="rounded-none data-[state=active]:border-primary data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            Judge
+          </TabsTrigger>
         </TabsList>
       </Tabs>
-      <div className="rounded-2xl border border-white/5 bg-background/80 p-4">
+      <div className="border-2 border-border bg-background p-3 md:p-4">
         <ResultPanel result={result} />
       </div>
       <Tabs defaultValue="description" className="flex-1">
-        <TabsList className="w-full justify-around">
-          <TabsTrigger value="description">Description</TabsTrigger>
-          <TabsTrigger value="editorial" disabled={!problem.editorialIsReleased}>
-            Editorial
+        <TabsList className="grid h-9 w-full grid-cols-4 rounded-none border-2 border-border bg-background p-0 font-mono text-[10px] md:h-10 md:text-xs">
+          <TabsTrigger
+            value="description"
+            className="rounded-none border-r text-xs border-border data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            <span className="hidden md:inline">Description</span>
+            <span className="md:hidden">Desc</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="editorial"
+            disabled={!problem.editorialIsReleased}
+            className="rounded-none border-r text-xs border-border data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            <span className="hidden md:inline">Editorial</span>
+            <span className="md:hidden">Edit</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="submissions"
+            className="rounded-none border-r text-xs border-border data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            <span className="hidden md:inline">Submissions</span>
+            <span className="md:hidden">Subs</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value="drafts"
+            className="rounded-none text-xs data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:shadow-none"
+          >
+            <span className="hidden md:inline">My Code</span>
+            <span className="md:hidden">Code</span>
           </TabsTrigger>
-          <TabsTrigger value="submissions">Submissions</TabsTrigger>
-          <TabsTrigger value="drafts">My Code</TabsTrigger>
         </TabsList>
         <TabsContent
           value="description"
-          className="rounded-2xl border border-white/5 bg-background/60 p-4 text-sm text-muted-foreground"
+          className="border-2 border-border bg-background p-3 font-mono text-xs text-muted-foreground md:p-4 md:text-sm"
         >
-          <ScrollArea className="h-64">
-            <p className="whitespace-pre-line text-foreground">{problem.content.statement}</p>
+          <ScrollArea className="h-48 md:h-64">
+            <p className="whitespace-pre-line font-mono text-foreground">
+              {problem.content.statement}
+            </p>
           </ScrollArea>
         </TabsContent>
-        <TabsContent
-          value="editorial"
-          className="rounded-2xl border border-white/5 bg-background/60 p-4"
-        >
+        <TabsContent value="editorial" className="border-2 border-border bg-background p-3 md:p-4">
           {problem.editorialIsReleased && problem.content.editorial ? (
-            <ScrollArea className="h-64 text-sm text-foreground">
+            <ScrollArea className="h-48 font-mono text-xs text-foreground md:h-64 md:text-sm">
               <p className="whitespace-pre-line">{problem.content.editorial}</p>
             </ScrollArea>
           ) : (
-            <p className="text-sm text-muted-foreground">
+            <p className="font-mono text-xs text-muted-foreground md:text-sm">
               Editorial locked
               {problem.editorialReleaseAt
                 ? ` until ${format(new Date(problem.editorialReleaseAt), "PPP p")}`
@@ -974,7 +1113,7 @@ function SidePanel(props: {
           )}
         </TabsContent>
         <TabsContent value="submissions">
-          <div className="h-64 space-y-3 overflow-auto rounded-2xl border border-white/5 bg-background/80 p-4 text-sm">
+          <div className="h-48 space-y-2 overflow-auto border-2 border-border bg-background p-3 font-mono text-xs md:h-64 md:space-y-3 md:p-4 md:text-sm">
             {submissionHistory.length === 0 ? (
               <p className="text-muted-foreground">No submissions yet.</p>
             ) : (
@@ -983,51 +1122,58 @@ function SidePanel(props: {
                   key={entry.id}
                   type="button"
                   onClick={() => onSelectSubmission(entry.id)}
-                  className="w-full rounded-xl border border-white/5 bg-card/70 px-3 py-2 text-left transition hover:border-primary/40"
+                  className="w-full border-2 border-border bg-background px-2 py-2 text-left transition hover:border-primary/40 md:px-3"
                 >
-                  <div className="flex items-center justify-between text-xs text-muted-foreground">
-                    <span>{new Date(entry.createdAt).toLocaleString()}</span>
+                  <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground md:text-xs">
+                    <span className="truncate">{new Date(entry.createdAt).toLocaleString()}</span>
                     <SubmissionStatusBadge
                       verdict={entry.verdictCode}
                       status={entry.status}
                       size="sm"
                     />
                   </div>
-                  <p className="mt-1 text-sm font-medium text-foreground">
+                  <p className="mt-1 truncate font-mono text-xs font-medium text-foreground md:text-sm">
                     {entry.verdictCode ?? "Pending"} • {entry.languageCode.toUpperCase()}
                   </p>
                 </button>
               ))
             )}
-            <Button variant="ghost" size="sm" className="w-full justify-start" asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start rounded-none font-mono text-xs md:text-sm"
+              asChild
+            >
               <Link href={`/problems/${problem.slug}/submissions`}>View history</Link>
             </Button>
           </div>
         </TabsContent>
         <TabsContent value="drafts">
-          <div className="h-64 space-y-3 overflow-auto rounded-2xl border border-white/5 bg-background/80 p-4 text-sm">
+          <div className="h-48 space-y-2 overflow-auto border-2 border-border bg-background p-3 font-mono text-xs md:h-64 md:space-y-3 md:p-4 md:text-sm">
             {drafts.length === 0 ? (
               <p className="text-muted-foreground">No cloud drafts yet.</p>
             ) : (
               drafts.map((draft) => (
-                <div
-                  key={draft.id}
-                  className="rounded-xl border border-white/5 bg-card/70 p-3 text-left"
-                >
-                  <div className="flex items-center justify-between text-xs text-muted-foreground">
-                    <span>{new Date(draft.updatedAt).toLocaleString()}</span>
-                    <Badge variant="outline">{draft.savedVia}</Badge>
+                <div key={draft.id} className="border-2 border-border bg-background p-2 text-left md:p-3">
+                  <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground md:text-xs">
+                    <span className="truncate">{new Date(draft.updatedAt).toLocaleString()}</span>
+                    <Badge
+                      variant="outline"
+                      className="ml-2 rounded-none border font-mono text-[10px] font-bold uppercase md:text-xs"
+                    >
+                      {draft.savedVia}
+                    </Badge>
                   </div>
-                  <p className="mt-2 line-clamp-2 whitespace-pre-wrap font-mono text-xs text-foreground/80">
+                  <p className="mt-2 line-clamp-2 whitespace-pre-wrap font-mono text-[10px] text-foreground/80 md:text-xs">
                     {draft.sourceCode}
                   </p>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="mt-2 gap-2"
+                    className="mt-2 h-7 gap-1 rounded-none font-mono text-xs md:h-8 md:gap-2 md:text-sm"
                     onClick={() => onRestoreDraft(draft.sourceCode)}
                   >
-                    <TimeScheduleIcon className="h-4 w-4" strokeWidth={2} />
+                    <TimeScheduleIcon className="h-3 w-3 md:h-4 md:w-4" strokeWidth={2} />
                     Restore
                   </Button>
                 </div>
@@ -1043,7 +1189,9 @@ function SidePanel(props: {
 function ResultPanel({ result }: { result: WorkspaceResult | null }) {
   if (!result) {
     return (
-      <div className="text-sm text-muted-foreground">Run samples or submit to see verdicts.</div>
+      <div className="font-mono text-xs text-muted-foreground md:text-sm">
+        Run samples or submit to see verdicts.
+      </div>
     );
   }
 
@@ -1051,35 +1199,39 @@ function ResultPanel({ result }: { result: WorkspaceResult | null }) {
   const variant = result.kind === "sample" ? "Samples" : "Judge";
   if (!summary) {
     return (
-      <div className="rounded-xl border border-dashed border-purple-400/40 bg-purple-500/5 p-4 text-sm text-purple-900 dark:text-purple-100">
-        Manual review pending — we&aspo;ll update this panel once a reviewer posts a verdict.
+      <div className="border-2 border-primary/40 bg-primary/5 p-3 font-mono text-xs text-foreground md:p-4 md:text-sm">
+        Manual review pending — we&apos;ll update this panel once a reviewer posts a verdict.
       </div>
     );
   }
   const verdict = summary.verdictCode ?? "WA";
   const statusLabel = result.kind === "sample" ? "SUCCEEDED" : result.status;
   return (
-    <div className="space-y-4">
-      <div className="rounded-xl border border-white/10 bg-card/80 p-4">
+    <div className="space-y-3 md:space-y-4">
+      <div className="border-2 border-border bg-background p-3 md:p-4">
         <div className="flex items-center justify-between">
           <div>
-            <p className="text-xs text-muted-foreground">{variant}</p>
-            <p className="text-lg font-semibold text-foreground">{verdict}</p>
+            <p className="font-mono text-[10px] text-muted-foreground md:text-xs">{variant}</p>
+            <p className="font-mono text-base font-bold text-foreground md:text-lg">{verdict}</p>
           </div>
           <SubmissionStatusBadge verdict={summary.verdictCode ?? null} status={statusLabel} />
         </div>
-        <div className="mt-3 grid grid-cols-3 gap-4 text-xs text-muted-foreground">
+        <div className="mt-2 grid grid-cols-3 gap-2 font-mono text-[10px] text-muted-foreground md:mt-3 md:gap-4 md:text-xs">
           <div>
             <p>Passed</p>
-            <p className="text-base font-medium text-foreground">{summary?.passed ?? 0}</p>
+            <p className="font-mono text-sm font-medium text-foreground md:text-base">
+              {summary?.passed ?? 0}
+            </p>
           </div>
           <div>
             <p>Failed</p>
-            <p className="text-base font-medium text-foreground">{summary?.failed ?? 0}</p>
+            <p className="font-mono text-sm font-medium text-foreground md:text-base">
+              {summary?.failed ?? 0}
+            </p>
           </div>
           <div>
             <p>Runtime</p>
-            <p className="text-base font-medium text-foreground">
+            <p className="truncate font-mono text-sm font-medium text-foreground md:text-base">
               {summary?.runtimeMs ? `${summary.runtimeMs} ms` : "—"}
             </p>
           </div>
@@ -1087,18 +1239,18 @@ function ResultPanel({ result }: { result: WorkspaceResult | null }) {
       </div>
       <div>
         {result.cases.length === 0 ? (
-          <p className="text-xs text-muted-foreground">No per-test details yet.</p>
+          <p className="font-mono text-[10px] text-muted-foreground md:text-xs">No per-test details yet.</p>
         ) : (
-          <div className="space-y-2">
+          <div className="max-h-64 space-y-2 overflow-auto md:max-h-80">
             {result.cases.map((test) => (
               <motion.div
                 key={`${test.ordinal}-${test.verdictCode}`}
                 initial={{ opacity: 0, y: 6 }}
                 animate={{ opacity: 1, y: 0 }}
-                className="rounded-lg border border-white/5 bg-background/60 p-3 text-xs"
+                className="border-2 border-border bg-background p-2 font-mono text-[10px] md:p-3 md:text-xs"
               >
                 <div className="flex items-center justify-between">
-                  <p className="font-medium text-foreground">Test #{test.ordinal}</p>
+                  <p className="font-mono font-medium text-foreground">Test #{test.ordinal}</p>
                   <SubmissionStatusBadge
                     verdict={test.verdictCode}
                     status={test.status}
@@ -1106,16 +1258,18 @@ function ResultPanel({ result }: { result: WorkspaceResult | null }) {
                   />
                 </div>
                 {test.inputPreview && (
-                  <p className="mt-2 text-muted-foreground">
-                    <span className="font-semibold text-foreground">In:</span> {test.inputPreview}
+                  <p className="mt-1 truncate font-mono text-muted-foreground md:mt-2">
+                    <span className="font-bold text-foreground">In:</span> {test.inputPreview}
                   </p>
                 )}
                 {test.actualOutput && (
-                  <p className="mt-1 text-muted-foreground">
-                    <span className="font-semibold text-foreground">Out:</span> {test.actualOutput}
+                  <p className="mt-1 truncate font-mono text-muted-foreground">
+                    <span className="font-bold text-foreground">Out:</span> {test.actualOutput}
                   </p>
                 )}
-                {test.stderr ? <p className="mt-1 text-rose-400">stderr: {test.stderr}</p> : null}
+                {test.stderr ? (
+                  <p className="mt-1 truncate font-mono text-destructive">stderr: {test.stderr}</p>
+                ) : null}
               </motion.div>
             ))}
           </div>
@@ -1135,48 +1289,63 @@ function PreferencesMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-9 flex-1 gap-2 rounded-none border-2 border-border font-mono text-sm hover:border-primary/50 hover:bg-accent md:flex-initial"
+        >
           <Settings02Icon className="h-4 w-4" strokeWidth={2} />
-          Preferences
+          <span className="hidden md:inline">Preferences</span>
+          <span className="md:hidden">Prefs</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-60 space-y-2 p-3 text-sm">
-        <DropdownMenuLabel>Editor theme</DropdownMenuLabel>
+      <DropdownMenuContent
+        align="end"
+        className="w-56 space-y-2 rounded-none border-2 border-border bg-background p-3 font-mono text-xs md:w-60 md:text-sm"
+      >
+        <DropdownMenuLabel className="font-mono text-[10px] font-bold uppercase md:text-xs">
+          Editor theme
+        </DropdownMenuLabel>
         <div className="flex gap-2">
           {(["system", "light", "dark"] as const).map((theme) => (
             <Button
               key={theme}
               variant={preferences.theme === theme ? "default" : "outline"}
               size="sm"
-              className="flex-1"
+              className="flex-1 rounded-none border-2 font-mono text-[10px] md:text-xs"
               onClick={() => onChange({ ...preferences, theme })}
             >
               {theme}
             </Button>
           ))}
         </div>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel>Font size</DropdownMenuLabel>
+        <DropdownMenuSeparator className="bg-border" />
+        <DropdownMenuLabel className="font-mono text-[10px] font-bold uppercase md:text-xs">
+          Font size
+        </DropdownMenuLabel>
         <Input
           type="range"
           min={12}
           max={20}
           value={preferences.fontSize}
           onChange={(event) => onChange({ ...preferences, fontSize: Number(event.target.value) })}
+          className="rounded-none border-2 border-border"
         />
-        <DropdownMenuSeparator />
-        <div className="flex items-center justify-between text-xs">
+        <DropdownMenuSeparator className="bg-border" />
+        <div className="flex items-center justify-between font-mono text-[10px] md:text-xs">
           <span>Wrap lines</span>
           <Switch
             checked={preferences.wrapLines}
             onCheckedChange={(checked) => onChange({ ...preferences, wrapLines: checked })}
+            className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground"
           />
         </div>
-        <div className="flex items-center justify-between text-xs">
+        <div className="flex items-center justify-between font-mono text-[10px] md:text-xs">
           <span>Show minimap</span>
           <Switch
             checked={preferences.showMinimap}
             onCheckedChange={(checked) => onChange({ ...preferences, showMinimap: checked })}
+            className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground"
           />
         </div>
       </DropdownMenuContent>

From 6a84fcd78ff41b948691920c73046a80abf6801d Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sat, 17 Aug 2024 17:00:00 +0430
Subject: [PATCH 06/21] config: add problems configuration file

---
 config/problems.ts | 232 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 config/problems.ts

diff --git a/config/problems.ts b/config/problems.ts
new file mode 100644
index 0000000..da5c6fc
--- /dev/null
+++ b/config/problems.ts
@@ -0,0 +1,232 @@
+export const problemsConfig = {
+  library: {
+    badge: "LIBRARY",
+    headline: "Problem Library",
+    description: "Browse algorithmic challenges with tags, difficulty filters, and fast search.",
+    search: {
+      placeholder: "Search problems…",
+      resetFilters: "Reset Filters",
+    },
+    sort: {
+      relevance: "Relevance",
+      newest: "Newest",
+      difficulty: "Difficulty ↑",
+      difficulty_desc: "Difficulty ↓",
+    },
+    filters: {
+      difficulty: "Difficulty",
+      status: "Status",
+      tags: "Tags",
+      editorial: "Has Editorial",
+    },
+    states: {
+      loading: "Loading problems…",
+      empty: {
+        title: "No problems found",
+        description: "Try adjusting your filters or search query.",
+        clearFilters: "Clear Filters",
+      },
+      error: {
+        title: "Failed to load problems",
+        description: "Please refresh and try again.",
+        retry: "Retry",
+      },
+    },
+    stats: {
+      problems: "problems",
+      showing: "Showing",
+      of: "of",
+    },
+  },
+  detail: {
+    badge: "PROBLEM",
+    breadcrumb: {
+      home: "Problems",
+    },
+    sections: {
+      statement: "Statement",
+      constraints: "Constraints",
+      examples: "Examples",
+      notes: "Notes",
+      samples: "Samples",
+    },
+    actions: {
+      copy: "Copy URL",
+      copied: "Copied",
+      bookmark: "Bookmark",
+      unbookmark: "Remove bookmark",
+      report: "Report",
+      editorial: "Editorial",
+      discuss: "Discuss",
+      trails: "Trails",
+      submissions: "My Submissions",
+    },
+    workspace: {
+      title: "Ready to solve",
+      actions: {
+        statement: "Statement",
+        preferences: "Preferences",
+        reset: "Reset",
+        copy: "Copy",
+        save: "Save",
+        run: "Run Samples",
+        submit: "Submit",
+      },
+      console: {
+        title: "Console",
+        empty: "Console output will appear here.",
+      },
+      tabs: {
+        run: "Run output",
+        judge: "Judge",
+        description: "Description",
+        editorial: "Editorial",
+        submissions: "Submissions",
+        drafts: "My Code",
+      },
+      states: {
+        saving: "Saving…",
+        saved: "Saved",
+        offline:
+          "Offline mode — drafts stay local and sample runs fall back to the local simulator.",
+        presence:
+          "Another tab is editing this problem. To avoid overwriting drafts, close other sessions.",
+        manualOnly:
+          "This problem is reviewed manually. Expect longer turnaround while a curator scores your submission.",
+        manualHybrid:
+          "Hybrid judging enabled — the auto judge runs first, followed by a manual reviewer.",
+        antiCheat: {
+          title: "Anti-cheat guard active",
+          reminder: "Tab switches, large pastes, and multi-device logins trigger reviews.",
+        },
+        disqualified:
+          "You have been disqualified from this contest. Submissions are blocked for this window.",
+        customInput: "Custom Input",
+        customInputPlaceholder: "stdin sent to the runner",
+        noSubmissions: "No submissions yet.",
+        noDrafts: "No cloud drafts yet.",
+        editorialLocked: "Editorial locked",
+        editorialLockedDescription: "View the full write-up once it is released.",
+        restore: "Restore",
+        viewHistory: "View history",
+      },
+      result: {
+        empty: "Run samples or submit to see verdicts.",
+        manualPending:
+          "Manual review pending — we'll update this panel once a reviewer posts a verdict.",
+        variants: {
+          samples: "Samples",
+          judge: "Judge",
+        },
+        metrics: {
+          passed: "Passed",
+          failed: "Failed",
+          runtime: "Runtime",
+        },
+        test: "Test",
+        input: "In:",
+        output: "Out:",
+        stderr: "stderr:",
+        noDetails: "No per-test details yet.",
+      },
+      preferences: {
+        title: "Preferences",
+        editorTheme: "Editor theme",
+        fontSize: "Font size",
+        wrapLines: "Wrap lines",
+        showMinimap: "Show minimap",
+        themes: {
+          system: "system",
+          light: "light",
+          dark: "dark",
+        },
+      },
+    },
+  },
+  discuss: {
+    badge: "DISCUSSIONS",
+    headline: "Problem Discussions",
+    description: "Discuss hints, tricky cases, and approaches with the community.",
+    composer: {
+      badge: "START A THREAD",
+      headline: "New Discussion",
+      placeholder: "Thread title",
+      contentPlaceholder: "Share your question or hint",
+      submitButton: "Start discussion",
+      spoilerLabel: "Mark as spoiler",
+    },
+    tabs: {
+      threads: "Threads",
+      top: "Top",
+      recent: "Recent",
+      unanswered: "Unanswered",
+    },
+    states: {
+      loading: "Loading discussions…",
+      empty: {
+        title: "No discussions yet",
+        description: "Start the conversation above",
+      },
+      loadMore: "Load more",
+      loadingMore: "Loading…",
+      selectThread: "Select a thread",
+      pickThread: "Pick a thread to read the discussion.",
+    },
+    sidebar: {
+      problem: "Problem",
+      tags: "Tags",
+      editorial: "View editorial",
+      rules: {
+        title: "House rules",
+        items: [
+          "Share hints, not full solutions.",
+          "Mark spoilers and be respectful.",
+          "Report abuse so moderators can step in.",
+        ],
+      },
+    },
+    thread: {
+      badge: "DISCUSSION",
+      backLink: "Back to discussions",
+      replies: "Replies",
+      replyCount: "replies",
+    },
+  },
+  editorial: {
+    badge: "EDITORIAL",
+    headline: "Editorial",
+    description: "Official solution and walkthrough for this problem.",
+    actions: {
+      backToProblem: "Back to problem",
+      viewDiscussions: "View discussions",
+    },
+    states: {
+      released: "Released",
+      locked: "Locked",
+      scheduledPrefix: "Scheduled to unlock",
+      lockedTitle: "Editorial locked",
+      lockedDescription: "This write-up unlocks",
+      lockedFallback: "Editors will publish this walkthrough soon.",
+    },
+    hints: {
+      title: "Hints refresher",
+    },
+  },
+  trails: {
+    badge: "TRAILS",
+    headline: "Approach trails",
+    description:
+      "Map the insights solvers used to unlock this problem and contribute your own breadcrumb.",
+    actions: {
+      backToProblem: "Back to problem",
+      viewDiscussions: "View discussions",
+    },
+  },
+  tagLibrary: {
+    badge: "TAG",
+    headlinePrefix: "Problems tagged",
+    description: "Browse public problems filtered by this tag.",
+  },
+};
+
+export type ProblemsConfig = typeof problemsConfig;

From 5a139a4f6b47473854cec0cb688c7243fa5f9dda Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Tue, 20 Aug 2024 11:45:00 +0430
Subject: [PATCH 07/21] refactor: redesign leaderboard client with OpenSolve
 design

---
 .../leaderboards/leaderboard-client.tsx       | 227 ++++++++++--------
 1 file changed, 124 insertions(+), 103 deletions(-)

diff --git a/components/leaderboards/leaderboard-client.tsx b/components/leaderboards/leaderboard-client.tsx
index 95036ef..0ebd1ae 100644
--- a/components/leaderboards/leaderboard-client.tsx
+++ b/components/leaderboards/leaderboard-client.tsx
@@ -1,23 +1,18 @@
 "use client";
 
+import { formatDistanceToNow } from "date-fns";
+import Link from "next/link";
+import { useState } from "react";
+
+import { LoaderCircle, Send, Trophy, User } from "@/components/icons";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { leaderboardsConfig } from "@/config/leaderboards";
 import { useLeaderboardRealtime } from "@/hooks/use-leaderboard-realtime";
 import type { LeaderboardEntry, LeaderboardWindow } from "@/lib/leaderboard/service";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
-import { formatDistanceToNow } from "date-fns";
-import { Award01Icon, Loading03Icon, Medal01Icon } from "hugeicons-react";
-import Link from "next/link";
-import { useState } from "react";
-
-const WINDOW_TABS: Array<{ value: LeaderboardWindow; label: string }> = [
-  { value: "all_time", label: "All time" },
-  { value: "monthly", label: "Monthly" },
-  { value: "weekly", label: "Weekly" },
-];
 
 const PAGE_SIZE = 30;
 
@@ -198,64 +193,79 @@ function LeaderboardSection({
   hasMore,
   loadMore,
 }: LeaderboardSectionProps) {
+  const { section } = leaderboardsConfig;
+
   return (
     <div className="space-y-6">
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div className="space-y-1">
-          <div className="flex items-center gap-3">
-            <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-            <Badge
-              variant="secondary"
-              className="rounded-full text-[10px] font-semibold uppercase tracking-wide"
-            >
-              Live
-            </Badge>
+      <div className="border-2 border-border bg-background p-6">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-4">
+          <div className="space-y-2">
+            <div className="flex items-center gap-3">
+              <h1 className="font-mono text-2xl font-black uppercase sm:text-3xl">{title}</h1>
+              <Badge
+                variant="secondary"
+                className="rounded-none border border-success/30 bg-success/10 font-mono text-[10px] font-bold uppercase text-success"
+              >
+                {section.badge}
+              </Badge>
+            </div>
+            {subtitle && <p className="font-mono text-sm text-muted-foreground">{subtitle}</p>}
           </div>
-          {subtitle ? <p className="text-sm text-muted-foreground">{subtitle}</p> : null}
-        </div>
-        {onWindowChange ? (
-          <Tabs
-            value={window}
-            onValueChange={(value) => onWindowChange(value as LeaderboardWindow)}
-          >
-            <TabsList className="rounded-xl">
-              {WINDOW_TABS.map((tab) => (
-                <TabsTrigger key={tab.value} value={tab.value} className="rounded-lg capitalize">
+          {onWindowChange && (
+            <div className="grid grid-cols-3 gap-px border-2 border-border bg-border">
+              {section.windows.map((tab) => (
+                <button
+                  key={tab.value}
+                  onClick={() => onWindowChange(tab.value as LeaderboardWindow)}
+                  className={`border-none bg-background px-4 py-2 font-mono text-xs font-bold uppercase transition-colors hover:bg-accent ${
+                    window === tab.value
+                      ? "bg-primary/5 text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  }`}
+                >
                   {tab.label}
-                </TabsTrigger>
+                </button>
               ))}
-            </TabsList>
-          </Tabs>
-        ) : null}
+            </div>
+          )}
+        </div>
       </div>
+
       <LeaderboardHero hero={hero} meta={meta} />
-      {viewerEntry ? <ViewerBadge entry={viewerEntry} /> : null}
+      {viewerEntry && <ViewerBadge entry={viewerEntry} />}
       <LeaderboardTable entries={entries} isLoading={isLoading} />
-      <div className="flex flex-wrap items-center justify-between gap-4 pt-2 text-xs text-muted-foreground">
+
+      <div className="flex flex-wrap items-center justify-between gap-4 border-2 border-border bg-background p-4 font-mono text-xs text-muted-foreground">
         <p>
-          Updated{" "}
+          {section.meta.updated}{" "}
           {meta?.generatedAt
             ? formatDistanceToNow(new Date(meta.generatedAt), { addSuffix: true })
-            : "recently"}
+            : section.meta.recent}
+        </p>
+        <p>
+          {meta?.totalEntries
+            ? `${meta.totalEntries.toLocaleString()} ${section.meta.competitors}`
+            : null}
         </p>
-        <p>{meta?.totalEntries ? `${meta.totalEntries.toLocaleString()} competitors` : null}</p>
       </div>
-      {hasMore ? (
+
+      {hasMore && (
         <Button
           onClick={loadMore}
           disabled={isFetchingMore}
           variant="outline"
-          className="w-full rounded-xl"
+          className="h-11 w-full rounded-none border-2 border-border font-mono text-sm font-bold uppercase hover:border-primary/50"
         >
           {isFetchingMore ? (
             <>
-              <Loading03Icon className="mr-2 h-4 w-4 animate-spin" strokeWidth={2} /> Loading more
+              <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+              {section.actions.loadingMore}
             </>
           ) : (
-            "Load more"
+            section.actions.loadMore
           )}
         </Button>
-      ) : null}
+      )}
     </div>
   );
 }
@@ -267,52 +277,55 @@ function LeaderboardHero({
   hero: LeaderboardEntry[];
   meta?: { periodStart: Date | null; periodEnd: Date | null } | null;
 }) {
+  const { section } = leaderboardsConfig;
+
   if (hero.length === 0) {
     return null;
   }
+
   const range = meta?.periodStart ? formatRange(meta.periodStart, meta?.periodEnd ?? null) : null;
+
   return (
-    <div className="grid gap-6 md:grid-cols-3">
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {hero.map((entry, index) => (
         <div
           key={entry.user.id}
           className={cn(
-            "premium-card space-y-4 rounded-2xl p-6",
-            index === 0 && "border-primary/40 shadow-lg shadow-primary/10",
+            "border-2 border-border bg-background p-6",
+            index === 0 && "border-primary/50 bg-primary/5",
           )}
         >
-          <div className="flex items-center gap-3">
+          <div className="mb-4 flex items-center gap-3">
             <div
               className={cn(
-                "flex h-12 w-12 items-center justify-center rounded-xl",
-                index === 0 ? "bg-primary/10" : "bg-muted",
+                "flex h-12 w-12 items-center justify-center border-2",
+                index === 0 ? "border-primary bg-primary/10" : "border-border bg-background",
               )}
             >
-              <Award01Icon
+              <Trophy
                 className={cn("h-6 w-6", index === 0 ? "text-primary" : "text-muted-foreground")}
-                strokeWidth={2}
               />
             </div>
             <div className="min-w-0 flex-1">
-              <p className="text-lg font-bold">
+              <p className="font-mono text-base font-bold">
                 #{entry.rank} {entry.user.handle}
               </p>
-              {range ? <p className="truncate text-xs text-muted-foreground">{range}</p> : null}
+              {range && <p className="truncate font-mono text-xs text-muted-foreground">{range}</p>}
             </div>
           </div>
-          <div className="flex items-center justify-around rounded-xl border border-border/50 bg-card/30 py-3">
+          <div className="flex items-center justify-around border-2 border-border bg-background/50 py-4">
             <div className="text-center">
-              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                Score
+              <p className="font-mono text-xs font-bold uppercase tracking-wide text-muted-foreground">
+                {section.hero.score}
               </p>
-              <p className="text-2xl font-bold">{formatScore(entry.score)}</p>
+              <p className="font-mono text-2xl font-bold">{formatScore(entry.score)}</p>
             </div>
             <div className="h-8 w-px bg-border" />
             <div className="text-center">
-              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                Solved
+              <p className="font-mono text-xs font-bold uppercase tracking-wide text-muted-foreground">
+                {section.hero.solved}
               </p>
-              <p className="text-2xl font-bold">{entry.solved}</p>
+              <p className="font-mono text-2xl font-bold">{entry.solved}</p>
             </div>
           </div>
         </div>
@@ -326,12 +339,16 @@ type ViewerBadgeProps = {
 };
 
 function ViewerBadge({ entry }: ViewerBadgeProps) {
+  const { section } = leaderboardsConfig;
+
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-primary/30 bg-primary/5 px-6 py-4 text-sm">
-      <Medal01Icon className="h-5 w-5 text-primary" strokeWidth={2} />
-      <p className="font-medium text-primary">
-        You&apos;re currently ranked <span className="font-bold">#{entry.rank}</span> with{" "}
-        <span className="font-bold">{Math.round(entry.score)}</span> points
+    <div className="flex items-center gap-3 border-2 border-primary/30 bg-primary/5 px-6 py-4 font-mono text-sm">
+      <Send className="h-5 w-5 text-primary" />
+      <p className="text-foreground">
+        {section.viewer.prefix} <span className="font-bold text-primary">#{entry.rank}</span>{" "}
+        {section.viewer.with}{" "}
+        <span className="font-bold text-primary">{Math.round(entry.score)}</span>{" "}
+        {section.viewer.points}
       </p>
     </div>
   );
@@ -343,6 +360,8 @@ type TableProps = {
 };
 
 function LeaderboardTable({ entries, isLoading }: TableProps) {
+  const { section } = leaderboardsConfig;
+
   const showSubmissions = entries.some((entry) => typeof entry.submissions === "number");
   const showAvgRuntime = entries.some(
     (entry) => typeof entry.avgRuntimeMs === "number" && entry.avgRuntimeMs !== null,
@@ -353,64 +372,66 @@ function LeaderboardTable({ entries, isLoading }: TableProps) {
 
   if (isLoading && entries.length === 0) {
     return (
-      <div className="premium-card rounded-2xl p-12">
-        <div className="flex items-center justify-center text-muted-foreground">
-          <Loading03Icon className="mr-2 h-5 w-5 animate-spin" strokeWidth={2} /> Loading
-          leaderboard…
-        </div>
+      <div className="flex items-center justify-center border-2 border-border bg-background p-16 font-mono text-sm text-muted-foreground">
+        <LoaderCircle className="mr-2 h-5 w-5 animate-spin" />
+        {section.table.loading}
       </div>
     );
   }
 
   if (entries.length === 0) {
     return (
-      <div className="premium-card rounded-2xl p-12">
-        <p className="text-center text-muted-foreground">
-          Leaderboard entries will appear once submissions are available
-        </p>
+      <div className="border-2 border-dashed border-border bg-background p-16 text-center font-mono text-sm text-muted-foreground">
+        {section.table.empty}
       </div>
     );
   }
 
   return (
-    <div className="premium-card overflow-hidden rounded-2xl">
-      <div className="hidden border-b bg-muted/30 text-xs font-semibold uppercase tracking-wide text-muted-foreground lg:grid lg:grid-cols-12">
-        <span className="col-span-1 px-6 py-4">Rank</span>
-        <span className="col-span-4 px-6 py-4">Competitor</span>
-        <span className="col-span-2 px-6 py-4">Score</span>
-        <span className="col-span-2 px-6 py-4">Solved</span>
-        {showSubmissions ? <span className="col-span-1 px-6 py-4">Attempts</span> : null}
-        {showPenalty ? <span className="col-span-1 px-6 py-4">Penalty</span> : null}
-        {showAvgRuntime ? <span className="col-span-1 px-6 py-4">Runtime</span> : null}
+    <div className="overflow-hidden border-2 border-border bg-background">
+      <div className="hidden border-b-2 border-border bg-muted/30 font-mono text-xs font-bold uppercase text-muted-foreground lg:grid lg:grid-cols-12">
+        <span className="col-span-1 px-6 py-4">{section.table.headers.rank}</span>
+        <span className="col-span-4 px-6 py-4">{section.table.headers.competitor}</span>
+        <span className="col-span-2 px-6 py-4">{section.table.headers.score}</span>
+        <span className="col-span-2 px-6 py-4">{section.table.headers.solved}</span>
+        {showSubmissions && (
+          <span className="col-span-1 px-6 py-4">{section.table.headers.attempts}</span>
+        )}
+        {showPenalty && (
+          <span className="col-span-1 px-6 py-4">{section.table.headers.penalty}</span>
+        )}
+        {showAvgRuntime && (
+          <span className="col-span-1 px-6 py-4">{section.table.headers.runtime}</span>
+        )}
       </div>
-      <div className="divide-y divide-border/50">
+      <div className="divide-y-2 divide-border">
         {entries.map((entry, index) => (
           <div
             key={`${entry.user.id}-${entry.rank}-${index}`}
-            className="grid grid-cols-2 items-center gap-3 px-6 py-5 text-sm smooth-transition hover:bg-muted/30 lg:grid-cols-12"
+            className="grid grid-cols-2 items-center gap-3 px-6 py-5 font-mono text-sm transition-colors hover:bg-accent lg:grid-cols-12"
           >
             <div className="col-span-2 flex items-center gap-2 lg:col-span-1">
-              <span className="text-base font-bold">#{entry.rank}</span>
+              <span className="text-base font-bold text-primary">#{entry.rank}</span>
             </div>
             <div className="col-span-2 flex items-center gap-3 lg:col-span-4">
-              <Avatar className="h-11 w-11 ring-2 ring-border/30 ring-offset-2 ring-offset-background">
+              <Avatar className="h-11 w-11 rounded-none border-2 border-border">
                 {entry.user.avatarUrl ? (
                   <AvatarImage src={entry.user.avatarUrl} alt={entry.user.handle} />
                 ) : null}
-                <AvatarFallback className="text-xs font-semibold">
-                  {entry.user.handle.slice(0, 2).toUpperCase()}
+                <AvatarFallback className="rounded-none bg-primary/10 font-mono text-xs font-bold uppercase text-primary">
+                  <User className="h-4 w-4" />
                 </AvatarFallback>
               </Avatar>
               <div className="min-w-0 flex-1">
                 <Link
                   href={`/u/${entry.user.handle}`}
-                  className="font-semibold text-primary hover:underline"
+                  className="font-bold text-foreground hover:text-primary hover:underline"
                 >
                   @{entry.user.handle}
                 </Link>
                 <div className="flex items-center gap-2 text-xs text-muted-foreground">
                   <RoleBadge role={entry.user.role} status={entry.user.status} />
-                  {entry.user.country ? <span>{formatCountry(entry.user.country)}</span> : null}
+                  {entry.user.country && <span>{formatCountry(entry.user.country)}</span>}
                 </div>
               </div>
             </div>
@@ -418,23 +439,23 @@ function LeaderboardTable({ entries, isLoading }: TableProps) {
               <p className="text-base font-bold">{formatScore(entry.score)}</p>
             </div>
             <div className="col-span-1 lg:col-span-2">
-              <p className="font-semibold">{entry.solved}</p>
+              <p className="font-bold">{entry.solved}</p>
             </div>
-            {showSubmissions ? (
+            {showSubmissions && (
               <div className="col-span-1">
                 {typeof entry.submissions === "number" ? entry.submissions : "–"}
               </div>
-            ) : null}
-            {showPenalty ? (
+            )}
+            {showPenalty && (
               <div className="col-span-1 text-xs text-muted-foreground">
                 {typeof entry.timePenalty === "number" ? `${entry.timePenalty}` : "–"}
               </div>
-            ) : null}
-            {showAvgRuntime ? (
+            )}
+            {showAvgRuntime && (
               <div className="col-span-1 text-xs text-muted-foreground">
                 {entry.avgRuntimeMs ? `${Math.round(entry.avgRuntimeMs)} ms` : "–"}
               </div>
-            ) : null}
+            )}
           </div>
         ))}
       </div>
@@ -445,21 +466,21 @@ function LeaderboardTable({ entries, isLoading }: TableProps) {
 function RoleBadge({ role, status }: { role: string; status: string }) {
   if (status === "SHADOW_BANNED") {
     return (
-      <Badge variant="destructive" className="rounded-full text-[10px]">
+      <Badge variant="destructive" className="rounded-none border font-mono text-[10px] font-bold">
         Shadow Banned
       </Badge>
     );
   }
   if (role === "ADMIN") {
     return (
-      <Badge variant="secondary" className="rounded-full text-[10px]">
+      <Badge variant="secondary" className="rounded-none border font-mono text-[10px] font-bold">
         Admin
       </Badge>
     );
   }
   if (role === "PROBLEM_CURATOR") {
     return (
-      <Badge variant="outline" className="rounded-full text-[10px]">
+      <Badge variant="outline" className="rounded-none border font-mono text-[10px] font-bold">
         Curator
       </Badge>
     );

From c991d0e0924d194e395b5d4aebd6fbe84304d0c7 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Wed, 21 Aug 2024 15:00:00 +0430
Subject: [PATCH 08/21] config: add leaderboards configuration file

---
 config/leaderboards.ts | 80 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 config/leaderboards.ts

diff --git a/config/leaderboards.ts b/config/leaderboards.ts
new file mode 100644
index 0000000..68dab62
--- /dev/null
+++ b/config/leaderboards.ts
@@ -0,0 +1,80 @@
+export const leaderboardsConfig = {
+  global: {
+    badge: "RANKINGS",
+    headline: {
+      line1: "LEADERBOARDS",
+      line2: "& RANKINGS",
+    },
+    description:
+      "Discover the most consistent problem solvers across weekly, monthly, and all-time windows. Rankings update in real-time based on solve count, difficulty weighting, and time penalties.",
+    overview: {
+      title: "Top performers",
+      subtitle: "Current ranking snapshots",
+      emptyState: "No data yet",
+    },
+    callouts: {
+      difficulty: {
+        title: "Difficulty capsules",
+        description: "Compare how solvers perform on easy, medium, and hard sets independently.",
+        levels: ["easy", "medium", "hard"],
+      },
+      tags: {
+        title: "Tag spotlights",
+        description: "Track mastery for specific topics like DP, graphs, and arrays.",
+        featured: ["graphs", "dp", "arrays"],
+      },
+    },
+  },
+  section: {
+    badge: "LIVE RANKINGS",
+    meta: {
+      updated: "Updated",
+      competitors: "competitors",
+      recent: "recently",
+    },
+    windows: [
+      { value: "all_time", label: "All time" },
+      { value: "monthly", label: "Monthly" },
+      { value: "weekly", label: "Weekly" },
+    ],
+    hero: {
+      rank: "Rank",
+      score: "Score",
+      solved: "Solved",
+      periodLabel: "Period",
+    },
+    viewer: {
+      prefix: "You're currently ranked",
+      with: "with",
+      points: "points",
+    },
+    table: {
+      headers: {
+        rank: "Rank",
+        competitor: "Competitor",
+        score: "Score",
+        solved: "Solved",
+        attempts: "Attempts",
+        penalty: "Penalty",
+        runtime: "Runtime",
+      },
+      empty: "Leaderboard entries will appear once submissions are available",
+      loading: "Loading leaderboard...",
+    },
+    actions: {
+      loadMore: "Load more",
+      loadingMore: "Loading more...",
+      viewFull: "View full board",
+    },
+  },
+  difficulty: {
+    title: "leaderboard",
+    subtitle: "Focused look at",
+    practice: "practice",
+  },
+  tag: {
+    subtitle: "Topic-specific rankings",
+  },
+};
+
+export type LeaderboardsConfig = typeof leaderboardsConfig;

From 79d886e5e9ff96785156a7a109c982ee0223e014 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Fri, 23 Aug 2024 10:00:00 +0430
Subject: [PATCH 09/21] refactor: redesign trails board component

---
 components/trails/trails-board.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/trails/trails-board.tsx b/components/trails/trails-board.tsx
index f37db2b..c4aacab 100644
--- a/components/trails/trails-board.tsx
+++ b/components/trails/trails-board.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { trpc } from "@/lib/trpc/client";
 import { TrailInsightCard } from "@/components/trails/trail-insight-card";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -12,12 +13,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Badge } from "@/components/ui/badge";
-import { toast } from "sonner";
-import { useMemo, useState } from "react";
+import { trpc } from "@/lib/trpc/client";
 import type { TrailInsightCategory } from "@prisma/client";
 import Link from "next/link";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
 
 type TrailsBoardProps = {
   problemId: string;
@@ -64,7 +64,7 @@ export function TrailsBoard({ problemId }: TrailsBoardProps) {
 
   return (
     <div className="space-y-6">
-      <section className="rounded-3xl border border-border/70 bg-card/80 p-6">
+      <section className="border border-border/70 bg-card/80 p-6">
         {canContribute ? (
           <form className="space-y-4" onSubmit={handleSubmit}>
             <div className="grid gap-4 md:grid-cols-2">
@@ -141,7 +141,7 @@ export function TrailsBoard({ problemId }: TrailsBoardProps) {
         <div className="space-y-3">
           <h3 className="text-sm font-semibold uppercase text-muted-foreground">Insight stream</h3>
           {insights.length === 0 ? (
-            <p className="rounded-3xl border border-dashed border-border/60 p-6 text-sm text-muted-foreground">
+            <p className="border border-dashed border-border/60 p-6 text-sm text-muted-foreground">
               Nothing yet. Share your first insight!
             </p>
           ) : (
@@ -152,7 +152,7 @@ export function TrailsBoard({ problemId }: TrailsBoardProps) {
             </div>
           )}
         </div>
-        <div className="space-y-3 rounded-3xl border border-border/70 bg-card/70 p-6">
+        <div className="space-y-3 border border-border/70 bg-card/70 p-6">
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-semibold uppercase text-muted-foreground">
               Common next steps

From c3b9495a89a0052988db834b36fa5ed3893dafc6 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sat, 24 Aug 2024 14:30:00 +0430
Subject: [PATCH 10/21] refactor: update admin and staff problem components

---
 .../admin/problems/admin-problems-client.tsx  |  18 ++--
 .../staff/problems/problem-editor-shell.tsx   | 100 +++++++++---------
 2 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/components/admin/problems/admin-problems-client.tsx b/components/admin/problems/admin-problems-client.tsx
index db4c4e3..a933aae 100644
--- a/components/admin/problems/admin-problems-client.tsx
+++ b/components/admin/problems/admin-problems-client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { trpc } from "@/lib/trpc/client";
-import type { AppRouter } from "@/lib/trpc/router";
-import type { inferRouterOutputs } from "@trpc/server";
-import { useEffect, useState } from "react";
+import { BookOpenCheck, Search } from "@/components/icons";
 import {
   Badge,
   Card,
@@ -17,10 +14,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui";
+import { trpc } from "@/lib/trpc/client";
+import type { AppRouter } from "@/lib/trpc/router";
+import { ProblemState, ProblemVisibility } from "@prisma/client";
+import type { inferRouterOutputs } from "@trpc/server";
 import { formatDistanceToNow } from "date-fns";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { ProblemState, ProblemVisibility } from "@prisma/client";
-import { BookOpenCheck, Search } from "@/components/icons";
 
 type ProblemListResponse = inferRouterOutputs<AppRouter>["admin"]["problems"]["list"];
 
@@ -81,7 +81,7 @@ export function AdminProblemsClient({ initialData }: { initialData: ProblemListR
           </span>
         </div>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <div className="flex flex-1 items-center gap-2 rounded-xl border border-border/60 bg-background px-3 py-1.5">
+          <div className="flex flex-1 items-center gap-2 border border-border/60 bg-background px-3 py-1.5">
             <Search className="h-4 w-4 text-muted-foreground" />
             <Input
               value={query}
@@ -128,7 +128,7 @@ export function AdminProblemsClient({ initialData }: { initialData: ProblemListR
         {problems.map((problem) => (
           <div
             key={problem.id}
-            className="rounded-xl border border-border/60 bg-background/80 p-4 transition hover:border-primary/40"
+            className="border border-border/60 bg-background/80 p-4 transition hover:border-primary/40"
           >
             <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
               <div>
@@ -192,7 +192,7 @@ export function AdminProblemsClient({ initialData }: { initialData: ProblemListR
           </div>
         ))}
         {problems.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
+          <div className="border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
             No problems match that filter.
           </div>
         ) : null}
diff --git a/components/staff/problems/problem-editor-shell.tsx b/components/staff/problems/problem-editor-shell.tsx
index abb66f8..71fb979 100644
--- a/components/staff/problems/problem-editor-shell.tsx
+++ b/components/staff/problems/problem-editor-shell.tsx
@@ -1,14 +1,37 @@
 "use client";
 
-import { trpc } from "@/lib/trpc/client";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
+import { CodeEditor } from "@/components/code/code-editor";
+import { RichTextEditor } from "@/components/editor/rich-text-editor";
+import {
+  Eye,
+  FileText,
+  Info,
+  Loader2,
+  Plus,
+  RotateCcw,
+  Save,
+  Send,
+  ShieldAlert,
+  ShieldCheck,
+  Trash2,
+  UserPlus,
+} from "@/components/icons";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -16,6 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
   Table,
   TableBody,
@@ -24,46 +48,22 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { CodeEditor } from "@/components/code/code-editor";
-import { RichTextEditor } from "@/components/editor/rich-text-editor";
-import {
-  Loader2,
-  Plus,
-  Save,
-  Send,
-  ShieldCheck,
-  ShieldAlert,
-  UserPlus,
-  Trash2,
-  RotateCcw,
-  Info,
-  Eye,
-  FileText,
-} from "@/components/icons";
-import { cn } from "@/lib/utils";
-import { getDefaultCodeStub } from "@/lib/problems/editor-presets";
 import { SUPPORTED_LANGUAGES, type SupportedLanguage } from "@/lib/constants";
-import type { ProblemVisibility, Tag } from "@prisma/client";
+import { getDefaultCodeStub } from "@/lib/problems/editor-presets";
+import { invalidateTags } from "@/lib/react-query/invalidation";
 import { uploadImageToMinio } from "@/lib/storage/minio-upload";
-import TurndownService from "turndown";
-import { marked } from "marked";
-import { TagInput, type Tag as EmblorTag } from "emblor";
+import { trpc } from "@/lib/trpc/client";
+import { cn } from "@/lib/utils";
+import type { ProblemVisibility, Tag } from "@prisma/client";
 import { useQueryClient } from "@tanstack/react-query";
-import { invalidateTags } from "@/lib/react-query/invalidation";
+import { TagInput, type Tag as EmblorTag } from "emblor";
+import { marked } from "marked";
+import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import TurndownService from "turndown";
 
 type TestCaseRow = {
   id?: string;
@@ -691,7 +691,7 @@ export function ProblemEditorShell({ problemId }: { problemId: string }) {
                   {contentState.samples.map((sample, index) => (
                     <div
                       key={`sample-${index}`}
-                      className="space-y-4 rounded-2xl border border-white/10 bg-muted/5 p-4"
+                      className="space-y-4 border border-white/10 bg-muted/5 p-4"
                     >
                       <div className="flex items-center justify-between gap-3">
                         <p className="text-sm font-medium text-foreground">Sample #{index + 1}</p>
@@ -769,7 +769,7 @@ export function ProblemEditorShell({ problemId }: { problemId: string }) {
                 {data.curators.map((curator) => (
                   <div
                     key={curator.userId}
-                    className="flex items-center justify-between rounded-xl border border-white/5 bg-muted/30 px-4 py-3"
+                    className="flex items-center justify-between border border-white/5 bg-muted/30 px-4 py-3"
                   >
                     <div>
                       <p className="font-medium">
@@ -849,7 +849,7 @@ export function ProblemEditorShell({ problemId }: { problemId: string }) {
                   return (
                     <div
                       key={language.code}
-                      className="rounded-2xl border border-white/5 bg-card/50 p-4 shadow-inner shadow-black/10"
+                      className="border border-white/5 bg-card/50 p-4 shadow-inner shadow-black/10"
                     >
                       <div className="flex flex-wrap items-center justify-between gap-3">
                         <div>
@@ -1009,7 +1009,7 @@ export function ProblemEditorShell({ problemId }: { problemId: string }) {
                         key={option.value}
                         htmlFor={id}
                         className={cn(
-                          "cursor-pointer rounded-2xl border bg-card/50 p-3 text-left transition hover:border-primary/60",
+                          "cursor-pointer border bg-card/50 p-3 text-left transition hover:border-primary/60",
                           isActive ? "border-primary shadow-sm" : "border-border/60",
                         )}
                       >
@@ -1231,7 +1231,7 @@ export function ProblemEditorShell({ problemId }: { problemId: string }) {
                     {data.reviews.map((review) => (
                       <li
                         key={review.id}
-                        className="rounded-lg border border-white/5 bg-muted/10 p-2"
+                        className="border border-white/5 bg-muted/10 p-2"
                       >
                         <div className="flex items-center justify-between">
                           <span className="font-medium">
@@ -1408,7 +1408,7 @@ function TestCaseModal({ open, onOpenChange, testCase, onSave, onDelete }: TestC
                 onValueChange={handleKindChange}
                 className="grid gap-3 md:grid-cols-2"
               >
-                <div className="flex items-start gap-2 rounded-xl border border-border/60 p-3">
+                <div className="flex items-start gap-2 border border-border/60 p-3">
                   <RadioGroupItem value="sample" id="case-kind-sample" />
                   <div>
                     <Label htmlFor="case-kind-sample" className="font-medium">
@@ -1419,7 +1419,7 @@ function TestCaseModal({ open, onOpenChange, testCase, onSave, onDelete }: TestC
                     </p>
                   </div>
                 </div>
-                <div className="flex items-start gap-2 rounded-xl border border-border/60 p-3">
+                <div className="flex items-start gap-2 border border-border/60 p-3">
                   <RadioGroupItem value="hidden" id="case-kind-hidden" />
                   <div>
                     <Label htmlFor="case-kind-hidden" className="font-medium">

From cb8d829bdbcefc48de714c240e89ec574be0b46f Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Mon, 26 Aug 2024 09:45:00 +0430
Subject: [PATCH 11/21] refactor: update icon system to use hugeicons-react

---
 components/icons.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/icons.ts b/components/icons.ts
index a8ce966..7b112eb 100644
--- a/components/icons.ts
+++ b/components/icons.ts
@@ -40,6 +40,7 @@ import {
   FloppyDiskIcon,
   GithubIcon,
   GlobeIcon,
+  GridIcon,
   GroupLayersIcon,
   Heading02Icon,
   HonourStarIcon,
@@ -63,6 +64,7 @@ import {
   Mail01Icon,
   Menu01Icon,
   Message01Icon,
+  Message02Icon,
   Moon02Icon,
   More01Icon,
   More02Icon,
@@ -86,6 +88,7 @@ import {
   TextBoldIcon,
   TextItalicIcon,
   TextSquareIcon,
+  ThirdBracketCircleIcon,
   Tick01Icon,
   Tick02Icon,
   ToggleOffIcon,
@@ -215,3 +218,6 @@ export const Users = UserGroupIcon;
 export const Users2 = UserGroupIcon;
 export const XCircle = CancelCircleIcon;
 export const XIcon = Cancel02Icon;
+export const MessageSquareText = Message02Icon;
+export const TrendUp = ThirdBracketCircleIcon;
+export const Hash = GridIcon;

From f9c48ac53078ffc46f08ea89d16d7c4d57ebd0aa Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Tue, 27 Aug 2024 16:00:00 +0430
Subject: [PATCH 12/21] docs: update redesign checklist

---
 docs/redesign-checklist.md | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/redesign-checklist.md b/docs/redesign-checklist.md
index 8832c24..ed50818 100644
--- a/docs/redesign-checklist.md
+++ b/docs/redesign-checklist.md
@@ -11,26 +11,26 @@ Status legend: `[x]` redesigned, `[ ]` pending. Grouped by how visitors navigate
 
 - [x] `/sign-in` (app/(auth)/sign-in/page.tsx)
 - [x] `/sign-up` (app/(auth)/sign-up/page.tsx)
-- [ ] `/auth/forgot-password` (app/(auth)/auth/forgot-password/page.tsx)
-- [ ] `/auth/reset-password` (app/(auth)/auth/reset-password/page.tsx)
-- [ ] `/auth/verify-email` (app/(auth)/auth/verify-email/page.tsx)
-- [ ] `/auth/magic-link` (app/(auth)/auth/magic-link/page.tsx)
+- [x] `/auth/forgot-password` (app/(auth)/auth/forgot-password/page.tsx)
+- [x] `/auth/reset-password` (app/(auth)/auth/reset-password/page.tsx)
+- [x] `/auth/verify-email` (app/(auth)/auth/verify-email/page.tsx)
+- [x] `/auth/magic-link` (app/(auth)/auth/magic-link/page.tsx)
 
 ## [03] Reader Experience (public browsing)
 
-- [ ] `/discuss` (app/(reader)/discuss/page.tsx)
-- [ ] `/discuss/[threadId]` (app/(reader)/discuss/[threadId]/page.tsx)
-- [ ] `/leaderboards` (app/(reader)/leaderboards/page.tsx)
-- [ ] `/leaderboards/tag/[slug]` (app/(reader)/leaderboards/tag/[slug]/page.tsx)
-- [ ] `/leaderboards/difficulty/[level]` (app/(reader)/leaderboards/difficulty/[level]/page.tsx)
-- [ ] `/leaderboards/[window]` (app/(reader)/leaderboards/[window]/page.tsx)
-- [ ] `/tags/[slug]` (app/(reader)/tags/[slug]/page.tsx)
-- [ ] `/problems` (app/(reader)/problems/page.tsx)
-- [ ] `/problems/[slug]` (app/(reader)/problems/[slug]/page.tsx)
-- [ ] `/problems/[slug]/discuss` (app/(reader)/problems/[slug]/discuss/page.tsx)
-- [ ] `/problems/[slug]/discuss/[threadId]` (app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx)
-- [ ] `/problems/[slug]/editorial` (app/(reader)/problems/[slug]/editorial/page.tsx)
-- [ ] `/problems/[slug]/trails` (app/(reader)/problems/[slug]/trails/page.tsx)
+- [x] `/discuss` (app/(reader)/discuss/page.tsx)
+- [x] `/discuss/[threadId]` (app/(reader)/discuss/[threadId]/page.tsx)
+- [x] `/leaderboards` (app/(reader)/leaderboards/page.tsx)
+- [x] `/leaderboards/tag/[slug]` (app/(reader)/leaderboards/tag/[slug]/page.tsx)
+- [x] `/leaderboards/difficulty/[level]` (app/(reader)/leaderboards/difficulty/[level]/page.tsx)
+- [x] `/leaderboards/[window]` (app/(reader)/leaderboards/[window]/page.tsx)
+- [x] `/tags/[slug]` (app/(reader)/tags/[slug]/page.tsx)
+- [x] `/problems` (app/(reader)/problems/page.tsx)
+- [x] `/problems/[slug]` (app/(reader)/problems/[slug]/page.tsx)
+- [x] `/problems/[slug]/discuss` (app/(reader)/problems/[slug]/discuss/page.tsx)
+- [x] `/problems/[slug]/discuss/[threadId]` (app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx)
+- [x] `/problems/[slug]/editorial` (app/(reader)/problems/[slug]/editorial/page.tsx)
+- [x] `/problems/[slug]/trails` (app/(reader)/problems/[slug]/trails/page.tsx)
 - [ ] `/difficulty/[level]` (app/(reader)/difficulty/[level]/page.tsx)
 - [ ] `/u/[handle]` (app/(reader)/u/[handle]/page.tsx)
 - [ ] `Problem not-found fallback` (app/(reader)/problems/[slug]/not-found.tsx)

From 1948a27be79e2c80b836374d23903dc127eff127 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Tue, 13 Aug 2024 09:15:00 +0430
Subject: [PATCH 13/21] refactor: redesign auth pages with OpenSolve design
 system

---
 app/(auth)/auth/forgot-password/page.tsx | 141 ++++++++++------
 app/(auth)/auth/magic-link/page.tsx      | 195 ++++++++++++++++++-----
 app/(auth)/auth/reset-password/page.tsx  | 183 ++++++++++++++-------
 app/(auth)/auth/verify-email/page.tsx    | 176 +++++++++++++++-----
 4 files changed, 505 insertions(+), 190 deletions(-)

diff --git a/app/(auth)/auth/forgot-password/page.tsx b/app/(auth)/auth/forgot-password/page.tsx
index d1f0728..ea8cc23 100644
--- a/app/(auth)/auth/forgot-password/page.tsx
+++ b/app/(auth)/auth/forgot-password/page.tsx
@@ -2,8 +2,12 @@
 
 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,
@@ -11,18 +15,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Button,
-  Input,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui";
-import { toast } from "sonner";
-import Link from "next/link";
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { ArrowRight, CheckCircle2, Mail } from "@/components/icons";
+import { authConfig } from "@/config/auth";
 
 export default function ForgotPasswordPage() {
+  const { forgotPassword } = authConfig;
+
   const form = useForm<RequestPasswordResetInput>({
     resolver: zodResolver(requestPasswordResetSchema),
     defaultValues: {
@@ -45,47 +45,94 @@ export default function ForgotPasswordPage() {
   };
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Reset Password</CardTitle>
-        <CardDescription>
-          Enter your email address and we&apos;ll send you a link to reset your password.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="email"
-                      placeholder="you@example.com"
-                      autoComplete="email"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+    <section className="border-2 border-border bg-background p-6 shadow-primary/20">
+      <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+        <span className="flex items-center gap-2 text-primary">
+          <Mail className="h-3.5 w-3.5" />
+          {forgotPassword.badge}
+        </span>
+        <span className="text-muted-foreground">[03] Password reset</span>
+      </div>
 
-            <Button type="submit" className="w-full" disabled={resetMutation.isPending}>
-              {resetMutation.isPending ? "Sending..." : "Send Reset Link"}
-            </Button>
-          </form>
-        </Form>
+      <div className="mb-6 space-y-3">
+        <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-2xl font-black leading-tight text-transparent">
+          {forgotPassword.headline}
+        </h1>
+        <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+          {forgotPassword.description}
+        </p>
+      </div>
 
-        <div className="text-center text-sm">
-          <Link href="/sign-in" className="text-primary hover:underline">
+      <div className="mb-6 border-2 border-border bg-background/50 p-4">
+        <div className="mb-3 font-mono text-xs font-bold uppercase text-primary/80">
+          Security notes
+        </div>
+        <div className="space-y-2">
+          {forgotPassword.security.map((note) => (
+            <div key={note} className="flex items-start gap-2">
+              <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 text-primary" />
+              <span className="font-mono text-xs text-muted-foreground">{note}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-mono text-sm font-bold uppercase">
+                  Email address
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="you@example.com"
+                    autoComplete="email"
+                    className="h-11 rounded-none border-2 border-border bg-background font-mono text-sm transition-colors focus:border-primary"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage className="font-mono text-xs" />
+              </FormItem>
+            )}
+          />
+
+          <Button
+            type="submit"
+            disabled={resetMutation.isPending}
+            className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+          >
+            {resetMutation.isPending ? "Sending reset link..." : "Send reset link"}
+          </Button>
+        </form>
+      </Form>
+
+      <div className="mt-6 space-y-3 border-t border-border pt-6 font-mono text-xs text-muted-foreground">
+        <div className="flex items-center justify-between">
+          <span>Remember your password?</span>
+          <Link
+            href="/sign-in"
+            className="inline-flex items-center gap-1 text-foreground underline-offset-4 hover:underline"
+          >
             Back to sign in
+            <ArrowRight className="h-3.5 w-3.5" />
+          </Link>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Need an account?</span>
+          <Link
+            href="/sign-up"
+            className="inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline"
+          >
+            Create account
+            <ArrowRight className="h-3.5 w-3.5" />
           </Link>
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </section>
   );
 }
diff --git a/app/(auth)/auth/magic-link/page.tsx b/app/(auth)/auth/magic-link/page.tsx
index 38a505f..f44dc85 100644
--- a/app/(auth)/auth/magic-link/page.tsx
+++ b/app/(auth)/auth/magic-link/page.tsx
@@ -1,24 +1,27 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { trpc } from "@/lib/trpc/client";
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { CheckCircle2, XCircle, Loader2 } from "@/components/icons";
+
+import { AlertTriangle, ArrowRight, CheckCircle2, Loader2, Sparkles } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { authConfig } from "@/config/auth";
+import { trpc } from "@/lib/trpc/client";
 
 export default function MagicLinkPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const token = searchParams?.get("token") || "";
 
+  const { magicLink } = authConfig;
+
   const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
 
   const verifyMutation = trpc.auth.verifyMagicLink.useMutation({
     onSuccess: () => {
       setStatus("success");
       toast.success("Signed in successfully");
-      // Slight delay so user sees success state
       setTimeout(() => router.push("/dashboard"), 500);
     },
     onError: (error) => {
@@ -38,51 +41,159 @@ export default function MagicLinkPage() {
 
   if (status === "loading") {
     return (
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Loader2 className="h-5 w-5 animate-spin" />
-            Signing You In
-          </CardTitle>
-          <CardDescription>Validating your magic link…</CardDescription>
-        </CardHeader>
-      </Card>
+      <section className="border-2 border-border bg-background p-6 shadow-primary/20">
+        <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+          <span className="flex items-center gap-2 text-primary">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            {magicLink.badge}
+          </span>
+          <span className="text-muted-foreground">[08] Processing</span>
+        </div>
+
+        <div className="mb-6 space-y-3">
+          <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-2xl font-black leading-tight text-transparent">
+            {magicLink.loading.headline}
+          </h1>
+          <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+            {magicLink.loading.description}
+          </p>
+        </div>
+
+        <div className="flex items-center justify-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <div className="relative">
+              <div className="h-16 w-16 animate-pulse rounded-none border-2 border-primary/50 bg-primary/5" />
+              <Sparkles className="absolute left-1/2 top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 text-primary" />
+            </div>
+            <p className="font-mono text-xs text-muted-foreground">Validating magic link...</p>
+          </div>
+        </div>
+
+        <div className="border-2 border-border bg-background/50 p-4">
+          <div className="mb-2 font-mono text-xs font-bold uppercase text-primary/80">
+            Security check
+          </div>
+          <p className="font-mono text-xs text-muted-foreground">
+            We&apos;re verifying your magic link token and establishing a secure session. This may
+            take a few seconds.
+          </p>
+        </div>
+      </section>
     );
   }
 
   if (status === "success") {
     return (
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-green-600">
-            <CheckCircle2 className="h-6 w-6" />
-            Signed In
-          </CardTitle>
-          <CardDescription>You’re being redirected to your dashboard.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={() => router.push("/dashboard")} className="w-full">
-            Go to Dashboard
-          </Button>
-        </CardContent>
-      </Card>
+      <section className="border-2 border-success/50 bg-background p-6 shadow-success/20">
+        <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+          <span className="flex items-center gap-2 text-success">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            Authenticated
+          </span>
+          <span className="text-muted-foreground">[09] Success</span>
+        </div>
+
+        <div className="mb-6 space-y-3">
+          <h1 className="font-mono text-2xl font-black leading-tight text-success">
+            {magicLink.success.headline}
+          </h1>
+          <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+            {magicLink.success.description}
+          </p>
+        </div>
+
+        <div className="mb-6 flex items-center justify-center py-8">
+          <div className="flex flex-col items-center gap-4">
+            <div className="relative">
+              <div className="h-16 w-16 rounded-none border-2 border-success bg-success/10" />
+              <CheckCircle2 className="absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 text-success" />
+            </div>
+            <p className="font-mono text-xs text-success">Redirecting to dashboard...</p>
+          </div>
+        </div>
+
+        <Button
+          onClick={() => router.push("/dashboard")}
+          className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+        >
+          Go to dashboard now
+        </Button>
+
+        <div className="mt-6 border-t border-border pt-6 text-center font-mono text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1">
+            Or{" "}
+            <button
+              onClick={() => router.push("/problems")}
+              className="text-foreground underline-offset-4 hover:underline"
+            >
+              start solving problems
+            </button>
+          </span>
+        </div>
+      </section>
     );
   }
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-red-600">
-          <XCircle className="h-6 w-6" />
-          Link Invalid or Expired
-        </CardTitle>
-        <CardDescription>This sign-in link is invalid or has expired.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Button onClick={() => router.push("/sign-in")} className="w-full">
-          Back to Sign In
-        </Button>
-      </CardContent>
-    </Card>
+    <section className="border-2 border-destructive/50 bg-background p-6 shadow-destructive/20">
+      <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+        <span className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="h-3.5 w-3.5" />
+          Failed
+        </span>
+        <span className="text-muted-foreground">[10] Error</span>
+      </div>
+
+      <div className="mb-6 space-y-3">
+        <h1 className="font-mono text-2xl font-black leading-tight text-destructive">
+          {magicLink.error.headline}
+        </h1>
+        <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+          {magicLink.error.description}
+        </p>
+      </div>
+
+      <div className="mb-6 border-2 border-destructive/30 bg-destructive/5 p-4">
+        <div className="mb-3 font-mono text-xs font-bold uppercase text-destructive/80">
+          Common causes
+        </div>
+        <div className="space-y-2 font-mono text-xs text-muted-foreground">
+          <p>• Link has already been used (single-use only)</p>
+          <p>• Link expired (15 minute validity)</p>
+          <p>• Token was tampered with or corrupted</p>
+          <p>• Network error during validation</p>
+        </div>
+      </div>
+
+      <Button
+        onClick={() => router.push("/sign-in")}
+        className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+      >
+        Back to sign in
+      </Button>
+
+      <div className="mt-6 space-y-3 border-t border-border pt-6 font-mono text-xs text-muted-foreground">
+        <div className="flex items-center justify-between">
+          <span>Need a new link?</span>
+          <button
+            onClick={() => router.push("/sign-in")}
+            className="inline-flex items-center gap-1 text-foreground underline-offset-4 hover:underline"
+          >
+            Request magic link
+            <ArrowRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Use password instead?</span>
+          <button
+            onClick={() => router.push("/sign-in")}
+            className="inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline"
+          >
+            Sign in with password
+            <ArrowRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+    </section>
   );
 }
diff --git a/app/(auth)/auth/reset-password/page.tsx b/app/(auth)/auth/reset-password/page.tsx
index 505f7a9..a0a8463 100644
--- a/app/(auth)/auth/reset-password/page.tsx
+++ b/app/(auth)/auth/reset-password/page.tsx
@@ -2,8 +2,12 @@
 
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+
 import { trpc } from "@/lib/trpc/client";
 import { resetPasswordSchema, type ResetPasswordInput } from "@/lib/validators/auth";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -11,22 +15,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Button,
-  Input,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui";
-import { toast } from "sonner";
-import { useRouter, useSearchParams } from "next/navigation";
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { ArrowRight, CheckCircle2, ShieldCheck, AlertTriangle } from "@/components/icons";
+import { authConfig } from "@/config/auth";
 
 export default function ResetPasswordPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const token = searchParams?.get("token") || "";
 
+  const { resetPassword } = authConfig;
+
   const form = useForm<ResetPasswordInput>({
     resolver: zodResolver(resetPasswordSchema),
     defaultValues: {
@@ -51,57 +51,124 @@ export default function ResetPasswordPage() {
 
   if (!token) {
     return (
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Invalid Link</CardTitle>
-          <CardDescription>This password reset link is invalid or has expired.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={() => router.push("/auth/forgot-password")} className="w-full">
-            Request New Link
-          </Button>
-        </CardContent>
-      </Card>
+      <section className="border-2 border-destructive/50 bg-background p-6 shadow-destructive/20">
+        <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+          <span className="flex items-center gap-2 text-destructive">
+            <AlertTriangle className="h-3.5 w-3.5" />
+            Invalid token
+          </span>
+        </div>
+
+        <div className="mb-6 space-y-3">
+          <h1 className="font-mono text-2xl font-black leading-tight text-destructive">
+            {resetPassword.invalid.headline}
+          </h1>
+          <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+            {resetPassword.invalid.description}
+          </p>
+        </div>
+
+        <Button
+          onClick={() => router.push("/auth/forgot-password")}
+          className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+        >
+          Request new reset link
+        </Button>
+
+        <div className="mt-6 border-t border-border pt-6 text-center font-mono text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1">
+            Or{" "}
+            <button
+              onClick={() => router.push("/sign-in")}
+              className="text-foreground underline-offset-4 hover:underline"
+            >
+              return to sign in
+            </button>
+          </span>
+        </div>
+      </section>
     );
   }
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle>Set New Password</CardTitle>
-        <CardDescription>Enter your new password below.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>New Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder="••••••••"
-                      autoComplete="new-password"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                  <p className="text-xs text-muted-foreground">
-                    At least 8 characters with uppercase, lowercase, and numbers
-                  </p>
-                </FormItem>
-              )}
-            />
-
-            <Button type="submit" className="w-full" disabled={resetMutation.isPending}>
-              {resetMutation.isPending ? "Resetting..." : "Reset Password"}
-            </Button>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
+    <section className="border-2 border-border bg-background p-6 shadow-primary/20">
+      <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+        <span className="flex items-center gap-2 text-primary">
+          <ShieldCheck className="h-3.5 w-3.5" />
+          {resetPassword.badge}
+        </span>
+        <span className="text-muted-foreground">[04] New password</span>
+      </div>
+
+      <div className="mb-6 space-y-3">
+        <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-2xl font-black leading-tight text-transparent">
+          {resetPassword.headline}
+        </h1>
+        <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+          {resetPassword.description}
+        </p>
+      </div>
+
+      <div className="mb-6 border-2 border-border bg-background/50 p-4">
+        <div className="mb-3 font-mono text-xs font-bold uppercase text-primary/80">
+          Password requirements
+        </div>
+        <div className="space-y-2">
+          {resetPassword.requirements.map((requirement) => (
+            <div key={requirement} className="flex items-start gap-2">
+              <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 text-primary" />
+              <span className="font-mono text-xs text-muted-foreground">{requirement}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-mono text-sm font-bold uppercase">
+                  New password
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="••••••••••••"
+                    autoComplete="new-password"
+                    className="h-11 rounded-none border-2 border-border bg-background font-mono text-sm transition-colors focus:border-primary"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage className="font-mono text-xs" />
+              </FormItem>
+            )}
+          />
+
+          <Button
+            type="submit"
+            disabled={resetMutation.isPending}
+            className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+          >
+            {resetMutation.isPending ? "Resetting password..." : "Reset password"}
+          </Button>
+        </form>
+      </Form>
+
+      <div className="mt-6 space-y-3 border-t border-border pt-6 font-mono text-xs text-muted-foreground">
+        <div className="flex items-center justify-between">
+          <span>Password reset?</span>
+          <button
+            onClick={() => router.push("/sign-in")}
+            className="inline-flex items-center gap-1 text-foreground underline-offset-4 hover:underline"
+          >
+            Sign in now
+            <ArrowRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+    </section>
   );
 }
diff --git a/app/(auth)/auth/verify-email/page.tsx b/app/(auth)/auth/verify-email/page.tsx
index 59f6388..688bfae 100644
--- a/app/(auth)/auth/verify-email/page.tsx
+++ b/app/(auth)/auth/verify-email/page.tsx
@@ -1,17 +1,21 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { trpc } from "@/lib/trpc/client";
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { CheckCircle2, XCircle, Loader2 } from "@/components/icons";
+
+import { AlertTriangle, ArrowRight, CheckCircle2, Loader2 } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { authConfig } from "@/config/auth";
+import { trpc } from "@/lib/trpc/client";
 
 export default function VerifyEmailPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const token = searchParams?.get("token") || "";
 
+  const { verifyEmail } = authConfig;
+
   const [status, setStatus] = useState<"loading" | "success" | "error">(
     token ? "loading" : "error",
   );
@@ -38,53 +42,139 @@ export default function VerifyEmailPage() {
 
   if (status === "loading") {
     return (
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Loader2 className="h-5 w-5 animate-spin" />
-            Verifying Email
-          </CardTitle>
-          <CardDescription>Please wait while we verify your email address...</CardDescription>
-        </CardHeader>
-      </Card>
+      <section className="border-2 border-border bg-background p-6 shadow-primary/20">
+        <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+          <span className="flex items-center gap-2 text-primary">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            {verifyEmail.badge}
+          </span>
+          <span className="text-muted-foreground">[05] Processing</span>
+        </div>
+
+        <div className="mb-6 space-y-3">
+          <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-2xl font-black leading-tight text-transparent">
+            {verifyEmail.loading.headline}
+          </h1>
+          <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+            {verifyEmail.loading.description}
+          </p>
+        </div>
+
+        <div className="flex items-center justify-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <div className="h-16 w-16 animate-pulse rounded-none border-2 border-primary/50 bg-primary/5" />
+            <p className="font-mono text-xs text-muted-foreground">Validating token...</p>
+          </div>
+        </div>
+      </section>
     );
   }
 
   if (status === "success") {
     return (
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-green-600">
-            <CheckCircle2 className="h-6 w-6" />
-            Email Verified
-          </CardTitle>
-          <CardDescription>
-            Your email has been successfully verified. You can now access all features.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={() => router.push("/dashboard")} className="w-full">
-            Go to Dashboard
-          </Button>
-        </CardContent>
-      </Card>
+      <section className="border-2 border-success/50 bg-background p-6 shadow-success/20">
+        <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+          <span className="flex items-center gap-2 text-success">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            Verified
+          </span>
+          <span className="text-muted-foreground">[06] Complete</span>
+        </div>
+
+        <div className="mb-6 space-y-3">
+          <h1 className="font-mono text-2xl font-black leading-tight text-success">
+            {verifyEmail.success.headline}
+          </h1>
+          <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+            {verifyEmail.success.description}
+          </p>
+        </div>
+
+        <div className="mb-6 border-2 border-success/30 bg-success/5 p-4">
+          <div className="mb-3 font-mono text-xs font-bold uppercase text-success/80">
+            Unlocked features
+          </div>
+          <div className="space-y-2">
+            {verifyEmail.success.features.map((feature) => (
+              <div key={feature} className="flex items-start gap-2">
+                <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 text-success" />
+                <span className="font-mono text-xs text-muted-foreground">{feature}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <Button
+          onClick={() => router.push("/dashboard")}
+          className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+        >
+          Go to dashboard
+        </Button>
+
+        <div className="mt-6 border-t border-border pt-6 text-center font-mono text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1">
+            Or{" "}
+            <button
+              onClick={() => router.push("/problems")}
+              className="text-foreground underline-offset-4 hover:underline"
+            >
+              browse problems
+            </button>
+          </span>
+        </div>
+      </section>
     );
   }
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-red-600">
-          <XCircle className="h-6 w-6" />
-          Verification Failed
-        </CardTitle>
-        <CardDescription>This verification link is invalid or has expired.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Button onClick={() => router.push("/sign-in")} className="w-full">
-          Back to Sign In
-        </Button>
-      </CardContent>
-    </Card>
+    <section className="border-2 border-destructive/50 bg-background p-6 shadow-destructive/20">
+      <div className="mb-6 flex items-center justify-between font-mono text-xs font-bold uppercase tracking-[0.08em]">
+        <span className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="h-3.5 w-3.5" />
+          Failed
+        </span>
+        <span className="text-muted-foreground">[07] Error</span>
+      </div>
+
+      <div className="mb-6 space-y-3">
+        <h1 className="font-mono text-2xl font-black leading-tight text-destructive">
+          {verifyEmail.error.headline}
+        </h1>
+        <p className="font-mono text-sm leading-relaxed text-muted-foreground">
+          {verifyEmail.error.description}
+        </p>
+      </div>
+
+      <div className="mb-6 border-2 border-destructive/30 bg-destructive/5 p-4">
+        <div className="mb-3 font-mono text-xs font-bold uppercase text-destructive/80">
+          Next steps
+        </div>
+        <div className="space-y-2 font-mono text-xs text-muted-foreground">
+          <p>1. Sign in to your account</p>
+          <p>2. Navigate to Settings → Account</p>
+          <p>3. Request a new verification email</p>
+        </div>
+      </div>
+
+      <Button
+        onClick={() => router.push("/sign-in")}
+        className="h-11 w-full rounded-none border-2 border-primary bg-primary font-mono text-sm font-bold uppercase tracking-wide text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+      >
+        Back to sign in
+      </Button>
+
+      <div className="mt-6 space-y-3 border-t border-border pt-6 font-mono text-xs text-muted-foreground">
+        <div className="flex items-center justify-between">
+          <span>Need help?</span>
+          <button
+            onClick={() => router.push("/support")}
+            className="inline-flex items-center gap-1 text-foreground underline-offset-4 hover:underline"
+          >
+            Contact support
+            <ArrowRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+    </section>
   );
 }

From 82a241ef826a51da510f3805cbc07830d60464c5 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Thu, 15 Aug 2024 11:00:00 +0430
Subject: [PATCH 14/21] refactor: redesign discussion pages with OpenSolve
 design system

---
 app/(reader)/discuss/[threadId]/page.tsx | 15 +++++-----
 app/(reader)/discuss/page.tsx            | 38 +++++++++++++++++-------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/app/(reader)/discuss/[threadId]/page.tsx b/app/(reader)/discuss/[threadId]/page.tsx
index 4a2f30e..e964e5c 100644
--- a/app/(reader)/discuss/[threadId]/page.tsx
+++ b/app/(reader)/discuss/[threadId]/page.tsx
@@ -1,9 +1,10 @@
 import { HydrationBoundary } from "@tanstack/react-query";
-import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
-import { DiscussionDetailShell } from "@/components/discussions/discussion-detail-shell";
 import { notFound } from "next/navigation";
 
+import { DiscussionDetailShell } from "@/components/discussions/discussion-detail-shell";
+import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
+import { createTRPCCaller } from "@/lib/trpc/server/caller";
+
 type Params = { threadId: string };
 
 export default async function GlobalThreadDetailPage({
@@ -26,10 +27,8 @@ export default async function GlobalThreadDetailPage({
     }),
   ]);
   return (
-    <div className="py-10">
-      <HydrationBoundary state={hydration}>
-        <DiscussionDetailShell threadId={threadId} />
-      </HydrationBoundary>
-    </div>
+    <HydrationBoundary state={hydration}>
+      <DiscussionDetailShell threadId={threadId} />
+    </HydrationBoundary>
   );
 }
diff --git a/app/(reader)/discuss/page.tsx b/app/(reader)/discuss/page.tsx
index fc12008..7a779fb 100644
--- a/app/(reader)/discuss/page.tsx
+++ b/app/(reader)/discuss/page.tsx
@@ -1,8 +1,11 @@
+import { HydrationBoundary } from "@tanstack/react-query";
+
 import { GlobalDiscussionsClient } from "@/components/discussions/global-discussions-client";
+import { MessageSquareText } from "@/components/icons";
+import { discussionsConfig } from "@/config/discussions";
 import { publicContentQueryOptions } from "@/lib/react-query/policies";
 import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { HydrationBoundary } from "@tanstack/react-query";
 
 export const dynamic = "force-dynamic";
 
@@ -17,17 +20,30 @@ export default async function GlobalDiscussPage() {
     ),
   ]);
 
+  const { global } = discussionsConfig;
+
   return (
-    <div className="mx-auto max-w-6xl space-y-8 py-10">
-      <div className="space-y-3">
-        <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          Community
-        </p>
-        <h1 className="text-4xl font-bold tracking-tight lg:text-5xl">Global Discussions</h1>
-        <p className="max-w-2xl text-base text-muted-foreground">
-          Share hints, ask for help, and talk platform meta with the OpenSolve community
-        </p>
-      </div>
+    <div className="space-y-8">
+      <section className="border-2 border-border bg-background p-8">
+        <div className="mb-6 flex items-center justify-between">
+          <div className="inline-flex items-center gap-2 border-2 border-primary/50 bg-primary/5 px-3 py-1.5 font-mono text-xs font-bold uppercase tracking-wider text-primary">
+            <MessageSquareText className="h-3.5 w-3.5" />
+            {global.badge}
+          </div>
+        </div>
+
+        <div className="mb-6 space-y-4">
+          <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-4xl font-black leading-tight tracking-tight text-transparent sm:text-5xl lg:text-6xl">
+            {global.headline.line1}
+            <br />
+            {global.headline.line2}
+          </h1>
+          <p className="max-w-3xl font-mono text-sm leading-relaxed text-muted-foreground">
+            {global.description}
+          </p>
+        </div>
+      </section>
+
       <HydrationBoundary state={hydration}>
         <GlobalDiscussionsClient
           tagOptions={metadata.tags.map((tag) => ({ slug: tag.slug, name: tag.name }))}

From 2c3eb8d3be167b67ddbe6c3f8aa9a412f0545edf Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sun, 18 Aug 2024 10:30:00 +0430
Subject: [PATCH 15/21] refactor: update problem detail pages with new design
 system

---
 .../[slug]/discuss/[threadId]/page.tsx        | 105 +++++++++------
 app/(reader)/problems/[slug]/discuss/page.tsx |  24 ++--
 .../problems/[slug]/editorial/page.tsx        | 126 +++++++++++-------
 3 files changed, 160 insertions(+), 95 deletions(-)

diff --git a/app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx b/app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx
index cc9dd9c..436e50c 100644
--- a/app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx
+++ b/app/(reader)/problems/[slug]/discuss/[threadId]/page.tsx
@@ -1,15 +1,15 @@
+import { ArrowLeft, FileText } from "@/components/icons";
 import { HydrationBoundary } from "@tanstack/react-query";
-import { notFound } from "next/navigation";
 import Link from "next/link";
-import { ArrowLeft } from "@/components/icons";
+import { notFound } from "next/navigation";
 
-import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { DiscussionDetailShell } from "@/components/discussions/discussion-detail-shell";
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { problemsConfig } from "@/config/problems";
 import { getCachedProblemDetail } from "@/lib/cache/problems";
+import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
+import { createTRPCCaller } from "@/lib/trpc/server/caller";
 
 type ProblemThreadPageParams = {
   slug: string;
@@ -53,57 +53,80 @@ export default async function ProblemThreadDetailPage({
     }),
   ]);
 
+  const { discuss } = problemsConfig;
+
   return (
-    <div className="space-y-6 py-8">
+    <div className="space-y-6">
       <Button
         asChild
         variant="ghost"
         size="sm"
-        className="gap-2 text-muted-foreground hover:text-foreground"
+        className="h-9 rounded-none font-mono text-sm text-muted-foreground hover:bg-accent hover:text-primary"
       >
         <Link href={`/problems/${slug}/discuss`}>
-          <ArrowLeft className="h-4 w-4" /> Back to discussions
+          <ArrowLeft className="mr-2 h-4 w-4" /> {discuss.thread.backLink}
         </Link>
       </Button>
       <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
         <HydrationBoundary state={hydration}>
           <DiscussionDetailShell threadId={threadId} />
         </HydrationBoundary>
-        <aside className="space-y-4 rounded-3xl border border-border/70 bg-card/60 p-6">
-          <div>
-            <p className="text-xs uppercase text-muted-foreground">Problem</p>
-            <h2 className="text-lg font-semibold leading-tight">{problem.title}</h2>
-            {problem.difficulty ? <Badge className="mt-2">{problem.difficulty}</Badge> : null}
-          </div>
-          {problem.tags.length ? (
-            <div>
-              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span className="font-semibold uppercase tracking-wide">Tags</span>
-                <span>{problem.tags.length}</span>
+        <aside className="space-y-4">
+          <div className="space-y-4 border-2 border-border bg-background p-6">
+            <div className="space-y-2">
+              <div className="font-mono text-xs font-bold uppercase text-primary/80">
+                {discuss.sidebar.problem}
               </div>
-              <Separator className="my-2" />
-              <div className="flex flex-wrap gap-2 text-xs">
-                {problem.tags.map((tag) => (
-                  <Badge key={tag.slug} variant="outline">
-                    #{tag.name}
-                  </Badge>
-                ))}
+              <h2 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-xl font-black leading-tight text-transparent">
+                {problem.title}
+              </h2>
+              {problem.difficulty ? (
+                <Badge className="rounded-none border font-mono text-xs font-bold uppercase">
+                  {problem.difficulty}
+                </Badge>
+              ) : null}
+            </div>
+            {problem.tags.length ? (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between font-mono text-xs font-bold uppercase text-primary/80">
+                  <span>{discuss.sidebar.tags}</span>
+                  <span>{problem.tags.length}</span>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {problem.tags.map((tag) => (
+                    <Badge
+                      key={tag.slug}
+                      variant="outline"
+                      className="rounded-none border font-mono text-xs font-bold uppercase"
+                    >
+                      #{tag.name}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+            {problem.hasEditorial ? (
+              <Button
+                variant="outline"
+                asChild
+                className="h-10 w-full rounded-none border-2 border-border bg-transparent px-8 font-mono text-sm hover:border-primary/50 hover:bg-accent"
+              >
+                <Link href={`/problems/${slug}/editorial`}>
+                  <FileText className="mr-2 h-4 w-4" />
+                  {discuss.sidebar.editorial}
+                </Link>
+              </Button>
+            ) : null}
+            <div className="space-y-2 border-t border-border pt-4 font-mono text-xs text-muted-foreground">
+              <div className="font-mono text-xs font-bold uppercase text-primary/80">
+                {discuss.sidebar.rules.title}
               </div>
+              <ul className="list-disc space-y-1 pl-4">
+                {discuss.sidebar.rules.items.map((rule, index) => (
+                  <li key={index}>{rule}</li>
+                ))}
+              </ul>
             </div>
-          ) : null}
-          {problem.hasEditorial ? (
-            <Button variant="secondary" asChild className="w-full">
-              <Link href={`/problems/${slug}/editorial`}>View editorial</Link>
-            </Button>
-          ) : null}
-          <Separator />
-          <div className="space-y-2 text-xs text-muted-foreground">
-            <p className="font-semibold uppercase tracking-wide">House rules</p>
-            <ul className="list-disc space-y-1 pl-4">
-              <li>Share hints, not full solutions.</li>
-              <li>Mark spoilers and be respectful.</li>
-              <li>Report abuse so moderators can step in.</li>
-            </ul>
           </div>
         </aside>
       </div>
diff --git a/app/(reader)/problems/[slug]/discuss/page.tsx b/app/(reader)/problems/[slug]/discuss/page.tsx
index 35fb96d..4c3c247 100644
--- a/app/(reader)/problems/[slug]/discuss/page.tsx
+++ b/app/(reader)/problems/[slug]/discuss/page.tsx
@@ -6,6 +6,8 @@ import { HydrationBoundary } from "@tanstack/react-query";
 import { ProblemDiscussionPanel } from "@/components/discussions/problem-discussion-panel";
 import { getCachedProblemDetail } from "@/lib/cache/problems";
 import type { Metadata } from "next";
+import { problemsConfig } from "@/config/problems";
+import { MessageSquareText } from "@/components/icons";
 
 type DiscussPageParams = { slug: string };
 
@@ -43,15 +45,21 @@ export default async function ProblemDiscussPage({
       { input: { slug, sort: "top" }, staleTime: publicContentQueryOptions.staleTime },
     ),
   ]);
+
+  const { discuss } = problemsConfig;
+
   return (
-    <div className="space-y-8 py-8">
-      <header className="space-y-2">
-        <p className="text-xs uppercase text-muted-foreground">Problem</p>
-        <h1 className="text-2xl font-semibold">{problem.title}</h1>
-        <p className="text-sm text-muted-foreground">
-          Discuss hints, tricky cases, and approaches with the community.
-        </p>
-      </header>
+    <div className="space-y-12">
+      <div className="space-y-6">
+        <div className="inline-flex items-center gap-2 border-2 border-primary/50 px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.08em] text-primary">
+          <MessageSquareText className="h-4 w-4" />
+          {discuss.badge}
+        </div>
+        <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-4xl font-black leading-tight text-transparent sm:text-5xl lg:text-6xl">
+          {problem.title}
+        </h1>
+        <p className="max-w-2xl font-mono text-base text-muted-foreground">{discuss.description}</p>
+      </div>
       <HydrationBoundary state={hydration}>
         <ProblemDiscussionPanel
           problem={{
diff --git a/app/(reader)/problems/[slug]/editorial/page.tsx b/app/(reader)/problems/[slug]/editorial/page.tsx
index 52d5742..8876d84 100644
--- a/app/(reader)/problems/[slug]/editorial/page.tsx
+++ b/app/(reader)/problems/[slug]/editorial/page.tsx
@@ -1,17 +1,18 @@
 import "katex/dist/katex.min.css";
 
-import { notFound } from "next/navigation";
-import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import ReactMarkdown from "react-markdown";
-import remarkMath from "remark-math";
-import rehypeKatex from "rehype-katex";
-import rehypeHighlight from "rehype-highlight";
+import { Lock, MessageSquareText } from "@/components/icons";
 import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { format } from "date-fns";
+import { problemsConfig } from "@/config/problems";
 import { getCachedProblemDetail } from "@/lib/cache/problems";
+import { createTRPCCaller } from "@/lib/trpc/server/caller";
+import { format } from "date-fns";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import ReactMarkdown from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import rehypeKatex from "rehype-katex";
+import remarkMath from "remark-math";
 
 type Params = { slug: string };
 
@@ -32,39 +33,68 @@ export default async function ProblemEditorialPage({
   const content =
     editorial?.content ?? (problem.editorialIsReleased ? problem.content.editorial : null);
 
+  const { editorial: editorialConfig } = problemsConfig;
+
   return (
-    <div className="space-y-8 py-10">
-      <header className="rounded-3xl border border-border/70 bg-card/80 p-6">
-        <p className="text-xs uppercase text-muted-foreground">Editorial</p>
-        <div className="mt-2 flex flex-wrap items-center gap-3">
-          <h1 className="text-3xl font-semibold tracking-tight">{problem.title}</h1>
-          {problem.difficulty ? <Badge>{problem.difficulty}</Badge> : null}
-          {problem.tags.slice(0, 3).map((tag) => (
-            <Badge key={tag.slug} variant="outline">
-              #{tag.name}
+    <div className="space-y-12">
+      <div className="space-y-6 border-2 border-border bg-background p-6">
+        <div className="space-y-4">
+          <div className="font-mono text-xs font-bold uppercase text-primary/80">
+            {editorialConfig.badge}
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-3xl font-black leading-tight text-transparent">
+              {problem.title}
+            </h1>
+            {problem.difficulty ? (
+              <Badge className="rounded-none border font-mono text-xs font-bold uppercase">
+                {problem.difficulty}
+              </Badge>
+            ) : null}
+            {problem.tags.slice(0, 3).map((tag) => (
+              <Badge
+                key={tag.slug}
+                variant="outline"
+                className="rounded-none border font-mono text-xs font-bold uppercase"
+              >
+                #{tag.name}
+              </Badge>
+            ))}
+            <Badge
+              variant={isReleased ? "secondary" : "outline"}
+              className="ml-auto rounded-none border font-mono text-xs font-bold uppercase"
+            >
+              {isReleased ? editorialConfig.states.released : editorialConfig.states.locked}
             </Badge>
-          ))}
-          <Badge variant={isReleased ? "secondary" : "outline"} className="ml-auto">
-            {isReleased ? "Released" : "Locked"}
-          </Badge>
+          </div>
+          {releaseAt && !isReleased ? (
+            <p className="font-mono text-sm text-muted-foreground">
+              {editorialConfig.states.scheduledPrefix} {format(releaseAt, "PPP p")}
+            </p>
+          ) : null}
         </div>
-        {releaseAt && !isReleased ? (
-          <p className="mt-2 text-sm text-muted-foreground">
-            Scheduled to unlock {format(releaseAt, "PPP p")}
-          </p>
-        ) : null}
-        <div className="mt-4 flex flex-wrap gap-2">
-          <Button asChild>
-            <Link href={`/problems/${slug}`}>Back to problem</Link>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            asChild
+            className="h-10 rounded-none border-2 border-primary bg-primary px-8 font-mono text-sm font-bold text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+          >
+            <Link href={`/problems/${slug}`}>{editorialConfig.actions.backToProblem}</Link>
           </Button>
-          <Button variant="ghost" asChild>
-            <Link href={`/problems/${slug}/discuss`}>View discussions</Link>
+          <Button
+            variant="outline"
+            asChild
+            className="h-10 rounded-none border-2 border-border bg-transparent px-8 font-mono text-sm hover:border-primary/50 hover:bg-accent"
+          >
+            <Link href={`/problems/${slug}/discuss`}>
+              <MessageSquareText className="mr-2 h-4 w-4" />
+              {editorialConfig.actions.viewDiscussions}
+            </Link>
           </Button>
         </div>
-      </header>
+      </div>
 
       {isReleased && content ? (
-        <article className="prose prose-neutral max-w-none rounded-3xl border border-border/60 bg-card/80 p-6 text-foreground dark:prose-invert">
+        <article className="prose prose-neutral max-w-none border-2 border-border bg-background p-6 font-mono text-sm text-foreground dark:prose-invert">
           <ReactMarkdown
             remarkPlugins={[remarkMath]}
             rehypePlugins={[rehypeKatex, rehypeHighlight]}
@@ -73,24 +103,28 @@ export default async function ProblemEditorialPage({
           </ReactMarkdown>
         </article>
       ) : (
-        <div className="rounded-3xl border border-dashed border-border/60 bg-muted/20 p-10 text-center">
-          <h2 className="text-xl font-semibold">Editorial locked</h2>
-          <p className="mt-2 text-sm text-muted-foreground">
+        <div className="border-2 border-border bg-background p-10 text-center">
+          <Lock className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h2 className="mt-4 font-mono text-xl font-bold text-foreground">
+            {editorialConfig.states.lockedTitle}
+          </h2>
+          <p className="mt-2 font-mono text-sm text-muted-foreground">
             {releaseAt
-              ? `This write-up unlocks ${format(releaseAt, "PPP p")}.`
-              : "Editors will publish this walkthrough soon."}
+              ? `${editorialConfig.states.lockedDescription} ${format(releaseAt, "PPP p")}.`
+              : editorialConfig.states.lockedFallback}
           </p>
         </div>
       )}
 
       {problem.content.hints ? (
-        <section className="rounded-3xl border border-border/60 bg-card/70 p-6">
-          <h3 className="text-lg font-semibold">Hints refresher</h3>
-          <Separator className="my-3" />
-          <p className="text-sm text-muted-foreground whitespace-pre-line">
-            {problem.content.hints}
-          </p>
-        </section>
+        <div className="space-y-4 border-2 border-border bg-background p-6">
+          <h3 className="font-mono text-lg font-bold">{editorialConfig.hints.title}</h3>
+          <div className="border-t border-border pt-4">
+            <p className="whitespace-pre-line font-mono text-sm text-muted-foreground">
+              {problem.content.hints}
+            </p>
+          </div>
+        </div>
       ) : null}
     </div>
   );

From 416caa78e6b94a60acd0abe3076bb24f9839594a Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Mon, 19 Aug 2024 14:15:00 +0430
Subject: [PATCH 16/21] refactor: update problem trails and not-found pages

---
 app/(reader)/problems/[slug]/not-found.tsx   |  2 +-
 app/(reader)/problems/[slug]/trails/page.tsx | 56 +++++++++++++-------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/app/(reader)/problems/[slug]/not-found.tsx b/app/(reader)/problems/[slug]/not-found.tsx
index f0a6bce..f5fa2e6 100644
--- a/app/(reader)/problems/[slug]/not-found.tsx
+++ b/app/(reader)/problems/[slug]/not-found.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function ProblemNotFound() {
   return (
-    <div className="mx-auto max-w-2xl rounded-3xl border bg-card/70 px-6 py-12 text-center shadow-sm">
+    <div className="mx-auto max-w-2xl border bg-card/70 px-6 py-12 text-center shadow-sm">
       <p className="text-sm font-semibold uppercase tracking-wide text-emerald-500">
         404 — Missing problem
       </p>
diff --git a/app/(reader)/problems/[slug]/trails/page.tsx b/app/(reader)/problems/[slug]/trails/page.tsx
index ffe298b..1786a82 100644
--- a/app/(reader)/problems/[slug]/trails/page.tsx
+++ b/app/(reader)/problems/[slug]/trails/page.tsx
@@ -1,11 +1,13 @@
-import { notFound } from "next/navigation";
-import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { HydrationBoundary } from "@tanstack/react-query";
-import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
+import { Layers, MessageSquareText } from "@/components/icons";
 import { TrailsBoard } from "@/components/trails/trails-board";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { problemsConfig } from "@/config/problems";
 import { getCachedProblemDetail } from "@/lib/cache/problems";
+import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
+import { createTRPCCaller } from "@/lib/trpc/server/caller";
+import { HydrationBoundary } from "@tanstack/react-query";
+import Link from "next/link";
+import { notFound } from "next/navigation";
 
 type Params = { slug: string };
 
@@ -25,23 +27,41 @@ export default async function ProblemTrailsPage({ params }: { params: Params | P
       },
     ),
   ]);
+
+  const { trails } = problemsConfig;
+
   return (
-    <div className="space-y-8 py-10">
-      <header className="rounded-3xl border border-border/70 bg-card/80 p-6">
-        <p className="text-xs uppercase text-muted-foreground">Approach trails</p>
-        <h1 className="text-2xl font-semibold">{problem.title}</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Map the insights solvers used to unlock this problem and contribute your own breadcrumb.
-        </p>
-        <div className="mt-4 flex gap-2">
-          <Button asChild>
-            <Link href={`/problems/${slug}`}>Back to problem</Link>
+    <div className="space-y-12">
+      <div className="space-y-6 border-2 border-border bg-background p-6">
+        <div className="space-y-4">
+          <div className="font-mono text-xs font-bold uppercase text-primary/80">
+            <Layers className="mr-2 inline h-4 w-4" />
+            {trails.badge}
+          </div>
+          <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-2xl font-black leading-tight text-transparent">
+            {problem.title}
+          </h1>
+          <p className="font-mono text-sm text-muted-foreground">{trails.description}</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            asChild
+            className="h-10 rounded-none border-2 border-primary bg-primary px-8 font-mono text-sm font-bold text-primary-foreground shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
+          >
+            <Link href={`/problems/${slug}`}>{trails.actions.backToProblem}</Link>
           </Button>
-          <Button variant="ghost" asChild>
-            <Link href={`/problems/${slug}/discuss`}>View discussions</Link>
+          <Button
+            variant="outline"
+            asChild
+            className="h-10 rounded-none border-2 border-border bg-transparent px-8 font-mono text-sm hover:border-primary/50 hover:bg-accent"
+          >
+            <Link href={`/problems/${slug}/discuss`}>
+              <MessageSquareText className="mr-2 h-4 w-4" />
+              {trails.actions.viewDiscussions}
+            </Link>
           </Button>
         </div>
-      </header>
+      </div>
       <HydrationBoundary state={hydration}>
         <TrailsBoard problemId={problem.id} />
       </HydrationBoundary>

From 24124dfeb511685a426b50166e6ca2d494b911c0 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Wed, 21 Aug 2024 09:30:00 +0430
Subject: [PATCH 17/21] refactor: update leaderboard pages with brutalist
 design

---
 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 +-
 4 files changed, 84 insertions(+), 52 deletions(-)

diff --git a/app/(reader)/leaderboards/[window]/page.tsx b/app/(reader)/leaderboards/[window]/page.tsx
index 431aa3b..5f531de 100644
--- a/app/(reader)/leaderboards/[window]/page.tsx
+++ b/app/(reader)/leaderboards/[window]/page.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { HydrationBoundary } from "@tanstack/react-query";
+
+import { GlobalLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { GlobalLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import type { LeaderboardWindow } from "@/lib/leaderboard/service";
 
 const WINDOW_MAP: Record<string, LeaderboardWindow> = {
diff --git a/app/(reader)/leaderboards/difficulty/[level]/page.tsx b/app/(reader)/leaderboards/difficulty/[level]/page.tsx
index f66dcec..65f68a7 100644
--- a/app/(reader)/leaderboards/difficulty/[level]/page.tsx
+++ b/app/(reader)/leaderboards/difficulty/[level]/page.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { HydrationBoundary } from "@tanstack/react-query";
+
+import { DifficultyLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { DifficultyLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import type { LeaderboardWindow } from "@/lib/leaderboard/service";
 import { DIFFICULTIES } from "@/lib/problems/constants";
 
diff --git a/app/(reader)/leaderboards/page.tsx b/app/(reader)/leaderboards/page.tsx
index 49309f2..29466bb 100644
--- a/app/(reader)/leaderboards/page.tsx
+++ b/app/(reader)/leaderboards/page.tsx
@@ -1,12 +1,15 @@
+import { HydrationBoundary } from "@tanstack/react-query";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ArrowRight, Hash, TrendUp, Trophy } from "@/components/icons";
 import { GlobalLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { leaderboardsConfig } from "@/config/leaderboards";
 import type { LeaderboardEntry, LeaderboardWindow } from "@/lib/leaderboard/service";
 import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { HydrationBoundary } from "@tanstack/react-query";
-import type { Metadata } from "next";
-import Link from "next/link";
 
 const DEFAULT_WINDOW: LeaderboardWindow = "all_time";
 
@@ -29,7 +32,7 @@ export default async function LeaderboardsPage() {
   ]);
 
   return (
-    <div className="space-y-10">
+    <div className="space-y-8">
       <Hero overview={overview} />
       <HydrationBoundary state={state}>
         <GlobalLeaderboardClient initialWindow={DEFAULT_WINDOW} />
@@ -45,109 +48,135 @@ type OverviewCard = {
 };
 
 function Hero({ overview }: { overview: OverviewCard[] }) {
+  const { global } = leaderboardsConfig;
+
   return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          OpenSolve Rankings
-        </p>
-        <h1 className="text-4xl font-bold tracking-tight lg:text-5xl">Leaderboards</h1>
-        <p className="max-w-2xl text-base text-muted-foreground">
-          Discover the most consistent problem solvers across weekly, monthly, and all-time windows.
-        </p>
+    <section className="space-y-6">
+      <div className="border-2 border-border bg-background p-8">
+        <div className="mb-6 inline-flex items-center gap-2 border-2 border-primary/50 bg-primary/5 px-3 py-1.5 font-mono text-xs font-bold uppercase tracking-wider text-primary">
+          <Trophy className="h-3.5 w-3.5" />
+          {global.badge}
+        </div>
+
+        <div className="mb-6 space-y-4">
+          <h1 className="bg-linear-to-br from-foreground via-foreground to-foreground/70 bg-clip-text font-mono text-4xl font-black leading-tight tracking-tight text-transparent sm:text-5xl lg:text-6xl">
+            {global.headline.line1}
+            <br />
+            {global.headline.line2}
+          </h1>
+          <p className="max-w-3xl font-mono text-sm leading-relaxed text-muted-foreground">
+            {global.description}
+          </p>
+        </div>
       </div>
-      <div className="grid gap-6 md:grid-cols-3">
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {overview.map((window) => (
-          <div key={window.window} className="premium-card space-y-4 rounded-2xl p-6">
-            <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold capitalize">
+          <div key={window.window} className="border-2 border-border bg-background p-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="font-mono text-base font-bold uppercase">
                 {window.window.replace("_", " ")}
               </h3>
               <Badge
                 variant="secondary"
-                className="rounded-full text-[10px] font-semibold uppercase"
+                className="rounded-none border font-mono text-[10px] font-bold uppercase"
               >
                 Top 3
               </Badge>
             </div>
-            <div className="space-y-3 text-sm">
+            <div className="space-y-3 border-2 border-border bg-background/50 p-4 font-mono text-sm">
               {window.hero.length === 0 ? (
-                <p className="py-4 text-center text-muted-foreground">No data yet</p>
+                <p className="py-6 text-center text-muted-foreground">
+                  {global.overview.emptyState}
+                </p>
               ) : (
                 window.hero.map((entry, idx) => (
                   <div
                     key={entry.user.id}
-                    className="flex items-center justify-between rounded-xl border border-border/50 bg-card/30 p-3"
+                    className="flex items-center justify-between border-b border-border pb-3 last:border-b-0 last:pb-0"
                   >
                     <div className="flex items-center gap-2">
-                      <span className="text-xs font-bold text-muted-foreground">#{idx + 1}</span>
-                      <span className="font-medium">@{entry.user.handle}</span>
+                      <span className="font-bold text-primary">#{idx + 1}</span>
+                      <span className="text-foreground">@{entry.user.handle}</span>
                     </div>
-                    <span className="font-semibold">{Math.round(entry.score)}</span>
+                    <span className="font-bold">{Math.round(entry.score)}</span>
                   </div>
                 ))
               )}
             </div>
-            <Button variant="ghost" size="sm" asChild className="w-full justify-between rounded-xl">
+            <Button
+              asChild
+              variant="outline"
+              className="mt-4 h-10 w-full justify-between rounded-none border-2 border-border font-mono text-xs font-bold uppercase hover:border-primary/50"
+            >
               <Link
                 href={`/leaderboards/${window.window === "all_time" ? "global" : window.window}`}
               >
-                View Full Board
-                <span aria-hidden>→</span>
+                {leaderboardsConfig.section.actions.viewFull}
+                <ArrowRight className="h-3.5 w-3.5" />
               </Link>
             </Button>
           </div>
         ))}
       </div>
-    </div>
+    </section>
   );
 }
 
 function Callouts() {
+  const { global } = leaderboardsConfig;
+
   return (
-    <div className="grid gap-6 md:grid-cols-2">
-      <div className="premium-card space-y-4 rounded-2xl p-6">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
-            <Badge className="h-6 w-6 rounded-md bg-primary text-[10px] font-bold">D</Badge>
+    <section className="grid gap-4 sm:grid-cols-2">
+      <div className="border-2 border-border bg-background p-6">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center border-2 border-primary bg-primary/10">
+            <TrendUp className="h-5 w-5 text-primary" />
           </div>
-          <h3 className="text-lg font-semibold">Difficulty Capsules</h3>
+          <h3 className="font-mono text-base font-bold">{global.callouts.difficulty.title}</h3>
         </div>
-        <p className="text-sm text-muted-foreground">
-          Compare how solvers perform on easy, medium, and hard sets independently.
+        <p className="mb-4 font-mono text-sm text-muted-foreground">
+          {global.callouts.difficulty.description}
         </p>
         <div className="flex flex-wrap gap-2">
-          {(["easy", "medium", "hard"] as const).map((level) => (
+          {global.callouts.difficulty.levels.map((level) => (
             <Button
               key={level}
               variant="outline"
               size="sm"
               asChild
-              className="rounded-xl capitalize"
+              className="h-9 rounded-none border-2 border-border font-mono text-xs font-bold uppercase hover:border-primary/50"
             >
               <Link href={`/leaderboards/difficulty/${level}`}>{level}</Link>
             </Button>
           ))}
         </div>
       </div>
-      <div className="premium-card space-y-4 rounded-2xl p-6">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary/10">
-            <Badge className="h-6 w-6 rounded-md bg-secondary text-[10px] font-bold">#</Badge>
+
+      <div className="border-2 border-border bg-background p-6">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center border-2 border-primary bg-primary/10">
+            <Hash className="h-5 w-5 text-primary" />
           </div>
-          <h3 className="text-lg font-semibold">Tag Spotlights</h3>
+          <h3 className="font-mono text-base font-bold">{global.callouts.tags.title}</h3>
         </div>
-        <p className="text-sm text-muted-foreground">
-          Track mastery for specific topics like DP, graphs, and arrays.
+        <p className="mb-4 font-mono text-sm text-muted-foreground">
+          {global.callouts.tags.description}
         </p>
         <div className="flex flex-wrap gap-2">
-          {["graphs", "dp", "arrays"].map((slug) => (
-            <Button key={slug} variant="outline" size="sm" asChild className="rounded-xl">
+          {global.callouts.tags.featured.map((slug) => (
+            <Button
+              key={slug}
+              variant="outline"
+              size="sm"
+              asChild
+              className="h-9 rounded-none border-2 border-border font-mono text-xs font-bold hover:border-primary/50"
+            >
               <Link href={`/leaderboards/tag/${slug}`}>#{slug}</Link>
             </Button>
           ))}
         </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/app/(reader)/leaderboards/tag/[slug]/page.tsx b/app/(reader)/leaderboards/tag/[slug]/page.tsx
index 671cda3..d1530e8 100644
--- a/app/(reader)/leaderboards/tag/[slug]/page.tsx
+++ b/app/(reader)/leaderboards/tag/[slug]/page.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import { HydrationBoundary } from "@tanstack/react-query";
+
+import { TagLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import { buildHydrationState, prefetchTrpcQuery } from "@/lib/react-query/server";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
-import { TagLeaderboardClient } from "@/components/leaderboards/leaderboard-client";
 import type { LeaderboardWindow } from "@/lib/leaderboard/service";
 
 const DEFAULT_WINDOW: LeaderboardWindow = "all_time";
@@ -17,7 +18,7 @@ export async function generateMetadata({
   const { slug } = await params;
   return {
     title: `#${slug} Leaderboard | OpenSolve`,
-    description: `See who’s dominating the #${slug} topic.`,
+    description: `See who's dominating the #${slug} topic.`,
   };
 }
 

From b0b128dabb82fdfa4a91d903680c3976b55763be Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Thu, 22 Aug 2024 13:20:00 +0430
Subject: [PATCH 18/21] refactor: update tags page and reader layout

---
 app/(reader)/layout.tsx           | 10 +++++-----
 app/(reader)/tags/[slug]/page.tsx |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/(reader)/layout.tsx b/app/(reader)/layout.tsx
index fc37c12..7379b07 100644
--- a/app/(reader)/layout.tsx
+++ b/app/(reader)/layout.tsx
@@ -1,3 +1,4 @@
+import { ReaderMobileNav } from "@/components/layout/reader-mobile-nav";
 import { ThemeToggle } from "@/components/ui";
 import { Button } from "@/components/ui/button";
 import { siteConfig } from "@/config/site";
@@ -6,7 +7,6 @@ import { cn } from "@/lib/utils";
 import { CodeIcon } from "hugeicons-react";
 import Link from "next/link";
 import type { PropsWithChildren } from "react";
-import { ReaderMobileNav } from "@/components/layout/reader-mobile-nav";
 
 const navLinks = [
   { label: "Problems", href: "/problems" },
@@ -48,7 +48,7 @@ export default async function ReaderLayout({ children }: PropsWithChildren) {
             href="/"
             className="group flex items-center gap-2 text-base font-bold tracking-tight transition-all hover:scale-105"
           >
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-linear-to-br from-primary to-secondary shadow-lg shadow-primary/20 transition-shadow group-hover:shadow-primary/40">
+            <div className="flex h-8 w-8 items-center justify-center bg-linear-to-br from-primary to-secondary shadow-lg shadow-primary/20 transition-shadow group-hover:shadow-primary/40">
               <CodeIcon className="h-5 w-5 text-primary-foreground" strokeWidth={2.5} />
             </div>
             <span className="bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent">
@@ -65,7 +65,7 @@ export default async function ReaderLayout({ children }: PropsWithChildren) {
                 target={link.external ? "_blank" : undefined}
                 rel={link.external ? "noopener noreferrer" : undefined}
                 className={cn(
-                  "rounded-lg px-3 py-1.5 text-sm font-medium transition-all",
+                  "px-3 py-1.5 text-sm font-medium transition-all",
                   link.href === "/problems"
                     ? "bg-primary/10 text-primary"
                     : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
@@ -83,7 +83,7 @@ export default async function ReaderLayout({ children }: PropsWithChildren) {
               <Button
                 asChild
                 size="sm"
-                className="hidden rounded-full shadow-lg shadow-primary/20 lg:inline-flex"
+                className="hidden shadow-lg shadow-primary/20 lg:inline-flex"
               >
                 <Link href="/dashboard">Workspace</Link>
               </Button>
@@ -92,7 +92,7 @@ export default async function ReaderLayout({ children }: PropsWithChildren) {
                 asChild
                 variant="outline"
                 size="sm"
-                className="hidden rounded-full lg:inline-flex"
+                className="hidden lg:inline-flex"
               >
                 <Link href="/sign-in">Sign in</Link>
               </Button>
diff --git a/app/(reader)/tags/[slug]/page.tsx b/app/(reader)/tags/[slug]/page.tsx
index d888a97..755abf3 100644
--- a/app/(reader)/tags/[slug]/page.tsx
+++ b/app/(reader)/tags/[slug]/page.tsx
@@ -45,5 +45,6 @@ export default async function TagProblemsPage({
       tags,
     },
     viewerHasSession,
+    tagSlug: slug,
   });
 }

From e91182d1959dea1d7d0335a7e64c800f67b29316 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sun, 25 Aug 2024 11:15:00 +0430
Subject: [PATCH 19/21] refactor: update platform pages with new design system

---
 .../problems/[slug]/submissions/page.tsx      |  4 +-
 app/(platform)/settings/account/page.tsx      | 70 +++++++++----------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/app/(platform)/problems/[slug]/submissions/page.tsx b/app/(platform)/problems/[slug]/submissions/page.tsx
index 6b6ec9b..24dc922 100644
--- a/app/(platform)/problems/[slug]/submissions/page.tsx
+++ b/app/(platform)/problems/[slug]/submissions/page.tsx
@@ -1,9 +1,9 @@
 import { SubmissionsClient } from "@/components/submissions/submissions-client";
+import { getCachedProblemDetail } from "@/lib/cache/problems";
 import { buildSubmissionListInputFromParams } from "@/lib/submissions/filter-utils";
 import { loadSubmissionSearchParams } from "@/lib/submissions/search-params";
 import { createTRPCCaller } from "@/lib/trpc/server/caller";
 import { notFound } from "next/navigation";
-import { getCachedProblemDetail } from "@/lib/cache/problems";
 
 export default async function ProblemSubmissionsPage({
   params,
@@ -39,7 +39,7 @@ export default async function ProblemSubmissionsPage({
 
   return (
     <div className="space-y-6">
-      <div className="rounded-xl border border-border bg-card/70 p-4">
+      <div className="border border-border bg-card/70 p-4">
         <p className="text-xs uppercase text-muted-foreground">Problem</p>
         <h1 className="text-xl font-semibold text-foreground">{problem.title}</h1>
       </div>
diff --git a/app/(platform)/settings/account/page.tsx b/app/(platform)/settings/account/page.tsx
index 07cdc77..f563049 100644
--- a/app/(platform)/settings/account/page.tsx
+++ b/app/(platform)/settings/account/page.tsx
@@ -1,5 +1,19 @@
 "use client";
 
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  LogOut,
+  Mail,
+  Monitor,
+  Shield,
+  Smartphone,
+  Tablet,
+  Trash2,
+  User as UserIcon,
+  XCircle,
+} from "@/components/icons";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,20 +34,6 @@ import { sessionQueryOptions, userScopedListOptions } from "@/lib/react-query/po
 import { trpc } from "@/lib/trpc/client";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
-import {
-  AlertTriangle,
-  CheckCircle2,
-  Loader2,
-  LogOut,
-  Mail,
-  Monitor,
-  Shield,
-  Smartphone,
-  Tablet,
-  Trash2,
-  User as UserIcon,
-  XCircle,
-} from "@/components/icons";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -123,12 +123,12 @@ export default function AccountSettingsPage() {
     return (
       <div className="mx-auto max-w-4xl space-y-8 animate-fade-in">
         <div>
-          <Skeleton className="h-8 w-48 rounded-xl" />
-          <Skeleton className="mt-2 h-4 w-96 rounded-lg" />
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="mt-2 h-4 w-96" />
         </div>
-        <div className="premium-card space-y-6 rounded-2xl p-8">
-          <Skeleton className="h-24 w-full rounded-xl" />
-          <Skeleton className="h-24 w-full rounded-xl" />
+        <div className="premium-card space-y-6 p-8">
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-24 w-full" />
         </div>
       </div>
     );
@@ -147,14 +147,14 @@ export default function AccountSettingsPage() {
         </p>
       </div>
 
-      <div className="premium-card space-y-6 rounded-2xl p-8">
+      <div className="premium-card space-y-6 p-8">
         <div>
           <h2 className="text-lg font-semibold">Account Information</h2>
           <p className="text-sm text-muted-foreground">Your core account details</p>
         </div>
 
         <div className="grid gap-6 sm:grid-cols-2">
-          <div className="space-y-2 rounded-xl border border-border/50 bg-muted/30 p-4">
+          <div className="space-y-2 border border-border/50 bg-muted/30 p-4">
             <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
               <Mail className="h-3.5 w-3.5" />
               Email Address
@@ -179,14 +179,14 @@ export default function AccountSettingsPage() {
                 variant="outline"
                 onClick={() => resendVerification.mutate()}
                 disabled={resendVerification.isPending}
-                className="mt-2 h-8 rounded-lg text-xs"
+                className="mt-2 h-8 text-xs"
               >
                 {resendVerification.isPending ? "Sending..." : "Resend Verification"}
               </Button>
             ) : null}
           </div>
 
-          <div className="space-y-2 rounded-xl border border-border/50 bg-muted/30 p-4">
+          <div className="space-y-2 border border-border/50 bg-muted/30 p-4">
             <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
               <UserIcon className="h-3.5 w-3.5" />
               Username
@@ -194,7 +194,7 @@ export default function AccountSettingsPage() {
             <p className="font-medium">@{session.user.handle}</p>
           </div>
 
-          <div className="space-y-2 rounded-xl border border-border/50 bg-muted/30 p-4">
+          <div className="space-y-2 border border-border/50 bg-muted/30 p-4">
             <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
               <Shield className="h-3.5 w-3.5" />
               Account Role
@@ -204,7 +204,7 @@ export default function AccountSettingsPage() {
             </Badge>
           </div>
 
-          <div className="space-y-2 rounded-xl border border-border/50 bg-muted/30 p-4">
+          <div className="space-y-2 border border-border/50 bg-muted/30 p-4">
             <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
               <Shield className="h-3.5 w-3.5" />
               Two-Factor Auth
@@ -217,7 +217,7 @@ export default function AccountSettingsPage() {
                 variant="ghost"
                 size="sm"
                 onClick={() => router.push("/settings/security")}
-                className="h-7 rounded-lg text-xs"
+                className="h-7 text-xs"
               >
                 Manage
               </Button>
@@ -226,7 +226,7 @@ export default function AccountSettingsPage() {
         </div>
       </div>
 
-      <div className="premium-card space-y-6 rounded-2xl p-8">
+      <div className="premium-card space-y-6 p-8">
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-lg font-semibold">Active Sessions</h2>
@@ -243,10 +243,10 @@ export default function AccountSettingsPage() {
           {sessions?.map((sess) => (
             <div
               key={sess.id}
-              className="flex items-center justify-between gap-4 rounded-xl border border-border/50 bg-card/50 p-4 smooth-transition hover:border-border"
+              className="flex items-center justify-between gap-4 border border-border/50 bg-card/50 p-4 smooth-transition hover:border-border"
             >
               <div className="flex items-center gap-4">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted/60">
+                <div className="flex h-10 w-10 items-center justify-center bg-muted/60">
                   {getDeviceIcon(sess.userAgent)}
                 </div>
                 <div className="space-y-1">
@@ -270,7 +270,7 @@ export default function AccountSettingsPage() {
                   size="sm"
                   onClick={() => revokeSessionMutation.mutate({ sessionId: sess.id })}
                   disabled={revokeSessionMutation.isPending}
-                  className="h-8 rounded-lg text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
+                  className="h-8 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
                 >
                   {revokeSessionMutation.isPending ? (
                     <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -285,7 +285,7 @@ export default function AccountSettingsPage() {
 
         <div className="h-px bg-border/50" />
 
-        <div className="flex items-center justify-between rounded-xl border border-warning/30 bg-warning/5 p-4">
+        <div className="flex items-center justify-between border border-warning/30 bg-warning/5 p-4">
           <div className="flex items-center gap-3">
             <AlertTriangle className="h-5 w-5 text-warning" />
             <div>
@@ -311,9 +311,9 @@ export default function AccountSettingsPage() {
         </div>
       </div>
 
-      <div className="premium-card space-y-6 rounded-2xl border-destructive/20 p-8">
+      <div className="premium-card space-y-6 border-destructive/20 p-8">
         <div className="flex items-start gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-destructive/10">
+          <div className="flex h-10 w-10 items-center justify-center bg-destructive/10">
             <AlertTriangle className="h-5 w-5 text-destructive" />
           </div>
           <div className="flex-1">
@@ -328,7 +328,7 @@ export default function AccountSettingsPage() {
 
         <AlertDialog>
           <AlertDialogTrigger asChild>
-            <Button variant="destructive" className="w-full rounded-xl sm:w-auto">
+            <Button variant="destructive" className="w-full sm:w-auto">
               <Trash2 className="mr-2 h-4 w-4" />
               Delete Account
             </Button>
@@ -360,7 +360,7 @@ export default function AccountSettingsPage() {
                   value={deletePassword}
                   onChange={(e) => setDeletePassword(e.target.value)}
                   placeholder="Your password"
-                  className="mt-2 rounded-xl"
+                  className="mt-2"
                 />
               </div>
             </div>

From 745004abf190ef3d1bf7bcbf6151d008796ccf86 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Wed, 28 Aug 2024 10:00:00 +0430
Subject: [PATCH 20/21] chore: complete UI redesign migration to OpenSolve
 design system


From 45abe94ed9a3f1e41280cf7702d0f629351d1e13 Mon Sep 17 00:00:00 2001
From: Elhamullah Hossaini <afghanbahram8@gmail.com>
Date: Sat, 6 Dec 2025 11:51:06 +0430
Subject: [PATCH 21/21] patch: cve vulnerability

---
 config/discussions.ts  |  1 +
 config/leaderboards.ts |  1 +
 package-lock.json      | 80 +++++++++++++++++++++---------------------
 package.json           |  2 +-
 4 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/config/discussions.ts b/config/discussions.ts
index b80cc7d..1ed6f6a 100644
--- a/config/discussions.ts
+++ b/config/discussions.ts
@@ -73,3 +73,4 @@ export const discussionsConfig = {
 };
 
 export type DiscussionsConfig = typeof discussionsConfig;
+
diff --git a/config/leaderboards.ts b/config/leaderboards.ts
index 68dab62..f0c6056 100644
--- a/config/leaderboards.ts
+++ b/config/leaderboards.ts
@@ -78,3 +78,4 @@ export const leaderboardsConfig = {
 };
 
 export type LeaderboardsConfig = typeof leaderboardsConfig;
+
diff --git a/package-lock.json b/package-lock.json
index cc6b720..d3c6f3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,7 +78,7 @@
         "lru-cache": "^11.2.2",
         "marked": "^17.0.0",
         "nanoid": "^5.0.0",
-        "next": "16.0.1",
+        "next": "^16.0.7",
         "next-themes": "^0.4.6",
         "nodemailer": "^6.9.8",
         "nuqs": "^2.7.2",
@@ -2281,9 +2281,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.1.tgz",
-      "integrity": "sha512-LFvlK0TG2L3fEOX77OC35KowL8D7DlFF45C0OvKMC4hy8c/md1RC4UMNDlUGJqfCoCS2VWrZ4dSE6OjaX5+8mw==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz",
+      "integrity": "sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -2297,9 +2297,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.1.tgz",
-      "integrity": "sha512-R0YxRp6/4W7yG1nKbfu41bp3d96a0EalonQXiMe+1H9GTHfKxGNCGFNWUho18avRBPsO8T3RmdWuzmfurlQPbg==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz",
+      "integrity": "sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==",
       "cpu": [
         "arm64"
       ],
@@ -2313,9 +2313,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.1.tgz",
-      "integrity": "sha512-kETZBocRux3xITiZtOtVoVvXyQLB7VBxN7L6EPqgI5paZiUlnsgYv4q8diTNYeHmF9EiehydOBo20lTttCbHAg==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.7.tgz",
+      "integrity": "sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==",
       "cpu": [
         "x64"
       ],
@@ -2329,9 +2329,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.1.tgz",
-      "integrity": "sha512-hWg3BtsxQuSKhfe0LunJoqxjO4NEpBmKkE+P2Sroos7yB//OOX3jD5ISP2wv8QdUwtRehMdwYz6VB50mY6hqAg==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.7.tgz",
+      "integrity": "sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==",
       "cpu": [
         "arm64"
       ],
@@ -2345,9 +2345,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.1.tgz",
-      "integrity": "sha512-UPnOvYg+fjAhP3b1iQStcYPWeBFRLrugEyK/lDKGk7kLNua8t5/DvDbAEFotfV1YfcOY6bru76qN9qnjLoyHCQ==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.7.tgz",
+      "integrity": "sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==",
       "cpu": [
         "arm64"
       ],
@@ -2361,9 +2361,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.1.tgz",
-      "integrity": "sha512-Et81SdWkcRqAJziIgFtsFyJizHoWne4fzJkvjd6V4wEkWTB4MX6J0uByUb0peiJQ4WeAt6GGmMszE5KrXK6WKg==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.7.tgz",
+      "integrity": "sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==",
       "cpu": [
         "x64"
       ],
@@ -2377,9 +2377,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.1.tgz",
-      "integrity": "sha512-qBbgYEBRrC1egcG03FZaVfVxrJm8wBl7vr8UFKplnxNRprctdP26xEv9nJ07Ggq4y1adwa0nz2mz83CELY7N6Q==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.7.tgz",
+      "integrity": "sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==",
       "cpu": [
         "x64"
       ],
@@ -2393,9 +2393,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.1.tgz",
-      "integrity": "sha512-cPuBjYP6I699/RdbHJonb3BiRNEDm5CKEBuJ6SD8k3oLam2fDRMKAvmrli4QMDgT2ixyRJ0+DTkiODbIQhRkeQ==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.7.tgz",
+      "integrity": "sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==",
       "cpu": [
         "arm64"
       ],
@@ -2409,9 +2409,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.1.tgz",
-      "integrity": "sha512-XeEUJsE4JYtfrXe/LaJn3z1pD19fK0Q6Er8Qoufi+HqvdO4LEPyCxLUt4rxA+4RfYo6S9gMlmzCMU2F+AatFqQ==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.7.tgz",
+      "integrity": "sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==",
       "cpu": [
         "x64"
       ],
@@ -15360,12 +15360,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.0.1.tgz",
-      "integrity": "sha512-e9RLSssZwd35p7/vOa+hoDFggUZIUbZhIUSLZuETCwrCVvxOs87NamoUzT+vbcNAL8Ld9GobBnWOA6SbV/arOw==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.7.tgz",
+      "integrity": "sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.0.1",
+        "@next/env": "16.0.7",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -15378,14 +15378,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.0.1",
-        "@next/swc-darwin-x64": "16.0.1",
-        "@next/swc-linux-arm64-gnu": "16.0.1",
-        "@next/swc-linux-arm64-musl": "16.0.1",
-        "@next/swc-linux-x64-gnu": "16.0.1",
-        "@next/swc-linux-x64-musl": "16.0.1",
-        "@next/swc-win32-arm64-msvc": "16.0.1",
-        "@next/swc-win32-x64-msvc": "16.0.1",
+        "@next/swc-darwin-arm64": "16.0.7",
+        "@next/swc-darwin-x64": "16.0.7",
+        "@next/swc-linux-arm64-gnu": "16.0.7",
+        "@next/swc-linux-arm64-musl": "16.0.7",
+        "@next/swc-linux-x64-gnu": "16.0.7",
+        "@next/swc-linux-x64-musl": "16.0.7",
+        "@next/swc-win32-arm64-msvc": "16.0.7",
+        "@next/swc-win32-x64-msvc": "16.0.7",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index 2ea43ec..19d7743 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "lru-cache": "^11.2.2",
     "marked": "^17.0.0",
     "nanoid": "^5.0.0",
-    "next": "16.0.1",
+    "next": "^16.0.7",
     "next-themes": "^0.4.6",
     "nodemailer": "^6.9.8",
     "nuqs": "^2.7.2",