fix: comment box

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

src/components/layout/footer/FooterInfo.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link'
 
+import { SubscribeTextButton } from '~/components/widgets/subscribe/SubscribeTextButton'
 import { kvKeys, redis } from '~/lib/redis.server'
 import { isDev } from '~/utils/env'
 import { clsxm } from '~/utils/helper'
@@ -121,6 +122,10 @@ const FooterBottom = async () => {
           <Divider />
           <a href="/sitemap.xml">站点地图</a>
           <Divider className="hidden md:inline" />
+
+          <SubscribeTextButton>
+            <Divider className="hidden md:inline" />
+          </SubscribeTextButton>
         </span>
         <span className="mt-3 block md:mt-0 md:inline">
           Stay hungry. Stay foolish.

src/components/layout/footer/GatewayCount.tsx

@@ -9,6 +9,7 @@ export const GatewayCount = () => {
       as="span"
       TriggerComponent={GatewayCountTrigger}
       type="tooltip"
+      wrapperClassName="cursor-help"
     >
       <div className="space-y-2 leading-relaxed">
         <p className="flex items-center space-x-1 opacity-80">

src/components/ui/dlalog/DialogOverlay.tsx

@@ -1,11 +1,12 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { m } from 'framer-motion'
 
-export const DialogOverlay = () => {
+export const DialogOverlay = ({ onClick }: { onClick?: () => void }) => {
   return (
     <Dialog.Overlay asChild>
       <m.div
-        className="fixed inset-0 z-[11] bg-slate-50/80 backdrop-blur-sm dark:bg-neutral-900/80"
+        onClick={onClick}
+        className="fixed inset-0 z-[11] bg-slate-50/80 dark:bg-neutral-900/80"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}

src/components/ui/form/FormInput.tsx

@@ -9,6 +9,7 @@ import { AutoResizeHeight } from '~/components/widgets/shared/AutoResizeHeight'
 import { jotaiStore } from '~/lib/store'
 import { clsxm } from '~/utils/helper'
 
+import { Input } from '../input'
 import { useForm, useFormConfig } from './FormContext'
 
 export const FormInput: FC<
@@ -68,13 +69,12 @@ export const FormInput: FC<
 
   return (
     <>
-      <input
+      <Input
+        // @ts-expect-error
         ref={inputRef}
         className={clsxm(
-          'relative h-12 w-full rounded-lg bg-gray-200/50 px-3 dark:bg-zinc-800/50',
-          'ring-accent/80 duration-200 focus:ring-2',
-          'appearance-none',
           !!errorMessage && 'ring-2 ring-red-400 dark:ring-orange-700',
+          'w-full',
           className,
         )}
         type="text"

src/components/ui/input/Input.tsx

@@ -1,12 +1,18 @@
-import type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { DetailedHTMLProps, InputHTMLAttributes } from 'react'
 
 import { clsxm } from '~/utils/helper'
 
-export const Input: FC<
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
-> = ({ className, ...props }) => {
+export const Input = forwardRef<
+  HTMLInputElement,
+  Omit<
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    'ref'
+  >
+>(({ className, ...props }, ref) => {
   return (
     <input
+      ref={ref}
       className={clsxm(
         'min-w-0 flex-auto appearance-none rounded-lg border ring-accent/20 duration-200 sm:text-sm',
         'bg-base-100 px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 focus:outline-none focus:ring-2',
@@ -17,4 +23,5 @@ export const Input: FC<
       {...props}
     />
   )
-}
+})
+Input.displayName = 'Input'

src/components/widgets/comment/CommentBox/CommentBoxLegacyForm.tsx

@@ -35,6 +35,7 @@ const FormInput = (props: { fieldKey: FormKey; required?: boolean }) => {
       onChange={(e) => setValue(e.target.value)}
       required={required}
       placeholder={placeholderMap[key] + (required ? ' *' : '')}
+      className="border-0 bg-gray-200/50 dark:bg-zinc-800/50"
     />
   )
 }

src/components/widgets/subscribe/SubscribeModal.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useReducer } from 'react'
+import React, { useEffect, useReducer } from 'react'
 import type { SubscribeTypeToBitMap } from '@mx-space/api-client'
 import type { FC } from 'react'
 
 import { StyledButton } from '~/components/ui/button'
 import { Input } from '~/components/ui/input/Input'
 import { useStateToRef } from '~/hooks/common/use-state-ref'
+import { preventDefault } from '~/lib/dom'
 import { toast } from '~/lib/toast'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 import { apiClient } from '~/utils/request'
@@ -82,7 +83,8 @@ export const SubscribeModal: FC<SubscribeModalProps> = ({
 
   const query = useSubscribeStatusQuery()
 
-  const handleSubList = async () => {
+  const handleSubList: React.EventHandler<any> = async (e) => {
+    preventDefault(e)
     const { email, types } = state
     await apiClient.subscribe.subscribe(
       email,
@@ -97,7 +99,7 @@ export const SubscribeModal: FC<SubscribeModalProps> = ({
   const title = useAggregationSelector((data) => data.seo.title)
 
   return (
-    <form action="#" onSubmit={handleSubList} className="flex flex-col gap-5">
+    <form onSubmit={handleSubList} className="flex flex-col gap-5">
       <p className="text-gray-1 text-sm">
         欢迎订阅「{title}
         」，我会定期推送最新的内容到你的邮箱。
@@ -111,16 +113,16 @@ export const SubscribeModal: FC<SubscribeModalProps> = ({
           dispatch({ type: 'set', data: { email: e.target.value } })
         }}
       />
-      <div className="flex gap-10">
+      <div className="mb-2 flex gap-10">
         {Object.keys(state.types)
           .filter((type) => query.data?.allowTypes.includes(type as any))
           .map((name) => (
             <fieldset
-              className="children:cursor-pointer inline-flex items-center text-lg"
+              className="children:cursor-pointer inline-flex items-center text-sm"
               key={name}
             >
               <input
-                className="checkbox-accent checkbox mr-2"
+                className="checkbox-accent checkbox checkbox-sm mr-2"
                 type="checkbox"
                 onChange={(e) => {
                   dispatch({

src/components/widgets/subscribe/SubscribeTextButton.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import type { FC, PropsWithChildren } from 'react'
+
+import { useIsEnableSubscribe, usePresentSubscribeModal } from './hooks'
+
+export const SubscribeTextButton: FC<PropsWithChildren> = ({ children }) => {
+  const canSubscribe = useIsEnableSubscribe()
+  const { present } = usePresentSubscribeModal()
+
+  if (!canSubscribe) {
+    return null
+  }
+
+  return (
+    <>
+      <span>
+        <button onClick={present}>订阅</button>
+      </span>
+      {children}
+    </>
+  )
+}

src/components/widgets/subscribe/hooks.tsx

@@ -6,21 +6,24 @@ import { apiClient } from '~/utils/request'
 
 import { SubscribeModal } from './SubscribeModal'
 
-const SWR_CHECK_SUBSCRIBE_KEY = ['subscribe-status']
+const QUERY_CHECK_SUBSCRIBE_KEY = ['subscribe-status']
 
 export const useSubscribeStatusQuery = () => {
-  return useQuery(SWR_CHECK_SUBSCRIBE_KEY, apiClient.subscribe.check, {
+  return useQuery(QUERY_CHECK_SUBSCRIBE_KEY, apiClient.subscribe.check, {
     cacheTime: 60_000 * 10,
   })
 }
 
 export const useIsEnableSubscribe = () =>
   useQuery({
-    queryKey: SWR_CHECK_SUBSCRIBE_KEY,
+    queryKey: QUERY_CHECK_SUBSCRIBE_KEY,
     queryFn: apiClient.subscribe.check,
     select: (data: { enable: boolean }) => data?.enable,
     cacheTime: 60_000 * 10,
     staleTime: 60_000 * 10,
+    meta: {
+      persist: false,
+    },
   })
 
 export const usePresentSubscribeModal = (

src/lib/dom.ts

@@ -0,0 +1,6 @@
+import type { ReactEventHandler } from 'react'
+
+export const stopPropagation: ReactEventHandler<any> = (e) =>
+  e.stopPropagation()
+
+export const preventDefault: ReactEventHandler<any> = (e) => e.preventDefault()

src/providers/root/modal-stack-provider.tsx

@@ -1,6 +1,14 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import { createElement, memo, useCallback, useId, useMemo, useRef } from 'react'
-import { AnimatePresence, m } from 'framer-motion'
+import {
+  createElement,
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react'
+import { AnimatePresence, m, useAnimationControls } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import type { Target, Transition } from 'framer-motion'
 import type { FC, PropsWithChildren } from 'react'
@@ -10,6 +18,7 @@ import { Divider } from '~/components/ui/divider'
 import { DialogOverlay } from '~/components/ui/dlalog/DialogOverlay'
 import { microReboundPreset } from '~/constants/spring'
 import { useIsClient } from '~/hooks/common/use-is-client'
+import { stopPropagation } from '~/lib/dom'
 import { jotaiStore } from '~/lib/store'
 import { clsxm } from '~/utils/helper'
 
@@ -118,26 +127,47 @@ export const Modal: Component<{
     },
     [close],
   )
+  const animateController = useAnimationControls()
+  useEffect(() => {
+    animateController.start(enterStyle)
+  }, [])
   return (
     <Dialog.Root open onOpenChange={onClose}>
       <Dialog.Portal>
         <DialogOverlay />
         <Dialog.Content asChild>
-          <div className="fixed inset-0 z-[20] flex center">
+          <div
+            className="fixed inset-0 z-[20] flex center"
+            onClick={() => {
+              animateController
+                .start({
+                  scale: 1.05,
+                  transition: {
+                    duration: 0.06,
+                  },
+                })
+                .then(() => {
+                  animateController.start({
+                    scale: 1,
+                  })
+                })
+            }}
+          >
             <m.div
               style={useMemo(() => ({ zIndex: 99 + index }), [index])}
               exit={initialStyle}
               initial={initialStyle}
-              animate={enterStyle}
+              animate={animateController}
               transition={modalTransition}
               className={clsxm(
                 'relative flex flex-col overflow-hidden rounded-lg',
-                'bg-slate-50/90 dark:bg-neutral-900/90',
+                'bg-slate-50/10 dark:bg-neutral-900/80',
                 'p-2 shadow-2xl shadow-stone-300 backdrop-blur-sm dark:shadow-stone-800',
                 'max-h-[70vh] min-w-[300px] max-w-[90vw] lg:max-h-[calc(100vh-20rem)] lg:max-w-[50vw]',
                 'border border-slate-200 dark:border-neutral-800',
                 item.modalClassName,
               )}
+              onClick={stopPropagation}
             >
               <Dialog.Title className="flex-shrink-0 px-4 py-2 text-lg font-medium">
                 {item.title}