@novacraft-engineering/mailbox 0.4.25 → 0.4.26

package/app/mail/page.module.css

@@ -7262,3 +7262,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,9 @@ 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 { 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 +357,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 +1135,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 +1145,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 +1831,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(() => {
@@ -2907,7 +2913,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 +2923,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 +3955,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 +4541,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 +4857,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 +8360,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 && (

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