@novacraft-engineering/mailbox 0.4.25 → 0.4.27

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);
@@ -7262,3 +7282,278 @@
   .fieldBad,
   .msgBad { animation: none; }
 }
+
+/* Writing tools */
+.rteBody {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.rteCorner {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 5;
+  display: flex;
+  gap: 4px;
+}
+.rteCornerBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-3);
+  font: 600 11px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.rteCornerBtn:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.rteCornerOn { color: var(--nc-violet-500); border-color: var(--nc-violet-300); }
+.rteWordCount {
+  align-self: flex-end;
+  padding: 4px 18px 8px;
+  color: var(--nc-fg-4);
+  font: 500 11px/1 var(--nc-font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.rteContent :global(.rteMisspelt) {
+  text-decoration: underline wavy var(--nc-danger);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.rteContent :global(.rteRepeat) {
+  text-decoration: underline wavy var(--nc-warn);
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.rteContent :global(.rteGrammar) {
+  text-decoration: underline wavy #3B82F6;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.rteContent :global(.rteFind) { background: color-mix(in srgb, var(--nc-warn) 30%, transparent); border-radius: 2px; }
+.rteContent :global(.rteFindCurrent) { background: color-mix(in srgb, var(--nc-warn) 70%, transparent); border-radius: 2px; }
+
+.rteSuggest {
+  position: absolute;
+  z-index: 45;
+  min-width: 180px;
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 10px;
+  background: var(--nc-ink-2);
+  box-shadow: 0 14px 36px var(--nc-line-soft);
+}
+.rteSuggestPick {
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-1);
+  font: 600 13px/1.3 var(--nc-font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+.rteSuggestPick:hover { background: var(--nc-ink-3); }
+.rteSuggestNote { margin: 4px 10px 6px; color: var(--nc-fg-3); font: 400 12px/1.4 var(--nc-font-sans); }
+.rteSuggestActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+  padding-top: 6px;
+  border-top: 1px solid var(--nc-line-1);
+}
+.rteSuggestActions button {
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 500 12px/1.2 var(--nc-font-sans);
+  cursor: pointer;
+}
+.rteSuggestActions button:hover { background: var(--nc-ink-3); color: var(--nc-fg-1); }
+
+.rteFindBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 18px;
+  border-bottom: 1px solid var(--nc-line-1);
+  background: var(--nc-ink-1);
+}
+.rteFindInput {
+  flex: 1 1 140px;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 6px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-1);
+  font: 400 13px/1 var(--nc-font-sans);
+}
+.rteFindCount { min-width: 64px; color: var(--nc-fg-3); font: 500 12px/1 var(--nc-font-sans); font-variant-numeric: tabular-nums; }
+.rteFindBtn {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 6px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-2);
+  font: 500 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.rteFindBtn:disabled { opacity: 0.45; cursor: default; }
+
+.wpPanel {
+  position: absolute;
+  top: 38px;
+  right: 12px;
+  z-index: 44;
+  width: min(360px, calc(100% - 24px));
+  max-height: min(520px, 70vh);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 12px;
+  background: var(--nc-ink-2);
+  box-shadow: 0 18px 44px var(--nc-line-soft);
+}
+.wpHead { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; }
+.wpTitle { color: var(--nc-fg-1); font: 700 13px/1 var(--nc-font-sans); }
+.wpClose { border: 0; background: transparent; color: var(--nc-fg-3); font-size: 18px; line-height: 1; cursor: pointer; }
+.wpTabs { display: flex; gap: 2px; padding: 4px 8px 8px; border-bottom: 1px solid var(--nc-line-1); overflow-x: auto; }
+.wpTab {
+  flex: none;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-3);
+  font: 600 11.5px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.wpTabOn { background: var(--nc-ink-3); color: var(--nc-fg-1); }
+.wpBody { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 12px; overflow-y: auto; }
+.wpRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; cursor: pointer; }
+.wpText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.wpLabel { color: var(--nc-fg-1); font: 600 12.5px/1.3 var(--nc-font-sans); }
+.wpHint { color: var(--nc-fg-4); font: 400 11.5px/1.35 var(--nc-font-sans); }
+.wpIndent { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--nc-line-1); }
+.wpSwitch { flex: none; width: 16px; height: 16px; accent-color: var(--nc-violet-500); cursor: pointer; }
+.wpNumber, .wpInput {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 6px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 400 12.5px/1 var(--nc-font-sans);
+}
+.wpNumber { width: 56px; }
+.wpInput { width: 100%; }
+.wpNote { margin: 2px 0 6px; color: var(--nc-fg-3); font: 400 12px/1.4 var(--nc-font-sans); }
+.wpTemplate { display: flex; align-items: center; gap: 6px; }
+.wpTemplateName {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--nc-fg-1);
+  font: 600 12.5px/1.2 var(--nc-font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+.wpTemplateName:hover { background: var(--nc-ink-3); }
+.wpShortcut { color: var(--nc-fg-4); font: 500 11px/1 var(--nc-font-mono); }
+.wpRemove { border: 0; background: transparent; color: var(--nc-fg-4); font-size: 16px; cursor: pointer; }
+.wpRemove:hover { color: var(--nc-danger); }
+.wpSave { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nc-line-1); }
+.wpButton {
+  align-self: flex-start;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.wpButton:disabled { opacity: 0.45; cursor: default; }
+.wpChips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
+.wpChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 8px;
+  border-radius: 999px;
+  background: var(--nc-ink-3);
+  color: var(--nc-fg-2);
+  font: 500 12px/1 var(--nc-font-sans);
+}
+.wpChip button { border: 0; background: transparent; color: var(--nc-fg-4); cursor: pointer; font-size: 13px; line-height: 1; }
+.wpKeys { display: flex; flex-direction: column; gap: 6px; margin: 0; }
+.wpKeyRow { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 10px; align-items: baseline; }
+.wpKeyRow dt { margin: 0; }
+.wpKeyRow dd { margin: 0; color: var(--nc-fg-3); font: 400 12px/1.35 var(--nc-font-sans); }
+.wpKeyRow kbd {
+  padding: 2px 6px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 4px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 500 11px/1.4 var(--nc-font-mono);
+  white-space: nowrap;
+}
+.sendIssues { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
+
+.rteGear { font-size: 17px; line-height: 1; }
+.wpSelect {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 6px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 500 12.5px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+/* The app's own scrollbar, as on the message list: thin, violet, inset. */
+.wpTabs, .wpBody, .rteContent, .rteSuggest {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--nc-violet-500) 55%, transparent) transparent;
+}
+.wpTabs::-webkit-scrollbar, .wpBody::-webkit-scrollbar, .rteContent::-webkit-scrollbar, .rteSuggest::-webkit-scrollbar { width: 10px; height: 8px; }
+.wpTabs::-webkit-scrollbar-track, .wpBody::-webkit-scrollbar-track, .rteContent::-webkit-scrollbar-track, .rteSuggest::-webkit-scrollbar-track { background: transparent; }
+.wpTabs::-webkit-scrollbar-thumb, .wpBody::-webkit-scrollbar-thumb, .rteContent::-webkit-scrollbar-thumb, .rteSuggest::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--nc-violet-500) 45%, transparent);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 999px;
+}
+.wpTabs::-webkit-scrollbar-thumb:hover, .wpBody::-webkit-scrollbar-thumb:hover, .rteContent::-webkit-scrollbar-thumb:hover, .rteSuggest::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--nc-violet-500) 78%, transparent);
+  background-clip: padding-box;
+}
+.wpTabs { padding-bottom: 6px; }

