From 3ef24d6f272040006b1954d7b952ef62ec61ac9b Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 12 Jul 2023 20:22:30 +0800
Subject: [PATCH] fix: cls

---
 src/app/thinking/page.tsx                   | 15 ++--
 src/providers/root/modal-stack-provider.tsx | 40 +++++++++--
 src/socket/handler.ts                       | 18 ++---
 src/styles/scrollbar.css                    | 76 +++++++++++----------
 4 files changed, 93 insertions(+), 56 deletions(-)

diff --git a/src/app/thinking/page.tsx b/src/app/thinking/page.tsx
index a07b824d00..4baab59140 100644
--- a/src/app/thinking/page.tsx
+++ b/src/app/thinking/page.tsx
@@ -16,7 +16,7 @@ import {
 
 import { useIsLogged } from '~/atoms'
 import { TiltedSendIcon } from '~/components/icons/TiltedSendIcon'
-import { MotionButtonBase } from '~/components/ui/button'
+import { MotionButtonBase, StyledButton } from '~/components/ui/button'
 import { Divider } from '~/components/ui/divider'
 import { TextArea } from '~/components/ui/input'
 import { Loading } from '~/components/ui/loading'
@@ -318,23 +318,26 @@ const DeleteButton = (props: { id: string }) => {
 
   return (
     <button
-      className="text-red-500"
+      className="text-red-500 hover:text-red-600 dark:hover:text-red-300"
       onClick={() => {
         present({
           title: '确定删除',
           content: ({ dismiss }) => (
             <div className="w-[300px] space-y-4">
               <div className="mt-4 flex justify-end space-x-4">
-                <MotionButtonBase
+                <StyledButton
+                  variant="primary"
                   onClick={() => {
                     handleDelete()
                     dismiss()
                   }}
-                  className="text-red-500"
+                  className="bg-zinc-100/80 text-red-500 dark:bg-neutral-900/90"
                 >
                   确定
-                </MotionButtonBase>
-                <MotionButtonBase onClick={dismiss}>取消</MotionButtonBase>
+                </StyledButton>
+                <StyledButton variant="primary" onClick={dismiss}>
+                  取消
+                </StyledButton>
               </div>
             </div>
           ),
diff --git a/src/providers/root/modal-stack-provider.tsx b/src/providers/root/modal-stack-provider.tsx
index 1fc06f73a1..01548ffc11 100644
--- a/src/providers/root/modal-stack-provider.tsx
+++ b/src/providers/root/modal-stack-provider.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react'
 import { AnimatePresence, m, useAnimationControls } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { selectAtom } from 'jotai/utils'
 import type { Target, Transition } from 'framer-motion'
 import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
 
@@ -102,10 +103,38 @@ const ModalStack = () => {
       {stack.map((item, index) => {
         return <Modal key={item.id} item={item} index={index} />
       })}
+
+      {/* <HeaderPreventCLS /> */}
     </AnimatePresence>
   )
 }
 
+export const HeaderPreventCLS = () => {
+  const hasModal = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(modalStackAtom, (atom) => {
+          return atom.length > 0
+        }),
+      [],
+    ),
+  )
+
+  useEffect(() => {
+    if (!hasModal) return
+    /// 5px
+    const $header = document.querySelector('body > header') as HTMLElement
+    if (!$header) return
+
+    $header.style.right = '5px'
+    return () => {
+      $header.style.right = ''
+    }
+  }, [hasModal])
+
+  return null
+}
+
 const enterStyle: Target = {
   scale: 1,
   opacity: 1,
@@ -171,6 +200,11 @@ const Modal: Component<{
         })
       })
   }, [animateController])
