@novacraft-engineering/mailbox 0.2.1 → 0.4.2

package/app/api/mail/emails/route.ts

@@ -2,6 +2,7 @@ import { BRAND } from '@/lib/brand'
 import { NextResponse } from 'next/server'
 import { matchesQuery, parseQuery } from '@/app/mail/search'
 import { FORWARD_RECIPIENTS, mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { readSentFlags, setSentFlags, readPixelOpens, readSentMeta, setSentMetaOwner, listAccounts, readSentArchive, type SentFlags } from '@/lib/mailbox'
 
 const SHARED_ADDRESS = (process.env.RESEND_FROM ?? BRAND.supportEmail).replace(/^.*<|>$/g, '').trim().toLowerCase()
@@ -12,7 +13,7 @@ function fromAddressOf(email: SentEmail): string {
 
 export const runtime = 'nodejs'
 
-type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string }
+type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string; attachmentCount: number }
 
 const KNOWN_AUTO_SUBJECTS = new Set([`Reset your ${BRAND.name} Mail password`])
 
@@ -65,11 +66,12 @@ export async function GET(req: Request) {
     createdAt: item.createdAt,
     scheduledAt: null,
     lastEvent: item.lastEvent ?? '',
+    attachmentCount: item.attachmentCount ?? 0,
   }))
 
-  // Sent mail is scoped the same way the inbox is: to the signed-in mailbox, whatever
-  // the role. Administering accounts does not carry the right to read someone's sends.
-  const ownerScope: string = account.address ?? ' no-address'
+  // Sent mail is scoped the same way the inbox is, including the one address a
+  // deployment may name as able to read every account.
+  const ownerScope = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
 
   // Ownership is the sender identity: the `from` address if it's an accessor's, else the
   // shared inbox (admin). This attributes historical sends (all from hello@) correctly.
@@ -106,7 +108,7 @@ export async function GET(req: Request) {
         size: null,
         read: true,
         starred: Boolean(flagOf[email.id]?.starred),
-        hasAttachment: false,
+        hasAttachment: (email.attachmentCount ?? 0) > 0,
         labels: [],
         folder: flagOf[email.id]?.trashed ? 'trash' : flagOf[email.id]?.archived ? 'archive' : 'sent',
       }),

package/app/api/mail/inbox/counts/route.ts

@@ -1,14 +1,15 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { countFolders, countFoldersCached } from '@/lib/mailbox'
 
 const COUNTS_TTL_MS = 20 * 1000
 const countsCache = new Map<string, { at: number; value: Awaited<ReturnType<typeof countFolders>> }>()