package/app/mail/page.tsx

@@ -13,6 +13,10 @@ 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'
 
 /** Which product an address belongs to, so the picker can wear its mark. */
 function productOf(address: string): 'vela' | 'hosting' | 'person' {
@@ -354,6 +358,7 @@ type MailSettings = {
   /** Whether a message in a conversation folds away, or stays open so the thread reads straight through. */
   threadMessages?: 'collapsible' | 'open'
   ticker?: TickerSettings
+  writing?: WritingSettings
   notifyEmail: string
   fonts: CustomFont[]
   defaultFont: BaseFont
@@ -1131,7 +1136,7 @@ function formatBytes(bytes: number): string {
 
 type StashHeaders = Record<string, string>
 
-async function fetchStash(kind: 'draft', headers: StashHeaders): Promise<Array<{ id: string; data: unknown; updatedAt: string }>> {
+async function fetchStash(kind: 'draft' | 'template', headers: StashHeaders): Promise<Array<{ id: string; data: unknown; updatedAt: string }>> {
   try {
     const response = await fetch(`/api/mail/stash?kind=${kind}`, { headers })
     const data = await response.json()
@@ -1141,11 +1146,11 @@ async function fetchStash(kind: 'draft', headers: StashHeaders): Promise<Array<{
   }
 }
 
-function putStash(kind: 'draft', id: string, data: unknown, headers: StashHeaders): void {
+function putStash(kind: 'draft' | 'template', id: string, data: unknown, headers: StashHeaders): void {
   fetch('/api/mail/stash', { method: 'PUT', headers, body: JSON.stringify({ kind, id, data }) }).catch(() => {})
 }
 
-function deleteStashItem(kind: 'draft', id: string, headers: StashHeaders): void {
+function deleteStashItem(kind: 'draft' | 'template', id: string, headers: StashHeaders): void {
   fetch(`/api/mail/stash?kind=${kind}&id=${encodeURIComponent(id)}`, { method: 'DELETE', headers }).catch(() => {})
 }
 
@@ -1827,6 +1832,8 @@ export default function DevMailPage() {
   const [companyLogo, setCompanyLogo] = useState('')
   const [signatureTab, setSignatureTab] = useState<'personal' | 'company'>('personal')
   const [prefsLoaded, setPrefsLoaded] = useState(false)
+  const [templates, setTemplates] = useState<MailTemplate[]>([])
+  const [companyWords, setCompanyWords] = useState<string[]>([])
   useEffect(() => {
     if (!isLoggedIn || !prefsLoaded) return
     const timer = window.setTimeout(() => {
@@ -1841,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)
@@ -2907,7 +2929,7 @@ export default function DevMailPage() {
           // "comfortable" — is the default. Treating every unrecognised value as roomy put
           // six of the seven mailboxes into a reduced reader none of them had asked for.
           const density: MailSettings['density'] = stored.density === 'relaxed' ? 'relaxed' : 'compact'
-          setMailSettings(current => ({ ...current, ...data.settings, density, replyStyle: stored.replyStyle === 'mini' ? 'mini' : 'panel', ticker: tickerSettingsFrom(stored.ticker), threadMessages: stored.threadMessages === 'open' ? 'open' : 'collapsible' }))
+          setMailSettings(current => ({ ...current, ...data.settings, density, replyStyle: stored.replyStyle === 'mini' ? 'mini' : 'panel', ticker: tickerSettingsFrom(stored.ticker), threadMessages: stored.threadMessages === 'open' ? 'open' : 'collapsible', writing: writingSettingsFrom(stored.writing) }))
           const prefs = (data.settings as MailSettings).prefs
           if (prefs?.theme) { setThemePref(prefs.theme); localStorage.setItem(LS_THEME_KEY, prefs.theme) }
           if (prefs?.accent && hexToHsl(prefs.accent)) { setAccent(prefs.accent); localStorage.setItem(LS_ACCENT_KEY, prefs.accent) }
@@ -2917,6 +2939,15 @@ export default function DevMailPage() {
         setPrefsLoaded(true)
       })
       .catch(() => {})
+    fetchStash('template', headers).then(items =>
+      setTemplates(items.map(item => ({ ...(item.data as MailTemplate), id: item.id })).filter(template => typeof template.html === 'string')),
+    )
+    fetch('/api/mail/company-dictionary', { headers })
+      .then(response => response.json())
+      .then(data => {
+        if (data.ok && Array.isArray(data.words)) setCompanyWords(data.words)
+      })
+      .catch(() => {})
     fetch('/api/mail/company-signature', { headers })
       .then(response => response.json())
       .then(data => {
@@ -3940,6 +3971,46 @@ export default function DevMailPage() {
     [apiHeaders],
   )
 
+  const writingSettings = useMemo(() => writingSettingsFrom(settings.writing), [settings.writing])
+  const saveWriting = useCallback((next: WritingSettings) => saveSettings({ ...settings, writing: next }), [saveSettings, settings])
+  const saveTemplate = useCallback(
+    (template: MailTemplate) => {
+      setTemplates(list => [...list.filter(entry => entry.id !== template.id), template])
+      putStash('template', template.id, template, apiHeaders())
+    },
+    [apiHeaders],
+  )
+  const deleteTemplate = useCallback(
+    (id: string) => {
+      setTemplates(list => list.filter(entry => entry.id !== id))
+      deleteStashItem('template', id, apiHeaders())
+    },
+    [apiHeaders],
+  )
+  const saveCompanyWords = useCallback(
+    (words: string[]) => {
+      setCompanyWords(words)
+      fetch('/api/mail/company-dictionary', { method: 'PUT', headers: apiHeaders(), body: JSON.stringify({ words }) }).catch(() => {})
+    },
+    [apiHeaders],
+  )
+  const confirmIssues = useCallback(
+    async (issues: SendIssue[]) =>
+      issues.length === 0 ||
+      confirm({
+        title: 'Before you send',
+        body: (
+          <ul className={styles.sendIssues}>
+            {issues.map(issue => (
+              <li key={issue.kind}>{issue.message}</li>
+            ))}
+          </ul>
+        ),
+        confirmLabel: 'Send anyway',
+      }),
+    [confirm],
+  )
+
   const resetSignature = useCallback(async () => {
     const agreed = await confirm({
       title: 'Use the company signature?',
@@ -4486,6 +4557,17 @@ export default function DevMailPage() {
     // immediately — the delay/undo window only applies to attachment-free emails.
     const scheduledAt = attachable.length ? null : resolveScheduledAt()
 
+    const issues = sendIssues(
+      {
+        body: htmlToPlainText(compose.htmlDirty && compose.htmlSource.trim() ? compose.htmlSource : compose.bodyHtml || compose.markdown),
+        recipients: [...compose.to, ...compose.cc, ...compose.bcc].map(address => ({ email: address })),
+        attachmentCount: attachments.length,
+        ownDomains: LOGIN_DOMAINS,
+      },
+      writingSettings,
+    )
+    if (!(await confirmIssues(issues))) return
+
     if (settings.confirmSend && !scheduledAt) {
       const recipientList = [...compose.to, ...compose.cc, ...compose.bcc].join(', ')
       const agreed = await confirm({
@@ -4791,6 +4873,16 @@ export default function DevMailPage() {
       openReplySettings(entry)
       return
     }
+    const issues = sendIssues(
+      {
+        body: quickReply.trim() ? quickReply : htmlToPlainText(replyHtml),
+        recipients: [...draft.to, ...draft.cc, ...draft.bcc].map(address => ({ email: address })),
+        attachmentCount: attachments.length,
+        ownDomains: LOGIN_DOMAINS,
+      },
+      { ...writingSettings, checkEmptyBody: writingSettings.checkEmptyBody && replyBar !== 'forward' },
+    )
+    if (!(await confirmIssues(issues))) return
     setQuickSending(true)
     setReplyError('')
     try {
@@ -8284,6 +8376,21 @@ export default function DevMailPage() {
                   fonts={(settings.fonts ?? []).map(font => font.name)}
                   fontFaceCss={fontCss}
                   baseFont={defaultFont}
+                  writing={writingSettings}
+                  onWritingChange={saveWriting}
+                  templates={templates}
+                  onSaveTemplate={saveTemplate}
+                  onDeleteTemplate={deleteTemplate}
+                  templateContext={{
+                    firstName: firstNameFromAddress(compose.to[0]),
+                    email: compose.to[0],
+                    senderName: compose.fromName || settings.senderName || account?.name || undefined,
+                  }}
+                  companyWords={companyWords}
+                  onCompanyWords={isAdmin ? saveCompanyWords : undefined}
+                  isAdmin={isAdmin}
+                  onSubmit={() => void sendEmail()}
+                  requestHeaders={apiHeaders}
                 />
               )}
               {compose.quoteHtml && !compose.campaign.kind && (
@@ -8622,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/app/mail/tabKey.ts

@@ -10,9 +10,13 @@ export const TAB_TEXT = '    '
  * Whether this Tab is the second of a quick pair. The first press is remembered with a way
  * to take its indent back, which the second press uses before letting focus move on.
  */
-export function tabPress<Mark>(memory: { at: number; mark: Mark | null }, mark: () => Mark): { leaving: boolean; previous: Mark | null } {
+export function tabPress<Mark>(
+  memory: { at: number; mark: Mark | null },
+  mark: () => Mark,
+  windowMs: number = DOUBLE_TAB_MS,
+): { leaving: boolean; previous: Mark | null } {
   const now = Date.now()
-  if (now - memory.at < DOUBLE_TAB_MS) {
+  if (now - memory.at < windowMs) {
     const previous = memory.mark
     memory.at = 0
     memory.mark = null