show unread mail count in topbar

[browser-rts.git] / src / render / mail.ts

diff --git a/src/render/mail.ts b/src/render/mail.ts
index a0b3b753c4e05b3bfa497660ff3a570e37134207..0048b59db83fcdda28cd54f90947dd2dc2451984 100644 (file)
--- a/src/render/mail.ts
+++ b/src/render/mail.ts
@@ -1,15 +1,16 @@
 import { DateTime } from "luxon";
 import { MessageWithNames } from "../repository/mail";
 
-export function renderMailroom(mail: MessageWithNames[]): string {
+export function renderMailroom(mail: MessageWithNames[], msg?: MessageWithNames): string {
     return `
-    <div hx-trigger="every 600s" hx-get="/poll/mailroom">
+    <div hx-trigger="every 600s" hx-get="/poll/mailroom" hx-swap-oob="true" id="main">
     <h2 data-augmented-ui="tl-clip bl-clip none">Mail</h2>
     <table>
     <tr>
         <th>From</th>
         <th>Subject</th>
         <th>Sent At</th>
+        <th>Read At</th>
     </tr>
     ${mail.map(msg => {
         return `
@@ -21,11 +22,12 @@ export function renderMailroom(mail: MessageWithNames[]): string {
             </a>
             </td>
             <td>${DateTime.fromMillis(msg.sent_at)}</td>
+            <td>${msg.read_at === 0 ? 'Unread' : DateTime.fromMillis(msg.read_at)}</td>
         </tr>
         `;
     }).join("\n")}
     </table>
-    <div id="individual-message"></div>
+    <div id="individual-message">${msg ? renderMessage(msg) : ''}</div>
     </div>
     `;
 }