-async function cachedCounts(owner: string, fresh: boolean) {
-  const hit = countsCache.get(owner)
+async function cachedCounts(owner: string | null, fresh: boolean) {
+  const hit = countsCache.get(owner ?? '*all')
   if (!fresh && hit && Date.now() - hit.at < COUNTS_TTL_MS) return hit.value
-  const value = fresh ? await countFolders(owner) : await countFoldersCached(owner)
-  countsCache.set(owner, { at: Date.now(), value })
+  const value = fresh ? await countFolders(owner ?? undefined) : await countFoldersCached(owner)
+  countsCache.set(owner ?? '*all', { at: Date.now(), value })
   return value
 }
 
@@ -21,6 +22,6 @@ export async function GET(req: Request) {
   // Counts describe the signed-in mailbox, matching what the list will actually show.
   const account = await resolveAccount(req)
   const fresh = new URL(req.url).searchParams.get('fresh') === '1'
-  const counts = await cachedCounts(account.address ?? ' no-address', fresh)
+  const counts = await cachedCounts(scopeFor(account, new URL(req.url).searchParams.get('mailbox')), fresh)
   return NextResponse.json({ ok: true, counts })
 }

package/app/api/mail/inbox/route.ts

@@ -1,6 +1,7 @@
 import { createHmac, timingSafeEqual } from 'node:crypto'
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, isLocalOrigin, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { searchInbox, appendEvent, appendInbound, recordContact, setInboundFlags, setInboundFlagsForThread, setInboundLabels, setThreadSnooze, setInboxOwner, readInbox, claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent, pruneWebhookEvents, type InboundFlags } from '@/lib/mailbox'
 import { attributeOwner, forwardToAccounts, ingestReceived, parseSender } from '@/lib/receive'
 import { isBrevoInbound, normalizeBrevoInbound } from '@/lib/mail-provider'
@@ -11,9 +12,9 @@ export async function GET(req: Request) {
   const guard = await mailAuthGuard(req)
   if (guard) return guard
   const account = await resolveAccount(req)
-  // Everyone sees their own mailbox and only their own. Administering accounts is a
-  // separate power from reading other people's mail, so an admin is scoped here too.
-  const ownerFilter: string = account.address ?? ' no-address'
+  // Everyone sees their own mailbox and only their own, unless this deployment names one
+  // address that reads every account. Administering accounts stays a separate power.
+  const ownerFilter = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
   // A query or an explicit page means the caller wants the searchable, paged path.
   // Without either, fall back to readInbox so existing callers are unaffected.
   const params = new URL(req.url).searchParams
@@ -29,7 +30,7 @@ export async function GET(req: Request) {
     const folder = (['inbox', 'archive', 'trash', 'starred', 'snoozed'] as const).find(f => f === folderParam)
     const { rows, total, nextCursor } = await searchInbox({
       text,
-      owner: ownerFilter,
+      owner: ownerFilter ?? undefined,
       folder,
       limit: Number(limitRaw ?? 50) || 50,
       offset,
@@ -37,7 +38,7 @@ export async function GET(req: Request) {
       // Counting scans the whole match. Unfiltered, the sidebar already has this number
       // from countFolders, so only a search — whose match nothing else knows — pays for it.
       threadId,
-      withTotal: !cursor && Boolean(text),
+      withTotal: !cursor && Boolean(text || params.get('from') || params.get('to') || params.get('label') || params.get('unread') || params.get('starred') || params.get('attachment')),
       unread: params.get('unread') === '1' ? true : undefined,
       starred: params.get('starred') === '1' ? true : undefined,
       hasAttachment: params.get('attachment') === '1' || undefined,

package/app/api/mail/mailboxes/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server'
+import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { listAccounts } from '@/lib/mailbox'
+import { readsAllInboxes } from '@/lib/scope'
+
+export const runtime = 'nodejs'
+
+export async function GET(req: Request) {
+  const guard = await mailAuthGuard(req)
+  if (guard) return guard
+  const account = await resolveAccount(req)
+
+  if (!readsAllInboxes(account)) {
+    const address = account.address
+    return NextResponse.json({
+      ok: true,
+      all: false,
+      mailboxes: address ? [{ address, name: account.name ?? address }] : [],
+    })
+  }
+
+  const accounts = await listAccounts()
+  const mailboxes = accounts
+    .filter(entry => entry.address && entry.status === 'active')
+    .map(entry => ({ address: entry.address as string, name: entry.name || entry.email }))
+  return NextResponse.json({ ok: true, all: true, mailboxes })
+}

package/app/api/mail/threads/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
 import { listThreads, threadsLive, type ThreadFolder } from '@/lib/mailbox'
 
 export const runtime = 'nodejs'
@@ -13,6 +14,6 @@ export async function GET(req: Request) {
   const folderParam = url.searchParams.get('folder')
   const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed'] as const).find(f => f === folderParam) ?? 'inbox'
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 500) || 500, 1000)
-  const page = await listThreads(account.address ?? ' no-address', folder, limit, url.searchParams.get('cursor'))
+  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'))
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })
 }

package/app/mail/MailSelect.tsx

@@ -41,7 +41,7 @@ export default function MailSelect({
   label,
 }: {
   value: string
-  options: Array<{ value: string; label: string; closed?: string }>
+  options: Array<{ value: string; label: string; closed?: string; icon?: React.ReactNode; hint?: string }>
   onChange: (value: string) => void
   ariaLabel: string
   buttonClassName?: string
@@ -125,6 +125,7 @@ export default function MailSelect({
           onClick={toggle}
         >
           {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
+          {current?.icon && <span className={styles.selectOptionIcon} aria-hidden>{current.icon}</span>}
           {label && <span className={styles.selectLabel}>{label}</span>}
           <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{shown ?? placeholder}</span>
           {CHEVRON}
@@ -147,7 +148,15 @@ export default function MailSelect({
                 setOpen(false)
               }}
             >
-              {option.label}
+              {option.icon && <span className={styles.selectOptionIcon} aria-hidden>{option.icon}</span>}
+              {option.hint ? (
+                <span className={styles.selectOptionText}>
+                  <span className={styles.selectOptionLabel}>{option.label}</span>
+                  <span className={styles.selectOptionHint}>{option.hint}</span>
+                </span>
+              ) : (
+                option.label
+              )}
             </button>
           ))}
         </div>

package/app/mail/Ticker.tsx

@@ -3,17 +3,49 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 import styles from './page.module.css'
 
+export const TICKER_SPOTS = [
+  { group: 'Mail list', on: false, spots: [['listFrom', 'Sender'], ['listSubject', 'Subject'], ['listSnippet', 'Preview']] },
+  { group: 'Conversation', on: true, spots: [['threadFrom', 'Sender'], ['threadSnippet', 'Preview']] },
+  { group: 'Reader', on: true, spots: [['readerFrom', 'From'], ['readerTo', 'To and Cc']] },
+  { group: 'Attachments', on: true, spots: [['attachName', 'File names in the row'], ['attachChip', 'File names in the composer']] },
+  { group: 'Reply bar', on: true, spots: [['replyRecipients', 'Recipients']] },
+] as const
+
+export type TickerSpot = (typeof TICKER_SPOTS)[number]['spots'][number][0]
+export type TickerSettings = Partial<Record<TickerSpot, boolean>>
+
+const DEFAULT_ON = new Map<string, boolean>(TICKER_SPOTS.flatMap(group => group.spots.map(([spot]) => [spot, group.on])))
+
+export function tickerDefault(spot: TickerSpot): boolean {
+  return DEFAULT_ON.get(spot) ?? true
+}
+
+export function tickerSettingsFrom(raw: unknown): TickerSettings {
+  const kept: TickerSettings = {}
+  if (raw && typeof raw === 'object') {
+    for (const [spot, value] of Object.entries(raw)) {
+      if (DEFAULT_ON.has(spot) && typeof value === 'boolean') kept[spot as TickerSpot] = value
+    }
+  }
+  return kept
+}
+
 /**
  * One line of text that, when it does not fit, glides back and forth instead of ending in
  * an ellipsis. Measured on mount and whenever the host or its text changes size.
  */
-export default function Ticker({ className, title, children }: { className?: string; title?: string; children: ReactNode }) {
+export default function Ticker({ className, title, enabled = true, children }: { className?: string; title?: string; enabled?: boolean; children: ReactNode }) {
   const host = useRef<HTMLSpanElement>(null)
   const text = useRef<HTMLSpanElement>(null)
   useEffect(() => {
     const outer = host.current
     const inner = text.current
     if (!outer || !inner) return
+    if (!enabled) {
+      delete outer.dataset.ticker
+      outer.style.removeProperty('--ticker-shift')
+      return
+    }
     const measure = () => {
       const shift = inner.scrollWidth - outer.clientWidth
       if (shift > 4) {
@@ -31,7 +63,7 @@ export default function Ticker({ className, title, children }: { className?: str
     observer.observe(outer)
     observer.observe(inner)
     return () => observer.disconnect()
-  }, [children])
+  }, [children, enabled])
   return (
     <span ref={host} className={`${className ?? ''} ${styles.tickerHost}`} title={title}>
       <span ref={text} className={styles.tickerText}>{children}</span>

package/app/mail/page.module.css

@@ -196,6 +196,7 @@
 .folderActive {
   background: var(--nc-ink-3);
   color: var(--nc-fg-1);
+  box-shadow: inset 0 0 0 1.5px var(--nc-violet-500);
 }
 .folder svg { width: 16px; height: 16px; flex-shrink: 0; }
 /* Total for the folder — plain and muted. */
@@ -488,6 +489,39 @@
   gap: 10px;
   padding: 18px 18px 12px;
 }
+.mailboxPick {
+  display: flex;
+  align-items: center;
+  padding: 0 18px 10px;
+}
+.mailboxPickBtn {
+  max-width: 100%;
+  min-height: 36px;
+}
+.selectOption {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.selectOptionIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+}
+.selectOptionIcon svg { width: 18px; height: 18px; }
+.selectOptionText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.selectOptionLabel { font-weight: 600; }
+.selectOptionHint {
+  color: var(--nc-fg-3, #8a8f99);
+  font: 400 11.5px/1.2 var(--nc-font-mono);
+}
+@media (max-width: 760px) {
+  .mailboxPickBtn { min-height: 44px; }
+}
+
 .listTitle {
   font-family: var(--nc-font-display);
   font-weight: 700;
@@ -527,6 +561,12 @@
   cursor: pointer;
 }
 .crossFolderHint:hover { border-color: var(--nc-violet-500); }
+.emptyNudge {
+  align-self: center;
+  margin: 2px 0 0;
+  padding: 8px 14px;
+  font-size: 13px;
+}
 .refreshBtn svg { width: 14px; height: 14px; }
 .filterChip {
   margin-left: auto;
@@ -1717,7 +1757,7 @@
 .itemSubject { display: flex; align-items: center; gap: 4px; }
 .itemSubjectText { flex: 1; }
 .threadMsgFrom { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
-.threadMsgFromText { flex: 1; }
+.threadMsgFromText { flex: 0 1 auto; min-width: 0; }
 .rteColourDot {
   display: inline-block;
   width: 16px;
@@ -2560,6 +2600,40 @@
   overflow: hidden;
   background: transparent;
 }
+.quoteLine {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 2px 0 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.quoteLineRule {
+  flex: 1;
+  height: 1px;
+  background: var(--nc-line-1);
+}
+.quoteLineLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 4px 11px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-3);
+  font: 500 11.5px/1 var(--nc-font-sans);
+  transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
+}
+.quoteLineLabel svg { width: 11px; height: 8px; }
+.quoteLine:hover .quoteLineLabel { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.quoteLine[aria-expanded='true'] .quoteLineLabel svg { transform: rotate(180deg); }
+
+.threadMsgStatic .threadMsgHead { cursor: default; }
 .threadMsg + .threadMsg { border-top: 1px solid var(--nc-line-1); }
 .threadMsgOpen .threadMsgHead { border-bottom: 1px solid var(--nc-line-1); }
 .threadMsgHead {
@@ -2601,6 +2675,42 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.threadMsgHint {
+  flex-shrink: 0;
+  color: var(--nc-fg-4);
+  font: 400 11px/1 var(--nc-font-sans);
+  transition: color var(--dur-fast) var(--nc-ease-out);
+}
+.threadMsgHead:hover .threadMsgHint { color: var(--nc-fg-3); }
+
+.threadMsgRecips {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  margin-top: 3px;
+  overflow: hidden;
+}
+.threadMsgRecipsText {
+  /* Hugs the addresses so Details sits beside them rather than out at the far margin. */
+  flex: 0 1 auto;
+  min-width: 0;
+  font: 400 11.5px/1.35 var(--nc-font-sans);
+  color: var(--nc-fg-3);
+}
+.threadMsgDetails {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--nc-violet-500);
+  font: 500 11px/1.35 var(--nc-font-sans);
+  cursor: pointer;
+}
+.threadMsgDetails:hover { text-decoration: underline; }
+
 .threadMsgDate {
   font: 400 11px/1 var(--nc-font-mono);
   color: var(--nc-fg-3);
@@ -3945,6 +4055,18 @@
   font: 500 14px/1.4 var(--nc-font-sans);
   color: var(--nc-fg-1);
 }
+.tickerGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+}
+.tickerGroupName {
+  font: 600 11px/1 var(--nc-font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--nc-fg-3);
+}
 .settingsToggle input {
   width: 16px;
   height: 16px;