@agenticmail/api 0.7.12 → 0.7.14

package/dist/index.js

@@ -2191,6 +2191,24 @@ function createMailRoutes(accountManager2, config, db, gatewayManager) {
       next(err);
     }
   });
+  router.post("/mail/messages/:uid/star", requireAgent, async (req, res, next) => {
+    try {
+      const agent = req.agent;
+      const uid = parseInt(req.params.uid);
+      if (isNaN(uid) || uid < 1) {
+        res.status(400).json({ error: "Invalid UID" });
+        return;
+      }
+      const starred = req.body?.starred !== false;
+      const folder = req.body?.folder || req.query.folder || "INBOX";
+      const password = getAgentPassword(agent);
+      const receiver = await getReceiver(agent.stalwartPrincipal, password, config);
+      await receiver.setStarred(uid, starred, folder);
+      res.json({ ok: true, starred });
+    } catch (err) {
+      next(err);
+    }
+  });
   router.post("/mail/messages/:uid/move", requireAgent, async (req, res, next) => {
     try {
       const agent = req.agent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/api",
-  "version": "0.7.12",
+  "version": "0.7.14",
   "description": "REST API server for AgenticMail — email and SMS endpoints for AI agents",
   "type": "module",
   "main": "dist/index.js",

package/public/js/app.js

@@ -83,7 +83,9 @@ async function bootstrap() {
     populateComposeFrom();
     subscribeToAllAgents();
     maybeRequestNotificationPermission();
-    if (!location.hash) location.hash = '#/inbox';
+    // Initial route: if the URL already has a hash (e.g. a refresh
+    // on /#/folder/sent), respect it; otherwise default to inbox.
+    if (!location.hash) location.hash = '#/folder/inbox';
     else route();
   } catch (err) {
     toast(`Failed to load agents: ${err.message}`, true);
@@ -100,24 +102,39 @@ async function selectAgent(agent) {
 }
 
 function onFolderSelect(folder) {
-  state.selectedFolder = folder;
-  renderSidebar(onFolderSelect);
-  location.hash = '#/inbox';   // any folder uses the list route
-  if (state.selectedAgent) loadList(state.selectedAgent, folder);
+  // URL drives state — set the hash and let the router do the work.
+  // This is what makes browser back / forward / shareable URLs work,
+  // and it stops the previous bug where every folder click stayed on
+  // #/inbox in the address bar.
+  location.hash = `#/folder/${folder}`;
   // On mobile (the only viewport where the sidebar is over-canvas),
   // close it after a folder pick so the user sees the list.
   document.getElementById('main')?.classList.remove('sidebar-open');
 }
 
 // ─── Hash router ─────────────────────────────────────────────────────
+// Routes:
+//   #/inbox            → inbox (back-compat shortcut for #/folder/inbox)
+//   #/folder/<id>      → folder list view (sent, drafts, starred, …)
+//   #/m/<uid>          → single-message detail
+//
+// Folder switches go through here too so the URL is the source of truth
+// for "what's on screen". If you bookmark or copy-paste a URL like
+// http://127.0.0.1:3829/#/folder/sent, opening it lands you on Sent.
 function route() {
   const hash = location.hash || '#/inbox';
   const msgMatch = hash.match(/^#\/m\/(\d+)$/);
   if (msgMatch) {
     openMessage(Number(msgMatch[1]));
-  } else if (state.selectedAgent) {
-    loadList(state.selectedAgent, state.selectedFolder);
+    return;
+  }
+  const folderMatch = hash.match(/^#\/folder\/([a-z]+)$/);
+  const folder = folderMatch ? folderMatch[1] : 'inbox';
+  if (state.selectedFolder !== folder) {
+    state.selectedFolder = folder;
+    renderSidebar(onFolderSelect);
   }
+  if (state.selectedAgent) loadList(state.selectedAgent, folder);
 }
 window.addEventListener('hashchange', route);
 

package/public/js/list-view.js

@@ -4,7 +4,7 @@ import { state } from './state.js';
 import { escapeHtml, toast } from './utils.js';
 import { formatDate } from './time.js';
 import { parseSearch, matchesSearch, highlightTerm } from './search.js';
-import { apiGet } from './api.js';
+import { apiGet, apiPost } from './api.js';
 import { FOLDERS } from './sidebar.js';
 import { icon } from './icons.js';
 
@@ -27,43 +27,100 @@ function flagsHas(flags, name) {
   return false;
 }
 
-// Map sidebar folder ids to the actual IMAP folder names the API
-// expects on `/mail/folders/:folder`. `inbox` is special — the API
-// has a dedicated `/mail/inbox` endpoint with extra enrichment, so
-// we use that. Other folders go through the generic listing.
-//
-// Stalwart uses the standard IMAP names: INBOX, Sent, Drafts, Junk
-// Mail (a.k.a. "Spam"), Trash. We use the canonical IMAP capitalisation.
-const FOLDER_TO_IMAP = {
-  inbox:   { endpoint: '/mail/inbox' },
-  sent:    { endpoint: '/mail/folders/Sent' },
-  drafts:  { endpoint: '/mail/folders/Drafts' },
-  spam:    { endpoint: '/mail/folders/Junk%20Mail' },
-  trash:   { endpoint: '/mail/folders/Trash' },
-  all:     { endpoint: '/mail/folders/All%20Mail' },
-  // Starred is not a folder — it's the IMAP \Flagged flag, surfaced
-  // by client-side filtering over the inbox listing (Gmail-style).
-  starred: { endpoint: '/mail/inbox', clientFilter: 'flagged' },
+// Patterns we look for when matching a real IMAP folder name to one
+// of our sidebar folder ids. Different mail servers use different
+// names: Stalwart's defaults are "Sent Items", "Drafts", "Junk Mail",
+// "Trash"; Gmail uses "[Gmail]/Sent Mail"; Outlook uses "Sent Items"
+// + "Deleted Items"; macOS Mail uses "Sent Messages". Auto-discovery
+// makes the sidebar work on all of them.
+const FOLDER_MATCHERS = {
+  sent:    /^sent\b|sent items|sent mail|sent messages|\[gmail\]\/sent/i,
+  drafts:  /^drafts?\b|\[gmail\]\/drafts/i,
+  spam:    /^junk\b|junk mail|^spam\b|\[gmail\]\/spam/i,
+  trash:   /^trash\b|deleted items|deleted messages|\[gmail\]\/trash|\[gmail\]\/bin/i,
+  all:     /^all mail\b|\[gmail\]\/all/i,
 };
 
+/**
+ * Look up the real IMAP folder name for a sidebar id, using the
+ * per-agent folder cache populated by ensureFolderCache().
+ * Returns undefined if no match — callers should treat that as
+ * "folder doesn't exist on this server" and render an empty state.
+ */
+function imapNameFor(folderId) {
+  return state.folderNames?.[folderId];
+}
+
+/**
+ * Discover real IMAP folder names for the active agent and cache
+ * them in state. Called once on agent switch / first folder click.
+ * Falls back to canonical names if the discovery endpoint fails so
+ * the UI keeps working in degraded mode.
+ */
+export async function ensureFolderCache(agent) {
+  if (state.folderNames && Object.keys(state.folderNames).length > 0) return;
+  state.folderNames = { inbox: 'INBOX' };  // INBOX is universal
+  try {
+    const data = await apiGet('/mail/folders', { agentKey: agent.apiKey });
+    const folders = (data.folders ?? []).map(f =>
+      typeof f === 'string' ? f : (f.name ?? f.path ?? ''),
+    ).filter(Boolean);
+    for (const [id, pattern] of Object.entries(FOLDER_MATCHERS)) {
+      const match = folders.find(f => pattern.test(f));
+      if (match) state.folderNames[id] = match;
+    }
+  } catch {
+    // Discovery failed — fall back to the most common defaults so
+    // at least Inbox + Sent work for vanilla Stalwart.
+    state.folderNames.sent   = 'Sent Items';
+    state.folderNames.drafts = 'Drafts';
+    state.folderNames.spam   = 'Junk Mail';
+    state.folderNames.trash  = 'Trash';
+  }
+}
+
 export async function loadList(agent, folder) {
   const root = document.getElementById('content');
+  // Gmail-style toolbar above the list: select-all checkbox,
+  // refresh, more-options spacer, count + pagination on the right.
+  // Identical layout for every folder so Sent / Drafts / Spam /
+  // Trash all share the same UX as Inbox.
   root.innerHTML = `
-    <div class="list-header">
-      <span class="folder-title">${escapeHtml(folderTitle(folder))}</span>
+    <div class="list-toolbar">
+      <label class="list-select-all" title="Select all">
+        <input type="checkbox" id="list-select-all-input" />
+      </label>
+      <button class="icon-btn list-refresh" title="Refresh" id="list-refresh-btn">${icon('refresh', { size: 18 })}</button>
+      <div class="list-toolbar-spacer"></div>
       <span class="count-text" id="list-count"></span>
     </div>
     <div class="list-rows" id="list-rows"><div class="empty">Loading…</div></div>
   `;
-  const route = FOLDER_TO_IMAP[folder] ?? FOLDER_TO_IMAP.inbox;
+  document.getElementById('list-refresh-btn')?.addEventListener('click', () => loadList(agent, folder));
+  await ensureFolderCache(agent);
+
+  // Resolve the real IMAP folder. Starred reuses INBOX + a client-
+  // side flag filter (Gmail convention); other folders need a real
+  // mailbox name from the discovery cache.
+  const isStarred = folder === 'starred';
+  const imap = isStarred ? 'INBOX' : imapNameFor(folder);
+  if (!imap) {
+    document.getElementById('list-rows').innerHTML =
+      `<div class="empty"><div class="big">📭</div>No ${escapeHtml(folderTitle(folder))} folder on this server.</div>`;
+    return;
+  }
+
   try {
-    const sep = route.endpoint.includes('?') ? '&' : '?';
-    const data = await apiGet(`${route.endpoint}${sep}limit=50&offset=0`, { agentKey: agent.apiKey });
+    // `/mail/digest` returns envelopes WITH body preview in one call —
+    // exactly what the list row needs to render a 2-line preview.
+    // Previously we used `/mail/inbox` (no preview) and `/mail/
+    // folders/:folder` (no preview, wrong folder names), which left
+    // every row stuck on subject + sender alone.
+    const url = `/mail/digest?folder=${encodeURIComponent(imap)}&limit=50&offset=0&previewLength=240`;
+    const data = await apiGet(url, { agentKey: agent.apiKey });
     state.messages = data.messages ?? [];
     renderList();
   } catch (err) {
-    // Empty folder is a normal state; "no such folder" lands here
-    // too. Show a friendly empty message rather than a raw HTTP error.
     const msg = String(err.message ?? err);
     document.getElementById('list-rows').innerHTML = msg.includes('404')
       ? `<div class="empty">${escapeHtml(folderTitle(folder))} is empty.</div>`
@@ -111,6 +168,12 @@ export function renderList() {
     return;
   }
 
+  // Gmail-style single-line row: checkbox · star · sender · subject
+  // — preview · date. Subject and preview sit on the same line
+  // separated by an em-dash; CSS truncates the joint cell with
+  // ellipsis so longer preview lines never wrap. Identical markup
+  // for every folder so Sent / Drafts / Spam etc render the same
+  // way Inbox does.
   root.innerHTML = filtered.map(m => {
     const unread = !flagsHas(m.flags, '\\Seen');
     const starred = flagsHas(m.flags, '\\Flagged');
@@ -118,15 +181,19 @@ export function renderList() {
     const fromName = m.from?.[0]?.name || fromAddr;
     const subject = m.subject ?? '(no subject)';
     const date = formatDate(m.date);
-    const starIcon = icon(starred ? 'starFilled' : 'starOutline', { size: 18 });
+    const starIcon = icon(starred ? 'starFilled' : 'starOutline', { size: 16 });
+    const cleanPreview = (m.preview ?? '')
+      .replace(/^>+ ?/gm, '')
+      .replace(/\s+/g, ' ')
+      .trim();
     return `
       <div class="list-row ${unread ? 'unread' : ''}" data-uid="${m.uid}">
-        <span class="star ${starred ? 'starred' : ''}" data-action="star">${starIcon}</span>
-        <span class="dot"></span>
-        <span class="from">${highlightTerm(fromName, hlTerm)}</span>
+        <label class="row-check" data-action="select"><input type="checkbox" /></label>
+        <span class="star ${starred ? 'starred' : ''}" data-action="star" data-uid="${m.uid}">${starIcon}</span>
+        <span class="from" title="${escapeHtml(fromAddr)}">${highlightTerm(fromName, hlTerm)}</span>
         <span class="subject-cell">
           <span class="subject">${highlightTerm(subject, hlTerm)}</span>
-          <span class="preview">${highlightTerm((m.preview ?? '').slice(0, 160), hlTerm)}</span>
+          ${cleanPreview ? `<span class="preview-sep"> — </span><span class="preview">${highlightTerm(cleanPreview, hlTerm)}</span>` : ''}
         </span>
         <span class="date">${escapeHtml(date)}</span>
       </div>
@@ -135,9 +202,17 @@ export function renderList() {
 
   root.querySelectorAll('.list-row').forEach(el => {
     el.addEventListener('click', (e) => {
-      if (e.target.closest('[data-action="star"]')) {
+      // Star click — toggle via API and optimistically update the
+      // local flags so the icon flips without a reload.
+      const starEl = e.target.closest('[data-action="star"]');
+      if (starEl) {
+        e.stopPropagation();
+        toggleStar(Number(el.dataset.uid), starEl);
+        return;
+      }
+      // Checkbox click — swallow so we don't navigate.
+      if (e.target.closest('[data-action="select"]')) {
         e.stopPropagation();
-        toast('Starring not wired through API yet.');
         return;
       }
       const uid = Number(el.dataset.uid);
@@ -146,6 +221,49 @@ export function renderList() {
   });
 }
 
+/**
+ * Toggle the IMAP \Flagged flag on a message via the API. Updates
+ * the in-memory message object on success so renderList reflects
+ * the new state without a full reload — and reverts on failure so
+ * the icon doesn't drift from server truth.
+ */
+async function toggleStar(uid, starEl) {
+  const agent = state.selectedAgent;
+  if (!agent) return;
+  const msg = state.messages.find(m => m.uid === uid);
+  if (!msg) return;
+  const wasStarred = flagsHas(msg.flags, '\\Flagged');
+  const nextStarred = !wasStarred;
+
+  // Optimistic UI flip.
+  starEl.classList.toggle('starred', nextStarred);
+  starEl.innerHTML = icon(nextStarred ? 'starFilled' : 'starOutline', { size: 16 });
+
+  // Local flags mutation so a re-render keeps the new state.
+  const imap = state.folderNames?.[state.selectedFolder] ?? 'INBOX';
+  if (Array.isArray(msg.flags)) {
+    msg.flags = nextStarred
+      ? Array.from(new Set([...msg.flags, '\\Flagged']))
+      : msg.flags.filter(f => f !== '\\Flagged');
+  } else {
+    msg.flags = nextStarred ? ['\\Flagged'] : [];
+  }
+
+  try {
+    await apiPost(`/mail/messages/${uid}/star`, { starred: nextStarred, folder: imap }, { agentKey: agent.apiKey });
+  } catch (err) {
+    // Revert on failure.
+    starEl.classList.toggle('starred', wasStarred);
+    starEl.innerHTML = icon(wasStarred ? 'starFilled' : 'starOutline', { size: 16 });
+    if (Array.isArray(msg.flags)) {
+      msg.flags = wasStarred
+        ? Array.from(new Set([...msg.flags, '\\Flagged']))
+        : msg.flags.filter(f => f !== '\\Flagged');
+    }
+    toast(`Star failed: ${err.message}`, true);
+  }
+}
+
 export function clearSearch() {
   const input = document.getElementById('search-input');
   if (input) {

package/public/js/message-view.js

@@ -23,7 +23,7 @@ export async function openMessage(uid) {
     </div>
     <div class="message-view"><div class="empty">Loading…</div></div>
   `;
-  document.getElementById('msg-back').addEventListener('click', () => { location.hash = '#/inbox'; });
+  document.getElementById('msg-back').addEventListener('click', () => { location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`; });
   document.getElementById('msg-reply').addEventListener('click', () => openReply(false));
   document.getElementById('msg-reply-all').addEventListener('click', () => openReply(true));
   document.getElementById('msg-unread').addEventListener('click', () => markUnread());
@@ -79,7 +79,7 @@ async function markUnread() {
   try {
     await apiPost(`/mail/messages/${state.currentMessage.uid}/unseen`, {}, { agentKey: state.selectedAgent.apiKey });
     toast('Marked unread.');
-    location.hash = '#/inbox';
+    location.hash = `#/folder/${state.selectedFolder ?? 'inbox'}`;
     await loadList(state.selectedAgent, state.selectedFolder);
   } catch (err) {
     toast(`Failed: ${err.message}`, true);

package/public/js/state.js

@@ -12,6 +12,18 @@ export const state = {
   searchQuery: '',
   sseControllers: [],
   unread: {},                  // { [agentId]: count }
+  /**
+   * Mapping from sidebar folder id ('sent', 'drafts', 'spam', etc.)
+   * to the real IMAP folder name on the server.
+   *
+   * Auto-discovered per agent via `GET /mail/folders` because
+   * Stalwart's default folder names differ from server to server
+   * (`Sent Items` vs `Sent`, `Junk Mail` vs `Spam`, etc.). Without
+   * this, hard-coded names like `Sent` returned empty for Stalwart
+   * installs that use `Sent Items` — exactly what the bug report
+   * showed.
+   */
+  folderNames: {},             // { [sidebarId]: imapFolderName }
 };
 
 export const API_URL = window.location.origin;

package/public/styles.css

@@ -272,22 +272,33 @@ a { color: var(--accent-strong); }
   .brand-name { font-size: 18px; }
   .search-container { max-width: none; }
   .search-input { height: 40px; font-size: 14px; }
-  /* List rows lose the from column on narrow screens; the subject
-     gets full width with the sender folded into the preview. */
+  /* On narrow screens, drop the checkbox + From column. Sender goes
+     in a small line above subject+preview to mimic Gmail's mobile
+     two-row stack. */
   .list-row {
-    grid-template-columns: 24px 24px 1fr 70px;
-    height: 56px;
-    padding: 0 12px;
+    grid-template-columns: 32px 1fr 64px;
+    height: auto;
+    min-height: 64px;
+    padding: 8px 12px;
+    align-items: center;
+  }
+  .list-row .row-check { display: none; }
+  .list-row .from {
+    grid-column: 2 / 3;
+    font-size: 13px;
+    padding-right: 0;
   }
-  .list-row .from { display: none; }
   .list-row .subject-cell {
-    flex-direction: column;
-    gap: 2px;
-    align-items: flex-start;
+    grid-column: 2 / 3;
+    grid-row: 2;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
-  .list-row .subject { max-width: none; font-size: 14px; }
-  .list-row .preview { font-size: 13px; }
-  .list-row .preview::before { content: ''; }
+  .list-row .star { grid-row: 1 / span 2; }
+  .list-row .date { grid-row: 1; }
   .message-header { padding: 16px 16px 8px; }
   .message-subject { font-size: 18px; }
   .message-body { padding: 8px 16px 24px; max-width: none; }
@@ -312,8 +323,11 @@ a { color: var(--accent-strong); }
   overflow-y: auto;
 }
 .compose-btn {
+  /* Gmail's Compose button is 48px tall with 16px corner radius —
+     prominent but not pill-shaped. Earlier this was 56px + ~28px
+     radius which read as a giant capsule and dominated the sidebar. */
   display: inline-flex; align-items: center; gap: 12px;
-  height: 56px; padding: 0 24px 0 16px;
+  height: 48px; padding: 0 24px 0 16px;
   margin-bottom: 16px;
   background: var(--pink); color: white;
   border-radius: 16px;
@@ -364,42 +378,49 @@ a { color: var(--accent-strong); }
   display: flex; flex-direction: column;
 }
 
-/* List header (above the list itself) */
-.list-header {
-  display: flex; align-items: center; gap: 8px;
-  padding: 8px 16px; height: 48px;
-  border-bottom: 1px solid transparent;
+/* List toolbar (sticky, matches Gmail's row of buttons above the list).
+   Same markup for every folder so Sent / Drafts / Spam render
+   identically to Inbox — no per-folder UX divergence. */
+.list-toolbar {
+  display: flex; align-items: center; gap: 4px;
+  padding: 4px 16px; height: 48px;
+  border-bottom: 1px solid var(--line);
   position: sticky; top: 0; z-index: 5;
   background: var(--bg);
   flex-shrink: 0;
 }
-.list-header .icon-btn { width: 36px; height: 36px; font-size: 16px; }
-.list-header .count-text {
-  margin-left: auto;
-  font-size: 12px; color: var(--muted);
+.list-select-all {
+  width: 40px; height: 40px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; border-radius: 50%;
 }
-.list-header .folder-title {
-  font: 500 18px/1 'Google Sans', sans-serif;
-  color: var(--ink); margin-left: 8px;
+.list-select-all:hover { background: var(--bg-hover); }
+.list-toolbar .list-refresh { width: 40px; height: 40px; }
+.list-toolbar-spacer { flex: 1; }
+.list-toolbar .count-text {
+  font-size: 12px; color: var(--muted);
 }
 
-/* List rows */
+/* Gmail-style compact rows.
+   Single line per message; subject + preview share one truncated
+   cell so longer previews tail off with ellipsis instead of
+   wrapping. Same row shape for every folder. */
 .list-rows {
   flex: 1; overflow-y: auto;
 }
 .list-row {
   display: grid;
-  grid-template-columns: 24px 24px 240px 1fr 100px;
+  grid-template-columns: 36px 32px 180px 1fr 90px;
   align-items: center; gap: 0;
-  padding: 0 16px; height: 40px;
+  padding: 0 16px; height: 36px;
   cursor: pointer;
-  border-bottom: 1px solid var(--bg-soft);
+  border-bottom: 1px solid var(--line);
   position: relative;
 }
-@media (max-width: 1000px) { .list-row { grid-template-columns: 24px 24px 180px 1fr 80px; } }
+@media (max-width: 1100px) { .list-row { grid-template-columns: 36px 32px 140px 1fr 80px; } }
 .list-row:hover {
-  background: var(--bg-row-hover);
-  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
+  background: var(--bg);
+  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 3px rgba(0,0,0,.08);
   z-index: 1;
 }
 .list-row.unread { background: var(--bg); }
@@ -409,47 +430,39 @@ a { color: var(--accent-strong); }
 .list-row:not(.unread) .from, .list-row:not(.unread) .subject {
   color: var(--read-text);
 }
+.list-row .row-check {
+  width: 36px; height: 36px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+}
+.list-row .row-check input { cursor: pointer; }
 .list-row .star {
-  font-size: 16px; color: #dadce0; cursor: pointer;
-  width: 24px; height: 24px;
+  width: 32px; height: 32px;
   display: flex; align-items: center; justify-content: center;
-  border-radius: 50%;
+  border-radius: 50%; cursor: pointer;
+  color: #dadce0;
 }
-.list-row .star:hover { background: var(--bg-hover); }
+.list-row .star:hover { background: var(--bg-hover); color: var(--muted); }
 .list-row .star.starred { color: #f4b400; }
 .list-row .from {
   font-size: 14px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  padding-right: 8px;
+  padding-right: 12px;
 }
 .list-row .subject-cell {
-  display: flex; gap: 8px; align-items: baseline;
-  overflow: hidden;
-  min-width: 0;
-}
-.list-row .subject {
-  font-size: 14px; flex-shrink: 0;
-  max-width: 50%;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.list-row .preview {
-  font-size: 14px; color: var(--muted);
+  font-size: 14px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  flex: 1; min-width: 0;
+  min-width: 0;
+  display: block;        /* one line, ellipsis at the end */
 }
-.list-row .preview::before { content: '— '; opacity: .5; }
+.list-row .subject { font-weight: inherit; }
+.list-row .preview-sep { color: var(--muted); }
+.list-row .preview { color: var(--muted); font-weight: 400; }
 .list-row .date {
   font-size: 12px; color: var(--muted); font-weight: 500;
   text-align: right; padding-right: 4px;
 }
 .list-row.unread .date { color: var(--unread-bold); font-weight: 700; }
-.list-row .dot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--pink);
-  display: none;
-  margin: 0 auto;
-}
-.list-row.unread .dot { display: block; }
 
 mark.search-hl {
   background: #fff475; color: inherit;