@rapidmx/web-client 0.14.1 → 0.15.1

package/apps/shared/components/calendar/eventFormat.ts

@@ -0,0 +1,183 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { Attendee, AttendeeResponseStatus, BusyStatus, EventVisibility, GuestPermissions } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { addDaysToKey, allDayDateKey } from "./allDay.js";
+
+/** What the event form and the read-only event view both need to say about a busy status / an answer. */
+export const BUSY_STATUSES: BusyStatus[] = ["busy", "free", "tentative", "oof"];
+export const BUSY_STATUS_LABEL: Record<BusyStatus, string> = { busy: "Busy", free: "Free", tentative: "Tentative", oof: "Out of office" };
+/** Who may see an event's details, in the order the form lists them. */
+export const VISIBILITIES: EventVisibility[] = ["default", "public", "private", "confidential"];
+export const VISIBILITY_LABEL: Record<EventVisibility, string> = {
+    default: "Default visibility",
+    public: "Public",
+    private: "Private",
+    confidential: "Confidential",
+};
+/** What each visibility means here, where a reader of a shared calendar sees only a busy block for a private or confidential event. */
+export const VISIBILITY_HELP: Record<EventVisibility, string> = {
+    default: "People who can see this calendar see the event's details, as the calendar's sharing allows.",
+    public: "Everyone who can see this calendar sees the event's details.",
+    private: "Only you and people who can edit this calendar see the details. Everyone else who can see the calendar sees a busy block.",
+    confidential:
+        "Shown like a private event on your calendar: only you and people who can edit it see the details. The invitation marks the event confidential for other calendar programs.",
+};
+
+/** What guests may do, as a sentence: "Guests can modify the event, invite others and see the guest list." (or, when they can do none of it, what they cannot). */
+export function describeGuestPermissions(permissions: GuestPermissions): string {
+    const can = [
+        permissions.guestsCanModify && "modify the event",
+        permissions.guestsCanInviteOthers && "invite others",
+        permissions.guestsCanSeeGuestList && "see the guest list",
+    ].filter((text): text is string => !!text);
+    if (can.length === 0) {
+        return "Guests can't modify the event, invite others or see the guest list.";
+    }
+    return `Guests can ${can.length === 1 ? can[0] : `${can.slice(0, -1).join(", ")} and ${can[can.length - 1]}`}.`;
+}
+
+export const RESPONSE_STATUS_LABEL: Record<AttendeeResponseStatus, string> = {
+    needsAction: "Awaiting response",
+    accepted: "Accepted",
+    declined: "Declined",
+    tentative: "Tentative",
+};
+
+/** The units a reminder's lead time can be entered in - the event itself stores only minutes. */
+export const REMINDER_UNITS = [
+    { unit: "minutes", singular: "minute", factor: 1 },
+    { unit: "hours", singular: "hour", factor: 60 },
+    { unit: "days", singular: "day", factor: 1440 },
+    { unit: "weeks", singular: "week", factor: 10080 },
+] as const;
+export type ReminderUnit = (typeof REMINDER_UNITS)[number]["unit"];
+
+/** The unit a stored reminder reads best in: the largest that divides it evenly (`0` and odd values stay in minutes). */
+export function bestReminderUnit(minutes: number): (typeof REMINDER_UNITS)[number] {
+    for (let i = REMINDER_UNITS.length - 1; i > 0; i--) {
+        if (minutes > 0 && minutes % REMINDER_UNITS[i].factor === 0) {
+            return REMINDER_UNITS[i];
+        }
+    }
+    return REMINDER_UNITS[0];
+}
+
+/** "Notify 30 minutes before" / "Notify 1 hour before" / "Notify at the start" for a stored reminder, or "No notification". */
+export function describeReminder(minutes: number | undefined): string {
+    if (minutes === undefined || !Number.isFinite(minutes) || minutes < 0) {
+        return "No notification";
+    }
+    if (minutes === 0) {
+        return "Notify at the start";
+    }
+    const unit = bestReminderUnit(minutes);
+    const amount = minutes / unit.factor;
+    return `Notify ${amount} ${amount === 1 ? unit.singular : unit.unit} before`;
+}
+
+/** Splits what was typed into the guests field into its addresses: commas, semicolons and white space separate them. */
+export function splitGuestInput(text: string): string[] {
+    return text.split(/[,;\s]+/).filter(Boolean);
+}
+
+/** The loosest address check that is still worth making before an invitation is sent: something, an @, something. */
+export function isValidGuestAddress(address: string): boolean {
+    return /^[^\s@<>,;]+@[^\s@<>,;]+$/.test(address);
+}
+
+/** An attendee as the guests field adds one. */
+export function newGuest(address: string): Attendee {
+    return { address, role: "required", responseStatus: "needsAction", isOrganizer: false };
+}
+
+/** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
+ * itself parses such a string in, which needs no conversion. */
+export function wallStringToMs(value: string, zone: string, deviceZone: string): number {
+    if (zone === deviceZone) {
+        return new Date(value).getTime();
+    }
+    const wall = Date.parse(`${value.slice(0, 16)}:00Z`);
+    return Number.isNaN(wall) ? Number.NaN : fromEventWallClock(wall, zone, false);
+}
+
+/** Inverse of `wallStringToMs()`. */
+export function msToWallString(ms: number, zone: string, deviceZone: string): string {
+    if (zone === deviceZone) {
+        return toDatetimeLocal(new Date(ms).toISOString());
+    }
+    return new Date(toEventWallClock(ms, zone, false)).toISOString().slice(0, 16);
+}
+
+/** A local `Date` for a `YYYY-MM-DD` key (a plain `new Date(key)` would read it as UTC). */
+export function localDateFromKey(key: string): Date {
+    const [year, month, day] = key.split("-").map(Number);
+    return new Date(year, month - 1, day);
+}
+
+function dayLabel(day: Date, now: Date): string {
+    return format(day, day.getFullYear() === now.getFullYear() ? "EEEE, MMMM d" : "EEEE, MMMM d, yyyy");
+}
+
+/**
+ * "Thursday, September 24   2:00pm – 3:00pm" for a timed event ("Thursday, September 24 – Friday, September 25" style, with both
+ * days, when it crosses midnight), or "Thursday, September 24" (and the last day, when it spans several) for an all-day one. `start`
+ * and `end` are local wall-clock `Date`s - for an all-day event the first and the (inclusive) last day. The year is left out for
+ * the current one.
+ */
+export function formatWhen(start: Date, end: Date, allDay: boolean, now: Date = new Date()): string {
+    const first = dayLabel(start, now);
+    if (allDay) {
+        return end.getTime() > start.getTime() ? `${first} – ${dayLabel(end, now)}` : first;
+    }
+    const startTime = format(start, "h:mmaaa");
+    const endTime = format(end, "h:mmaaa");
+    if (format(start, "yyyy-MM-dd") === format(end, "yyyy-MM-dd")) {
+        return `${first}   ${startTime} – ${endTime}`;
+    }
+    return `${first} ${startTime} – ${dayLabel(end, now)} ${endTime}`;
+}
+
+/** `formatWhen()` for a stored event: instants for a timed one, the date-only keys (with the exclusive end) for an all-day one. */
+export function formatStoredWhen(startDate: string, endDate: string, allDay: boolean, now: Date = new Date()): string {
+    if (allDay) {
+        const startKey = allDayDateKey(startDate);
+        const lastKey = addDaysToKey(allDayDateKey(endDate), -1);
+        return formatWhen(localDateFromKey(startKey), localDateFromKey(lastKey < startKey ? startKey : lastKey), true, now);
+    }
+    return formatWhen(new Date(startDate), new Date(endDate), false, now);
+}
+
+/** Adds the addresses typed into the guests field to `current`: an address already on the list (in any case) is skipped, and what is not an
+ * address comes back as `invalid` for the field to keep. */
+export function mergeGuests(current: Attendee[], text: string): { attendees: Attendee[]; invalid: string[] } {
+    const attendees = [...current];
+    const invalid: string[] = [];
+    for (const token of splitGuestInput(text)) {
+        if (!isValidGuestAddress(token)) {
+            invalid.push(token);
+        } else if (!attendees.some((a) => a.address.toLowerCase() === token.toLowerCase())) {
+            attendees.push(newGuest(token));
+        }
+    }
+    return { attendees, invalid };
+}
+
+/** `formatWhen()` for the form's own wall-clock strings (an all-day event's `end` is its inclusive last day); a message while either is empty. */
+export function formatFormWhen(start: string, end: string, allDay: boolean, now: Date = new Date()): string {
+    const first = allDay ? localDateFromKey(start.slice(0, 10)) : new Date(start);
+    const last = allDay ? localDateFromKey(end.slice(0, 10)) : new Date(end);
+    if (Number.isNaN(first.getTime()) || Number.isNaN(last.getTime())) {
+        return "Pick a date and time";
+    }
+    return formatWhen(first, last, allDay, now);
+}
+
+/** A reminder as the form holds it (minutes, as typed; blank meaning none) as the number of minutes, or `undefined` for none. */
+export function reminderOf(text: string): number | undefined {
+    return text.trim() === "" ? undefined : Number(text);
+}

