From 864859dd6bb5fa53d2c0fa0c4eebeb28f4892f1f Mon Sep 17 00:00:00 2001
From: Gness Erquint <gness.na@gmail.com>
Date: Tue, 1 Apr 2025 05:35:24 +0300
Subject: [PATCH] =?UTF-8?q?Made=20attached=20images=20clickable=20?=
 =?UTF-8?q?=E2=80=94=20no=20more=20fiddling=20with=20the=20spyglass=20pict?=
 =?UTF-8?q?ogram.=20Augmented=20the=20"Enlarge"=20button's=20function=20to?=
 =?UTF-8?q?=20retain=20it.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/scripts/chats.js | 14 ++++++++++----
 public/style.css        |  4 ++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/scripts/chats.js b/public/scripts/chats.js
index a6094b7f7..04e9ce637 100644
--- a/public/scripts/chats.js
+++ b/public/scripts/chats.js
@@ -575,8 +575,8 @@ export function isExternalMediaAllowed() {
     return !power_user.forbid_external_media;
 }
 
-async function enlargeMessageImage() {
-    const mesBlock = $(this).closest('.mes');
+function expandMessageImage(event) {
+    const mesBlock = $(event.currentTarget).closest('.mes');
     const mesId = mesBlock.attr('mesid');
     const message = chat[mesId];
     const imgSrc = message?.extra?.image;
@@ -620,7 +620,12 @@ async function enlargeMessageImage() {
         popup.completeCancelled();
     });
 
-    await popup.show();
+    popup.show();
+    return img;
+}
+
+function expandAndZoomMessageImage(event) {
+    expandMessageImage(event).click();
 }
 
 async function deleteMessageImage() {
@@ -1603,7 +1608,8 @@ jQuery(function () {
         reloadCurrentChat();
     });
 
-    $(document).on('click', '.mes_img_enlarge', enlargeMessageImage);
+    $(document).on('click', '.mes_img.img_inline', expandMessageImage);
+    $(document).on('click', '.mes_img_enlarge', expandAndZoomMessageImage);
     $(document).on('click', '.mes_img_delete', deleteMessageImage);
 
     $('#file_form_input').on('change', async () => {
diff --git a/public/style.css b/public/style.css
index 7355c4f7b..4c50eff80 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4990,6 +4990,10 @@ a:hover {
     padding: 0.5rem;
 }
 
+.mes_img.img_inline {
+    cursor: pointer;
+}
+
 .mes_img {
     border-radius: 10px;
     max-width: 100%;