From a68951f1d3c5c60a4d442dd3d9c03e3e3f2c683d Mon Sep 17 00:00:00 2001
From: goddonebianu <goddonebianu@outlook.com>
Date: Mon, 16 Mar 2026 07:58:43 +0800
Subject: [PATCH] refactor(ui): use design-system components across pages

- Replace custom spinners with Skeleton
- Replace native inputs/select with design-system components
- Simplify dictation mode (user self-judges instead of input)
- Set body background to primary-50
- Clean up answer button shortcuts
---
 .../dictionary/DictionaryClient.tsx           |  20 +-
 src/app/(features)/explore/ExploreClient.tsx  |  29 +--
 src/app/decks/DecksClient.tsx                 |   8 +-
 src/app/decks/[deck_id]/learn/Memorize.tsx    | 223 +++++++-----------
 src/app/globals.css                           |   2 +-
 5 files changed, 115 insertions(+), 167 deletions(-)

diff --git a/src/app/(features)/dictionary/DictionaryClient.tsx b/src/app/(features)/dictionary/DictionaryClient.tsx
index dd33364..f8ad026 100644
--- a/src/app/(features)/dictionary/DictionaryClient.tsx
+++ b/src/app/(features)/dictionary/DictionaryClient.tsx
@@ -7,6 +7,9 @@ import { useDictionaryStore } from "./stores/dictionaryStore";
 import { PageLayout } from "@/components/ui/PageLayout";
 import { LightButton } from "@/design-system/base/button";
 import { Input } from "@/design-system/base/input";
+import { Select } from "@/design-system/base/select";
+import { Skeleton } from "@/design-system/feedback/skeleton";
+import { HStack, VStack } from "@/design-system/layout/stack";
 import { Plus, RefreshCw } from "lucide-react";
 import { DictionaryEntry } from "./DictionaryEntry";
 import { LanguageSelector } from "./LanguageSelector";
