@novacraft-engineering/mailbox 0.2.0 → 0.3.0

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

@@ -12,7 +12,7 @@ function fromAddressOf(email: SentEmail): string {
 
 export const runtime = 'nodejs'
 
-type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string }
+type SentEmail = { id: string; from: string; to: string[]; subject: string; createdAt: string; scheduledAt: string | null; lastEvent: string; attachmentCount: number }
 
 const KNOWN_AUTO_SUBJECTS = new Set([`Reset your ${BRAND.name} Mail password`])
 
@@ -65,6 +65,7 @@ export async function GET(req: Request) {
     createdAt: item.createdAt,
     scheduledAt: null,
     lastEvent: item.lastEvent ?? '',
+    attachmentCount: item.attachmentCount ?? 0,
   }))
 
   // Sent mail is scoped the same way the inbox is: to the signed-in mailbox, whatever
@@ -106,7 +107,7 @@ export async function GET(req: Request) {
         size: null,
         read: true,
         starred: Boolean(flagOf[email.id]?.starred),
-        hasAttachment: false,
+        hasAttachment: (email.attachmentCount ?? 0) > 0,
         labels: [],
         folder: flagOf[email.id]?.trashed ? 'trash' : flagOf[email.id]?.archived ? 'archive' : 'sent',
       }),

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

