MediaAttachmentGrid: fix element type misuse

src/timelines/MediaAttachmentGrid.tsx

@@ -3,6 +3,8 @@ import {
   type Component,
   For,
   Index,
+  Match,
+  Switch,
   createMemo,
   createRenderEffect,
   createSignal,
@@ -147,9 +149,10 @@ const MediaAttachmentGrid: Component<{
     >
       <Index each={props.attachments}>
         {(item, index) => {
-          switch (item().type) {
+          const itemType = () => item().type;
-            case "image":
           return (
+            <Switch>
+              <Match when={itemType() === "image"}>
                 <img
                   data-sort={index}
                   data-media-type={item().type}
@@ -161,9 +164,8 @@ const MediaAttachmentGrid: Component<{
                   loading="lazy"
                   style={itemStyle(item())}
                 ></img>
-              );
+              </Match>
-            case "video":
+              <Match when={itemType() === "video"}>
-              return (
                 <video
                   data-sort={index}
                   data-media-type={item().type}
@@ -176,9 +178,8 @@ const MediaAttachmentGrid: Component<{
                   height={item().meta?.small?.height}
                   style={itemStyle(item())}
                 />
-              );
+              </Match>
-            case "gifv":
+              <Match when={itemType() === "gifv"}>
-              return (
                 <video
                   data-sort={index}
                   data-media-type={item().type}
@@ -192,20 +193,17 @@ const MediaAttachmentGrid: Component<{
                   height={item().meta?.small?.height}
                   style={itemStyle(item())}
                 />
-              );
+              </Match>
-
+              <Match when={itemType() === "audio"}>
-            case "audio":
-              return (
                 <audio
                   data-sort={index}
                   data-media-type={item().type}
                   src={item().url || undefined}
                   controls
                 ></audio>
+              </Match>
+            </Switch>
           );
-            case "unknown":
-              return <div></div>;
-          }
         }}
       </Index>
     </section>