package/apps/shared/components/calendar/findTimeGrid.ts

@@ -0,0 +1,90 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { AvailabilitySummary } from "@rapidmx/react-shared/calendar/freeBusyApi.js";
+import { addDaysToKey } from "./allDay.js";
+import { msToWallString, wallStringToMs } from "./eventFormat.js";
+
+/** How many days, from the one on show, one look-up covers: the grid's own day and the days the suggested times are found in. */
+export const SEARCH_DAYS = 7;
+/** The working day suggestions are found in, in the hours of the zone the event is being set in. */
+export const WORK_START_HOUR = 8;
+export const WORK_END_HOUR = 18;
+
+/** Whether `value` is a `YYYY-MM-DD` key. */
+export function isDayKey(value: string): boolean {
+    return /^\d{4}-\d{2}-\d{2}$/.test(value);
+}
+
+/** The instant a `YYYY-MM-DD` day starts in `zone` (`deviceZone` is the zone the browser itself parses a wall clock in). */
+export function dayStartMs(dayKey: string, zone: string, deviceZone: string): number {
+    return wallStringToMs(`${dayKey}T00:00`, zone, deviceZone);
+}
+
+/** The stretches suggestions may fall in: each of the `SEARCH_DAYS` days from `dayKey`, 8:00 to 18:00 in `zone` - the first day always, the others only when
+ * they are a weekday. */
+export function workingWindows(dayKey: string, zone: string, deviceZone: string): { startMs: number; endMs: number }[] {
+    const windows: { startMs: number; endMs: number }[] = [];
+    for (let offset = 0; offset < SEARCH_DAYS; offset++) {
+        const key = addDaysToKey(dayKey, offset);
+        const weekday = new Date(`${key}T12:00:00Z`).getUTCDay();
+        if (offset === 0 || (weekday >= 1 && weekday <= 5)) {
+            windows.push({
+                startMs: wallStringToMs(`${key}T${String(WORK_START_HOUR).padStart(2, "0")}:00`, zone, deviceZone),
+                endMs: wallStringToMs(`${key}T${String(WORK_END_HOUR).padStart(2, "0")}:00`, zone, deviceZone),
+            });
+        }
+    }
+    return windows;
+}
+
+/**
+ * Where an instant falls on the grid of `dayKey`, as minutes since that day's midnight on `zone`'s clock (so it lines up with the hour labels, whatever a
+ * daylight-saving change did to the day's length): 0 for anything before the day, 1440 for anything after it.
+ */
+export function minuteOfDay(ms: number, dayKey: string, zone: string, deviceZone: string): number {
+    const wall = msToWallString(ms, zone, deviceZone);
+    const date = wall.slice(0, 10);
+    if (date < dayKey) {
+        return 0;
+    }
+    if (date > dayKey) {
+        return 1440;
+    }
+    return Number(wall.slice(11, 13)) * 60 + Number(wall.slice(14, 16));
+}
+
+/** "9:00am" for an instant on `zone`'s clock. */
+export function clockLabel(ms: number, zone: string, deviceZone: string): string {
+    return format(new Date(msToWallString(ms, zone, deviceZone)), "h:mmaaa");
+}
+
+/** What a failed look-up says: the wait for a rate limit, the server's own reason, or a plain failure. */
+export function freeBusyErrorMessage(err: unknown): string {
+    if (err instanceof ApiRequestError) {
+        return err.status === 429 ? "Too many availability look-ups just now. Wait a moment and try again." : err.message;
+    }
+    return "Couldn't load availability. Check your connection and try again.";
+}
+
+/**
+ * The one line under the grid about the proposed time. "Everyone is free" is only ever said when every person could be checked and none is busy: someone
+ * whose availability is unknown (an external guest, or somebody who hides their calendar) is said so, never counted as free.
+ */
+export function summaryLine(summary: AvailabilitySummary): string {
+    const parts: string[] = [];
+    if (summary.conflicts > 0) {
+        parts.push(`${summary.conflicts} ${summary.conflicts === 1 ? "conflict" : "conflicts"}${summary.tentative > 0 ? ` (${summary.tentative} tentative)` : ""}`);
+    } else if (summary.unknown === 0) {
+        parts.push("Everyone is free");
+    } else {
+        parts.push("No conflicts found");
+    }
+    if (summary.unknown > 0) {
+        parts.push(`${summary.unknown} ${summary.unknown === 1 ? "person's availability is" : "people's availability is"} unknown`);
+    }
+    return parts.join(" · ");
+}

