feat: Tailwind v4 + FlyonUI admin UI theme

.ncurc.js

@@ -19,10 +19,6 @@ module.exports = {
         // the deprecated, default-off Document Store. Even the 8.19 minor is unsafe to bundle.
         '@elastic/elasticsearch',
 
-        // v4.x adds vulnerable jquery + bootstrap runtime dependencies; v3.3.7 has none. Used only
-        // for the generated software-license listing, never executed at runtime.
-        'startbootstrap-sb-admin-2',
-
         // @asamuzakjp/css-color >=4.1.2 pulls in @csstools/* v4 which are pure ESM and break pkg bundling
         // (transitive via @postalsys/email-text-tools -> jsdom -> cssstyle; also pinned in package.json "overrides").
         '@asamuzakjp/css-color'

CLAUDE.md

@@ -42,6 +42,19 @@ EmailEngine is an email sync platform that provides REST API access to email acc
 - **Database**: Redis (ioredis) + BullMQ for job queues
 - **Email**: ImapFlow (IMAP), Nodemailer (SMTP)
 - **OAuth2**: Gmail API, Microsoft Graph, Mail.ru
+- **Web UI**: server-rendered Handlebars, styled with Tailwind v4 + FlyonUI (see Admin UI Theme below)
+
+## Admin UI Theme
+
+The web UI is styled with Tailwind v4 + FlyonUI (daisyUI/Preline based). There is no SPA framework - pages are server-rendered Handlebars with small per-page scripts.
+
+- **Build**: `npm run build:css` compiles `static/css/src/app.tailwind.css` (brand themes, safelists, custom components) into the committed artifact `static/css/flyonui.css`. `static/js/flyonui.js` is vendored from node_modules. Both are regenerated by `copy-static-files.sh` and bundled by pkg. tailwindcss/flyonui/iconify are exact-pinned devDependencies only. After editing templates or `app.tailwind.css`, re-run `npm run build:css` and commit the artifact.
+- **Brand**: primary indigo `#4C5CC5`, secondary/accent coral `#F8485E` (from the EmailEngine logo sheet), font PT Sans (self-hosted under `static/fonts/pt-sans/`). Light + dark themes with a topbar toggle (`eeTheme` in localStorage, applied pre-paint by `views/partials/theme_init.hbs`).
+- **Component library**: reusable parameterized partials in `views/partials/ui/` (btn, badge, modal, form-field, checkbox, tooltip, tooltip-rich, stat-card, page-header, setting-ref, details, breadcrumb, pagination, menu-*). Build missing primitives there first; never hand-roll per page. Block-form partials must neutralize their own hash params when invoking `{{> @partial-block}}` (and any nested `ui/*` call) - Handlebars hash params fall through into nested partials otherwise.
+- **Safelist trap**: class names built in JS strings (`badge-${type}`) or emitted from `lib/`/`workers/` (server-driven icons) are invisible to the Tailwind scanner - add them to the `@source inline(...)` safelists in `app.tailwind.css`.
+- **Icons**: Tabler via Iconify classes (`icon-[tabler--...]` on a span). Do not add Font Awesome back. Do not add apexcharts (restrictive license, breaks `npm run licenses`).
+- **No jQuery**: the admin UI is jQuery-free. The SSE-updated state badges render through `ui/state-badge` (FlyonUI tooltip carries the error text; `static/js/app.js` repaints badge class/text and toggles the tooltip body), and the TLS cert labels use `ui/tooltip` repainted by `paintCertData()` in `static/js/ui.js`. Do not reintroduce jQuery or `data-toggle` attributes.
+- **Do not run prettier on .hbs files** (it mangles inline scripts), and never use HTML entities inside Handlebars partial hash strings (they double-escape; entities in plain markup are fine).
 
 ## Development Commands
 

copy-static-files.sh

@@ -24,6 +24,12 @@ cp node_modules/ace-builds/src-min/ext-searchbox.js static/js/ace/ext-searchbox.
 
 cp node_modules/\@postalsys/ee-client/index.js static/js/ee-client.js
 
+# FlyonUI browser bundle (vendored like ace above; committed and bundled by pkg)
+cp node_modules/flyonui/flyonui.js static/js/flyonui.js
+
+# Rebuild the compiled admin UI stylesheet (Tailwind v4 + FlyonUI)
+npm run build:css
+
 wget https://developers.google.com/static/crawling/ipranges/special-crawlers.json -O data/google-crawlers.json
 node -e 'console.log("Google crawlers updated: "+require("./data/google-crawlers.json").creationTime);'
 

data/google-crawlers.json

@@ -1,5 +1,5 @@
 {
-    "creationTime": "2026-07-10T14:46:30.000000",
+    "creationTime": "2026-07-15T14:46:20.000000",
     "prefixes": [
         {
             "ipv6Prefix": "2001:4860:4801:2008::/64"

lib/oauth2-apps.js

@@ -74,7 +74,7 @@ function oauth2ProviderData(provider, selector) {
 
     switch (provider) {
         case 'gmail':
-            providerData.icon = 'fab fa-google';
+            providerData.icon = 'icon-[tabler--brand-google]';
             providerData.tutorialUrl = 'https://emailengine.app/gmail-over-imap';
             providerData.linkImage = '/static/providers/google_dark_edited.png';
             providerData.imap = {
@@ -90,7 +90,7 @@ function oauth2ProviderData(provider, selector) {
             break;
 
         case 'gmailService':
-            providerData.icon = 'fab fa-google';
+            providerData.icon = 'icon-[tabler--brand-google]';
             providerData.tutorialUrl = 'https://emailengine.app/google-service-accounts';
             providerData.imap = {
                 host: 'imap.gmail.com',
@@ -125,7 +125,7 @@ function oauth2ProviderData(provider, selector) {
                         break;
                 }
 
-                providerData.icon = 'fab fa-microsoft';
+                providerData.icon = 'icon-[tabler--brand-windows]';
                 if (provider === 'outlook') {
                     providerData.tutorialUrl = 'https://emailengine.app/outlook-and-ms-365';
                     providerData.linkImage = '/static/providers/ms_light.svg';
@@ -146,7 +146,7 @@ function oauth2ProviderData(provider, selector) {
             break;
 
         case 'mailRu':
-            providerData.icon = 'fa fa-envelope';
+            providerData.icon = 'icon-[tabler--mail]';
             providerData.imap = {
                 host: 'imap.mail.ru',
                 port: 993,
@@ -160,7 +160,7 @@ function oauth2ProviderData(provider, selector) {
             break;
 
         default:
-            providerData.icon = 'fa fa-envelope';
+            providerData.icon = 'icon-[tabler--mail]';
     }
 
     return providerData;

lib/ui-routes/account-routes.js

@@ -1202,6 +1202,12 @@ function init(args) {
             let gatewayObject = new Gateway({ redis });
             let gateways = await gatewayObject.listGateways(0, 100);
 
+            // the ID response fields come from the remote IMAP server; only expose
+            // support-url as a link when it is a plain http(s) URL
+            if (accountData.imapServerInfo && accountData.imapServerInfo['support-url'] && !/^https?:\/\//i.test(accountData.imapServerInfo['support-url'])) {
+                delete accountData.imapServerInfo['support-url'];
+            }
+
             let capabilities = [];
             if (accountData.imapServerInfo && accountData.imapServerInfo.capabilities) {
                 capabilities = await capa(accountData.imapServerInfo.capabilities);

lib/ui-routes/admin-entities-routes.js

@@ -1575,7 +1575,7 @@ return payload;`)
                             label.type = 'success';
                             label.name = 'Connected';
                         } else if (entry.lastError) {
-                            label.type = 'danger';
+                            label.type = 'error';
                             label.name = 'Error';
                             label.error = entry.lastError.response;
                         } else {
@@ -1645,7 +1645,7 @@ return payload;`)
                 label.type = 'success';
                 label.name = 'Connected';
             } else if (gatewayData.lastError) {
-                label.type = 'danger';
+                label.type = 'error';
                 label.name = 'Error';
                 label.error = gatewayData.lastError.response;
             } else {

lib/ui-routes/dashboard-routes.js

@@ -23,49 +23,52 @@ function init(args) {
                     key: 'events:messageNew',
                     title: 'New emails',
                     color: 'primary',
-                    icon: 'envelope',
+                    // icon must be a full iconify class; this file is not scanned by
+                    // Tailwind - add any new class to the @source inline() safelist
+                    // in static/css/src/app.tailwind.css or it renders as no icon
+                    icon: 'icon-[tabler--mail]',
                     comment: 'Detected new emails in IMAP mailboxes.'
                 },
                 {
                     key: 'webhooks:success',
                     title: 'Webhooks sent',
                     color: 'primary',
-                    icon: 'network-wired',
+                    icon: 'icon-[tabler--webhook]',
                     comment: 'Count of successfully delivered webhooks.'
                 },
                 {
                     key: 'webhooks:fail',
                     title: 'Webhooks failed',
                     color: 'danger',
-                    icon: 'network-wired',
+                    icon: 'icon-[tabler--webhook]',
                     comment: 'Count of webhooks that failed to deliver.'
                 },
                 {
                     key: 'submit:success',
                     title: 'Emails sent',
                     color: 'primary',
-                    icon: 'mail-bulk',
+                    icon: 'icon-[tabler--mail-forward]',
                     comment: 'Count of emails sent to MTA servers.'
                 },
                 {
                     key: 'submit:fail',
                     title: 'Emails rejected',
                     color: 'danger',
-                    icon: 'mail-bulk',
+                    icon: 'icon-[tabler--mail-forward]',
                     comment: 'Count of emails rejected by MTA servers.'
                 },
                 {
                     key: 'apiCall:success',
                     title: 'Successful API calls',
                     color: 'primary',
-                    icon: 'file-code',
+                    icon: 'icon-[tabler--file-code]',
                     comment: 'Successful API calls with positive responses.'
                 },
                 {
                     key: 'apiCall:fail',
                     title: 'Failed API calls',
                     color: 'danger',
-                    icon: 'file-code',
+                    icon: 'icon-[tabler--file-code]',
                     comment: 'API calls that returned error responses.'
                 }
             ];
@@ -106,7 +109,7 @@ function init(args) {
                         key: 'redisPing',
                         title: 'Redis Latency',
                         color: typeof stats.redisPing !== 'number' ? 'warning' : stats.redisPing < ALLOWED_REDIS_LATENCY ? 'success' : 'danger',
-                        icon: 'clock',
+                        icon: 'icon-[tabler--clock]',
                         comment: 'How many milliseconds does it take to run a Redis command',
                         value: typeof stats.redisPing !== 'number' ? '\u2013' : nrFormatter.format(stats.redisPing / 1000000)
                     }

lib/ui-routes/internals-routes.js

@@ -76,11 +76,11 @@ function init(args) {
                                 case 'critical':
                                 case 'restarting':
                                     threadInfo.healthBadge = 'Critical';
-                                    threadInfo.healthBadgeType = 'danger';
+                                    threadInfo.healthBadgeType = 'error';
                                     break;
                                 case 'unknown':
                                     threadInfo.healthBadge = 'Unknown';
-                                    threadInfo.healthBadgeType = 'secondary';
+                                    threadInfo.healthBadgeType = 'neutral';
                                     break;
                                 // healthy - no badge shown to avoid clutter
                             }
@@ -266,7 +266,7 @@ function init(args) {
                         name: accountId,
                         email: '',
                         type: { name: 'Unknown' },
-                        stateLabel: { type: 'secondary', name: 'Unknown' }
+                        stateLabel: { type: 'neutral', name: 'Unknown' }
                     });
                 }
             }

lib/ui-routes/route-helpers.js

@@ -69,21 +69,24 @@ function formatAccountData(account, gt) {
     } else if (account.oauth2 && account.oauth2.provider) {
         account.type = oauth2ProviderData(account.oauth2.provider);
     } else if (account.imap && !account.imap.disabled) {
-        account.type.icon = 'fa fa-envelope-square';
+        account.type.icon = 'icon-[tabler--mail]';
         account.type.name = 'IMAP';
         account.type.comment = psl.get(account.imap.host) || account.imap.host;
     } else if (account.smtp) {
-        account.type.icon = 'fa fa-paper-plane';
+        account.type.icon = 'icon-[tabler--send]';
         account.type.name = 'SMTP';
         account.type.comment = psl.get(account.smtp.host) || account.smtp.host;
     } else if (account.oauth2 && account.oauth2.auth && account.oauth2.auth.delegatedAccount) {
-        account.type.icon = 'fa fa-arrow-alt-circle-right';
+        account.type.icon = 'icon-[tabler--arrow-right-circle]';
         account.type.name = gt.gettext('Delegated');
         account.type.comment = util.format(gt.gettext('Using credentials from "%s"'), account.oauth2.auth.delegatedAccount);
     } else {
         account.type.name = 'N/A';
     }
 
+    // composed hover label for the type icon (used by ui/tooltip in the views)
+    account.type.label = `${account.type.name || ''}${account.type.comment ? ` (${account.type.comment})` : ''}`;
+
     switch (account.state) {
         case 'init':
             account.stateLabel = {
@@ -117,7 +120,7 @@ function formatAccountData(account, gt) {
 
         case 'disabled':
             account.stateLabel = {
-                type: 'secondary',
+                type: 'neutral',
                 name: 'Disabled',
                 error: account.disabledReason
             };
@@ -148,15 +151,15 @@ function formatAccountData(account, gt) {
             }
 
             account.stateLabel = {
-                type: 'danger',
+                type: 'error',
                 name: 'Failed',
                 error: errorMessage
             };
             break;
         }
         case 'unset':
             account.stateLabel = {
-                type: 'light',
+                type: 'neutral',
                 name: 'Not syncing'
             };
             break;
@@ -168,13 +171,13 @@ function formatAccountData(account, gt) {
             break;
         case 'paused':
             account.stateLabel = {
-                type: 'secondary',
+                type: 'neutral',
                 name: 'Paused'
             };
             break;
         default:
             account.stateLabel = {
-                type: 'secondary',
+                type: 'neutral',
                 name: 'N/A'
             };
             break;
@@ -183,7 +186,7 @@ function formatAccountData(account, gt) {
     // Check if IMAP was disabled due to errors - override state label to show error
     if (account.imap && account.imap.disabled && account.lastErrorState) {
         account.stateLabel = {
-            type: 'danger',
+            type: 'error',
             name: 'Failed',
             error: account.lastErrorState.description || account.lastErrorState.response
         };
@@ -247,14 +250,14 @@ function formatServerState(state, payload) {
 
         case 'failed':
             return {
-                type: 'danger',
+                type: 'error',
                 name: state,
                 error: (payload && payload.error && payload.error.message) || null
             };
 
         default:
             return {
-                type: 'secondary',
+                type: 'neutral',
                 name: 'N/A'
             };
     }