MediaAttachmentGrid: support click to reveal

src/timelines/MediaAttachmentGrid.css

@@ -6,16 +6,6 @@
   gap: 4px;
   contain: layout style;
 
-  &.sensitive>.cell> :where(img, video) {
-    filter: blur(20px) saturate(0.2);
-  }
-
-  >.cell> :where(img, video) {
-    object-fit: contain;
-    width: 100%;
-    height: 100%;
-  }
-
   >.cell {
     max-height: 35vh;
     min-height: 40px;
@@ -33,5 +23,17 @@
       outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
       border-color: var(--media-color-accent, var(--tutu-color-surface-d));
     }
+
+    & > :where(img, video, .sensitive-placeholder) {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+
+    & > .sensitive-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

src/timelines/MediaAttachmentGrid.tsx

@@ -8,6 +8,7 @@ import {
   createRenderEffect,
   createSignal,
   onCleanup,
+  untrack,
 } from "solid-js";
 import MediaViewer from "./MediaViewer";
 import { render } from "solid-js/web";
@@ -20,6 +21,8 @@ import { $settings } from "../settings/stores";
 import { averageColorHex } from "../platform/blurhash";
 import "./MediaAttachmentGrid.css";
 import cardStyle from "../material/cards.module.css";
+import { Preview } from "@suid/icons-material";
+import { IconButton } from "@suid/material";
 
 type ElementSize = { width: number; height: number };
 
@@ -58,6 +61,7 @@ const MediaAttachmentGrid: Component<{
   const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const settings = useStore($settings);
   const windowSize = useWindowSize();
+  const [reveal, setReveal] = createSignal([] as number[]);
 
   createRenderEffect(() => {
     const vidx = viewerIndex();
@@ -134,6 +138,16 @@ const MediaAttachmentGrid: Component<{
       accentColor ? { "--media-color-accent": accentColor } : {},
     );
   };
+
+  const isReveal = (idx: number) => {
+    return reveal().includes(idx);
+  };
+
+  const addReveal = (idx: number) => {
+    if (!untrack(() => isReveal(idx))) {
+      setReveal((x) => [...x, idx]);
+    }
+  };
   return (
     <section
       ref={setRootRef}
@@ -156,6 +170,18 @@ const MediaAttachmentGrid: Component<{
               data-media-type={item().type}
             >
               <Switch>
+                <Match when={props.sensitive && !isReveal(index)}>
+                  <div class="sensitive-placeholder">
+                    <IconButton
+                      color="inherit"
+                      size="large"
+                      onClick={[addReveal, index]}
+                      aria-label="Reveal this media"
+                    >
+                      <Preview />
+                    </IconButton>
+                  </div>
+                </Match>
                 <Match when={itemType() === "image"}>
                   <img
                     src={item().previewUrl}