fix: textarea style

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

src/app/(app)/thinking/page.tsx

@@ -59,39 +59,41 @@ const PostBox = () => {
   const queryClient = useQueryClient()
   if (!isLogin) return null
 
+  const handleSend = () => {
+    apiClient.shorthand.proxy.post({ data: { content: value } }).then((res) => {
+      setValue('')
+
+      queryClient.setQueryData<
+        InfiniteData<
+          RecentlyModel[] & {
+            comments: number
+          }
+        >
+      >(QUERY_KEY, (old) => {
+        return produce(old, (draft) => {
+          draft?.pages[0].unshift(res.$serialized as any)
+          return draft
+        })
+      })
+    })
+  }
   return (
     <form onSubmit={preventDefault} className="mb-8">
       <TextArea
-        wrapperClassName="h-[150px]"
-        className="rounded-md border border-slate-200 bg-zinc-50 dark:border-zinc-800 dark:bg-neutral-900/50"
+        wrapperClassName="h-[150px] bg-gray-200/50 dark:bg-zinc-800/50"
         value={value}
         placeholder="此刻在想什么？"
         onChange={(e) => {
           setValue(e.target.value)
         }}
+        onCmdEnter={(e) => {
+          e.preventDefault()
+          handleSend()
+        }}
       >
-        <div className="absolute bottom-2 right-2">
+        <div className="absolute bottom-2 right-2 flex size-5 center">
           <MotionButtonBase
-            onClick={() => {
-              apiClient.shorthand.proxy
-                .post({ data: { content: value } })
-                .then((res) => {
-                  setValue('')
-
-                  queryClient.setQueryData<
-                    InfiniteData<
-                      RecentlyModel[] & {
-                        comments: number
-                      }
-                    >
-                  >(QUERY_KEY, (old) => {
-                    return produce(old, (draft) => {
-                      draft?.pages[0].unshift(res.$serialized as any)
-                      return draft
-                    })
-                  })
-                })
-            }}
+            onClick={handleSend}
             disabled={value.length === 0}
             className="duration-200 disabled:cursor-not-allowed disabled:opacity-10"
           >
@@ -197,7 +199,7 @@ const List = () => {
               <div className="translate-y-6">
                 <img
                   src={owner.avatar}
-                  className="rounded-full ring-2 ring-slate-200 dark:ring-zinc-800"
+                  className="size-[40px] rounded-full ring-2 ring-slate-200 dark:ring-zinc-800"
                 />
               </div>
               <div>

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

@@ -1,37 +1,21 @@
 'use client'
 
-import { useMutation, useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { produce } from 'immer'
 import { useAtomValue } from 'jotai'
-import type {
-  CommentDto,
-  CommentModel,
-  PaginateResult,
-  RequestError,
-} from '@mx-space/api-client'
-import type { InfiniteData } from '@tanstack/react-query'
 
 import { useIsLogged } from '~/atoms/hooks'
 import { TiltedSendIcon } from '~/components/icons/TiltedSendIcon'
 import { MLink } from '~/components/ui/link/MLink'
 import { clsxm } from '~/lib/helper'
-import { apiClient, getErrorMessageFromRequestError } from '~/lib/request'
-import { jotaiStore } from '~/lib/store'
-import { toast } from '~/lib/toast'
 
-import { buildQueryKey } from '../Comments'
 import { MAX_COMMENT_TEXT_LENGTH } from './constants'
 import {
   useCommentBoxHasText,
-  useCommentBoxLifeCycle,
-  useCommentBoxRefIdValue,
   useCommentBoxTextIsOversize,
   useCommentBoxTextValue,
-  useCommentCompletedCallback,
-  useCommentOriginalRefId,
   useGetCommentBoxAtomValues,
+  useSendComment,
   useSetCommentBoxValues,
   useUseCommentReply,
 } from './hooks'
@@ -145,189 +129,7 @@ export const CommentBoxActionBar: Component = ({ className }) => {
 }
 
 const SubmitButton = () => {
-  const commentRefId = useCommentBoxRefIdValue()
-  const {
-    text: textAtom,
-    author: authorAtom,
-    mail: mailAtom,
-    url: urlAtom,
-
-    source: sourceAtom,
-    avatar: avatarAtom,
-
-    isWhisper: isWhisperAtom,
-    syncToRecently: syncToRecentlyAtom,
-  } = useGetCommentBoxAtomValues()
-  const { afterSubmit } = useCommentBoxLifeCycle()
-  const isLogged = useIsLogged()
-  const queryClient = useQueryClient()
-  const isReply = useUseCommentReply()
-  const originalRefId = useCommentOriginalRefId()
-  const completedCallback = useCommentCompletedCallback()
-
-  const wrappedCompletedCallback = <T extends CommentModel>(data: T): T => {
-    completedCallback?.(data)
-    return data
-  }
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: async (refId: string) => {
-      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 url = jotaiStore.get(urlAtom)
-
-      const commentDto: CommentDto = { text, author, mail, avatar, source, url }
-
-      if (isLogged) {
-        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) {
-        if (isLogged) {
-          return apiClient.comment.proxy.master
-            .reply(refId)
-            .post<CommentModel>({
-              data: {
-                text,
-                source,
-              },
-            })
-            .then(wrappedCompletedCallback)
-        } else {
-          return apiClient.comment
-            .reply(refId, commentDto)
-            .then(wrappedCompletedCallback)
-        }
-      }
-
-      // Normal Comment
-      const isWhisper = jotaiStore.get(isWhisperAtom)
-      const syncToRecently = jotaiStore.get(syncToRecentlyAtom)
-
-      if (isLogged) {
-        return apiClient.comment.proxy.master
-          .comment(refId)
-          .post<CommentModel>({
-            data: { text, source },
-          })
-          .then(async (res) => {
-            if (syncToRecently)
-              apiClient.recently.proxy
-                .post({
-                  data: {
-                    content: text,
-                    ref: refId,
-                  },
-                })
-                .then(() => {
-                  toast.success('已同步到碎碎念')
-                })
-
-            return res
-          })
-          .then(wrappedCompletedCallback)
-      }
-      // @ts-ignore
-      commentDto.isWhispers = isWhisper
-      return apiClient.comment
-        .comment(refId, commentDto)
-        .then(wrappedCompletedCallback)
-    },
-    mutationKey: [commentRefId, 'comment'],
-    onError(error: RequestError) {
-      toast.error(getErrorMessageFromRequestError(error))
-    },
-    onSuccess(data) {
-      afterSubmit?.()
-
-      const toastCopy = isLogged
-        ? '发表成功啦~'
-        : isReply
-          ? '感谢你的回复！'
-          : '感谢你的评论！'
-
-      const commentListQueryKey = buildQueryKey(originalRefId)
-
-      toast.success(toastCopy)
-      jotaiStore.set(textAtom, '')
-      queryClient.setQueryData<
-        InfiniteData<
-          PaginateResult<
-            CommentModel & {
-              ref: string
-            }
-          >
-        >
-      >(commentListQueryKey, (oldData) => {
-        if (!oldData) return oldData
-        if (isReply) {
-          // find the reply refed comment
-
-          return produce(oldData, (draft) => {
-            const dfs = (
-              data: CommentModel,
-              commentRefId: string,
-              newData: CommentModel & { new?: boolean },
-            ) => {
-              if (data.id === commentRefId) {
-                if (!data.children) {
-                  data.children = []
-                }
-                ;(data.children as (CommentModel & { new: boolean })[]).push({
-                  ...newData,
-                  new: true,
-                })
-                return true
-              }
-              if (!data.children) {
-                return
-              }
-              for (const child of data.children) {
-                if (dfs(child, commentRefId, newData)) {
-                  return true
-                }
-              }
-              return false
-            }
-
-            const dataToAdd = {
-              ...data,
-              new: true,
-            }
-
-            for (const page of draft.pages) {
-              for (const item of page.data) {
-                if (dfs(item, commentRefId, dataToAdd)) {
-                  break
-                }
-              }
-            }
-          })
-        }
-
-        return produce(oldData, (draft) => {
-          draft.pages[0].data.unshift({
-            ...data,
-            // @ts-ignore
-            new: true,
-          })
-        })
-      })
-    },
-  })
-  const onClickSend = () => {
-    mutate(commentRefId)
-  }
+  const [onClickSend, isPending] = useSendComment()
   return (
     <m.button
       className="flex appearance-none items-center space-x-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"

src/components/modules/comment/CommentBox/AuthedInput.tsx

@@ -46,7 +46,7 @@ export const CommentBoxAuthedInput = () => {
           height={48}
         />
       </div>
-      <div className="relative h-[150px] w-full rounded-lg bg-gray-200/50 dark:bg-zinc-800/50">
+      <div className="relative h-[150px] w-full rounded-xl bg-gray-200/50 dark:bg-zinc-800/50">
         <UniversalTextArea className="pb-5" />
       </div>
 

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

@@ -17,7 +17,7 @@ export const CommentBoxLegacyForm = () => {
 }
 
 const taClassName =
-  'relative h-[150px] w-full rounded-lg bg-gray-200/50 dark:bg-zinc-800/50'
+  'relative h-[150px] w-full rounded-xl bg-gray-200/50 dark:bg-zinc-800/50'
 type FormKey = 'author' | 'mail' | 'url'
 const placeholderMap = {
   author: '昵称',

src/components/modules/comment/CommentBox/UniversalTextArea.tsx

@@ -10,7 +10,11 @@ import { useRefValue } from '~/hooks/common/use-ref-value'
 import { preventDefault } from '~/lib/dom'
 
 import { getRandomPlaceholder } from './constants'
-import { useCommentBoxTextValue, useSetCommentBoxValues } from './hooks'
+import {
+  useCommentBoxTextValue,
+  useSendComment,
+  useSetCommentBoxValues,
+} from './hooks'
 import { CommentBoxSlotPortal } from './providers'
 
 const EmojiPicker = dynamic(() =>
@@ -68,13 +72,18 @@ export const UniversalTextArea: Component = ({ className }) => {
     $ta.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }, [])
 
+  const [sendComment] = useSendComment()
   return (
     <TextArea
       wrapperClassName={className}
       ref={taRef}
       defaultValue={value}
       onChange={(e) => setter('text', e.target.value)}
       placeholder={placeholder}
+      onCmdEnter={(e) => {
+        e.preventDefault()
+        sendComment()
+      }}
     >
       <CommentBoxSlotPortal>
         <FloatPopover trigger="click" TriggerComponent={EmojiButton} headless>