fix: read indicator style in note toc

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

Author: Innei

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

@@ -14,7 +14,6 @@ import { ClientOnly } from '~/components/common/ClientOnly'
 import { PageDataHolder } from '~/components/common/PageHolder'
 import { MdiClockOutline } from '~/components/icons/clock'
 import { useSetHeaderMetaInfo } from '~/components/layout/header/internal/hooks'
-import { Divider } from '~/components/ui/divider'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { Loading } from '~/components/ui/loading'
 import { Markdown } from '~/components/ui/markdown'
@@ -116,7 +115,7 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
               <TocAside
                 className="sticky top-[120px] ml-4 mt-[120px]"
                 treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
-                accessory={NoteReadIndicator}
+                accessory={ReadIndicator}
               >
                 <NoteActionAside className="translate-y-full" />
               </TocAside>
@@ -133,14 +132,6 @@ const NotePage = memo(({ note }: { note: NoteModel }) => {
     </Suspense>
   )
 })
-const NoteReadIndicator = () => {
-  return (
-    <li>
-      <Divider />
-      <ReadIndicator className="text-sm" />
-    </li>
-  )
-}
 
 const NoteTitle = () => {
   const note = useNoteData()

src/components/common/ReadIndicator.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 'use client'
 
 import type { ElementType } from 'react'

src/components/widgets/toc/Toc.tsx

@@ -4,6 +4,7 @@ import { atom, useAtom } from 'jotai'
 import type { FC } from 'react'
 import type { ITocItem } from './TocItem'
 
+import { Divider } from '~/components/ui/divider'
 import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView'
 import { throttle } from '~/lib/_'
 import { useArticleElement } from '~/providers/article/article-element-provider'
@@ -130,6 +131,12 @@ const TocTree: Component<
     },
     [],
   )
+  const accessoryElement = useMemo(() => {
+    if (!accessory) return null
+    return React.isValidElement(accessory)
+      ? accessory
+      : React.createElement(accessory as FC)
+  }, [accessory])
   return (
     <ul
       className={clsxm(
@@ -150,9 +157,12 @@ const TocTree: Component<
           />
         )
       })}
-      {React.isValidElement(accessory)
-        ? accessory
-        : React.createElement(accessory as FC)}
+      {accessoryElement && (
+        <li>
+          {!!toc.length && <Divider />}
+          {accessoryElement}
+        </li>
+      )}
     </ul>
   )
 }