integrate npm run build in CI workflows

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI Enhancement
+
+on:
+  pull_request:
+    branches: [ main, develop ]
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' # Use the project's current version
+          cache: 'npm'       # Technical Note: Configure caching for speed
+
+      - name: Install Dependencies
+        run: npm ci          # Technical Note: Cleaner/faster than 'npm install'
+
+      - name: Run Lint
+        run: npm run lint
+
+      - name: Build Project
+        run: npm run build   # The core requirement of this feature

components/ui/ThemeToggle.tsx

@@ -4,25 +4,29 @@ import { useEffect, useState } from "react";
 import { Sun, Moon } from "lucide-react";
 
 export function ThemeToggle() {
-  const [dark, setDark] = useState(false);
+  // 1. Initialize state properly to avoid cascading renders
+  const [dark, setDark] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("theme") === "dark";
+    }
+    return false;
+  });
 
+  // 2. Synchronize the HTML class with the state
   useEffect(() => {
-    const saved = localStorage.getItem("theme");
-    if (saved === "dark") {
+    if (dark) {
       document.documentElement.classList.add("dark");
-      setDark(true);
+    } else {
+      document.documentElement.classList.remove("dark");
     }
-  }, []);
+  }, [dark]);
 
   const toggleTheme = () => {
-    if (dark) {
-      document.documentElement.classList.remove("dark");
-      localStorage.setItem("theme", "light");
-    } else {
-      document.documentElement.classList.add("dark");
-      localStorage.setItem("theme", "dark");
-    }
-    setDark(!dark);
+    setDark((prev) => {
+      const newDark = !prev;
+      localStorage.setItem("theme", newDark ? "dark" : "light");
+      return newDark;
+    });
   };
 
   return (