add MessageInfoModal

src/View/ChatPages/messagePage.css

@@ -30,7 +30,6 @@
 }
 
 @media (max-width: 700px) {
-
   #message-page #composer div {
     width: 100%;
     max-width: unset;
@@ -79,29 +78,57 @@
   max-width: var(--max-content-width);
 }
 
-.message-bubble > div {
+.message-bubble .main {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
   background-color: var(--surface);
-  padding: var(--control-padding);
 
   width: 100%;
   max-width: var(--max-input-width);
+  overflow: hidden;
 }
 
-.message-bubble .timestamp,
-.message-bubble .sender-name {
+.message-bubble .main .text-container {
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+
+  width: 100%;
+  flex: 1;
+}
+
+.message-bubble .main .button-container {
+  display: flex;
+  align-items: start;
+}
+
+.message-bubble .main button {
+  justify-content: center;
+
+  padding: 0px;
+  width: var(--control-height);
+
+  --surface: transparent;
+}
+
+.message-bubble .main .text-container {
+  padding: var(--control-padding);
+}
+
+.message-bubble .main .timestamp,
+.message-bubble .main .sender-name {
   font-size: 0.8rem;
   opacity: 0.6;
 }
 
-.message-bubble .sender-name {
+.message-bubble .main .sender-name {
   font-weight: bold;
 }
 
-.message-bubble .body {
-  word-break: break-all;
+.message-bubble .main .body {
+  word-break: break-word;
 }
 
 .message-bubble[sentbyuser] {
@@ -112,6 +139,10 @@
   align-items: flex-end;
 }
 
-.message-bubble[sentbyuser] span {
+.message-bubble[sentbyuser] .main {
+  flex-direction: row-reverse;
+}
+
+.message-bubble[sentbyuser] .main span {
   text-align: right;
 }

src/View/Components/chatMessage.tsx

@@ -1,21 +1,46 @@
 import * as React from "bloatless-react";
 
+import { ChatMessageInfoModal } from "./chatMessageInfoModal";
 import ChatMessageViewModel from "../../Model/chatMessageViewModel";
+import { translations } from "../translations";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
+  const isInfoModalOpen = new React.State(false);
+  function openModal() {
+    isInfoModalOpen.value = true;
+  }
+
   return (
     <div
       class="message-bubble"
       toggle:sentbyuser={chatMessageViewModel.sentByUser}
     >
-      <div>
-        <span class="sender-name ellipsis">{chatMessageViewModel.sender}</span>
-        <span
-          class="body"
-          subscribe:innerText={chatMessageViewModel.body}
-        ></span>
-        <span class="timestamp ellipsis">{chatMessageViewModel.dateSent}</span>
+      <div class="main">
+        <div class="text-container">
+          <span class="sender-name ellipsis">
+            {chatMessageViewModel.sender}
+          </span>
+          <span
+            class="body"
+            subscribe:innerText={chatMessageViewModel.body}
+          ></span>
+          <span class="timestamp ellipsis">
+            {chatMessageViewModel.dateSent}
+          </span>
+        </div>
+        <div class="button-container">
+          <button
+            on:click={openModal}
+            aria-label={
+              translations.chatPage.message.showMessageInfoButtonAudioLabel
+            }
+          >
+            <span class="icon">info</span>
+          </button>
+        </div>
       </div>
+
+      {ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)}
     </div>
   );
 }

src/View/Components/chatMessageInfoModal.tsx

@@ -0,0 +1,84 @@
+import * as React from "bloatless-react";
+
+import ChatMessageViewModel from "../../Model/chatMessageViewModel";
+import { translations } from "../translations";
+
+export function ChatMessageInfoModal(
+  chatMessageViewModel: ChatMessageViewModel,
+  isOpen: React.State<boolean>
+) {
+  function closeModal() {
+    isOpen.value = false;
+  }
+
+  return (
+    <div class="modal" toggle:open={isOpen}>
+      <div>
+        <main>
+          <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
+
+          <div class="flex-column gap">
+            <div class="tile">
+              <span class="icon">account_circle</span>
+              <div>
+                <span>{translations.chatPage.message.sentBy}</span>
+                <b class="break-word">{chatMessageViewModel.sender}</b>
+              </div>
+            </div>
+
+            <div class="tile">
+              <span class="icon">schedule</span>
+              <div>
+                <span>{translations.chatPage.message.timeSent}</span>
+                <b class="break-word">{chatMessageViewModel.dateSent}</b>
+              </div>
+            </div>
+
+            <div class="tile">
+              <span class="icon">forum</span>
+              <div>
+                <span>{translations.chatPage.message.channel}</span>
+                <b class="break-word">{chatMessageViewModel.channel}</b>
+              </div>
+            </div>
+
+            <div class="tile">
+              <span class="icon">description</span>
+              <div>
+                <span>{translations.chatPage.message.messageContent}</span>
+                <b
+                  class="break-word"
+                  subscribe:innerText={chatMessageViewModel.body}
+                ></b>
+              </div>
+            </div>
+          </div>
+
+          <hr></hr>
+
+          <div class="flex-column gap">
+            <button on:click={chatMessageViewModel.copyMessage}>
+              {translations.chatPage.message.copyMessageButton}
+              <span class="icon">content_copy</span>
+            </button>
+            <button on:click={chatMessageViewModel.resendMessage}>
+              {translations.chatPage.message.resendMessageButton}
+              <span class="icon">redo</span>
+            </button>
+            <button on:click={chatMessageViewModel.decryptMessage}>
+              {translations.chatPage.message.decryptMessageButton}
+              <span class="icon">key</span>
+            </button>
+          </div>
+        </main>
+        <button
+          on:click={closeModal}
+          aria-label={translations.general.closeButton}
+        >
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/Modals/connectionModal.tsx

@@ -53,7 +53,7 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
           ></div>
         </main>
         <button on:click={connectionViewModel.hideConnectionModal}>
-          {translations.general.closeButtonAudioLabel}
+          {translations.general.closeButton}
           <span class="icon">close</span>
         </button>
       </div>

src/View/translations.ts

@@ -1,6 +1,6 @@
 const englishTranslations = {
   general: {
-    closeButtonAudioLabel: "Close",
+    closeButton: "Close",
     deleteItemButtonAudioLabel: "delete item",
 
     setButton: "Set",
@@ -102,6 +102,19 @@ const englishTranslations = {
     message: {
       composerInputPlaceholder: "Type a message...",
       sendMessageButtonAudioLabel: "send message",
+
+      showMessageInfoButtonAudioLabel: "show message info",
+      messageInfoHeadline: "Message Info",
+
+      sentBy: "Sent by",
+      timeSent: "Time sent",
+      channel: "Channel",
+      messageContent: "Message content",
+
+      copyMessageButton: "Copy message",
+      resendMessageButton: "Resend message",
+      decryptMessageButton: "Decrypt message",
+      deleteMessageButton: "Delete message",
     }
   },
 };