MediaAttachmentGrid: fix viewer DOM not removed

src/timelines/MediaAttachmentGrid.tsx

@@ -2,6 +2,8 @@ import type { mastodon } from "masto";
 import {
   type Component,
   For,
+  createEffect,
+  createRenderEffect,
   createSignal,
   onCleanup,
   onMount,
@@ -15,6 +17,7 @@ const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
 }> = (props) => {
   let rootRef: HTMLElement;
+  const [dispose, setDispose] = createSignal<() => void>();
   const [viewerIndex, setViewerIndex] = createSignal<number>();
   const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const gridTemplateColumns = () => {
@@ -28,31 +31,32 @@ const MediaAttachmentGrid: Component<{
     return "repeat(3, minmax(40px, auto))";
   };
 
-  const openViewerFor = (index: number) => {
-    setViewerIndex(index);
+  createRenderEffect((lastDispose?: () => void) => {
+    lastDispose?.();
+    const vidx = viewerIndex();
+    if (typeof vidx === "undefined") return;
     const container = document.createElement("div");
     container.setAttribute("role", "presentation");
     document.body.appendChild(container);
-
-    let dispose: () => void;
-
-    const removeContainer = () => {
-      setViewerIndex(undefined);
+    return render(() => {
+      onCleanup(() => {
         document.body.removeChild(container);
-      dispose();
-    };
+      });
 
-    dispose = render(() => {
       return (
         <MediaViewer
           show={viewerOpened()}
           index={viewerIndex() || 0}
           onIndexUpdated={setViewerIndex}
           media={props.attachments}
-          onClose={removeContainer}
+          onClose={() => setViewerIndex()}
         />
       );
     }, container);
+  });
+
+  const openViewerFor = (index: number) => {
+    setViewerIndex(index);
   };
 
   css`

src/timelines/MediaViewer.tsx

@@ -323,7 +323,7 @@ const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
               boxShadow: showControls() ? "var(--tutu-shadow-e6)" : undefined,
             }}
           >
-            <IconButton onClick={props.onClose}>
+            <IconButton onClick={props.onClose} disableRipple>
               <Close />
             </IconButton>
           </Toolbar>