RegularToot: support content warning

src/timelines/toot-components/TootContent.tsx

@@ -5,20 +5,26 @@ import {
   type JSX,
   createRenderEffect,
   createMemo,
+  Show,
 } from "solid-js";
 import { resolveCustomEmoji } from "../../masto/toot.js";
 import { makeAcctText, useDefaultSession } from "../../masto/clients";
 import "./TootContent.css";
+import { Button } from "@suid/material";
 
 function preventDefault(event: Event) {
   event.preventDefault();
 }
 
-export type TootContentProps = {
+export type TootContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
   source?: string;
   emojis?: mastodon.v1.CustomEmoji[];
   mentions: mastodon.v1.StatusMention[];
-} & JSX.HTMLAttributes<HTMLDivElement>;
+  sensitive?: boolean;
+  spoilerText?: string;
+  reveal?: boolean;
+  onToggleReveal?: JSX.EventHandlerUnion<HTMLElement, Event>;
+};
 
 const TootContent: Component<TootContentProps> = (oprops) => {
   const session = useDefaultSession();
@@ -27,23 +33,23 @@ const TootContent: Component<TootContentProps> = (oprops) => {
     "emojis",
     "mentions",
     "class",
+    "sensitive",
+    "spoilerText",
+    "reveal",
+    "onToggleReveal",
   ]);
 
   const clientFinder = createMemo(() =>
     session() ? makeAcctText(session()!) : undefined,
   );
 
+  const shouldRevealContent = () => {
+    return !props.sensitive || (props.sensitive && props.reveal);
+  };
+
   return (
     <div
       ref={(ref) => {
-        createRenderEffect(() => {
-          ref.innerHTML = props.source
-            ? props.emojis
-              ? resolveCustomEmoji(props.source, props.emojis)
-              : props.source
-            : "";
-        });
-
         createRenderEffect(() => {
           const finder = clientFinder();
           for (const mention of props.mentions) {
@@ -61,7 +67,38 @@ const TootContent: Component<TootContentProps> = (oprops) => {
       }}
       class={`TootContent ${props.class || ""}`}
       {...rest}
-    ></div>
+    >
+      <Show when={props.sensitive}>
+        <div>
+          <span
+            ref={(ref) => {
+              createRenderEffect(() => {
+                ref.innerHTML = props.spoilerText
+                  ? props.emojis
+                    ? resolveCustomEmoji(props.spoilerText, props.emojis)
+                    : props.spoilerText
+                  : "";
+              });
+            }}
+          ></span>
+          <Button onClick={props.onToggleReveal}>"Content Warning"</Button>
+        </div>
+      </Show>
+      <Show when={shouldRevealContent()}>
+        <div
+          class="content"
+          ref={(ref) =>
+            createRenderEffect(() => {
+              ref.innerHTML = props.source
+                ? props.emojis
+                  ? resolveCustomEmoji(props.source, props.emojis)
+                  : props.source
+                : "";
+            })
+          }
+        ></div>
+      </Show>
+    </div>
   );
 };