@novacraft-engineering/mailbox 0.4.2 → 0.4.3

package/app/mail/page.tsx

@@ -8,7 +8,7 @@ import { parseQuery, matchesQuery, serverSearchParams, splitForServer } from './
 import { useConfirm } from './ConfirmDialog'
 import { subscribePush, unsubscribePush, useInstall, useNotifications } from './pwa'
 import RichEditor from './RichEditor'
-import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel } from '@/lib/email-html'
+import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel, healGooglePrivateImages } from '@/lib/email-html'
 import { BUILTIN_FONTS, DEFAULT_LINE_SPACING, EMPTY_FONT, FONT_SIZES, LINE_SPACINGS, fontFaceCss, fontStack, lineSpacingOf, type BaseFont, type CustomFont, paragraphGap } from '@/lib/fonts'
 import MailSelect, { GLYPH } from './MailSelect'
 
@@ -923,6 +923,14 @@ function pastedMarkdown(event: React.ClipboardEvent): string | null {
  */
 const OWN_IMAGE_HOSTS = `${CLIENT_BRAND.websiteUrl} ${CLIENT_BRAND.publicUrl}`
 
+/** Mail one of our own addresses sent, so a signature logo in it was ours to restore. */
+function sentByUs(address: string): boolean {
+  const email = (address.match(/<([^>]+)>/)?.[1] ?? address).trim().toLowerCase()
+  if (!email.includes('@')) return false
+  const domain = email.slice(email.lastIndexOf('@') + 1)
+  return MAIL_ADDRESSES.includes(email) || LOGIN_DOMAINS.includes(domain)
+}
+
 // When allowRemote is false the CSP blocks remote fetches so tracking pixels never load.
 function frameHtml(html: string, allowRemote: boolean, spacing = DEFAULT_LINE_SPACING, dark = false): string {
   const csp = allowRemote
@@ -1668,6 +1676,8 @@ export default function DevMailPage() {
     setThreadsResolved(false)
     threadsFetch.current = null
     threadsLoadedFolder.current = null
+    setInboxEmails([])
+    setServerCounts(null)
   }, [mailboxQuery])
   const loadThreads = useCallback(async () => {
     if (!isLoggedIn) return
@@ -2143,13 +2153,18 @@ export default function DevMailPage() {
    * is loaded describes the page, not the mailbox, and grows as you scroll.
    */
   const lastCountAt = useRef(0)
+  // Keyed on the mailbox as well as the clock: the throttle is there to absorb a burst of
+  // actions on one mailbox, and must never swallow the recount that a switch requires.
+  const lastCountKey = useRef<string | null>(null)
   const loadCounts = useCallback(async (force = false) => {
     // Counting reads the whole mailbox — about seventy thousand rows here — so it runs when
     // the figures can actually have changed, not on the periodic refresh. A minute's
     // throttle keeps a burst of actions from re-counting once each.
-    if (!force && Date.now() - lastCountAt.current < 300000) return
-    if (!force && document.visibilityState !== 'visible') return
+    const sameMailbox = lastCountKey.current === mailboxQuery
+    if (!force && sameMailbox && Date.now() - lastCountAt.current < 300000) return
+    if (!force && sameMailbox && document.visibilityState !== 'visible') return
     lastCountAt.current = Date.now()
+    lastCountKey.current = mailboxQuery
     setCountsLoading(true)
     try {
       const params = new URLSearchParams(mailboxQuery.replace(/^\?/, ''))
@@ -2204,7 +2219,7 @@ export default function DevMailPage() {
   useEffect(() => {
     if (!isLoggedIn) return
     try {
-      const cached = localStorage.getItem(`${LS_INBOX_CACHE_KEY}:${email}`)
+      const cached = localStorage.getItem(`${LS_INBOX_CACHE_KEY}:${email}${mailboxQuery}`)
       if (!cached) return
       const saved = JSON.parse(cached) as { at?: number; rows?: InboundEmail[]; threads?: ConversationRow[]; folder?: string; counts?: typeof serverCounts }
       if (saved?.counts) setServerCounts(current => current ?? saved.counts!)
@@ -2221,13 +2236,13 @@ export default function DevMailPage() {
       // A cache that will not parse is not worth a broken mailbox.
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoggedIn, email])
+  }, [isLoggedIn, email, mailboxQuery])
 
   useEffect(() => {
     if (!isLoggedIn || mailboxStale || inboxEmails.length === 0) return
     try {
       localStorage.setItem(
-        `${LS_INBOX_CACHE_KEY}:${email}`,
+        `${LS_INBOX_CACHE_KEY}:${email}${mailboxQuery}`,
         JSON.stringify({
           at: Date.now(),
           folder: threadFolder,
@@ -2239,7 +2254,7 @@ export default function DevMailPage() {
     } catch {
       // Storage full or blocked: the cache is an optimisation, never a requirement.
     }
-  }, [inboxEmails, threads, threadFolder, isLoggedIn, mailboxStale, email, serverCounts])
+  }, [inboxEmails, threads, threadFolder, isLoggedIn, mailboxStale, email, mailboxQuery, serverCounts])
 
   const typedOnce = useRef(false)
   useEffect(() => {
@@ -5574,7 +5589,10 @@ export default function DevMailPage() {
     }
     const split = splitQuotedTail(message.html)
     const quoteShown = quoteOpen.has(message.id)
-    const bodyHtml = split.tail && !quoteShown ? split.head : message.html
+    const bodyHtml = healGooglePrivateImages(
+      split.tail && !quoteShown ? split.head : message.html,
+      sentByUs(message.from) ? CLIENT_BRAND.markUrl : null,
+    )
     if (framed) {
       // Thread messages auto-size to content (whole conversation scrolls as one).
       // sandbox omits allow-scripts, so no email JS runs; CSP still blocks fetches.
@@ -5617,7 +5635,7 @@ export default function DevMailPage() {
         <iframe
           className={styles.threadFrame}
           sandbox="allow-same-origin"
-          srcDoc={frameHtml(detail.html, true, readerSpacing, resolvedTheme === 'dark')}
+          srcDoc={frameHtml(healGooglePrivateImages(detail.html, CLIENT_BRAND.markUrl), true, readerSpacing, resolvedTheme === 'dark')}
           title="Sent email"
           onLoad={event => {
             try {

package/lib/email-html.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict'
-import { inlineEmailStyles, htmlToPlainText, safeHref, dropUnreachableImages, outlookSafeImages } from './email-html.ts'
+import { inlineEmailStyles, htmlToPlainText, safeHref, dropUnreachableImages, outlookSafeImages, healGooglePrivateImages } from './email-html.ts'
 
 // A paragraph with no styling of its own gets the base inline style.
 assert.match(inlineEmailStyles('<p>Hello</p>'), /<p style="font-family:Arial[^"]*">Hello<\/p>/)
@@ -72,3 +72,19 @@ assert.ok(!centred.includes('data-align'), 'the editor marker is stripped')
 // A linked logo keeps its link, inside the cell rather than around the table.
 const linked = outlookSafeImages('<a href="https://x.test"><img src="https://x.test/m.png" style="display:block;width:100px;border:1px solid #000;"></a>')
 assert.match(linked, /<td[^>]*><a href="https:\/\/x\.test"><img/, 'the anchor sits inside the cell')
+
+// A Gmail-hosted signature logo cannot load outside that mailbox: drop it, or put ours back.
+assert.equal(
+  healGooglePrivateImages('<p>Hi</p><img src="https://ci3.googleusercontent.com/mail-sig/ABC"><p>Regards</p>'),
+  '<p>Hi</p><p>Regards</p>',
+)
+assert.equal(
+  healGooglePrivateImages('<img src="https://ci3.googleusercontent.com/mail-sig/ABC" alt="logo">', 'https://mail.example.com/brand/mark.png'),
+  '<img src="https://mail.example.com/brand/mark.png" alt="logo">',
+)
+// Entity-encoded query strings still match, and everything else is left alone.
+assert.equal(healGooglePrivateImages('<img src="https://mail.google.com/mail/u/0?ui=2&amp;ik=x">'), '')
+assert.equal(
+  healGooglePrivateImages('<img src="cid:abc"><img src="https://lh3.googleusercontent.com/real.png">'),
+  '<img src="cid:abc"><img src="https://lh3.googleusercontent.com/real.png">',
+)

package/lib/email-html.ts

@@ -112,6 +112,29 @@ export function dropUnreachableImages(html: string): string {
   })
 }
 
+/**
+ * Addresses Gmail serves only to the account that owns them.
+ *
+ * A signature logo written by Gmail lives on Google's own CDN, and Takeout exports the
+ * link but never the bytes. Outside that mailbox the address answers 400, so the picture
+ * has been broken since the day the mail was exported and can never load again.
+ */
+const GOOGLE_PRIVATE_IMAGE = /^https?:\/\/(?:ci\d*\.googleusercontent\.com\/mail-sig\/|mail\.google\.com\/mail\/|docs\.google\.com\/uc\?)/i
+
+/**
+ * Removes those pictures so the signature reads as text rather than a broken icon.
+ * When `mark` is given — only for mail one of our own addresses sent, where we know whose
+ * logo it was — the tenant's own mark is put back in its place instead.
+ */
+export function healGooglePrivateImages(html: string, mark?: string | null): string {
+  return html.replace(/<img\b[^>]*>/gi, tag => {
+    const src = /\bsrc\s*=\s*["']([^"']*)["']/i.exec(tag)?.[1]?.trim() ?? ''
+    if (!GOOGLE_PRIVATE_IMAGE.test(src)) return tag
+    if (!mark) return ''
+    return tag.replace(/\bsrc\s*=\s*["'][^"']*["']/i, `src="${mark}"`)
+  })
+}
+
 export function stripCidPlaceholders(text: string): string {
   return text
     .replace(/\[cid:[^\]\n]{0,300}\]/gi, '')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novacraft-engineering/mailbox",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A shared webmail app: one codebase, one deployment per mailbox. Threads, a rich composer with signatures, attachments on S3-compatible storage, sharing links, full-text search, web push and PWA install.",
   "keywords": [
     "webmail",