domma-cms 0.55.1 → 0.69.3

package/plugins/_lib/admin/mail/contacts.js

@@ -0,0 +1,301 @@
+/**
+ * Recipient suggestions, from the Contacts plugin.
+ *
+ * The mail client does not own an address book and should not grow one: the
+ * CMS already has Contacts, per-user, with groups and favourites. This is the
+ * thin bridge between them.
+ *
+ * ## An optional neighbour, never a dependency
+ *
+ * Contacts may be absent, disabled, or forbidden to this user. Every function
+ * here treats that as an ordinary answer - an empty list - rather than an
+ * error, and the compose window simply has no suggestions. A mail client that
+ * refuses to open because an unrelated plugin is off would be a poor trade for
+ * a convenience.
+ *
+ * The matching is pure and lives here rather than in the window, because
+ * "which contact did they mean" is the part worth testing and the part most
+ * likely to be wrong.
+ *
+ * @module _lib/admin/mail/contacts
+ */
+
+/**
+ * Where the Contacts plugin serves its per-user address book.
+ *
+ * Hardcoded, which is a coupling worth naming: there is no plugin-to-plugin
+ * discovery API, and probing `/api/plugins` needs a permission a mail user may
+ * not hold. A 404 here is indistinguishable from "not installed", which is
+ * exactly the behaviour wanted.
+ */
+const CONTACTS_ENDPOINT = '/api/plugins/contacts/contacts';
+
+/**
+ * Fetch the address book once.
+ *
+ * Once rather than per keystroke: an address book is small and a person's own
+ * contacts do not change while they write one email, so filtering locally is
+ * both instant and kinder to the server than a debounced request per letter.
+ *
+ * Returns `available` separately from the list, because an empty address book
+ * and no address book are different answers to different questions: an empty
+ * one still wants "Add sender to contacts" offered - that is how it stops
+ * being empty - while no plugin wants the action absent entirely.
+ *
+ * @param   {Function} api - the view's request helper
+ * @returns {Promise<{available: boolean, contacts: object[]}>}
+ */
+export async function loadContacts(api) {
+    try {
+        const rows = await api(CONTACTS_ENDPOINT);
+        if (!Array.isArray(rows)) return {available: false, contacts: []};
+
+        const contacts = rows
+            // Someone with no email address cannot be written to, and offering
+            // them is an invitation to send a message that cannot be sent.
+            .filter(row => String(row?.email ?? '').trim())
+            .map(row => ({
+                name: String(row.name ?? '').trim(),
+                email: String(row.email).trim(),
+                favourite: row.favourite === true,
+                groups: Array.isArray(row.groups) ? row.groups.filter(Boolean).map(String) : []
+            }));
+
+        return {available: true, contacts};
+    } catch {
+        // Not installed, disabled, or not ours to read. All the same answer.
+        return {available: false, contacts: []};
+    }
+}
+
+/**
+ * The part of a recipient field the caret is currently in.
+ *
+ * A recipient field holds a list, so what is being typed is only ever the
+ * text after the last separator - matching on the whole field would stop
+ * suggesting anything the moment a first recipient was entered.
+ *
+ * @param   {string} value
+ * @returns {string}
+ */
+export function currentFragment(value) {
+    const text = String(value ?? '');
+    const from = Math.max(text.lastIndexOf(','), text.lastIndexOf(';'));
+    return text.slice(from + 1).trim();
+}
+
+/**
+ * Put a chosen recipient in place of the fragment being typed.
+ *
+ * Keeps whatever was already entered and leaves a trailing separator, so the
+ * next name can be typed straight away without reaching for the comma.
+ *
+ * @param   {string} value
+ * @param   {string} replacement
+ * @returns {string}
+ */
+export function replaceFragment(value, replacement) {
+    const text = String(value ?? '');
+    const from = Math.max(text.lastIndexOf(','), text.lastIndexOf(';'));
+    const kept = from === -1 ? '' : `${text.slice(0, from + 1)} `;
+    return `${kept}${replacement}, `;
+}
+
+/**
+ * How a contact is written into a recipient field.
+ *
+ * `Name <email>` where there is a name, which `textToAddresses` parses back
+ * into exactly the pair this started from. A bare address where there is not,
+ * rather than an empty `<>` pair.
+ *
+ * @param   {{name: string, email: string}} contact
+ * @returns {string}
+ */
+export function formatRecipient(contact) {
+    const name = String(contact?.name ?? '').trim();
+    const email = String(contact?.email ?? '').trim();
+    if (!name || name === email) return email;
+    // A name containing a comma would otherwise read as two recipients.
+    return /[,;<>"]/.test(name) ? `"${name.replace(/"/g, '')}" <${email}>` : `${name} <${email}>`;
+}
+
+/**
+ * Find the contacts someone probably meant.
+ *
+ * Ranked rather than merely filtered, because the difference between the right
+ * answer first and the right answer fourth is the difference between the
+ * feature being used and being tolerated. In order: a name or address that
+ * STARTS with what was typed beats one that merely contains it, and a
+ * favourite beats a non-favourite at equal footing.
+ *
+ * @param   {{name: string, email: string, favourite: boolean}[]} contacts
+ * @param   {string} fragment
+ * @param   {{limit?: number, exclude?: string[]}} [options]
+ * @returns {{name: string, email: string, favourite: boolean}[]}
+ */
+export function matchContacts(contacts, fragment, {limit = 8, exclude = []} = {}) {
+    const query = String(fragment ?? '').trim().toLowerCase();
+    if (!query) return [];
+
+    const already = new Set(exclude.map(a => String(a).trim().toLowerCase()).filter(Boolean));
+
+    const scored = [];
+    for (const contact of contacts ?? []) {
+        const email = contact.email.toLowerCase();
+        // Someone already on the list is not a suggestion, it is a duplicate.
+        if (already.has(email)) continue;
+
+        const name = contact.name.toLowerCase();
+        let score = 0;
+        if (email.startsWith(query)) score = 4;
+        else if (name.startsWith(query)) score = 3;
+        // A match on the local part is worth more than one on the domain:
+        // "sam" should find sam@… before it finds anyone at samsung.com.
+        else if (email.split('@')[0].includes(query)) score = 2;
+        else if (name.includes(query) || email.includes(query)) score = 1;
+        if (!score) continue;
+
+        scored.push({contact, score: score * 2 + (contact.favourite ? 1 : 0)});
+    }
+
+    return scored
+        .sort((a, b) => b.score - a.score
+            || a.contact.name.localeCompare(b.contact.name)
+            || a.contact.email.localeCompare(b.contact.email))
+        .slice(0, limit)
+        .map(entry => entry.contact);
+}
+
+/**
+ * The groups worth suggesting, derived from the contacts themselves.
+ *
+ * Derived rather than fetched from `/groups`: a group with no members cannot
+ * be expanded into anything, so offering it would be offering a recipient list
+ * that resolves to nobody. This also keeps the whole feature on the one
+ * request the address book already costs.
+ *
+ * @param   {{name: string, email: string, groups: string[]}[]} contacts
+ * @returns {{name: string, members: object[]}[]}
+ */
+export function collectGroups(contacts) {
+    const byName = new Map();
+    for (const contact of contacts ?? []) {
+        for (const group of contact.groups ?? []) {
+            const key = String(group).trim();
+            if (!key) continue;
+            if (!byName.has(key)) byName.set(key, []);
+            byName.get(key).push(contact);
+        }
+    }
+
+    return [...byName.entries()]
+        .map(([name, members]) => ({name, members}))
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Find the groups someone probably meant.
+ *
+ * Same rule as contacts - starts-with beats contains - so the two lists can be
+ * merged without one of them systematically outranking the other.
+ *
+ * @param   {{name: string, members: object[]}[]} groups
+ * @param   {string} fragment
+ * @param   {{limit?: number}} [options]
+ * @returns {{name: string, members: object[], score: number}[]}
+ */
+export function matchGroups(groups, fragment, {limit = 4} = {}) {
+    const query = String(fragment ?? '').trim().toLowerCase();
+    if (!query) return [];
+
+    return (groups ?? [])
+        .map(group => {
+            const name = group.name.toLowerCase();
+            if (name.startsWith(query)) return {...group, score: 4};
+            if (name.includes(query)) return {...group, score: 1};
+            return null;
+        })
+        .filter(Boolean)
+        .sort((a, b) => b.score - a.score || a.name.localeCompare(b.name))
+        .slice(0, limit);
+}
+
+/**
+ * One ranked list of both, for a single dropdown.
+ *
+ * Groups are scored on the same scale as contacts and sit fractionally above a
+ * person matching equally well, because someone who has typed a group's name
+ * has almost certainly typed it on purpose - a group is a deliberate thing to
+ * reach for in a way one contact among several is not.
+ *
+ * @param   {object[]} contacts
+ * @param   {object[]} groups
+ * @param   {string} fragment
+ * @param   {{limit?: number, exclude?: string[]}} [options]
+ * @returns {object[]} entries tagged `kind: 'contact' | 'group'`
+ */
+export function suggest(contacts, groups, fragment, {limit = 8, exclude = []} = {}) {
+    const people = matchContacts(contacts, fragment, {limit, exclude})
+        .map(contact => ({kind: 'contact', ...contact}));
+
+    const already = new Set(exclude.map(a => String(a).trim().toLowerCase()).filter(Boolean));
+    const lists = matchGroups(groups, fragment)
+        // A group everyone in which is already a recipient has nothing left to
+        // add, and picking it would appear to do nothing.
+        .filter(group => group.members.some(m => !already.has(m.email.toLowerCase())))
+        .map(group => ({kind: 'group', ...group}));
+
+    return [...lists, ...people].slice(0, limit);
+}
+
+/**
+ * Turn a group into the recipients it stands for.
+ *
+ * Members already in the field are left out rather than repeated: expanding a
+ * group twice, or expanding one that overlaps another, should not produce the
+ * same person three times.
+ *
+ * @param   {{members: object[]}} group
+ * @param   {{exclude?: string[]}} [options]
+ * @returns {string} ready to drop into a recipient field
+ */
+export function expandGroup(group, {exclude = []} = {}) {
+    const already = new Set(exclude.map(a => String(a).trim().toLowerCase()).filter(Boolean));
+    return (group?.members ?? [])
+        .filter(member => !already.has(member.email.toLowerCase()))
+        .map(formatRecipient)
+        .join(', ');
+}
+
+/**
+ * Is this address already in the address book?
+ *
+ * @param   {object[]} contacts
+ * @param   {string} email
+ * @returns {boolean}
+ */
+export function isKnownAddress(contacts, email) {
+    const needle = String(email ?? '').trim().toLowerCase();
+    if (!needle) return false;
+    return (contacts ?? []).some(c => c.email.toLowerCase() === needle);
+}
+
+/**
+ * Add someone to the address book.
+ *
+ * Throws on failure rather than swallowing it. Reading contacts is a
+ * convenience that may quietly not be available; being told a contact was
+ * added when it was not is a different thing entirely.
+ *
+ * @param   {Function} api
+ * @param   {{name?: string, email: string}} person
+ * @returns {Promise<object>}
+ */
+export function addContact(api, {name = '', email}) {
+    return api(CONTACTS_ENDPOINT, 'POST', {
+        // The API requires a name; an address is the only honest stand-in when
+        // the message carried no display name.
+        name: String(name).trim() || String(email).trim(),
+        email: String(email).trim()
+    });
+}

package/plugins/_lib/admin/mail/diagnostics-section.js

@@ -0,0 +1,133 @@
+/**
+ * The settings section that answers "which build is this, and what went wrong".
+ *
+ * The expensive failures in this plugin were never about what the code does.
+ * They were about which build a particular browser was running, and they were
+ * diagnosed by describing symptoms back and forth. This turns that into one
+ * button: the page reports what it loaded, the server reports what it would
+ * serve, and the difference between the two is the answer.
+ *
+ * @module _lib/admin/mail/diagnostics-section
+ */
+
+
+/**
+ * Which versions of the shared modules this page actually loaded.
+ *
+ * Read from the browser's own resource timings rather than from what the code
+ * believes it asked for - a cached module answers here with the URL it was
+ * fetched under, which is exactly the fact in dispute.
+ *
+ * @returns {Object.<string, string>}
+ */
+function loadedAssetVersions() {
+    const out = {};
+    let entries = [];
+    try {
+        entries = performance.getEntriesByType('resource');
+    } catch {
+        return out;
+    }
+
+    for (const entry of entries) {
+        const match = String(entry.name).match(/\/plugins\/[^/]+\/(?:admin\/(?:mail|views|templates|css)\/)?([^/?]+\.(?:js|css|html))(?:\?v=(\d+))?/);
+        if (!match) continue;
+        out[match[1]] = match[2] ?? '(unversioned)';
+    }
+    return out;
+}
+
+/**
+ * Build the section.
+ *
+ * @param   {{recentErrors: () => object[], state: () => object}} host
+ * @returns {object} a settings section
+ */
+export function createDiagnosticsSection(host) {
+    /**
+     * @param   {HTMLElement} container
+     * @param   {object} ctx
+     * @returns {Promise<void>}
+     */
+    async function render(container, ctx) {
+        const server = await ctx.api(`${ctx.base}/diagnostics`);
+        const loaded = loadedAssetVersions();
+
+        const stamp = document.createElement('div');
+        stamp.className = 'text-sm font-semibold mb-2';
+        const entryVersion = loaded['mail.js'] ?? '(unknown)';
+        stamp.textContent = `${server.plugin.name} ${server.plugin.version ?? '?'} · build ${entryVersion}`;
+        container.appendChild(stamp);
+
+        // The comparison that matters: the token this page was served under
+        // against the token the server would issue now. Comparing a module's
+        // own mtime would be wrong - the shared files are fetched under the
+        // entry's token, not their own.
+        const served = server.assets.expectedStamp;
+        const running = loaded['mail.js'];
+        const stale = running && running !== '(unversioned)' && String(served) !== String(running);
+
+        const verdict = document.createElement('p');
+        verdict.className = 'text-sm mb-3';
+        if (stale) {
+            verdict.className = 'text-sm mb-3 text-danger';
+            verdict.textContent = `This page is running an older build than the server has (${running} vs ${served}). Reload with a hard refresh before reporting anything else.`;
+        } else {
+            verdict.className = 'text-sm mb-3 text-muted';
+            verdict.textContent = 'This page is running the build the server is serving.';
+        }
+        container.appendChild(verdict);
+
+        const errors = host.recentErrors();
+        const errorLine = document.createElement('p');
+        errorLine.className = 'text-sm text-muted mb-3';
+        errorLine.textContent = errors.length
+            ? `${errors.length} error(s) captured since this view opened - included in the report.`
+            : 'No errors captured since this view opened.';
+        container.appendChild(errorLine);
+
+        const actions = document.createElement('div');
+        actions.className = 'flex gap-2 items-center';
+
+        const status = document.createElement('span');
+        status.className = 'flex-1 text-sm text-muted';
+
+        const copy = document.createElement('button');
+        copy.className = 'btn btn-sm btn-primary';
+        copy.textContent = 'Copy diagnostics';
+        copy.addEventListener('click', async () => {
+            const report = {
+                page: {
+                    url: location.href,
+                    userAgent: navigator.userAgent,
+                    loadedAssets: loaded,
+                    view: host.state()
+                },
+                server,
+                errors
+            };
+            const text = JSON.stringify(report, null, 2);
+            try {
+                await navigator.clipboard.writeText(text);
+                status.className = 'flex-1 text-sm text-success';
+                status.textContent = 'Copied. Paste it into the report.';
+            } catch {
+                // Clipboard access can be refused; showing the text is still
+                // better than losing it.
+                const box = document.createElement('textarea');
+                box.value = text;
+                box.className = 'form-textarea mail-diag-log';
+                container.appendChild(box);
+                box.select();
+                status.className = 'flex-1 text-sm text-muted';
+                status.textContent = 'Clipboard unavailable - select and copy the text below.';
+            }
+        });
+
+        actions.appendChild(status);
+        actions.appendChild(copy);
+        container.appendChild(actions);
+    }
+
+    return {id: 'diagnostics', label: 'Diagnostics', render};
+}

package/plugins/_lib/admin/mail/folder-tree.js

@@ -0,0 +1,254 @@
+/**
+ * Mail folder presentation, shared by the Mail Reader and Email Pro.
+ *
+ * Both plugins draw the same folder pane, so the logic that turns IMAP's flat
+ * mailbox list into something a person can read lives here rather than in
+ * either of them. Served to the browser from /plugins/_lib/admin/mail/ - the
+ * static mount only exposes a plugin's `admin` and `public` directories, which
+ * is why this sits under admin/ and the server-side core does not.
+ *
+ * Pure functions, no DOM: the plugins own the rendering, this owns the shape.
+ *
+ * @module _lib/admin/mail/folder-tree
+ */
+
+/**
+ * Arrange a flat mailbox list into the hierarchy the server described.
+ *
+ * IMAP returns every mailbox as a full path plus the delimiter that separates
+ * its levels ('.' on Dovecot, '/' elsewhere), so `Work.Contracts` arrives as
+ * one entry. Rendering `folder.name` alone would show it as a top-level
+ * "Contracts" with nothing to tie it to Work, and two folders sharing a leaf
+ * name would be indistinguishable.
+ *
+ * Intermediate levels a server does not itself list - possible, since a parent
+ * may be unselectable - are synthesised so a child is never orphaned.
+ *
+ * @param   {object[]} folders
+ * Exported for tests; the router only ever reads `mailView`.
+ *
+ * @returns {object[]} roots, each with a `children` array and a `depth`
+ */
+export function buildFolderTree(folders) {
+    const nodes = new Map();
+    const roots = [];
+
+    /**
+     * Find or create the node for a full mailbox path.
+     *
+     * @param   {string} path
+     * @param   {string} delimiter
+     * @returns {object}
+     */
+    function ensure(path, delimiter) {
+        const existing = nodes.get(path);
+        if (existing) return existing;
+
+        const cut = delimiter ? path.lastIndexOf(delimiter) : -1;
+        const node = {
+            path,
+            name: cut === -1 ? path : path.slice(cut + delimiter.length),
+            delimiter,
+            specialUse: null,
+            // A level the server never listed: it exists only to hold children,
+            // so it is drawn but cannot be opened.
+            selectable: false,
+            subscribed: true,
+            depth: 0,
+            children: []
+        };
+        nodes.set(path, node);
+
+        if (cut === -1) {
+            roots.push(node);
+        } else {
+            const parent = ensure(path.slice(0, cut), delimiter);
+            node.depth = parent.depth + 1;
+            parent.children.push(node);
+        }
+        return node;
+    }
+
+    for (const folder of folders) {
+        const node = ensure(folder.path, folder.delimiter || '');
+        node.specialUse = folder.specialUse ?? null;
+        node.selectable = true;
+        node.name = folder.name || node.name;
+        // IMAP subscription. A folder exists whether or not you are
+        // subscribed to it; subscription is what most clients use to decide
+        // whether to SHOW it, which makes it the closest thing IMAP has to
+        // "visible". Absent means subscribed - an older server that does not
+        // report it should not have every folder read as hidden.
+        node.subscribed = folder.subscribed !== false;
+        node.unseen = Number.isFinite(folder.unseen) ? folder.unseen : null;
+        node.messages = Number.isFinite(folder.messages) ? folder.messages : null;
+    }
+
+    // INBOX first, then the rest alphabetically - the order a server lists
+    // mailboxes in is not one anybody wants to read.
+    const sort = list => {
+        list.sort((a, b) => {
+            const aInbox = a.specialUse === '\\Inbox' || a.path.toUpperCase() === 'INBOX';
+            const bInbox = b.specialUse === '\\Inbox' || b.path.toUpperCase() === 'INBOX';
+            if (aInbox !== bInbox) return aInbox ? -1 : 1;
+            return a.name.localeCompare(b.name);
+        });
+        for (const node of list) sort(node.children);
+    };
+    sort(roots);
+
+    return roots;
+}
+
+/**
+ * Flatten a folder tree into draw order, depth preserved.
+ *
+ * A collapsed folder is still drawn - it is its descendants that are left out,
+ * so the folder itself remains there to be reopened.
+ *
+ * @param   {object[]} roots
+ * @param   {Set<string>} [collapsed] - paths whose children are hidden
+ * @returns {object[]}
+ */
+export function flattenFolderTree(roots, collapsed = new Set()) {
+    const out = [];
+    const walk = nodes => {
+        for (const node of nodes) {
+            out.push(node);
+            if (!collapsed.has(node.path)) walk(node.children);
+        }
+    };
+    walk(roots);
+    return out;
+}
+
+/**
+ * A heading that says exactly which folder, in which mailbox, is open.
+ *
+ * The leaf name alone is ambiguous the moment two folders share one - an
+ * "Archive" under Work and another under Personal are indistinguishable, and
+ * that is precisely the case a reader with several mailboxes runs into.
+ *
+ * @param   {string} path
+ * @param   {string} delimiter
+ * @param   {string|null} mailboxLabel - included only when there is a choice
+ * @returns {string}
+ */
+export function folderHeading(path, delimiter, mailboxLabel) {
+    const parts = delimiter ? path.split(delimiter) : [path];
+    if (mailboxLabel) parts.unshift(mailboxLabel);
+    return parts.join(' \u203a ');
+}
+
+/**
+ * Pick an icon from a folder's SPECIAL-USE attribute.
+ *
+ * @param   {object} folder
+ * @returns {string}
+ */
+export function iconForFolder(folder) {
+    switch (folder.specialUse) {
+        case '\\Sent': return 'send';
+        case '\\Drafts': return 'file-text';
+        case '\\Trash': return 'trash';
+        case '\\Junk': return 'alert-triangle';
+        case '\\Archive': return 'archive';
+        default: return 'folder';
+    }
+}
+
+/**
+ * Unread in a folder and everything beneath it.
+ *
+ * A collapsed folder hides its children, so showing only its own count would
+ * claim a branch is read when it is not. The aggregate is what a collapsed
+ * row needs; the folder's own count is what an expanded one shows.
+ *
+ * @param   {object} node
+ * @returns {number}
+ */
+export function unreadInSubtree(node) {
+    const own = Number.isFinite(node.unseen) ? node.unseen : 0;
+    return node.children.reduce((total, child) => total + unreadInSubtree(child), own);
+}
+
+/**
+ * Keep only the branches that lead to unread mail.
+ *
+ * Ancestors of a folder with unread are kept even when they have none of
+ * their own - dropping them would leave "2026" floating with no indication
+ * that it lives under Work > Contracts. They are marked so the renderer can
+ * show them as context rather than as results.
+ *
+ * @param   {object[]} roots
+ * @returns {object[]} a pruned copy; the original tree is untouched
+ */
+export function pruneToUnread(roots) {
+    const visit = node => {
+        const children = node.children.map(visit).filter(Boolean);
+        const own = Number.isFinite(node.unseen) ? node.unseen : 0;
+        if (!own && !children.length) return null;
+        return {...node, children, contextOnly: own === 0};
+    };
+    return roots.map(visit).filter(Boolean);
+}
+
+/**
+ * The folder tree as nested context-menu items.
+ *
+ * A flat list of full paths is fine with six folders and unusable with sixty:
+ * `Work.Contracts.2026` reads as a string to be parsed rather than a place,
+ * and everything sorts by its root so siblings end up pages apart. Nested, it
+ * is the same shape as the folder pane, which is the shape someone already has
+ * in their head.
+ *
+ * A folder with children cannot simply be clicked: Domma opens the submenu on
+ * click and never fires the item's own action. So a parent that can itself
+ * hold mail gets an explicit entry at the top of its own submenu, which is
+ * also how every desktop mail client does it.
+ *
+ * Pure, and the interesting part - which destinations are legal - is the part
+ * worth testing.
+ *
+ * @param   {object[]} roots - from `buildFolderTree`
+ * @param   {{current?: string|null, onPick: (path: string) => void,
+ *            label?: (node: object) => string}} options
+ * @returns {object[]} context-menu items
+ */
+export function folderMenuItems(roots, {current = null, onPick, label = null}) {
+    const naming = label ?? (node => `Move to ${node.name}`);
+
+    /**
+     * @param   {object} node
+     * @returns {object}
+     */
+    function target(node) {
+        return {
+            label: naming(node),
+            icon: iconForFolder(node),
+            // A level the server never listed cannot hold mail, and the folder
+            // the message is already in is not a move. Both are greyed rather
+            // than dropped: a tree with holes in it is harder to read than one
+            // with a few dim rows, and "already here" is worth knowing.
+            disabled: () => !node.selectable || node.path === current,
+            action: () => onPick(node.path)
+        };
+    }
+
+    /**
+     * @param   {object[]} nodes
+     * @returns {object[]}
+     */
+    function walk(nodes) {
+        return nodes.map(node => {
+            if (!node.children.length) return target(node);
+            return {
+                label: node.name,
+                icon: iconForFolder(node),
+                submenu: [target(node), {type: 'separator'}, ...walk(node.children)]
+            };
+        });
+    }
+
+    return walk(roots);
+}