${
dayEvs.length ? dayEvs.map((ev) => `
${ev.all_day ? "" : hhmm(ev._s) + " "}${esc(ev.summary || "(no title)")}
`).join("") : `
No events`
@@ -1292,8 +1327,11 @@ export default function mount(el, ctx, props) {
state.panelCalOpen = false; render();
});
act("open-newtab", () => window.open("/p/calendar", "_blank", "noopener"));
- if (state.panelCalOpen) {
- setTimeout(() => { const close = () => { state.panelCalOpen = false; document.removeEventListener("click", close); render(); }; document.addEventListener("click", close); }, 0);
+ act("panel-menu", (e) => { e.stopPropagation(); state.panelMenuOpen = !state.panelMenuOpen; render(); });
+ on("[data-panelmini]", "click", (e) => { e.stopPropagation(); state.panelMini = e.currentTarget.getAttribute("data-panelmini"); state.panelMenuOpen = false; render(); });
+ on("[data-panelview]", "click", (e) => { e.stopPropagation(); state.panelView = e.currentTarget.getAttribute("data-panelview"); state.panelMenuOpen = false; render(); });
+ if (state.panelCalOpen || state.panelMenuOpen) {
+ setTimeout(() => { const close = () => { state.panelCalOpen = false; state.panelMenuOpen = false; document.removeEventListener("click", close); render(); }; document.addEventListener("click", close); }, 0);
}
// --- search ---
on(".cal-search", "input", (e) => {
diff --git a/plugins/webmail_plugin_labels/webmail_plugin_labels/__init__.py b/plugins/webmail_plugin_labels/webmail_plugin_labels/__init__.py
index 7c0a6b8..d689bca 100644
--- a/plugins/webmail_plugin_labels/webmail_plugin_labels/__init__.py
+++ b/plugins/webmail_plugin_labels/webmail_plugin_labels/__init__.py
@@ -1,8 +1,9 @@
"""``labels`` — per-message labels, built entirely on slots + KV (SPEC §11, §12 M3).
No plugin tables and no core diffs: labels live in the namespaced KV store (keyed
-per user, so isolation is by construction), surfaced through a ``message.actions``
-slot (add/remove on a message) and a ``sidebar.section`` slot (list all labels).
+per user, so isolation is by construction). The labelling UI now lives in Mail's
+own Actions menu + label chips (which read the plugin's API directly); only the
+``sidebar.section`` slot (list all labels) remains as a plugin surface.
"""
from __future__ import annotations
@@ -16,7 +17,6 @@ plugin = Plugin(
router=router,
ui_manifest=UiManifest(
slots=[
- Slot(name="message.actions", bundle="/api/plugins/labels/ui/actions.js"),
Slot(name="sidebar.section", bundle="/api/plugins/labels/ui/sidebar.js"),
],
),
diff --git a/plugins/webmail_plugin_labels/webmail_plugin_labels/router.py b/plugins/webmail_plugin_labels/webmail_plugin_labels/router.py
index 7848058..e016521 100644
--- a/plugins/webmail_plugin_labels/webmail_plugin_labels/router.py
+++ b/plugins/webmail_plugin_labels/webmail_plugin_labels/router.py
@@ -27,6 +27,23 @@ class LabelsIn(BaseModel):
labels: list[str]
+class IdsIn(BaseModel):
+ ids: list[str]
+
+
+class NameIn(BaseModel):
+ name: str
+
+
+async def _remember(kv: object, labels: list[str]) -> None:
+ """Merge ``labels`` into the user's known-label set."""
+ known = set(await kv.get(_ALL_KEY, [])) # type: ignore[attr-defined]
+ if not labels or set(labels) <= known:
+ return
+ known.update(labels)
+ await kv.set(_ALL_KEY, sorted(known)) # type: ignore[attr-defined]
+
+
@router.get("/message/{message_id}/labels", response_model=list[str])
async def get_labels(message_id: str, user_id: CurrentUserId) -> list[str]:
return await _SDK.kv(user_id).get(message_id, [])
@@ -37,17 +54,77 @@ async def set_labels(message_id: str, body: LabelsIn, user_id: CurrentUserId) ->
labels = sorted({name.strip() for name in body.labels if name.strip()})
kv = _SDK.kv(user_id)
await kv.set(message_id, labels)
- known = set(await kv.get(_ALL_KEY, []))
- known.update(labels)
- await kv.set(_ALL_KEY, sorted(known))
+ await _remember(kv, labels)
return {"status": "ok", "labels": labels}
+@router.post("/messages/labels")
+async def batch_message_labels(body: IdsIn, user_id: CurrentUserId) -> dict[str, list[str]]:
+ """Labels for a set of messages (the reading pane aggregates the thread union)."""
+ kv = _SDK.kv(user_id)
+ return {mid: await kv.get(mid, []) for mid in body.ids}
+
+
+@router.put("/thread/{thread_id}/labels", dependencies=[Depends(require_csrf)])
+async def set_thread_labels(
+ thread_id: str, body: LabelsIn, user_id: CurrentUserId
+) -> dict[str, object]:
+ """The thread's aggregated labels (union of its messages), written by the reading
+ pane so the message list — which has no message ids — can display them."""
+ labels = sorted({name.strip() for name in body.labels if name.strip()})
+ kv = _SDK.kv(user_id)
+ await kv.set(f"t:{thread_id}", labels)
+ await _remember(kv, labels)
+ return {"status": "ok", "labels": labels}
+
+
+@router.post("/threads/labels")
+async def batch_thread_labels(body: IdsIn, user_id: CurrentUserId) -> dict[str, list[str]]:
+ kv = _SDK.kv(user_id)
+ out = {tid: await kv.get(f"t:{tid}", []) for tid in body.ids}
+ return {tid: labels for tid, labels in out.items() if labels}
+
+
@router.get("/labels", response_model=list[str])
async def all_labels(user_id: CurrentUserId) -> list[str]:
return await _SDK.kv(user_id).get(_ALL_KEY, [])
+@router.get("/labels/{name}/threads", response_model=list[str])
+async def label_threads(name: str, user_id: CurrentUserId) -> list[str]:
+ """Thread ids whose aggregate labels include ``name`` — powers the label view
+ in the mail list. Scans the per-thread label keys (``t:
``)."""
+ items = await _SDK.kv(user_id).items()
+ return [
+ key[2:]
+ for key, labels in items.items()
+ if key.startswith("t:") and isinstance(labels, list) and name in labels
+ ]
+
+
+@router.post("/labels", dependencies=[Depends(require_csrf)])
+async def create_label(body: NameIn, user_id: CurrentUserId) -> list[str]:
+ name = body.name.strip()
+ kv = _SDK.kv(user_id)
+ if name:
+ await _remember(kv, [name])
+ return await kv.get(_ALL_KEY, [])
+
+
+@router.delete("/labels/{name}", dependencies=[Depends(require_csrf)])
+async def delete_label(name: str, user_id: CurrentUserId) -> list[str]:
+ """Delete a label everywhere: drop it from the known set and unhook it from every
+ message (````) and thread (``t:``) it was attached to."""
+ kv = _SDK.kv(user_id)
+ for key, labels in (await kv.items()).items():
+ if key == _ALL_KEY or not isinstance(labels, list) or name not in labels:
+ continue
+ await kv.set(key, [n for n in labels if n != name])
+ known = [n for n in await kv.get(_ALL_KEY, []) if n != name]
+ await kv.set(_ALL_KEY, known)
+ return known
+
+
@router.get("/ui/{filename}")
async def bundle(filename: str) -> FileResponse:
if filename not in _BUNDLES:
diff --git a/plugins/webmail_plugin_labels/webmail_plugin_labels/ui/sidebar.js b/plugins/webmail_plugin_labels/webmail_plugin_labels/ui/sidebar.js
index 84d1bb5..ef4d61f 100644
--- a/plugins/webmail_plugin_labels/webmail_plugin_labels/ui/sidebar.js
+++ b/plugins/webmail_plugin_labels/webmail_plugin_labels/ui/sidebar.js
@@ -1,20 +1,129 @@
-// labels · sidebar.section slot (SPEC §11.3). Lists the user's known labels;
-// refreshes when the message.actions slot signals a change (same-document event).
-// Styling uses the plugin UI kit (.wm-* classes, see docs/plugins.md).
+// labels · sidebar.section slot (SPEC §11.3). A collapsible "LABELS" section that
+// lines up with the folder rows above: monocolor tag icons, a + to create (inline
+// popover), a hover "−" per label to delete (removed from all mail after a confirm),
+// and click-to-filter the mail list. Refreshes on `webmail:labels-changed`, which
+// this bundle and Mail's Actions menu both dispatch. Themed via rgb(var(--app-*)).
+
+const TAG = ``;
+const chev = (open) => ``;
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ }[c]));
+
+function injectStyles() {
+ if (document.getElementById("lb-styles")) return;
+ const s = document.createElement("style");
+ s.id = "lb-styles";
+ s.textContent = `
+ .lb-sec{position:relative;padding:4px 0 0}
+ .lb-head{display:flex;align-items:center;gap:5px;padding:10px 8px 2px 12px}
+ .lb-headbtn{display:flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;color:rgb(var(--app-faint));font:inherit;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
+ .lb-add{margin-left:auto;background:none;border:0;color:rgb(var(--app-muted));cursor:pointer;padding:2px 6px;border-radius:4px;font-size:15px;line-height:1}
+ .lb-add:hover{background:rgb(var(--app-hover));color:rgb(var(--app-fg))}
+ .lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
+ .lb-row{position:relative;display:flex;align-items:center}
+ .lb-item{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;color:rgb(var(--app-muted));cursor:pointer;padding:6px 12px;border-radius:8px;font:inherit;font-size:15px}
+ .lb-item:hover{background:rgb(var(--app-hover));color:rgb(var(--app-fg))}
+ .lb-item .ic{color:rgb(var(--app-faint));flex:0 0 auto;display:inline-flex}
+ .lb-item .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+ .lb-del{position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:0;border-radius:5px;background:rgb(var(--app-hover));color:rgb(var(--app-muted));cursor:pointer;font-size:15px;line-height:1}
+ .lb-row:hover .lb-del{opacity:1}
+ .lb-del:hover{background:rgb(var(--app-active));color:#ef4444}
+ .lb-empty{color:rgb(var(--app-faint));padding:5px 12px;font-size:13px}
+ .lb-ovl{position:fixed;inset:0;z-index:60}
+ .lb-pop{position:absolute;z-index:61;background:rgb(var(--app-elevated));border:1px solid rgb(var(--app-border));border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.4);padding:10px;width:210px}
+ .lb-popmsg{font-size:13px;color:rgb(var(--app-fg));margin-bottom:8px}
+ .lb-popinput{width:100%;box-sizing:border-box;background:rgb(var(--app-surface));border:1px solid rgb(var(--app-border));border-radius:6px;padding:6px 8px;color:rgb(var(--app-fg));font:inherit;font-size:13px;outline:none}
+ .lb-popinput:focus{border-color:rgb(var(--app-accent))}
+ .lb-popbtns{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
+ .lb-btn{border:0;border-radius:6px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px;background:rgb(var(--app-hover));color:rgb(var(--app-fg))}
+ .lb-btn-primary{background:rgb(var(--app-accent));color:rgb(var(--app-accent-fg));font-weight:600}
+ .lb-btn-danger{background:#ef4444;color:#fff;font-weight:600}
+ `;
+ document.head.appendChild(s);
+}
export default function mount(el, ctx) {
- el.innerHTML = `
-
-
Labels
-
+ injectStyles();
+ let collapsed = localStorage.getItem("labels.collapsed") !== "0"; // collapsed by default
+ let labels = [];
+ let adding = null; // null | { x, y }
+ let deleting = null; // null | { name, x, y }
+
+ function render() {
+ el.innerHTML = `
+
+
+
+
+ ${collapsed ? "" : `
${
+ labels.length
+ ? labels.map((name) => `-
+
+
+
`).join("")
+ : `- No labels yet
`
+ }
`}
+ ${adding ? `
` : ""}
+ ${deleting ? `
+
Delete “${esc(deleting.name)}”? It will be removed from all mail.
+
+
` : ""}
`;
- const list = el.querySelector("[data-list]");
+ wire();
+ if (adding) { const inp = el.querySelector("[data-newlabel]"); if (inp) inp.focus(); }
+ }
+
+ function wire() {
+ const on = (sel, ev, fn) => el.querySelectorAll(sel).forEach((n) => n.addEventListener(ev, fn));
+ const act = (name, fn) => on(`[data-act="${name}"]`, "click", fn);
+
+ act("toggle", () => {
+ collapsed = !collapsed;
+ try { localStorage.setItem("labels.collapsed", collapsed ? "1" : "0"); } catch { /* ignore */ }
+ render();
+ });
+ act("add", (e) => { const r = e.currentTarget.getBoundingClientRect(); adding = { x: r.right - 210, y: r.bottom }; deleting = null; render(); });
+ act("add-cancel", () => { adding = null; render(); });
+ act("popclose", () => { adding = null; deleting = null; render(); });
+ act("add-ok", createLabel);
+ on("[data-newlabel]", "keydown", (e) => {
+ if (e.key === "Enter") createLabel();
+ else if (e.key === "Escape") { adding = null; render(); }
+ });
+ on("[data-label]", "click", (e) => ctx.navigate(`/mail?label=${encodeURIComponent(e.currentTarget.getAttribute("data-label"))}`));
+ on("[data-del]", "click", (e) => {
+ e.stopPropagation();
+ const r = e.currentTarget.getBoundingClientRect();
+ deleting = { name: e.currentTarget.getAttribute("data-del"), x: r.right - 210, y: r.bottom };
+ adding = false;
+ render();
+ });
+ act("del-cancel", () => { deleting = null; render(); });
+ act("del-ok", deleteLabel);
+ }
+
+ async function createLabel() {
+ const inp = el.querySelector("[data-newlabel]");
+ const name = inp ? inp.value.trim() : "";
+ if (!name) { adding = null; render(); return; }
+ await ctx.api.pluginFetch("/labels", { method: "POST", body: JSON.stringify({ name }) });
+ adding = null;
+ window.dispatchEvent(new Event("webmail:labels-changed"));
+ }
+
+ async function deleteLabel() {
+ const name = deleting && deleting.name;
+ deleting = null;
+ if (!name) { render(); return; }
+ await ctx.api.pluginFetch(`/labels/${encodeURIComponent(name)}`, { method: "DELETE" });
+ window.dispatchEvent(new Event("webmail:labels-changed"));
+ }
async function refresh() {
- const labels = await ctx.api.pluginFetch("/labels");
- list.innerHTML = labels.length
- ? labels.map((name) => `
🏷 ${esc(name)}`).join("")
- : `
No labels yet`;
+ try { labels = await ctx.api.pluginFetch("/labels"); } catch { labels = []; }
+ render();
}
refresh();
@@ -23,8 +132,4 @@ export default function mount(el, ctx) {
window.removeEventListener("webmail:labels-changed", refresh);
el.innerHTML = "";
};
-
- function esc(s) {
- return String(s).replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" })[c]);
- }
}
diff --git a/screenshots/labels.jpg b/screenshots/labels.jpg
new file mode 100644
index 0000000..a78c793
Binary files /dev/null and b/screenshots/labels.jpg differ