mattrguerra.comHouston area
Matt Guerra
  1. 01AI & Automation
  2. 02Photography
  3. 03Design
  4. 04About
  5. 05Notes
  6. 06Contact
Back to the systems

mattrguerra/meridian-ops-boardmainPrivate on GitHub, published here in full

inbox-view.ts

TypeScript86.1 KB1831 lines

apps/dashboard/src/inbox-view.ts

  1. /**
  2. * The consolidated inbox, rendered: Gmail-shaped, Meridian-skinned.
  3. *
  4. * Gmail's anatomy (sender, subject-with-preview on one line, unread bold, a
  5. * mailbox rail on the left, a time column on the right) with the board's
  6. * identity: light, Inter, the four-color rule. Not Gmail's chrome.
  7. *
  8. * It is not in surfaces.ts with the other surfaces because they are
  9. * pre-rendered into KV by the cron from one snapshot, while this one renders
  10. * at request time from its own KV keys, so the filter buttons and the mailbox
  11. * rail take effect on the click. The cost is that the board is no longer one
  12. * self-contained file.
  13. *
  14. * Runtime-neutral: no node:fs, because the Worker imports this (rule 7).
  15. */
  17. import { esc, join, map, plural } from './html.js'
  18. import { MERIDIAN_TZ, localDay, localStamp } from '@meridian/ninety-client'
  19. import {
  20. ATTACHMENT_LIMITS,
  21. RECIPIENT_CAP,
  22. isOperational,
  23. matchesFilter,
  24. type Mailbox,
  25. } from '../../../config/inbox.js'
  26. import {
  27. ATTACHMENT_DOWNLOAD_CAP,
  28. BODY_CAP,
  29. HTML_CAP,
  30. type Attachment,
  31. type InboxMessage,
  32. type MailboxRead,
  33. type MessageBody,
  34. } from '@meridian/gmail-client'
  36. export interface InboxData {
  37. syncedAt: string | null
  38. mailboxes: MailboxRead[]
  39. }
  41. export interface SenderGroup {
  42. sender: string
  43. senderName: string
  44. count: number
  45. newest: string
  46. mailboxes: string[]
  47. messages: InboxMessage[]
  48. }
  50. /**
  51. * Group by sender. Used by the marketing bucket, where the action (un-filter)
  52. * is per-sender, and by the POST handler's validation.
  53. */
  54. export function groupBySender(messages: InboxMessage[]): SenderGroup[] {
  55. const by = new Map<string, SenderGroup>()
  56. for (const m of messages) {
  57. const g = by.get(m.sender)
  58. if (g) {
  59. g.count++
  60. g.messages.push(m)
  61. if (m.date > g.newest) g.newest = m.date
  62. if (!g.mailboxes.includes(m.mailbox)) g.mailboxes.push(m.mailbox)
  63. if (!g.senderName && m.senderName) g.senderName = m.senderName
  64. } else {
  65. by.set(m.sender, {
  66. sender: m.sender,
  67. senderName: m.senderName,
  68. count: 1,
  69. newest: m.date,
  70. mailboxes: [m.mailbox],
  71. messages: [m],
  72. })
  73. }
  74. }
  75. return [...by.values()].sort((a, b) => (a.newest < b.newest ? 1 : a.newest > b.newest ? -1 : 0))
  76. }
  78. /**
  79. * Gmail's time column: clock time today, month-day for anything older.
  80. * Both in Meridian's timezone; the reader is in Chicago, not UTC.
  81. */
  82. export function rowTime(iso: string, now: Date = new Date()): string {
  83. const t = Date.parse(iso)
  84. if (!Number.isFinite(t) || t <= 0) return '–'
  85. if (localDay(new Date(t)) === localDay(now)) {
  86. return new Intl.DateTimeFormat('en-US', { timeZone: MERIDIAN_TZ, hour: 'numeric', minute: '2-digit' }).format(new Date(t))
  87. }
  88. return new Intl.DateTimeFormat('en-US', { timeZone: MERIDIAN_TZ, month: 'short', day: 'numeric' }).format(new Date(t))
  89. }
  91. const agoText = (iso: string | null): string => {
  92. if (!iso) return 'never synced'
  93. const mins = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 60_000))
  94. return mins < 1 ? 'synced just now' : mins < 60 ? `synced ${mins} min ago` : `synced ${Math.round(mins / 60)}h ago`
  95. }
  97. /**
  98. * The inbox's own stylesheet, served with the page by the Worker shell.
  99. * Gmail's anatomy, the board's tokens. Kept beside the markup that uses it.
  100. */
  101. export const INBOX_CSS = `
  102. .inbox-layout{display:grid;grid-template-columns:232px 1fr;gap:20px;align-items:start}
  103. .inbox-rail{position:sticky;top:14px;background:var(--surface-card);border:1px solid var(--border-default);
  104. border-radius:var(--radius-md);padding:8px;display:flex;flex-direction:column;gap:2px}
  105. .inbox-rail a{
  106. display:flex;justify-content:space-between;align-items:center;gap:8px;
  107. padding:9px 12px;border-radius:var(--radius-sm);color:var(--text-body);font-size:13.5px;
  108. }
  109. .inbox-rail a:hover{background:var(--meridian-gray-050)}
  110. .inbox-rail a[aria-current="true"]{background:var(--wash);border-left:2px solid var(--strong);
  111. padding-left:10px;font-weight:600}
  112. .inbox-rail .cnt{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
  113. .inbox-rail .dead{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  114. background:var(--hatch-ink);color:var(--surface-card);padding:2px 7px;border-radius:3px}
  115. :root[data-theme="dark"] .inbox-rail .dead{color:var(--slab)}
  116. .inbox-fail{border:1px solid var(--strong);border-radius:var(--radius-sm);overflow:hidden;margin:0 0 12px}
  117. .inbox-fail .strip{height:4px;background:var(--hatch-ink)}
  118. .inbox-fail .in{padding:10px 14px;font-size:12.5px}
  119. .inbox-fail .err{font-family:var(--font-mono);font-size:11.5px;background:var(--meridian-gray-050);
  120. padding:1px 5px;border-radius:3px}
  121. .msg-section{display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px 4px;font-size:10px;
  122. font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
  123. .msg-section::after{content:"";flex:1;height:1px;background:var(--hairline)}
  124. /* The yield order is deliberate: THE SUBJECT NEVER YIELDS. It holds a 170px
  125. floor; the mailbox chip collapses first (min-width:0), then the sender
  126. shrinks toward 96px. The action column is FIXED so it stops competing: a
  127. plain 1fr+auto pair collapses the subject to zero between ~720 and 1050px,
  128. which is inside the supported desktop range. */
  129. .msg-row{display:grid;grid-template-columns:2px 10px minmax(96px,168px) minmax(170px,1fr) 104px minmax(0,116px) 58px;
  130. column-gap:11px;padding:10px 18px 10px 0;align-items:center;
  131. border-bottom:1px solid var(--hairline);background:var(--surface-card2);position:relative}
  132. .msg-row .edge{align-self:stretch}
  133. .msg-row.unread{background:var(--surface-card)}
  134. .msg-row.unread .edge{background:var(--hue-ours)}
  135. .msg-row:hover{background:var(--hover-row)}
  136. .msg-row .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--border-default)}
  137. .msg-row.unread .dot{background:var(--hue-ours);border-color:var(--hue-ours)}
  138. .msg-from{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  139. .msg-subj{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  140. .msg-subj .snip{color:var(--text-muted);font-weight:400}
  141. .msg-row.unread .msg-from,.msg-row.unread .msg-subj{font-weight:600;color:var(--text-body)}
  142. .msg-link{position:absolute;inset:0;z-index:1}
  143. .msg-box{font-size:10.5px;padding:2px 8px;border:1px solid var(--border-default);border-radius:3px;
  144. color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  145. background:var(--surface-card)}
  146. .msg-time{font-size:12px;color:var(--text-muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
  147. .msg-act{position:relative;z-index:2;visibility:hidden;width:104px;
  148. display:flex;flex-direction:column;gap:4px;align-items:stretch}
  149. .msg-act form{margin:0}
  150. .msg-act button{width:100%}
  151. .msg-row:hover .msg-act,.msg-row:focus-within .msg-act{visibility:visible}
  152. .msg-act button{cursor:pointer;font-size:11px;padding:3px 9px;border:1px solid var(--border-default);
  153. border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body)}
  154. .msg-act button:hover{border-color:var(--hue-waiting);color:var(--hue-waiting)}
  155. /* Email HTML is designed for a white page; the frame stays white in both themes,
  156. like Gmail's own message pane, rather than inverting a sender's colors. */
  157. .mail-frame{width:100%;border:1px solid var(--border-default);border-radius:4px;
  158. background:#fff;min-height:240px;display:block}
  159. /* The open-message action bar, above the body, so the two things a reader does
  160. (leave, mark handled) never require scrolling to the end of a long email. */
  161. .msg-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;
  162. flex-wrap:wrap;padding:12px 28px;border-bottom:1px solid var(--border-default)}
  163. .msg-actions form{margin:0}
  164. .msg-btn{display:inline-block;cursor:pointer;font:600 12px/1 var(--font-body,inherit);
  165. padding:8px 14px;border:1px solid var(--border-default);border-radius:4px;
  166. background:var(--surface-card);color:var(--text-body);text-decoration:none}
  167. .msg-btn:hover{border-color:var(--hue-waiting);color:var(--hue-waiting)}
  168. /* Inside a row the same form renders at row scale; .msg-act's rules win on
  169. size, this puts the weight back so both row buttons match. */
  170. .msg-act .msg-btn{font-weight:400}
  171. .msg-act .op{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  172. border:1px solid var(--strong);color:var(--text-body);padding:2px 7px;border-radius:3px}
  173. .inbox-live{display:flex;gap:8px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
  174. .inbox-live .inbox-search{margin:0;flex:1 1 320px}
  175. .inbox-search{margin:0 0 10px;width:100%;max-width:420px;padding:8px 14px;font:inherit;font-size:13px;
  176. border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);
  177. color:var(--text-body)}
  178. /* The filtered bucket is an ink drawer: present, quiet, unmistakably elsewhere. */
  179. .inbox-drawer{background:var(--slab);color:var(--on-slab-dim)}
  180. .inbox-drawer summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--on-slab);padding:12px 16px}
  181. .inbox-drawer .row{border-bottom:1px solid var(--slab-line)}
  182. .inbox-drawer .addr{font-family:var(--font-mono);font-size:11px;color:var(--on-slab-dim)}
  183. .inbox-drawer b{color:var(--on-slab)}
  184. .inbox-drawer button{cursor:pointer;font-size:11px;padding:3px 10px;border:1px solid var(--on-slab-dim);
  185. border-radius:var(--radius-sm);background:transparent;color:var(--on-slab)}
  186. .inbox-drawer button:hover{background:var(--slab-line)}
  187. /* THE SEARCH BOX FILTERED NOTHING FOR THREE DAYS, and this rule is why it does
  188. now. SEARCH_SCRIPT hides a row by setting its hidden property, which relies on
  189. the user-agent stylesheet's [hidden] rule, and a UA rule loses to ANY author
  190. rule, whatever the specificity. .msg-row is display:grid two dozen lines up,
  191. so every "hidden" row stayed on screen. Typing in the box did visibly nothing.
  192. theme.ts has a .surface[hidden] rule but it is scoped to .surface and does not
  193. reach here. If you give a filtered element a display of its own, add it to
  194. this selector or you will reintroduce the bug.
  195. (No backticks in this comment on purpose: INBOX_CSS is a template literal and
  196. one backtick here would end the stylesheet mid-file.) */
  197. .msg-row[hidden],.msg-sect[hidden],.msg-none[hidden]{display:none}
  198. .msg-none{padding:20px 16px;font-size:13px;color:var(--text-muted)}
  199. /* REPLY, COMPOSE AND SIGNATURES (2026-09-04). */
  200. /* The replied chip. Board-owned and PERSISTENT: it is not derived from the
  201. 15-minute sync and is not cleared by marking read, because "somebody already
  202. answered this" is the fact a shared mailbox most needs to keep. */
  203. .msg-replied{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.1em;
  204. text-transform:uppercase;border:1px solid var(--hue-done,var(--strong));color:var(--hue-done,var(--text-body));
  205. padding:2px 7px;border-radius:3px;white-space:nowrap}
  206. .compose-dialog{border:1px solid var(--border-default);border-radius:var(--radius-md);
  207. background:var(--surface-card);color:var(--text-body);padding:0;width:min(640px,92vw);max-height:88vh;
  208. overflow:auto}
  209. .compose-dialog::backdrop{background:rgba(0,0,0,.45)}
  210. .compose-dialog .in{padding:20px 24px 22px}
  211. .compose-head{font-family:var(--font-display);font-size:19px;margin:0 0 4px}
  212. .from-list{display:flex;flex-direction:column;gap:2px;margin:8px 0 4px;
  213. border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:6px}
  214. .from-list label{display:flex;gap:9px;align-items:flex-start;padding:6px 8px;border-radius:var(--radius-sm);
  215. font-size:13px;line-height:1.45}
  216. .from-list label:hover{background:var(--meridian-gray-050)}
  217. .from-list input[disabled]+span{color:var(--text-muted)}
  218. .from-list .why{display:block;font-size:11.5px;color:var(--text-muted)}
  219. .from-list .ro{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  220. border:1px solid var(--border-default);color:var(--text-muted);padding:1px 6px;border-radius:3px;margin-left:6px}
  221. .compose-body{width:100%;min-height:170px;padding:10px 12px;font:14px/1.6 var(--font-body,system-ui);
  222. border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);
  223. color:var(--text-body);resize:vertical}
  224. .compose-meta{font-size:12px;color:var(--text-muted);line-height:1.65;margin:10px 0 0}
  225. .compose-meta b{color:var(--text-body)}
  226. /* THE CAVEATS ARE NOT META. Sam, 2026-09-08: bright and much larger, so that
  227. anyone sending from a shared mailbox sees what this board does not carry:
  228. the Cc, and attachments. It kept the muted 12px of the metadata beside it,
  229. which is the size the page uses for things nobody has to read. Overrides
  230. .compose-meta by order, so it must stay AFTER it. */
  231. .compose-caveats{font-size:17px;font-weight:600;color:var(--caveat);line-height:1.5;
  232. margin:14px 0 0;padding:12px 14px;border:2px solid var(--caveat);border-radius:var(--radius-sm)}
  233. .compose-caveats b{color:var(--caveat)}
  234. .compose-actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
  235. .compose-field{width:100%;padding:8px 10px;font:13.5px/1.5 var(--font-body,system-ui);
  236. border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);
  237. color:var(--text-body);margin:2px 0 0}
  238. .compose-file{font-size:12.5px;margin:4px 0 0;color:var(--text-body)}
  239. /* The attachment list on a message, and the same shape on the confirmation
  240. page. A row, not a chip: a name alone was all the old surface could show,
  241. and a size is half of what tells a reader whether to open it here. */
  242. .att-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:4px 0;font-size:12.5px}
  243. .att-row .n{font-weight:600;color:var(--text-body);word-break:break-all}
  244. .att-row .s{color:var(--text-muted);font-variant-numeric:tabular-nums}
  245. .att-row .why{color:var(--text-muted)}
  246. /* .err is defined inside .inbox-fail; the compose surfaces show verbatim
  247. errors too and must not lose the monospace that marks them as machine text. */
  248. .compose-meta .err,.from-list .err,.sent-detail .err{font-family:var(--font-mono);font-size:11.5px;
  249. background:var(--meridian-gray-050);padding:1px 5px;border-radius:3px}
  250. .sig-frame{width:100%;height:150px;border:1px solid var(--border-default);border-radius:4px;background:#fff;display:block}
  251. .sig-card{border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 12px}
  252. .sig-card h3{font-size:14px;margin:0 0 2px}
  253. .sent-row{display:grid;grid-template-columns:120px 1fr 96px;gap:12px;padding:10px 0;
  254. border-bottom:1px solid var(--hairline);font-size:13px;align-items:baseline}
  255. .sent-row .st{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  256. .sent-row .st.sent{color:var(--hue-done,var(--text-body))}
  257. .sent-row .st.failed{color:var(--hue-ours,var(--strong))}
  258. .sent-row .st.sending{color:var(--text-muted)}
  259. @media (max-width:720px){
  260. .sent-row{grid-template-columns:1fr}
  261. .inbox-layout{grid-template-columns:1fr}
  262. .inbox-rail{position:static;flex-direction:row;overflow-x:auto;padding:6px}
  263. .inbox-rail a{white-space:nowrap;border:1px solid var(--border-default)}
  264. .inbox-rail a[aria-current="true"]{border-color:var(--strong)}
  265. /* Two-line rows, every cell placed explicitly; auto-placement once put the
  266. filter button on top of the subject. */
  267. .msg-row{grid-template-columns:2px 10px minmax(0,1fr) auto;grid-template-rows:auto auto auto;row-gap:2px}
  268. .msg-row .edge{grid-row:1 / span 3}
  269. .msg-row .dot{grid-column:2;grid-row:1}
  270. .msg-from{grid-column:3;grid-row:1}
  271. .msg-time{grid-column:4;grid-row:1}
  272. .msg-subj{grid-column:3 / span 2;grid-row:2}
  273. .msg-box{display:none}
  274. .msg-act{grid-column:3 / span 2;grid-row:3;visibility:visible;justify-self:start;width:auto}
  275. .msg-act button{min-height:32px}
  276. }
  277. `
  279. /**
  280. * Enables the search box only when scripting is available; hidden otherwise.
  281. *
  282. * It does three things, and the second and third exist because doing only the
  283. * first would leave the page lying. A section header carries a count rendered on
  284. * the server (`Unread · 12`); filtering the rows underneath it without
  285. * recounting leaves a number that no longer describes the list beneath it, which
  286. * is the failure rule 9 is about. And a query that matches nothing has
  287. * to say so, otherwise it is indistinguishable from an empty inbox.
  288. */
  289. const SEARCH_SCRIPT = `<script>(function(){
  290. var i=document.getElementById('inbox-search');if(!i)return;
  291. i.parentElement.hidden=false;
  292. var rows=[].slice.call(document.querySelectorAll('.msg-row[data-search]'));
  293. var sects=[].slice.call(document.querySelectorAll('.msg-sect'));
  294. var none=document.getElementById('msg-none');
  295. i.addEventListener('input',function(){
  296. var q=i.value.trim().toLowerCase(),shown=0;
  297. rows.forEach(function(r){
  298. var hit=!q||r.getAttribute('data-search').indexOf(q)>=0;
  299. r.hidden=!hit;
  300. if(hit)shown++;
  301. });
  302. sects.forEach(function(s){
  303. var n=s.querySelectorAll('.msg-row:not([hidden])').length;
  304. var c=s.querySelector('.msg-count');
  305. if(c)c.textContent=String(n);
  306. s.hidden=n===0;
  307. });
  308. if(none)none.hidden=!(q&&shown===0);
  309. });
  310. })();</script>`
  312. /** The board's read-state key for one message. Matches the Worker's KV map. */
  313. export const readKey = (m: { mailbox: string; id: string }): string => `${m.mailbox}/${m.id}`
  315. /**
  316. * Mark read / mark unread: the board's memory, never Gmail's. The tokens stay
  317. * read-only, so this writes the board's own `inbox:read` KV key (rule 12's
  318. * bar: board-owned, falls back to Gmail's real unread state if the key is
  319. * lost, reversible from this button).
  320. * A message read in Gmail itself gets no button; there is no board state to
  321. * flip, and pretending to unmark Gmail's state would be a lie.
  322. */
  323. function markForm(m: { mailbox: string; id: string }, op: 'read' | 'unread', selected: string | null): string {
  324. return `<form method="post" action="/inbox/read">
  325. <input type="hidden" name="mailbox" value="${esc(m.mailbox)}">
  326. <input type="hidden" name="id" value="${esc(m.id)}">
  327. <input type="hidden" name="op" value="${op}">
  328. ${selected ? `<input type="hidden" name="back" value="${esc(selected)}">` : ''}
  329. <button class="msg-btn" type="submit" title="${op === 'read' ? 'Mark read on this board. Gmail still shows it unread' : 'Put it back in Unread on this board'}">${op === 'read' ? 'Mark read' : 'Mark unread'}</button>
  330. </form>`
  331. }
  333. function messageRow(
  334. m: InboxMessage,
  335. label: (e: string) => string,
  336. selected: string | null,
  337. boardRead: boolean,
  338. replied: boolean,
  339. ): string {
  340. const openHref = `/inbox/message?mailbox=${encodeURIComponent(m.mailbox)}&id=${encodeURIComponent(m.id)}`
  341. const haystack = `${m.senderName} ${m.sender} ${m.subject} ${m.snippet}`.toLowerCase()
  342. const displayUnread = m.unread && !boardRead
  343. return `<div class="msg-row${displayUnread ? ' unread' : ''}" data-search="${esc(haystack)}">
  344. <span class="edge" aria-hidden="true"></span>
  345. <span class="dot" aria-hidden="true"></span>
  346. <span class="msg-from">${esc(m.senderName || m.sender)}</span>
  347. <span class="msg-subj">${
  348. // The chip rides inside the subject cell rather than taking a grid column
  349. // of its own: this row's columns are tuned so the subject never yields,
  350. // and an eighth child would undo that.
  351. replied ? '<span class="msg-replied">replied</span> ' : ''
  352. }${esc(m.subject || '(no subject)')}${
  353. m.snippet ? ` <span class="snip">· ${esc(m.snippet)}</span>` : ''
  354. }</span>
  355. <span class="msg-box">${esc(label(m.mailbox))}</span>
  356. <span class="msg-time">${esc(rowTime(m.date))}</span>
  357. <a class="msg-link" href="${esc(openHref)}" aria-label="Open: ${esc(m.subject || '(no subject)')} from ${esc(m.senderName || m.sender)}"></a>
  358. <span class="msg-act">${
  359. isOperational(m.sender)
  360. ? `<span class="op" title="Protected in config/inbox.ts: shipments, payments and meeting notices are never filtered">operational</span>`
  361. : `<form method="post" action="/inbox/filter">
  362. <input type="hidden" name="sender" value="${esc(m.sender)}">
  363. ${selected ? `<input type="hidden" name="mailbox" value="${esc(selected)}">` : ''}
  364. <button type="submit" title="Hide every message from ${esc(m.sender)} on this board">Filter sender</button>
  365. </form>`
  366. }${displayUnread ? markForm(m, 'read', selected) : boardRead ? markForm(m, 'unread', selected) : ''}</span>
  367. </div>`
  368. }
  370. /**
  371. * The header line for failures. A failed mailbox is named with its reason,
  372. * never folded into a total: an inbox nobody could read and an inbox with
  373. * nothing in it are not the same thing (the prime invariant, per mailbox).
  374. */
  375. function failBanner(failed: MailboxRead[]): string {
  376. if (!failed.length) return ''
  377. return `<div class="inbox-fail">
  378. <div class="strip" aria-hidden="true"></div>
  379. <div class="in">
  380. <b>${failed.length} ${plural(failed.length, 'inbox', 'inboxes')} could not be read.</b>
  381. ${map(failed, (m) => `<div style="margin-top:4px">${esc(m.mailbox)}: <span class="err">${esc(m.error ?? 'unknown')}</span></div>`)}
  382. <div style="margin-top:4px;color:var(--text-muted)">Their mail is missing from this list, not absent.</div>
  383. </div>
  384. </div>`
  385. }
  387. /**
  388. * Signatures: one per mailbox, board-owned state (rule 12).
  389. *
  390. * A missing signature and an unreadable signature store are different facts
  391. * and are rendered differently. Unlike the notes key, a malformed value here is not
  392. * swallowed into an empty map: a lost note is a missing annotation, but a
  393. * signature silently dropped changes a client-facing email that has already
  394. * gone out.
  395. */
  396. export interface Signature {
  397. html: string
  398. /** Who set it. */
  399. by: string
  400. /** ISO. */
  401. at: string
  402. }
  404. export type SignatureStore =
  405. | { ok: true; map: Record<string, Signature> }
  406. | { ok: false; error: string }
  408. /**
  409. * Big enough for any hand-written HTML signature (2-8 KB is typical), small
  410. * enough to refuse a `data:` logo, which is what actually blows past it, and
  411. * which Gmail's web client does not render in received mail anyway. The page
  412. * says: host the image, paste the URL.
  413. */
  414. export const SIGNATURE_CAP = 20_000
  416. /** One file on a sent message, as the audit row remembers it. Never bytes. */
  417. export interface SentAttachment {
  418. name: string
  419. size: number
  420. }
  422. /**
  423. * The board's record of one send attempt, success or failure.
  424. *
  425. * No message text. Subject and addresses are what an audit needs; the body is
  426. * in the sending mailbox's Sent folder, which is where a copy of a client email
  427. * belongs. Storing the text here would make the board a place someone's
  428. * outgoing mail accumulates, which is the thing readMailbox is careful not to
  429. * be either.
  430. */
  431. export interface SendRecord {
  432. nonce: string
  433. at: string
  434. by: string
  435. byEmail: string
  436. from: string
  437. to: string
  438. subject: string
  439. /**
  440. * The Cc that went out, or null for none.
  441. *
  442. * Undefined on rows written before the record had a Cc field, and that is
  443. * not the same as null: an old row does not record "no Cc", it records
  444. * nothing, and the page says "not recorded" for it. Reading `undefined` as
  445. * "no Cc" would put a claim about what left the building onto a row that
  446. * never made one.
  447. */
  448. cc?: string | null
  449. /** 'reply' or 'new'. Undefined on rows written before compose existed. */
  450. mode?: 'reply' | 'new'
  451. /**
  452. * The mailbox and id of the message being answered. Null for a new message,
  453. * which answers none. Never undefined: rows from before new messages existed
  454. * always carry a string.
  455. */
  456. originalMailbox: string | null
  457. originalId: string | null
  458. originalMessageId: string | null
  459. threadIdSent: string | null
  460. signatureApplied: boolean
  461. /** Files that went with it. Undefined on rows from before attachments; see `cc`. */
  462. attachments?: SentAttachment[]
  463. /**
  464. * The listing's stand-in for `attachments`, because KV metadata caps at
  465. * 1,024 bytes and five filenames do not reliably fit. Null means the count
  466. * was not recorded, never zero.
  467. */
  468. attachmentCount?: number | null
  469. outcome: 'sending' | 'sent' | 'failed'
  470. gmailId: string | null
  471. gmailThreadId: string | null
  472. error: string | null
  473. candidates: string[]
  474. }
  476. /**
  477. * The board's persistent replied mark.
  478. *
  479. * Keyed exactly like a read mark (`mailbox/id`) and stored in the board's own
  480. * KV, which is the whole mechanism. Deriving it from the message list would
  481. * lose it every fifteen minutes when the sync rewrites `inbox:messages`, and
  482. * deriving it from Gmail's own state would need a scope the board does not
  483. * have. Board-owned, so nothing upstream can erase it, and unaffected by
  484. * marking read: a message can be answered and still want reading.
  485. */
  486. export interface RepliedMark {
  487. /** Epoch ms. */
  488. at: number
  489. /** Who replied: the viewer, not the mailbox. */
  490. by: string
  491. /** Which mailbox it went out as. */
  492. from: string
  493. }
  495. /**
  496. * Whether this viewer can send as each mailbox, and why not when they cannot.
  497. *
  498. * Five states, and no two of them render the same (the prime invariant applied
  499. * to a permission rather than a number). The three that look alike at a glance
  500. * are the three that need opposite fixes:
  501. *
  502. * readonly-token the credential works and lacks gmail.send -> re-mint it
  503. * scope-unknown Google did not report the scopes -> nothing to do; try it
  504. * failed the mailbox could not be read at all -> fix the credential
  505. *
  506. * Collapsing any pair of those into "unavailable" would send someone to the
  507. * wrong page of the runbook.
  508. */
  509. export interface MailboxSendState {
  510. email: string
  511. label: string
  512. state: 'sendable' | 'readonly-token' | 'scope-unknown' | 'failed' | 'not-granted'
  513. /** Only for 'failed'. The mailbox's own read error, verbatim. */
  514. error: string | null
  515. signature: 'set' | 'none' | 'store-failed'
  516. }
  518. /**
  519. * Derive the per-mailbox send states. Order matters and is asserted by a test:
  520. * a mailbox nobody granted is `not-granted` even if its token is perfect, and a
  521. * failed read is `failed` before anything is said about its scopes, because on
  522. * a failed read we never learned them.
  523. */
  524. export function sendStates(
  525. data: InboxData,
  526. mailboxes: Mailbox[],
  527. sendable: string[],
  528. sigs: SignatureStore,
  529. ): MailboxSendState[] {
  530. return mailboxes.map((m) => {
  531. const read = data.mailboxes.find((x) => x.mailbox === m.email)
  532. const signature: MailboxSendState['signature'] = !sigs.ok
  533. ? 'store-failed'
  534. : sigs.map[m.email]
  535. ? 'set'
  536. : 'none'
  537. if (!sendable.includes(m.email)) {
  538. return { email: m.email, label: m.label, state: 'not-granted', error: null, signature }
  539. }
  540. if (read && !read.ok) {
  541. return { email: m.email, label: m.label, state: 'failed', error: read.error, signature }
  542. }
  543. const canSend = read?.canSend ?? null
  544. const state: MailboxSendState['state'] =
  545. canSend === false ? 'readonly-token' : canSend === null ? 'scope-unknown' : 'sendable'
  546. return { email: m.email, label: m.label, state, error: null, signature }
  547. })
  548. }
  550. /** The mailboxes a Reply button could actually go out from. */
  551. export const offerable = (states: MailboxSendState[]): MailboxSendState[] =>
  552. states.filter((s) => s.state === 'sendable' || s.state === 'scope-unknown')
  554. /**
  555. * Why the row is per-signature-state. Never shares wording between the two
  556. * absences. Says "message", not "reply", because the same control is on the
  557. * new-message form.
  558. */
  559. function signatureNote(st: MailboxSendState, sigs: SignatureStore): string {
  560. if (st.signature === 'set') {
  561. return `Its signature will be appended. <a href="/inbox/signatures">Signatures</a>`
  562. }
  563. if (st.signature === 'store-failed') {
  564. return `The signature store could not be read${
  565. sigs.ok ? '' : `: <span class="err">${esc(sigs.error)}</span>`
  566. }, so this message goes out <b>without one</b>. That is a failed read, not an empty signature.`
  567. }
  568. return `No signature is set for this mailbox, so the message goes out without one. <a href="/inbox/signatures">Set one</a>`
  569. }
  571. /**
  572. * The compose form. One function, three surfaces: the modal on the message
  573. * page, the full page for a reader with JavaScript off, and (read-only) the
  574. * confirmation page. Keeping it one function is what stops the no-JS path from
  575. * quietly becoming a different form with different rules.
  576. *
  577. * Note what is not here: no To field, no Subject field, no Cc, no thread id and
  578. * no attachment control. All of those are decided on the server from the
  579. * original message. A recipient taken from a form field is a recipient the
  580. * request can choose, and this is the one action on the board that cannot be
  581. * undone.
  582. */
  583. export function composeForm(
  584. orig: MessageBody,
  585. states: MailboxSendState[],
  586. nonce: string,
  587. sigs: SignatureStore,
  588. ): string {
  589. const can = offerable(states)
  590. const notGranted = states.filter((s) => s.state === 'not-granted')
  591. const blocked = states.filter((s) => s.state === 'readonly-token' || s.state === 'failed')
  592. const preselect = can.find((s) => s.email === orig.mailbox) ?? can[0]
  593. // Everyone the original names, for the reply-all label. The server decides
  594. // the actual list (it removes us and the primary recipient); this is the
  595. // header as it arrived, and the label says which it is.
  596. const others = [orig.to, orig.cc].filter(Boolean).join(', ')
  598. return `<form method="post" action="/inbox/compose" class="in" enctype="multipart/form-data">
  599. <h2 class="compose-head">Reply</h2>
  600. <p class="compose-meta" style="margin-top:0">
  601. To <b>${esc(orig.replyTo || orig.sender)}</b>${
  602. orig.replyTo ? ' <span class="why">(the message asked for replies to go here, not to its From address)</span>' : ''
  603. }<br>
  604. Subject <b>Re: ${esc(orig.subject || '(no subject)')}</b>
  605. </p>
  606. <input type="hidden" name="mailbox" value="${esc(orig.mailbox)}">
  607. <input type="hidden" name="id" value="${esc(orig.id)}">
  608. <input type="hidden" name="nonce" value="${esc(nonce)}">
  609. <input type="hidden" name="mode" value="reply">
  611. ${fromList([...can, ...blocked], preselect?.email ?? null, sigs, notGranted.length)}
  613. ${
  614. others
  615. ? `<p class="compose-meta"><b>Who gets it</b></p>
  616. <div class="from-list">
  617. <label>
  618. <input type="checkbox" name="all" value="1">
  619. <span>Reply to everyone on the original
  620. <span class="why">Adds the original&rsquo;s To and Cc as Cc: ${esc(others)}.
  621. This board takes out you and the person you are answering, so the exact
  622. list is the one on the next screen: at most ${RECIPIENT_CAP} in total,
  623. and over that it refuses rather than dropping anybody.</span>
  624. </span>
  625. </label>
  626. </div>`
  627. : ''
  628. }
  630. <p class="compose-meta"><b>Message</b></p>
  631. <textarea class="compose-body" name="body" required
  632. placeholder="Type your reply. Plain text; the signature adds the formatting."></textarea>
  634. ${attachmentField()}
  636. <p class="compose-meta compose-caveats">
  637. ${
  638. orig.cc
  639. ? `Cc on the original: ${esc(orig.cc)}. <b>Not included unless you tick &ldquo;Reply to everyone&rdquo; above.</b><br>`
  640. : ''
  641. }
  642. ${attachmentCaveat()}<br>
  643. Nothing is sent yet. The next screen shows exactly what goes out.
  644. </p>
  646. <div class="compose-actions">
  647. <button class="msg-btn" type="submit"${can.length ? '' : ' disabled'}>Review the reply &rarr;</button>
  648. <button class="msg-btn" type="button" data-compose-cancel hidden>Cancel</button>
  649. <a class="msg-btn" href="/inbox/message?mailbox=${encodeURIComponent(orig.mailbox)}&amp;id=${encodeURIComponent(orig.id)}">Back to the message</a>
  650. </div>
  651. </form>`
  652. }
  654. /**
  655. * The "Send it as" radio list, shared by the reply and new-message forms. Two
  656. * copies of a list of which mailboxes may send is exactly the sort of pair
  657. * that drifts until one of them offers a mailbox the other refuses.
  658. */
  659. function fromList(
  660. states: MailboxSendState[],
  661. preselect: string | null,
  662. sigs: SignatureStore,
  663. notGranted: number,
  664. ): string {
  665. return `<p class="compose-meta"><b>Send it as</b></p>
  666. <div class="from-list">
  667. ${map(
  668. states,
  669. (st) => `<label>
  670. <input type="radio" name="from" value="${esc(st.email)}"
  671. ${st.state === 'readonly-token' || st.state === 'failed' ? 'disabled' : ''}
  672. ${preselect && st.email === preselect ? 'checked' : ''}>
  673. <span>${esc(st.label)} &lt;${esc(st.email)}&gt;${
  674. st.state === 'scope-unknown' ? '<span class="ro">unverified</span>' : ''
  675. }${st.state === 'readonly-token' ? '<span class="ro">read-only</span>' : ''}${
  676. st.state === 'failed' ? '<span class="ro">failed</span>' : ''
  677. }
  678. ${
  679. st.state === 'readonly-token'
  680. ? `<span class="why">Cannot send from this mailbox: its token is read-only. Re-mint it with <code>pnpm inbox:auth</code>; the board rechecks every 15 minutes.</span>`
  681. : st.state === 'failed'
  682. ? `<span class="why">Could not be read: <span class="err">${esc(st.error ?? 'unknown')}</span></span>`
  683. : st.state === 'scope-unknown'
  684. ? `<span class="why">Google did not report this credential's scopes, so whether it can send is unknown. A failed send will say so.</span>`
  685. : `<span class="why">${signatureNote(st, sigs)}</span>`
  686. }
  687. </span>
  688. </label>`,
  689. )}
  690. </div>
  691. ${
  692. notGranted
  693. ? `<p class="compose-meta">${notGranted} more ${plural(
  694. notGranted,
  695. 'mailbox',
  696. 'mailboxes',
  697. )} you may read but not send from. Grants live in <code>config/inbox.ts</code> (<code>INBOX_SENDERS</code>) and are a human edit, not a setting.</p>`
  698. : ''
  699. }`
  700. }
  702. /** The file picker, with the limits stated where the choosing happens. */
  703. function attachmentField(): string {
  704. return `<p class="compose-meta"><b>Attachments</b></p>
  705. <input class="compose-file" type="file" name="files" multiple>
  706. <p class="compose-meta">Up to ${ATTACHMENT_LIMITS.count} files,
  707. ${fileSize(ATTACHMENT_LIMITS.perFile)} each, ${fileSize(ATTACHMENT_LIMITS.total)} in total.
  708. They are read into this page, shown to you on the next screen, and sent with the message;
  709. nothing is stored on this board.</p>`
  710. }
  712. /**
  713. * The attachment half of the red box. It states the limits; a caveat that has
  714. * stopped being true is worse in red than in grey.
  715. */
  716. function attachmentCaveat(): string {
  717. return `Attachments: ${ATTACHMENT_LIMITS.count} files at most,
  718. ${fileSize(ATTACHMENT_LIMITS.perFile)} each and ${fileSize(ATTACHMENT_LIMITS.total)} together.
  719. Over any of those, <b>nothing is sent</b> and the page says which file. Send that one from Gmail.`
  720. }
  722. /**
  723. * How many messages the all-inboxes view shows, and by what rule: the 25
  724. * highest priority, where priority is *unread and not marketing, newest
  725. * first*. Deliberately not a score: there is nothing to weight and nothing to explain.
  726. * A ranking nobody can state in one line is the kind of default that gets
  727. * asserted and forgotten (rule 2); this one fits on the page, and is printed
  728. * there.
  729. *
  730. * Selecting a single mailbox shows everything held for it. This cap makes the
  731. * combined view a summary rather than seven inboxes poured together; it is not
  732. * a limit on what was fetched.
  733. */
  734. export const ALL_INBOXES_CAP = 25
  736. /**
  737. * How many messages the sync holds per mailbox, and what the footer claims.
  738. *
  739. * One constant for both, so the page cannot claim a depth the Worker does not
  740. * fetch. The footer is built from it rather than restating it in prose.
  741. *
  742. * Cloudflare subrequests do not bind here: the Worker plan allows 10,000 per
  743. * invocation, and batching fetches 40 messages per request, so 250 costs a
  744. * handful. Do not derive a cap from them. The limits that do bind:
  745. *
  746. * KV value size. About 466 bytes per message, so seven mailboxes at this
  747. * cap are well under a megabyte against the 25 MiB limit.
  748. *
  749. * Read latency. The whole value is read and parsed on every /inbox request
  750. * and every filter and read POST. If the window ever needs to grow far past
  751. * this, the answer is per-mailbox keys, not a bigger blob.
  752. *
  753. * Gmail's own quota. `messages.get` costs 5 units against 15,000 units per
  754. * minute per user, and at 500 per mailbox Gmail refused about a third of
  755. * every large one ("Units per minute per user"). No subrequest headroom
  756. * moves that.
  757. *
  758. * Search asks Gmail directly, so this number is how much is browsable, not how
  759. * much is reachable. `windowTotal` on each MailboxRead counts what the window
  760. * actually holds, so the page says "250 of 2,400" rather than implying the list
  761. * is everything.
  762. */
  763. export const INBOX_MAX_PER_MAILBOX = 250
  765. export function prioritised(
  766. kept: InboxMessage[],
  767. isUnread: (m: InboxMessage) => boolean,
  768. cap: number = ALL_INBOXES_CAP,
  769. ): { unread: InboxMessage[]; read: InboxMessage[]; heldBack: number } {
  770. // `kept` arrives newest-first and marketing-free, so "newest first" needs no
  771. // second sort and "not marketing" needs no second filter.
  772. const allUnread = kept.filter(isUnread)
  773. const unread = allUnread.slice(0, cap)
  774. // Unread outranks read, so read only fills a remainder. With 25 unread
  775. // waiting, nothing already-read earns a place in a summary.
  776. const read = kept.filter((m) => !isUnread(m)).slice(0, Math.max(0, cap - unread.length))
  777. return { unread, read, heldBack: kept.length - unread.length - read.length }
  778. }
  780. /**
  781. * What this list is not showing, and why. Rule 5, and rule 9.
  782. *
  783. * Three different absences, three different sentences, because they need three
  784. * different responses:
  785. * heldBack the combined view is a summary; open the mailbox to see it
  786. * truncated the window holds more than the board fetched; raise the cap
  787. * failedFetches Gmail was asked and did not answer; nobody can fix by clicking
  788. */
  789. function shortfallNote(
  790. heldBack: number,
  791. boxes: MailboxRead[],
  792. summarised: boolean,
  793. ): string {
  794. const truncated = boxes.filter((b) => b.ok && b.truncated)
  795. const failed = boxes.filter((b) => b.ok && b.failedFetches > 0)
  796. const lines: string[] = []
  798. if (summarised && heldBack > 0) {
  799. lines.push(
  800. `Showing the ${ALL_INBOXES_CAP} that most want attention: unread first, newest first,
  801. marketing excluded. <b>${heldBack} more ${plural(heldBack, 'message', 'messages')}</b>
  802. ${plural(heldBack, 'is', 'are')} loaded and waiting behind a mailbox on the left; nothing
  803. here is a limit on what was fetched.`,
  804. )
  805. }
  806. if (truncated.length) {
  807. lines.push(
  808. `${truncated.length} ${plural(truncated.length, 'mailbox', 'mailboxes')} held more in the
  809. 30-day window than the board fetched:
  810. ${truncated
  811. .map((b) =>
  812. b.windowTotal === null
  813. ? `${esc(b.mailbox)} (more than the board counted)`
  814. : `${esc(b.mailbox)} (${b.windowTotal.toLocaleString()} in the window)`,
  815. )
  816. .join(', ')}.
  817. Those are missing from this list, not absent from Gmail.`,
  818. )
  819. }
  820. if (failed.length) {
  821. lines.push(
  822. `${failed.reduce((n, b) => n + b.failedFetches, 0)} ${plural(
  823. failed.reduce((n, b) => n + b.failedFetches, 0), 'message', 'messages',
  824. )} could not be read back from Gmail this sync. That is a failed fetch, not an empty inbox.`,
  825. )
  826. }
  827. if (!lines.length) return ''
  828. return `<div style="padding:10px 16px;font-size:12px;line-height:1.6;color:var(--text-muted);
  829. border-bottom:1px solid var(--hairline)">${lines.join('<br>')}</div>`
  830. }
  832. export function inboxPage(
  833. data: InboxData,
  834. filters: string[],
  835. mailboxes: Mailbox[],
  836. readable: string[],
  837. viewerLabel: string,
  838. selected: string | null = null,
  839. readIds: ReadonlySet<string> = new Set(),
  840. repliedIds: ReadonlySet<string> = new Set(),
  841. /**
  842. * Does this viewer hold a send grant on any mailbox?
  843. *
  844. * The New message button appears only then, and defaults to false, like
  845. * every permission on this board (rule 13): a control that 403s when pressed
  846. * is worse than one that is absent, and someone who holds no send grant sees
  847. * the reason on the message page rather than a dead button here.
  848. */
  849. canCompose = false,
  850. ): string {
  851. const label = (email: string) => mailboxes.find((m) => m.email === email)?.label ?? email
  852. const visible = data.mailboxes.filter((m) => readable.includes(m.mailbox))
  853. const shown = selected ? visible.filter((m) => m.mailbox === selected) : visible
  854. const failed = shown.filter((m) => !m.ok)
  856. // "Unread" on this page = unread in Gmail AND not marked read on the board.
  857. // The board's mark is shared by every reader, like the filter list: this is
  858. // a team inbox, and "someone already dealt with it" is the fact the button
  859. // records.
  860. const isUnread = (m: InboxMessage): boolean => m.unread && !readIds.has(readKey(m))
  862. const all = shown
  863. .flatMap((m) => m.messages)
  864. .sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0))
  865. const kept = all.filter((m) => !matchesFilter(m.sender, filters))
  866. const hiddenGroups = groupBySender(all.filter((m) => matchesFilter(m.sender, filters)))
  867. // One mailbox shows everything held; the combined view is a summary. The cap
  868. // is a display choice, applies only here, and is stated with a count of what
  869. // it holds back.
  870. const summarised = selected === null
  871. const { unread, read, heldBack } = summarised
  872. ? prioritised(kept, isUnread)
  873. : { unread: kept.filter(isUnread), read: kept.filter((m) => !isUnread(m)), heldBack: 0 }
  875. // The recipient rail, filtering by mailbox. Counts are unread counts, like
  876. // Gmail's; a failed mailbox shows its state
  877. // where its count would be, because a count it cannot have would be a lie.
  878. const rail = `<nav class="inbox-rail" aria-label="Mailboxes">
  879. <a href="/inbox" ${selected === null ? 'aria-current="true"' : ''}>
  880. <span>All inboxes</span>
  881. <span class="cnt">${visible.flatMap((m) => m.messages).filter((x) => isUnread(x) && !matchesFilter(x.sender, filters)).length}</span>
  882. </a>
  883. ${map(
  884. mailboxes.filter((m) => readable.includes(m.email)),
  885. (m) => {
  886. const box = visible.find((v) => v.mailbox === m.email)
  887. const n = box?.ok
  888. ? box.messages.filter((x) => isUnread(x) && !matchesFilter(x.sender, filters)).length
  889. : null
  890. return `<a href="/inbox?mailbox=${encodeURIComponent(m.email)}" ${selected === m.email ? 'aria-current="true"' : ''}>
  891. <span>${esc(m.label)}</span>
  892. ${box && !box.ok ? `<span class="dead" title="${esc(box.error ?? '')}">failed</span>` : `<span class="cnt">${n ?? 0}</span>`}
  893. </a>`
  894. },
  895. )}
  896. </nav>`
  898. // Header and rows are one element so the search can hide them together. As
  899. // siblings, filtering every row in a section would leave its header stranded
  900. // above nothing, still claiming a count.
  901. const section = (title: string, rows: InboxMessage[]): string =>
  902. rows.length
  903. ? `<div class="msg-sect">
  904. <h2 class="msg-section">${esc(title)} · <span class="msg-count">${rows.length}</span></h2>
  905. ${map(rows, (m) => messageRow(m, label, selected, readIds.has(readKey(m)), repliedIds.has(readKey(m))))}
  906. </div>`
  907. : ''
  909. const bucketCount = hiddenGroups.reduce((n, g) => n + g.count, 0)
  911. return `<section class="section">
  912. <div class="inbox-layout">
  913. ${rail}
  914. <div class="card" style="overflow:hidden">
  915. <div class="rule"></div>
  916. <div style="padding:18px 16px 12px;border-bottom:1px solid var(--border-default)">
  917. <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap">
  918. <h1 style="font-family:var(--font-display);font-size:22px;color:var(--text-body)">
  919. ${esc(selected ? label(selected) : 'All inboxes')}
  920. </h1>
  921. <span class="note">${esc(agoText(data.syncedAt))} · every 15 min, or <a href="/">Sync now</a></span>
  922. ${canCompose ? `<a class="msg-btn" href="/inbox/new">New message</a>` : ''}
  923. </div>
  924. <div hidden style="margin-top:10px">
  925. <input id="inbox-search" class="inbox-search" type="search"
  926. placeholder="Filter the messages below" aria-label="Filter loaded messages">
  927. </div>
  928. <!-- TWO SEARCHES, and the difference is stated because it matters.
  929. The box above filters what is already on the page, instantly and
  930. without a request. This one asks Gmail, which is the only way to
  931. reach mail outside the loaded window, which was measured at
  932. several times what the board holds. It is a plain GET form, so
  933. it works with JavaScript off. -->
  934. <form class="inbox-live" method="get" action="/inbox/search" role="search">
  935. ${selected ? `<input type="hidden" name="mailbox" value="${esc(selected)}">` : ''}
  936. <input class="inbox-search" type="search" name="q" required
  937. placeholder="Search all mail in Gmail (from:, has:attachment, \"quoted phrase\")"
  938. aria-label="Search Gmail">
  939. <button class="msg-btn" type="submit">Search Gmail</button>
  940. </form>
  941. </div>
  942. <div style="padding:0 0 8px">
  943. ${failBanner(failed)}
  944. ${shortfallNote(heldBack, shown, summarised)}
  945. ${
  946. kept.length
  947. ? join([
  948. section('Unread', unread),
  949. section('Everything else', read),
  950. // Shown only while a query is active and nothing matched. An
  951. // inbox with no results and an inbox with no mail must not
  952. // look the same, so this says which one it is.
  953. `<p class="msg-none" id="msg-none" hidden>No messages match that search.
  954. This is a filter on what is loaded, not a search of Gmail; older
  955. mail is still in Gmail.</p>`,
  956. ])
  957. : `<p class="empty" style="padding:20px 16px">${
  958. shown.some((m) => m.ok)
  959. ? 'Nothing here that is not filtered.'
  960. : 'No inbox could be read, so this list is empty because nothing can see them, not because there is no mail.'
  961. }</p>`
  962. }
  963. </div>
  965. <div class="inbox-drawer" style="border-top:1px solid var(--border-default)">
  966. <details${hiddenGroups.length ? '' : ' open'} style="padding:0 16px 12px">
  967. <summary>
  968. Filtered marketing: ${hiddenGroups.length} ${plural(hiddenGroups.length, 'sender')} · ${bucketCount} ${plural(bucketCount, 'message')} · collapsed, never deleted
  969. </summary>
  970. ${
  971. hiddenGroups.length
  972. ? map(
  973. hiddenGroups,
  974. (g) => `<div class="row" style="grid-template-columns:1fr auto auto;gap:12px">
  975. <span><b>${esc(g.senderName || g.sender)}</b> <span class="addr">${esc(g.sender)}</span> · ${g.count} ${plural(g.count, 'message')}</span>
  976. <span style="white-space:nowrap;font-size:12px">${esc(rowTime(g.newest))}</span>
  977. <form method="post" action="/inbox/unfilter" style="display:inline">
  978. <input type="hidden" name="sender" value="${esc(g.sender)}">
  979. ${selected ? `<input type="hidden" name="mailbox" value="${esc(selected)}">` : ''}
  980. <button type="submit">Not marketing</button>
  981. </form>
  982. </div>`,
  983. )
  984. : '<p class="empty">Nothing filtered yet.</p>'
  985. }
  986. </details>
  987. </div>
  989. <div style="padding:10px 16px 14px;font-size:11.5px;line-height:1.6;color:var(--text-muted);border-top:1px solid var(--hairline)">
  990. Last 30 days, up to ${INBOX_MAX_PER_MAILBOX.toLocaleString()} per mailbox; older mail is in Gmail, not gone. Bodies are
  991. fetched when you open a message and never stored. Filtering hides a sender
  992. <b>here only</b>, and Mark read is this board&rsquo;s shared memory; Gmail itself still
  993. shows the message unread. <b>Replied</b> stays on a message once someone answers
  994. it from here; it survives the sync and marking read, and every reply is listed at
  995. <a href="/inbox/sent">Sent from this board</a>. Signed in as ${esc(viewerLabel)} · ${readable.length} of ${mailboxes.length}
  996. ${plural(mailboxes.length, 'mailbox', 'mailboxes')} granted in <code>config/inbox.ts</code>.
  997. </div>
  998. </div>
  999. </div>
  1000. </section>
  1001. ${SEARCH_SCRIPT}`
  1002. }
  1004. /**
  1005. * A byte count as a person reads it, and "size not reported" when there is
  1006. * none.
  1007. *
  1008. * Null is not zero here either. Gmail omits `body.size` on some parts, and a
  1009. * "0 KB" beside a file that plainly has contents is the kind of number that
  1010. * gets believed. See the Attachment interface.
  1011. */
  1012. export function fileSize(bytes: number | null): string {
  1013. if (bytes === null) return 'size not reported'
  1014. if (bytes < 1024) return `${bytes} B`
  1015. if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
  1016. return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  1017. }
  1019. /**
  1020. * The attachments on an incoming message, each with what can be done with it.
  1021. *
  1022. * Three outcomes and no two of them look alike (the prime invariant, applied
  1023. * to a control rather than a number):
  1024. *
  1025. * downloadable a link, with the size beside it
  1026. * over the ceiling the size, and the ceiling, and "it is in Gmail"
  1027. * no handle Gmail returned the part without an attachment id, so
  1028. * there is nothing to fetch; said, not hidden
  1029. */
  1030. function attachmentList(body: MessageBody): string {
  1031. if (!body.attachments.length) return ''
  1032. const real = body.attachments.filter((a) => !a.inline)
  1033. const inline = body.attachments.length - real.length
  1034. const href = (a: Attachment): string =>
  1035. `/inbox/attachment?mailbox=${encodeURIComponent(body.mailbox)}&amp;id=${encodeURIComponent(body.id)}&amp;n=${a.index}`
  1037. return `<div style="margin-top:10px">
  1038. <p class="note" style="margin:0 0 2px"><b>${real.length ? `${real.length} ${plural(real.length, 'attachment')}` : 'No attachments'}</b>${
  1039. inline
  1040. ? ` &middot; ${inline} inline ${plural(inline, 'image')} (a signature logo or a picture inside the message, not a file someone attached)`
  1041. : ''
  1042. }</p>
  1043. ${map(
  1044. body.attachments,
  1045. (a) => `<div class="att-row">
  1046. <span class="n">${esc(a.name || '(unnamed)')}</span>
  1047. <span class="s">${esc(fileSize(a.size))}</span>
  1048. ${a.inline ? '<span class="why">inline</span>' : ''}
  1049. ${
  1050. !a.attachmentId
  1051. ? '<span class="why">Gmail returned no handle for this part, so it cannot be fetched. It is in Gmail.</span>'
  1052. : a.size !== null && a.size > ATTACHMENT_DOWNLOAD_CAP
  1053. ? `<span class="why">Over this board&rsquo;s ${fileSize(ATTACHMENT_DOWNLOAD_CAP)} download ceiling. Open it in Gmail.</span>`
  1054. : `<a href="${href(a)}">Download</a>`
  1055. }
  1056. </div>`,
  1057. )}
  1058. <p class="note" style="margin:6px 0 0">Downloads come straight from Gmail on the click and are
  1059. not stored on this board. Every one is served as a file, never opened in the page.</p>
  1060. </div>`
  1061. }
  1063. /**
  1064. * Everything the open-message page needs to offer a Reply, or to say why it
  1065. * cannot. Optional as a whole: with none, the page renders the message alone,
  1066. * which keeps the error and fixture paths simple.
  1067. */
  1068. export interface ReplyContext {
  1069. states: MailboxSendState[]
  1070. nonce: string
  1071. sigs: SignatureStore
  1072. /** The board's persistent replied mark for this message, if there is one. */
  1073. replied: RepliedMark | null
  1074. }
  1076. /**
  1077. * One message, read.
  1078. *
  1079. * The sender's HTML never touches this document. When the message has an HTML
  1080. * part it renders through an <iframe> pointed at /inbox/message/frame, a
  1081. * separate response with its own CSP (no scripts), and the iframe is
  1082. * sandboxed without allow-scripts, so nothing the sender wrote can execute
  1083. * even if both layers had holes. `body.html` must not appear in this string;
  1084. * everything that does appear goes through `esc`.
  1085. */
  1086. export function messagePage(
  1087. body: MessageBody | { error: string },
  1088. mailboxLabel: string,
  1089. boardRead = false,
  1090. reply: ReplyContext | null = null,
  1091. ): string {
  1092. if ('error' in body) {
  1093. return `<section class="section">
  1094. <div class="section-head"><h2>Message</h2></div>
  1095. <div class="card" style="padding:22px 28px">
  1096. <p class="empty">Could not read that message: ${esc(body.error)}</p>
  1097. <p class="note">That is a failed read, not an empty message. <a href="/inbox">Back to the inbox</a>.</p>
  1098. </div>
  1099. </section>`
  1100. }
  1102. return `<section class="section">
  1103. <div class="section-head"><h2>Message</h2></div>
  1104. <div class="card">
  1105. <div class="rule"></div>
  1106. <div style="padding:22px 28px 16px;border-bottom:1px solid var(--border-default)">
  1107. <div class="eyebrow">${esc(mailboxLabel)}</div>
  1108. <h1 style="font-family:var(--font-display);font-size:22px;color:var(--text-body)">
  1109. ${esc(body.subject || '(no subject)')}
  1110. </h1>
  1111. <p class="note" style="margin-top:6px">
  1112. From <b>${esc(body.senderName || body.sender)}</b>
  1113. ${body.senderName ? `&lt;${esc(body.sender)}&gt;` : ''}<br>
  1114. To ${esc(body.to || '–')}<br>
  1115. ${esc(localStamp(body.date))} CT
  1116. </p>
  1117. ${attachmentList(body)}
  1118. </div>
  1119. <div class="msg-actions">
  1120. <a class="msg-btn" href="/inbox">&larr; Back to the inbox</a>
  1121. ${replyControl(body, reply)}
  1122. ${
  1123. body.unread && !boardRead
  1124. ? markForm(body, 'read', null)
  1125. : boardRead
  1126. ? markForm(body, 'unread', null)
  1127. : ''
  1128. }
  1129. </div>
  1130. ${repliedBanner(reply?.replied ?? null)}
  1131. <div style="padding:18px 28px">
  1132. ${
  1133. body.html
  1134. ? // The sandbox has no allow-scripts. allow-same-origin exists only so
  1135. // the parent's resize script can read the frame's height; the frame
  1136. // itself cannot run anything, by attribute here and by CSP there.
  1137. `<iframe class="mail-frame" title="Message body, rendered in an isolated frame"
  1138. src="/inbox/message/frame?mailbox=${encodeURIComponent(body.mailbox)}&amp;id=${encodeURIComponent(body.id)}"
  1139. sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
  1140. <p class="note" style="margin-top:10px">Rendered in an isolated frame: the sender&rsquo;s
  1141. scripts are blocked and cannot run, and links open in a new tab. Remote images load
  1142. from the sender&rsquo;s servers while this page is open.</p>
  1143. ${
  1144. body.htmlTruncated
  1145. ? `<p class="note" style="margin-top:8px"><b>The HTML was cut at ${HTML_CAP.toLocaleString()} characters.</b>
  1146. The full message is in Gmail.</p>`
  1147. : ''
  1148. }`
  1149. : body.kind === 'none'
  1150. ? '<p class="empty">This message has no readable text part. It is probably images only.</p>'
  1151. : `<pre style="white-space:pre-wrap;word-break:break-word;font:14px/1.65 var(--font-body,system-ui);margin:0">${esc(body.text)}</pre>
  1152. ${
  1153. body.truncated
  1154. ? `<p class="note" style="margin-top:12px"><b>Cut at ${BODY_CAP.toLocaleString()} characters.</b>
  1155. The rest is in Gmail; this board is not a mail client.</p>`
  1156. : ''
  1157. }`
  1158. }
  1159. </div>
  1160. </div>
  1161. </section>
  1162. ${reply && offerable(reply.states).length ? composeDialog(body, reply) : ''}
  1163. ${
  1164. body.html
  1165. ? `<script>(function(){var f=document.querySelector('.mail-frame');if(!f)return;
  1166. function fit(){try{var d=f.contentDocument;if(!d)return;
  1167. var h=Math.max(d.documentElement?d.documentElement.scrollHeight:0,d.body?d.body.scrollHeight:0);
  1168. if(h)f.style.height=Math.min(Math.max(h+24,240),12000)+'px'}catch(e){}}
  1169. f.addEventListener('load',function(){fit();setTimeout(fit,400);setTimeout(fit,1600)});})();</script>`
  1170. : ''
  1171. }`
  1172. }
  1174. /**
  1175. * The Reply control or, when there is nothing to offer, the reason.
  1176. *
  1177. * Rule 9: a surface that withholds a control says why. No button and no
  1178. * explanation would leave a reader to conclude the feature is broken when
  1179. * they simply hold no grant.
  1180. */
  1181. function replyControl(body: MessageBody, reply: ReplyContext | null): string {
  1182. if (!reply) return ''
  1183. const can = offerable(reply.states)
  1184. if (can.length) {
  1185. // A link, not a button. With JavaScript it is intercepted and opens the
  1186. // dialog; without it, it navigates to the same form on its own page. The
  1187. // no-JS path is not a degraded copy; it posts to the same route.
  1188. return `<a class="msg-btn" id="compose-open"
  1189. href="/inbox/compose?mailbox=${encodeURIComponent(body.mailbox)}&amp;id=${encodeURIComponent(body.id)}">Reply</a>`
  1190. }
  1191. const granted = reply.states.filter((s) => s.state !== 'not-granted')
  1192. if (!granted.length) {
  1193. return `<span class="note">You may read this mailbox but not send from any of them.
  1194. Send grants are separate from read grants and live in <code>config/inbox.ts</code>
  1195. (<code>INBOX_SENDERS</code>).</span>`
  1196. }
  1197. const readonly = granted.filter((s) => s.state === 'readonly-token').length
  1198. const failed = granted.filter((s) => s.state === 'failed').length
  1199. return `<span class="note">No mailbox you may send from can send right now:
  1200. ${readonly ? `${readonly} ${plural(readonly, 'has', 'have')} a read-only token (re-mint with <code>pnpm inbox:auth</code>)` : ''}${readonly && failed ? '; ' : ''}${
  1201. failed ? `${failed} could not be read at all` : ''
  1202. }. This is a credential state, not an empty inbox.</span>`
  1203. }
  1205. /** The persistent replied mark, said in full on the message itself. */
  1206. function repliedBanner(mark: RepliedMark | null): string {
  1207. if (!mark) return ''
  1208. return `<p class="note" style="padding:10px 28px 0;margin:0">
  1209. <span class="msg-replied">replied</span>
  1210. Answered from this board by ${esc(mark.by)} as <b>${esc(mark.from)}</b> on
  1211. ${esc(localStamp(mark.at))} CT.
  1212. The sent copy is in ${esc(mark.from)}&rsquo;s Sent folder in Gmail;
  1213. <a href="/inbox/sent">this board&rsquo;s record</a> is separate and cannot be edited.
  1214. </p>`
  1215. }
  1217. /**
  1218. * The modal. Native <dialog> and one small script, in the same style as the
  1219. * frame-resize script at the foot of this page. No framework: it adds no build
  1220. * step, no bundle to keep in sync and no CSP directive, and the no-JS fallback
  1221. * is then the same form rather than a second implementation of it.
  1222. */
  1223. function composeDialog(body: MessageBody, reply: ReplyContext): string {
  1224. return `<dialog class="compose-dialog" id="compose-dialog" aria-label="Reply">
  1225. ${composeForm(body, reply.states, reply.nonce, reply.sigs)}
  1226. </dialog>
  1227. <script>(function(){
  1228. var d=document.getElementById('compose-dialog'),a=document.getElementById('compose-open');
  1229. if(!d||!a||!d.showModal)return;
  1230. a.addEventListener('click',function(e){e.preventDefault();d.showModal();
  1231. var t=d.querySelector('.compose-body');if(t)t.focus();});
  1232. var c=d.querySelector('[data-compose-cancel]');
  1233. if(c){c.hidden=false;c.addEventListener('click',function(){d.close();});}
  1234. })();</script>`
  1235. }
  1237. /**
  1238. * The compose form on its own page.
  1239. *
  1240. * This is the no-JavaScript path and the target of the Reply link before the
  1241. * script upgrades it, so it is never a stale second copy: same `composeForm`,
  1242. * same POST, same server-side decisions.
  1243. */
  1244. export function composePage(
  1245. body: MessageBody | { error: string },
  1246. mailboxLabel: string,
  1247. states: MailboxSendState[],
  1248. nonce: string,
  1249. sigs: SignatureStore,
  1250. ): string {
  1251. if ('error' in body) {
  1252. return `<section class="section">
  1253. <div class="section-head"><h2>Reply</h2></div>
  1254. <div class="card" style="padding:22px 28px">
  1255. <p class="empty">Could not read the message you are replying to: ${esc(body.error)}</p>
  1256. <p class="note">Nothing was sent. That is a failed read, not an empty message.
  1257. <a href="/inbox">Back to the inbox</a>.</p>
  1258. </div>
  1259. </section>`
  1260. }
  1261. return `<section class="section">
  1262. <div class="section-head"><h2>Reply</h2></div>
  1263. <div class="card">
  1264. <div class="rule"></div>
  1265. <div style="padding:18px 24px 6px">
  1266. <div class="eyebrow">${esc(mailboxLabel)}</div>
  1267. <p class="note" style="margin:2px 0 0">In reply to
  1268. <b>${esc(body.senderName || body.sender)}</b>: ${esc(body.subject || '(no subject)')}</p>
  1269. </div>
  1270. ${composeForm(body, states, nonce, sigs)}
  1271. </div>
  1272. </section>`
  1273. }
  1275. /**
  1276. * A new message: the compose box.
  1277. *
  1278. * The one form on this board that decides who gets mail. Every other outbound
  1279. * surface answers something a client sent us, and takes the recipient off that
  1280. * message on the server; this one cannot, because there is nothing to take it
  1281. * from. So it says exactly that, in the red box, where the person about to
  1282. * send from a shared mailbox will read it:
  1283. *
  1284. * - the recipients are what they typed, parsed and re-emitted as addresses
  1285. * (display names are dropped; see parseRecipients);
  1286. * - at most RECIPIENT_CAP of them across To and Cc, refused over that;
  1287. * - it starts a new thread rather than joining one;
  1288. * - and it still goes through the same confirmation, nonce and audit row as
  1289. * a reply, because it is the same irreversible thing.
  1290. *
  1291. * Shares `fromList` and the attachment field with the reply form, so a mailbox
  1292. * that may not send is refused identically here, and the attachment limits
  1293. * cannot drift between the two.
  1294. */
  1295. export function newMessageForm(
  1296. states: MailboxSendState[],
  1297. nonce: string,
  1298. sigs: SignatureStore,
  1299. /** Sender's own mailbox, preselected when they may send from it. */
  1300. preferred: string | null = null,
  1301. /**
  1302. * Its own heading: true for a dialog, false inside a page that already has
  1303. * one (`newMessagePage` renders a section head saying the same words, and
  1304. * two "New message" headings one under the other is noise). The reply form
  1305. * keeps its heading because its dialog is the surface people actually use.
  1306. */
  1307. heading = true,
  1308. ): string {
  1309. const can = offerable(states)
  1310. const notGranted = states.filter((s) => s.state === 'not-granted')
  1311. const blocked = states.filter((s) => s.state === 'readonly-token' || s.state === 'failed')
  1312. const preselect = can.find((s) => s.email === preferred) ?? can[0]
  1314. return `<form method="post" action="/inbox/compose" class="in" enctype="multipart/form-data">
  1315. ${heading ? '<h2 class="compose-head">New message</h2>' : ''}
  1316. <input type="hidden" name="nonce" value="${esc(nonce)}">
  1317. <input type="hidden" name="mode" value="new">
  1319. ${fromList([...can, ...blocked], preselect?.email ?? null, sigs, notGranted.length)}
  1321. <p class="compose-meta"><b>To</b></p>
  1322. <input class="compose-field" type="text" name="to" required autocomplete="off"
  1323. placeholder="client@example.com, someone@else.com">
  1325. <p class="compose-meta"><b>Cc</b> <span class="why">optional</span></p>
  1326. <input class="compose-field" type="text" name="cc" autocomplete="off" placeholder="">
  1328. <p class="compose-meta"><b>Subject</b></p>
  1329. <input class="compose-field" type="text" name="subject" autocomplete="off"
  1330. placeholder="(no subject)">
  1332. <p class="compose-meta"><b>Message</b></p>
  1333. <textarea class="compose-body" name="body" required
  1334. placeholder="Type your message. Plain text; the signature adds the formatting."></textarea>
  1336. ${attachmentField()}
  1338. <p class="compose-meta compose-caveats">
  1339. <b>You are choosing the recipients.</b> Every other send on this board answers a message
  1340. a client sent us and reads the address off it; this one goes wherever you type.
  1341. Separate addresses with commas, at most ${RECIPIENT_CAP} across To and Cc, and over
  1342. that nothing is sent. Names are dropped and the address is used.<br>
  1343. ${attachmentCaveat()}<br>
  1344. Nothing is sent yet. The next screen shows exactly what goes out.
  1345. </p>
  1347. <div class="compose-actions">
  1348. <button class="msg-btn" type="submit"${can.length ? '' : ' disabled'}>Review the message &rarr;</button>
  1349. <a class="msg-btn" href="/inbox">Back to the inbox</a>
  1350. </div>
  1351. </form>`
  1352. }
  1354. /** The new-message form on its own page, with the same shell as the reply. */
  1355. export function newMessagePage(
  1356. states: MailboxSendState[],
  1357. nonce: string,
  1358. sigs: SignatureStore,
  1359. preferred: string | null = null,
  1360. ): string {
  1361. const can = offerable(states)
  1362. if (!can.length) {
  1363. // Rule 9: no control, and the reason. The reply surface says this too, and
  1364. // for the same reader: someone who may read seven mailboxes and send from
  1365. // none of them.
  1366. const granted = states.filter((s) => s.state !== 'not-granted')
  1367. return `<section class="section">
  1368. <div class="section-head"><h2>New message</h2></div>
  1369. <div class="card" style="padding:22px 28px">
  1370. <p class="empty">${
  1371. granted.length
  1372. ? 'No mailbox you may send from can send right now.'
  1373. : 'You may read the inbox but not send from any mailbox.'
  1374. }</p>
  1375. <p class="note">${
  1376. granted.length
  1377. ? `${granted.filter((s) => s.state === 'readonly-token').length} of them hold a read-only token (re-mint with <code>pnpm inbox:auth</code>) and ${granted.filter((s) => s.state === 'failed').length} could not be read at all. This is a credential state, not a missing feature.`
  1378. : 'Send grants are separate from read grants and live in <code>config/inbox.ts</code> (<code>INBOX_SENDERS</code>). They are a human edit, not a setting.'
  1379. } <a href="/inbox">Back to the inbox</a>.</p>
  1380. </div>
  1381. </section>`
  1382. }
  1383. return `<section class="section">
  1384. <div class="section-head"><h2>New message</h2></div>
  1385. <div class="card">
  1386. <div class="rule"></div>
  1387. ${newMessageForm(states, nonce, sigs, preferred, false)}
  1388. </div>
  1389. </section>`
  1390. }
  1392. /**
  1393. * The confirmation page. Nothing has been sent when this renders.
  1394. *
  1395. * It exists because a send cannot be undone and because every field that
  1396. * matters (recipient, subject, thread) was decided on the server rather than
  1397. * typed, so this is the one place a person can see what those decisions
  1398. * actually produced before it leaves.
  1399. */
  1400. export function confirmPage(
  1401. outgoing: {
  1402. from: string
  1403. to: string
  1404. cc?: string | null
  1405. subject: string
  1406. text: string
  1407. inReplyTo: string | null
  1408. threadId: string | null
  1409. },
  1410. orig: MessageBody | null,
  1411. st: MailboxSendState,
  1412. nonce: string,
  1413. sigs: SignatureStore,
  1414. /** The files, still staged. Carried in a hidden field; see StagedAttachment. */
  1415. staged: { name: string; mimeType: string; b64: string }[] = [],
  1416. ): string {
  1417. const sameMailbox = orig ? outgoing.from === orig.mailbox : false
  1418. const backHref = orig
  1419. ? `/inbox/message?mailbox=${encodeURIComponent(orig.mailbox)}&amp;id=${encodeURIComponent(orig.id)}`
  1420. : '/inbox'
  1421. return `<section class="section">
  1422. <div class="section-head"><h2>${orig ? 'Send this reply?' : 'Send this message?'}</h2></div>
  1423. <div class="card">
  1424. <div class="rule"></div>
  1425. <div style="padding:20px 24px">
  1426. <p class="compose-meta" style="margin-top:0">
  1427. From <b>${esc(outgoing.from)}</b><br>
  1428. To <b>${esc(outgoing.to)}</b>${
  1429. orig?.replyTo ? ' <span class="why">(from the message&rsquo;s Reply-To, which wins over its From)</span>' : ''
  1430. }<br>
  1431. ${
  1432. // The Cc is shown as the server settled it, which for a reply-all
  1433. // is not the header the original carried: this board removes the
  1434. // sending mailbox and the person being answered. This line is the
  1435. // one place the difference is visible before it goes.
  1436. outgoing.cc
  1437. ? `Cc <b>${esc(outgoing.cc)}</b> <span class="why">(${
  1438. outgoing.cc.split(',').length
  1439. } ${plural(outgoing.cc.split(',').length, 'address', 'addresses')}, after taking out you and the sender)</span><br>`
  1440. : ''
  1441. }
  1442. Subject <b>${esc(outgoing.subject)}</b>
  1443. </p>
  1445. <p class="compose-meta"><b>Message</b></p>
  1446. <pre style="white-space:pre-wrap;word-break:break-word;font:14px/1.65 var(--font-body,system-ui);
  1447. margin:0;padding:12px 14px;border:1px solid var(--hairline);border-radius:4px">${esc(outgoing.text)}</pre>
  1449. <p class="compose-meta"><b>Signature</b><br>${
  1450. st.signature === 'set'
  1451. ? 'Appended below your message, exactly as previewed:'
  1452. : st.signature === 'store-failed'
  1453. ? `The signature store could not be read${
  1454. sigs.ok ? '' : `: <span class="err">${esc(sigs.error)}</span>`
  1455. }. This reply goes out <b>without a signature</b>.`
  1456. : 'No signature is set for this mailbox. This reply goes out without one.'
  1457. }</p>
  1458. ${
  1459. st.signature === 'set'
  1460. ? `<iframe class="sig-frame" title="Signature preview"
  1461. src="/inbox/signatures/frame?mailbox=${encodeURIComponent(outgoing.from)}"
  1462. sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>`
  1463. : ''
  1464. }
  1466. ${
  1467. staged.length
  1468. ? `<p class="compose-meta"><b>${staged.length} ${plural(staged.length, 'attachment')}</b>,
  1469. going out with it:</p>
  1470. ${map(
  1471. staged,
  1472. (f) => `<div class="att-row">
  1473. <span class="n">${esc(f.name)}</span>
  1474. <span class="s">${esc(fileSize(Math.floor((f.b64.length * 3) / 4)))}</span>
  1475. <span class="why">${esc(f.mimeType)}</span>
  1476. </div>`,
  1477. )}`
  1478. : `<p class="compose-meta">No attachments.</p>`
  1479. }
  1481. <p class="compose-meta">
  1482. ${
  1483. orig
  1484. ? outgoing.inReplyTo
  1485. ? 'It will thread under the original in the recipient&rsquo;s mail client.'
  1486. : 'The original carried no Message-ID, so this will arrive as a <b>new conversation</b> rather than threaded. It still goes to the right person.'
  1487. : 'This is a new message: it carries no threading headers and will start its own conversation.'
  1488. }<br>
  1489. ${
  1490. !orig
  1491. ? `The copy lands in <b>${esc(outgoing.from)}</b>&rsquo;s Sent folder.`
  1492. : sameMailbox
  1493. ? `The copy lands in <b>${esc(outgoing.from)}</b>&rsquo;s Sent folder, in the same thread.`
  1494. : `You are replying from a different mailbox than the one this arrived in, so Gmail thread ids do not carry across. The recipient&rsquo;s client still threads it; <b>${esc(outgoing.from)}</b>&rsquo;s Sent folder will show it as a new thread.`
  1495. }<br>
  1496. Nothing about who clicked Send appears in the message itself. It is recorded on
  1497. <a href="/inbox/sent">this board</a> and nowhere the recipient can see.
  1498. </p>
  1500. <form method="post" action="/inbox/send" class="compose-actions" id="send-form">
  1501. ${
  1502. orig
  1503. ? `<input type="hidden" name="mailbox" value="${esc(orig.mailbox)}">
  1504. <input type="hidden" name="id" value="${esc(orig.id)}">
  1505. <input type="hidden" name="mode" value="reply">
  1506. <input type="hidden" name="all" value="${outgoing.cc ? '1' : '0'}">`
  1507. : `<input type="hidden" name="mode" value="new">
  1508. <input type="hidden" name="to" value="${esc(outgoing.to)}">
  1509. <input type="hidden" name="cc" value="${esc(outgoing.cc ?? '')}">
  1510. <input type="hidden" name="subject" value="${esc(outgoing.subject)}">`
  1511. }
  1512. <input type="hidden" name="nonce" value="${esc(nonce)}">
  1513. <input type="hidden" name="from" value="${esc(outgoing.from)}">
  1514. <input type="hidden" name="body" value="${esc(outgoing.text)}">
  1515. ${
  1516. // The files themselves, base64, crossing the confirmation step in
  1517. // the form rather than in the board's storage. See StagedAttachment
  1518. // in the Worker for why not KV. The send route decodes and
  1519. // re-applies every cap before it calls Gmail.
  1520. staged.length
  1521. ? `<input type="hidden" name="staged" value="${esc(JSON.stringify(staged))}">`
  1522. : ''
  1523. }
  1524. <button class="msg-btn" type="submit">Send it</button>
  1525. <a class="msg-btn" href="${backHref}">Cancel</a>
  1526. </form>
  1527. </div>
  1528. </div>
  1529. </section>
  1530. <script>(function(){var f=document.getElementById('send-form');if(!f)return;
  1531. f.addEventListener('submit',function(){var b=f.querySelector('button[type=submit]');
  1532. if(b){b.disabled=true;b.textContent='Sending...';}});})();</script>`
  1533. }
  1535. /**
  1536. * The board's record of what it sent. Append-only, deliberately.
  1537. *
  1538. * Every other piece of state this board owns is reversible from the page that
  1539. * wrote it. This one is not, and that is the point: it records that something
  1540. * irreversible happened. A failed attempt is here too; an attempt that left no
  1541. * trace would be the one worth hiding.
  1542. */
  1543. export function sentPage(
  1544. rows: SendRecord[],
  1545. truncated: boolean,
  1546. ref: SendRecord | null,
  1547. dup: boolean,
  1548. ): string {
  1549. const detail = ref
  1550. ? `<div class="card sent-detail" style="padding:20px 24px;margin:0 0 16px">
  1551. ${dup ? `<p class="note"><b>This reply was already submitted.</b> It was not sent again.</p>` : ''}
  1552. <p class="compose-meta" style="margin-top:0">
  1553. <span class="st ${esc(ref.outcome)}">${esc(ref.outcome)}</span><br>
  1554. From <b>${esc(ref.from)}</b> to <b>${esc(ref.to)}</b><br>
  1555. ${
  1556. // Three states, not two. `undefined` is a row written before the
  1557. // record had a Cc field; null is a row that recorded "no Cc". Rendering the first as the second would make
  1558. // this audit log claim something about a send it never observed.
  1559. ref.cc === undefined
  1560. ? 'Cc <span class="why">not recorded; this row predates reply-all</span><br>'
  1561. : ref.cc
  1562. ? `Cc <b>${esc(ref.cc)}</b><br>`
  1563. : 'Cc none<br>'
  1564. }
  1565. ${
  1566. ref.mode === 'new'
  1567. ? 'A <b>new message</b>, not a reply: the recipients were typed on this board.<br>'
  1568. : ''
  1569. }
  1570. Subject ${esc(ref.subject)}<br>
  1571. ${
  1572. ref.attachments === undefined
  1573. ? '<span class="why">Attachments not recorded; this row predates them.</span><br>'
  1574. : ref.attachments.length
  1575. ? `${ref.attachments.length} ${plural(ref.attachments.length, 'attachment')}:
  1576. ${ref.attachments.map((a) => `${esc(a.name)} (${esc(fileSize(a.size))})`).join(', ')}<br>`
  1577. : 'No attachments<br>'
  1578. }
  1579. By ${esc(ref.by)} at ${esc(localStamp(ref.at))} CT
  1580. </p>
  1581. ${
  1582. ref.outcome === 'sent'
  1583. ? `<p class="compose-meta">Gmail accepted it (message
  1584. <span class="err">${esc(ref.gmailId ?? '–')}</span>). The copy is in
  1585. <b>${esc(ref.from)}</b>&rsquo;s Sent folder in Gmail, which is the record that
  1586. outlives this board.</p>`
  1587. : ref.outcome === 'failed'
  1588. ? `<p class="compose-meta"><b>It was not sent.</b>
  1589. <span class="err">${esc(ref.error ?? 'no reason recorded')}</span></p>
  1590. <p class="compose-meta">Any of these could produce that, and none of them is
  1591. being picked for you:</p>
  1592. <ul class="compose-meta">${map(ref.candidates, (c) => `<li>${esc(c)}</li>`)}</ul>`
  1593. : `<p class="compose-meta"><b>Submitted, with no outcome recorded.</b> That is not
  1594. the same as failed and not the same as sent. Either the Worker was torn down
  1595. between the send and the record, or the record has not propagated yet
  1596. (KV is eventually consistent, up to about a minute). <b>Check
  1597. ${esc(ref.from)}&rsquo;s Sent folder in Gmail before resending.</b></p>`
  1598. }
  1599. </div>`
  1600. : ''
  1602. return `<section class="section">
  1603. <div class="section-head"><h2>Sent from this board</h2></div>
  1604. ${detail}
  1605. <div class="card" style="padding:16px 24px 20px">
  1606. ${
  1607. rows.length
  1608. ? `${map(
  1609. rows,
  1610. (r) => `<div class="sent-row">
  1611. <span class="st ${esc(r.outcome)}">${esc(r.outcome)}</span>
  1612. <span><b>${esc(r.from)}</b> &rarr; ${esc(r.to)}${
  1613. r.cc ? ` <span class="note">+${r.cc.split(',').length} cc</span>` : ''
  1614. }<br>
  1615. <span class="note">${esc(r.subject)} · by ${esc(r.by)}${
  1616. // The listing reads KV metadata, which carries a count
  1617. // rather than the names (1,024-byte cap). Null means the
  1618. // count was not recorded; zero prints nothing at all.
  1619. r.attachmentCount ? ` · ${r.attachmentCount} ${plural(r.attachmentCount, 'file')}` : ''
  1620. }</span></span>
  1621. <span class="note" style="text-align:right">${esc(localDay(r.at))}</span>
  1622. </div>`,
  1623. )}
  1624. ${
  1625. truncated
  1626. ? `<p class="note" style="margin-top:12px">Showing the newest ${rows.length}.
  1627. There are more; this list is capped, not complete.</p>`
  1628. : ''
  1629. }`
  1630. : `<p class="empty">Nothing has been sent from this board. That is zero replies, not a
  1631. failed read: the record is written on every attempt, including failures.</p>`
  1632. }
  1633. <p class="note" style="margin-top:14px">This is the board&rsquo;s own record and cannot be
  1634. edited or deleted from here. Nothing in it appears in the mail the recipient gets.
  1635. <a href="/inbox">Back to the inbox</a>.</p>
  1636. </div>
  1637. </section>`
  1638. }
  1640. /**
  1641. * The signatures page.
  1642. *
  1643. * The signature HTML never appears in this document. Same rule, and the same
  1644. * reason, as a sender's message HTML: it is user-supplied markup, so it is
  1645. * rendered only through the sandboxed frame route and in the outgoing MIME. A
  1646. * test asserts that a signature containing an onerror handler is absent from
  1647. * this page and present in the frame response.
  1648. */
  1649. export function signaturesPage(
  1650. mailboxes: Mailbox[],
  1651. sigs: SignatureStore,
  1652. sendable: string[],
  1653. rejected: { mailbox: string; over: number } | null,
  1654. ): string {
  1655. return `<section class="section">
  1656. <div class="section-head"><h2>Signatures</h2></div>
  1657. <div class="card" style="padding:18px 24px 22px">
  1658. <p class="note" style="margin-top:0">One HTML signature per mailbox, appended to every
  1659. reply that goes out from it. Paste the HTML, or upload a <code>.html</code> file.
  1660. <b>Host your logo and link to it</b>: an embedded <code>data:</code> image blows past
  1661. the ${SIGNATURE_CAP.toLocaleString()}-character cap and Gmail does not render one in
  1662. received mail anyway. Editing a signature here is reversible; the replies already sent
  1663. with the old one are not.</p>
  1664. ${
  1665. rejected
  1666. ? `<p class="note"><b>Not saved.</b> The signature for ${esc(rejected.mailbox)} was
  1667. ${rejected.over.toLocaleString()} characters, over the
  1668. ${SIGNATURE_CAP.toLocaleString()} cap. Nothing was written; the previous
  1669. signature, if any, is untouched.</p>`
  1670. : ''
  1671. }
  1672. ${
  1673. sigs.ok
  1674. ? ''
  1675. : `<div class="inbox-fail"><div class="strip"></div><div class="in">
  1676. <b>The signature store could not be read.</b>
  1677. <div style="margin-top:4px"><span class="err">${esc(sigs.error)}</span></div>
  1678. <div style="margin-top:4px;color:var(--text-muted)">Replies go out with no
  1679. signature until this is fixed. That is a failed read, not "none set"; the
  1680. saved signatures are not gone.</div>
  1681. </div></div>`
  1682. }
  1683. ${map(mailboxes, (m) => {
  1684. const sig = sigs.ok ? sigs.map[m.email] : undefined
  1685. const may = sendable.includes(m.email)
  1686. return `<div class="sig-card">
  1687. <h3>${esc(m.label)} <span class="note">&lt;${esc(m.email)}&gt;</span></h3>
  1688. <p class="note" style="margin:0 0 8px">${
  1689. !sigs.ok
  1690. ? 'Unknown: the store could not be read.'
  1691. : sig
  1692. ? `Set by ${esc(sig.by)} on ${esc(localDay(sig.at))} · ${sig.html.length.toLocaleString()} characters`
  1693. : 'Not set. Replies from this mailbox go out without a signature.'
  1694. }</p>
  1695. ${
  1696. sigs.ok && sig
  1697. ? `<iframe class="sig-frame" title="Signature preview for ${esc(m.email)}"
  1698. src="/inbox/signatures/frame?mailbox=${encodeURIComponent(m.email)}"
  1699. sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>`
  1700. : ''
  1701. }
  1702. ${
  1703. may
  1704. ? `<form method="post" action="/inbox/signatures" enctype="multipart/form-data" style="margin-top:10px">
  1705. <input type="hidden" name="mailbox" value="${esc(m.email)}">
  1706. <input type="hidden" name="op" value="set">
  1707. <textarea class="compose-body" name="html" style="min-height:110px"
  1708. placeholder="Paste the signature HTML. Leaving it empty and saving clears the signature."></textarea>
  1709. <div class="compose-actions">
  1710. <input type="file" name="file" accept=".html,.htm,text/html">
  1711. <button class="msg-btn" type="submit">Save</button>
  1712. </div>
  1713. </form>
  1714. ${
  1715. sigs.ok && sig
  1716. ? `<form method="post" action="/inbox/signatures" style="margin-top:6px">
  1717. <input type="hidden" name="mailbox" value="${esc(m.email)}">
  1718. <input type="hidden" name="op" value="clear">
  1719. <button class="msg-btn" type="submit">Clear it</button>
  1720. </form>`
  1721. : ''
  1722. }`
  1723. : `<p class="note" style="margin:8px 0 0">You may not send as this mailbox, so you
  1724. may not set its signature. Send grants live in <code>config/inbox.ts</code>
  1725. (<code>INBOX_SENDERS</code>).</p>`
  1726. }
  1727. </div>`
  1728. })}
  1729. <p class="note"><a href="/inbox">Back to the inbox</a> · <a href="/inbox/sent">What this board has sent</a></p>
  1730. </div>
  1731. </section>`
  1732. }
  1734. /**
  1735. * One mailbox's answer to a live search.
  1736. *
  1737. * Failure is per mailbox, like every read on this tab. Searching seven
  1738. * mailboxes where one has a dead token must return six results and name the
  1739. * seventh, not an error page, and not a short list that looks complete.
  1740. */
  1741. export interface SearchHit {
  1742. mailbox: string
  1743. ok: boolean
  1744. error: string | null
  1745. messages: InboxMessage[]
  1746. /** True when more matched than this page fetched. */
  1747. truncated: boolean
  1748. }
  1750. /** Per-mailbox cap on a live search. Enough to find one; not a second inbox. */
  1751. export const SEARCH_RESULT_CAP = 50
  1753. /**
  1754. * Live search results.
  1755. *
  1756. * The corpus is different from the rest of the tab and the page says so
  1757. * plainly: no 30-day window, because reaching older mail is the whole point,
  1758. * and still inbox-only, because archived mail, Sent, Spam and Trash have never
  1759. * been on this board and a search box is not where that should quietly change.
  1760. *
  1761. * Results are not read-marked, filtered or replied-chipped. Those states belong
  1762. * to the board's own list of what it holds; a search reaches past that list,
  1763. * and a row here that silently lacked a chip would read as "not replied" rather
  1764. * than "not known".
  1765. */
  1766. export function searchResultsPage(
  1767. query: string,
  1768. hits: SearchHit[],
  1769. mailboxes: Mailbox[],
  1770. scopedTo: string | null,
  1771. ): string {
  1772. const label = (email: string) => mailboxes.find((m) => m.email === email)?.label ?? email
  1773. const found = hits.flatMap((h) => h.messages).sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0))
  1774. const failed = hits.filter((h) => !h.ok)
  1775. const truncated = hits.filter((h) => h.ok && h.truncated)
  1777. return `<section class="section">
  1778. <div class="inbox-layout" style="grid-template-columns:1fr">
  1779. <div class="card" style="overflow:hidden">
  1780. <div class="rule"></div>
  1781. <div style="padding:18px 16px 12px;border-bottom:1px solid var(--border-default)">
  1782. <h1 style="font-family:var(--font-display);font-size:22px;color:var(--text-body)">
  1783. ${found.length}${truncated.length ? '+' : ''} ${plural(found.length, 'result')}
  1784. </h1>
  1785. <p class="note" style="margin-top:4px">
  1786. For <b>${esc(query)}</b> in ${
  1787. scopedTo ? `<b>${esc(label(scopedTo))}</b>` : `all ${hits.length} ${plural(hits.length, 'mailbox', 'mailboxes')} you may read`
  1788. }.
  1789. Asked of Gmail just now, so this reaches <b>past the 30 days</b> the board holds,
  1790. and stays inside the inbox: archived mail, Sent, Spam and Trash are not searched.
  1791. </p>
  1792. <p class="note" style="margin-top:6px"><a href="/inbox">&larr; Back to the inbox</a></p>
  1793. </div>
  1794. <div style="padding:0 0 8px">
  1795. ${
  1796. failed.length
  1797. ? `<div class="inbox-fail">
  1798. <div class="strip" aria-hidden="true"></div>
  1799. <div class="in">
  1800. <b>${failed.length} ${plural(failed.length, 'mailbox', 'mailboxes')} could not be searched.</b>
  1801. ${map(failed, (h) => `<div style="margin-top:4px">${esc(h.mailbox)}: <span class="err">${esc(h.error ?? 'unknown')}</span></div>`)}
  1802. <div style="margin-top:4px;color:var(--text-muted)">Matches in ${plural(failed.length, 'it', 'them')} are missing from these results, not absent.</div>
  1803. </div>
  1804. </div>`
  1805. : ''
  1806. }
  1807. ${
  1808. truncated.length
  1809. ? `<div style="padding:10px 16px;font-size:12px;color:var(--text-muted);border-bottom:1px solid var(--hairline)">
  1810. More matched than are shown: capped at ${SEARCH_RESULT_CAP} per mailbox
  1811. (${truncated.map((h) => esc(h.mailbox)).join(', ')}). Narrow the search to see the rest.
  1812. </div>`
  1813. : ''
  1814. }
  1815. ${
  1816. found.length
  1817. ? map(found, (m) => messageRow(m, label, null, false, false))
  1818. : `<p class="empty" style="padding:20px 16px">Nothing in ${
  1819. scopedTo ? esc(label(scopedTo)) : 'any mailbox you may read'
  1820. } matches that. Gmail was asked, so this is an empty result rather than an unloaded one.</p>`
  1821. }
  1822. </div>
  1823. <div style="padding:10px 16px 14px;font-size:11.5px;line-height:1.6;color:var(--text-muted);border-top:1px solid var(--hairline)">
  1824. These rows carry no read, filter or replied marks. Those belong to the board&rsquo;s own
  1825. list of what it holds; a search reaches past it, so a missing chip here would mean
  1826. <b>not known</b> rather than <b>not done</b>. Open a message to act on it.
  1827. </div>
  1828. </div>
  1829. </div>
  1830. </section>`
  1831. }