From 6dfe59c5a808388ea07c1c37ad037d981cd17d86 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Wed, 24 Sep 2025 21:34:04 +0800
Subject: [PATCH] =?UTF-8?q?chore(ui):=20=E5=9C=96=E7=89=87=E5=8A=A0?=
 =?UTF-8?q?=E8=BC=89=E5=A4=B1=E6=95=97=E4=BD=BF=E7=94=A8=20snackbar=20?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/custom-elements/chat-image.ts | 30 +++++++------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/client/ui/custom-elements/chat-image.ts b/client/ui/custom-elements/chat-image.ts
index 06bb7fe..9a3914b 100644
--- a/client/ui/custom-elements/chat-image.ts
+++ b/client/ui/custom-elements/chat-image.ts
@@ -1,7 +1,7 @@
 import { $ } from 'mdui/jq'
-import { dialog } from 'mdui'
 
 import 'pinch-zoom-element'
+import { snackbar } from "../snackbar.ts";
 
 function openImageViewer(src: string) {
     $('#image-viewer-dialog-inner').empty()
@@ -25,32 +25,18 @@ customElements.define('chat-image', class extends HTMLElement {
         const e = new Image()
         e.style.maxWidth = "100%"
         e.style.maxHeight = "90%"
-        e.style.marginTop = "13px"
+        e.style.marginTop = '5px'
+        e.style.marginBottom = '5px'
         e.style.borderRadius = "var(--mdui-shape-corner-medium)"
         e.alt = $(this).attr('alt') || ""
         e.onerror = () => {
-            const bak = $(this).html()
-            $(this).html(`<br/><mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`)
+            const src = $(this).attr('src')
+            $(this).html(`<mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`)
             $(this).attr('alt', '無法加載圖像')
             $(this).on('click', () => {
-                dialog({
-                    headline: "圖片無法載入",
-                    description: "您是否需要重新加載?",
-                    actions: [
-                        {
-                            text: "重載",
-                            onClick: () => {
-                                $(this).html(bak)
-                                return false
-                            },
-                        },
-                        {
-                            text: "取消",
-                            onClick: () => {
-                                return false
-                            },
-                        },
-                    ],
+                snackbar({
+                    message: `圖片 (${src}) 無法加載!`,
+                    placement: 'top'
                 })
             })
         }