From eac1965cfc3d2bc86e11f256237322f15892b897 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 6 Sep 2024 23:51:20 +0800
Subject: [PATCH] fix: user profile can not scroll by scrollbar

Signed-off-by: Innei <i@innei.in>
---
 .../src/components/ui/markdown/components/Toc.tsx      |  6 +++---
 .../src/components/ui/scroll-area/ScrollArea.tsx       |  1 +
 .../entry-content/components/EntryReadHistory.tsx      |  4 ++--
 .../src/modules/profile/user-profile-modal.tsx         | 10 ++++++----
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/ui/markdown/components/Toc.tsx b/src/renderer/src/components/ui/markdown/components/Toc.tsx
index ca4161c02..0551415c2 100644
--- a/src/renderer/src/components/ui/markdown/components/Toc.tsx
+++ b/src/renderer/src/components/ui/markdown/components/Toc.tsx
@@ -26,7 +26,7 @@ import { MarkdownRenderContainerRefContext } from "../context"
 import type { TocItemProps } from "./TocItem"
 import { TocItem } from "./TocItem"
 
-type DebouncedFuncLeading<T extends (...args: any[]) => any> = T & {
+type DebouncedFuncLeading<T extends (..._args: any[]) => any> = T & {
   cancel: () => void
   flush: () => void
 }
@@ -218,7 +218,7 @@ export const Toc: Component = ({ className }) => {
             {toc.map((heading, index) => (
               <MemoedItem
                 heading={heading}
-                key={heading.title}
+                key={heading.anchorId}
                 rootDepth={rootDepth}
                 onClick={handleScrollTo}
                 isScrollOut={index < currentScrollRange[0]}
@@ -246,7 +246,7 @@ export const Toc: Component = ({ className }) => {
                   >
                     {toc.map((heading, index) => (
                       <li
-                        key={heading.title}
+                        key={heading.anchorId}
                         className="flex h-[24px] w-full items-center"
                       >
                         <button
diff --git a/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx b/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx
index 8e1c5f939..b1a4b650b 100644
--- a/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx
+++ b/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx
@@ -53,6 +53,7 @@ const Scrollbar = React.forwardRef<
     <ScrollAreaBase.Scrollbar
       {...rest}
       ref={forwardedRef}
+      forceMount
       className={cn(
         "z-[99] flex w-2.5 touch-none select-none p-0.5",
         orientation === "horizontal" ?
diff --git a/src/renderer/src/modules/entry-content/components/EntryReadHistory.tsx b/src/renderer/src/modules/entry-content/components/EntryReadHistory.tsx
index 74d8546d4..b584056a3 100644
--- a/src/renderer/src/modules/entry-content/components/EntryReadHistory.tsx
+++ b/src/renderer/src/modules/entry-content/components/EntryReadHistory.tsx
@@ -90,16 +90,16 @@ const EntryUser: Component<{
   return (
     <Tooltip>
       <TooltipTrigger
-        className="relative"
+        className="no-drag-region relative cursor-pointer"
         style={{
           right: `${i * 8}px`,
           zIndex: i,
         }}
+        asChild
       >
         <m.button
           layout="position"
           layoutId={userId}
-          className="no-drag-region cursor-pointer"
           type="button"
           onClick={() => {
             presentUserProfile(userId)
diff --git a/src/renderer/src/modules/profile/user-profile-modal.tsx b/src/renderer/src/modules/profile/user-profile-modal.tsx
index 0bd7b1c8b..cd1e79131 100644
--- a/src/renderer/src/modules/profile/user-profile-modal.tsx
+++ b/src/renderer/src/modules/profile/user-profile-modal.tsx
@@ -90,7 +90,8 @@ export const UserProfileModalContent: FC<{
     if (!$ref) return
 
     const initialHeaderHeight = 136
-    $ref.onscroll = throttle(() => {
+
+    const scrollHandler = throttle(() => {
       const currentH = $ref.scrollTop
 
       setHeaderSimple((current) => {
@@ -102,6 +103,7 @@ export const UserProfileModalContent: FC<{
         return current
       })
     }, 16)
+    $ref.addEventListener("scroll", scrollHandler)
 
     const currentVisible = new Set<string>()
     const ob = new IntersectionObserver((en) => {
@@ -123,7 +125,7 @@ export const UserProfileModalContent: FC<{
       ob.observe(el)
     })
     return () => {
-      $ref.onscroll = null
+      $ref.removeEventListener("scroll", scrollHandler)
 
       ob.disconnect()
     }
@@ -176,7 +178,7 @@ export const UserProfileModalContent: FC<{
     >
       <m.div
         onPointerDown={stopPropagation}
-        onPointerDownCapture={stopPropagation}
+        // onPointerDownCapture={stopPropagation}
         tabIndex={-1}
         initial="initial"
         animate={controller}
@@ -291,7 +293,7 @@ export const UserProfileModalContent: FC<{
             </div>
             <ScrollArea.ScrollArea
               ref={setScrollerRef}
-              rootClassName="h-[400px] grow max-w-full px-5 w-full"
+              rootClassName="grow max-w-full px-5 w-full"
               viewportClassName="[&>div]:space-y-4 pb-4"
             >
               {subscriptions.isLoading ? (