feat: comment box legacy

Signed-off-by: Innei <i@innei.in>

package.json

@@ -40,7 +40,7 @@
     "@clerk/nextjs": "4.21.10",
     "@floating-ui/react-dom": "2.0.1",
     "@formkit/auto-animate": "1.0.0-pre-alpha.3",
-    "@mx-space/api-client": "1.4.2",
+    "@mx-space/api-client": "1.4.3",
     "@radix-ui/react-dialog": "1.0.4",
     "@sentry/nextjs": "7.56.0",
     "@sentry/webpack-plugin": "2.3.0",

src/components/ui/markdown/Markdown.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { Fragment, memo, useMemo, useRef } from 'react'
+import React, { Fragment, memo, Suspense, useMemo, useRef } from 'react'
 import { clsx } from 'clsx'
 import { compiler, sanitizeUrl } from 'markdown-to-jsx'
 import dynamic from 'next/dynamic'
@@ -219,21 +219,24 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
     ])
 
     return (
-      <As
-        id={MAIN_MARKDOWN_ID}
-        style={style}
-        {...wrapperProps}
-        ref={ref}
-        className={clsx(
-          styles['md'],
-          codeBlockFully ? styles['code-fully'] : undefined,
-          className,
-        )}
-      >
-        {node}
-      </As>
+      <Suspense>
+        <As
+          id={MAIN_MARKDOWN_ID}
+          style={style}
+          {...wrapperProps}
+          ref={ref}
+          className={clsx(
+            styles['md'],
+            codeBlockFully ? styles['code-fully'] : undefined,
+            className,
+          )}
+        >
+          {node}
+        </As>
+      </Suspense>
     )
   })
