@novacraft-engineering/mailbox 0.4.4 → 0.4.17

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

@@ -1,10 +1,11 @@
 import { BRAND } from '@/lib/brand'
 import { randomUUID } from 'node:crypto'
 import { NextResponse } from 'next/server'
-import { sendMail } from '@/lib/mail-provider'
+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'
@@ -31,9 +32,9 @@ export async function POST(req: Request) {
 
   const account = await resolveAccount(req)
 
-  const apiKey = process.env.RESEND_API_KEY
-  if (!apiKey) {
-    return NextResponse.json({ ok: false, error: 'RESEND_API_KEY not configured' }, { status: 500 })
+  const configProblem = providerConfigProblem()
+  if (configProblem) {
+    return NextResponse.json({ ok: false, error: configProblem }, { status: 500 })
   }
 
   let body: SendBody
@@ -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/api/share/[id]/download/route.ts

@@ -0,0 +1,71 @@
+import { NextResponse } from 'next/server'
+import { getShare } from '@/lib/mailbox'
+import { getObject, objectExists } from '@/lib/r2'
+import { shareTicketValid } from '@/lib/share-ticket'
+
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+
+const GONE = { ok: false as const, error: 'This link is no longer available.' }
+
+/**
+ * The bytes of a shared file, served from this domain.
+ *
+ * The share page used to send the browser to a signed bucket URL. That is a second
+ * hostname for the recipient's network to resolve and reach, and on the networks this
+ * office deals with it sometimes cannot be — which looked exactly like a dead button,
+ * because a failed navigation reports nothing back to the page it left. Every other
+ * attachment in this product is already served from here; this one now is too.
+ */
+async function resolve(id: string, ticket: string | null) {
+  if (!shareTicketValid(ticket, id)) return { error: NextResponse.json(GONE, { status: 403 }) }
+  const share = await getShare(id)
+  if (!share || share.revoked) return { error: NextResponse.json(GONE, { status: 404 }) }
+  if (share.expiresAt && new Date(share.expiresAt) < new Date()) {
+    return { error: NextResponse.json(GONE, { status: 410 }) }
+  }
+  return { share }
+}
+
+function disposition(filename: string): string {
+  const plain = filename.replace(/["\\]/g, '')
+  return `attachment; filename="${plain}"; filename*=UTF-8''${encodeURIComponent(filename)}`
+}
+
+/** Lets the page check the file is reachable before it sends the reader away from it. */
+export async function HEAD(req: Request, context: { params: Promise<{ id: string }> }) {
+  const { id } = await context.params
+  const { share, error } = await resolve(id, new URL(req.url).searchParams.get('t'))
+  if (error) return error
+  if (!(await objectExists(share.objectKey))) return NextResponse.json(GONE, { status: 410 })
+  return new Response(null, {
+    headers: {
+      'content-type': share.contentType || 'application/octet-stream',
+      'content-length': String(share.size),
+      'content-disposition': disposition(share.filename),
+    },
+  })
+}
+
+export async function GET(req: Request, context: { params: Promise<{ id: string }> }) {
+  const { id } = await context.params
+  const { share, error } = await resolve(id, new URL(req.url).searchParams.get('t'))
+  if (error) return error
+
+  const object = await getObject(share.objectKey)
+  if (!object?.body) {
+    return NextResponse.json(
+      { ok: false, error: 'This file is no longer stored. Ask whoever sent it to upload it again.' },
+      { status: 410 },
+    )
+  }
+  const length = object.headers.get('content-length')
+  return new Response(object.body, {
+    headers: {
+      'content-type': share.contentType || object.headers.get('content-type') || 'application/octet-stream',
+      'content-disposition': disposition(share.filename),
+      ...(length ? { 'content-length': length } : {}),
+      'cache-control': 'private, no-store',
+    },
+  })
+}

package/app/api/share/[id]/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from 'next/server'
 import { getShare, getSharePasswordHash, recordShareDownload } from '@/lib/mailbox'
 import { verifyPassword } from '@/lib/password'
-import { objectExists, presign } from '@/lib/r2'
+import { objectExists } from '@/lib/r2'
 import { clientKey, rateLimit } from '@/lib/rate-limit'
+import { issueShareTicket } from '@/lib/share-ticket'
 
 export const runtime = 'nodejs'
 export const dynamic = 'force-dynamic'
@@ -37,7 +38,7 @@ export async function GET(_req: Request, context: { params: Promise<{ id: string
   })
 }
 
-/** Exchanges the password for a short-lived signed URL to the object itself. */
+/** Exchanges the password for a short-lived link to the bytes, served from this domain. */
 export async function POST(req: Request, context: { params: Promise<{ id: string }> }) {
   const { id } = await context.params
 
@@ -77,9 +78,13 @@ export async function POST(req: Request, context: { params: Promise<{ id: string
   }
 
   await recordShareDownload(id)
-  // Two minutes: long enough to start the download, too short to pass around.
-  const url = presign(share.objectKey, 'GET', 120, {
-    'response-content-disposition': `attachment; filename="${share.filename.replace(/"/g, '')}"`,
-  })
+  // Served from this domain rather than the bucket: the bucket is a second hostname for
+  // the recipient's network to reach, and when it cannot the download silently never
+  // starts. The ticket carries the password decision the short distance to the bytes.
+  const ticket = issueShareTicket(id)
+  if (!ticket) {
+    return NextResponse.json({ ok: false, error: 'Downloads are not configured.' }, { status: 503 })
+  }
+  const url = `/api/share/${encodeURIComponent(id)}/download?t=${encodeURIComponent(ticket)}`
   return NextResponse.json({ ok: true, url, filename: share.filename })
 }

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/ConfirmDialog.tsx

@@ -11,40 +11,64 @@ export type ConfirmRequest = {
   cancelLabel?: string
   /** Paints the confirm button as destructive. */
   danger?: boolean
+  /** Asks for a value as well, replacing window.prompt. */
+  field?: { label: string; type?: 'text' | 'password'; placeholder?: string; initial?: string }
 }
 
-type Pending = ConfirmRequest & { resolve: (value: boolean) => void }
+type Settled = { ok: boolean; value: string }
+type Pending = ConfirmRequest & { resolve: (value: Settled) => void }
 
-const ConfirmContext = createContext<(request: ConfirmRequest) => Promise<boolean>>(async () => false)
+const ConfirmContext = createContext<(request: ConfirmRequest) => Promise<Settled>>(async () => ({ ok: false, value: '' }))
 
 /** Replaces window.confirm, which cannot be styled and looks like the browser, not the app. */
 export function useConfirm() {
-  return useContext(ConfirmContext)
+  const ask = useContext(ConfirmContext)
+  return useCallback(async (request: ConfirmRequest) => (await ask(request)).ok, [ask])
+}
+
+/** Replaces window.prompt. Resolves to null when dismissed, so a blank answer stays meaningful. */
+export function usePrompt() {
+  const ask = useContext(ConfirmContext)
+  return useCallback(
+    async (request: ConfirmRequest & { field: NonNullable<ConfirmRequest['field']> }) => {
+      const settled = await ask(request)
+      return settled.ok ? settled.value : null
+    },
+    [ask],
+  )
 }
 
 export function ConfirmProvider({ children }: { children: ReactNode }) {
   const [pending, setPending] = useState<Pending | null>(null)
+  const [draft, setDraft] = useState('')
+  const [reveal, setReveal] = useState(false)
   const confirmRef = useRef<HTMLButtonElement>(null)
+  const fieldRef = useRef<HTMLInputElement>(null)
 
   const confirm = useCallback(
-    (request: ConfirmRequest) => new Promise<boolean>(resolve => setPending({ ...request, resolve })),
+    (request: ConfirmRequest) => new Promise<Settled>(resolve => {
+      setDraft(request.field?.initial ?? '')
+      setReveal(false)
+      setPending({ ...request, resolve })
+    }),
     [],
   )
 
   const settle = useCallback(
-    (value: boolean) => {
+    (ok: boolean) => {
       setPending(current => {
-        current?.resolve(value)
+        current?.resolve({ ok, value: draft })
         return null
       })
     },
-    [],
+    [draft],
   )
 
   // Escape cancels and Enter confirms, matching what the native dialog did.
   useEffect(() => {
     if (!pending) return
-    confirmRef.current?.focus()
+    if (pending.field) fieldRef.current?.focus()
+    else confirmRef.current?.focus()
     const onKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') { event.preventDefault(); settle(false) }
       if (event.key === 'Enter') { event.preventDefault(); settle(true) }
@@ -67,6 +91,27 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
           >
             <p className={styles.confirmTitle}>{pending.title}</p>
             {pending.body && <div className={styles.confirmBody}>{pending.body}</div>}
+            {pending.field && (
+              <label className={styles.confirmField}>
+                <span>{pending.field.label}</span>
+                <div className={styles.pwWrap}>
+                  <input
+                    ref={fieldRef}
+                    className={styles.confirmInput}
+                    type={pending.field.type === 'password' && !reveal ? 'password' : 'text'}
+                    autoComplete={pending.field.type === 'password' ? 'new-password' : 'off'}
+                    placeholder={pending.field.placeholder}
+                    value={draft}
+                    onChange={event => setDraft(event.target.value)}
+                  />
+                  {pending.field.type === 'password' && (
+                    <button type="button" className={styles.pwToggle} onClick={() => setReveal(show => !show)}>
+                      {reveal ? 'Hide' : 'Show'}
+                    </button>
+                  )}
+                </div>
+              </label>
+            )}
             <div className={styles.confirmActions}>
               <button type="button" className={styles.confirmCancel} onClick={() => settle(false)}>
                 {pending.cancelLabel ?? 'Cancel'}

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>
+  )
+}