fix: jotai store and ui bg

Signed-off-by: Innei <i@innei.in>

src/app/(app)/(page-detail)/[slug]/layout.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react'
 import type { Metadata } from 'next'
 

src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -72,6 +72,7 @@ interface PageParams {
   slug: string
 }
 
+// eslint-disable-next-line react/display-name
 export default async (props: NextPageParams<PageParams>) => {
   const data = await getData(props.params)
 

src/components/layout/header/internal/HeaderContent.tsx

@@ -49,7 +49,7 @@ const AccessibleMenu: Component = () => {
             initial={{ y: -20 }}
             animate={{ y: 0 }}
             exit={{ y: -20, opacity: 0 }}
-            className="fixed inset-x-0 top-12 z-10 flex justify-center duration-100"
+            className="pointer-events-none fixed inset-x-0 top-12 z-10 flex justify-center duration-100"
           >
             <ForDesktop />
           </m.div>
@@ -110,7 +110,7 @@ const ForDesktop: Component<{
         'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
         'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
         'group [--spotlight-color:oklch(var(--a)_/_0.12)]',
-        'duration-200',
+        'pointer-events-auto duration-200',
         shouldHideNavBg && '!bg-none !shadow-none !ring-transparent',
         className,
       )}

src/components/modules/activity/Presence.tsx

@@ -37,28 +37,21 @@ import { getColorScheme, stringToHue } from '~/lib/color'
 import { formatSeconds } from '~/lib/datetime'
 import { debounce, uniq } from '~/lib/lodash'
 import { apiClient } from '~/lib/request'
-import { springScrollTo } from '~/lib/scroller'
-import {
-  useWrappedElementPosition,
-  useWrappedElementSize,
-} from '~/providers/shared/WrappedElementProvider'
 import { queries } from '~/queries/definition'
 import { socketClient } from '~/socket'
 
 import { commentStoragePrefix } from '../comment/CommentBox/providers'
 import { useRoomContext } from './Room'
 
 export const Presence = () => {
-  const isMobile = useIsMobile()
-
   const isClient = useIsClient()
 
-  return isMobile ? null : isClient ? <PresenceImpl /> : null
+  return isClient ? <PresenceImpl /> : null
 }
 
 const PresenceImpl = () => {
   const { roomName } = useRoomContext()
-
+  const isMobile = useIsMobile()
   const { refetch } = useQuery({
     ...queries.activity.presence(roomName),
 
@@ -123,6 +116,8 @@ const PresenceImpl = () => {
     update(percent)
   }, [percent, update])
 
+  if (isMobile) return null
+
   return <ReadPresenceTimeline />
 }
 
@@ -216,14 +211,14 @@ const TimelineItem: FC<TimelineItemProps> = memo(({ type, identity }) => {
 TimelineItem.displayName = 'TimelineItem'
 
 const MoitonBar = forwardRef<
-  HTMLButtonElement,
+  HTMLDivElement,
   {
     position: number
     bgColor: string
     isCurrent: boolean
   }
 >(({ bgColor, isCurrent, position, ...rest }, ref) => {
-  const elRef = useRef<HTMLButtonElement>(null)
+  const elRef = useRef<HTMLDivElement>(null)
 
   const [memoedPosition] = useState(position)
   useLayoutEffect(() => {
@@ -258,17 +253,10 @@ const MoitonBar = forwardRef<
       },
     )
   }, [isCurrent, position])
-  const { y } = useWrappedElementPosition()
-  const { h } = useWrappedElementSize()
 
   useImperativeHandle(ref, () => elRef.current!)
   return (
-    <button
-      onClick={() => {
-        // read percent calc:  Math.floor(Math.min(Math.max(0, ((scrollTop - y) / h) * 100), 100)) || 0
-        // so the reversal is
-        springScrollTo(y + (position / 100) * h)
-      }}
+    <div
       aria-label={isCurrent ? '你在这里' : `读者在这里 - ${position}%`}
       ref={elRef}
       className={clsx(

src/components/modules/activity/Room.tsx

@@ -3,7 +3,7 @@
 import { createContext, useContext, useEffect, useMemo } from 'react'
 import type { FC, PropsWithChildren } from 'react'
 
-import { useSocketIsConnect } from '~/atoms/hooks'
+import { useSocketIsConnect, useSocketSessionId } from '~/atoms/hooks'
 import { socketClient } from '~/socket'
 import { SocketEmitEnum } from '~/types/events'
 
@@ -18,7 +18,7 @@ export const RoomProvider: FC<
   } & PropsWithChildren
 > = ({ roomName, children }) => {
   const socketIsConnect = useSocketIsConnect()
-
+  const identity = useSocketSessionId()
   const ctxValue = useMemo(() => ({ roomName }), [roomName])
   useEffect(() => {
     if (!socketIsConnect) return
@@ -31,7 +31,7 @@ export const RoomProvider: FC<
         roomName,
       })
     }
-  }, [roomName, socketIsConnect])
+  }, [roomName, socketIsConnect, identity])
 
   return (
     <RoomContext.Provider value={ctxValue}>{children}</RoomContext.Provider>

src/lib/store.ts

@@ -1,3 +1,6 @@
-import { getGlobalStore } from 'jojoo'
+import { setGlobalStore } from 'jojoo'
+import { createStore } from 'jotai'
 
-export const jotaiStore = getGlobalStore()
+const store = createStore()
+setGlobalStore(store)
+export const jotaiStore = store

src/providers/root/page-scroll-info-provider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { startTransition, useMemo, useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import type { FC, PropsWithChildren } from 'react'
@@ -27,9 +27,6 @@ const ScrollDetector = () => {
   const prevScrollY = useRef(0)
   const setIsInteractiveOnceRef = useRef(false)
 
-  // const lastTime = useRef(0)
-  // const setScrollSpeed = useSetAtom(pageScrollSpeedAtom)
-
   useIsomorphicLayoutEffect(() => {
     const scrollHandler = throttle(
       () => {
@@ -43,9 +40,8 @@ const ScrollDetector = () => {
           prevScrollY.current - currentTop > 0 ? 'up' : 'down',
         )
         prevScrollY.current = currentTop
-        startTransition(() => {
-          setPageScrollLocation(prevScrollY.current)
-        })
+
+        setPageScrollLocation(prevScrollY.current)
       },
       16,
       {