DBP-34: Questions List page

app/(app)/challenges/[id]/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "挑戰題目",
+};
+
+export default function ChallengePage(/* _props: { params: Promise<{ id: string }> } */) {
+  return <div>ChallengePage</div>;
+}

app/(app)/challenges/_filter/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import SearchFilterSection from "./search";
+import TagFilterSection, { type TagState } from "./tag";
+
+export interface FilterSectionProps {
+  search: string;
+  setSearch: (search: string) => void;
+  tags: TagState;
+  setTags: (tags: TagState) => void;
+}
+
+export default function FilterSection({
+  search,
+  setSearch,
+  tags,
+  setTags,
+}: FilterSectionProps) {
+  return (
+    <aside
+      className={`
+        flex min-h-[50dvh] w-[25%] flex-col gap-8 rounded bg-gray-100 p-6
+      `}
+    >
+      <SearchFilterSection value={search} onChange={setSearch} />
+      <TagFilterSection value={tags} onChange={setTags} />
+    </aside>
+  );
+}

app/(app)/challenges/_filter/search.tsx

@@ -0,0 +1,22 @@
+import { Input } from "@/components/ui/input";
+import { SearchIcon } from "lucide-react";
+
+export interface SearchFilterSectionProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function SearchFilterSection({ value, onChange }: SearchFilterSectionProps) {
+  return (
+    <div className="space-y-2">
+      <label className="flex items-center gap-2 font-bold">
+        <SearchIcon className="size-4" />
+        搜尋
+      </label>
+      <Input type="text" placeholder="搜尋" value={value} onChange={(e) => onChange(e.target.value)} />
+      <p className="text-sm text-muted-foreground">
+        可以搜尋題目標題、題幹內容，或者是類別。
+      </p>
+    </div>
+  );
+}

app/(app)/challenges/_filter/tag.tsx

