feat: add bottombar actions

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

Author: Innei

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

@@ -7,6 +7,7 @@ import { AckRead } from '~/components/common/AckRead'
 import { ClientOnly } from '~/components/common/ClientOnly'
 import {
   NoteActionAside,
+  NoteBottomBarAction,
   NoteFooterNavigationBarForMobile,
   NoteTopic,
 } from '~/components/widgets/note'
@@ -71,9 +72,12 @@ const NotePage = function (props: NoteModel) {
       </IndentArticleContainer>
 
       {/* <SubscribeBell defaultType="note_c" /> */}
-      <NoteTopic />
-      <XLogInfoForNote />
-      <NoteFooterNavigationBarForMobile />
+      <ClientOnly>
+        <NoteBottomBarAction />
+        <NoteTopic />
+        <XLogInfoForNote />
+        <NoteFooterNavigationBarForMobile />
+      </ClientOnly>
     </>
   )
 }

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

@@ -4,6 +4,7 @@ import { AckRead } from '~/components/common/AckRead'
 import { ClientOnly } from '~/components/common/ClientOnly'
 import {
   PostActionAside,
+  PostBottomBarAction,
   PostCopyright,
   PostOutdate,
   PostRelated,
@@ -67,6 +68,7 @@ const PostPage = (props: PostModel) => {
         <PostCopyright />
         {/* <SubscribeBell defaultType="post_c" /> */}
         <XLogInfoForPost />
+        <PostBottomBarAction />
       </ClientOnly>
     </div>
   )

src/components/widgets/note/NoteActionAside.tsx

@@ -2,6 +2,7 @@
 
 import { m, useAnimationControls, useForceUpdate } from 'framer-motion'
 
+import { useIsMobile } from '~/atoms'
 import { MotionButtonBase } from '~/components/ui/button'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 import { useIsClient } from '~/hooks/common/use-is-client'
@@ -18,6 +19,7 @@ import {
 } from '~/providers/note/CurrentNoteDataProvider'
 import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
+import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider'
 
 import {
   ActionAsideContainer,
@@ -29,6 +31,19 @@ import { AsideDonateButton } from '../shared/AsideDonateButton'
 import { ShareModal } from '../shared/ShareModal'
 import { usePresentSubscribeModal } from '../subscribe'
 
+export const NoteBottomBarAction: Component = () => {
+  const isMobile = useIsMobile()
+  if (!isMobile) return null
+  return (
+    <div className="mb-8 flex items-center justify-center space-x-8">
+      <LikeButton />
+      <ShareButton />
+      <SubscribeButton />
+      <AsideDonateButton />
+    </div>
+  )
+}
+
 export const NoteActionAside: Component = ({ className }) => {
   return (
     <ActionAsideContainer className={className}>
@@ -50,7 +65,10 @@ const NoteAsideCommentButton = () => {
         id: data?.id,
       }
     }) || {}
+
+  const isEoF = useIsEoFWrappedElement()
   if (!id) return null
+  if (isEoF) return null
   return <AsideCommentButton refId={id} title={title!} />
 }
 

src/components/widgets/post/PostActionAside.tsx

@@ -2,6 +2,7 @@
 
 import { m, useAnimationControls, useForceUpdate } from 'framer-motion'
 
+import { useIsMobile } from '~/atoms'
 import { ThumbsupIcon } from '~/components/icons/thumbs-up'
 import { MotionButtonBase } from '~/components/ui/button'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
@@ -29,6 +30,19 @@ import { AsideDonateButton } from '../shared/AsideDonateButton'
 import { ShareModal } from '../shared/ShareModal'
 import { usePresentSubscribeModal } from '../subscribe'
 
+export const PostBottomBarAction: Component = () => {
+  const isMobile = useIsMobile()
+  if (!isMobile) return null
+  return (
+    <div className="flex items-center justify-center space-x-8">
+      <LikeButton />
+      <ShareButton />
+      <SubscribeButton />
+      <AsideDonateButton />
+    </div>
+  )
+}
+
 export const PostActionAside: Component = ({ className }) => {
   return (
     <ActionAsideContainer className={className}>

src/components/widgets/shared/ActionAsideContainer.tsx

@@ -3,7 +3,7 @@
 import { useViewport } from '~/atoms'
 import { clsxm } from '~/lib/helper'
 import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
-import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider'
+import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider'
 
 export const asideButtonStyles = {
   base: 'text-[24px] opacity-80 duration-200 hover:opacity-100 relative',
@@ -13,7 +13,7 @@ export const ActionAsideIcon: Component = (props) => {
   return <i className={clsxm(asideButtonStyles.base, props.className)} />
 }
 export const ActionAsideContainer: Component = ({ className, children }) => {
-  const isEOA = useIsEOWrappedElement()
+  const isEOA = useIsEoFWrappedElement()
   const h = useViewport((v) => v.h)
 
   const isEndOfPage = usePageScrollLocationSelector(

src/components/widgets/shared/ReadIndicator.tsx

@@ -8,7 +8,7 @@ import { useIsMobile } from '~/atoms'
 import { RootPortal } from '~/components/ui/portal'
 import { useReadPercent } from '~/hooks/shared/use-read-percent'
 import { clsxm } from '~/lib/helper'
-import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider'
+import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider'
 
 export const ReadIndicator: Component<{
   as?: ElementType
@@ -31,7 +31,7 @@ export const ReadIndicator: Component<{
 
 const ReadIndicatorVertical: Component = ({ className }) => {
   const readPercent = useDeferredValue(useReadPercent())
-  const isEOA = useIsEOWrappedElement()
+  const isEOA = useIsEoFWrappedElement()
   return (
     <RootPortal>
       <div

src/components/widgets/subscribe/hooks.tsx

@@ -37,7 +37,7 @@ export const usePresentSubscribeModal = (
     present: () => {
       const dispose = present({
         title: '邮件订阅',
-
+        clickOutsideToDismiss: true,
         content: () => (
           <SubscribeModal onConfirm={dispose} defaultTypes={defaultTypes} />
         ),

src/components/widgets/toc/TocFAB.tsx

@@ -27,7 +27,7 @@ export const TocFAB = () => {
   const presentToc = useCallback(() => {
     const dispose = present({
       title: 'Table of Content',
-
+      clickOutsideToDismiss: true,
       content: () => (
         <TocTree
           $headings={$headings!}

src/providers/shared/WrappedElementProvider.tsx

@@ -36,7 +36,7 @@ const [
 
 const [
   IsEOArticleElementProviderInternal,
-  useIsEOWrappedElement,
+  useIsEoFWrappedElement,
   useSetIsEOArticleElement,
 ] = createContextState<boolean>(false)
 
@@ -132,7 +132,7 @@ export {
   WrappedElementProvider,
   useSetWrappedElement,
   useWrappedElement,
-  useIsEOWrappedElement,
+  useIsEoFWrappedElement,
   useWrappedElementSize,
   useWrappedElementPositsion,
 }