+
+  const ModalProps: ModalContentPropsInternal = {
+    dismiss: close,
+  }
+
   if (CustomModalComponent) {
     return (
       <Dialog.Root open onOpenChange={onClose}>
@@ -186,9 +220,7 @@ const Modal: Component<{
             >
               <div className={modalClassName} onClick={stopPropagation}>
                 <CustomModalComponent>
-                  {createElement(content, {
-                    dismiss: close,
-                  })}
+                  {createElement(content, ModalProps)}
                 </CustomModalComponent>
               </div>
             </div>
@@ -231,7 +263,7 @@ const Modal: Component<{
               <Divider className="my-2 flex-shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
 
               <div className="min-h-0 flex-shrink flex-grow overflow-auto px-4 py-2">
-                {createElement(content)}
+                {createElement(content, ModalProps)}
               </div>
 
               <Dialog.DialogClose
diff --git a/src/socket/handler.ts b/src/socket/handler.ts
index 6e04a7bf05..3777c47a96 100644
--- a/src/socket/handler.ts
+++ b/src/socket/handler.ts
@@ -12,7 +12,6 @@ import type { InfiniteData } from '@tanstack/react-query'
 import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context'
 
 import { sayQueryKey } from '~/app/says/query'
-import { QUERY_KEY as ThinkingQueryKey } from '~/app/thinking/constants'
 import { setOnlineCount } from '~/atoms'
 import { setActivityMediaInfo, setActivityProcessName } from '~/atoms/activity'
 import {
@@ -196,14 +195,15 @@ export const eventHandler = (
     case EventTypes.RECENTLY_CREATE: {
       trackerRealtimeEvent()
       if (location.pathname === routeBuilder(Routes.Thinking, {})) {
-        queryClient.setQueryData<InfiniteData<RecentlyModel[]>>(
-          ThinkingQueryKey,
-          (prev) => {
-            return produce(prev, (draft) => {
-              draft?.pages[0].unshift(data as RecentlyModel)
-            })
-          },
-        )
+        // 页面上已经做了更新
+        // queryClient.setQueryData<InfiniteData<RecentlyModel[]>>(
+        //   ThinkingQueryKey,
+        //   (prev) => {
+        //     return produce(prev, (draft) => {
+        //       draft?.pages[0].unshift(data as RecentlyModel)
+        //     })
+        //   },
+        // )
       } else {
         toast.success(`写下一点小思考：\n${(data as RecentlyModel).content}`, {
           duration: 10000,
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
index abc3d92e0d..2c4ec1f8e9 100644
--- a/src/styles/scrollbar.css
+++ b/src/styles/scrollbar.css
@@ -1,43 +1,45 @@
 body::-webkit-scrollbar {
   height: 0;
+  width: 0;
 }
 
 body {
   overflow: overlay;
-}
-
-[data-theme='dark'] {
-  ::-webkit-scrollbar-thumb,
-  ::-webkit-scrollbar-thumb:hover {
-    border: 3px solid theme(colors.zinc.700/20);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: theme(colors.zinc.800/96);
-  }
-}
-
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:hover {
-  background-color: transparent;
-  border: 3px solid theme(colors.base-100);
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar {
-  width: 5px !important;
-  height: 5px !important;
-  background: theme(colors.base-100);
-}
-
-::-webkit-scrollbar-thumb {
-  background: theme(colors.neutral);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: theme(colors.neutral-focus);
-}
-
-::-webkit-scrollbar-corner {
-  background: theme(colors.base-100);
-}
+  /* scrollbar-gutter: stable; */
+}
+/**/
+/* [data-theme='dark'] { */
+/*   ::-webkit-scrollbar-thumb, */
+/*   ::-webkit-scrollbar-thumb:hover { */
+/*     border: 3px solid theme(colors.zinc.700/20); */
+/*   } */
+/**/
+/*   ::-webkit-scrollbar-thumb:hover { */
+/*     background: theme(colors.zinc.800/96); */
+/*   } */
+/* } */
+/**/
+/* ::-webkit-scrollbar-thumb, */
+/* ::-webkit-scrollbar-thumb:hover { */
+/*   background-color: transparent; */
+/*   border: 3px solid theme(colors.base-100); */
+/*   border-radius: 5px; */
+/* } */
+/**/
+/* ::-webkit-scrollbar { */
+/*   width: 5px !important; */
+/*   height: 5px !important; */
+/*   background: theme(colors.base-100); */
+/* } */
+/**/
+/* ::-webkit-scrollbar-thumb { */
+/*   background: theme(colors.neutral); */
+/* } */
+/**/
+/* ::-webkit-scrollbar-thumb:hover { */
+/*   background: theme(colors.neutral-focus); */
+/* } */
+/**/
+/* ::-webkit-scrollbar-corner { */
+/*   background: theme(colors.base-100); */
+/* } */