diff --git a/dist/index.js b/dist/index.js index 48978348..c77f7628 100644 --- a/dist/index.js +++ b/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( diff --git a/dist/styles.css b/dist/styles.css index 4020198e..6c6bfc5c 100644 --- a/dist/styles.css +++ b/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; diff --git a/src/Views/threadView.tsx b/src/Views/threadView.tsx index 2a714b7a..4e64a590 100644 --- a/src/Views/threadView.tsx +++ b/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) => { + 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.sender}@{message.channel} - + +
-
- {message.body} +
+ {new Date(message.isoDate).toLocaleString()} diff --git a/src/model.ts b/src/model.ts index 9bb29ffe..70f18130 100644 --- a/src/model.ts +++ b/src/model.ts @@ -147,6 +147,11 @@ export function deleteMessage(message: Message): void { messages.remove(message); } +export async function decryptReceivedMessage(message: Message): Promise { + message.body = await decryptMessage(message.body); + messages.callSubscriptions(); +} + export function setChannel(): void { if (cannotSetChannel.value == true) return; diff --git a/src/translations.ts b/src/translations.ts index a8c68469..8cbb0260 100644 --- a/src/translations.ts +++ b/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", };