feat: note left bar dont sticky when scroll out paper

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

Author: Innei

src/app/notes/Paper.tsx

@@ -1,8 +1,10 @@
 import { clsxm } from '~/utils/helper'
 
-export const Paper: Component = ({ children, className }) => {
+export const Paper: Component<{
+  as?: keyof JSX.IntrinsicElements | Component
+}> = ({ children, className, as: As = 'main' }) => {
   return (
-    <main
+    <As
       className={clsxm(
         'relative bg-slate-50 dark:bg-zinc-900 md:col-start-1 lg:col-auto',
         '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
@@ -12,6 +14,6 @@ export const Paper: Component = ({ children, className }) => {
       )}
     >
       {children}
-    </main>
+    </As>
   )
 }

src/app/notes/[id]/layout.tsx

@@ -2,6 +2,8 @@ import { headers } from 'next/dist/client/components/headers'
 import type { Metadata } from 'next'
 
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
+import { Comments } from '~/components/widgets/comment/Comments'
+import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
 import { REQUEST_QUERY } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
 import { getSummaryFromMd } from '~/lib/markdown'
@@ -78,7 +80,8 @@ export default async (
       <SyncNoteDataAfterLoggedIn />
 
       <BottomToUpTransitionView className="min-w-0">
-        <Paper>{props.children}</Paper>
+        <Paper as={NoteMainContainer}>{props.children}</Paper>
+        <Comments refId={id} />
       </BottomToUpTransitionView>
     </>
   )

src/components/ui/theme-switcher/ThemeSwitcher.tsx

@@ -112,7 +112,7 @@ const ThemeIndicator = () => {
   if (!theme) return null
   return (
     <div
-      className="absolute top-[4px] z-[-1] h-[32px] w-[32px] rounded-full bg-base-100 shadow-[0_1px_2px_0_rgba(122,122,122,.2),_0_1px_3px_0_rgba(122,122,122,.1)] duration-200"
+      className="absolute top-[4px] z-[-1] h-[32px] w-[32px] rounded-full bg-base-100 shadow-[0_1px_2px_0_rgba(127.5,127.5,127.5,.2),_0_1px_3px_0_rgba(127.5,127.5,127.5,.1)] duration-200"
       style={{
         left: { light: 4, system: 36, dark: 68 }[theme],
       }}

src/components/widgets/comment/Comments.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react'
+
+export const Comments: FC<{
+  refId: string
+}> = ({ refId }) => {
+  return (
+    <div className="relative mb-[60px] mt-[120px] min-h-[10000px]">
+      Comments WIP, RefId: {refId}
+    </div>
+  )
+}

src/components/widgets/note/NoteActionAside.tsx

@@ -106,15 +106,10 @@ const LikeButton = () => {
 }
 
 const ShareButton = () => {
-  const hasShare = 'share' in navigator
   const isClient = useIsClient()
 
   if (!isClient) return null
 
-  if (!hasShare) {
-    return null
-  }
-
   return (
     <MotionButtonBase
       aria-label="Share This Note Button"
@@ -124,15 +119,17 @@ const ShareButton = () => {
 
         if (!note) return
 
-        navigator.share({
-          title: note.title,
-          text: note.text,
-          url: urlBuilder(
-            routeBuilder(Routes.Note, {
-              id: note.nid.toString(),
-            }),
-          ).href,
-        })
+        const hasShare = 'share' in navigator
+        if (hasShare)
+          navigator.share({
+            title: note.title,
+            text: note.text,
+            url: urlBuilder(
+              routeBuilder(Routes.Note, {
+                id: note.nid.toString(),
+              }),
+            ).href,
+          })
       }}
     >
       <i className="icon-[mingcute--share-forward-fill] text-[24px] opacity-80 duration-200 hover:text-uk-cyan-light hover:opacity-100" />

src/components/widgets/note/NoteLeftSidebar.tsx

@@ -1,18 +1,34 @@
+'use client'
+
 import { OnlyDesktop } from '~/components/ui/viewport'
 
+import { useNoteMainContainerHeight } from './NoteMainContainer'
 import { NoteTimeline } from './NoteTimeline'
 import { NoteTopicInfo } from './NoteTopicInfo'
 
 export const NoteLeftSidebar: Component = ({ className }) => {
   return (
-    <div className={className}>
+    <AutoHeightOptimize className={className}>
       <OnlyDesktop>
-        <div className="sticky top-[120px] mt-[120px]">
+        <div className="sticky top-[120px] mt-[120px] min-h-[300px]">
           <NoteTimeline />
 
           <NoteTopicInfo />
         </div>
       </OnlyDesktop>
+    </AutoHeightOptimize>
+  )
+}
+
+const AutoHeightOptimize: Component = ({ children }) => {
+  const mainContainerHeight = useNoteMainContainerHeight()
+  return (
+    <div
+      style={{
+        height: mainContainerHeight ? `${mainContainerHeight}px` : 'auto',
+      }}
+    >
+      {children}
     </div>
   )
 }

src/components/widgets/note/NoteMainContainer.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
+
+import { jotaiStore } from '~/lib/store'
+
+const noteMainContainerHeightAtom = atom(0)
+export const NoteMainContainer: Component = ({ className, children }) => {
+  const mainRef = useRef<HTMLDivElement>(null)
+  const setHeight = useSetAtom(noteMainContainerHeightAtom)
+  useEffect(() => {
+    if (!mainRef.current) return
+    // measure the height of the main element
+    const mainHeight = mainRef.current.offsetHeight
+    if (mainHeight) setHeight(mainHeight)
+
+    const ob = new ResizeObserver((entries) => {
+      const mainHeight = (entries[0].target as HTMLElement).offsetHeight
+      if (mainHeight) setHeight(mainHeight)
+    })
+    ob.observe(mainRef.current)
+
+    return () => {
+      ob.disconnect()
+      jotaiStore.set(noteMainContainerHeightAtom, 0)
+    }
+  }, [])
+
+  return (
+    <main className={className} ref={mainRef}>
+      {children}
+    </main>
+  )
+}
+
+export const useNoteMainContainerHeight = () =>
+  useAtomValue(noteMainContainerHeightAtom)

src/components/widgets/note/NoteTimeline.tsx

@@ -14,11 +14,11 @@ import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 import { springScrollToTop } from '~/utils/scroller'
 
-export const NoteTimeline = () => {
+export const NoteTimeline = memo(() => {
   const noteId = useCurrentNoteId()
   if (!noteId) return null
   return <NoteTimelineImpl />
-}
+})
 
 const NoteTimelineImpl = () => {
   void useCurrentNoteId()

src/components/widgets/note/NoteTopicInfo.tsx

@@ -1,17 +1,14 @@
 'use client'
 
+import { memo } from 'react'
+
 import { Divider } from '~/components/ui/divider'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
 
 import { NoteTopicDetail, ToTopicLink } from './NoteTopicDetail'
 
-// export const NoteTopicInfo = () => {
-//   const noteId = useCurrentNoteId()
-//   if (!noteId) return null
-//   return <NoteTopicInfoImpl />
-// }
-export const NoteTopicInfo = () => {
+export const NoteTopicInfo = memo(() => {
   const topic = useCurrentNoteDataSelector((data) => data?.data.topic)
 
   if (!topic) return null
@@ -33,4 +30,4 @@ export const NoteTopicInfo = () => {
       </FloatPopover>
     </>
   )
-}
+})