package/apps/shared/components/calendar/swipeNavigation.ts

@@ -0,0 +1,14 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { SwipeDirection } from "../../gestures/useSwipe.js";
+
+/**
+ * What a horizontal swipe on the phone layout's calendar does, as the direction the visible period moves: `-1` is the previous
+ * month/week/day, `1` the next. This is the one place that mapping lives, so it flips in a single line.
+ *
+ * Swiping left (finger right to left) shows the next period and swiping right shows the previous, as most calendar apps do: the page is
+ * dragged along with the finger, and what was to its right comes in.
+ */
+export const SWIPE_PERIOD_SHIFT: Readonly<Record<SwipeDirection, 1 | -1>> = { left: 1, right: -1 };

package/apps/shared/components/layout/UserMenu.tsx

@@ -2,25 +2,28 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import { HiOutlineShieldCheck } from "react-icons/hi2";
 import { formatProfileName, getMyProfile, getMyUsername, Profile, profileInitials } from "@rapidmx/react-shared/auth/profileApi.js";
+import { listMailboxes, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import { accountUrlOf } from "../../auth/accountUrl.js";
 import { DEFAULT_TRUSTED_ROLES, lookUpAdminAccess } from "../../auth/adminAccess.js";
 import { ariaKeyShortcuts } from "../../keyboard/format.js";
 import { SHORTCUTS } from "../../keyboard/keymap.js";
 import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 import { SETTINGS_HREF } from "../../navigation/appHrefs.js";
+import { MailConnectionContext } from "../../mail/useMailConnection.js";
 import ThemeSwitch from "./ThemeSwitch.js";
 import {
     DesktopPermission,
     desktopPermission,
-    getNewMailPopupsEnabled,
     requestDesktopPermission,
     setDesktopOfferDismissed,
-    setNewMailPopupsEnabled,
 } from "../../mail/newMailNotifications.js";
+import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import { dismissAll } from "../../notifications/store.js";
 
 export interface UserMenuProps {
     userUid: string;
@@ -44,11 +47,11 @@ export interface UserMenuProps {
      * `/settings/auto-reply`, the only settings section that exists today; repoint this at a real
      * `/settings` landing page once a second section (Mail Filters, Signatures) makes one worth building. */
     showSettingsLink?: boolean;
-    /** Shows the new-mail notification controls, above "Admin Console"/"Sign Out": a "New mail pop-ups" on/off switch and, while
-     * the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `newMailNotifications.ts`).
-     * For the shells that announce new mail (Mail); the consoles have nothing to announce. */
+    /** Shows the notification controls, above "Admin Console"/"Sign Out": a "Notifications" on/off switch for every pop-up and,
+     * while the browser hasn't been asked, "Turn on desktop notifications". Both are per browser (see `notifications/preferences.ts`
+     * and `newMailNotifications.ts`). For the shells that draw pop-ups (`AppShell`). */
     showNotificationSettings?: boolean;
-    /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too). For the shells that have the
+    /** Shows a "Keyboard shortcuts" item that calls this - opening the help dialog (`?` and Ctrl+/ do too); not on the phone layout. For the shells that have the
      * keyboard layer (`AppChrome`); the consoles don't offer it. */
     onShowShortcuts?: () => void;
     /** Which way the menu opens from its button: `"down"` (the default; in a header) or `"up"` (in a footer, where there is no room below). */
@@ -84,10 +87,12 @@ function Avatar({ profile, initials, large }: { profile?: Profile; initials: str
  * trigger that opens a dropdown showing the caller's avatar/name, an "Account" link to auth-server's account page,
  * an optional "Settings" and "Admin Console" link, and "Sign Out". This service has no local user directory (see
  * `.claude/NOTES.md`), so the name and avatar come from auth-server, and the displayed name (and the initials badge)
- * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the caller's username - their first
- * verified `name` alias (`GET /api/aliases?type=name`, asked for only when the profile gave no name) - else the bare
- * uid. Either lookup can fail (auth-server's CORS list not including this origin, or no profile document at all - a
- * 404 for some accounts) and neither ever surfaces as an error. The avatar image comes from the profile alone.
+ * falls back down a chain: the profile's name (`GET /api/profiles/me`), else the display name of the mailbox the
+ * caller owns (`listMailboxes()`, or the list the app frame already holds; a shared or delegated mailbox does not count), else the caller's username - their first
+ * verified `name` alias (`GET /api/aliases?type=name`) - else the bare uid. The mailbox and the username are asked for
+ * only when the profile gave no name, and the username only when the mailbox gave none. Every lookup can fail
+ * (auth-server's CORS list not including this origin, or no profile document at all - a 404 for some accounts) and none
+ * ever surfaces as an error. The avatar image comes from the profile alone.
  */
 export default function UserMenu({
     userUid,
@@ -104,6 +109,8 @@ export default function UserMenu({
     unseenErrors = 0,
 }: UserMenuProps) {
     const env = useKeyEnvironment();
+    // A phone has no keyboard to speak of, so the shortcuts list (and the dialog it opens) has nothing to offer there.
+    const isMobile = useIsMobile();
     const [open, setOpen] = useState(false);
     // Where the menu sits, in window coordinates: it is drawn through a portal into `<body>` with `position: fixed`, so no ancestor's
     // `overflow`, `z-index` or stacking context - a custom branding header's, say - can clip it or put it behind the page.
@@ -113,7 +120,14 @@ export default function UserMenu({
     const [popups, setPopups] = useState(true);
     const [permission, setPermission] = useState<DesktopPermission>("unsupported");
     const [profile, setProfile] = useState<Profile | undefined>(undefined);
+    // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
+    const [profileSettled, setProfileSettled] = useState(false);
     const [username, setUsername] = useState<string | undefined>(undefined);
+    // The mailboxes this menu listed itself; `null` until it has, or when it has no need to.
+    const [ownListing, setOwnListing] = useState<Mailbox[] | null>(null);
+    // Inside the app frame the mailboxes are already listed for the whole session (see `useMailConnection()`), so they are reused, not listed again.
+    const connection = useContext(MailConnectionContext);
+    const framed = connection !== null;
     const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -126,18 +140,11 @@ export default function UserMenu({
             try {
                 loaded = await getMyProfile(authServerUrl);
             } catch {
-                // Unreachable, blocked, or no profile document (404) - fall through to the username.
+                // Unreachable, blocked, or no profile document (404) - fall through to the fallback names.
             }
-            if (cancelled) {
-                return;
-            }
-            setProfile(loaded);
-            // The username is only the fallback for a missing name - no second request when the profile has one.
-            if (!formatProfileName(loaded)) {
-                const alias = await getMyUsername(authServerUrl);
-                if (!cancelled) {
-                    setUsername(alias);
-                }
+            if (!cancelled) {
+                setProfile(loaded);
+                setProfileSettled(true);
             }
         })();
         return () => {
@@ -145,6 +152,46 @@ export default function UserMenu({
         };
     }, [authServerUrl]);
 
+    // The mailbox's display name and then the username are only fallbacks for a missing name - nothing more is asked when the profile has
+    // one, and no username is asked for when the mailbox has a name. Without `authServerUrl` the profile never settles, so nothing is.
+    const needsFallbackName = profileSettled && !formatProfileName(profile);
+
+    useEffect(() => {
+        if (!needsFallbackName || framed) {
+            return;
+        }
+        let cancelled = false;
+        // A failure (no mail server, no access) is just "no mailbox name" - the username is asked for next.
+        listMailboxes({ limit: 50 }).then(
+            (list) => !cancelled && setOwnListing(Array.isArray(list) ? list : []),
+            () => !cancelled && setOwnListing([]),
+        );
+        return () => {
+            cancelled = true;
+        };
+    }, [needsFallbackName, framed]);
+
+    // `null` while the mailboxes are still on their way.
+    const listed = framed ? (connection.status === "checking" ? null : connection.mailboxes) : ownListing;
+    const mailboxesKnown = listed !== null;
+    // Only a mailbox the caller owns counts: a shared or delegated one carries somebody else's name.
+    const mailboxName = needsFallbackName ? listed?.find((mb) => mb.ownerUserUid === userUid)?.displayName?.trim() || undefined : undefined;
+
+    useEffect(() => {
+        if (!authServerUrl || !needsFallbackName || !mailboxesKnown || mailboxName) {
+            return;
+        }
+        let cancelled = false;
+        void getMyUsername(authServerUrl).then((alias) => {
+            if (!cancelled) {
+                setUsername(alias);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [authServerUrl, needsFallbackName, mailboxesKnown, mailboxName]);
+
     // Keyed on the joined names, not the array: a caller's fresh `["admin"]` each render must not re-ask.
     const trustedRolesKey = JSON.stringify(trustedRoles);
     useEffect(() => {
@@ -166,14 +213,18 @@ export default function UserMenu({
     // Read fresh each time the menu opens - another tab may have changed either since - and only on the client.
     useEffect(() => {
         if (open && showNotificationSettings) {
-            setPopups(getNewMailPopupsEnabled());
+            setPopups(getNotificationsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
 
     function togglePopups() {
-        setNewMailPopupsEnabled(!popups);
+        setNotificationsEnabled(!popups);
         setPopups(!popups);
+        if (popups) {
+            // Turned off: what is on screen goes too (it stays in "Recent notifications").
+            dismissAll();
+        }
     }
 
     async function enableDesktopNotifications() {
@@ -230,8 +281,9 @@ export default function UserMenu({
         };
     }, [open, placement]);
 
-    const name = formatProfileName(profile) ?? username ?? userUid;
-    const initials = profileInitials(profile, userUid, username);
+    const name = formatProfileName(profile) ?? mailboxName ?? username ?? userUid;
+    // The badge takes its letter from whichever fallback name is shown, so it never disagrees with the name beside it.
+    const initials = profileInitials(profile, userUid, mailboxName ?? username);
     const accountUrl = accountUrlOf(authServerUrl);
 
     return (
@@ -299,7 +351,7 @@ export default function UserMenu({
                             onClick={togglePopups}
                             className="flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
                         >
-                            <span>New mail pop-ups</span>
+                            <span>Notifications</span>
                             <span className="text-xs font-semibold text-text-muted">{popups ? "On" : "Off"}</span>
                         </button>
                     )}
@@ -332,7 +384,7 @@ export default function UserMenu({
                             )}
                         </button>
                     )}
-                    {onShowShortcuts && (
+                    {onShowShortcuts && !isMobile && (
                         <button
                             role="menuitem"
                             type="button"