feat: adjust subscribe bell button, and fix #137

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

Author: Innei

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

@@ -15,7 +15,6 @@ import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside
 import { BanCopyWrapper } from '~/components/widgets/shared/BanCopyWrapper'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher'
-import { SubscribeBell } from '~/components/widgets/subscribe'
 import { XLogInfoForNote } from '~/components/widgets/xlog'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
@@ -71,7 +70,7 @@ const NotePage = function (props: NoteModel) {
         </NoteHideIfSecret>
       </IndentArticleContainer>
 
-      <SubscribeBell defaultType="note_c" />
+      {/* <SubscribeBell defaultType="note_c" /> */}
       <NoteTopic />
       <XLogInfoForNote />
       <NoteFooterNavigationBarForMobile />

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

@@ -12,7 +12,6 @@ import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside
 import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher'
-import { SubscribeBell } from '~/components/widgets/subscribe'
 import { XLogInfoForPost } from '~/components/widgets/xlog'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
@@ -66,7 +65,7 @@ const PostPage = (props: PostModel) => {
       </article>
       <ClientOnly>
         <PostCopyright />
-        <SubscribeBell defaultType="post_c" />
+        {/* <SubscribeBell defaultType="post_c" /> */}
         <XLogInfoForPost />
       </ClientOnly>
     </div>

src/components/icons/menu-collection.tsx

@@ -230,6 +230,8 @@ export function RMixPlanet(props: SVGProps<SVGSVGElement>) {
       viewBox="0 0 24 24"
       width="1em"
       height="1em"
+      fill="currentColor"
+      {...props}
     >
       <path d="M3.91762 8.0366C3.32984 9.23328 3 10.5792 3 11.9999C3 16.9704 7.02944 20.9999 12 20.9999C13.4216 20.9999 14.7684 20.6696 15.9657 20.081C16.8385 20.4544 17.6848 20.6991 18.4564 20.762C19.3582 20.8356 20.3 20.6665 20.9818 19.9847C21.7339 19.2325 21.8625 18.1689 21.7279 17.1727C21.6052 16.2638 21.2481 15.2537 20.726 14.2114C20.9051 13.503 21 12.7619 21 11.9999C21 7.02929 16.9706 2.99986 12 2.99986C11.2389 2.99986 10.4987 3.09454 9.79103 3.27318C8.7474 2.7498 7.73605 2.39172 6.8261 2.26834C5.82897 2.13315 4.76406 2.26128 4.01121 3.01413C3.3287 3.69664 3.16001 4.63956 3.2341 5.54233C3.29752 6.315 3.54313 7.16247 3.91762 8.0366ZM5.3224 5.96574C5.2734 5.75321 5.24204 5.55715 5.2274 5.37873C5.17928 4.79243 5.31727 4.53649 5.42543 4.42834C5.54452 4.30925 5.84797 4.15403 6.55739 4.25021C6.75482 4.27698 6.96951 4.32189 7.2 4.38547C6.50364 4.82527 5.87203 5.35784 5.3224 5.96574ZM19.6124 16.803C19.6751 17.0316 19.7195 17.2445 19.7459 17.4404C19.8416 18.1485 19.6865 18.4515 19.5676 18.5705C19.4595 18.6785 19.204 18.8163 18.6189 18.7686C18.4419 18.7542 18.2475 18.7233 18.0368 18.675C18.6427 18.1268 19.1736 17.4971 19.6124 16.803ZM15.8812 17.8264C14.2046 16.9482 12.2571 15.5026 10.3752 13.6207C8.4954 11.741 7.05092 9.79561 6.17241 8.12028C7.06357 6.78465 8.40124 5.77312 9.96933 5.29866C10.6108 5.10457 11.2923 4.99986 12 4.99986C15.866 4.99986 19 8.13386 19 11.9999C19 12.7083 18.8951 13.3904 18.7006 14.0325C18.2261 15.5991 17.2155 16.9356 15.8812 17.8264ZM13.6052 18.8152C13.0901 18.9359 12.5528 18.9999 12 18.9999C8.13401 18.9999 5 15.8658 5 11.9999C5 11.4476 5.06377 10.9109 5.18429 10.3963C6.14883 11.913 7.43475 13.5087 8.96096 15.0349C10.489 16.563 12.0868 17.8502 13.6052 18.8152Z" />
     </svg>

src/components/layout/header/config.ts

@@ -101,7 +101,7 @@ export const headerMenuConfig: IHeaderMenu[] = [
         icon: h(FaSolidComments),
       },
       {
-        title: '异次元之旅',
+        title: '跃迁',
         icon: h(RMixPlanet),
         path: 'https://travel.moe/go.html',
       },

src/components/widgets/note/NoteActionAside.tsx

@@ -19,16 +19,22 @@ import {
 import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
-import { ActionAsideContainer } from '../shared/ActionAsideContainer'
+import {
+  ActionAsideContainer,
+  ActionAsideIcon,
+  asideButtonStyles,
+} from '../shared/ActionAsideContainer'
 import { AsideCommentButton } from '../shared/AsideCommentButton'
 import { AsideDonateButton } from '../shared/AsideDonateButton'
 import { ShareModal } from '../shared/ShareModal'
+import { usePresentSubscribeModal } from '../subscribe'
 
 export const NoteActionAside: Component = ({ className }) => {
   return (
     <ActionAsideContainer className={className}>
       <LikeButton />
       <ShareButton />
+      <SubscribeButton />
       <NoteAsideCommentButton />
       <AsideDonateButton />
     </ActionAsideContainer>
@@ -104,7 +110,8 @@ const LikeButton = () => {
     >
       <m.i
         className={clsxm(
-          'text-[24px] opacity-80 duration-200 hover:text-uk-red-light hover:opacity-100',
+          'duration-200 hover:text-uk-red-light',
+          asideButtonStyles.base,
           !isLiked && 'icon-[mingcute--heart-line]',
           isLiked && 'icon-[mingcute--heart-fill] text-uk-red-light',
         )}
@@ -127,6 +134,15 @@ const LikeButton = () => {
   )
 }
 
+const SubscribeButton = () => {
+  const { present } = usePresentSubscribeModal(['note_c'])
+  return (
+    <MotionButtonBase className="flex flex-col space-y-2" onClick={present}>
+      <ActionAsideIcon className="icon-[material-symbols--notifications-active-outline] hover:text-accent" />
+    </MotionButtonBase>
+  )
+}
+
 const ShareButton = () => {
   const isClient = useIsClient()
   const { present } = useModalStack()
@@ -168,7 +184,7 @@ const ShareButton = () => {
         }
       }}
     >
-      <i className="icon-[mingcute--share-forward-line] text-[24px] opacity-80 duration-200 hover:text-uk-cyan-light hover:opacity-100" />
+      <ActionAsideIcon className="icon-[mingcute--share-forward-line] hover:text-uk-cyan-light" />
     </MotionButtonBase>
   )
 }

src/components/widgets/post/PostActionAside.tsx

@@ -19,23 +19,37 @@ import {
 } from '~/providers/post/CurrentPostDataProvider'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
-import { ActionAsideContainer } from '../shared/ActionAsideContainer'
+import {
+  ActionAsideContainer,
+  ActionAsideIcon,
+  asideButtonStyles,
+} from '../shared/ActionAsideContainer'
 import { AsideCommentButton } from '../shared/AsideCommentButton'
 import { AsideDonateButton } from '../shared/AsideDonateButton'
 import { ShareModal } from '../shared/ShareModal'
+import { usePresentSubscribeModal } from '../subscribe'
 
 export const PostActionAside: Component = ({ className }) => {
   return (
     <ActionAsideContainer className={className}>
       <LikeButton />
       <ShareButton />
-
+      <SubscribeButton />
       <AsideDonateButton />
       <PostAsideCommentButton />
     </ActionAsideContainer>
   )
 }
 
+const SubscribeButton = () => {
+  const { present } = usePresentSubscribeModal(['post_c'])
+  return (
+    <MotionButtonBase className="flex flex-col space-y-2" onClick={present}>
+      <ActionAsideIcon className="icon-[material-symbols--notifications-active-outline] hover:text-accent" />
+    </MotionButtonBase>
+  )
+}
+
 const PostAsideCommentButton = () => {
   const { title, id } =
     useCurrentPostDataSelector((data) => {
@@ -96,7 +110,8 @@ const LikeButton = () => {
     >
       <m.i
         className={clsxm(
-          'relative text-[24px] opacity-80 duration-200 hover:text-uk-orange-light hover:opacity-100',
+          'hover:text-uk-orange-light hover:opacity-100',
+          asideButtonStyles.base,
 
           isLiked && 'text-uk-orange-dark',
         )}
@@ -163,7 +178,7 @@ const ShareButton = () => {
         }
       }}
     >
-      <i className="icon-[mingcute--share-forward-line] text-[24px] opacity-80 duration-200 hover:text-uk-cyan-light hover:opacity-100" />
+      <ActionAsideIcon className="icon-[mingcute--share-forward-line] hover:text-uk-cyan-light" />
     </MotionButtonBase>
   )
 }

src/components/widgets/shared/ActionAsideContainer.tsx

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

src/components/widgets/shared/AsideCommentButton.tsx

@@ -4,6 +4,7 @@ import { MotionButtonBase } from '~/components/ui/button'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
 
+import { ActionAsideIcon } from './ActionAsideContainer'
 import { CommentModal } from './CommentModal'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -28,7 +29,7 @@ export const AsideCommentButton = (
         })
       }}
     >
