@novacraft-engineering/mailbox 0.2.0 → 0.2.1

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/page.module.css

@@ -1681,7 +1681,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 +2221,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 +2279,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;
@@ -6592,20 +6602,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; }
 

package/app/mail/page.tsx

@@ -10,7 +10,7 @@ import { subscribePush, unsubscribePush, useInstall, useNotifications } from './
 import RichEditor from './RichEditor'
 import { inlineEmailStyles, htmlToPlainText, dropUnreachableImages, outlookSafeImages, stripOwnPixel } from '@/lib/email-html'
 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 from './MailSelect'
+import MailSelect, { GLYPH } from './MailSelect'
 import Ticker from './Ticker'
 import { applyThreadFlagDeltas, normalizeSubject } from '@/lib/threads'
 import { defaultSignature, fillSignature } from '@/lib/default-signature'
@@ -8221,19 +8221,19 @@ export default function DevMailPage() {
               <div className={styles.fontAdd}>
                 <MailSelect
                   ariaLabel="Default font"
-                  prefix={<span className={styles.selectGlyphSerif}>A</span>}
+                  prefix={GLYPH.font}
                   value={settings.defaultFont?.family ?? ''}
-                  options={[{ value: '', label: 'Arial (standard)' }, ...[...BUILTIN_FONTS, ...(settings.fonts ?? []).map(font => font.name)].filter((font, index, all) => all.indexOf(font) === index).map(font => ({ value: font, label: font }))]}
+                  options={[{ value: '', label: 'Arial (standard)', closed: 'Arial' }, ...[...BUILTIN_FONTS, ...(settings.fonts ?? []).map(font => font.name)].filter((font, index, all) => all.indexOf(font) === index).map(font => ({ value: font, label: font }))]}
                   optionStyle={font => (font ? { fontFamily: `'${font}', Arial, sans-serif` } : {})}
                   onChange={family => setMailSettings(current => ({ ...current, defaultFont: { ...(current.defaultFont ?? EMPTY_FONT), family } }))}
                 />
                 <MailSelect
                   ariaLabel="Default size"
-                  prefix="tT"
+                  prefix={GLYPH.size}
                   editable
                   placeholder="15"
                   value={settings.defaultFont?.size ?? ''}
-                  options={[{ value: '', label: '15 (standard)' }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
+                  options={[{ value: '', label: '15 (standard)', closed: '15' }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
                   onChange={raw => {
                     const size = /^\d+(\.\d+)?$/.test(raw) ? `${raw}px` : raw
                     if (size && !/^\d+(\.\d+)?(px|pt|em|rem|%)$/.test(size)) return
@@ -8248,12 +8248,12 @@ export default function DevMailPage() {
               <div className={styles.fontAdd}>
                 <MailSelect
                   ariaLabel="Line spacing"
-                  prefix="↕"
+                  prefix={GLYPH.spacing}
                   editable
                   placeholder={String(DEFAULT_LINE_SPACING)}
                   value={settings.defaultFont?.lineSpacing ? String(settings.defaultFont.lineSpacing) : ''}
                   options={[
-                    { value: '', label: `${DEFAULT_LINE_SPACING} (standard)` },
+                    { value: '', label: `${DEFAULT_LINE_SPACING} (standard)`, closed: String(DEFAULT_LINE_SPACING) },
                     ...LINE_SPACINGS.filter(spacing => spacing !== DEFAULT_LINE_SPACING).map(spacing => ({ value: String(spacing), label: String(spacing) })),
                   ]}
                   onChange={raw => {

package/package.json

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