Nest labels, and let each one say how prominent it is

A flat list is fine at five labels and unreadable at thirty, and there was
no way to keep one that matters occasionally without it holding a row for
ever.

A label can now sit under another, and each says whether it belongs in the
sidebar always, only while it has unread mail, or never.

Nesting is display only. The keywords stay flat on the message, which is
what keeps them readable by every other client: moving a label under
another rewrites nothing in the mailbox, and a client that knows nothing
about ihasmail sees exactly what it always did. Both new fields are
optional, so a settings file written before this parses unchanged and
means what it did.

Settings sync between devices, so the tree has to survive shapes that
should not exist. A label whose parent was deleted on another device comes
back to the top level rather than vanishing -- a label that disappears
because something else was deleted is one the reader cannot get back. A
cycle arriving from an older device is broken by treating the label that
closes the loop as a root, so nothing is lost and nothing hangs. The
parent picker will not offer a label's own descendants, so one cannot be
built here in the first place.

A label kept by the unread rule keeps its ancestors, whatever they were
set to. A child cannot be drawn under a parent that is not there, and
promoting it to the top level would silently rearrange the tree at the
moment the reader is least able to explain why. The parent comes back as a
container instead, and its own count still says whether it has anything of
its own.

Unread counts come from one request carrying a query per label rather than
a request each, with limit 0 so the server does not send ids that would
only be thrown away. They refresh on the same beat as the folder counts,
since the things that move them are the same things, and a failure is
swallowed: a count is decoration, and the sidebar draws the label without
one.

Also corrects the Labels page, which said names and colours are kept in
this browser. They live in the account's own Files and follow it between
devices, like every other setting that is not about this screen.

web/src/store/mail.ts

@@ -19,6 +19,7 @@ import type {
   Thread,
   VacationResponse,
   ChangesResponse,
+  Invocation,
 } from "@/jmap/types";
 import { toast } from "@/ui/toast";
 import { settings, useSettings } from "./settings";
@@ -130,6 +131,8 @@ export interface MailState {
   vacation: VacationResponse | null;
   list: ListState | null;
   selected: Record<Id, true>;
+  /** Unread messages per label keyword, for the sidebar. */
+  labelCounts: Record<string, number>;
   anchorId: Id | null;
   loadingThreads: Record<Id, true>;
   lastSeenInboxEmailIds: Id[] | null;
@@ -184,6 +187,8 @@ export interface MailState {
 
   select(ids: Id[], on: boolean): void;
   clearSelection(): void;
+  /** Refresh the per-label unread counts, in one request. */
+  loadLabelCounts(): Promise<void>;
   selectAll(): void;
   setAnchor(id: Id | null): void;
 
@@ -211,6 +216,7 @@ export const useMail = create<MailState>((set, get) => ({
   vacation: null,
   list: null,
   selected: {},
+  labelCounts: {},
   anchorId: null,
   loadingThreads: {},
   lastSeenInboxEmailIds: null,
@@ -248,6 +254,11 @@ export const useMail = create<MailState>((set, get) => ({
     const mailboxes: Record<Id, Mailbox> = {};
     for (const m of res.list) mailboxes[m.id] = m;
     set({ mailboxes, mailboxState: res.state, mailboxesLoaded: true });
+    // Label counts move for the same reasons folder counts do -- something was
+    // read, moved or deleted -- so they are refreshed on the same beat rather
+    // than on a timer of their own. Not awaited: the folder tree should not
+    // wait on decoration.
+    void get().loadLabelCounts();
   },
 
   roleId(role) {
@@ -890,6 +901,43 @@ export const useMail = create<MailState>((set, get) => ({
       return { selected: next };
     });
   },
+  async loadLabelCounts() {
+    const accountId = get().accountId;
+    const labels = settings().labels;
+    if (!accountId || !labels.length) {
+      if (Object.keys(get().labelCounts).length) set({ labelCounts: {} });
+      return;
+    }
+    /*
+     * One request carrying a query per label, rather than a request each. The
+     * count is the whole answer, so `limit: 0` keeps the server from sending
+     * ids that would only be thrown away -- what is wanted is `total`.
+     */
+    const calls: Invocation[] = labels.map((l, i) => [
+      "Email/query",
+      {
+        accountId,
+        filter: { operator: "AND", conditions: [{ hasKeyword: l.keyword }, { notKeyword: "$seen" }] },
+        limit: 0,
+        calculateTotal: true,
+      },
+      `c${i}`,
+    ]);
+    try {
+      const res = await client.request(calls);
+      const counts: Record<string, number> = {};
+      for (const [, result, id] of res.methodResponses) {
+        const label = labels[Number(String(id).slice(1))];
+        if (!label) continue;
+        counts[label.keyword] = (result as { total?: number }).total ?? 0;
+      }
+      set({ labelCounts: counts });
+    } catch {
+      // A count is decoration. Failing to get one is not worth a toast, and
+      // the sidebar falls back to drawing the label without a number.
+    }
+  },
+
   clearSelection() {
     set({ selected: {} });
   },

web/src/store/settings.ts

@@ -19,6 +19,26 @@ export type ImagePolicy = "ask" | "always" | "contacts";
 export type ComposeFormat = "html" | "text";
 export type ReadReceiptPolicy = "ask" | "never";
 
+/** How prominent a label is in the sidebar. */
+export type LabelVisibility = "always" | "unread" | "hidden";
+
+export interface Label {
+  /** The IMAP keyword itself, which is what actually rides on the message. */
+  keyword: string;
+  name: string;
+  color: string;
+  /**
+   * The keyword of the label this one sits under, if any.
+   *
+   * Nesting is display only. The keywords stay flat on the message, which is
+   * what keeps them readable by every other client -- a label moved under
+   * another one does not rewrite anything in the mailbox.
+   */
+  parent?: string;
+  /** Absent means "always", so a settings file written before this parses unchanged. */
+  visibility?: LabelVisibility;
+}
+
 export interface Template {
   id: string;
   name: string;
@@ -117,7 +137,7 @@ export interface Settings {
   labelsSidebar: boolean;
   fontSize: "small" | "medium" | "large";
   templates: Template[];
-  labels: Array<{ keyword: string; name: string; color: string }>;
+  labels: Label[];
   /**
    * Folder colours, by mailbox id. Local to this browser, like every other
    * colour here: JMAP has nowhere on a Mailbox to keep one.