From 4e281365388e11b121f9da6a81d92d754abb99d7 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sun, 26 Jul 2026 14:42:16 +0700
Subject: [PATCH] feat: enhance image message rendering with metadata
 extraction and error handling

---
 .../src/features/messages/messages-panel.tsx  | 53 ++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/services/frontend/src/features/messages/messages-panel.tsx b/services/frontend/src/features/messages/messages-panel.tsx
index 64a34e7..fc6a600 100644
--- a/services/frontend/src/features/messages/messages-panel.tsx
+++ b/services/frontend/src/features/messages/messages-panel.tsx
@@ -370,18 +370,47 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
         </div>
       ) : viewTab === "images" ? (
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-          {imageMessages.map((msg) => (
-            <div
-              key={msg.id}
-              className="aspect-square rounded-lg border bg-muted overflow-hidden"
-            >
-              {msg.content && (
-                <div className="p-2 text-xs text-muted-foreground truncate">
-                  {msg.username}: {msg.content}
-                </div>
-              )}
-            </div>
-          ))}
+          {imageMessages.map((msg) => {
+            // Extract image URLs from metadata
+            let imageUrl: string | null = null;
+            try {
+              const meta = JSON.parse(msg.metadata ?? "{}");
+              const attachments: Array<{ url: string; contentType?: string }> =
+                meta.attachments ?? [];
+              const img = attachments.find((a) =>
+                a.contentType?.startsWith("image/"),
+              );
+              imageUrl = img?.url ?? null;
+            } catch {
+              // metadata is malformed
+            }
+
+            return (
+              <div
+                key={msg.id}
+                className="group relative aspect-square rounded-lg border bg-muted overflow-hidden"
+              >
+                {imageUrl ? (
+                  <Image
+                    src={imageUrl}
+                    alt={msg.content || "Image"}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 50vw, 25vw"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center size-full text-muted-foreground text-xs">
+                    No image
+                  </div>
+                )}
+                {msg.content && (
+                  <div className="absolute bottom-0 left-0 right-0 p-2 text-xs text-white bg-gradient-to-t from-black/70 to-transparent truncate opacity-0 group-hover:opacity-100 transition-opacity">
+                    {msg.username}: {msg.content}
+                  </div>
+                )}
+              </div>
+            );
+          })}
         </div>
       ) : (
         /* Review tab */