@@ -0,0 +1,132 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { QuestionDifficulty } from "@/gql/graphql";
+import { FilterIcon } from "lucide-react";
+import { type Difficulty, difficultyTranslation, type SolvedStatus, solvedStatusTranslation } from "../model";
+
+export interface TagState {
+  solvedStatus: SolvedStatus[];
+  difficulty: Difficulty[];
+}
+
+export interface TagFilterSectionProps {
+  value: TagState;
+  onChange: (tags: TagState) => void;
+}
+
+export default function TagFilterSection({
+  value,
+  onChange,
+}: TagFilterSectionProps) {
+  const getSolvedStatus = (solvedStatus: SolvedStatus) => {
+    return value.solvedStatus.includes(solvedStatus);
+  };
+
+  const getDifficulty = (difficulty: Difficulty) => {
+    return value.difficulty.includes(difficulty);
+  };
+
+  const handleDifficultyChange = (difficulty: Difficulty) => {
+    return (checked: boolean) => {
+      onChange({
+        ...value,
+        difficulty: checked
+          ? [...value.difficulty, difficulty]
+          : value.difficulty.filter((d) => d !== difficulty),
+      });
+    };
+  };
+
+  const handleSolvedStatusChange = (status: SolvedStatus) => {
+    return (checked: boolean) => {
+      onChange({
+        ...value,
+        solvedStatus: checked
+          ? [...value.solvedStatus, status]
+          : value.solvedStatus.filter((s) => s !== status),
+      });
+    };
+  };
+
+  return (
+    <div className="space-y-3">
+      <label className="flex items-center gap-2 font-bold">
+        <FilterIcon className="size-4" />
+        標籤
+      </label>
+
+      <div className="mb-4 space-y-2 text-sm text-muted-foreground">
+        解題狀態
+        <div className="mt-2 space-y-2">
+          <TagCheckbox
+            tag="solved"
+            checked={getSolvedStatus("solved")}
+            onChange={handleSolvedStatusChange("solved")}
+            translation={solvedStatusTranslation}
+          />
+          <TagCheckbox
+            tag="unsolved"
+            checked={getSolvedStatus("unsolved")}
+            onChange={handleSolvedStatusChange("unsolved")}
+            translation={solvedStatusTranslation}
+          />
+          <TagCheckbox
+            tag="not-tried"
+            checked={getSolvedStatus("not-tried")}
+            onChange={handleSolvedStatusChange("not-tried")}
+            translation={solvedStatusTranslation}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2 text-sm text-muted-foreground">
+        難度
+        <div className="mt-2 space-y-2">
+          <TagCheckbox
+            tag={QuestionDifficulty.Easy}
+            checked={getDifficulty(QuestionDifficulty.Easy)}
+            onChange={handleDifficultyChange(QuestionDifficulty.Easy)}
+            translation={difficultyTranslation}
+          />
+          <TagCheckbox
+            tag={QuestionDifficulty.Medium}
+            checked={getDifficulty(QuestionDifficulty.Medium)}
+            onChange={handleDifficultyChange(QuestionDifficulty.Medium)}
+            translation={difficultyTranslation}
+          />
+          <TagCheckbox
+            tag={QuestionDifficulty.Hard}
+            checked={getDifficulty(QuestionDifficulty.Hard)}
+            onChange={handleDifficultyChange(QuestionDifficulty.Hard)}
+            translation={difficultyTranslation}
+          />
+          <TagCheckbox
+            tag={QuestionDifficulty.Unspecified}
+            checked={getDifficulty(QuestionDifficulty.Unspecified)}
+            onChange={handleDifficultyChange(QuestionDifficulty.Unspecified)}
+            translation={difficultyTranslation}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TagCheckbox<T extends string>({
+  tag,
+  checked,
+  onChange,
+  translation,
+}: {
+  tag: T;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  translation: Record<T, string>;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id={tag} checked={checked} onCheckedChange={onChange} />
+      <Label htmlFor={tag}>{translation[tag]}</Label>
+    </div>
+  );
+}

app/(app)/challenges/_header/index.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { GridProgress } from "@/components/ui/grid-progress";
+import { graphql } from "@/gql";
+import { useSuspenseQuery } from "@apollo/client/react";
+
+const CHALLENGE_STATISTICS_QUERY = graphql(`
+  query ChallengeStatisticsQuery {
+    me {
+      submissionStatistics {
+        totalQuestions
+        solvedQuestions
+        attemptedQuestions
+      }
+    }
+  }
+`);
+
+export default function Header() {
+  const { data } = useSuspenseQuery(CHALLENGE_STATISTICS_QUERY);
+
+  const totalQuestions = data.me.submissionStatistics.totalQuestions;
+  const totalSolvedQuestions = data.me.submissionStatistics.solvedQuestions;
+  const totalAttemptedQuestions = data.me.submissionStatistics.attemptedQuestions;
+
+  return (
+    <header className="flex items-center justify-between pb-6">
+      <div className="space-y-1 tracking-wide">
+        <h1 className="text-xl font-bold">
+          <HeaderTitle
+            totalQuestions={totalQuestions}
+            totalSolvedQuestions={totalSolvedQuestions}
+          />
+        </h1>
+        <p>
+          <HeaderDescription
+            totalSolvedQuestions={totalSolvedQuestions}
+            totalAttemptedQuestions={totalAttemptedQuestions}
+          />
+        </p>
+      </div>
+
+      <div
+        className={`
+          hidden
+          md:block
+        `}
+      >
+        <GridProgress
+          variant="primary"
+          cols={10}
+          rows={4}
+          progress={(totalSolvedQuestions / totalQuestions) * 100}
+        />
+      </div>
+    </header>
+  );
+}
+
+export function HeaderTitle({
+  totalQuestions,
+  totalSolvedQuestions,
+}: {
+  totalQuestions: number;
+  totalSolvedQuestions: number;
+}) {
+  const remainingQuestions = totalQuestions - totalSolvedQuestions;
+
+  if (remainingQuestions === 0) {
+    return <>你成功挑戰了所有題目！</>;
+  }
+
+  if (remainingQuestions === 1) {
+    return <>剩下最後一題就能全數通關！</>;
+  }
+
+  return <>繼續挑戰接下來的 {remainingQuestions} 題題目吧！</>;
+}
+
+export function HeaderDescription({
+  totalSolvedQuestions,
+  totalAttemptedQuestions,
+}: {
+  totalSolvedQuestions: number;
+  totalAttemptedQuestions: number;
+}) {
+  if (totalAttemptedQuestions > 0 && totalSolvedQuestions === totalAttemptedQuestions) {
+    return <>你現在百戰百勝，繼續加油！</>;
+  }
+
+  if (totalSolvedQuestions > 0) {
+    return (
+      <>
+        你目前已經嘗試作答了 {totalAttemptedQuestions} 題，其中攻克了 {totalSolvedQuestions} 題！
+      </>
+    );
+  }
+
+  if (totalAttemptedQuestions > 0) {
+    return <>你目前已經嘗試作答了 {totalAttemptedQuestions} 題，祝你成功攻克題目！</>;
+  }
+
+  return <>你尚未嘗試作答任何題目，快點試試看你有興趣的題目吧！</>;
+}

app/(app)/challenges/_header/skeleton.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function HeaderSkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-86" />
+      </div>
+
+      <Skeleton
+        className={`
+          hidden h-16 w-40
+          md:block
+        `}
+      />
+    </div>
+  );
+}