fix: 一些样式错误

Author: longsizhuo

app/components/GiscusComments.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import Giscus from "@giscus/react";
 import { useTheme } from "./ThemeProvider";
 
@@ -9,6 +9,10 @@ interface GiscusCommentsProps {
   docId?: string | null;
 }
 
+// 用 useSyncExternalStore 代替 useEffect+setState(true) 的 mounted 哨兵，
+// SSR 快照固定返回 false，客户端返回 true，避免 react-hooks/set-state-in-effect
+const emptySubscribe = () => () => {};
+
 export function GiscusComments({ className, docId }: GiscusCommentsProps) {
   const { theme } = useTheme();
   const normalizedDocId = typeof docId === "string" ? docId.trim() : "";
@@ -18,16 +22,16 @@ export function GiscusComments({ className, docId }: GiscusCommentsProps) {
   // 如果这里直接渲染 Giscus，iframe 会以 SSR 的错主题加载；之后即使 key 变化触发
   // remount，@giscus/react 的 iframe 也可能残留旧 theme。延迟到 mount 后再渲染，
   // 用的就是客户端已经对齐过 localStorage 的主题。
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
   const [isSystemDark, setIsSystemDark] = useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   });
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   useEffect(() => {
     if (theme !== "system" || typeof window === "undefined") return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");

app/components/LocaleToggle.tsx

@@ -15,12 +15,15 @@
  *   - 简单的 ZH / EN 双字母展示，当前语言高亮；button 尺寸与 ThemeToggle 对齐
  */
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 
 type Locale = "zh" | "en";
 
+// 自定义事件名：toggle 点击后 dispatch，通知 useSyncExternalStore 重新读取 cookie
+const LOCALE_EVENT = "locale-toggle-change";
+
 function readLocaleCookie(): Locale {
   if (typeof document === "undefined") return "zh";
   const m = document.cookie.match(/(?:^|;\s*)locale=([^;]+)/);
@@ -33,21 +36,35 @@ function writeLocaleCookie(next: Locale) {
   document.cookie = `locale=${next};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax`;
 }
 
+// 订阅 LOCALE_EVENT，toggle 时主动 dispatch 让 useSyncExternalStore 重新读 cookie
+function subscribeLocale(callback: () => void) {
+  if (typeof window === "undefined") return () => {};
+  window.addEventListener(LOCALE_EVENT, callback);
+  return () => window.removeEventListener(LOCALE_EVENT, callback);
+}
+
+const emptySubscribe = () => () => {};
+
 export function LocaleToggle() {
   const router = useRouter();
-  // 初始 render 先给默认值避免 hydration 不一致，真实值由 useEffect 读 cookie 后覆盖
-  const [locale, setLocale] = useState<Locale>("zh");
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    setLocale(readLocaleCookie());
-    setReady(true);
-  }, []);
+  // 用 useSyncExternalStore 替代 useEffect+setState：SSR 返回 "zh"，客户端读 cookie
+  const locale = useSyncExternalStore<Locale>(
+    subscribeLocale,
+    () => readLocaleCookie(),
+    () => "zh",
+  );
+  // ready 表示已 hydrate 到客户端，可以按真实 locale 高亮
+  const ready = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
 
   const toggle = () => {
     const next: Locale = locale === "zh" ? "en" : "zh";
     writeLocaleCookie(next);
-    setLocale(next);
+    // 通知所有订阅者（当前组件）重新从 cookie 读取
+    window.dispatchEvent(new Event(LOCALE_EVENT));
     // 刷新 server component 树，重新按 cookie 渲染各页面
     router.refresh();
   };

app/components/SidebarThemeToggle.tsx

@@ -8,18 +8,21 @@
  * 内置按钮点击无效；这里直接 setTheme 到自建 ThemeProvider 即可）。
  */
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "./ThemeProvider";
 import { cn } from "@/lib/utils";
 
+// 用 useSyncExternalStore 处理 SSR/CSR mounted 差异，避免 effect 内 setState
+const emptySubscribe = () => () => {};
+
 export function SidebarThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
 
   // 把 "system" 折算成实际显示主题，决定哪个 icon 高亮
   const resolved = (() => {