From 9859049a2294aec2b1481347a56335843a5db280 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Wed, 2 Oct 2024 11:01:02 +0800
Subject: [PATCH] feat: add overlay scrollbar

---
 package.json                    |  2 ++
 pnpm-lock.yaml                  | 22 ++++++++++++++++++++++
 src/components/section/Card.tsx | 23 ++++++++++++++++++-----
 src/hooks/useDark.ts            |  4 ++--
 src/routes/__root.tsx           | 21 +++++++++++----------
 src/styles/globals.css          | 14 ++++++++++++++
 6 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 98e2076..35928b8 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "h3": "^1.12.0",
     "jotai": "^2.10.0",
     "node-fetch": "^3.3.2",
+    "overlayscrollbars": "^2.10.0",
+    "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 19be070..a98f9b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,12 @@ importers:
       node-fetch:
         specifier: ^3.3.2
         version: 3.3.2
+      overlayscrollbars:
+        specifier: ^2.10.0
+        version: 2.10.0
+      overlayscrollbars-react:
+        specifier: ^0.5.6
+        version: 0.5.6(overlayscrollbars@2.10.0)(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -3291,6 +3297,15 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  overlayscrollbars-react@0.5.6:
+    resolution: {integrity: sha512-E5To04bL5brn9GVCZ36SnfGanxa2I2MDkWoa4Cjo5wol7l+diAgi4DBc983V7l2nOk/OLJ6Feg4kySspQEGDBw==}
+    peerDependencies:
+      overlayscrollbars: ^2.0.0
+      react: '>=16.8.0'
+
+  overlayscrollbars@2.10.0:
+    resolution: {integrity: sha512-diNMeEafWTE0A4GJfwRpdBp2rE/BEvrhptBdBcDu8/UeytWcdCy9Td8tZWnztJeJ26f8/uHCWfPnPUC/dtgJdw==}
+
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -7595,6 +7610,13 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  overlayscrollbars-react@0.5.6(overlayscrollbars@2.10.0)(react@18.3.1):
+    dependencies:
+      overlayscrollbars: 2.10.0
+      react: 18.3.1
+
+  overlayscrollbars@2.10.0: {}
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
diff --git a/src/components/section/Card.tsx b/src/components/section/Card.tsx
index 67da73d..ea15667 100644
--- a/src/components/section/Card.tsx
+++ b/src/components/section/Card.tsx
@@ -1,4 +1,5 @@
 import type { SourceID, SourceInfo } from "@shared/types"
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react"
 import type { UseQueryResult } from "@tanstack/react-query"
 import { useQuery } from "@tanstack/react-query"
 import { relativeTime } from "@shared/utils"
@@ -44,7 +45,7 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
     <div
       ref={ref}
       className={clsx(
-        "flex flex-col bg-base border rounded-md px-2 h-500px",
+        "flex flex-col bg-base border rounded-md h-500px",
         isDragged && "op-50",
         isOverlay ? "bg-glass" : "",
       )}
@@ -92,7 +93,14 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro
 
   return (
     <>
-      <div {...handleListeners} className={clsx("flex justify-between py-2 items-center", handleListeners && "cursor-grab", isOverlay && "cursor-grabbing")}>
+      <div
+        {...handleListeners}
+        className={clsx([
+          "flex justify-between p-2 items-center",
+          handleListeners && "cursor-grab",
+          isOverlay && "cursor-grabbing",
+        ])}
+      >
         <div className="flex items-center gap-2">
           <img src={`/icons/${id}.png`} className="w-4 h-4 rounded" alt={id} onError={e => e.currentTarget.hidden = true} />
           <span className="text-md font-bold">
@@ -101,10 +109,15 @@ export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardPro
         </div>
         <SubTitle query={query} />
       </div>
-      <div className="overflow-auto h-full">
+      <OverlayScrollbarsComponent
+        defer
+        className="h-full pl-2 pr-3 mr-1"
+        element="div"
+        options={{ scrollbars: { autoHide: "scroll" } }}
+      >
         <NewsList query={query} />
-      </div>
-      <div className="py-2 flex items-center justify-between">
+      </OverlayScrollbarsComponent>
+      <div className="p-2 flex items-center justify-between">
         <UpdateTime query={query} />
         <div className="flex gap-1">
           <button
diff --git a/src/hooks/useDark.ts b/src/hooks/useDark.ts
index fb7b371..4e515a3 100644
--- a/src/hooks/useDark.ts
+++ b/src/hooks/useDark.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
 import { useLocalStorage, useMedia } from "react-use"
 
 export declare type ColorScheme = "dark" | "light" | "auto"
@@ -6,7 +6,7 @@ export declare type ColorScheme = "dark" | "light" | "auto"
 export function useDark(key = "color-scheme", defaultColorScheme: ColorScheme = "auto") {
   const [colorScheme, setColorScheme] = useLocalStorage(key, defaultColorScheme)
   const prefersDarkMode = useMedia("(prefers-color-scheme: dark)")
-  const isDark = colorScheme === "auto" ? prefersDarkMode : colorScheme === "dark"
+  const isDark = useMemo(() => colorScheme === "auto" ? prefersDarkMode : colorScheme === "dark", [colorScheme, prefersDarkMode])
 
   useEffect(() => {
     document.documentElement.classList.toggle("dark", isDark)
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 586a148..399ff59 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -2,9 +2,9 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import "~/styles/globals.css"
-import "@unocss/reset/tailwind.css"
 import "virtual:uno.css"
 import type { QueryClient } from "@tanstack/react-query"
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react"
 import { Header } from "~/components/Header"
 import { useOnReload } from "~/hooks/useOnReload"
 
@@ -12,23 +12,24 @@ export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
 }>()({
   component: RootComponent,
-  notFoundComponent: () => {
-    return (
-      <div>
-        <p>This is the notFoundComponent configured on root route</p>
-      </div>
-    )
-  },
 })
 
 export function RootComponent() {
   useOnReload()
   return (
-    <div className="md:p-10 p-4">
+    <OverlayScrollbarsComponent
+      defer
+      className="md:p-10 p-4 h-full"
+      element="div"
+      options={{
+        showNativeOverlaidScrollbars: true,
+        scrollbars: { autoHide: "scroll" },
+      }}
+    >
       <Header />
       <Outlet />
       <ReactQueryDevtools buttonPosition="bottom-left" />
       <TanStackRouterDevtools position="bottom-right" />
-    </div>
+    </OverlayScrollbarsComponent>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index aa41219..2993dbf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,6 @@
+@import url(@unocss/reset/tailwind.css);
+@import url(overlayscrollbars/overlayscrollbars.css);
+
 html,
 body,
 #app {
@@ -23,3 +26,14 @@ button:disabled {
   cursor: not-allowed;
   pointer-events: all !important;
 }
+
+::-webkit-scrollbar {
+  width: 0px;
+}
+
+/* https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/src/styles/themes.scss */
+.dark .os-theme-dark {
+  --os-handle-bg: rgba(255, 255, 255, 0.44);
+  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
+  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
+}
\ No newline at end of file