style: reformat codebase

Author: pan93412

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

@@ -4,6 +4,6 @@ export const metadata: Metadata = {
   title: "挑戰題目",
 };
 
-export default function ChallengePage({ params }: { params: { id: string } }) {
+export default function ChallengePage(/* _props: { params: Promise<{ id: string }> } */) {
   return <div>ChallengePage</div>;
 }

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

@@ -17,7 +17,11 @@ export default function FilterSection({
   setTags,
 }: FilterSectionProps) {
   return (
-    <aside className="flex flex-col gap-8 p-6 bg-gray-100 min-h-[50dvh] w-[25%] rounded">
+    <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

@@ -2,21 +2,21 @@ import { Input } from "@/components/ui/input";
 import { SearchIcon } from "lucide-react";
 
 export interface SearchFilterSectionProps {
-    value: string;
-    onChange: (value: string) => void;
+  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>
-    )
+  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

@@ -1,13 +1,8 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { FilterIcon } from "lucide-react";
-import {
-  difficultyTranslation,
-  solvedStatusTranslation,
-  type Difficulty,
-  type SolvedStatus,
-} from "../model";
 import { QuestionDifficulty } from "@/gql/graphql";
+import { FilterIcon } from "lucide-react";
+import { type Difficulty, difficultyTranslation, type SolvedStatus, solvedStatusTranslation } from "../model";
 
 export interface TagState {
   solvedStatus: SolvedStatus[];
@@ -60,7 +55,7 @@ export default function TagFilterSection({
         標籤
       </label>
 
-      <div className="space-y-2 text-sm text-muted-foreground mb-4">
+      <div className="mb-4 space-y-2 text-sm text-muted-foreground">
         解題狀態
         <div className="mt-2 space-y-2">
           <TagCheckbox

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { useSuspenseQuery } from "@apollo/client/react";
 import { GridProgress } from "@/components/ui/grid-progress";
 import { graphql } from "@/gql";
+import { useSuspenseQuery } from "@apollo/client/react";
 
 const CHALLENGE_STATISTICS_QUERY = graphql(`
   query ChallengeStatisticsQuery {
@@ -21,8 +21,7 @@ export default function Header() {
 
   const totalQuestions = data.me.submissionStatistics.totalQuestions;
   const totalSolvedQuestions = data.me.submissionStatistics.solvedQuestions;
-  const totalAttemptedQuestions =
-    data.me.submissionStatistics.attemptedQuestions;
+  const totalAttemptedQuestions = data.me.submissionStatistics.attemptedQuestions;
 
   return (
     <header className="flex items-center justify-between pb-6">
@@ -41,7 +40,12 @@ export default function Header() {
         </p>
       </div>
 
-      <div className="hidden md:block">
+      <div
+        className={`
+          hidden
+          md:block
+        `}
+      >
         <GridProgress
           variant="primary"
           cols={10}
@@ -87,16 +91,13 @@ export function HeaderDescription({
   if (totalSolvedQuestions > 0) {
     return (
       <>
-        你目前已經嘗試作答了 {totalAttemptedQuestions} 題，其中攻克了{" "}
-        {totalSolvedQuestions} 題！
+        你目前已經嘗試作答了 {totalAttemptedQuestions} 題，其中攻克了 {totalSolvedQuestions} 題！
       </>
     );
   }
 
   if (totalAttemptedQuestions > 0) {
-    return (
-      <>你目前已經嘗試作答了 {totalAttemptedQuestions} 題，祝你成功攻克題目！</>
-    );
+    return <>你目前已經嘗試作答了 {totalAttemptedQuestions} 題，祝你成功攻克題目！</>;
   }
 
   return <>你尚未嘗試作答任何題目，快點試試看你有興趣的題目吧！</>;

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

@@ -7,8 +7,13 @@ export default function HeaderSkeleton() {
         <Skeleton className="h-8 w-64" />
         <Skeleton className="h-4 w-86" />
       </div>
-      
-      <Skeleton className="hidden md:block h-16 w-40" />
+
+      <Skeleton
+        className={`
+          hidden h-16 w-40
+          md:block
+        `}
+      />
     </div>
   );
 }

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

@@ -1,13 +1,9 @@
 import { Badge } from "@/components/ui/badge";
+import { type FragmentType, graphql, readFragment } from "@/gql";
 import { QuestionDifficulty } from "@/gql/graphql";
 import { SwordIcon } from "lucide-react";
 import Link from "next/link";
-import {
-  difficultyTranslation,
-  solvedStatusTranslation,
-  type SolvedStatus,
-} from "../model";
-import { graphql, readFragment, type FragmentType } from "@/gql";
+import { difficultyTranslation, type SolvedStatus, solvedStatusTranslation } from "../model";
 import { getQuestionSolvedStatus } from "./solved-status";
 
 const QUESTION_CARD_FRAGMENT = graphql(`
@@ -45,9 +41,9 @@ export default function QuestionCard({
   const solvedStatus = getQuestionSolvedStatus(question);
 
   return (
-    <div className="flex rounded overflow-hidden">
+    <div className="flex overflow-hidden rounded">
       {/* Question Body */}
-      <div className="space-y-3 bg-white p-4 flex-1">
+      <div className="flex-1 space-y-3 bg-white p-4">
         <div>
           <h2 className="font-bold tracking-wider">{question.title}</h2>
           <p className="tracking-wide">{descriptionFirstLine}</p>
@@ -73,7 +69,11 @@ function OperationButton({ href }: { href: string }) {
   return (
     <Link
       href={href}
-      className="bg-gray-100 hover:bg-primary hover:text-white transition-all duration-300 p-2 flex flex-col justify-center items-center gap-2.5"
+      className={`
+        flex flex-col items-center justify-center gap-2.5 bg-gray-100 p-2
+        transition-all duration-300
+        hover:bg-primary hover:text-white
+      `}
     >
       <SwordIcon className="size-4" />
       練習

app/(app)/challenges/_question/solved-status.ts

@@ -1,4 +1,4 @@
-import { graphql, readFragment, type FragmentType } from "@/gql";
+import { type FragmentType, graphql, readFragment } from "@/gql";
 import type { SolvedStatus } from "../model";
 
 export const QUESTION_SOLVED_STATUS_FRAGMENT = graphql(`
@@ -9,17 +9,17 @@ export const QUESTION_SOLVED_STATUS_FRAGMENT = graphql(`
 `);
 
 export function getQuestionSolvedStatus(
-    fragment: FragmentType<typeof QUESTION_SOLVED_STATUS_FRAGMENT>
+  fragment: FragmentType<typeof QUESTION_SOLVED_STATUS_FRAGMENT>,
 ): SolvedStatus {
-    const question = readFragment(QUESTION_SOLVED_STATUS_FRAGMENT, fragment);
+  const question = readFragment(QUESTION_SOLVED_STATUS_FRAGMENT, fragment);
 
-    if (question.solved) {
-        return "solved";
-    }
+  if (question.solved) {
+    return "solved";
+  }
 
-    if (question.attempted && !question.solved) {
-        return "unsolved";
-    }
+  if (question.attempted && !question.solved) {
+    return "unsolved";
+  }
 
-    return "not-tried";
+  return "not-tried";
 }

app/(app)/challenges/content.tsx

@@ -1,17 +1,17 @@
 "use client";
 
+import { useDebouncedValue } from "foxact/use-debounced-value";
 import { useState } from "react";
 import type { TagState } from "./_filter/tag";
-import { useDebouncedValue } from 'foxact/use-debounced-value';
 
+import { Button } from "@/components/ui/button";
+import { graphql } from "@/gql";
 import { QuestionDifficulty, type QuestionWhereInput } from "@/gql/graphql";
+import { useSuspenseQuery } from "@apollo/client/react";
 import FilterSection from "./_filter";
 import QuestionCard from "./_question";
-import { useSuspenseQuery } from "@apollo/client/react";
-import type { SolvedStatus } from "./model";
-import { Button } from "@/components/ui/button";
-import { graphql } from "@/gql";
 import { getQuestionSolvedStatus } from "./_question/solved-status";
+import type { SolvedStatus } from "./model";
 
 export const LIST_QUESTIONS = graphql(`
   query ListQuestions($where: QuestionWhereInput, $after: Cursor) {
@@ -61,7 +61,7 @@ export default function ChallengePageContent() {
   };
 
   return (
-    <div className="flex gap-4 w-full">
+    <div className="flex w-full gap-4">
       <FilterSection
         search={search}
         setSearch={setSearch}
@@ -94,17 +94,15 @@ export function ChallengeQuestionsList({
       {data?.questions.edges
         ?.filter(
           (question) =>
-            question &&
-            question.node &&
-            solvedStatusContains.includes(
-              getQuestionSolvedStatus(question.node)
-            )
+            question
+            && question.node
+            && solvedStatusContains.includes(
+              getQuestionSolvedStatus(question.node),
+            ),
         )
         .map((question) => {
           if (!question || !question.node) return null;
-          return (
-            <QuestionCard key={question.node.id} fragment={question.node} />
-          );
+          return <QuestionCard key={question.node.id} fragment={question.node} />;
         })}
 
       {data?.questions.pageInfo.hasNextPage && (
@@ -125,8 +123,7 @@ export function ChallengeQuestionsList({
                   },
                 };
               },
-            })
-          }
+            })}
         >
           載入更多
         </Button>

app/(app)/challenges/model.ts

@@ -11,14 +11,14 @@ export type SolvedStatus = "solved" | "unsolved" | "not-tried";
 export type Difficulty = QuestionDifficulty;
 
 export const solvedStatusTranslation: Record<SolvedStatus, string> = {
-    solved: "✅ 已經解決",
-    unsolved: "尚未解決",
-    "not-tried": "還沒嘗試",
+  solved: "✅ 已經解決",
+  unsolved: "尚未解決",
+  "not-tried": "還沒嘗試",
 };
 
 export const difficultyTranslation: Record<Difficulty, string> = {
-    [QuestionDifficulty.Easy]: "簡單",
-    [QuestionDifficulty.Medium]: "中等",
-    [QuestionDifficulty.Hard]: "困難",
-    [QuestionDifficulty.Unspecified]: "未指定",
+  [QuestionDifficulty.Easy]: "簡單",
+  [QuestionDifficulty.Medium]: "中等",
+  [QuestionDifficulty.Hard]: "困難",
+  [QuestionDifficulty.Unspecified]: "未指定",
 };