From bf7e694e00849399b078e4de9b95f0d0d9027b39 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 14 Sep 2024 20:09:54 +0800
Subject: [PATCH 1/2] MediaAttachmentGrid: optimize preview layout (#11)

---
 src/timelines/MediaAttachmentGrid.tsx |  6 +++---
 src/timelines/toot.module.css         | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index 5db3cbe..2d07752 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -13,12 +13,12 @@ const MediaAttachmentGrid: Component<{
   const gridTemplateColumns = () => {
     const l = props.attachments.length;
     if (l < 2) {
-      return "1fr";
+      return "minmax(40px, auto)";
     }
     if (l < 4) {
-      return "repeat(2, 1fr)";
+      return "repeat(2, minmax(40px, auto))";
     }
-    return "repeat(3, 1fr)";
+    return "repeat(3, minmax(40px, auto))";
   };
 
   const openViewerFor = (index: number) => {
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index 3a65937..ba8477b 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -140,7 +140,7 @@
     max-height: calc(4 * var(--title-line-height) * var(--title-size));
   }
 
-  > p {
+  >p {
     max-height: calc(8 * var(--body-line-height) * var(--body-size));
   }
 
@@ -228,10 +228,19 @@
   > :where(img) {
     max-height: 35vh;
     min-height: 40px;
-    object-fit: none;
-    width: 100%;
+    object-fit: contain;
+    max-width: 100%;
     background-color: var(--tutu-color-surface-d);
     border-radius: 2px;
+    border: 1px solid transparent;
+    transition: border-color 220ms var(--tutu-anim-curve-std),
+      box-shadow 220ms var(--tutu-anim-curve-std);
+
+    &:hover,
+    &:focus-visible {
+      border: 1px solid var(--tutu-color-surface-dd);
+      box-shadow: var(--tutu-shadow-e1);
+    }
   }
 }
 

From e8a4e382ba808367055e8e079cade865150c8feb Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 14 Sep 2024 20:21:19 +0800
Subject: [PATCH 2/2] MediaAttachmentGrid: lazily created viewer

The reworked viewer presentation process delay the
creation of the viewer until the user interaction,
to reduce the DOM created during viewing the list.
---
 src/timelines/MediaAttachmentGrid.tsx | 29 +++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index 2d07752..9373205 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -1,8 +1,9 @@
 import type { mastodon } from "masto";
-import { type Component, For, createSignal } from "solid-js";
+import { type Component, For, createSignal, onMount } from "solid-js";
 import { css } from "solid-styled";
 import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
+import { render } from "solid-js/web";
 
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
@@ -23,6 +24,25 @@ const MediaAttachmentGrid: Component<{
 
   const openViewerFor = (index: number) => {
     setViewerIndex(index);
+    const container = document.createElement("div");
+    container.setAttribute("role", "presentation");
+    document.body.appendChild(container);
+    let dispose: () => void
+    dispose = render(() => {
+      return (
+        <MediaViewer
+          show={viewerOpened()}
+          index={viewerIndex() || 0}
+          onIndexUpdated={setViewerIndex}
+          media={props.attachments}
+          onClose={() => {
+            setViewerIndex(undefined);
+            dispose();
+            document.body.removeChild(container)
+          }}
+        />
+      );
+    }, container);
   };
 
   css`
@@ -56,13 +76,6 @@ const MediaAttachmentGrid: Component<{
           }
         }}
       </For>
-        <MediaViewer
-          show={viewerOpened()}
-          index={viewerIndex() || 0}
-          onIndexUpdated={setViewerIndex}
-          media={props.attachments}
-          onClose={() => setViewerIndex(undefined)}
-        />
     </section>
   );
 };