fix: room context

Signed-off-by: Innei <[email protected]>

src/components/layout/footer/FooterInfo.tsx

@@ -9,7 +9,7 @@ import { queries } from '~/queries/definition'
 
 import { defaultLinkSections } from './config'
 // import { footerConfig } from './config'
-import { GatewayCount } from './GatewayCount'
+import { GatewayInfo } from './GatewayInfo'
 import { OwnerName } from './OwnerName'
 import { VercelPoweredBy } from './VercelPoweredBy'
 
@@ -114,7 +114,7 @@ const PoweredBy: Component = ({ className }) => {
       <StyledLink href="https://github.com/mx-space" target="_blank">
         Mix Space
       </StyledLink>
-      . <Divider />
+      <span className="mx-1">&</span>
       <StyledLink href="https://github.com/innei/Shiro" target="_blank">
         Shiro
       </StyledLink>
@@ -174,7 +174,7 @@ const FooterBottom = async () => {
           <Divider className="inline" />
 
           <SubscribeTextButton>
-            <Divider className="inline" />
+            <Divider className="hidden md:inline" />
           </SubscribeTextButton>
         </span>
         <span className="mt-3 block md:mt-0 md:inline">
@@ -192,8 +192,8 @@ const FooterBottom = async () => {
           </>
         )}
 
-        <Divider className="hidden md:inline" />
-        <GatewayCount />
+        <Divider className="inline" />
+        <GatewayInfo />
         {/* {!!lastVisitor && (
           <>
             <Divider />

src/components/layout/footer/GatewayCount.tsx → src/components/layout/footer/GatewayInfo.tsx

@@ -6,6 +6,7 @@ import { sleep } from 'openai/core'
 import { useOnlineCount } from '~/atoms'
 import { useSocketIsConnect } from '~/atoms/hooks'
 import { ImpressionView } from '~/components/common/ImpressionTracker'
+import { usePeek } from '~/components/modules/peek/usePeek'
 import { Divider } from '~/components/ui/divider'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
@@ -84,7 +85,7 @@ const ConnectedIndicator = () => {
   )
 }
 
-export const GatewayCount = () => {
+export const GatewayInfo = () => {
   const isActive = usePageIsActive()
   const count = useOnlineCount()
 
@@ -159,6 +160,8 @@ const RoomsInfo = () => {
     },
   })
 
+  const peek = usePeek()
+
   if (!data) return <div className="loading loading-spinner" />
   if (data.length === 0)
     return <div className="text-gray-500">还没有人在偷偷观察哦~</div>
@@ -169,10 +172,12 @@ const RoomsInfo = () => {
         {data.map((room) => (
           <li key={room.path} className="flex items-center justify-between">
             <a
-              target="_blank"
               href={room.path}
               className="hover:underline"
-              rel="noreferrer"
+              onClick={(e) => {
+                e.preventDefault()
+                peek(room.path)
+              }}
             >
               {room.title}
             </a>

src/components/modules/activity/Room.tsx

@@ -33,8 +33,6 @@ export const RoomProvider: FC<
     }
   }, [roomName, socketIsConnect])
 
-  // if (!socketIsConnect) return null
-
   return (
     <RoomContext.Provider value={ctxValue}>{children}</RoomContext.Provider>
   )
@@ -48,3 +46,7 @@ export const useRoomContext = () => {
   }
   return ctx
 }
+
+export const useMaybeInRoomContext = () => {
+  return useContext(RoomContext)
+}

src/components/modules/note/NoteMetaBar.tsx

@@ -1,13 +1,11 @@
 'use client'
 
-import { useCurrentRoomCount } from '~/atoms/hooks'
 import { CreativeCommonsIcon } from '~/components/icons/cc'
 import { DividerVertical } from '~/components/ui/divider'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 import { mood2icon, weather2icon } from '~/lib/meta-icon'
 import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
 
-import { useRoomContext } from '../activity'
 import { CurrentReadingCountingMetaBarItem } from '../shared/MetaBar'
 
 const dividerVertical = <DividerVertical className="!mx-2 scale-y-50" />
@@ -108,15 +106,5 @@ export const NoteMetaCC = () => {
 }
 
 export const NoteMetaReadingCount = () => {
-  const { roomName } = useRoomContext()
-  const count = useCurrentRoomCount(roomName || '')
-
-  if (!roomName || !count) return null
-
-  return (
-    <>
-      {dividerVertical}
-      <CurrentReadingCountingMetaBarItem />
-    </>
-  )
+  return <CurrentReadingCountingMetaBarItem leftElement={dividerVertical} />
 }

src/components/modules/shared/MetaBar.tsx

@@ -1,25 +1,33 @@
+import type { FC } from 'react'
+
 import { useCurrentRoomCount } from '~/atoms/hooks'
 import { FloatPopover } from '~/components/ui/float-popover'
 
-import { useRoomContext } from '../activity'
+import { useMaybeInRoomContext } from '../activity'
+
+export const CurrentReadingCountingMetaBarItem: FC<{
+  leftElement?: React.ReactNode
+}> = ({ leftElement }) => {
+  const roomCtx = useMaybeInRoomContext()
 
-export const CurrentReadingCountingMetaBarItem = () => {
-  const { roomName } = useRoomContext()
-  const count = useCurrentRoomCount(roomName || '')
+  const count = useCurrentRoomCount(roomCtx?.roomName || '')
 
-  if (!roomName || !count) return null
+  if (!roomCtx || !count) return null
 
   return (
-    <FloatPopover
-      asChild
-      type="tooltip"
-      triggerElement={
-        <span>
-          当前<span className="mx-1 font-medium">{count}</span>人正在阅读
-        </span>
-      }
-    >
-      当前的实时阅读人数，可以通过左侧时间线查看其他人的阅读进度（手机上无法查看）
-    </FloatPopover>
+    <>
+      {leftElement}
+      <FloatPopover
+        asChild
+        type="tooltip"
+        triggerElement={
+          <span>
+            当前<span className="mx-1 font-medium">{count}</span>人正在阅读
+          </span>
+        }
+      >
+        当前的实时阅读人数，可以通过左侧时间线查看其他人的阅读进度（手机上无法查看）
+      </FloatPopover>
+    </>
   )
 }