add buttons to message tiles

dist/index.js

@@ -382,6 +382,7 @@
     clearHistory: "Clear history",
     encryptionUnavailableTitle: "Encryption is not available",
     encryptionUnavailableMessage: "Obtain this app via HTTPS or continue without encryption",
+    decryptMessage: "Decrypt message",
     copyMessage: "Copy message",
     deleteMessage: "Delete message"
   };
@@ -544,6 +545,10 @@
   function deleteMessage(message) {
     messages.remove(message);
   }
+  async function decryptReceivedMessage(message) {
+    message.body = await decryptMessage(message.body);
+    messages.callSubscriptions();
+  }
   function setChannel() {
     if (cannotSetChannel.value == true) return;
     if (currentPrimaryChannel != void 0) {
@@ -649,13 +654,17 @@
 
   // src/Views/threadView.tsx
   var messageConverter = (message) => {
+    const messageBody2 = createProxyState([messages], () => message.body);
     function copyMessage() {
       navigator.clipboard.writeText(message.body);
     }
+    function decrypt2() {
+      decryptReceivedMessage(message);
+    }
     function remove() {
       deleteMessage(message);
     }
-    return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h" }, message.sender, "@", message.channel), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "aria-label": translation.copyMessage, "on:click": copyMessage }, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding" }, /* @__PURE__ */ createElement("b", null, message.body), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
+    return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center secondary" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, message.sender, "@", message.channel), /* @__PURE__ */ createElement("span", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.copyMessage, "on:click": copyMessage }, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "aria-label": translation.decryptMessage, "on:click": decrypt2 }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key")), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { "subscribe:innerText": messageBody2 }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
   };
   function ThreadView() {
     return /* @__PURE__ */ createElement(

dist/styles.css

@@ -734,6 +734,10 @@ header button {
   height: var(--header-height);
 }
 
+.ellipsis {
+  max-width: 100%;
+}
+
 article {
   min-width: 100%;
 }
@@ -928,7 +932,8 @@ menu {
 
 article,
 body,
-main {
+main,
+.ellipsis {
   overflow: hidden;
 }
 
@@ -940,10 +945,19 @@ main {
   overflow-x: scroll;
 }
 
-.tile {
+.ellipsis {
+  text-overflow: ellipsis;
+}
+
+.tile,
+.break-all {
   word-break: break-all;
 }
 
+.ellipsis {
+  white-space: nowrap;
+}
+
 /* scrolling */
 main {
   scrollbar-width: none;

src/Views/threadView.tsx

@@ -1,14 +1,25 @@
 import * as React from "bloatless-react";
 
-import { Message, deleteMessage, messages } from "../model";
+import {
+  Message,
+  decryptReceivedMessage,
+  deleteMessage,
+  messages,
+} from "../model";
 
 import { translation } from "../translations";
 
 const messageConverter: React.ListItemConverter<Message> = (message) => {
+  const messageBody = React.createProxyState([messages], () => message.body);
+
   function copyMessage() {
     navigator.clipboard.writeText(message.body);
   }
 
+  function decrypt() {
+    decryptReceivedMessage(message);
+  }
+
   function remove() {
     deleteMessage(message);
   }
@@ -17,20 +28,23 @@ const messageConverter: React.ListItemConverter<Message> = (message) => {
     <div class="tile width-100 flex-no padding-0">
       <div class="flex-column">
         <div class="flex-row justify-apart align-center secondary">
-          <span class="padding-h">
+          <span class="padding-h ellipsis">
             {message.sender}@{message.channel}
           </span>
-          <span>
+          <span class="flex-row">
             <button aria-label={translation.copyMessage} on:click={copyMessage}>
               <span class="icon">content_copy</span>
             </button>
+            <button aria-label={translation.decryptMessage} on:click={decrypt}>
+              <span class="icon">key</span>
+            </button>
             <button aria-label={translation.deleteMessage} on:click={remove}>
               <span class="icon">delete</span>
             </button>
           </span>
         </div>
-        <div class="flex-column padding">
-          <b>{message.body}</b>
+        <div class="flex-column padding-h padding-bottom">
+          <b subscribe:innerText={messageBody}></b>
           <span class="secondary">
             {new Date(message.isoDate).toLocaleString()}
           </span>

src/model.ts

@@ -147,6 +147,11 @@ export function deleteMessage(message: Message): void {
   messages.remove(message);
 }
 
+export async function decryptReceivedMessage(message: Message): Promise<void> {
+  message.body = await decryptMessage(message.body);
+  messages.callSubscriptions();
+}
+
 export function setChannel(): void {
   if (cannotSetChannel.value == true) return;
 

src/translations.ts

@@ -33,6 +33,8 @@ const englishTranslations = {
   encryptionUnavailableTitle: "Encryption is not available",
   encryptionUnavailableMessage:
     "Obtain this app via HTTPS or continue without encryption",
+
+  decryptMessage: "Decrypt message",
   copyMessage: "Copy message",
   deleteMessage: "Delete message",
 };