From a522511e0e34f947445825ecbab69379c077f182 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 22 Jan 2023 19:33:45 +0800
Subject: [PATCH] Add "Mark media as sensitive" checkbox

It does the same thing as spoiler text toggle.
---
 src/components/compose.css | 10 ++++++++++
 src/components/compose.jsx | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/components/compose.css b/src/components/compose.css
index 0d69efd1..3f2349c8 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -324,6 +324,16 @@
   margin-bottom: 4px;
 }
 
+#compose-container .media-sensitive {
+  padding: 8px;
+  background-color: var(--bg-blur-color);
+  border-radius: 8px;
+  cursor: pointer;
+}
+#compose-container .media-sensitive > * {
+  vertical-align: middle;
+}
+
 #compose-container form .poll {
   background-color: var(--bg-faded-color);
   border-radius: 8px;
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 78453357..919fb7f6 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -876,6 +876,20 @@ function Compose({
                 />
               );
             })}
+            <label class="media-sensitive">
+              <input
+                name="sensitive"
+                type="checkbox"
+                checked={sensitive}
+                disabled={uiState === 'loading'}
+                onChange={(e) => {
+                  const sensitive = e.target.checked;
+                  setSensitive(sensitive);
+                }}
+              />{' '}
+              <span>Mark media as sensitive</span>{' '}
+              <Icon icon={`eye-${sensitive ? 'close' : 'open'}`} />
+            </label>
           </div>
         )}
         {!!poll && (