feat: read indicator

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

src/app/(home)/page.tsx

@@ -119,7 +119,7 @@ const Welcome = () => {
       return acc + (cur.text?.length || 0)
     }, 0) * 50
   return (
-    <Screen className="mt-[-4.5rem]">
+    <Screen className="mt-20 lg:mt-[-4.5rem]">
       <TwoColumnLayout>
         <>
           <m.div

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

@@ -1,3 +1,4 @@
+import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { TocAside } from '~/components/widgets/toc'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
@@ -7,6 +8,7 @@ import { MarkdownImageRecordProviderInternal, PageMarkdown } from './pageExtra'
 const PageDetail = () => {
   return (
     <WrappedElementProvider>
+      <ReadIndicatorForMobile />
       <MarkdownImageRecordProviderInternal>
         <PageMarkdown />
       </MarkdownImageRecordProviderInternal>

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

@@ -9,6 +9,7 @@ import { ClientOnly } from '~/components/common/ClientOnly'
 import { NoteBanner } from '~/components/widgets/note/NoteBanner'
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
 import { BanCopyWrapper } from '~/components/widgets/shared/BanCopyWrapper'
+import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { XLogInfoForNote, XLogSummaryForNote } from '~/components/widgets/xlog'
 import { springScrollToTop } from '~/lib/scroller'
 import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'
@@ -86,6 +87,7 @@ const NotePage = memo(function Notepage() {
         <NoteHideIfSecret>
           <XLogSummaryForNote />
           <WrappedElementProvider>
+            <ReadIndicatorForMobile />
             <NoteMarkdownImageRecordProvider>
               <BanCopyWrapper>
                 <NoteMarkdown />

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

@@ -9,6 +9,7 @@ import { PostCopyright } from '~/components/widgets/post/PostCopyright'
 import { PostOutdate } from '~/components/widgets/post/PostOutdate'
 import { PostRelated } from '~/components/widgets/post/PostRelated'
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
+import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { SubscribeBell } from '~/components/widgets/subscribe/SubscribeBell'
 import { XLogInfoForPost, XLogSummaryForPost } from '~/components/widgets/xlog'
 import { springScrollToTop } from '~/lib/scroller'
@@ -52,6 +53,7 @@ const PostPage = () => {
           <PostOutdate />
         </header>
         <WrappedElementProvider>
+          <ReadIndicatorForMobile />
           <PostMarkdownImageRecordProvider>
             <PostMarkdown />
           </PostMarkdownImageRecordProvider>

src/components/ui/fab/FABContainer.tsx

@@ -101,7 +101,7 @@ export const FABContainer = (props: {
     <div
       data-testid="fab-container"
       className={clsx(
-        'font-lg fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] right-4 z-[9] flex flex-col',
+        'font-lg fixed bottom-[calc(2rem+env(safe-area-inset-bottom))] right-4 z-[9] flex flex-col',
         shouldHide ? 'translate-x-[calc(100%+2rem)]' : '',
         'transition-transform duration-300 ease-in-out',
       )}

src/components/widgets/comment/Comment.module.css

@@ -1,6 +1,6 @@
 .comment__message {
   * {
-    @apply leading-6;
+    @apply break-all leading-6;
   }
 
   h1,

src/components/widgets/shared/ReadIndicator.tsx

@@ -1,18 +1,50 @@
 'use client'
 
+import { useDeferredValue } from 'react'
+import clsx from 'clsx'
 import type { ElementType } from 'react'
 
+import { useIsMobile } from '~/atoms'
+import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
+import { RootPortal } from '~/components/ui/portal'
+import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { useReadPercent } from '~/hooks/shared/use-read-percent'
 import { clsxm } from '~/lib/helper'
+import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider'
 
 export const ReadIndicator: Component<{
   as?: ElementType
 }> = ({ className, as }) => {
-  const readPercent = useReadPercent()
+  const readPercent = useDebounceValue(useReadPercent(), 200)
   const As = as || 'span'
   return (
     <As className={clsxm('text-gray-800 dark:text-neutral-300', className)}>
-      {readPercent}%
+      <NumberSmoothTransition>{readPercent}</NumberSmoothTransition>%
     </As>
   )
 }
+
+export const ReadIndicatorForMobile: Component<{}> = () => {
+  const readPercent = useDeferredValue(useReadPercent())
+  const isEOA = useIsEOWrappedElement()
+  const isMobile = useIsMobile()
+  if (!isMobile) return null
+
+  return (
+    <RootPortal>
+      <div
+        className={clsx(
+          'fixed bottom-0 right-0 top-0 z-[99] w-[1px] transition-opacity duration-200 ease-in-out',
+          isEOA ? 'opacity-0' : 'opacity-100',
+        )}
+      >
+        <div
+          className="absolute top-0 w-full bg-accent/80"
+          style={{
+            height: `${readPercent}%`,
+          }}
+        />
+      </div>
+    </RootPortal>
+  )
+}