New feature: "Show all sensitive content" menu

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);

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();

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);

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>