@novacraft-engineering/mailbox 0.4.26 → 0.4.27

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

@@ -203,6 +203,9 @@ export async function POST(req: Request) {
       text: body.text,
       attachments,
       ...(inReplyToId ? { headers: { 'In-Reply-To': inReplyToId, References: inReplyToId } } : {}),
+      // A person's own message is already in their Sent folder; the archive is for mail the
+      // app sends on its own behalf, which no one would otherwise see.
+      skipArchive: true,
     })
   } catch (sendError) {
     return NextResponse.json({ ok: false, error: (sendError as Error).message }, { status: 502 })

package/app/mail/page.module.css

@@ -92,7 +92,7 @@
   --thread-pad: 14px 16px;
   --thread-inset: 12px;
   grid-template-columns: var(--rail-w) var(--list-w) 1fr;
-  grid-template-rows: 100dvh;
+  grid-template-rows: calc(100dvh / var(--ui-zoom, 1));
   /* This element carries the theme's tokens, so it has to carry the theme's text and
      surface too. Without them anything that does not name a colour of its own inherits
      the document default — black, which only looks deliberate on the light theme. */
@@ -117,7 +117,11 @@
   min-height: 0;
   height: 100%;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--nc-violet-500) 55%, transparent) transparent;
 }
+.rail::-webkit-scrollbar { width: 6px; }
+.rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nc-violet-500) 45%, transparent); border-radius: 999px; }
 .brand {
   display: flex;
   align-items: center;
@@ -335,6 +339,11 @@
   opacity: 0;
   cursor: pointer;
 }
+.scaleNote {
+  margin: 8px 0 0;
+  color: var(--nc-fg-3);
+  font: 400 12px/1.45 var(--nc-font-sans);
+}
 .scaleValue {
   min-width: 48px;
   font-family: var(--nc-font-mono);
@@ -351,7 +360,8 @@
     position: relative;
     width: 64px;
     padding: 20px 10px;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     z-index: 420;
     transition: width var(--dur-base) var(--nc-ease-out), box-shadow var(--dur-base) var(--nc-ease-out);
   }
@@ -1777,6 +1787,7 @@
 }
 .rteGroup {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 2px;
   padding-right: 6px;
@@ -2084,8 +2095,8 @@
   position: fixed;
   right: 24px;
   bottom: 24px;
-  width: min(700px, calc(100vw - 48px));
-  max-height: calc(100dvh - 48px);
+  width: min(700px, calc(100vw / var(--ui-zoom, 1) - 48px));
+  max-height: calc(100dvh / var(--ui-zoom, 1) - 48px);
   display: flex;
   flex-direction: column;
   background: var(--nc-ink-1);
@@ -2131,7 +2142,16 @@
   font-size: 11px;
   color: var(--nc-fg-3);
 }
