From fcbca21ce55bdd06672efa9cd317df480389b3a6 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 25 Nov 2023 14:50:46 +0900
Subject: [PATCH] Display CW switch

---
 locales/en/translation.json                   |  4 +-
 renderer/components/compose/Compose.tsx       |  2 +-
 renderer/components/timelines/status/Body.tsx | 41 ++++++++++++++++---
 .../components/timelines/status/Status.tsx    | 15 +++++--
 4 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/locales/en/translation.json b/locales/en/translation.json
index bc56e28e1d..ea8d6f8590 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -12,7 +12,9 @@
         "vote": "Vote",
         "people": "{num} people",
         "closed": "Closed"
-      }
+      },
+      "show_more": "Show more",
+      "show_less": "Show less"
     }
   },
   "accounts": {
diff --git a/renderer/components/compose/Compose.tsx b/renderer/components/compose/Compose.tsx
index e104ec562d..c56fd6167e 100644
--- a/renderer/components/compose/Compose.tsx
+++ b/renderer/components/compose/Compose.tsx
@@ -41,7 +41,7 @@ export default function Compose(props: Props) {
       })
     }
     const sensitive = document.getElementById('sensitive') as HTMLInputElement
-    if (sensitive.checked) {
+    if (sensitive && sensitive.checked) {
       options = Object.assign({}, options, {
         sensitive: sensitive.checked
       })
diff --git a/renderer/components/timelines/status/Body.tsx b/renderer/components/timelines/status/Body.tsx
index 8b2968689f..80c9abd1e4 100644
--- a/renderer/components/timelines/status/Body.tsx
+++ b/renderer/components/timelines/status/Body.tsx
@@ -1,19 +1,48 @@
 import { Entity } from 'megalodon'
-import { HTMLAttributes } from 'react'
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react'
 import emojify from '@/utils/emojify'
+import { Button } from 'flowbite-react'
+import { FormattedMessage } from 'react-intl'
 
 type Props = {
   status: Entity.Status
+  spoilered: boolean
+  setSpoilered: Dispatch<SetStateAction<boolean>>
 } & HTMLAttributes<HTMLElement>
 
 export default function Body(props: Props) {
+  const { spoilered, setSpoilered } = props
+
+  const spoiler = () => {
+    if (props.status.spoiler_text.length > 0) {
+      return (
+        <div>
+          <div
+            className="spoiler-text"
+            style={Object.assign({ wordWrap: 'break-word' }, props.style)}
+            dangerouslySetInnerHTML={{ __html: emojify(props.status.spoiler_text, props.status.emojis) }}
+            onClick={props.onClick}
+          />
+          <Button size="xs" color="gray" className="focus:ring-0 my-1" onClick={() => setSpoilered(current => !current)}>
+            {spoilered ? <FormattedMessage id="timeline.status.show_more" /> : <FormattedMessage id="timeline.status.show_less" />}
+          </Button>
+        </div>
+      )
+    } else {
+      return null
+    }
+  }
+
   return (
     <>
-      <div
-        className={props.className}
-        style={Object.assign({ wordWrap: 'break-word' }, props.style)}
-        dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
-      />
+      {spoiler()}
+      {!spoilered && (
+        <div
+          className={props.className}
+          style={Object.assign({ wordWrap: 'break-word' }, props.style)}
+          dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
+        />
+      )}
     </>
   )
 }
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
index 8fc6bd9ae7..babfbe799c 100644
--- a/renderer/components/timelines/status/Status.tsx
+++ b/renderer/components/timelines/status/Status.tsx
@@ -9,6 +9,7 @@ import Poll from './Poll'
 import { FormattedMessage } from 'react-intl'
 import Actions from './Actions'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 type Props = {
   status: Entity.Status
@@ -18,6 +19,7 @@ type Props = {
 
 export default function Status(props: Props) {
   const status = originalStatus(props.status)
+  const [spoilered, setSpoilered] = useState(status.spoiler_text.length > 0)
   const router = useRouter()
 
   const onRefresh = async () => {
@@ -49,10 +51,15 @@ export default function Status(props: Props) {
               <time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
             </div>
           </div>
-          <Body status={status} />
-          {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
-          {status.card && <Card card={status.card} />}
-          <Media media={status.media_attachments} />
+          <Body status={status} spoilered={spoilered} setSpoilered={setSpoilered} />
+          {!spoilered && (
+            <>
+              {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
+              {status.card && <Card card={status.card} />}
+              <Media media={status.media_attachments} />
+            </>
+          )}
+
           <Actions status={status} client={props.client} onRefresh={onRefresh} />
         </div>
       </div>