From 41d15887a73c4d801b74594f56902f3f9bec62a6 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 29 Oct 2024 19:26:32 +0800
Subject: [PATCH 1/4] MediaAttachmentGrid: fix the vids scale

---
 src/timelines/MediaAttachmentGrid.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index dcc5af1..c018c89 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -138,6 +138,16 @@ const MediaAttachmentGrid: Component<{
             );
           };
 
+          const style = () => {
+            return Object.assign(
+              {
+                width: `${size().width}px`,
+                height: `${size().height}px`,
+              },
+              accentColor ? { "--media-color-accent": accentColor } : {},
+            );
+          };
+
           switch (item.type) {
             case "image":
               return (
@@ -148,13 +158,7 @@ const MediaAttachmentGrid: Component<{
                   alt={item.description || undefined}
                   onClick={[openViewerFor, index()]}
                   loading="lazy"
-                  style={Object.assign(
-                    {
-                      width: `${size().width}px`,
-                      height: `${size().height}px`,
-                    },
-                    accentColor ? { "--media-color-accent": accentColor } : {},
-                  )}
+                  style={style()}
                 ></img>
               );
             case "video":
@@ -167,6 +171,7 @@ const MediaAttachmentGrid: Component<{
                   poster={item.previewUrl}
                   width={width}
                   height={height}
+                  style={style()}
                 />
               );
             case "gifv":
@@ -180,6 +185,7 @@ const MediaAttachmentGrid: Component<{
                   poster={item.previewUrl}
                   width={width}
                   height={height}
+                  style={style()}
                 />
               );
 

From 6e28d8808b597085b10a40308ebc0858ff9ad525 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 29 Oct 2024 19:35:40 +0800
Subject: [PATCH 2/4] MediaAttachmentGrid: reduce closure creation

---
 src/timelines/MediaAttachmentGrid.tsx | 94 +++++++++++++--------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index c018c89..c9da6a3 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -2,6 +2,7 @@ import type { mastodon } from "masto";
 import {
   type Component,
   For,
+  Index,
   createMemo,
   createRenderEffect,
   createSignal,
@@ -103,6 +104,31 @@ const MediaAttachmentGrid: Component<{
     };
   });
 
+  const itemStyle = (item: mastodon.v1.MediaAttachment) => {
+    const { width, height } = constraintedSize(
+      item.meta?.small || { width: 1, height: 1 },
+      { width: 2, height: 2 },
+      itemMaxSize(),
+    );
+
+    // I don't know why mastodon does not return this
+    // and the condition for it to return this.
+    // Anyway, It is useless now.
+    // My hope is the FastAverageColor, but
+    // we may need better tool to manage the performance impact
+    // before using this. See #37.
+    // TODO: use fast average color to extract accent color
+    const accentColor = item.meta?.colors?.accent;
+
+    return Object.assign(
+      {
+        width: `${width}px`,
+        height: `${height}px`,
+      },
+      accentColor ? { "--media-color-accent": accentColor } : {},
+    );
+  };
+
   css`
     .attachments {
       column-count: ${columnCount().toString()};
@@ -118,74 +144,48 @@ const MediaAttachmentGrid: Component<{
         }
       }}
     >
-      <For each={props.attachments}>
+      <Index each={props.attachments}>
         {(item, index) => {
-          // I don't know why mastodon does not return this
-          // and the condition for it to return this.
-          // Anyway, It is useless now.
-          // My hope is the FastAverageColor, but
-          // we may need better tool to manage the performance impact
-          // before using this. See #37.
-          // TODO: use fast average color to extract accent color
-          const accentColor = item.meta?.colors?.accent;
-          const { width, height } = item.meta?.small || {};
-
-          const size = () => {
-            return constraintedSize(
-              item.meta?.small || { width: 1, height: 1 },
-              { width: 2, height: 2 },
-              itemMaxSize(),
-            );
-          };
-
-          const style = () => {
-            return Object.assign(
-              {
-                width: `${size().width}px`,
-                height: `${size().height}px`,
-              },
-              accentColor ? { "--media-color-accent": accentColor } : {},
-            );
-          };
-
-          switch (item.type) {
+          switch (item().type) {
             case "image":
               return (
                 <img
-                  src={item.previewUrl}
-                  width={width}
-                  height={height}
-                  alt={item.description || undefined}
-                  onClick={[openViewerFor, index()]}
+                  data-sort={index}
+                  src={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  alt={item().description || undefined}
+                  onClick={[openViewerFor, index]}
                   loading="lazy"
-                  style={style()}
+                  style={itemStyle(item())}
                 ></img>
               );
             case "video":
               return (
                 <video
-                  src={item.url || undefined}
+                  data-sort={index}
+                  src={item().url || undefined}
                   autoplay={settings().autoPlayVideos}
                   playsinline={settings().autoPlayVideos ? true : undefined}
                   controls
-                  poster={item.previewUrl}
-                  width={width}
-                  height={height}
-                  style={style()}
+                  poster={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  style={itemStyle(item())}
                 />
               );
             case "gifv":
               return (
                 <video
-                  src={item.url || undefined}
+                  src={item().url || undefined}
                   autoplay={settings().autoPlayGIFs}
                   controls
                   playsinline /* or safari on iOS will play in full-screen */
                   loop
-                  poster={item.previewUrl}
-                  width={width}
-                  height={height}
-                  style={style()}
+                  poster={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  style={itemStyle(item())}
                 />
               );
 
@@ -194,7 +194,7 @@ const MediaAttachmentGrid: Component<{
               return <div></div>;
           }
         }}
-      </For>
+      </Index>
     </section>
   );
 };

From 6b889666adecec85fc721332863247ad3d257026 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 29 Oct 2024 19:42:15 +0800
Subject: [PATCH 3/4] Profile: destory FastAverageColor instance

---
 src/profiles/Profile.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index 9024820..a4bbf1b 100644
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@@ -274,6 +274,7 @@ const Profile: Component = () => {
               average: colors.hex,
               text: colors.isDark ? "white" : "black",
             });
+            ins.destroy();
           }}
         ></img>
       </div>

From da32969f5a3258987e43e095bb3e406990b3e4cd Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 29 Oct 2024 19:48:15 +0800
Subject: [PATCH 4/4] Profile: fix link color

---
 src/profiles/Profile.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index a4bbf1b..2711a63 100644
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@@ -116,6 +116,13 @@ const Profile: Component = () => {
       gap: 16px;
     }
 
+    .description {
+      & :global(a) {
+        color: inherit;
+        font-style: italic;
+      }
+    }
+
     .acct-grp {
       display: flex;
       flex-flow: row wrap;
@@ -310,6 +317,7 @@ const Profile: Component = () => {
           </div>
         </div>
         <div
+          class="description"
           ref={(e) =>
             createRenderEffect(() => (e.innerHTML = description() || ""))
           }