-      <i className="icon-[mingcute--comment-line] text-[24px] opacity-80 duration-200 hover:text-uk-pink-dark hover:opacity-100" />
+      <ActionAsideIcon className="icon-[mingcute--comment-line] hover:text-uk-pink-dark" />
     </MotionButtonBase>
   )
 }

src/components/widgets/shared/AsideDonateButton.tsx

@@ -11,6 +11,8 @@ import { useIsClient } from '~/hooks/common/use-is-client'
 import { clsxm } from '~/lib/helper'
 import { useAppConfigSelector } from '~/providers/root/aggregation-data-provider'
 
+import { ActionAsideIcon } from './ActionAsideContainer'
+
 // TODO this component only use once in current page.
 const positionAtom = atom({
   x: 0,
@@ -119,7 +121,7 @@ const DonateButtonInternal: Component<HTMLMotionProps<'button'>> = ({
       }}
       {...props}
     >
-      <i className="icon-[mingcute--teacup-line] text-[24px] opacity-80 duration-200 hover:text-uk-brown-dark hover:opacity-100" />
+      <ActionAsideIcon className="icon-[mingcute--teacup-line] hover:text-uk-brown-dark" />
     </MotionButtonBase>
   )
 }

src/components/widgets/subscribe/SubscribeModal.tsx

@@ -12,7 +12,7 @@ import { apiClient } from '~/lib/request'
 import { toast } from '~/lib/toast'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
-import { useSubscribeStatusQuery } from './hooks'
+import { useIsEnableSubscribe, useSubscribeStatusQuery } from './hooks'
 
 interface SubscribeModalProps {
   onConfirm: () => void
@@ -61,6 +61,8 @@ export const SubscribeModal: FC<SubscribeModalProps> = ({
 }) => {
   const [state, dispatch] = useFormData()
 
+  const canSub = useIsEnableSubscribe()
+
   const stateRef = useStateToRef(state)
 
   useEffect(() => {
@@ -86,6 +88,10 @@ export const SubscribeModal: FC<SubscribeModalProps> = ({
   const query = useSubscribeStatusQuery()
 
   const handleSubList: React.EventHandler<any> = async (e) => {
+    if (!canSub) {
+      toast.error('订阅功能暂时没有开启哦')
+      return
+    }
     preventDefault(e)
     const { email, types } = state
     await apiClient.subscribe.subscribe(