added custom problem id and endless mode

Author: Edwin Chan

app/admin/create/page.tsx

@@ -29,7 +29,7 @@ type ContentFormat = "LATEX" | "HTML";
 
 interface ProblemEntry {
   id: string;
-  number: number;
+  number: string;
   statement: string;
   contentFormat: ContentFormat;
   answerType: AnswerType;
@@ -54,10 +54,10 @@ function uid() {
   return Math.random().toString(36).slice(2, 10);
 }
 
-function emptyProblem(n: number): ProblemEntry {
+function emptyProblem(n: number | string): ProblemEntry {
   return {
     id: uid(),
-    number: n,
+    number: String(n),
     statement: "",
     contentFormat: "LATEX",
     answerType: "INTEGER",
@@ -157,7 +157,7 @@ export default function CreateSetPage() {
     setProblems((prev) =>
       Array.from({ length: safeCount }, (_, index) => {
         const existing = prev[index];
-        return existing ? { ...existing, number: index + 1 } : emptyProblem(index + 1);
+        return existing ? existing : emptyProblem(index + 1);
       }),
     );
   }
@@ -184,8 +184,7 @@ export default function CreateSetPage() {
 
   function removeProblem(id: string) {
     setProblems((prev) => {
-      const next = prev.filter((p) => p.id !== id);
-      return next.map((p, i) => ({ ...p, number: i + 1 }));
+      return prev.filter((p) => p.id !== id);
     });
   }
 
@@ -531,9 +530,23 @@ export default function CreateSetPage() {
         {problems.map((p) => (
           <div key={p.id} className="problem-card">
             <div className="problem-card-head">
-              <div className="problem-number">
+              <div className="problem-number" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                 <GripVertical size={14} className="grip-icon" />
-                <span>Q{p.number}</span>
+                <input
+                  type="text"
+                  value={p.number}
+                  onChange={(e) => updateProblem(p.id, "number", e.target.value)}
+                  style={{
+                    width: 60,
+                    padding: "4px 8px",
+                    borderRadius: 4,
+                    border: "1px solid var(--color-border)",
+                    background: "var(--color-surface)",
+                    color: "var(--color-text-strong)",
+                    fontWeight: 700,
+                  }}
+                  placeholder="ID"
+                />
               </div>
               <div className="problem-card-actions">
                 <button

app/admin/sets/[id]/set-edit-form.tsx

@@ -24,7 +24,7 @@ import { DeleteSetButton } from "../delete-set-button";
 
 type ProblemData = {
   id: string;
-  number: number;
+  number: string;
   statement: string;
   contentFormat: "LATEX" | "HTML";
   answerKey: string;
@@ -81,10 +81,10 @@ function toggleTagInCsv(csv: string, tag: string): string {
   return next.join(", ");
 }
 
-function newProblem(number: number) {
+function newProblem(number: number | string) {
   return {
     id: `new-${Math.random().toString(36).slice(2, 10)}`,
-    number,
+    number: String(number),
     statement: "",
     contentFormat: "LATEX" as const,
     answerKey: "",
@@ -179,6 +179,7 @@ export function SetEditForm({ set }: { set: SetData }) {
       | "answerKey"
       | "answerType"
       | "points"
+      | "number"
       | "topicTagsInput"
       | "explanationNoteInput",
     value: string | number,
@@ -197,9 +198,7 @@ export function SetEditForm({ set }: { set: SetData }) {
   function removeProblem(problemId: string) {
     setProblems((prev) => {
       if (prev.length <= 1) return prev;
-      return prev
-        .filter((problem) => problem.id !== problemId)
-        .map((problem, index) => ({ ...problem, number: index + 1 }));
+      return prev.filter((problem) => problem.id !== problemId);
     });
   }
 
@@ -208,7 +207,7 @@ export function SetEditForm({ set }: { set: SetData }) {
     setProblems((prev) =>
       Array.from({ length: safeCount }, (_, index) => {
         const existing = prev[index];
-        return existing ? { ...existing, number: index + 1 } : newProblem(index + 1);
+        return existing ? existing : newProblem(index + 1);
       }),
     );
   }
@@ -572,8 +571,23 @@ export function SetEditForm({ set }: { set: SetData }) {
                     ) : (
                       <ChevronRight size={18} />
                     )}
-                    <div className="problem-number">
-                      <span>Q{problem.number}</span>
+                    <div className="problem-number" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      <input
+                        type="text"
+                        value={problem.number}
+                        onChange={(e) => updateProblem(problem.id, "number", e.target.value)}
+                        onClick={(e) => e.stopPropagation()}
+                        style={{
+                          width: 60,
+                          padding: "2px 6px",
+                          borderRadius: 4,
+                          border: "1px solid var(--color-border)",
+                          background: "var(--color-surface)",
+                          color: "var(--color-text-strong)",
+                          fontWeight: 700,
+                        }}
+                        placeholder="ID"
+                      />
                     </div>
                     {!expandedProblems.has(problem.id) && (
                       <small

app/api/practice/next/route.ts

@@ -35,9 +35,7 @@ export async function GET(request: Request) {
           userId: session.user.id,
         },
       },
-      topicTags: {
-        has: tag,
-      },
+      ...(tag.toLowerCase() === "endless" ? {} : { topicTags: { has: tag } }),
     },
     select: {
       id: true,

app/api/practice/tags/route.ts

@@ -55,5 +55,5 @@ export async function GET() {
     .map(([tag]) => tag)
     .sort();
 
-  return NextResponse.json({ tags: validTags, practiceScore });
+  return NextResponse.json({ tags: ["Endless", ...validTags], practiceScore });
 }

app/api/submit/report/route.ts

@@ -25,7 +25,7 @@ export async function POST(req: Request) {
     let problemId = null;
     if (problemNumber) {
       const problem = await prisma.problem.findUnique({
-        where: { problemSetId_number: { problemSetId, number: Number(problemNumber) } },
+        where: { problemSetId_number: { problemSetId, number: String(problemNumber) } },
       });
       if (problem) {
         problemId = problem.id;

app/practice/page.tsx

@@ -182,8 +182,7 @@ export default function PracticePage() {
             <Target size={48} style={{ margin: "0 auto 20px", color: "var(--color-pink)" }} />
             <h2 style={{ fontSize: "1.8rem", marginBottom: 10 }}>Select a Category</h2>
             <p style={{ color: "var(--color-muted)", marginBottom: 30 }}>
-              Focus your training on specific topics. Only tags with more than 10 questions are
-              shown.
+              Focus your training on specific topics (10+ questions) or try the Endless mode.
             </p>
 
             {loadingTags ? (
@@ -194,33 +193,43 @@ export default function PracticePage() {
               <p>No categories available with enough questions.</p>
             ) : (
               <div style={{ display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "center" }}>
-                {tags.map((tag) => (
-                  <button
-                    key={tag}
-                    onClick={() => handleTagSelect(tag)}
-                    style={{
-                      padding: "12px 24px",
-                      borderRadius: 100,
-                      background: "var(--color-surface)",
-                      border: "1px solid var(--color-border)",
-                      color: "var(--color-text-strong)",
-                      fontSize: "1.1rem",
-                      fontWeight: 700,
-                      cursor: "pointer",
-                      transition: "all 0.2s",
-                    }}
-                    onMouseOver={(e) => {
-                      e.currentTarget.style.borderColor = "var(--color-pink)";
-                      e.currentTarget.style.transform = "translateY(-2px)";
-                    }}
-                    onMouseOut={(e) => {
-                      e.currentTarget.style.borderColor = "var(--color-border)";
-                      e.currentTarget.style.transform = "none";
-                    }}
-                  >
-                    {tag}
-                  </button>
-                ))}
+                {tags.map((tag) => {
+                  const isEndless = tag.toLowerCase() === "endless";
+                  return (
+                    <button
+                      key={tag}
+                      onClick={() => handleTagSelect(tag)}
+                      style={{
+                        padding: "12px 24px",
+                        borderRadius: 100,
+                        background: isEndless
+                          ? "linear-gradient(135deg, var(--color-pink), var(--color-purple))"
+                          : "var(--color-surface)",
+                        border: isEndless ? "none" : "1px solid var(--color-border)",
+                        color: isEndless ? "white" : "var(--color-text-strong)",
+                        fontSize: "1.1rem",
+                        fontWeight: 700,
+                        cursor: "pointer",
+                        transition: "all 0.2s",
+                        boxShadow: isEndless ? "0 4px 15px rgba(255, 0, 150, 0.3)" : "none",
+                      }}
+                      onMouseOver={(e) => {
+                        if (!isEndless) {
+                          e.currentTarget.style.borderColor = "var(--color-pink)";
+                        }
+                        e.currentTarget.style.transform = "translateY(-2px)";
+                      }}
+                      onMouseOut={(e) => {
+                        if (!isEndless) {
+                          e.currentTarget.style.borderColor = "var(--color-border)";
+                        }
+                        e.currentTarget.style.transform = "none";
+                      }}
+                    >
+                      {tag}
+                    </button>
+                  );
+                })}
               </div>
             )}
           </section>

app/problem-sets/[slug]/answer-grid.tsx

@@ -12,7 +12,7 @@ type SubmitResult = {
   maxScore: number;
   percentage: number;
   results: Array<{
-    number: number;
+    number: string;
     rawAnswer: string;
     isCorrect: boolean;
     pointsAwarded: number;
@@ -21,9 +21,9 @@ type SubmitResult = {
 
 type Props = {
   problemSetId: string;
-  problemCount: number;
+  problemNumbers: string[];
   problemSummaries?: Array<{
-    number: number;
+    number: string;
     topicTags: string[];
     explanationNote: string | null;
     contentFormat: "LATEX" | "HTML";
@@ -37,12 +37,11 @@ const REVIEW_KEY_PREFIX = "mo-review-";
 
 export function AnswerGrid({
   problemSetId,
-  problemCount,
+  problemNumbers,
   problemSummaries = [],
   videoUrl = null,
   lockedAttemptNumber = null,
 }: Props) {
-  const problemNumbers = Array.from({ length: problemCount }, (_, i) => i + 1);
   const autosaveKey = `${AUTOSAVE_KEY_PREFIX}${problemSetId}`;
   const reviewKey = `${REVIEW_KEY_PREFIX}${problemSetId}`;
 
@@ -59,11 +58,11 @@ export function AnswerGrid({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitResult, setSubmitResult] = useState<SubmitResult | null>(null);
   const [submitError, setSubmitError] = useState<string | null>(null);
-  const [reviewLater, setReviewLater] = useState<Set<number>>(() => {
+  const [reviewLater, setReviewLater] = useState<Set<string>>(() => {
     if (typeof window === "undefined") return new Set();
     try {
       const saved = localStorage.getItem(reviewKey);
-      return new Set(saved ? (JSON.parse(saved) as number[]) : []);
+      return new Set(saved ? (JSON.parse(saved) as string[]) : []);
     } catch {
       return new Set();
     }
@@ -93,9 +92,9 @@ export function AnswerGrid({
     [autosaveKey],
   );
 
-  function onAnswerChange(number: number, value: string) {
+  function onAnswerChange(number: string, value: string) {
     setAnswers((prev) => {
-      const next = { ...prev, [String(number)]: value };
+      const next = { ...prev, [number]: value };
       debouncedSave(next);
       return next;
     });
@@ -151,7 +150,7 @@ export function AnswerGrid({
     startTime.current = Date.now();
   }
 
-  function toggleReviewLater(problemNumber: number) {
+  function toggleReviewLater(problemNumber: string) {
     setReviewLater((current) => {
       const next = new Set(current);
       if (next.has(problemNumber)) {
@@ -187,7 +186,7 @@ export function AnswerGrid({
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           problemSetId,
-          problemNumber: problemNumber ? Number(problemNumber) : null,
+          problemNumber: problemNumber ? problemNumber : null,
           type,
           message,
         }),
@@ -453,7 +452,7 @@ export function AnswerGrid({
               aria-label={`Answer ${number}`}
               name={`answer-${number}`}
               placeholder="answer"
-              value={answers[String(number)] ?? ""}
+              value={answers[number] ?? ""}
               onChange={(e) => onAnswerChange(number, e.target.value)}
             />
           </label>
@@ -462,7 +461,7 @@ export function AnswerGrid({
 
       <div className="problem-actions">
         <span className="fill-count">
-          {filledCount}/{problemCount} answered
+          {filledCount}/{problemNumbers.length} answered
         </span>
         <button
           className="secondary-action"

app/problem-sets/[slug]/page.tsx

@@ -203,7 +203,7 @@ export default async function ProblemSetPage({ params }: ProblemSetPageProps) {
             </div>
             <AnswerGrid
               lockedAttemptNumber={perfectAttempt?.attemptNumber ?? null}
-              problemCount={problemCount}
+              problemNumbers={problemSet.problems.map((p) => p.number)}
               problemSummaries={problemSet.problems.map((problem) => ({
                 number: problem.number,
                 topicTags: problem.topicTags,

app/typewriter-greeting.tsx

@@ -9,15 +9,19 @@ const BETWEEN_GREETING_MS = 280;
 
 const GREETINGS = [
   (name: string) => `Hello, ${name}!`,
-  (name: string) => `Ready for another set, ${name}?`,
-  (name: string) => `Get on, ${name}.`,
+  (name: string) => `Eat more curry, ${name}!`,
+  (name: string) => `Subscribe to Let's Think Critically, ${name}!`,
   (name: string) => `Welcome back, ${name}.`,
-  (name: string) => `Wassup, ${name}.`,
+  (name: string) => `Wassup :), ${name}.`,
   (name: string) => `Good to see you, ${name}.`,
-  (name: string) => `A little progress today, ${name}?`,
   (name: string) => `Make me proud, ${name}.`,
   (name: string) => `Be Culver Kwan, ${name}.`,
   (name: string) => `Time to lock in, ${name}.`,
+  (name: string) => `Be Marcoroni :3, ${name}.`,
+  (name: string) => `Marcoroni is typing..., ${name}.`,
+  (name: string) => `Search Marco The Dog, ${name}.`,
+  (name: string) => `Solve these problems if you're not gay, ${name}.`
+
 ];
 
 function GreetingTyper({ name }: { name: string }) {

lib/analytics.ts

@@ -17,7 +17,7 @@ export type ScoreBucket = {
 export type QuestionStat = {
   problemSetTitle: string;
   problemSetSlug: string;
-  problemNumber: number;
+  problemNumber: string;
   total: number;
   correct: number;
   accuracy: number;
@@ -71,7 +71,7 @@ export function computeScoreBuckets(
 export function computeQuestionStats(
   responses: Array<{
     isCorrect: boolean;
-    problem: { number: number; problemSetId: string };
+    problem: { number: string; problemSetId: string };
   }>,
   setMap: Map<string, { title: string; slug: string }>,
 ): QuestionStat[] {