@@ -231,10 +234,10 @@ export function DictionaryClient({ initialDecks }: DictionaryClientProps) {
 
       <div className="mt-8">
         {isSearching ? (
-          <div className="text-center py-12">
-            <div className="w-8 h-8 border-2 border-gray-200 border-t-primary-500 rounded-full animate-spin mx-auto mb-3"></div>
+          <VStack align="center" className="py-12">
+            <Skeleton variant="circular" className="w-8 h-8 mb-3" />
             <p className="text-gray-600">{t("searching")}</p>
-          </div>
+          </VStack>
         ) : query && !searchResult ? (
           <div className="text-center py-12 bg-white/20 rounded-lg">
             <p className="text-gray-800 text-xl">{t("noResults")}</p>
@@ -248,18 +251,19 @@ export function DictionaryClient({ initialDecks }: DictionaryClientProps) {
                   {searchResult.standardForm}
                 </h2>
               </div>
-              <div className="flex items-center gap-2 ml-4">
+              <HStack align="center" gap={2} className="ml-4">
                 {session && decks.length > 0 && (
-                  <select
+                  <Select
                     id="deck-select"
-                    className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[#35786f]"
+                    variant="bordered"
+                    size="sm"
                   >
                     {decks.map((deck) => (
                       <option key={deck.id} value={deck.id}>
                         {deck.name}
                       </option>
                     ))}
-                  </select>
+                  </Select>
                 )}
                 <LightButton
                   onClick={handleSave}
@@ -270,7 +274,7 @@ export function DictionaryClient({ initialDecks }: DictionaryClientProps) {
                 >
                   <Plus />
                 </LightButton>
-              </div>
+              </HStack>
             </div>
 
             <div className="space-y-6">
diff --git a/src/app/(features)/explore/ExploreClient.tsx b/src/app/(features)/explore/ExploreClient.tsx
index 63734e5..94181f2 100644
--- a/src/app/(features)/explore/ExploreClient.tsx
+++ b/src/app/(features)/explore/ExploreClient.tsx
@@ -7,6 +7,9 @@ import {
   ArrowUpDown,
 } from "lucide-react";
 import { CircleButton } from "@/design-system/base/button";
+import { Input } from "@/design-system/base/input";
+import { Skeleton } from "@/design-system/feedback/skeleton";
+import { HStack } from "@/design-system/layout/stack";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
@@ -148,18 +151,16 @@ export function ExploreClient({ initialPublicDecks }: ExploreClientProps) {
     <PageLayout>
       <PageHeader title={t("title")} subtitle={t("subtitle")} />
 
-      <div className="flex items-center gap-2 mb-6">
-        <div className="relative flex-1">
-          <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            placeholder={t("searchPlaceholder")}
-            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
-          />
-        </div>
+      <HStack align="center" gap={2} className="mb-6">
+        <Input
+          variant="bordered"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+          placeholder={t("searchPlaceholder")}
+          leftIcon={<Search size={18} />}
+          containerClassName="flex-1"
+        />
         <CircleButton
           onClick={handleToggleSort}
           title={sortByFavorites ? t("sortByFavoritesActive") : t("sortByFavorites")}
@@ -170,11 +171,11 @@ export function ExploreClient({ initialPublicDecks }: ExploreClientProps) {
         <CircleButton onClick={handleSearch}>
           <Search size={18} />
         </CircleButton>
-      </div>
+      </HStack>
 
       {loading ? (
         <div className="p-8 text-center">
-          <div className="w-8 h-8 border-2 border-gray-200 border-t-gray-400 rounded-full animate-spin mx-auto mb-3"></div>
+          <Skeleton variant="circular" className="w-8 h-8 mx-auto mb-3" />
           <p className="text-sm text-gray-500">{t("loading")}</p>
         </div>
       ) : sortedDecks.length === 0 ? (
diff --git a/src/app/decks/DecksClient.tsx b/src/app/decks/DecksClient.tsx
index 5d2d4a6..d32d055 100644
--- a/src/app/decks/DecksClient.tsx
+++ b/src/app/decks/DecksClient.tsx
@@ -10,6 +10,8 @@ import {
   Trash2,
 } from "lucide-react";
 import { CircleButton, LightButton } from "@/design-system/base/button";
+import { Skeleton } from "@/design-system/feedback/skeleton";
+import { VStack } from "@/design-system/layout/stack";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
@@ -202,10 +204,10 @@ export function DecksClient({ userId }: DecksClientProps) {
 
       <CardList>
         {loading ? (
-          <div className="p-8 text-center">
-            <div className="w-8 h-8 border-2 border-gray-200 border-t-gray-400 rounded-full animate-spin mx-auto mb-3"></div>
+          <VStack align="center" className="p-8">
+            <Skeleton variant="circular" className="w-8 h-8 mb-3" />
             <p className="text-sm text-gray-500">{t("loading")}</p>
-          </div>
+          </VStack>
         ) : decks.length === 0 ? (
           <div className="text-center py-12 text-gray-400">
             <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-gray-100 flex items-center justify-center">
diff --git a/src/app/decks/[deck_id]/learn/Memorize.tsx b/src/app/decks/[deck_id]/learn/Memorize.tsx
index 9f5f65f..bca966b 100644
--- a/src/app/decks/[deck_id]/learn/Memorize.tsx
+++ b/src/app/decks/[deck_id]/learn/Memorize.tsx
@@ -8,7 +8,11 @@ import { Layers, Check, Clock, Sparkles, RotateCcw, Volume2, Headphones } from "
 import type { ActionOutputCardWithNote, ActionOutputScheduledCard } from "@/modules/card/card-action-dto";
 import { actionGetCardsForReview, actionAnswerCard } from "@/modules/card/card-action";
 import { PageLayout } from "@/components/ui/PageLayout";
-import { LightButton } from "@/design-system/base/button";
+import { LightButton, CircleButton } from "@/design-system/base/button";
+import { Badge } from "@/design-system/data-display/badge";
+import { Progress } from "@/design-system/feedback/progress";
+import { Skeleton } from "@/design-system/feedback/skeleton";
+import { HStack, VStack } from "@/design-system/layout/stack";
 import { CardType } from "../../../../../generated/prisma/enums";
 import { calculatePreviewIntervals, formatPreviewInterval, type CardPreview } from "./interval-preview";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
@@ -38,8 +42,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
   const [error, setError] = useState<string | null>(null);
   const [isReversed, setIsReversed] = useState(false);
   const [isDictation, setIsDictation] = useState(false);
-  const [dictationInput, setDictationInput] = useState("");
-  const [dictationResult, setDictationResult] = useState<"correct" | "incorrect" | null>(null);
   const { play, stop, load } = useAudioPlayer();
   const audioUrlRef = useRef<string | null>(null);
   const [isAudioLoading, setIsAudioLoading] = useState(false);
@@ -60,8 +62,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             setLastScheduled(null);
             setIsReversed(false);
             setIsDictation(false);
-            setDictationInput("");
-            setDictationResult(null);
           } else {
             setError(result.message);
           }
@@ -87,18 +87,7 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
 
   const handleShowAnswer = useCallback(() => {
     setShowAnswer(true);
-    
-    if (isDictation) {
-      const currentCard = getCurrentCard();
-      if (currentCard) {
-        const fields = getNoteFields(currentCard);
-        const answer = isReversed ? (fields[0] ?? "") : (fields[1] ?? "");
-        const normalizedInput = dictationInput.trim().toLowerCase();
-        const normalizedAnswer = answer.trim().toLowerCase();
-        setDictationResult(normalizedInput === normalizedAnswer ? "correct" : "incorrect");
-      }
-    }
-  }, [isDictation, dictationInput, isReversed]);
+  }, []);
 
   const handleAnswer = useCallback((ease: ReviewEase) => {
     const card = getCurrentCard();
@@ -125,8 +114,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
         setShowAnswer(false);
         setIsReversed(false);
         setIsDictation(false);
-        setDictationInput("");
-        setDictationResult(null);
         
         if (audioUrlRef.current) {
           URL.revokeObjectURL(audioUrlRef.current);
@@ -251,28 +238,28 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
     }
   };
 
-  const getCardTypeColor = (type: CardType): string => {
+  const getCardTypeVariant = (type: CardType): "info" | "warning" | "success" | "primary" => {
     switch (type) {
       case CardType.NEW:
-        return "bg-blue-100 text-blue-700";
+        return "info";
       case CardType.LEARNING:
-        return "bg-yellow-100 text-yellow-700";
+        return "warning";
       case CardType.REVIEW:
-        return "bg-green-100 text-green-700";
+        return "success";
       case CardType.RELEARNING:
-        return "bg-purple-100 text-purple-700";
+        return "primary";
       default:
-        return "bg-gray-100 text-gray-700";
+        return "info";
     }
   };
 
   if (isLoading) {
     return (
       <PageLayout>
-        <div className="text-center py-12">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4"></div>
+        <VStack align="center" className="py-12">
+          <Skeleton variant="circular" className="h-12 w-12 mb-4" />
           <p className="text-gray-600">{t("loading")}</p>
-        </div>
+        </VStack>
       </PageLayout>
     );
   }
@@ -280,12 +267,14 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
   if (error) {
     return (
       <PageLayout>
-        <div className="text-center py-12">
-          <p className="text-red-600 mb-4">{error}</p>
+        <VStack align="center" className="py-12">
+          <div className="text-red-600 mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-lg max-w-md">
+            {error}
+          </div>
           <LightButton onClick={() => router.push("/decks")} className="px-4 py-2">
             {t("backToDecks")}
           </LightButton>
-        </div>
+        </VStack>
       </PageLayout>
     );
   }
@@ -293,7 +282,7 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
   if (cards.length === 0) {
     return (
       <PageLayout>
-        <div className="text-center py-12">
+        <VStack align="center" className="py-12">
           <div className="text-green-500 mb-4">
             <Check className="w-16 h-16 mx-auto" />
           </div>
@@ -302,7 +291,7 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
           <LightButton onClick={() => router.push("/decks")} className="px-4 py-2">
             {t("backToDecks")}
           </LightButton>
-        </div>
+        </VStack>
       </PageLayout>
     );
   }
@@ -325,162 +314,118 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
 
   return (
     <PageLayout>
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2 text-gray-600">
+      <HStack justify="between" className="mb-4">
+        <HStack gap={2} className="text-gray-600">
           <Layers className="w-5 h-5" />
           <span className="font-medium">{deckName}</span>
-        </div>
-        <div className="flex items-center gap-3">
-          <span className={`text-xs px-2 py-0.5 rounded-full ${getCardTypeColor(currentCard.type)}`}>
+        </HStack>
+        <HStack gap={3}>
+          <Badge variant={getCardTypeVariant(currentCard.type)} size="sm">
             {getCardTypeLabel(currentCard.type)}
-          </span>
+          </Badge>
           <span className="text-sm text-gray-500">
             {t("progress", { current: currentIndex + 1, total: cards.length + currentIndex })}
           </span>
-        </div>
-      </div>
+        </HStack>
+      </HStack>
 
-      <div className="w-full bg-gray-200 rounded-full h-2 mb-6">
-        <div 
-          className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-          style={{ width: `${Math.max(0, ((currentIndex) / (cards.length + currentIndex)) * 100)}%` }}
-        />
-      </div>
+      <Progress 
+        value={Math.max(0, ((currentIndex) / (cards.length + currentIndex)) * 100)}
+        showLabel={false}
+        animated={false}
+        className="mb-6"
+      />
 
       {lastScheduled && (
         <div className="mb-4 p-3 bg-gray-50 rounded-lg text-sm text-gray-600">
-          <div className="flex items-center gap-2">
+          <HStack gap={2}>
             <Clock className="w-4 h-4" />
             <span>
               {t("nextReview")}: {formatNextReview(lastScheduled)}
             </span>
-          </div>
+          </HStack>
         </div>
       )}
 
-      <div className="flex justify-center gap-2 mb-4">
-        <button
+      <HStack justify="center" gap={2} className="mb-4">
+        <LightButton
           onClick={() => {
             setIsReversed(!isReversed);
-            setDictationInput("");
-            setDictationResult(null);
           }}
-          className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm transition-colors ${
-            isReversed 
-              ? "bg-indigo-100 text-indigo-700" 
-              : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-          }`}
+          selected={isReversed}
+          leftIcon={<RotateCcw className="w-4 h-4" />}
+          size="sm"
         >
-          <RotateCcw className="w-4 h-4" />
           {t("reverse")}
-        </button>
-        <button
+        </LightButton>
+        <LightButton
           onClick={() => {
             setIsDictation(!isDictation);
-            setDictationInput("");
-            setDictationResult(null);
           }}
-          className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm transition-colors ${
-            isDictation 
-              ? "bg-purple-100 text-purple-700" 
-              : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-          }`}
+          selected={isDictation}
+          leftIcon={<Headphones className="w-4 h-4" />}
+          size="sm"
         >
-          <Headphones className="w-4 h-4" />
           {t("dictation")}
-        </button>
-      </div>
+        </LightButton>
+      </HStack>
 
       <div className={`bg-white border border-gray-200 rounded-xl shadow-sm mb-6 ${myFont.className}`}>
         {isDictation ? (
           <>
-            <div className="p-8 min-h-[20dvh] flex flex-col items-center justify-center gap-4">
-              <button
+            <VStack align="center" justify="center" gap={4} className="p-8 min-h-[20dvh]">
+              <CircleButton
                 onClick={playCurrentCard}
                 disabled={isAudioLoading}
-                className="p-4 rounded-full bg-blue-100 hover:bg-blue-200 text-blue-700 transition-colors disabled:opacity-50"
+                className="p-4 bg-blue-100 hover:bg-blue-200 text-blue-700 transition-colors disabled:opacity-50"
               >
                 <Volume2 className="w-8 h-8" />
-              </button>
+              </CircleButton>
               <p className="text-gray-500 text-sm">{t("clickToPlay")}</p>
-            </div>
-            
-            {showAnswer ? (
-              <>
-                <div className="border-t border-gray-200" />
-                <div className="p-8 min-h-[20dvh] flex flex-col items-center justify-center bg-gray-50 rounded-b-xl gap-4">
-                  <div className="w-full max-w-md">
-                    <label className="block text-sm text-gray-600 mb-2">{t("yourAnswer")}</label>
-                    <input
-                      type="text"
-                      value={dictationInput}
-                      onChange={(e) => setDictationInput(e.target.value)}
-                      className={`w-full p-3 border rounded-lg text-lg ${
-                        dictationResult === "correct" 
-                          ? "border-green-500 bg-green-50" 
-                          : dictationResult === "incorrect"
-                          ? "border-red-500 bg-red-50"
-                          : "border-gray-300"
-                      }`}
-                      readOnly
-                    />
-                  </div>
-                  <div className="text-center">
-                    <p className={`text-lg font-medium ${
-                      dictationResult === "correct" ? "text-green-600" : "text-red-600"
-                    }`}>
-                      {dictationResult === "correct" ? "✓ " + t("correct") : "✗ " + t("incorrect")}
-                    </p>
-                    {dictationResult === "incorrect" && (
-                      <p className="text-gray-900 text-xl mt-2">{displayBack}</p>
-                    )}
-                  </div>
-                </div>
-              </>
-            ) : (
-              <div className="border-t border-gray-200 p-6 bg-gray-50 rounded-b-xl">
-                <input
-                  type="text"
-                  value={dictationInput}
-                  onChange={(e) => setDictationInput(e.target.value)}
-                  placeholder={t("typeWhatYouHear")}
-                  className="w-full p-3 border border-gray-300 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  autoFocus
-                />
-              </div>
-            )}
-          </>
-        ) : (
-          <>
-            <div className="p-8 min-h-[20dvh] flex items-center justify-center">
-              <div className="text-gray-900 text-xl md:text-2xl text-center">
-                {displayFront}
-              </div>
-            </div>
+            </VStack>
             
             {showAnswer && (
               <>
                 <div className="border-t border-gray-200" />
-                <div className="p-8 min-h-[20dvh] flex items-center justify-center bg-gray-50 rounded-b-xl">
+                <VStack align="center" justify="center" className="p-8 min-h-[20dvh] bg-gray-50 rounded-b-xl">
                   <div className="text-gray-900 text-xl md:text-2xl text-center">
                     {displayBack}
                   </div>
-                </div>
+                </VStack>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <HStack align="center" justify="center" className="p-8 min-h-[20dvh]">
+              <div className="text-gray-900 text-xl md:text-2xl text-center">
+                {displayFront}
+              </div>
+            </HStack>
+            
+            {showAnswer && (
+              <>
+                <div className="border-t border-gray-200" />
+                <HStack align="center" justify="center" className="p-8 min-h-[20dvh] bg-gray-50 rounded-b-xl">
+                  <div className="text-gray-900 text-xl md:text-2xl text-center">
+                    {displayBack}
+                  </div>
+                </HStack>
               </>
             )}
           </>
         )}
       </div>
 
-      <div className="flex justify-center gap-4 mb-6 text-sm text-gray-500">
+      <HStack justify="center" gap={4} className="mb-6 text-sm text-gray-500">
         <span>{t("interval")}: {formatInterval(currentCard.ivl)}</span>
         <span>•</span>
         <span>{t("ease")}: {currentCard.factor / 10}%</span>
         <span>•</span>
         <span>{t("lapses")}: {currentCard.lapses}</span>
-      </div>
+      </HStack>
 
-      <div className="flex justify-center">
+      <HStack justify="center">
         {!showAnswer ? (
           <LightButton
             onClick={handleShowAnswer}
@@ -491,7 +436,7 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             <span className="ml-2 text-xs opacity-60">Space</span>
           </LightButton>
         ) : (
-          <div className="flex flex-wrap justify-center gap-3">
+          <HStack wrap justify="center" gap={3}>
             <button
               onClick={() => handleAnswer(1)}
               disabled={isPending}
@@ -499,7 +444,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             >
               <span className="font-medium">{t("again")}</span>
               <span className="text-xs opacity-75">{formatPreviewInterval(previewIntervals.again)}</span>
-              <span className="text-xs opacity-50 mt-1">1</span>
             </button>
             
             <button
@@ -509,7 +453,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             >
               <span className="font-medium">{t("hard")}</span>
               <span className="text-xs opacity-75">{formatPreviewInterval(previewIntervals.hard)}</span>
-              <span className="text-xs opacity-50 mt-1">2</span>
             </button>
             
             <button
@@ -522,7 +465,6 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
                 <Sparkles className="w-3 h-3 opacity-60" />
               </div>
               <span className="text-xs opacity-75">{formatPreviewInterval(previewIntervals.good)}</span>
-              <span className="text-xs opacity-50 mt-1">3/Space</span>
             </button>
             
             <button
@@ -532,11 +474,10 @@ const Memorize: React.FC<MemorizeProps> = ({ deckId, deckName }) => {
             >
               <span className="font-medium">{t("easy")}</span>
               <span className="text-xs opacity-75">{formatPreviewInterval(previewIntervals.easy)}</span>
-              <span className="text-xs opacity-50 mt-1">4</span>
             </button>
-          </div>
+          </HStack>
         )}
-      </div>
+      </HStack>
     </PageLayout>
   );
 };
diff --git a/src/app/globals.css b/src/app/globals.css
index e60a85e..c5c009a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -177,7 +177,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background: var(--background);
+  background: var(--primary-50);
   color: var(--foreground);
   font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   font-size: 1rem;