From ae90b41aaec3087f0fa30044217d388d407cfb2f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 28 Jan 2023 22:34:36 +0800
Subject: [PATCH] New feature: "Show all sensitive content" menu

---
 src/app.css               |  3 +++
 src/components/status.jsx |  4 ++--
 src/index.css             |  7 +++++++
 src/pages/status.jsx      | 29 +++++++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 08b3f00f..fa785a5c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -818,6 +818,9 @@ button.carousel-dot:is(.active, [disabled].active) {
 .szh-menu .szh-menu__item {
   padding: 8px 16px !important;
 }
+.szh-menu .szh-menu__item * {
+  vertical-align: middle;
+}
 .szh-menu
   .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
   color: var(--text-color);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a9186df1..9d72587a 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -325,7 +325,7 @@ function Status({
                 <p>{spoilerText}</p>
               </div>
               <button
-                class="light spoiler"
+                class={`light spoiler ${showSpoiler ? 'spoiling' : ''}`}
                 type="button"
                 onClick={(e) => {
                   e.preventDefault();
@@ -376,7 +376,7 @@ function Status({
           )}
           {!spoilerText && sensitive && !!mediaAttachments.length && (
             <button
-              class="plain spoiler"
+              class={`plain spoiler ${showSpoiler ? 'spoiling' : ''}`}
               type="button"
               onClick={(e) => {
                 e.preventDefault();
diff --git a/src/index.css b/src/index.css
index 091ad667..9def65de 100644
--- a/src/index.css
+++ b/src/index.css
@@ -169,6 +169,13 @@ button,
   color: var(--button-text-color);
   backdrop-filter: blur(12px) invert(0.25);
 }
+:is(button, .button).plain4 {
+  background-color: transparent;
+  color: var(--text-insignificant-color);
+}
+:is(button, .button).plain4:not(:disabled, .disabled):is(:hover, :focus) {
+  color: var(--text-color);
+}
 :is(button, .button).light {
   background-color: var(--bg-faded-color);
   color: var(--text-color);
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index c54c4445..a375fd84 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1,5 +1,6 @@
 import './status.css';
 
+import { Menu, MenuItem } from '@szhsin/react-menu';
 import debounce from 'just-debounce-it';
 import pRetry from 'p-retry';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -472,6 +473,34 @@ function StatusPage() {
           </h1>
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
+            <Menu
+              align="end"
+              portal={{
+                // Need this, else the menu click will cause scroll jump
+                target: scrollableRef.current,
+              }}
+              menuButton={
+                <button type="button" class="button plain4">
+                  <Icon icon="more" alt="Actions" size="xl" />
+                </button>
+              }
+            >
+              <MenuItem
+                onClick={() => {
+                  // Click all buttons with class .spoiler but not .spoiling
+                  const buttons = Array.from(
+                    scrollableRef.current.querySelectorAll(
+                      'button.spoiler:not(.spoiling)',
+                    ),
+                  );
+                  buttons.forEach((button) => {
+                    button.click();
+                  });
+                }}
+              >
+                <Icon icon="eye-open" /> <span>Show all sensitive content</span>
+              </MenuItem>
+            </Menu>
             <Link class="button plain deck-close" to={closeLink}>
               <Icon icon="x" size="xl" />
             </Link>