@novacraft-engineering/mailbox 0.4.5 → 0.4.18

package/README.md

@@ -67,6 +67,23 @@ Attachments go to any S3-compatible bucket through the `S3_*` variables: AWS
 S3, Cloudflare R2, Backblaze B2, MinIO, Wasabi. The older `R2_*` names still
 work if you already set them.
 
+**The bucket needs a CORS rule.** The browser uploads straight to it with a
+signed URL, so the bucket has to allow `PUT`, `GET` and `HEAD` from the address
+the app is served on. Without one every attachment fails, and the browser
+reports it the same way it reports being offline — so it reads as a network
+problem rather than a missing rule. On R2:
+
+```json
+[{ "AllowedOrigins": ["https://mail.example.com"],
+   "AllowedMethods": ["PUT", "GET", "HEAD"],
+   "AllowedHeaders": ["*"],
+   "ExposeHeaders": ["ETag", "Content-Length", "Content-Type", "Content-Disposition", "Content-Range", "Accept-Ranges", "Last-Modified"],
+   "MaxAgeSeconds": 3600 }]
+```
+
+List only your own origin. A wildcard lets any page that obtains a signed URL
+upload with it.
+
 ## Sending
 
 `MAIL_PROVIDER` picks `ses`, `resend` or `brevo` behind one seam, so switching

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

@@ -3,14 +3,14 @@ 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>> }>()
+/**
+ * Counts come from the durable cache, which every write that moves mail clears. An extra
+ * in-process copy used to sit in front of it, and nothing could reach in to drop it: a
+ * delete cleared the shared row and this map went on answering with figures from before
+ * it for another twenty seconds, per running instance.
+ */
 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 ?? undefined) : await countFoldersCached(owner)
-  countsCache.set(owner ?? '*all', { at: Date.now(), value })
-  return value
+  return fresh ? countFolders(owner ?? undefined) : countFoldersCached(owner)
 }
 
 export const runtime = 'nodejs'

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

@@ -2,8 +2,8 @@ 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 { searchInbox, appendEvent, appendInbound, recordContact, setInboundFlags, setInboundSpam, setInboundFlagsForThread, setInboundLabels, setThreadSnooze, setInboxOwner, readInbox, claimWebhookEvent, completeWebhookEvent, releaseWebhookEvent, pruneWebhookEvents, type InboundFlags } from '@/lib/mailbox'
+import { addressedToUs, attributeOwner, forwardToAccounts, ingestReceived, parseSender } from '@/lib/receive'
 import { isBrevoInbound, normalizeBrevoInbound } from '@/lib/mail-provider'
 
 export const runtime = 'nodejs'
