@bobfrankston/rmfmail 1.0.467

package/client/compose/compose.css

@@ -0,0 +1,560 @@
+/* Compose window styles */
+
+.compose-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.compose-modal {
+    background: var(--color-bg, #fff);
+    border-radius: 6px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+    padding: 20px 24px;
+    min-width: 320px;
+    max-width: 480px;
+
+    & .compose-modal-msg {
+        margin-bottom: 18px;
+        font-size: 14px;
+        color: var(--color-text, #222);
+    }
+
+    & .compose-modal-buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    & .compose-modal-btn {
+        padding: 6px 14px;
+        border: 1px solid var(--color-border, #ccc);
+        background: var(--color-bg-surface, #f6f6f6);
+        border-radius: 4px;
+        font: inherit;
+        cursor: pointer;
+
+        &:hover { background: var(--color-bg-hover, #ececec); }
+
+        &.primary {
+            background: #0b6bcb;
+            color: #fff;
+            border-color: #0b6bcb;
+
+            &:hover { background: #095aa8; }
+        }
+    }
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    background: var(--color-bg);
+    margin: 0;
+}
+
+.compose-header {
+    padding: var(--gap-sm) var(--gap-md);
+    background: var(--color-bg-surface);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.compose-field {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) 0;
+}
+
+/* HTML `hidden` attribute is display:none by UA default, but the `display:
+   flex` above wins specificity-wise and the row stays visible. Restore the
+   expected hide behavior — the Cc/Bcc toggle buttons flip `hidden` to
+   reveal/conceal the rows, which is pointless if CSS forces them on. */
+.compose-field[hidden] {
+    display: none;
+}
+
+.compose-field label {
+    flex: 0 0 60px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-align: right;
+}
+
+.compose-field input,
+.compose-field select {
+    flex: 1;
+    padding: var(--gap-xs) var(--gap-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-base);
+    font-family: var(--font-ui);
+}
+
+.compose-field input:focus,
+.compose-field select:focus {
+    outline: 1px solid var(--color-accent);
+    border-color: var(--color-accent);
+}
+
+.compose-toolbar {
+    display: flex;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-md);
+    background: var(--color-bg-toolbar);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.compose-toolbar .tb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-md);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+}
+
+.compose-toolbar .tb-btn:hover {
+    background: var(--color-bg-hover);
+}
+
+.compose-status {
+    margin-left: auto;
+    align-self: center;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    padding: 0 var(--gap-md);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 20em;
+}
+.compose-status.compose-status-error {
+    color: oklch(0.65 0.2 25);
+    font-weight: 500;
+}
+
+#btn-send {
+    background: var(--color-accent);
+    color: white;
+    font-weight: 600;
+}
+
+#btn-send:hover {
+    filter: brightness(1.1);
+}
+
+#btn-discard {
+    margin-left: auto;
+    color: var(--color-danger);
+}
+
+/* Quill editor fills remaining space */
+#compose-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Override Quill theme to match mailx tokens */
+.ql-toolbar.ql-snow {
+    border: none !important;
+    border-bottom: 1px solid var(--color-border) !important;
+    background: var(--color-bg-toolbar);
+}
+
+.ql-container.ql-snow {
+    border: none !important;
+    flex: 1;
+    overflow-y: auto;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+
+.ql-editor {
+    color: var(--color-text);
+    padding: var(--gap-md);
+    min-height: 100%;
+}
+
+.ql-editor.ql-blank::before {
+    color: var(--color-text-muted);
+    font-style: normal;
+}
+
+/* Quill toolbar icon colors */
+.ql-snow .ql-stroke {
+    stroke: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-fill {
+    fill: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-picker-label {
+    color: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-active .ql-stroke {
+    stroke: var(--color-accent) !important;
+}
+
+.ql-snow .ql-active .ql-fill {
+    fill: var(--color-accent) !important;
+}
+
+.ql-snow .ql-picker-options {
+    background: var(--color-bg-surface) !important;
+    border-color: var(--color-border) !important;
+}
+
+/* Autocomplete dropdown */
+.compose-field { position: relative; }
+
+.ac-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 68px;
+    right: 0;
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    z-index: 200;
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.ac-item {
+    display: flex;
+    flex-direction: column;
+    padding: var(--gap-xs) var(--gap-sm);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+
+.ac-item:hover, .ac-item.ac-active {
+    background: var(--color-bg-hover);
+}
+
+.ac-item-name {
+    font-weight: 600;
+}
+
+.ac-item-email {
+    color: var(--color-text-muted);
+    font-size: 0.8em;
+}
+
+/* Source badge in the autocomplete row. Custom user tags from
+ * contacts.jsonc#preferred[] (e.g. "work", "family") flow through verbatim;
+ * system sources show as 'google' / 'discovered' / 'preferred'. Inline-block
+ * so the small uppercased text doesn't push layout. */
+.ac-item-source {
+    color: var(--color-text-muted);
+    font-size: 0.7em;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 0.7;
+    margin-top: 2px;
+}
+
+/* Modal overlay used by Add-to-preferred dialog. Lightweight; shares no
+ * CSS with the main app's modal because compose runs in its own document. */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+.modal-overlay .modal {
+    background: var(--color-bg-surface);
+    border-radius: var(--radius-md);
+    padding: var(--gap-md);
+    min-width: 360px;
+    max-width: 90%;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    & h3 { margin: 0 0 var(--gap-sm); }
+    & p.muted { color: var(--color-text-muted); font-size: 0.85em; margin: 0 0 var(--gap-sm); }
+    & label {
+        display: block;
+        margin-bottom: var(--gap-sm);
+        font-size: var(--font-size-sm);
+        & input {
+            display: block;
+            width: 100%;
+            padding: 4px 6px;
+            margin-top: 2px;
+            background: var(--color-bg-input);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-sm);
+            color: var(--color-text);
+        }
+    }
+    & .modal-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--gap-sm);
+        margin-top: var(--gap-sm);
+        & button.primary {
+            background: var(--color-primary, #4a90e2);
+            color: white;
+            border: none;
+            padding: 4px 12px;
+            border-radius: var(--radius-sm);
+            cursor: pointer;
+        }
+    }
+}
+
+/* ── tiptap editor ── */
+.editor-tiptap {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.tt-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: var(--gap-xs) var(--gap-sm);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-toolbar);
+    flex-wrap: wrap;
+}
+
+.tt-btn {
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+
+.tt-btn:hover { background: var(--color-bg-hover); color: var(--color-text); }
+
+.tt-heading {
+    border: 1px solid var(--color-border);
+    background: var(--color-bg);
+    color: var(--color-text);
+    padding: 2px 4px;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+}
+
+.tt-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.tt-content .tiptap {
+    padding: var(--gap-md);
+    min-height: 100%;
+    outline: none;
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+
+.tt-content .tiptap p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-text-muted);
+    pointer-events: none;
+    float: left;
+    height: 0;
+}
+
+.tt-content .tiptap blockquote {
+    border-left: 3px solid var(--color-border);
+    padding-left: var(--gap-md);
+    color: var(--color-text-muted);
+}
+
+/* Quoted original message in reply/forward */
+.reply {
+    border-left: 3px solid var(--color-border);
+    padding-left: var(--gap-md);
+    margin-top: var(--gap-md);
+    color: var(--color-text-muted);
+}
+
+/* Ghost text autocomplete overlay */
+.ghost-text {
+    position: absolute;
+    color: var(--color-text-muted);
+    font-style: italic;
+    opacity: 0.5;
+    pointer-events: none;
+    white-space: pre-wrap;
+    z-index: 10;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    max-width: 60ch;
+}
+.ql-editor, .tt-content .tiptap { position: relative; }
+
+/* Attachment chips above the editor */
+.compose-attachments {
+    padding: var(--gap-xs) var(--gap-md);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    background: var(--color-bg-surface);
+    border-bottom: 1px solid var(--color-border);
+}
+.compose-att-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 8px;
+    border-radius: 999px;
+    background: color-mix(in oklch, var(--color-accent) 15%, transparent);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+}
+.compose-att-chip button {
+    background: none;
+    border: none;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    padding: 0;
+    font-size: 1em;
+    line-height: 1;
+}
+.compose-att-chip button:hover { color: oklch(0.65 0.2 25); }
+
+/* Cc/Bcc toggle buttons in the To row */
+.compose-recipient-toggle {
+    display: inline-flex;
+    gap: 4px;
+    margin-left: var(--gap-xs);
+}
+.compose-toggle-btn {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
+    padding: 1px 8px;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    font-family: inherit;
+}
+.compose-toggle-btn:hover { background: var(--color-bg-hover); color: var(--color-text); }
+.compose-toggle-btn.active {
+    background: var(--color-accent);
+    color: #fff;
+    border-color: transparent;
+}
+
+/* Link editor modal (Ctrl+K / toolbar link button) */
+.mailx-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.mailx-modal {
+    background: var(--color-bg);
+    color: var(--color-text);
+    padding: var(--gap-lg);
+    border-radius: var(--radius-md);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    min-width: 420px;
+    max-width: 90vw;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+    font-family: var(--font-ui);
+}
+.mailx-modal-title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+}
+.mailx-modal-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+}
+.mailx-modal-input {
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+.mailx-modal-input:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -1px;
+}
+.mailx-modal-buttons {
+    display: flex;
+    gap: var(--gap-sm);
+    align-items: center;
+    margin-top: var(--gap-xs);
+}
+.mailx-modal-spacer { flex: 1; }
+.mailx-modal-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+.mailx-modal-btn:hover { background: var(--color-bg-hover); }
+.mailx-modal-btn-primary {
+    background: var(--color-accent);
+    color: #fff;
+    border-color: transparent;
+    font-weight: 500;
+}
+.mailx-modal-btn-primary:hover { filter: brightness(1.1); }
+
+/* Link hover preview: small floating URL below the anchor */
+.mailx-link-hover {
+    position: fixed;
+    padding: 4px 8px;
+    background: rgba(20, 20, 28, 0.92);
+    color: #e6e6f0;
+    font-size: 0.8rem;
+    font-family: var(--font-ui);
+    border-radius: var(--radius-sm);
+    max-width: 60ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 2100;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}

package/client/compose/compose.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compose - mailx</title>
+    <link rel="icon" type="image/svg+xml" href="../favicon.svg">
+    <link rel="stylesheet" href="../styles/variables.css">
+    <link rel="stylesheet" href="compose.css">
+    <!-- Editor CSS/JS loaded dynamically by compose.ts based on setting -->
+    <script type="module" src="compose.js"></script>
+</head>
+<body>
+    <div class="compose-header">
+        <div class="compose-field compose-from-field">
+            <label for="compose-from-input">From</label>
+            <input type="text" id="compose-from-input" list="compose-from-options" autocomplete="off" spellcheck="false">
+            <datalist id="compose-from-options"></datalist>
+        </div>
+        <div class="compose-field">
+            <label for="compose-to">To</label>
+            <input type="text" id="compose-to" autocomplete="off">
+            <span class="compose-recipient-toggle">
+                <button type="button" class="compose-toggle-btn" id="btn-toggle-cc" tabindex="-1" title="Show/hide Cc">Cc</button>
+                <button type="button" class="compose-toggle-btn" id="btn-toggle-bcc" tabindex="-1" title="Show/hide Bcc">Bcc</button>
+            </span>
+        </div>
+        <div class="compose-field" id="compose-cc-row" hidden>
+            <label for="compose-cc">Cc</label>
+            <input type="text" id="compose-cc" autocomplete="off">
+        </div>
+        <div class="compose-field" id="compose-bcc-row" hidden>
+            <label for="compose-bcc">Bcc</label>
+            <input type="text" id="compose-bcc" autocomplete="off">
+        </div>
+        <div class="compose-field">
+            <label for="compose-subject">Subject</label>
+            <input type="text" id="compose-subject" autocomplete="off">
+        </div>
+    </div>
+    <div class="compose-toolbar">
+        <button class="tb-btn" id="btn-send">Send</button>
+        <button class="tb-btn" id="btn-attach">Attach</button>
+        <input type="file" id="compose-file" multiple hidden>
+        <button class="tb-btn" id="btn-edit-in-word" title="Open the body in Microsoft Word — saves in Word reload back into the editor">Edit in Word</button>
+        <button class="tb-btn" id="btn-discard">Discard</button>
+        <span id="compose-status" class="compose-status"></span>
+    </div>
+    <div id="compose-attachments" class="compose-attachments" hidden></div>
+    <div id="compose-editor"></div>
+</body>
+</html>