improve messagePage

dist/index.css

@@ -360,8 +360,8 @@ body[showing-chat] #chat-page-wrapper {
   overflow: auto;
 }
 #message-page #composer {
-  border-top: 1px solid var(--border);
   display: flex;
+  justify-content: center;
 }
 #message-page #composer input {
   margin: 0px;
@@ -369,13 +369,71 @@ body[showing-chat] #chat-page-wrapper {
   max-width: unset;
   flex: 1;
 }
+@media (max-width: 700px) {
+  #message-page #composer {
+    border-top: 1px solid var(--border);
+  }
+  #message-page #composer div {
+    width: 100%;
+    max-width: unset;
+    display: flex;
+  }
+}
+@media (min-width: 700px) {
+  #message-page #composer .content-width-constraint,
+  #message-page #composer .input-width-constraint {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    max-width: var(--max-content-width);
+  }
+  #message-page #composer .content-width-constraint {
+    max-width: var(--max-content-width);
+  }
+  #message-page #composer .input-width-constraint {
+    max-width: var(--max-input-width);
+  }
+}
 #message-page #message-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   padding: var(--content-padding);
   gap: var(--gap-between-tiles);
+  height: auto;
+  max-height: unset;
   scroll-behavior: smooth;
 }
+.message-bubble {
+  display: flex;
+  width: 100%;
+  max-width: var(--max-content-width);
+}
+.message-bubble > div {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface);
+  padding: var(--control-padding);
+  width: 100%;
+  max-width: var(--max-input-width);
+}
+.message-bubble .timestamp,
+.message-bubble .sender-name {
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+.message-bubble .sender-name {
+  font-weight: bold;
+}
+.message-bubble[sentbyuser] {
+  justify-content: flex-end;
+}
+.message-bubble[sentbyuser] {
+  align-items: flex-end;
+}
+.message-bubble[sentbyuser] span {
+  text-align: right;
+}
 
 /* src/View/Components/chatEntry.css */
 .chat-entry {

dist/index.js

@@ -664,12 +664,14 @@
     sender;
     dateSent;
     body = new State("");
-    constructor(chatModel, chatMessage) {
+    sentByUser;
+    constructor(chatModel, chatMessage, sentByUser) {
       this.chatModel = chatModel;
       this.channel = chatMessage.channel;
       this.sender = chatMessage.sender;
       this.dateSent = new Date(chatMessage.dateSent).toLocaleString();
       this.body.value = chatMessage.body;
+      this.sentByUser = sentByUser;
     }
   };
 
@@ -721,7 +723,11 @@
     };
     // add
     addChatMessage = (chatMessage) => {
-      const chatMessageModel = new ChatMessageViewModel(this.chatModel, chatMessage);
+      const chatMessageModel = new ChatMessageViewModel(
+        this.chatModel,
+        chatMessage,
+        chatMessage.sender == this.settingsViewModel.username.value
+      );
       this.chatMessageViewModels.add(chatMessageModel);
     };
     // settings
@@ -901,7 +907,20 @@
 
   // src/View/Components/chatMessage.tsx
   function ChatMessage(chatMessageViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { "subscribe:innerText": chatMessageViewModel.body }), /* @__PURE__ */ createElement("span", null, chatMessageViewModel.dateSent)));
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "message-bubble",
+        "toggle:sentbyuser": chatMessageViewModel.sentByUser
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "sender-name" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement(
+        "span",
+        {
+          class: "body",
+          "subscribe:innerText": chatMessageViewModel.body
+        }
+      ), /* @__PURE__ */ createElement("span", { class: "timestamp" }, chatMessageViewModel.dateSent))
+    );
   }
   var ChatMessageViewModelToView = (chatMessageViewModel) => {
     console.log(chatMessageViewModel);
@@ -1018,7 +1037,7 @@
     }
     chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
     setTimeout(() => scrollDown(), 100);
-    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": chatViewModel.composingMessage,
@@ -1034,7 +1053,7 @@
         "toggle:disabled": chatViewModel.cannotSendMessage
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
-    ))));
+    ))))));
   }
 
   // src/View/Components/deletableListItem.tsx

src/Model/chatMessageViewModel.ts

@@ -12,13 +12,19 @@ export default class ChatMessageViewModel {
   sender: string;
   dateSent: string;
   body: React.State<string> = new React.State("");
+  sentByUser: boolean;
 
-  constructor(chatModel: ChatModel, chatMessage: ChatMessage) {
+  constructor(
+    chatModel: ChatModel,
+    chatMessage: ChatMessage,
+    sentByUser: boolean
+  ) {
     this.chatModel = chatModel;
 
     this.channel = chatMessage.channel;
     this.sender = chatMessage.sender;
     this.dateSent = new Date(chatMessage.dateSent).toLocaleString();
     this.body.value = chatMessage.body;
+    this.sentByUser = sentByUser;
   }
 }

src/View/ChatPages/messagePage.css

@@ -14,9 +14,8 @@
 
 /* composer */
 #message-page #composer {
-  border-top: 1px solid var(--border);
-
   display: flex;
+  justify-content: center;
 }
 
 #message-page #composer input {
