Refactor code structure for improved readability and maintainability

components/reading-settings.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Minus, Plus, ALargeSmall, RotateCcw } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
@@ -11,12 +11,15 @@ interface ReadingSettingsProps {
   setLineHeight: (v: number) => void
   letterSpacing: number
   setLetterSpacing: (v: number) => void
+  fontFamily: string
+  setFontFamily: (v: string) => void
 }
 
 export function ReadingSettingsContent({
   fontSize, setFontSize,
   lineHeight, setLineHeight,
-  letterSpacing, setLetterSpacing
+  letterSpacing, setLetterSpacing,
+  fontFamily, setFontFamily
 }: ReadingSettingsProps) {
   return (
     <>
@@ -109,6 +112,36 @@ export function ReadingSettingsContent({
               </div>
             </div>
             
+            <div>
+              <label className="mb-2 block text-xs font-medium text-muted-foreground">Phông chữ</label>
+              <div className="grid grid-cols-3 gap-2">
+                <Button
+                  variant={fontFamily === "font-serif" ? "default" : "outline"}
+                  size="sm"
+                  className="font-serif text-xs"
+                  onClick={() => setFontFamily("font-serif")}
+                >
+                  Serif
+                </Button>
+                <Button
+                  variant={fontFamily === "font-sans" ? "default" : "outline"}
+                  size="sm"
+                  className="font-sans text-xs"
+                  onClick={() => setFontFamily("font-sans")}
+                >
+                  Sans
+                </Button>
+                <Button
+                  variant={fontFamily === "font-mono" ? "default" : "outline"}
+                  size="sm"
+                  className="font-mono text-xs"
+                  onClick={() => setFontFamily("font-mono")}
+                >
+                  Mono
+                </Button>
+              </div>
+            </div>
+
             <div className="pt-2">
               <Button 
                 variant="ghost" 
@@ -118,6 +151,7 @@ export function ReadingSettingsContent({
                   setFontSize(18)
                   setLineHeight(1.8)
                   setLetterSpacing(0)
+                  setFontFamily("font-serif")
                 }}
               >
                 <RotateCcw className="mr-2 h-3 w-3" />
@@ -133,6 +167,55 @@ export function ReadingSettings() {
   const [fontSize, setFontSize] = useState(18)
   const [lineHeight, setLineHeight] = useState(1.8)
   const [letterSpacing, setLetterSpacing] = useState(0)
+  const [fontFamily, setFontFamily] = useState("font-serif")
+
+  useEffect(() => {
+    // Dùng local storage chạy tạm thời gian đầu để khỏi giật màn hình
+    const savedFontSize = localStorage.getItem("reader_fontSize")
+    const savedLineHeight = localStorage.getItem("reader_lineHeight")
+    const savedLetterSpacing = localStorage.getItem("reader_letterSpacing")
+    const savedFontFamily = localStorage.getItem("reader_fontFamily")
+
+    if (savedFontSize) setFontSize(Number(savedFontSize))
+    if (savedLineHeight) setLineHeight(Number(savedLineHeight))
+    if (savedLetterSpacing) setLetterSpacing(Number(savedLetterSpacing))
+    if (savedFontFamily) setFontFamily(savedFontFamily)
+
+    // Đồng bộ Settings từ DB về (Ghi đè nếu có)
+    fetch("/api/user/settings")
+      .then(res => res.json())
+      .then(data => {
+        if (data && !data.error && data.fontSize) {
+          setFontSize(data.fontSize)
+          setLineHeight(data.lineHeight)
+          setLetterSpacing(data.letterSpacing)
+          setFontFamily(data.fontFamily)
+          
+          localStorage.setItem("reader_fontSize", data.fontSize.toString())
+          localStorage.setItem("reader_lineHeight", data.lineHeight.toString())
+          localStorage.setItem("reader_letterSpacing", data.letterSpacing.toString())
+          localStorage.setItem("reader_fontFamily", data.fontFamily)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem("reader_fontSize", fontSize.toString())
+    localStorage.setItem("reader_lineHeight", lineHeight.toString())
+    localStorage.setItem("reader_letterSpacing", letterSpacing.toString())
+    localStorage.setItem("reader_fontFamily", fontFamily)
+
+    const timer = setTimeout(() => {
+      fetch("/api/user/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ fontSize, lineHeight, letterSpacing, fontFamily })
+      }).catch(() => {})
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [fontSize, lineHeight, letterSpacing, fontFamily])
 
   return (
     <>
@@ -148,15 +231,19 @@ export function ReadingSettings() {
           fontSize={fontSize} setFontSize={setFontSize}
           lineHeight={lineHeight} setLineHeight={setLineHeight}
           letterSpacing={letterSpacing} setLetterSpacing={setLetterSpacing}
+          fontFamily={fontFamily} setFontFamily={setFontFamily}
         />
       </PopoverContent>
     </Popover>
     {/* Inject styles */}
     <style>{`
-      .chapter-content {
+      .chapter-content, .chapter-content p {
         font-size: ${fontSize}px !important;
         line-height: ${lineHeight} !important;
         letter-spacing: ${letterSpacing}px !important;
+        font-family: ${fontFamily === 'font-serif' ? 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif' : 
+                       fontFamily === 'font-sans' ? 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif' : 
+                       'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'} !important;
       }
     `}</style>
     </>