+.composeTitle { flex: none; white-space: nowrap; }
+.composeHead .composeHint {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .composeHeadActions {
+  flex: none;
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -3068,7 +3088,7 @@
   .lbScrim { padding: 0; }
   .lbShell {
     width: 100%;
-    height: 100dvh;
+    height: calc(100dvh / var(--ui-zoom, 1));
     border: none;
     border-radius: 0;
   }
@@ -4091,7 +4111,7 @@
 
 .settingsCard {
   width: min(760px, 100%);
-  max-height: calc(100dvh - 48px);
+  max-height: calc(100dvh / var(--ui-zoom, 1) - 48px);
   overflow-y: auto;
   background: var(--nc-ink-1);
   border: 1px solid var(--nc-line-2);
@@ -4265,7 +4285,7 @@
     --rail-w: 0px;
     --list-w: 0px;
     grid-template-columns: 1fr;
-    grid-template-rows: 100dvh;
+    grid-template-rows: calc(100dvh / var(--ui-zoom, 1));
   }
   .rail {
     position: fixed;
@@ -4297,7 +4317,7 @@
   .menuBtn { display: inline-flex; }
   .fab { display: inline-flex; animation: ncPop .5s var(--nc-ease-spring) .1s backwards; }
   .list { padding-bottom: 88px; }
-  .compose { right: 0; bottom: 0; width: 100vw; max-height: 100dvh; border-radius: 0; }
+  .compose { right: 0; bottom: 0; width: calc(100vw / var(--ui-zoom, 1)); max-height: calc(100dvh / var(--ui-zoom, 1)); border-radius: 0; }
 }
 
 /* ── Motion ──────────────────────────────────────────────── */
@@ -5726,7 +5746,7 @@
   top: 60px;
   right: 14px;
   z-index: 75;
-  width: min(360px, calc(100vw - 28px));
+  width: min(360px, calc(100vw / var(--ui-zoom, 1) - 28px));
   padding: 16px 18px 14px;
   border: 1px solid var(--nc-line-1);
   border-left: 3px solid var(--nc-violet-500);

package/app/mail/page.tsx

@@ -13,6 +13,7 @@ import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeI
 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'
 import { handleComposeTab } from './tabKey'
+import { fittedScale } from './scale'
 import { writingSettingsFrom, type WritingSettings } from './writing/settings'
 import { sendIssues, type SendIssue } from './writing/checks'
 import { firstNameFromAddress, type MailTemplate } from './writing/templates'
@@ -1847,15 +1848,30 @@ export default function DevMailPage() {
     return () => window.clearTimeout(timer)
   }, [isLoggedIn, prefsLoaded, themePref, accent, themeCustom, readerLayout, apiHeaders])
 
+  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
+  useEffect(() => {
+    const measure = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight })
+    measure()
+    window.addEventListener('resize', measure)
+    return () => window.removeEventListener('resize', measure)
+  }, [])
+  const chosenScale = Math.min(SCALE_MAX, Math.max(SCALE_MIN, Math.round(settings.uiScale || 100)))
+  const appliedScale = fittedScale(chosenScale, windowSize.width, windowSize.height)
+
   useEffect(() => {
-    const scale = Math.min(SCALE_MAX, Math.max(SCALE_MIN, Math.round(settings.uiScale || 100)))
     // zoom rather than a font size: every measurement in this interface is in pixels, and
     // scaling only the type would leave the type in boxes that no longer fit it.
-    document.documentElement.style.zoom = scale === 100 ? '' : `${scale}%`
+    document.documentElement.style.zoom = appliedScale === 100 ? '' : `${appliedScale}%`
+    // A zoomed page still measures the window in unzoomed units, so every full-window
+    // height or width is divided back down by this, or it overshoots the screen by the scale.
+    document.documentElement.style.setProperty('--ui-zoom', String(appliedScale / 100))
+  }, [appliedScale])
+
+  useEffect(() => {
     try {
-      localStorage.setItem(LS_SCALE_KEY, String(scale))
+      localStorage.setItem(LS_SCALE_KEY, String(chosenScale))
     } catch {}
-  }, [settings.uiScale])
+  }, [chosenScale])
 
   const chooseLayout = useCallback((layout: 'list' | 'bubbles') => {
     setReaderLayout(layout)
@@ -8713,6 +8729,12 @@ export default function DevMailPage() {
                 />
                 <span className={styles.scaleValue}>{settings.uiScale}%</span>
               </div>
+              {appliedScale < chosenScale && (
+                <p className={styles.scaleNote} role="status">
+                  This window fits up to {appliedScale}%, so that is what it shows. Make the window larger, or pick a
+                  smaller size, to use {chosenScale}%.
+                </p>
+              )}
             </div>
             <div className={styles.settingsField}>
               <span>Density</span>

package/app/mail/scale.test.ts

@@ -0,0 +1,17 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { fittedScale } from './scale.ts'
+
+test('a larger size is held to what the window can fit', () => {
+  assert.equal(fittedScale(110, 1440, 790), 110, 'a MacBook Air browser window takes Large')
+  assert.equal(fittedScale(125, 1440, 790), 125)
+  assert.equal(fittedScale(140, 1440, 790), 131, 'but not 140%: it would leave under 600px of height')
+  assert.equal(fittedScale(110, 1366, 650), 108, 'a 1366x768 laptop is held just short of Large')
+})
+
+test('smaller sizes and 100% are always allowed', () => {
+  assert.equal(fittedScale(90, 800, 500), 90)
+  assert.equal(fittedScale(100, 1024, 600), 100)
+  assert.equal(fittedScale(125, 390, 844), 100, 'a phone keeps its own layout at 100%')
+  assert.equal(fittedScale(110, 0, 0), 110, 'before the window is known')
+})

package/app/mail/scale.ts

@@ -0,0 +1,15 @@
+/** The smallest room, in the interface's own pixels, the desktop layout still works in. */
+export const SCALE_FIT = { width: 1024, height: 600 }
+
+/**
+ * The interface size a window can actually take. The page is zoomed rather than reflowed,
+ * so the layout switches between desktop and phone on the real window width: zoomed past
+ * what the window holds, the desktop layout stays up and its edges fall off the screen.
+ * A larger choice is held back to what fits; a smaller one, or 100%, is always allowed,
+ * since below that the phone layout takes over.
+ */
+export function fittedScale(chosen: number, width: number, height: number): number {
+  if (!width || !height) return chosen
+  const fit = Math.floor(100 * Math.min(width / SCALE_FIT.width, height / SCALE_FIT.height))
+  return Math.max(Math.min(chosen, fit), Math.min(chosen, 100))
+}

package/lib/mail-provider.ts

@@ -174,7 +174,7 @@ async function sendViaSes(payload: SendPayload): Promise<SendResult> {
  * A mailbox this deployment owns that keeps a copy of everything the app sends on its own
  * behalf. Product mail is invisible otherwise: it leaves for the recipient and no account
  * here ever sees it. Skipped when the archive is already a recipient, so a message never
- * arrives twice.
+ * arrives twice, and skipped for anything a person wrote — their Sent folder already has it.
  */
 function withArchive(payload: SendPayload): SendPayload {
   const archive = (process.env.MAIL_ARCHIVE_BCC ?? '').trim().toLowerCase()

package/lib/scheduled.ts

@@ -145,9 +145,10 @@ async function dispatchRow(row: Record<string, unknown>): Promise<'sent' | 'fail
   try {
     // scheduledAt is deliberately dropped: the wait already happened here.
     const { scheduledAt: _ignored, ...payload } = send.payload
-    const result = await sendMail(
-      payload.html ? { ...payload, html: absoluteUrls(payload.html, BRAND.publicUrl) } : payload,
-    )
+    const result = await sendMail({
+      ...(payload.html ? { ...payload, html: absoluteUrls(payload.html, BRAND.publicUrl) } : payload),
+      skipArchive: true,
+    })
     await recordSend(send, result?.id ?? null)
     await sql`
       UPDATE mail_scheduled SET status = 'sent', sent_id = ${result?.id ?? null}, last_error = NULL WHERE id = ${id}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novacraft-engineering/mailbox",
-  "version": "0.4.26",
+  "version": "0.4.27",
   "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",