From 4a275c116b8d7bb1747d033e48b3b4dceb9c6b7e Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 9 Sep 2025 11:52:42 +0200
Subject: [PATCH] Display single image messages using the thread component

---
 src/components/chatMixin.js                   |  4 +--
 .../messages/composition/MessageThread.vue    | 29 ++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/chatMixin.js b/src/components/chatMixin.js
index 29beffd..5ed5410 100644
--- a/src/components/chatMixin.js
+++ b/src/components/chatMixin.js
@@ -198,7 +198,7 @@ export default {
               if (isForExport) {
                 return MessageIncomingImageExport;
               }
-              return MessageImage;
+              return MessageThread;
             } else if (event.getContent().msgtype == "m.audio") {
               if (isForExport) {
                 return MessageIncomingAudioExport;
@@ -245,7 +245,7 @@ export default {
               if (isForExport) {
                 return MessageOutgoingImageExport;
               }
-              return MessageImage;
+              return MessageThread;
             } else if (event.getContent().msgtype == "m.audio") {
               if (isForExport) {
                 return MessageOutgoingAudioExport;
diff --git a/src/components/messages/composition/MessageThread.vue b/src/components/messages/composition/MessageThread.vue
index c0c6486..ea68da8 100644
--- a/src/components/messages/composition/MessageThread.vue
+++ b/src/components/messages/composition/MessageThread.vue
@@ -1,7 +1,9 @@
 <template>
   <component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview">
     <div class="bubble">
-      <div class="bubble-inset" v-if="showCCSummary"><CCSummary :multiple="items.length > 1" :flags="proofHintFlags" /></div>
+      <div class="bubble-inset" v-if="showCCSummary">
+        <CCSummary :multiple="items.length > 1" :flags="proofHintFlags" />
+      </div>
       <div class="original-message bubble-inset" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
         <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
@@ -20,7 +22,7 @@
             </v-col>
           </v-row>
         </v-container>
-        <div class="bubble-inset">
+        <div class="bubble-inset" v-if="showMessageText || event?.isRedacted() || event?.replacingEventId()">
           <i v-if="event && event.isRedacted()" class="deleted-text">
             <v-icon :color="isIncoming && senderIsAdminOrModerator(event) ? 'white' : ''" size="small">block</v-icon>
             {{
@@ -126,7 +128,16 @@ watch(
   event,
   () => {
     if (event.value) {
-      if (thread.value === undefined) {
+      if (event.value.getContent().msgtype == "m.image") {
+        // Single image mode
+        items.value = [event.value].map((e: MatrixEvent) => {
+          let ea = $matrix.attachmentManager.getEventAttachment(e);
+          if (isVisible.value) {
+            ea.loadThumbnail();
+          }
+          return ea;
+        });
+      } else if (thread.value === undefined) {
         thread.value = props.timelineSet.relations.getChildEventsForEvent(
           event.value.getId() ?? "",
           util.threadMessageType(),
@@ -145,7 +156,17 @@ onBeforeUnmount(() => {
   event.value?.off(MatrixEventEvent.RelationsCreated, onRelationsCreated);
 });
 
+const showMessageText = computed((): boolean => {
+  if (event.value?.getContent().msgtype == "m.image") {
+    return false;
+  }
+  return true;
+});
+
 const showMultiview = computed((): boolean => {
+  if (event.value?.getContent().msgtype == "m.image") {
+    return true;
+  }
   return (
     (isIncoming.value && props.room.displayType == ROOM_TYPE_FILE_MODE) ||
     items.value?.length > 1 ||
@@ -240,7 +261,7 @@ const layoutedItems = computed(() => {
 }
 
 .bubble-inset {
-  padding: 8px 8px;  
+  padding: 8px 8px;
 }
 
 .imageCollection {