chore: minor changes

src/app.tsx

@@ -1,7 +1,18 @@
 import ReactDOM from "react-dom/client"
-import { RouterProvider } from "@tanstack/react-router"
+import { RouterProvider, createRouter } from "@tanstack/react-router"
-import { QueryClientProvider } from "@tanstack/react-query"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { queryClient, router } from "./main"
+import { routeTree } from "./routeTree.gen"
+
+const queryClient = new QueryClient()
+
+const router = createRouter({
+  routeTree,
+  context: {
+    queryClient,
+  },
+  defaultPreload: "intent",
+  defaultPreloadStaleTime: 0,
+})
 
 const rootElement = document.getElementById("app")!
 
@@ -13,3 +24,9 @@ if (!rootElement.innerHTML) {
     </QueryClientProvider>,
   )
 }
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router
+  }
+}

src/components/column/card.tsx

@@ -138,7 +138,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
 
       <OverlayScrollbar
         className={clsx([
-          "h-full p-2 overflow-x-auto rounded-2xl bg-base bg-op-70!",
+          "h-full p-2 overflow-y-auto rounded-2xl bg-base bg-op-70!",
           isFreshFetching && `animate-pulse`,
           `sprinkle-${sources[id].color}`,
         ])}

src/components/common/overlay-scrollbar.tsx

@@ -1,9 +1,10 @@
 import type { UseOverlayScrollbarsParams } from "overlayscrollbars-react"
 import { useOverlayScrollbars } from "overlayscrollbars-react"
 import type { HTMLProps, PropsWithChildren } from "react"
-import { useCallback, useEffect, useMemo, useRef } from "react"
+import { useCallback, useMemo, useRef } from "react"
 import { defu } from "defu"
 import { useSetAtom } from "jotai"
+import { useMount } from "react-use"
 import { goToTopAtom } from "~/atoms"
 
 type Props = HTMLProps<HTMLDivElement> & UseOverlayScrollbarsParams
@@ -26,17 +27,17 @@ export function OverlayScrollbar({ disabled, children, options, events, defer, .
 
   const [initialize] = useOverlayScrollbars(scrollbarParams)
 
-  useEffect(() => {
+  useMount(() => {
     if (!disabled) {
       initialize({
         target: ref.current!,
         cancel: {
-        // 如果浏览器原生滚动条是覆盖在元素上的，则取消初始化
+          // 如果浏览器原生滚动条是覆盖在元素上的，则取消初始化
           nativeScrollbarsOverlaid: true,
         },
       })
     }
-  }, [initialize, disabled])
+  })
 
   return (
     <div ref={ref} {...props}>
@@ -80,16 +81,13 @@ export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren
     defer: false,
   })
 
-  useEffect(() => {
+  useMount(() => {
     initialize({
       target: ref.current!,
       cancel: {
         nativeScrollbarsOverlaid: true,
       },
     })
-  }, [initialize])
-
-  useEffect(() => {
     const el = ref.current
     if (el) {
       ref.current?.addEventListener("scroll", onScroll)
@@ -97,7 +95,7 @@ export function GlobalOverlayScrollbar({ children, ...props }: PropsWithChildren
         el?.removeEventListener("scroll", onScroll)
       }
     }
-  }, [onScroll])
+  })
 
   return (
     <div ref={ref} {...props}>

src/hooks/useDark.ts

@@ -1,14 +1,17 @@
-import { useEffect, useMemo } from "react"
+import { useMemo } from "react"
-import { useLocalStorage, useMedia } from "react-use"
+import { useMedia, useUpdateEffect } from "react-use"
+import { atomWithStorage } from "jotai/utils"
+import { useAtom } from "jotai"
 
 export declare type ColorScheme = "dark" | "light" | "auto"
 
-export function useDark(key = "color-scheme", defaultColorScheme: ColorScheme = "auto") {
+const colorSchemeAtom = atomWithStorage("color-scheme", "auto")
-  const [colorScheme, setColorScheme] = useLocalStorage(key, defaultColorScheme)
+export function useDark() {
+  const [colorScheme, setColorScheme] = useAtom(colorSchemeAtom)
   const prefersDarkMode = useMedia("(prefers-color-scheme: dark)")
   const isDark = useMemo(() => colorScheme === "auto" ? prefersDarkMode : colorScheme === "dark", [colorScheme, prefersDarkMode])
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     document.documentElement.classList.toggle("dark", isDark)
   }, [isDark])
 

src/main.ts

@@ -1,20 +0,0 @@
-import { QueryClient } from "@tanstack/react-query"
-import { createRouter } from "@tanstack/react-router"
-import { routeTree } from "./routeTree.gen"
-
-export const queryClient = new QueryClient()
-
-export const router = createRouter({
-  routeTree,
-  context: {
-    queryClient,
-  },
-  defaultPreload: "intent",
-  defaultPreloadStaleTime: 0,
-})
-
-declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router
-  }
-}