@bobfrankston/rmfmail 1.0.467

package/client/styles/layout.css

@@ -0,0 +1,332 @@
+/* mailx layout -- CSS Grid adaptive structure */
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: grid;
+    /* rail | folders | main */
+    grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr;
+    grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
+    grid-template-areas:
+        "toolbar  toolbar  toolbar"
+        "alert    alert    alert"
+        "rail     folders  main"
+        "status   status   status";
+    height: 100vh;
+    overflow: hidden;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height);
+    color: var(--color-text);
+    background: var(--color-bg);
+}
+
+/* When the calendar sidebar is on, re-flow the grid to reserve a fourth
+   column on the right. When off, no column is reserved — the aside is
+   display:none and the grid stays three-column. */
+body.calendar-sidebar-on {
+    grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr var(--cal-side-width, 280px);
+    grid-template-areas:
+        "toolbar  toolbar  toolbar  toolbar"
+        "alert    alert    alert    alert"
+        "rail     folders  main     cal-side"
+        "status   status   status   status";
+}
+
+.toolbar { grid-area: toolbar; }
+.icon-rail { grid-area: rail; }
+.folder-panel { grid-area: folders; display: flex; flex-direction: column; overflow: hidden; }
+.folder-tree { flex: 1; overflow-y: auto; }
+.main-area { grid-area: main; }
+.status-bar { grid-area: status; }
+
+/* Vertical icon rail — Thunderbird Supernova style: dark background with
+   light icons so the rail reads as "chrome" and contrasts visibly against
+   the content area (whether the app's in light or dark theme). Always
+   visible on wide+medium tiers; hidden on narrow (icons fold into
+   hamburger — TBD). */
+.icon-rail {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: oklch(0.25 0.01 250);
+    border-right: 1px solid oklch(0.18 0.01 250);
+    padding: 6px 0;
+    overflow: hidden;
+}
+.rail-top, .rail-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.rail-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rail-width, 48px);
+    height: 38px;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    color: oklch(0.88 0.01 250);
+    border-left: 3px solid transparent;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.rail-btn:hover:not([disabled]) {
+    background: oklch(0.32 0.02 250);
+    color: oklch(0.96 0.01 250);
+}
+.rail-btn[data-active="true"] {
+    background: oklch(0.35 0.03 250);
+    color: oklch(0.98 0.01 250);
+    border-left-color: var(--color-accent, #4a9cff);
+}
+.rail-btn[disabled] {
+    color: oklch(0.55 0.01 250);
+}
+.rail-btn { position: relative; }
+.rail-badge {
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    min-width: 18px;
+    padding: 1px 4px;
+    border-radius: 9px;
+    background: oklch(0.65 0.22 25);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1.4;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+}
+.rail-btn[disabled] {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+/* Main area: message list left, viewer right, vertical splitter */
+.main-area {
+    display: grid;
+    grid-template-columns: var(--list-viewer-split) var(--splitter-size) 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+}
+
+/* Preview pane hidden */
+.main-area.no-preview {
+    grid-template-columns: 1fr;
+}
+.main-area.no-preview .splitter,
+.main-area.no-preview .message-viewer { display: none; }
+.main-area.no-preview .message-list { border-right: none; }
+
+/* Full-screen viewer mode (mobile/Android) — viewer takes the whole app
+   surface; folder rail, folder tree, message list and statusbar are hidden.
+   Toggle via `body.viewer-fullscreen` from the pop-out / full-screen button.
+   On desktop the same button instead spawns a floating overlay (handled in
+   message-viewer.ts) and never sets this class. */
+body.viewer-fullscreen .folder-rail,
+body.viewer-fullscreen .folder-tree,
+body.viewer-fullscreen .message-list,
+body.viewer-fullscreen .splitter,
+body.viewer-fullscreen .toolbar,
+body.viewer-fullscreen .statusbar { display: none !important; }
+body.viewer-fullscreen .main-area {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: 1fr !important;
+}
+body.viewer-fullscreen .message-viewer {
+    display: flex !important;
+    grid-column: 1 / -1 !important;
+}
+
+/* Splitter */
+.splitter {
+    background: var(--color-border);
+    cursor: col-resize;
+    transition: background 0.15s;
+}
+.splitter:hover, .splitter:active {
+    background: var(--color-accent);
+}
+
+/* Responsive: mid-width (tablets, foldables) — keep rail + list + viewer; folders overlay.
+   Calendar sidebar is hidden in this tier by its own media query, and the
+   body grid does NOT include a cal-side column here — the .calendar-sidebar-on
+   body class override above is shadowed by this mid-width rule. */
+@media (max-width: 1100px) and (min-width: 769px) {
+    body,
+    body.calendar-sidebar-on {
+        grid-template-columns: var(--rail-width, 48px) 1fr;
+        grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
+        grid-template-areas:
+            "toolbar  toolbar"
+            "alert    alert"
+            "rail     main"
+            "status   status";
+    }
+
+    /* Folder panel: FULLY off-screen when closed — previously `calc(48px -
+       280px) = -232px` left a 48 px tail showing behind the rail, which on
+       Android (where the rail isn't always rendered) leaked a strip of
+       folder-row badges at the left edge of the viewport. Now the closed
+       panel is flush off-screen at `-280px` and the `.open` slide-in starts
+       at the rail's right edge. */
+    .folder-panel {
+        position: fixed;
+        left: -280px;
+        top: var(--toolbar-height);
+        bottom: var(--statusbar-height);
+        width: 280px;
+        z-index: 50;
+        transition: left 0.2s ease;
+        background: var(--color-bg);
+        border-right: 1px solid var(--color-border);
+        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
+    }
+    .folder-panel.open { left: var(--rail-width, 48px); }
+
+    /* Medium tier has the rail visible permanently — no hamburger needed.
+       Show the folder-toggle (📁) so the user can still reveal the folder
+       tree on demand. */
+    #btn-menu { display: none !important; }
+    #btn-folder-toggle { display: inline-flex !important; }
+}
+
+/* Responsive: narrow OR short viewport — single panel navigation */
+@media (max-width: 768px), (max-height: 600px) {
+    /* Preview snippets remain visible on narrow — user-controlled via the
+       View menu's "Preview snippets" checkbox. Previously this rule forced
+       them hidden on any narrow viewport, so Android users never saw the
+       checkbox take effect. */
+    /* Column headers (From/Date/Subject) take space without being useful on narrow */
+    .ml-header { display: none; }
+    /* Current folder name shown above the list, Dovecot-style */
+    .ml-folder-title { display: block; }
+    /* Version string overflows the toolbar on narrow — move to the status bar */
+    #app-version { display: none; }
+    #status-version {
+        color: var(--color-text-muted);
+        font-size: var(--font-size-sm);
+        margin-left: auto;
+    }
+    /* Drop button captions on narrow — icons are self-explanatory and captions overflow */
+    .toolbar .tb-label { display: none; }
+    /* View and Settings menus don't need to shout on narrow */
+    #view-menu, #settings-menu { display: none; }
+}
+@media (min-width: 769px) {
+    /* Status-bar version is a narrow-only mirror — keep it hidden on wide */
+    #status-version { display: none; }
+}
+@media (max-width: 768px), (max-height: 600px) {
+    body,
+    body.calendar-sidebar-on {
+        grid-template-columns: 1fr;
+        grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
+        grid-template-areas:
+            "toolbar"
+            "alert"
+            "main"
+            "status";
+    }
+
+    /* Rail on narrow: slide-in drawer triggered by the hamburger (☰). The
+       rail is the entry point to Inbox / All-Inboxes / Contacts / Calendar /
+       Tasks / Settings — without this drawer, narrow-tier users couldn't
+       reach any of those. */
+    .icon-rail {
+        display: flex;
+        position: fixed;
+        left: -64px;
+        top: var(--toolbar-height);
+        bottom: var(--statusbar-height);
+        z-index: 60;
+        transition: left 0.2s ease;
+        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
+    }
+    .icon-rail.open { left: 0; }
+
+    /* Folder panel: slide-in drawer triggered by the folder icon (📁).
+       Kept separate from the rail drawer so the user can have folders open
+       while the rail is closed, or vice versa — matching the desktop flow. */
+    .folder-panel {
+        position: fixed;
+        left: -280px;
+        top: var(--toolbar-height);
+        bottom: var(--statusbar-height);
+        width: 280px;
+        z-index: 50;
+        transition: left 0.2s ease;
+        background: var(--color-bg);
+        border-right: 1px solid var(--color-border);
+        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
+    }
+    .folder-panel.open { left: 0; }
+
+    /* Main area: single column */
+    .main-area {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+    }
+    .splitter { display: none; }
+
+    /* Show one panel at a time */
+    .message-viewer { display: none; }
+    .message-viewer.narrow-active {
+        display: flex;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: var(--color-bg);
+    }
+    .message-list.narrow-hidden { display: none; }
+
+    /* Hamburger opens the rail drawer; folder-toggle opens the folder drawer.
+       Both always visible on narrow so the user can reach either. */
+    #btn-menu { display: inline-flex !important; }
+    #btn-folder-toggle { display: inline-flex !important; }
+    /* Back button: only show when viewer is active (message list hidden) */
+    #btn-back { display: none !important; }
+    .message-viewer.narrow-active ~ * #btn-back,
+    body:has(.message-viewer.narrow-active) #btn-back {
+        display: inline-flex !important;
+        font-size: 1.1em;
+        font-weight: 600;
+        padding: 0.5em 1em;
+        background: var(--color-accent, #1a6dd4);
+        color: white;
+        border-radius: 6px;
+    }
+
+    /* Message list: full width, two-line rows */
+    .message-list {
+        grid-template-columns: 1.2em 1fr auto;
+    }
+    .message-list .ml-row {
+        grid-template-columns: subgrid;
+        grid-template-rows: auto auto;
+    }
+    .message-list .ml-flag { grid-row: 1 / 3; align-self: center; }
+    .message-list .ml-from { grid-column: 2; }
+    .message-list .ml-date { grid-column: 3; grid-row: 1; }
+    .message-list .ml-subject {
+        grid-column: 2 / 4;
+        grid-row: 2;
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+    }
+}
+
+/* Hide hamburger, folder-toggle, and back on wide screens (folder panel
+   permanent column, rail permanent column, no drawer toggles needed). */
+@media (min-width: 1101px) {
+    #btn-menu, #btn-folder-toggle, #btn-back { display: none !important; }
+}

package/client/styles/variables.css

@@ -0,0 +1,85 @@
+/* mailx design tokens -- all theming via custom properties */
+/* Theme controlled by class on <html>: theme-dark, theme-light, or absent (system) */
+
+:root {
+    /* Layout */
+    --rail-width: 44px;            /* vertical icon rail (Thunderbird/Dovecot style) */
+    --folder-width: 220px;
+    --toolbar-height: 44px;
+    --statusbar-height: 24px;
+    --splitter-size: 5px;
+    --list-viewer-split: 40%;
+
+    /* Colors — dark by default */
+    --color-brand: oklch(0.88 0.04 240);
+    --color-brand-dark: oklch(0.45 0.10 240);
+    --color-bg: oklch(0.20 0.02 270);
+    --color-bg-surface: oklch(0.25 0.03 270);
+    --color-bg-hover: color-mix(in oklch, var(--color-bg-surface) 80%, white);
+    --color-bg-selected: var(--color-brand);
+    --color-bg-toolbar: oklch(0.22 0.02 270);
+    --color-text: oklch(0.92 0.01 270);
+    --color-text-muted: oklch(0.68 0.02 270);
+    --color-accent: var(--color-brand-dark);
+    --color-unread: oklch(0.95 0.02 270);
+    --color-border: oklch(0.40 0.02 270);
+    --color-danger: oklch(0.65 0.15 15);
+    --color-success: oklch(0.65 0.15 145);
+    --color-badge: oklch(0.60 0.18 250);
+
+    /* Typography */
+    --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
+    --font-mono: "Cascadia Code", Consolas, monospace;
+    --font-size-sm: 0.9rem;
+    --font-size-base: 0.95rem;
+    --font-size-lg: 1.1rem;
+    --line-height: 1.45;
+
+    /* Spacing */
+    --gap-xs: 0.25rem;
+    --gap-sm: 0.5rem;
+    --gap-md: 0.75rem;
+    --gap-lg: 1rem;
+
+    /* Radii */
+    --radius-sm: 3px;
+    --radius-md: 6px;
+
+    color-scheme: dark light;
+}
+
+/* Light overrides */
+.theme-light {
+    --color-bg: oklch(0.97 0.005 270);
+    --color-bg-surface: oklch(1.0 0 0);
+    --color-bg-hover: oklch(0.95 0.005 270);
+    --color-brand: oklch(0.88 0.04 240);
+    --color-brand-dark: oklch(0.35 0.12 240);
+    --color-bg-selected: var(--color-brand);
+    --color-bg-toolbar: oklch(0.95 0.005 270);
+    --color-text: oklch(0.20 0.02 270);
+    --color-text-muted: oklch(0.45 0.02 270);
+    --color-accent: var(--color-brand-dark);
+    --color-unread: oklch(0.10 0.02 270);
+    --color-border: oklch(0.85 0.01 270);
+    color-scheme: light;
+}
+
+/* System preference: light — apply when no explicit theme class */
+@media (prefers-color-scheme: light) {
+    :root:not(.theme-dark):not(.theme-light) {
+        --color-bg: oklch(0.97 0.005 270);
+        --color-bg-surface: oklch(1.0 0 0);
+        --color-bg-hover: oklch(0.95 0.005 270);
+        --color-brand: oklch(0.88 0.04 240);
+        --color-brand-dark: oklch(0.35 0.12 240);
+        --color-bg-selected: var(--color-brand);
+        --color-bg-toolbar: oklch(0.95 0.005 270);
+        --color-text: oklch(0.20 0.02 270);
+        --color-text-muted: oklch(0.45 0.02 270);
+        --color-accent: var(--color-brand-dark);
+        --color-unread: oklch(0.10 0.02 270);
+        --color-border: oklch(0.85 0.01 270);
+        color-scheme: light;
+    }
+}

package/client/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "strictNullChecks": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "declaration": false,
+    "outDir": ".",
+    "rootDir": ".",
+    "newLine": "lf"
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "prev", "cruft"]
+}

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@bobfrankston/rmfmail",
+  "version": "1.0.467",
+  "description": "Local-first email client with IMAP sync and standalone native app",
+  "type": "module",
+  "main": "bin/mailx.js",
+  "bin": {
+    "rmfmail": "bin/mailx.js",
+    "mailx": "bin/mailx.js"
+  },
+  "workspaces": [
+    "packages/mailx-types",
+    "packages/mailx-host",
+    "packages/mailx-send",
+    "packages/mailx-compose",
+    "packages/mailx-settings",
+    "packages/mailx-store",
+    "packages/mailx-store-web",
+    "packages/mailx-imap",
+    "packages/mailx-service",
+    "packages/mailx-api",
+    "packages/mailx-core",
+    "packages/mailx-server",
+    "client"
+  ],
+  "scripts": {
+    "build": "tsc -p bin && node bin/build-icon-ico.js",
+    "watch": "tsc -w",
+    "start": "node --watch packages/mailx-server/index.js",
+    "start:prod": "node packages/mailx-server/index.js",
+    "release": "npmglobalize",
+    "postinstall": "node bin/postinstall.js"
+  },
+  "dependencies": {
+    "@bobfrankston/iflow-direct": "^0.1.27",
+    "@bobfrankston/iflow-node": "^0.1.8",
+    "@bobfrankston/miscinfo": "^1.0.10",
+    "@bobfrankston/oauthsupport": "^1.0.25",
+    "@bobfrankston/msger": "^0.1.369",
+    "@bobfrankston/mailx-host": "^0.1.10",
+    "@capacitor/android": "^8.3.0",
+    "@capacitor/cli": "^8.3.0",
+    "@capacitor/core": "^8.3.0",
+    "express": "^4.21.0",
+    "jsonc-parser": "^3.3.1",
+    "mailparser": "^3.7.2",
+    "nodemailer": "^7.0.0",
+    "quill": "^2.0.3",
+    "ws": "^8.18.0",
+    "sql.js": "^1.14.1",
+    "@bobfrankston/tcp-transport": "^0.1.5",
+    "@bobfrankston/node-tcp-transport": "^0.1.6",
+    "@bobfrankston/smtp-direct": "^0.1.5",
+    "@bobfrankston/mailx-sync": "^0.1.10",
+    "@bobfrankston/mailx-imap": "^0.1.15"
+  },
+  "devDependencies": {
+    "@types/mailparser": "^3.4.6"
+  },
+  "keywords": [
+    "email",
+    "imap",
+    "smtp",
+    "mail-client",
+    "webview"
+  ],
+  "author": "Bob Frankston",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BobFrankston/mailx.git"
+  },
+  ".dependencies": {
+    "@bobfrankston/iflow-direct": "file:../../MailApps/iflow-direct",
+    "@bobfrankston/iflow-node": "file:../../MailApps/iflow-node",
+    "@bobfrankston/miscinfo": "file:../../../projects/npm/miscinfo",
+    "@bobfrankston/oauthsupport": "file:../../../projects/oauth/oauthsupport",
+    "@bobfrankston/msger": "file:../../../utils/msgx/msger",
+    "@bobfrankston/mailx-host": "file:packages/mailx-host",
+    "@capacitor/android": "^8.3.0",
+    "@capacitor/cli": "^8.3.0",
+    "@capacitor/core": "^8.3.0",
+    "express": "^4.21.0",
+    "jsonc-parser": "^3.3.1",
+    "mailparser": "^3.7.2",
+    "nodemailer": "^7.0.0",
+    "quill": "^2.0.3",
+    "ws": "^8.18.0",
+    "sql.js": "^1.14.1",
+    "@bobfrankston/tcp-transport": "file:../../MailApps/tcp-transport",
+    "@bobfrankston/node-tcp-transport": "file:../../MailApps/node-tcp-transport",
+    "@bobfrankston/smtp-direct": "file:../../MailApps/smtp-direct",
+    "@bobfrankston/mailx-sync": "file:../../MailApps/mailx-sync",
+    "@bobfrankston/mailx-imap": "file:packages/mailx-imap"
+  },
+  ".transformedSnapshot": {
+    "dependencies": {
+      "@bobfrankston/iflow-direct": "^0.1.27",
+      "@bobfrankston/iflow-node": "^0.1.8",
+      "@bobfrankston/miscinfo": "^1.0.10",
+      "@bobfrankston/oauthsupport": "^1.0.25",
+      "@bobfrankston/msger": "^0.1.369",
+      "@bobfrankston/mailx-host": "^0.1.10",
+      "@capacitor/android": "^8.3.0",
+      "@capacitor/cli": "^8.3.0",
+      "@capacitor/core": "^8.3.0",
+      "express": "^4.21.0",
+      "jsonc-parser": "^3.3.1",
+      "mailparser": "^3.7.2",
+      "nodemailer": "^7.0.0",
+      "quill": "^2.0.3",
+      "ws": "^8.18.0",
+      "sql.js": "^1.14.1",
+      "@bobfrankston/tcp-transport": "^0.1.5",
+      "@bobfrankston/node-tcp-transport": "^0.1.6",
+      "@bobfrankston/smtp-direct": "^0.1.5",
+      "@bobfrankston/mailx-sync": "^0.1.10",
+      "@bobfrankston/mailx-imap": "^0.1.15"
+    }
+  }
+}

package/packages/mailx-api/.gitattributes

@@ -0,0 +1,10 @@
+# Force LF line endings for all text files
+* text=auto eol=lf
+
+# Ensure these are always LF
+*.ts text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf

package/packages/mailx-api/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @bobfrankston/mailx-api
+ * Thin Express Router — delegates all logic to mailx-service.
+ */
+import { Router } from "express";
+import { MailxDB } from "@bobfrankston/mailx-store";
+import { ImapManager } from "@bobfrankston/mailx-imap";
+export declare function createApiRouter(db: MailxDB, imapManager: ImapManager): Router;
+export { MailxService } from "@bobfrankston/mailx-service";
+//# sourceMappingURL=index.d.ts.map

package/packages/mailx-api/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIvD,wBAAgB,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,MAAM,CA4Q7E;AAGD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}