From 7c717e04218c9db44e2539222077539705f5c101 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Wed, 20 Jul 2022 22:39:32 +0800
Subject: [PATCH] feat: comment whispers

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/components/widgets/Comment/box.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/Comment/box.tsx b/src/components/widgets/Comment/box.tsx
index d45ec9c1d..1ac291134 100644
--- a/src/components/widgets/Comment/box.tsx
+++ b/src/components/widgets/Comment/box.tsx
@@ -40,6 +40,7 @@ const USER_DRAFT = 'mx-space-comment-draft'
 
 const initialState = {
   syncToRecently: false,
+  isWhispers: false,
 }
 
 const CommentSendingContext = createContext({
@@ -48,7 +49,7 @@ const CommentSendingContext = createContext({
 })
 
 export const CommentBox: FC<{
-  onSubmit: ({ text, author, mail, url }) => any
+  onSubmit: ({ text, author, mail, url, isWhispers }) => any
   onCancel?: () => any
   autoFocus?: boolean
 
@@ -159,6 +160,7 @@ export const CommentBox: FC<{
       text,
       mail,
       url: url || undefined,
+      isWhispers: config.isWhispers,
     }
     localStorage.setItem(USER_PREFIX, JSON.stringify(omit(model, ['text'])))
     onSubmit(model).then(() => {
@@ -326,7 +328,9 @@ const CommentBoxOption = observer<{ commentId?: string; refId: string }>(
   (props) => {
     const { userStore } = useStore()
     const { isLogged } = userStore
-    const { syncToRecently, setConfig } = useContext(CommentSendingContext)
+    const { syncToRecently, isWhispers, setConfig } = useContext(
+      CommentSendingContext,
+    )
     return (
       <>
         {isLogged && !props.commentId && (
@@ -344,6 +348,21 @@ const CommentBoxOption = observer<{ commentId?: string; refId: string }>(
             </label>
           </fieldset>
         )}
+        {!isLogged && (
+          <fieldset className="inline-flex items-center children:cursor-pointer">
+            <input
+              type="checkbox"
+              id="comment-box-whispers"
+              checked={isWhispers}
+              onChange={(e) => {
+                setConfig({ isWhispers: e.target.checked })
+              }}
+            />
+            <label htmlFor="comment-box-whispers" className="text-shizuku">
+              悄悄话
+            </label>
+          </fieldset>
+        )}
       </>
     )
   },