feat: support realtime page reader presence (#288)

* eat: init Signed-off-by: Innei <i@innei.in> * feat: init Signed-off-by: Innei <i@innei.in> * update Signed-off-by: Innei <i@innei.in> * feat: impl it Signed-off-by: Innei <i@innei.in> * update Signed-off-by: Innei <i@innei.in> * feat: reading duration Signed-off-by: Innei <i@innei.in> * fix: tooltip Signed-off-by: Innei <i@innei.in> * fix: style Signed-off-by: Innei <i@innei.in> * update tooltip Signed-off-by: Innei <i@innei.in> * fix: clerk id Signed-off-by: Innei <i@innei.in> * fix: comment box style Signed-off-by: Innei <i@innei.in> --------- Signed-off-by: Innei <i@innei.in>
Innei · Feb 12, 2024 · abe2460 · abe2460
1 parent b465230
commit abe2460
Show file tree

Hide file tree

Showing 89 changed files with 1,092 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@milkdown/react": "7.3.3",
     "@milkdown/transformer": "7.3.3",
     "@milkdown/utils": "7.3.3",
-    "@mx-space/api-client": "1.7.2",
+    "@mx-space/api-client": "1.8.0-alpha.4",
     "@prosemirror-adapter/react": "0.2.6",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-label": "2.0.2",
@@ -93,6 +93,7 @@
     "marked": "12.0.0",
     "medium-zoom": "1.1.0",
     "mermaid": "10.8.0",
+    "nanoid": "*",
     "next": "14.1.0",
     "next-themes": "0.2.1",
     "openai": "4.27.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(app)/(page-detail)/[slug]/layout.tsx b/src/app/(app)/(page-detail)/[slug]/layout.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import type { Metadata } from 'next'
 
+import {
+  buildRoomName,
+  Presence,
+  RoomProvider,
+} from '~/components/modules/activity'
 import { CommentAreaRootLazy } from '~/components/modules/comment'
 import { TocFAB } from '~/components/modules/toc/TocFAB'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
@@ -13,6 +18,7 @@ import { getQueryClient } from '~/lib/query-client.server'
 import { requestErrorHandler } from '~/lib/request.server'
 import { CurrentPageDataProvider } from '~/providers/page/CurrentPageDataProvider'
 import { LayoutRightSideProvider } from '~/providers/shared/LayoutRightSideProvider'
+import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 import { queries } from '~/queries/definition'
 
 import {
@@ -81,20 +87,33 @@ export default async (props: NextPageParams<PageParams>) => {
         <PageLoading>
           <div className="relative w-full min-w-0">
             <HeaderMetaInfoSetting />
-            <article className="prose">
-              <header className="mb-8">
-                <BottomToUpSoftScaleTransitionView lcpOptimization delay={0}>
-                  <PageTitle />
-                </BottomToUpSoftScaleTransitionView>
 
-                <BottomToUpSoftScaleTransitionView lcpOptimization delay={200}>
-                  <PageSubTitle />
-                </BottomToUpSoftScaleTransitionView>
-              </header>
-              <BottomToUpTransitionView lcpOptimization delay={600}>
-                {props.children}
-              </BottomToUpTransitionView>
-            </article>
+            <RoomProvider roomName={buildRoomName(data.id)}>
+              <WrappedElementProvider>
+                <article className="prose">
+                  <header className="mb-8">
+                    <BottomToUpSoftScaleTransitionView
+                      lcpOptimization
+                      delay={0}
+                    >
+                      <PageTitle />
+                    </BottomToUpSoftScaleTransitionView>
+
+                    <BottomToUpSoftScaleTransitionView
+                      lcpOptimization
+                      delay={200}
+                    >
+                      <PageSubTitle />
+                    </BottomToUpSoftScaleTransitionView>
+                  </header>
+                  <BottomToUpTransitionView lcpOptimization delay={600}>
+                    {props.children}
+                  </BottomToUpTransitionView>
+
+                  <Presence />
+                </article>
+              </WrappedElementProvider>
+            </RoomProvider>
 
             <BottomToUpSoftScaleTransitionView delay={1000}>
               <PagePaginator />

diff --git a/src/app/(app)/notes/[id]/layout.tsx b/src/app/(app)/notes/[id]/layout.tsx
@@ -1,6 +1,7 @@
 import { headers } from 'next/dist/client/components/headers'
 import type { Metadata } from 'next'
 
+import { buildRoomName, RoomProvider } from '~/components/modules/activity'
 import { CommentAreaRootLazy } from '~/components/modules/comment'
 import { NoteFontSettingFab } from '~/components/modules/note/NoteFontFab'
 import { NoteMainContainer } from '~/components/modules/note/NoteMainContainer'
@@ -91,18 +92,19 @@ export default async (
       <CurrentNoteNidProvider nid={nid} />
       <CurrentNoteDataProvider data={data} />
       <SyncNoteDataAfterLoggedIn />
-
-      <Transition className="min-w-0" lcpOptimization>
-        <Paper key={nid} as={NoteMainContainer}>
-          <NotePage {...data.data} />
-        </Paper>
-        <BottomToUpSoftScaleTransitionView delay={500}>
-          <CommentAreaRootLazy
-            refId={noteObjectId}
-            allowComment={allowComment}
-          />
-        </BottomToUpSoftScaleTransitionView>
-      </Transition>
+      <RoomProvider roomName={buildRoomName(data.data.id)}>
+        <Transition className="min-w-0" lcpOptimization>
+          <Paper key={nid} as={NoteMainContainer}>
+            <NotePage {...data.data} />
+          </Paper>
+          <BottomToUpSoftScaleTransitionView delay={500}>
+            <CommentAreaRootLazy
+              refId={noteObjectId}
+              allowComment={allowComment}
+            />
+          </BottomToUpSoftScaleTransitionView>
+        </Transition>
+      </RoomProvider>
 
       <NoteFontSettingFab />
 

diff --git a/src/app/(app)/notes/[id]/pageExtra.tsx b/src/app/(app)/notes/[id]/pageExtra.tsx
@@ -59,6 +59,7 @@ export const NoteTitle = () => {
 
 export const NoteDateMeta = () => {
   const created = useCurrentNoteDataSelector((data) => data?.data.created)
+
   if (!created) return null
   const dateFormat = dayjs(created)
     .locale('zh-cn')

diff --git a/src/app/(app)/notes/[id]/pageImpl.tsx b/src/app/(app)/notes/[id]/pageImpl.tsx
@@ -5,10 +5,13 @@ import type { NoteModel } from '@mx-space/api-client'
 
 import { AckRead } from '~/components/common/AckRead'
 import { ClientOnly } from '~/components/common/ClientOnly'
+import { Presence } from '~/components/modules/activity'
 import {
   NoteActionAside,
   NoteBottomBarAction,
   NoteFooterNavigationBarForMobile,
+  NoteMetaBar,
+  NoteMetaReadingCount,
   NoteTopic,
 } from '~/components/modules/note'
 import { NoteRootBanner } from '~/components/modules/note/NoteBanner'
@@ -22,7 +25,6 @@ import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvide
 
 import { NoteHeadCover } from '../../../../components/modules/note/NoteHeadCover'
 import { NoteHideIfSecret } from '../../../../components/modules/note/NoteHideIfSecret'
-import { NoteMetaBar } from '../../../../components/modules/note/NoteMetaBar'
 import {
   IndentArticleContainer,
   MarkdownSelection,
@@ -48,6 +50,7 @@ const NotePage = function (props: NoteModel) {
 
             <ClientOnly>
               <NoteMetaBar />
+              <NoteMetaReadingCount />
             </ClientOnly>
           </span>
           <NoteRootBanner />
@@ -56,6 +59,7 @@ const NotePage = function (props: NoteModel) {
         <NoteHideIfSecret>
           <SummarySwitcher data={props} />
           <WrappedElementProvider>
+            <Presence />
             <ReadIndicatorForMobile />
             <NoteMarkdownImageRecordProvider>
               <BanCopyWrapper>

diff --git a/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import type { Metadata } from 'next'
 
+import { buildRoomName, RoomProvider } from '~/components/modules/activity'
 import { CommentAreaRootLazy } from '~/components/modules/comment'
 import { TocFAB } from '~/components/modules/toc/TocFAB'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
@@ -79,7 +80,9 @@ export default async (props: NextPageParams<PageParams>) => {
       <CurrentPostDataProvider data={data} />
       <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
         <BottomToUpTransitionView lcpOptimization className="min-w-0">
-          <PostPage {...data} />
+          <RoomProvider roomName={buildRoomName(data.id)}>
+            <PostPage {...data} />
+          </RoomProvider>
 
           <BottomToUpSoftScaleTransitionView delay={500}>
             <CommentAreaRootLazy

diff --git a/src/app/(app)/posts/(post-detail)/[category]/[slug]/pageExtra.tsx b/src/app/(app)/posts/(post-detail)/[category]/[slug]/pageExtra.tsx
@@ -7,6 +7,7 @@ import type { PropsWithChildren } from 'react'
 
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
 import { PostMetaBar } from '~/components/modules/post/PostMetaBar'
+import { CurrentReadingCountingMetaBarItem } from '~/components/modules/shared/MetaBar'
 import { WithArticleSelectionAction } from '~/components/modules/shared/WithArticleSelectionAction'
 import { MainMarkdown } from '~/components/ui/markdown'
 import { noopArr } from '~/lib/noop'
@@ -91,5 +92,9 @@ export const PostMetaBarInternal: Component = ({ className }) => {
     }
   })
   if (!meta) return null
-  return <PostMetaBar meta={meta} className={className} />
+  return (
+    <PostMetaBar meta={meta} className={className}>
+      <CurrentReadingCountingMetaBarItem />
+    </PostMetaBar>
+  )
 }
diff --git a/src/app/(app)/posts/(post-detail)/[category]/[slug]/pageImpl.tsx b/src/app/(app)/posts/(post-detail)/[category]/[slug]/pageImpl.tsx
@@ -2,6 +2,7 @@ import type { PostModel } from '@mx-space/api-client'
 
 import { AckRead } from '~/components/common/AckRead'
 import { ClientOnly } from '~/components/common/ClientOnly'
+import { Presence } from '~/components/modules/activity'
 import {
   PostActionAside,
   PostBottomBarAction,
@@ -51,6 +52,7 @@ const PostPage = (props: PostModel) => {
         </header>
         <WrappedElementProvider>
           <ReadIndicatorForMobile />
+          <Presence />
           <PostMarkdownImageRecordProvider>
             <MarkdownSelection>
               <PostMarkdown />

diff --git a/src/app/(app)/says/page.tsx b/src/app/(app)/says/page.tsx
@@ -7,7 +7,7 @@ import Markdown from 'markdown-to-jsx'
 import type { SayModel } from '@mx-space/api-client'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 
-import { useIsMobile } from '~/atoms'
+import { useIsMobile } from '~/atoms/hooks'
 import { LoadMoreIndicator } from '~/components/modules/shared/LoadMoreIndicator'
 import { NothingFound } from '~/components/modules/shared/NothingFound'
 import { Loading } from '~/components/ui/loading'
@@ -89,7 +89,7 @@ const SaySkeleton = memo(() => {
     <div className="relative mb-4 border-l-[3px] border-l-slate-500 bg-slate-200/50 px-4 py-3 dark:bg-neutral-800">
       <div className="mb-2 h-6 w-full rounded bg-slate-300/80 dark:bg-neutral-700" />
       <div className="flex text-sm text-base-content/60 md:justify-between">
-        <div className="mb-2 h-4 w-14 rounded bg-slate-300/80 md:mb-0 dark:bg-neutral-700" />
+        <div className="mb-2 h-4 w-14 rounded bg-slate-300/80 dark:bg-neutral-700 md:mb-0" />
         <div className="ml-auto text-right">
           <div className="h-4 w-1/4 rounded bg-slate-300/80 dark:bg-neutral-700" />
         </div>

diff --git a/src/app/(app)/thinking/page.tsx b/src/app/(app)/thinking/page.tsx
@@ -14,7 +14,7 @@ import {
   RecentlyAttitudeResultEnum,
 } from '@mx-space/api-client'
 
-import { useIsLogged } from '~/atoms'
+import { useIsLogged } from '~/atoms/hooks'
 import { TiltedSendIcon } from '~/components/icons/TiltedSendIcon'
 import { CommentBoxRootLazy, CommentsLazy } from '~/components/modules/comment'
 import { PeekLink } from '~/components/modules/peek/PeekLink'

diff --git a/src/app/(app)/web-dev/layout.tsx b/src/app/(app)/web-dev/layout.tsx
@@ -0,0 +1,15 @@
+export const metadata = {
+  title: 'dev',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <>{children}</>
+    </>
+  )
+}