@@ -27,7 +27,7 @@ export async function GET(req: Request) {
   const threadId = params.get('thread') ?? undefined
   if (text || limitRaw || offset || cursor || threadId) {
     const folderParam = params.get('folder')
-    const folder = (['inbox', 'archive', 'trash', 'starred', 'snoozed'] as const).find(f => f === folderParam)
+    const folder = (['inbox', 'archive', 'trash', 'starred', 'snoozed', 'spam'] as const).find(f => f === folderParam)
     const { rows, total, nextCursor } = await searchInbox({
       text,
       owner: ownerFilter ?? undefined,
@@ -45,6 +45,7 @@ export async function GET(req: Request) {
       label: params.get('label') ?? undefined,
       from: params.get('from') ?? undefined,
       to: params.get('to') ?? undefined,
+      addressed: params.get('addressed') ?? undefined,
     })
     return NextResponse.json({ ok: true, emails: rows, total, offset, nextCursor })
   }
@@ -56,7 +57,7 @@ export async function GET(req: Request) {
 export async function PATCH(req: Request) {
   const guard = await mailAuthGuard(req)
   if (guard) return guard
-  let body: { id?: string; ids?: string[]; threadId?: string; labels?: string[]; owner?: string; snoozedUntil?: string | null } & InboundFlags
+  let body: { id?: string; ids?: string[]; threadId?: string; labels?: string[]; owner?: string; snoozedUntil?: string | null; spam?: boolean } & InboundFlags
   try {
     body = await req.json()
   } catch {
@@ -109,6 +110,11 @@ export async function PATCH(req: Request) {
     const changed = await setInboundFlagsForThread(account.address ?? ' no-address', body.threadId, flags)
     return NextResponse.json({ ok: true, ids: changed })
   }
+  // Quarantine is its own move: it teaches the sender's standing, which a flag does not.
+  if (body.spam !== undefined) {
+    await Promise.all(ids.map(id => setInboundSpam(id, Boolean(body.spam))))
+    return NextResponse.json({ ok: true, ids })
+  }
   await Promise.all(ids.map(id => setInboundFlags(id, flags)))
   return NextResponse.json({ ok: true, ids })
 }
@@ -239,6 +245,19 @@ export async function POST(req: Request) {
 
   if (type === 'email.received') {
     const emailId = String(data.email_id ?? data.id ?? `in_${Date.now()}`)
+    // The signature proves the provider sent it, not that it is ours. One provider account
+    // can hold several tenants' domains and posts all of their mail to the single webhook
+    // it knows about, so anything addressed elsewhere is acknowledged and dropped — a 2xx
+    // rather than an error, because retrying will never make it ours.
+    const addressed = [
+      ...(Array.isArray(data.to) ? (data.to as string[]) : [String(data.to ?? '')]),
+      ...(Array.isArray(data.cc) ? (data.cc as string[]) : []),
+      ...(Array.isArray(data.bcc) ? (data.bcc as string[]) : []),
+    ].filter(Boolean)
+    if (addressed.length && !addressedToUs(addressed)) {
+      console.warn('[mail] refused inbound for another tenant', { emailId, to: addressed })
+      return NextResponse.json({ ok: true, ignored: 'not addressed to this mailbox' })
+    }
     // Keyed on the delivery id, which a retry reuses, so a redelivery of something we
     // already finished is a no-op rather than a second forwarded copy.
     const deliveryId = req.headers.get('svix-id') || `received:${emailId}`

package/app/api/mail/maintenance/received/route.ts

@@ -43,22 +43,27 @@ export async function POST(req: Request) {
   if (!apiKey) return NextResponse.json({ ok: false, error: 'No provider key' }, { status: 400 })
   const url = new URL(req.url)
   const one = url.searchParams.get('id')
+  // Repair works on messages already stored, so the delivery claim is deliberately not
+  // consulted: it says "handled", which is exactly the state being corrected.
+  const repair = url.searchParams.get('repair') === '1'
   const targets = one ? [one] : (await findMissingReceived(apiKey, sinceFrom(req))).map(item => item.id)
 
   const taken: Array<{ id: string; owner: string; subject: string }> = []
   const skipped: string[] = []
   const failed: Array<{ id: string; error: string }> = []
   for (const id of targets) {
-    const claim = await claimWebhookEvent(`received:${id}`)
-    if (claim !== 'claimed') { skipped.push(id); continue }
+    if (!repair) {
+      const claim = await claimWebhookEvent(`received:${id}`)
+      if (claim !== 'claimed') { skipped.push(id); continue }
+    }
     try {
-      const result = await ingestReceived(id)
-      await completeWebhookEvent(`received:${id}`)
+      const result = await ingestReceived(id, {}, repair ? 'repair' : 'store')
+      if (!repair) await completeWebhookEvent(`received:${id}`)
       taken.push({ id, owner: result.owner, subject: result.subject })
     } catch (err) {
-      await releaseWebhookEvent(`received:${id}`)
+      if (!repair) await releaseWebhookEvent(`received:${id}`)
       failed.push({ id, error: err instanceof Error ? err.message : String(err) })
     }
   }
-  return NextResponse.json({ ok: true, taken, skipped, failed })
+  return NextResponse.json({ ok: true, repaired: repair, taken, skipped, failed })
 }

package/app/api/mail/maintenance/rejudge/route.ts

@@ -0,0 +1,32 @@
+import { timingSafeEqual } from 'node:crypto'
+import { NextResponse } from 'next/server'
+import { rejudgeStored } from '@/lib/mailbox'
+
+export const runtime = 'nodejs'
+export const maxDuration = 300
+
+function authorised(req: Request): boolean {
+  const secret = process.env.MAINTENANCE_TOKEN
+  if (!secret) return false
+  const token = (req.headers.get('authorization') ?? '').replace(/^Bearer\s+/i, '')
+  if (token.length !== secret.length) return false
+  try {
+    return timingSafeEqual(Buffer.from(token), Buffer.from(secret))
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Re-reads stored mail through the current judgement and writes back what changed, a page
+ * at a time — `cursor` in the answer is the `before` for the next call.
+ */
+export async function POST(req: Request) {
+  if (!authorised(req)) return NextResponse.json({ ok: false, error: 'Unauthorised' }, { status: 403 })
+  const url = new URL(req.url)
+  const result = await rejudgeStored({
+    before: url.searchParams.get('before') ?? undefined,
+    limit: Number(url.searchParams.get('limit') ?? 200) || 200,
+  })
+  return NextResponse.json({ ok: true, ...result })
+}

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

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server'
+import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
+import { scopeFor } from '@/lib/scope'
+import { listScheduled, cancelScheduled, rescheduleSend } from '@/lib/scheduled'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+export async function GET(req: Request) {
+  const guard = await mailAuthGuard(req)
+  if (guard) return guard
+  const account = await resolveAccount(req)
+  const scope = scopeFor(account, new URL(req.url).searchParams.get('mailbox'))
+  return NextResponse.json({ ok: true, scheduled: await listScheduled(scope) })
+}
+
+export async function DELETE(req: Request) {
+  const guard = await mailAuthGuard(req)
+  if (guard) return guard
+  const account = await resolveAccount(req)
+  const id = new URL(req.url).searchParams.get('id') ?? ''
+  if (!id) return NextResponse.json({ ok: false, error: 'id is required' }, { status: 400 })
+  const cancelled = await cancelScheduled(id, account.address ?? '')
+  if (!cancelled) {
+    return NextResponse.json({ ok: false, error: 'That message is not waiting to be sent' }, { status: 404 })
+  }
+  return NextResponse.json({ ok: true })
+}
+
+export async function PATCH(req: Request) {
+  const guard = await mailAuthGuard(req)
+  if (guard) return guard
+  const account = await resolveAccount(req)
+  const body = (await req.json().catch(() => null)) as { id?: string; scheduledAt?: string } | null
+  const id = body?.id ?? new URL(req.url).searchParams.get('id') ?? ''
+  const when = body?.scheduledAt ? new Date(body.scheduledAt) : null
+  if (!id || !when || Number.isNaN(when.getTime())) {
+    return NextResponse.json({ ok: false, error: 'id and a valid scheduledAt are required' }, { status: 400 })
+  }
+  if (when.getTime() <= Date.now()) {
+    return NextResponse.json({ ok: false, error: 'Pick a time in the future' }, { status: 400 })
+  }
+  const moved = await rescheduleSend(id, account.address ?? '', when.toISOString())
+  if (!moved) {
+    return NextResponse.json({ ok: false, error: 'That message is not waiting to be sent' }, { status: 404 })
+  }
+  return NextResponse.json({ ok: true, scheduledAt: when.toISOString() })
+}

package/app/api/mail/scheduled/run/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+import { dispatchDue } from '@/lib/scheduled'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+/**
+ * Sends everything now due. Driven by a timer rather than by someone having the mailbox
+ * open, because a message written on Friday for Monday has nobody watching when its turn
+ * comes. Safe to call as often as you like: each row is claimed before it is sent.
+ */
+export async function POST(req: Request) {
+  const expected = (process.env.MAINTENANCE_TOKEN ?? '').trim()
+  const offered = (req.headers.get('authorization') ?? '').replace(/^Bearer\s+/i, '').trim()
+  if (!expected || offered !== expected) {
+    return NextResponse.json({ ok: false, error: 'Unauthorized' }, { status: 401 })
+  }
+  return NextResponse.json({ ok: true, ...(await dispatchDue()) })
+}

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

@@ -5,6 +5,7 @@ import { providerConfigProblem, sendMail } from '@/lib/mail-provider'
 import { mailAuthGuard, resolveAccount } from '@/lib/dev-auth'
 import { presign } from '@/lib/r2'
 import { recordContact, recordPixel, recordSentMeta, recordSentMessage } from '@/lib/mailbox'
+import { scheduleSend } from '@/lib/scheduled'
 import { publicOrigin } from '@/lib/public-url'
 
 export const runtime = 'nodejs'
@@ -93,9 +94,10 @@ export async function POST(req: Request) {
 
   const rawAttachments = (body.attachments ?? []).filter(entry => entry.filename && (entry.content || entry.path || entry.key))
   if (rawAttachments.length && body.scheduledAt) {
-    // Resend rejects attachments on scheduled sends — surface it before the API does.
+    // The message waits here rather than at a provider, and holding file bytes in the
+    // queue for hours is a cost this has not taken on yet.
     return NextResponse.json(
-      { ok: false, error: 'Resend does not support attachments on scheduled emails — send now or drop the attachments' },
+      { ok: false, error: 'A scheduled email cannot carry attachments yet — send it now, or schedule it without files' },
       { status: 400 },
     )
   }
@@ -155,6 +157,37 @@ export async function POST(req: Request) {
   const fromEmail = from.replace(/^.*<|>$/g, '').trim()
   const fromName = from.includes('<') ? from.slice(0, from.indexOf('<')).replace(/["']/g, '').trim() : undefined
 
+  const dueAt = body.scheduledAt ? new Date(body.scheduledAt) : null
+  if (dueAt && !Number.isNaN(dueAt.getTime()) && dueAt.getTime() > Date.now() + 5_000) {
+    // Held here, not handed over: SES has no scheduling and drops the instruction without
+    // a word, so "in an hour" arrived at once. The dispatcher sends it when it is due.
+    const scheduledId = await scheduleSend(account.address ?? fromEmail, dueAt.toISOString(), {
+      owner: account.address ?? fromEmail,
+      pixelId: trackedHtml ? pixelId : null,
+      subject: body.subject.trim(),
+      from,
+      recipients,
+      cc: body.cc ?? [],
+      bcc: body.bcc ?? [],
+      replyTo: replyTo ? [replyTo] : [],
+      inReplyTo: body.inReplyTo ?? null,
+      storedAttachments: [],
+      payload: {
+        from: fromEmail,
+        fromName: fromName || undefined,
+        to: recipients,
+        cc: body.cc,
+        bcc: body.bcc,
+        replyTo,
+        subject: body.subject.trim(),
+        html: trackedHtml,
+        text: body.text,
+        ...(inReplyToId ? { headers: { 'In-Reply-To': inReplyToId, References: inReplyToId } } : {}),
+      },
+    })
+    return NextResponse.json({ ok: true, id: scheduledId, scheduled: true, scheduledAt: dueAt.toISOString() })
+  }
+
   let data: { id: string | null }
   try {
     data = await sendMail({
@@ -167,7 +200,6 @@ export async function POST(req: Request) {
       subject: body.subject.trim(),
       html: trackedHtml,
       text: body.text,
-      scheduledAt: body.scheduledAt,
       attachments,
       ...(inReplyToId ? { headers: { 'In-Reply-To': inReplyToId, References: inReplyToId } } : {}),
     })

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

@@ -12,7 +12,7 @@ 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'] as const).find(f => f === folderParam) ?? 'inbox'
+  const folder: ThreadFolder = (['inbox', 'archive', 'trash', 'starred', 'snoozed', 'spam'] 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'))
   return NextResponse.json({ ok: true, threads: page.rows, nextCursor: page.nextCursor })

package/app/globals.css

@@ -11,4 +11,11 @@ body {
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  /* Safari on iOS grows text block by block on its own reckoning, each by a different
+     amount, so a snippet came out larger than the subject above it and the list read as
+     though the sizes had been picked at random. Nothing else does this, which is why it
+     only ever showed on a phone. This pins the rendered size to the stated one; pinch to
+     zoom and the reader's own text-size setting are untouched. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }

package/app/mail/AttachmentLightbox.tsx

@@ -35,7 +35,7 @@ export function attachmentKind(filename: string, contentType?: string): Attachme
  * browser to save. Anything rendered here asks for the inline form instead, or a PDF opens
  * the save dialog the moment the viewer appears.
  */
-function inlineUrl(url: string): string {
+export function inlineUrl(url: string): string {
   if (!url.startsWith('/api/mail/')) return url
   return `${url}${url.includes('?') ? '&' : '?'}inline=1`
 }

package/app/mail/InstallGuide.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import styles from './page.module.css'
+import type { IosBrowser } from './pwa'
+
+const ShareArt = () => (
+  <svg className={styles.installArt} viewBox="0 0 160 104" aria-hidden="true">
+    <rect x="38" y="4" width="84" height="96" rx="13" fill="var(--nc-ink-2)" stroke="var(--nc-line-2)" />
+    <rect x="48" y="16" width="46" height="5" rx="2.5" fill="var(--nc-line-2)" />
+    <rect x="48" y="28" width="64" height="4" rx="2" fill="var(--nc-line-1)" />
+    <rect x="48" y="37" width="54" height="4" rx="2" fill="var(--nc-line-1)" />
+    <rect x="48" y="46" width="60" height="4" rx="2" fill="var(--nc-line-1)" />
+    <rect x="39" y="73" width="82" height="26" rx="11" fill="var(--nc-ink-3)" />
+    <g stroke="var(--nc-fg-3)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity=".55">
+      <path d="M55 82l-4 4 4 4" />
+      <path d="M65 82l4 4-4 4" />
+      <path d="M99 80h8v12h-8z" />
+      <path d="M111 81h6v10h-6z" />
+    </g>
+    <g stroke="var(--nc-violet-400)" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" fill="none">
+      <path d="M74 85v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-6" />
+      <path d="M80 79v10" />
+      <path d="M77 82l3-3 3 3" />
+    </g>
+    <circle cx="80" cy="86" r="12" fill="none" stroke="var(--nc-violet-400)" strokeWidth="1.4" opacity=".55" />
+  </svg>
+)
+
+const SheetArt = () => (
+  <svg className={styles.installArt} viewBox="0 0 160 104" aria-hidden="true">
+    <rect x="10" y="10" width="140" height="84" rx="13" fill="var(--nc-ink-2)" stroke="var(--nc-line-2)" />
+    <rect x="68" y="17" width="24" height="4" rx="2" fill="var(--nc-line-2)" />
+    <g>
+      <rect x="18" y="28" width="124" height="18" rx="8" fill="var(--nc-ink-3)" />
+      <rect x="26" y="33" width="9" height="9" rx="2.5" fill="var(--nc-line-2)" />
+      <rect x="42" y="35" width="44" height="4" rx="2" fill="var(--nc-line-2)" />
+    </g>
+    <g>
+      <rect x="18" y="50" width="124" height="22" rx="8" fill="none" stroke="var(--nc-violet-400)" strokeWidth="1.6" />
+      <g stroke="var(--nc-violet-400)" strokeWidth="1.7" strokeLinecap="round" fill="none">
+        <rect x="26" y="56" width="10" height="10" rx="2.5" />
+        <path d="M31 58.5v5" />
+        <path d="M28.5 61h5" />
+      </g>
+      <rect x="44" y="59" width="66" height="4" rx="2" fill="var(--nc-violet-400)" />
+    </g>
+    <g opacity=".5">
+      <rect x="26" y="79" width="9" height="9" rx="2.5" fill="var(--nc-line-2)" />
+      <rect x="42" y="81" width="38" height="4" rx="2" fill="var(--nc-line-2)" />
+    </g>
+  </svg>
+)
+
+const HomeArt = () => (
+  <svg className={styles.installArt} viewBox="0 0 160 104" aria-hidden="true">
+    <rect x="38" y="4" width="84" height="96" rx="13" fill="var(--nc-ink-2)" stroke="var(--nc-line-2)" />
+    <g fill="var(--nc-line-1)">
+      <rect x="50" y="20" width="18" height="18" rx="5" />
+      <rect x="72" y="20" width="18" height="18" rx="5" />
+      <rect x="94" y="20" width="18" height="18" rx="5" />
+      <rect x="72" y="50" width="18" height="18" rx="5" />
+      <rect x="94" y="50" width="18" height="18" rx="5" />
+    </g>
+    <rect x="50" y="50" width="18" height="18" rx="5" fill="var(--nc-violet-400)" />
+    <g stroke="var(--nc-ink-1)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none">
+      <rect x="54" y="56" width="10" height="7" rx="1.5" />
+      <path d="M54 57.5l5 3.5 5-3.5" />
+    </g>
+    <rect x="52" y="71" width="14" height="3" rx="1.5" fill="var(--nc-violet-400)" opacity=".6" />
+    <g fill="var(--nc-line-1)" opacity=".7">
+      <rect x="74" y="71" width="14" height="3" rx="1.5" />
+      <rect x="96" y="71" width="14" height="3" rx="1.5" />
+      <rect x="52" y="41" width="14" height="3" rx="1.5" />
+      <rect x="74" y="41" width="14" height="3" rx="1.5" />
+      <rect x="96" y="41" width="14" height="3" rx="1.5" />
+    </g>
+  </svg>
+)
+
+export function InstallGuide({ browser, appName }: { browser: IosBrowser; appName: string }) {
+  return (
+    <div className={styles.installGuide}>
+      {browser === 'other' && (
+        <p className={styles.installWarn}>
+          You are not in Safari. On iPhone and iPad only Safari can add a real app to the Home Screen — Chrome,
+          Firefox and Edge save a bookmark that reopens inside the browser and cannot receive notifications. Open
+          this page in Safari, then follow the steps below.
+        </p>
+      )}
+
+      <ol className={styles.installSteps}>
+        <li className={styles.installStep}>
+          <ShareArt />
+          <div>
+            <strong>Tap Share.</strong>
+            <p className={styles.settingsNote}>
+              It is the square with an arrow coming out of the top, in the bar at the bottom of Safari. On an iPad
+              it sits in the top bar instead.
+            </p>
+          </div>
+        </li>
+        <li className={styles.installStep}>
+          <SheetArt />
+          <div>
+            <strong>Choose Add to Home Screen.</strong>
+            <p className={styles.settingsNote}>
+              Scroll the share sheet down past the row of apps. The entry has a plus inside a square next to it.
+            </p>
+          </div>
+        </li>
+        <li className={styles.installStep}>
+          <HomeArt />
+          <div>
+            <strong>Tap Add.</strong>
+            <p className={styles.settingsNote}>
+              {appName} Mail lands on your Home Screen and opens in its own window, with no address bar. You can
+              rename it on this screen before you confirm.
+            </p>
+          </div>
+        </li>
+      </ol>
+
+      <p className={styles.settingsNote}>
+        Notifications only reach the Home Screen copy. iOS will not deliver them to a page open in a browser tab,
+        so add it here first and then turn notifications on inside the app.
+      </p>
+      <p className={styles.settingsNote}>
+        There is no one-tap install button on iPhone because Apple gives websites no way to ask — the share sheet
+        is the only route, on every browser.
+      </p>
+    </div>
+  )
+}