@@ -28,12 +27,88 @@
   flex: 1;
 }
 
+@media (max-width: 700px) {
+  #message-page #composer {
+    border-top: 1px solid var(--border);
+  }
+
+  #message-page #composer div {
+    width: 100%;
+    max-width: unset;
+
+    display: flex;
+  }
+}
+
+@media (min-width: 700px) {
+  #message-page #composer .content-width-constraint,
+  #message-page #composer .input-width-constraint {
+    display: flex;
+    justify-content: flex-end;
+
+    width: 100%;
+    max-width: var(--max-content-width);
+  }
+
+  #message-page #composer .content-width-constraint {
+    max-width: var(--max-content-width);
+  }
+
+  #message-page #composer .input-width-constraint {
+    max-width: var(--max-input-width);
+  }
+}
+
+/* message */
 #message-page #message-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   padding: var(--content-padding);
   gap: var(--gap-between-tiles);
 
+  height: auto;
+  max-height: unset;
+
   scroll-behavior: smooth;
 }
+
+.message-bubble {
+  display: flex;
+  width: 100%;
+  max-width: var(--max-content-width);
+}
+
+.message-bubble > div {
+  display: flex;
+  flex-direction: column;
+
+  background-color: var(--surface);
+  padding: var(--control-padding);
+
+  width: 100%;
+  max-width: var(--max-input-width);
+}
+
+.message-bubble .timestamp,
+.message-bubble .sender-name {
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+.message-bubble .sender-name {
+  font-weight: bold;
+}
+
+.message-bubble[sentbyuser] {
+  justify-content: flex-end;
+}
+
+.message-bubble[sentbyuser] {
+  align-items: flex-end;
+}
+
+.message-bubble[sentbyuser] span {
+  text-align: right;
+}

src/View/ChatPages/messagePage.tsx

@@ -30,7 +30,7 @@ export function MessagePage(chatViewModel: ChatViewModel) {
     scrollDown();
   }
   chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
-  setTimeout(() => scrollDown(), 100)
+  setTimeout(() => scrollDown(), 100);
 
   return (
     <div id="message-page">
@@ -40,10 +40,14 @@ export function MessagePage(chatViewModel: ChatViewModel) {
       <div class="content">
         {messageContainer}
         <div id="composer">
+          <div class="content-width-constraint">
+            <div class="input-width-constraint">
               <input
                 bind:value={chatViewModel.composingMessage}
                 on:enter={chatViewModel.sendMessage}
-            placeholder={translations.chatPage.message.composerInputPlaceholder}
+                placeholder={
+                  translations.chatPage.message.composerInputPlaceholder
+                }
               ></input>
               <button
                 class="primary"
@@ -58,5 +62,7 @@ export function MessagePage(chatViewModel: ChatViewModel) {
             </div>
           </div>
         </div>
+      </div>
+    </div>
   );
 }

src/View/Components/chatMessage.tsx

@@ -4,11 +4,17 @@ import ChatMessageViewModel from "../../Model/chatMessageViewModel";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
   return (
-    <div class="tile flex-no">
+    <div
+      class="message-bubble"
+      toggle:sentbyuser={chatMessageViewModel.sentByUser}
+    >
       <div>
-        <span>{chatMessageViewModel.sender}</span>
-        <b subscribe:innerText={chatMessageViewModel.body}></b>
-        <span>{chatMessageViewModel.dateSent}</span>
+        <span class="sender-name">{chatMessageViewModel.sender}</span>
+        <span
+          class="body"
+          subscribe:innerText={chatMessageViewModel.body}
+        ></span>
+        <span class="timestamp">{chatMessageViewModel.dateSent}</span>
       </div>
     </div>
   );

src/ViewModel/chatViewModel.ts

@@ -6,6 +6,7 @@ import StorageModel, { storageKeys } from "../Model/storageModel";
 import ChatListViewModel from "./chatListViewModel";
 import ChatMessageViewModel from "../Model/chatMessageViewModel";
 import { Color } from "./colors";
+import SettingsModel from "../Model/settingsModel";
 import SettingsViewModel from "./settingsViewModel";
 import { localeCompare } from "../Model/Utility/utility";
 
@@ -37,7 +38,8 @@ export default class ChatViewModel {
     ChatPageType.Messages
   );
 
-  chatMessageViewModels: React.ListState<ChatMessageViewModel> = new React.ListState();
+  chatMessageViewModels: React.ListState<ChatMessageViewModel> =
+    new React.ListState();
   composingMessage: React.State<string> = new React.State("");
 
   // guards
@@ -70,7 +72,11 @@ export default class ChatViewModel {
 
   // add
   addChatMessage = (chatMessage: ChatMessage): void => {
-    const chatMessageModel = new ChatMessageViewModel(this.chatModel, chatMessage);
+    const chatMessageModel = new ChatMessageViewModel(
+      this.chatModel,
+      chatMessage,
+      chatMessage.sender == this.settingsViewModel.username.value
+    );
     this.chatMessageViewModels.add(chatMessageModel);
   };