@@ -37,7 +37,7 @@ export async function GET(req: Request) {
       // Counting scans the whole match. Unfiltered, the sidebar already has this number
       // from countFolders, so only a search — whose match nothing else knows — pays for it.
       threadId,
-      withTotal: !cursor && Boolean(text),
+      withTotal: !cursor && Boolean(text || params.get('from') || params.get('to') || params.get('label') || params.get('unread') || params.get('starred') || params.get('attachment')),
       unread: params.get('unread') === '1' ? true : undefined,
       starred: params.get('starred') === '1' ? true : undefined,
       hasAttachment: params.get('attachment') === '1' || undefined,

package/app/mail/MailSelect.tsx

@@ -12,6 +12,16 @@ export function anchoredMenuStyle(anchor: HTMLElement): React.CSSProperties {
     : { ...base, top: rect.bottom + 6 }
 }
 
+export const GLYPH = {
+  font: <span className={styles.selectGlyphSerif}>A</span>,
+  size: 'tT',
+  spacing: (
+    <svg viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path d="M3 2v8M1.6 3.6L3 2l1.4 1.6M1.6 8.4L3 10l1.4-1.6M6.5 4.2h4M6.5 7.8h4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+}
+
 export const CHEVRON = (
   <svg className={styles.selectChevron} viewBox="0 0 12 8" fill="none" aria-hidden>
     <path d="M1 1l5 5 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
@@ -28,11 +38,10 @@ export default function MailSelect({
   editable = false,
   optionStyle,
   prefix,
-  compact = false,
-  title,
+  label,
 }: {
   value: string
-  options: Array<{ value: string; label: string }>
+  options: Array<{ value: string; label: string; closed?: string }>
   onChange: (value: string) => void
   ariaLabel: string
   buttonClassName?: string
@@ -40,11 +49,8 @@ export default function MailSelect({
   /** Typed values are accepted too: committed on Enter or when the field loses focus. */
   editable?: boolean
   optionStyle?: (value: string) => React.CSSProperties
-  /** A quiet glyph before the value, so three selects in a row can be told apart. */
   prefix?: React.ReactNode
-  /** Closed, show only the glyph; the value stays in the title and the menu. */
-  compact?: boolean
-  title?: string
+  label?: string
 }) {
   const [open, setOpen] = useState(false)
   const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({})
@@ -72,24 +78,26 @@ export default function MailSelect({
   }, [open])
 
   const current = options.find(option => option.value === value)
+  const shown = current?.closed ?? current?.label
   const toggle = () => {
     if (!open && anchorRef.current) setMenuStyle(anchoredMenuStyle(anchorRef.current))
     setOpen(prev => !prev)
   }
   const commitTyped = () => {
-    if (typed !== null && typed !== (current?.label ?? value)) onChange(typed.trim())
+    if (typed !== null && typed !== (shown ?? value)) onChange(typed.trim())
     setTyped(null)
   }
 
   return (
     <span className={styles.select} ref={wrapRef}>
       {editable ? (
-        <span ref={anchorRef as React.RefObject<HTMLSpanElement>} className={`${styles.selectBtn} ${styles.selectEditable} ${buttonClassName ?? ''}`} title={title}>
+        <span ref={anchorRef as React.RefObject<HTMLSpanElement>} className={`${styles.selectBtn} ${styles.selectEditable} ${buttonClassName ?? ''}`}>
           {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
+          {label && <span className={styles.selectLabel}>{label}</span>}
           <input
             className={styles.selectInput}
             aria-label={ariaLabel}
-            value={typed ?? current?.label ?? value}
+            value={typed ?? shown ?? value}
             placeholder={placeholder}
             onFocus={() => { if (!open) toggle() }}
             onChange={event => setTyped(event.target.value)}
@@ -113,12 +121,12 @@ export default function MailSelect({
           className={`${styles.selectBtn} ${buttonClassName ?? ''}`}
           aria-haspopup="listbox"
           aria-expanded={open}
-          aria-label={compact ? `${ariaLabel}: ${current?.label ?? placeholder}` : ariaLabel}
-          title={title ?? (compact ? `${ariaLabel}: ${current?.label ?? placeholder}` : undefined)}
+          aria-label={ariaLabel}
           onClick={toggle}
         >
           {prefix && <span className={styles.selectGlyph} aria-hidden>{prefix}</span>}
-          {!compact && <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{current?.label ?? placeholder}</span>}
+          {label && <span className={styles.selectLabel}>{label}</span>}
+          <span style={optionStyle && current?.value ? optionStyle(current.value) : undefined}>{shown ?? placeholder}</span>
           {CHEVRON}
         </button>
       )}

package/app/mail/RichEditor.tsx

@@ -10,7 +10,7 @@ import { CLIENT_BRAND } from '@/lib/brand.client'
 import TextAlign from '@tiptap/extension-text-align'
 import { FontFamily, FontSize, TextStyle } from '@tiptap/extension-text-style'
 import { LINE_SPACINGS, BUILTIN_FONTS, FONT_SIZES, fontStack, lineSpacingOf, paragraphGap, type BaseFont } from '@/lib/fonts'
-import MailSelect from './MailSelect'
+import MailSelect, { GLYPH } from './MailSelect'
 import { Color } from '@tiptap/extension-color'
 import Highlight from '@tiptap/extension-highlight'
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'
@@ -631,12 +631,10 @@ function Toolbar({ editor, uploadImage, fonts = [], baseFont }: { editor: Editor
         <MailSelect
           buttonClassName={styles.rteSelect}
           ariaLabel="Font"
-          placeholder={`${defaultFamily} (default)`}
-          prefix={<span className={styles.selectGlyphSerif}>A</span>}
-          compact
-          title={`Font: ${currentFamily || `${defaultFamily} (default)`}`}
+          label="Font"
+          prefix={GLYPH.font}
           value={currentFamily}
-          options={[{ value: '', label: `${defaultFamily} (default)` }, ...[...BUILTIN_FONTS, ...fonts.filter(font => !BUILTIN_FONTS.includes(font))].map(font => ({ value: font, label: font }))]}
+          options={[{ value: '', label: `${defaultFamily} (default)`, closed: defaultFamily }, ...[...BUILTIN_FONTS, ...fonts.filter(font => !BUILTIN_FONTS.includes(font))].map(font => ({ value: font, label: font }))]}
           optionStyle={font => (font ? { fontFamily: `'${font}', Arial, sans-serif` } : {})}
           onChange={family => {
             if (family) editor.chain().focus().setFontFamily(family).run()
@@ -646,12 +644,12 @@ function Toolbar({ editor, uploadImage, fonts = [], baseFont }: { editor: Editor
         <MailSelect
           buttonClassName={`${styles.rteSelect} ${styles.rteSizeSelect}`}
           ariaLabel="Font size"
+          label="Size"
           placeholder={defaultSize}
-          prefix="tT"
-          title={`Size — default ${defaultSize}`}
+          prefix={GLYPH.size}
           editable
           value={(editor.getAttributes('textStyle').fontSize as string | undefined) ?? ''}
-          options={[{ value: '', label: `${defaultSize} (default)` }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
+          options={[{ value: '', label: `${defaultSize} (default)`, closed: defaultSize }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
           onChange={raw => {
             const size = /^\d+(\.\d+)?$/.test(raw) ? `${raw}px` : raw
             if (!size || /default/i.test(size)) editor.chain().focus().unsetFontSize().run()
@@ -660,13 +658,13 @@ function Toolbar({ editor, uploadImage, fonts = [], baseFont }: { editor: Editor
         />
         <MailSelect
           buttonClassName={`${styles.rteSelect} ${styles.rteSizeSelect}`}
-          ariaLabel="Line spacing"
+          ariaLabel="Line height"
+          label="Line height"
           placeholder={defaultSpacing}
-          prefix="↕"
-          title={`Line spacing — default ${defaultSpacing}`}
+          prefix={GLYPH.spacing}
           editable
           value={editor.getAttributes('paragraph').lineSpacing ? String(editor.getAttributes('paragraph').lineSpacing) : ''}
-          options={[{ value: '', label: `${defaultSpacing} (default)` }, ...LINE_SPACINGS.map(spacing => ({ value: String(spacing), label: String(spacing) }))]}
+          options={[{ value: '', label: `${defaultSpacing} (default)`, closed: defaultSpacing }, ...LINE_SPACINGS.map(spacing => ({ value: String(spacing), label: String(spacing) }))]}
           onChange={raw => {
             const spacing = parseFloat(raw)
             if (!raw.trim() || /default/i.test(raw)) editor.chain().focus().updateAttributes('paragraph', { lineSpacing: null }).run()

package/app/mail/Ticker.tsx

@@ -3,17 +3,49 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 import styles from './page.module.css'
 
+export const TICKER_SPOTS = [
+  { group: 'Mail list', on: false, spots: [['listFrom', 'Sender'], ['listSubject', 'Subject'], ['listSnippet', 'Preview']] },
+  { group: 'Conversation', on: true, spots: [['threadFrom', 'Sender'], ['threadSnippet', 'Preview']] },
+  { group: 'Reader', on: true, spots: [['readerFrom', 'From'], ['readerTo', 'To and Cc']] },
+  { group: 'Attachments', on: true, spots: [['attachName', 'File names in the row'], ['attachChip', 'File names in the composer']] },
+  { group: 'Reply bar', on: true, spots: [['replyRecipients', 'Recipients']] },
+] as const
+
+export type TickerSpot = (typeof TICKER_SPOTS)[number]['spots'][number][0]
+export type TickerSettings = Partial<Record<TickerSpot, boolean>>
+
+const DEFAULT_ON = new Map<string, boolean>(TICKER_SPOTS.flatMap(group => group.spots.map(([spot]) => [spot, group.on])))
+
+export function tickerDefault(spot: TickerSpot): boolean {
+  return DEFAULT_ON.get(spot) ?? true
+}
+
+export function tickerSettingsFrom(raw: unknown): TickerSettings {
+  const kept: TickerSettings = {}
+  if (raw && typeof raw === 'object') {
+    for (const [spot, value] of Object.entries(raw)) {
+      if (DEFAULT_ON.has(spot) && typeof value === 'boolean') kept[spot as TickerSpot] = value
+    }
+  }
+  return kept
+}
+
 /**
  * One line of text that, when it does not fit, glides back and forth instead of ending in
  * an ellipsis. Measured on mount and whenever the host or its text changes size.
  */
-export default function Ticker({ className, title, children }: { className?: string; title?: string; children: ReactNode }) {
+export default function Ticker({ className, title, enabled = true, children }: { className?: string; title?: string; enabled?: boolean; children: ReactNode }) {
   const host = useRef<HTMLSpanElement>(null)
   const text = useRef<HTMLSpanElement>(null)
   useEffect(() => {
     const outer = host.current
     const inner = text.current
     if (!outer || !inner) return
+    if (!enabled) {
+      delete outer.dataset.ticker
+      outer.style.removeProperty('--ticker-shift')
+      return
+    }
     const measure = () => {
       const shift = inner.scrollWidth - outer.clientWidth
       if (shift > 4) {
@@ -31,7 +63,7 @@ export default function Ticker({ className, title, children }: { className?: str
     observer.observe(outer)
     observer.observe(inner)
     return () => observer.disconnect()
-  }, [children])
+  }, [children, enabled])
   return (
     <span ref={host} className={`${className ?? ''} ${styles.tickerHost}`} title={title}>
       <span ref={text} className={styles.tickerText}>{children}</span>

package/app/mail/page.module.css

@@ -196,6 +196,7 @@
 .folderActive {
   background: var(--nc-ink-3);
   color: var(--nc-fg-1);
+  box-shadow: inset 0 0 0 1.5px var(--nc-violet-500);
 }
 .folder svg { width: 16px; height: 16px; flex-shrink: 0; }
 /* Total for the folder — plain and muted. */
@@ -527,6 +528,12 @@
   cursor: pointer;
 }
 .crossFolderHint:hover { border-color: var(--nc-violet-500); }
+.emptyNudge {
+  align-self: center;
+  margin: 2px 0 0;
+  padding: 8px 14px;
+  font-size: 13px;
+}
 .refreshBtn svg { width: 14px; height: 14px; }
 .filterChip {
   margin-left: auto;
@@ -1681,7 +1688,7 @@
   border-radius: 6px;
   background: var(--nc-ink-1);
   color: var(--nc-fg-1);
-  font: 500 12px/1 var(--nc-font-sans);
+  font: 500 11px/1 var(--nc-font-sans);
 }
 .rteSwatches { display: flex; gap: 3px; }
 .rteSwatch {
@@ -2221,13 +2228,22 @@
 .selectBtn:hover { border-color: var(--nc-line-2); color: var(--nc-fg-1); }
 .selectGlyph {
   flex-shrink: 0;
-  font: 600 11px/1 var(--nc-font-mono);
-  letter-spacing: .02em;
-  color: var(--nc-fg-4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font: 700 11px/1 var(--nc-font-sans);
+  letter-spacing: .01em;
+  color: var(--nc-fg-3);
+}
+.selectGlyph svg { width: 13px; height: 13px; }
+.selectGlyphSerif { font: 700 13px/1 Georgia, 'Times New Roman', serif; }
+.selectLabel {
+  flex-shrink: 0;
+  color: var(--nc-fg-3);
+  white-space: nowrap;
 }
-.selectGlyphSerif { font: 600 14px/1 Georgia, 'Times New Roman', serif; color: var(--nc-fg-3); }
-.selectEditable .selectGlyph { margin-left: 9px; }
-.selectEditable .selectGlyph + .selectInput { padding-left: 6px; }
 .selectBtn > span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2270,6 +2286,7 @@
 .selectOptionOn { background: var(--nc-ink-4); color: var(--nc-violet-200); }
 
 .toolbar .selectBtn { padding: 7px 10px; font-size: 12px; }
+.selectBtn.rteSelect { font-size: 11.5px; }
 .campaignSelectBtn {
   width: 100%;
   justify-content: space-between;
@@ -2550,6 +2567,40 @@
   overflow: hidden;
   background: transparent;
 }
+.quoteLine {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 2px 0 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.quoteLineRule {
+  flex: 1;
+  height: 1px;
+  background: var(--nc-line-1);
+}
+.quoteLineLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 4px 11px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-3);
+  font: 500 11.5px/1 var(--nc-font-sans);
+  transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
+}
+.quoteLineLabel svg { width: 11px; height: 8px; }
+.quoteLine:hover .quoteLineLabel { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.quoteLine[aria-expanded='true'] .quoteLineLabel svg { transform: rotate(180deg); }
+
+.threadMsgStatic .threadMsgHead { cursor: default; }
 .threadMsg + .threadMsg { border-top: 1px solid var(--nc-line-1); }
 .threadMsgOpen .threadMsgHead { border-bottom: 1px solid var(--nc-line-1); }
 .threadMsgHead {
@@ -2591,6 +2642,34 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.threadMsgRecips {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  margin-top: 3px;
+  overflow: hidden;
+}
+.threadMsgRecipsText {
+  /* Hugs the addresses so Details sits beside them rather than out at the far margin. */
+  flex: 0 1 auto;
+  min-width: 0;
+  font: 400 11.5px/1.35 var(--nc-font-sans);
+  color: var(--nc-fg-3);
+}
+.threadMsgDetails {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--nc-violet-500);
+  font: 500 11px/1.35 var(--nc-font-sans);
+  cursor: pointer;
+}
+.threadMsgDetails:hover { text-decoration: underline; }
+
 .threadMsgDate {
   font: 400 11px/1 var(--nc-font-mono);
   color: var(--nc-fg-3);
@@ -3935,6 +4014,18 @@
   font: 500 14px/1.4 var(--nc-font-sans);
   color: var(--nc-fg-1);
 }
+.tickerGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+}
+.tickerGroupName {
+  font: 600 11px/1 var(--nc-font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--nc-fg-3);
+}
 .settingsToggle input {
   width: 16px;
   height: 16px;
@@ -6592,20 +6683,23 @@
 .fontInput { flex: 1 1 160px; height: 34px; padding: 0 10px; border: 1px solid var(--nc-line-1); border-radius: 8px; background: var(--nc-ink-1); color: var(--nc-fg-1); font: 500 13px/1 var(--nc-font-sans); }
 .fontUpload { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--nc-line-1); border-radius: 8px; font: 500 13px/1 var(--nc-font-sans); color: var(--nc-fg-1); cursor: pointer; }
 
-.selectEditable { padding: 0 6px 0 0; gap: 0; }
-.selectInput {
+.selectEditable { padding: 0 6px 0 8px; gap: 6px; }
+.selectBtn .selectInput {
   width: 3.5em;
   min-width: 0;
   height: 100%;
-  padding: 0 0 0 10px;
+  padding: 0;
   border: 0;
+  border-radius: 0;
   background: transparent;
+  box-shadow: none;
+  appearance: none;
   color: inherit;
   font: inherit;
   outline: none;
 }
-/* Wide enough for the word it actually shows: at 3.5em "Default" arrived as "Defi". */
-.rteSizeSelect .selectInput { padding-left: 8px; width: 6em; }
+.selectBtn .selectInput:focus { border: 0; box-shadow: none; }
+.rteSizeSelect .selectInput { width: 3.2em; }
 .selectChevronBtn { display: inline-flex; align-items: center; padding: 0 4px; border: 0; background: transparent; color: inherit; cursor: pointer; }
 .mailboxDomainSelect.selectBtn { padding: 4px 6px; background: transparent; border: 0; }