From e3bfede77ed038694f5211ab61c2d6b0ec1a4008 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 24 Sep 2024 11:17:17 +0200
Subject: [PATCH] Style channel messages a bit differently

---
 src/assets/css/channel.scss                 | 24 +++++++++++++++++++++
 src/assets/css/chat.scss                    |  1 +
 src/components/Chat.vue                     |  8 ++++---
 src/components/chatMixin.js                 |  7 ++++--
 src/components/messages/MessageIncoming.vue |  2 +-
 src/components/messages/MessageOutgoing.vue |  2 +-
 6 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/css/channel.scss

diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss
new file mode 100644
index 0000000..2dc7fca
--- /dev/null
+++ b/src/assets/css/channel.scss
@@ -0,0 +1,24 @@
+.chat-root.channel {
+    background-color: #f2f2f2;
+    .chat-content {
+        width: 100%;
+        max-width: 700px;
+        align-self: center;
+        background-color: white;
+    }
+
+    .messageOut, .messageIn {
+        display: flex;
+        flex-wrap: wrap;
+        .senderAndTime {
+            flex: 0 0 100%;
+        }
+        .content {
+            flex: 1 1 auto;
+        }
+        .bubble {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 423abd4..4fae2ca 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -2,6 +2,7 @@
 @import "@/assets/css/main.scss";
 @import "@/assets/css/vendors/v-emoji-picker";
 @import "@/assets/css/filedrop.scss";
+@import "@/assets/css/channel.scss";
 
 $admin-bg: black;
 $admin-fg: white;
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 55a0db9..4625045 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-root fill-height d-flex flex-column" :style="chatContainerStyle">
+  <div :class="{'chat-root': true, 'fill-height': true, 'd-flex': true, 'flex-column': true, 'channel': roomDisplayType == 'im.keanu.room_type_channel'}" :style="chatContainerStyle">
     <ChatHeaderPrivate class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
       v-on:view-room-details="viewRoomDetails"
@@ -853,7 +853,7 @@ export default {
               this.onRoomNotJoined();
             } else {
               if (this.room) {
-                this.onRoomJoined(this.readMarker);
+                this.onRoomJoined(this.roomDisplayType == ROOM_TYPE_CHANNEL ? null : this.readMarker);
               } else {
                 this.waitingForRoomObject = true;
                 return; // no room, wait for it (we know we are joined so need to wait for sync to complete)
@@ -870,7 +870,7 @@ export default {
       // Were we waiting?
       if (this.room && this.room.roomId == this.roomId && this.waitingForRoomObject) {
         this.waitingForRoomObject = false;
-        this.onRoomJoined(this.readMarker);
+        this.onRoomJoined(this.roomDisplayType == ROOM_TYPE_CHANNEL ? null : this.readMarker);
       }
     },
     showMessageOperations(show) {
@@ -979,6 +979,8 @@ export default {
         this.newlyJoinedRoom = joinEvent.getLocalAge() < 1 * 60000 /* 1 minute */;
       }
 
+      this.reverseOrder = (this.room && this.roomDisplayType == ROOM_TYPE_CHANNEL);
+
       // Listen to events
       this.$matrix.on("Room.timeline", this.onEvent);
       this.$matrix.on("RoomMember.typing", this.onUserTyping);
diff --git a/src/components/chatMixin.js b/src/components/chatMixin.js
index 076b48c..720805f 100644
--- a/src/components/chatMixin.js
+++ b/src/components/chatMixin.js
@@ -1,4 +1,4 @@
-import util, { STATE_EVENT_ROOM_DELETION_NOTICE } from "../plugins/utils";
+import util, { ROOM_TYPE_CHANNEL, STATE_EVENT_ROOM_DELETION_NOTICE } from "../plugins/utils";
 import MessageIncomingText from "./messages/MessageIncomingText";
 import MessageIncomingFile from "./messages/MessageIncomingFile";
 import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
@@ -54,9 +54,10 @@ import RoomEncrypted from "./messages/RoomEncrypted.vue";
 import RoomDeletionNotice from "./messages/RoomDeletionNotice.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import roomDisplayOptionsMixin from "./roomDisplayOptionsMixin";
+import roomTypeMixin from "./roomTypeMixin";
 
 export default {
-  mixins: [ roomDisplayOptionsMixin ],
+  mixins: [ roomDisplayOptionsMixin, roomTypeMixin ],
   components: {
     ChatHeader,
     MessageIncomingText,
@@ -125,8 +126,10 @@ export default {
     },
 
     componentForEvent(event, isForExport = false) {
+      const isChannel = this.roomDisplayType === ROOM_TYPE_CHANNEL;
       switch (event.getType()) {
         case "m.room.member":
+          if (isChannel) break;
           if (event.getContent().membership == "join") {
             if (event.getPrevContent() && event.getPrevContent().membership == "join") {
               // We we already joined, so this must be a display name and/or avatar update!
diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
index eb40a2c..6f828f5 100644
--- a/src/components/messages/MessageIncoming.vue
+++ b/src/components/messages/MessageIncoming.vue
@@ -14,7 +14,7 @@
       }}</span>
     </v-avatar>
     <!-- SLOT FOR CONTENT -->
-    <span ref="messageInOutRef">
+    <span ref="messageInOutRef" class="content">
       <slot></slot>
     </span>
     <div class="op-button" ref="opbutton" v-if="!event.isRedacted()">
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
index d147db4..cc64353 100644
--- a/src/components/messages/MessageOutgoing.vue
+++ b/src/components/messages/MessageOutgoing.vue
@@ -14,7 +14,7 @@
       </v-btn>
     </div>
     <!-- SLOT FOR CONTENT -->
-    <span ref="messageInOutRef">
+    <span ref="messageInOutRef" class="content">
       <slot></slot>
     </span>
     <v-avatar