+Markdown.displayName = 'Markdown'
 
 const MarkdownImage = (props: any) => {
   const nextProps = {

src/components/ui/markdown/renderers/link.tsx

@@ -6,30 +6,6 @@ import type { FC, ReactNode } from 'react'
 import { FloatPopover } from '../../float-popover'
 import styles from './link.module.css'
 
-const ExtendIcon = () => (
-  <svg
-    style={{
-      transform: `translateY(-2px)`,
-      marginLeft: `2px`,
-    }}
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    viewBox="0 0 100 100"
-    width="15"
-    height="15"
-    className="inline align-middle leading-normal"
-  >
-    <path
-      fill="currentColor"
-      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
-    />
-    <polygon
-      fill="currentColor"
-      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
-    />
-  </svg>
-)
 export const MLink: FC<{
   href: string
   title?: string
@@ -74,7 +50,7 @@ export const MLink: FC<{
       type="tooltip"
       TriggerComponent={useCallback(
         () => (
-          <>
+          <span className="inline-flex items-center">
             <a
               className={clsx(styles['link'])}
               href={props.href}
@@ -86,8 +62,8 @@ export const MLink: FC<{
               {props.children}
             </a>
 
-            <ExtendIcon />
-          </>
+            <i className="icon-[mingcute--external-link-line]" />
+          </span>
         ),
         [handleRedirect, props.children, props.href, props.title],
       )}
@@ -96,3 +72,4 @@ export const MLink: FC<{
     </FloatPopover>
   )
 })
+MLink.displayName = 'MLink'

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

@@ -147,6 +147,9 @@ const SubmitButton = () => {
     author: authorAtom,
     mail: mailAtom,
 
+    source: sourceAtom,
+    avatar: avatarAtom,
+
     isWhisper: isWhisperAtom,
     syncToRecently: syncToRecentlyAtom,
   } = useGetCommentBoxAtomValues()
@@ -166,8 +169,21 @@ const SubmitButton = () => {
       const text = jotaiStore.get(textAtom)
       const author = jotaiStore.get(authorAtom)
       const mail = jotaiStore.get(mailAtom)
+      const avatar = jotaiStore.get(avatarAtom)
+      const source = jotaiStore.get(sourceAtom) as any
+
+      const commentDto: CommentDto = { text, author, mail, avatar, source }
 
-      const commentDto: CommentDto = { text, author, mail }
+      if (isLogged) {
+        delete commentDto.source
+        delete commentDto.avatar
+      }
+
+      // Omit empty string key
+      Object.keys(commentDto).forEach((key) => {
+        // @ts-expect-error
+        if (commentDto[key] === '') delete commentDto[key]
+      })
 
       // Reply Comment
       if (isReply) {
@@ -199,12 +215,16 @@ const SubmitButton = () => {
           })
           .then(async (res) => {
             if (syncToRecently)
-              await apiClient.recently.proxy.post({
-                data: {
-                  content: text,
-                  ref: refId,
-                },
-              })
+              apiClient.recently.proxy
+                .post({
+                  data: {
+                    content: text,
+                    ref: refId,
+                  },
+                })
+                .then(() => {
+                  toast.success('已同步到碎碎念')
+                })
 
             return res
           })
@@ -221,15 +241,21 @@ const SubmitButton = () => {
       toast.error(getErrorMessageFromRequestError(error))
     },
     onSuccess(data) {
+      const toastCopy = isLogged
+        ? '发表成功啦~'
+        : isReply
+        ? '感谢你的回复！'
+        : '感谢你的评论！'
+
       if (isReply) {
-        toast.success('感谢你的回复！')
+        toast.success(toastCopy)
         jotaiStore.set(textAtom, '')
 
         queryClient.invalidateQueries(buildQueryKey(originalRefId))
         return
       }
 
-      toast.success('感谢你的评论！')
+      toast.success(toastCopy)
       jotaiStore.set(textAtom, '')
       queryClient.setQueryData<
         InfiniteData<

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

@@ -1,16 +1,60 @@
 import clsx from 'clsx'
+import { useAtom } from 'jotai'
 import Image from 'next/image'
 
 import { useIsLogged } from '~/atoms'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
+import { clsxm } from '~/utils/helper'
 
 import { CommentBoxActionBar } from './ActionBar'
+import { useGetCommentBoxAtomValues } from './hooks'
 import { UniversalTextArea } from './UniversalTextArea'
 
 export const CommentBoxLegacyForm = () => {
   const isLogger = useIsLogged()
   if (isLogger) return <LoggedForm />
-  return null
+  return <FormWithUserInfo />
+}
+
+const inputClassName =
+  'relative h-[50px] w-full rounded-lg bg-gray-200/50 dark:bg-zinc-800/50 px-3'
+const taClassName =
+  'relative h-[150px] w-full rounded-lg bg-gray-200/50 pb-5 dark:bg-zinc-800/50'
+type FormKey = 'author' | 'mail' | 'url'
+const placeholderMap = {
+  author: '昵称',
+  mail: '邮箱',
+  url: '网址',
+} as const
+const FormInput = (props: { fieldKey: FormKey; required?: boolean }) => {
+  const { fieldKey: key, required } = props
+  const [value, setValue] = useAtom(useGetCommentBoxAtomValues()[key])
+  return (
+    <input
+      className={inputClassName}
+      type="text"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      required={required}
+      placeholder={placeholderMap[key] + (required ? ' *' : '')}
+    />
+  )
+}
+const FormWithUserInfo = () => {
+  return (
+    <form className="flex flex-col space-y-4">
+      <div className="flex space-x-4">
+        <FormInput fieldKey="author" required />
+        <FormInput fieldKey="mail" required />
+        <FormInput fieldKey="url" />
+      </div>
+      <div className={clsxm(taClassName, 'pb-8')}>
+        <UniversalTextArea />
+      </div>
+
+      <CommentBoxActionBar className="absolute bottom-4 left-0 right-4 mb-2 ml-4 w-auto px-4" />
+    </form>
+  )
 }
 
 const LoggedForm = () => {
@@ -33,7 +77,7 @@ const LoggedForm = () => {
           height={48}
         />
       </div>
-      <div className="relative h-[150px] w-full rounded-lg bg-gray-200/50 pb-5 dark:bg-zinc-800/50">
+      <div className={taClassName}>
         <UniversalTextArea />
       </div>
 

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

@@ -33,6 +33,7 @@ export const CommentBoxRoot: FC<CommentBaseProps> = (props) => {
   useEffect(() => {
     if (isLogged) setMode(CommentBoxMode['legacy'])
   }, [isLogged])
+
   return (
     <CommentBoxProvider refId={refId}>
       <div className="relative w-full">

src/components/widgets/comment/Comments.tsx

@@ -30,6 +30,9 @@ export const Comments: FC<CommentBaseProps> = ({ refId }) => {
     },
 
     {
+      meta: {
+        persist: false,
+      },
       getNextPageParam: (lastPage) =>
         lastPage.pagination.hasNextPage
           ? lastPage.pagination.currentPage + 1

src/components/widgets/note/NoteActionAside.tsx

@@ -18,21 +18,17 @@ import { isLikedBefore, setLikeId } from '~/utils/cookie'
 import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
+import { ActionAsideContainer } from '../shared/ActionAsideContainer'
 import { DonateButton } from '../shared/DonateButton'
 import { ShareModal } from '../shared/ShareModal'
 
 export const NoteActionAside: Component = ({ className }) => {
   return (
-    <div
-      className={clsxm(
-        'absolute bottom-0 left-0 max-h-[300px] flex-col space-y-8',
-        className,
-      )}
-    >
+    <ActionAsideContainer className={className}>
       <LikeButton />
       <ShareButton />
       <DonateButton />
-    </div>
+    </ActionAsideContainer>
   )
 }
 

src/components/widgets/post/PostActionAside.tsx

@@ -18,21 +18,17 @@ import { isLikedBefore, setLikeId } from '~/utils/cookie'
 import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
+import { ActionAsideContainer } from '../shared/ActionAsideContainer'
 import { DonateButton } from '../shared/DonateButton'
 import { ShareModal } from '../shared/ShareModal'
 
 export const PostActionAside: Component = ({ className }) => {
   return (
-    <div
-      className={clsxm(
-        'absolute bottom-0 left-0 max-h-[300px] flex-col space-y-8',
-        className,
-      )}
-    >
+    <ActionAsideContainer className={className}>
       <LikeButton />
       <ShareButton />
       <DonateButton />
-    </div>
+    </ActionAsideContainer>
   )
 }
 

src/components/widgets/shared/ActionAsideContainer.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider'
+import { clsxm } from '~/utils/helper'
+
+export const ActionAsideContainer: Component = ({ className, children }) => {
+  const isEOA = useIsEOWrappedElement()
+
+  return (
+    <div
+      className={clsxm(
+        'absolute bottom-0 left-0 max-h-[300px] flex-col space-y-8 transition-opacity duration-200 ease-in-out',
+        !isEOA ? 'opacity-20 hover:opacity-100' : '',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}