@novacraft-engineering/mailbox 0.4.27 → 0.4.29

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

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
 import { scopeFor } from '@/lib/scope'
-import { countFolders, countFoldersCached } from '@/lib/mailbox'
+import { countFilteredThreads, countFolders, countFoldersCached, inboxFiltersFor } from '@/lib/mailbox'
 
 /**
  * Counts come from the durable cache, which every write that moves mail clears. An extra
@@ -22,6 +22,16 @@ 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(scopeFor(account, new URL(req.url).searchParams.get('mailbox')), fresh)
-  return NextResponse.json({ ok: true, counts })
+  const owner = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
+  const [counts, filtered] = await Promise.all([
+    cachedCounts(owner, fresh),
+    inboxFiltersFor(account.email || 'local@dev').then(filters => countFilteredThreads(owner, filters)),
+  ])
+  // The cache is per mailbox and the rules are per person, so the rules come off afterwards.
+  const conversations = counts.conversations && {
+    ...counts.conversations,
+    inbox: Math.max(0, counts.conversations.inbox - filtered.total),
+    unread: Math.max(0, counts.conversations.unread - filtered.unread),
+  }
+  return NextResponse.json({ ok: true, counts: { ...counts, conversations, filtered } })
 }

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

@@ -7,6 +7,7 @@ import { presign } from '@/lib/r2'
 import { recordContact, recordPixel, recordSentMeta, recordSentMessage } from '@/lib/mailbox'
 import { scheduleSend } from '@/lib/scheduled'
 import { absoluteUrls, stripOwnPixel } from '@/lib/email-html'
+import { adaptiveEmail } from '@/lib/color-scheme'
 import { publicOrigin } from '@/lib/public-url'
 
 export const runtime = 'nodejs'
@@ -146,7 +147,7 @@ export async function POST(req: Request) {
   const origin = publicOrigin(req)
   const pixelId = randomUUID()
   const trackedHtml = body.html?.trim()
-    ? `${stripOwnPixel(absoluteUrls(body.html.trim(), origin))}<img src="${origin}/api/mail/pixel/${pixelId}" alt="" width="1" height="1" style="display:none;width:1px;height:1px;border:0" />`
+    ? adaptiveEmail(`${stripOwnPixel(absoluteUrls(body.html.trim(), origin))}<img src="${origin}/api/mail/pixel/${pixelId}" alt="" width="1" height="1" style="display:none;width:1px;height:1px;border:0" />`)
     : null
 
   // Thread the reply: In-Reply-To/References point at the inbound Message-ID so the

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

@@ -1,7 +1,7 @@
 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'
+import { inboxFiltersFor, listThreads, threadsLive, type ThreadFolder } from '@/lib/mailbox'
 
 export const runtime = 'nodejs'
 
@@ -12,8 +12,9 @@ export async function GET(req: Request) {
   const account = await resolveAccount(req)
   const url = new URL(req.url)
   const folderParam = url.searchParams.get('folder')
-  const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed', 'spam'] as const).find(f => f === folderParam) ?? 'inbox'
+  const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed', 'spam', 'filtered'] as const).find(f => f === folderParam) ?? 'inbox'
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 500) || 500, 1000)
-  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'))
+  const filters = folder === 'inbox' || folder === 'filtered' ? await inboxFiltersFor(account.email || 'local@dev') : []
+  const page = await listThreads(scopeFor(account, url.searchParams.get('mailbox')), folder, limit, url.searchParams.get('cursor'), filters)
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })
 }

package/app/layout.tsx

@@ -1,9 +1,14 @@
 import { BRAND } from '@/lib/brand'
+import { BRAND_ENV_KEYS } from '@/lib/brand.client'
 import type { Metadata, Viewport } from 'next'
 import type { CSSProperties, ReactNode } from 'react'
 import './globals.css'
 
-export const metadata: Metadata = {
+// One image serves every deployment, so nothing that names the brand may be settled at
+// build time: every page is rendered per request, from the environment it runs in.
+export const dynamic = 'force-dynamic'
+
+export const generateMetadata = (): Metadata => ({
   title: `${BRAND.name} Mail`,
   description: `${BRAND.name} team mailbox`,
   robots: { index: false, follow: false, nocache: true, googleBot: { index: false, follow: false } },
@@ -14,20 +19,30 @@ export const metadata: Metadata = {
   applicationName: `${BRAND.name} Mail`,
   appleWebApp: { capable: true, title: `${BRAND.name} Mail`, statusBarStyle: 'black-translucent' },
   formatDetection: { telephone: false },
-}
+})
 
-export const viewport: Viewport = {
+export const generateViewport = (): Viewport => ({
   themeColor: BRAND.colors.accent,
   viewportFit: 'cover',
   width: 'device-width',
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-}
+})
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <script
+          // Only the public brand settings, and escaped so a value can never close the tag.
+          dangerouslySetInnerHTML={{
+            __html: `window.__MAILBOX_BRAND_ENV__=${JSON.stringify(
+              Object.fromEntries(BRAND_ENV_KEYS.flatMap(key => (process.env[key] ? [[key, process.env[key]]] : []))),
+            ).replace(/</g, '\\u003c')}`,
+          }}
+        />
+      </head>
       <body
         style={{ ['--brand-mark' as string]: `url('${BRAND.chromeMarkUrl}')` } as CSSProperties}
       >

package/app/mail/InboxFilters.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import styles from './page.module.css'
+import MailSelect from './MailSelect'
+import { INBOX_FILTER_KINDS, normalizeInboxFilters, type InboxFilter, type InboxFilterKind } from '@/lib/inbox-filters'
+
+const FILTER_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
+  </svg>
+)
+
+const labelOf = (kind: InboxFilterKind) => INBOX_FILTER_KINDS.find(option => option.kind === kind)?.label ?? kind
+
+export default function InboxFilters({
+  filters,
+  counts,
+  showing,
+  onShowingChange,
+  onFiltersChange,
+}: {
+  filters: InboxFilter[]
+  counts: { total: number; unread: number } | null
+  showing: boolean
+  onShowingChange: (showing: boolean) => void
+  onFiltersChange: (filters: InboxFilter[]) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [kind, setKind] = useState<InboxFilterKind>('senderPrefix')
+  const [value, setValue] = useState('')
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointer = (event: PointerEvent) => {
+      const target = event.target as HTMLElement
+      if (wrapRef.current?.contains(target) || target.closest('[role="listbox"]')) return
+      setOpen(false)
+    }
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointer)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('pointerdown', onPointer)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const total = counts?.total ?? 0
+  const unread = counts?.unread ?? 0
+  const placeholder = INBOX_FILTER_KINDS.find(option => option.kind === kind)?.placeholder ?? ''
+
+  const addRule = () => {
+    const next = normalizeInboxFilters([...filters, { kind, value }])
+    if (next.length === filters.length) return
+    onFiltersChange(next)
+    setValue('')
+  }
+
+  const summary = total
+    ? `${total.toLocaleString()} filtered out of your Inbox${unread ? `, ${unread.toLocaleString()} unread` : ''}`
+    : 'Filtered out of your Inbox'
+
+  return (
+    <div className={styles.filterWrap} ref={wrapRef}>
+      <button
+        type="button"
+        className={`${styles.filterChip} ${showing ? styles.filterChipOn : ''}`}
+        onClick={() => setOpen(current => !current)}
+        aria-expanded={open}
+        aria-label={summary}
+        title={summary}
+      >
+        {FILTER_ICON}
+        <span className={styles.filterChipLabel}>Filtered</span>
+        {total > 0 && (
+          <span className={styles.filterChipCount}>
+            {total.toLocaleString()}
+            {unread > 0 && <span className={styles.filterChipUnread}>{unread.toLocaleString()} new</span>}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div className={styles.filterMenu} role="dialog" aria-label="Filtered out of your Inbox">
+          <div className={styles.filterMenuHead}>
+            <span>Filtered out of your Inbox</span>
+            <span className={styles.filterMenuHint}>Matching mail skips the Inbox and never notifies. Nothing is deleted.</span>
+          </div>
+          <button
+            type="button"
+            className={styles.filterMenuView}
+            onClick={() => {
+              onShowingChange(!showing)
+              setOpen(false)
+            }}
+          >
+            {showing ? 'Back to Inbox' : 'Show filtered mail'}
+            {!showing && total > 0 && (
+              <span className={styles.filterChipCount}>
+                {total.toLocaleString()}
+                {unread > 0 && <span className={styles.filterChipUnread}>{unread.toLocaleString()} new</span>}
+              </span>
+            )}
+          </button>
+          <div className={styles.filterRules}>
+            {filters.length === 0 && <div className={styles.filterEmpty}>No rules. Everything reaches your Inbox.</div>}
+            {filters.map(filter => (
+              <div key={`${filter.kind}:${filter.value}`} className={styles.filterRule}>
+                <span className={styles.filterRuleKind}>{labelOf(filter.kind)}</span>
+                <span className={styles.filterRuleValue}>{filter.value}</span>
+                <button
+                  type="button"
+                  className={styles.filterRuleRemove}
+                  aria-label={`Remove ${labelOf(filter.kind).toLowerCase()} ${filter.value}`}
+                  onClick={() => onFiltersChange(filters.filter(entry => entry !== filter))}
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+          <form
+            className={styles.filterAdd}
+            onSubmit={event => {
+              event.preventDefault()
+              addRule()
+            }}
+          >
+            <MailSelect
+              value={kind}
+              options={INBOX_FILTER_KINDS.map(option => ({ value: option.kind, label: option.label }))}
+              ariaLabel="Rule type"
+              buttonClassName={styles.filterAddKind}
+              onChange={next => setKind(next as InboxFilterKind)}
+            />
+            <input
+              className={styles.filterAddValue}
+              value={value}
+              placeholder={placeholder}
+              aria-label="Rule value"
+              onChange={event => setValue(event.target.value)}
+            />
+            <button type="submit" className={styles.filterAddBtn} disabled={!value.trim()}>
+              Add
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}

package/app/mail/page.module.css

@@ -559,6 +559,176 @@
   transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
 }
 .refreshBtn:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.filterWrap {
+  position: relative;
+  margin-left: auto;
+}
+.filterWrap + .refreshBtn { margin-left: 0; }
+.filterChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 500 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
+}
+.filterChip svg {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+.filterChip:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.filterChipOn {
+  color: var(--nc-fg-1);
+  border-color: var(--nc-violet-500);
+}
+.filterChipCount {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--nc-font-mono);
+  color: var(--nc-fg-2);
+}
+.filterChipUnread {
+  padding: 2px 5px;
+  border-radius: 999px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 10px/1 var(--nc-font-sans);
+}
+.filterMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 30;
+  width: min(330px, calc(100vw - 32px));
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--nc-line-2);
+  border-radius: var(--radius-card);
+  background: var(--nc-ink-2);
+  box-shadow: 0 18px 44px rgba(4, 2, 8, .42);
+  animation: ncFadeDown .16s var(--nc-ease-out);
+}
+.filterMenuHead {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 6px 2px;
+  color: var(--nc-fg-1);
+  font: 600 13px/1.2 var(--nc-font-sans);
+}
+.filterMenuHint {
+  color: var(--nc-fg-3);
+  font: 400 12px/1.4 var(--nc-font-sans);
+}
+.filterMenuView {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 10px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: var(--nc-ink-3);
+  color: var(--nc-fg-1);
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+  text-align: left;
+}
+.filterMenuView:hover { border-color: var(--nc-violet-500); }
+.filterRules {
+  display: flex;
+  flex-direction: column;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.filterRule {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 6px;
+  border-bottom: 1px solid var(--nc-line-1);
+}
+.filterRule:last-child { border-bottom: none; }
+.filterRuleKind {
+  color: var(--nc-fg-3);
+  font: 500 11px/1.2 var(--nc-font-sans);
+  white-space: nowrap;
+}
+.filterRuleValue {
+  overflow: hidden;
+  color: var(--nc-fg-1);
+  font: 500 12px/1.2 var(--nc-font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filterRuleRemove {
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 400 16px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.filterRuleRemove:hover { color: var(--nc-danger); background: var(--nc-ink-4); }
+.filterEmpty {
+  padding: 8px 6px;
+  color: var(--nc-fg-3);
+  font: 400 12px/1.4 var(--nc-font-sans);
+}
+.filterAdd {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--nc-line-1);
+}
+.filterAdd > :first-child { grid-column: 1 / -1; }
+.filterAddKind {
+  width: 100%;
+  min-width: 0;
+}
+.filterAddValue {
+  min-width: 0;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 8px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 400 12px/1 var(--nc-font-sans);
+}
+.filterAddValue:focus { outline: none; border-color: var(--nc-violet-500); }
+.filterAddBtn {
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 8px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.filterAddBtn:disabled {
+  opacity: .45;
+  cursor: default;
+}
+.listHead { container-type: inline-size; }
+@container (max-width: 440px) {
+  .filterChipLabel { display: none; }
+}
 .crossFolderHint {
   align-self: flex-start;
   margin: 0 16px 8px;