-
- );
+ // A finished sign-in lands in the mailbox (or the page saved before it),
+ // so the mail page's skeleton: it stays in place while the app loads there.
+ return
-
- {t("oauth_completing")}
-
-
-
- }
- >
+
-
- );
+ return
-
-
-
+ // Where the sign-in button goes once the provider answers.
+
-
- );
+ // Until the session is up: the same skeleton the server drew, so hydration
+ // matches and nothing moves. Below desktop width the effect above is about
+ // to send the visitor to the standard page; keep the skeleton up meanwhile
+ // rather than a blank page.
+ if (!initialCheckDone || authLoading || !isAuthenticated || !client || !isDesktop) {
+ return
-
-
- {t("common.loading")}
-
+ {/* data-pro-shell: a page skeleton inside a pane draws its own frame, not the Pro one. */}
+
{/* Once for the whole shell: email and folder tabs have no app strip, and split panes would show it twice. */}
(['mail', 'calendar', 'contacts', 'files', 'apps', 'settings'])('%s carries the login card, shown only with boot-out', (surface) => {
+ const container = dom(renderToString((() => {});
+
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({ push: vi.fn(), back: vi.fn(), replace: vi.fn() }),
+ useParams: () => ({ locale: 'en' }),
+ usePathname: () => '/en/contacts',
+ useSearchParams: () => {
+ // The static Lite export prerenders without search params: the hook
+ // suspends there and the Suspense fallback is what lands in the HTML.
+ if (nav.suspend) throw never;
+ return new URLSearchParams();
+ },
+}));
+vi.mock('@/i18n/navigation', () => ({
+ useRouter: () => ({ push: vi.fn(), back: vi.fn(), replace: vi.fn() }),
+ usePathname: () => '/',
+ Link: ({ children, href }: { children: React.ReactNode; href: string }) => {children},
+}));
+vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } }));
+vi.mock('@/components/contacts/contact-activity', () => ({ ContactActivity: () => null }));
+vi.mock('@/components/layout/navigation-rail', () => ({ NavigationRail: () => }));
+vi.mock('@/components/layout/sidebar-apps-modal', () => ({ SidebarAppsModal: () => null }));
+vi.mock('@/components/layout/inline-app-view', () => ({ InlineAppView: () => null }));
+vi.mock('@/components/layout/mv-top-bar', () => ({ MvTopBar: () => null }));
+vi.mock('@/components/plugins/app-top-banner-slot', () => ({ AppTopBannerSlot: () => null }));
+vi.mock('@/hooks/use-sidebar-apps', () => ({
+ useSidebarApps: () => ({
+ showAppsModal: false, inlineApp: null, loadedApps: [], handleManageApps: vi.fn(),
+ handleInlineApp: vi.fn(), closeInlineApp: vi.fn(), closeAppsModal: vi.fn(),
+ }),
+}));
+
+const { ContactsApp } = await import('@/components/contacts/contacts-app');
+const { FilesApp } = await import('@/components/files/files-app');
+const { PluginPageApp } = await import('@/components/plugins/plugin-page-app');
+const { useAuthStore } = await import('@/stores/auth-store');
+const { useContactStore } = await import('@/stores/contact-store');
+const { usePluginStore } = await import('@/stores/plugin-store');
+
+/** Signed out as far as the page knows, with checkAuth still running. */
+function restoring() {
+ act(() => {
+ useAuthStore.setState({ isAuthenticated: false, client: null, isLoading: true, checkAuth: () => never });
+ });
+}
+
+const skeleton = (container: HTMLElement, surface: string) => container.querySelector(`[data-boot-skeleton="${surface}"]`);
+
+beforeEach(() => {
+ localStorage.clear();
+ nav.suspend = false;
+});
+afterEach(() => {
+ act(() => {
+ useAuthStore.setState({ isAuthenticated: false, client: null, isLoading: false });
+ useContactStore.setState({ contacts: [], supportsSync: false, contactsLoaded: false });
+ });
+});
+
+describe('gates draw the page skeleton while the session is restored', () => {
+ it('contacts', () => {
+ restoring();
+ const { container } = render( must not draw one either.
+ it('hides the phone bottom bar when a message or conversation is open', () => {
+ const page = html(
+
+ ,
+ );
+
+ it('draws the Pro frame next to the standard one, swapped by boot-pro-frame', () => {
+ const container = page();
+ const pro = container.querySelector('[data-boot-skeleton="pro"]');
+ const standard = container.querySelector('[data-boot-skeleton="calendar"]');
+ expect(pro).not.toBeNull();
+ expect(standard).not.toBeNull();
+ // Hidden unless Pro takes over; the standard frame hides when it does.
+ expect(classes(pro?.parentElement)).toEqual(expect.arrayContaining(['hidden', 'boot-pro-frame:block']));
+ expect(classes(standard)).toEqual(expect.arrayContaining(['boot-pro-frame:hidden', 'boot-out:hidden']));
+ // The page's own body stays in the standard frame only.
+ expect(pro?.querySelector('[data-testid="calendar-body"]')).toBeNull();
+ expect(standard?.querySelector('[data-testid="calendar-body"]')).not.toBeNull();
+ });
+
+ it('gives the Pro frame the shell root, the rail with search, and two panes', () => {
+ const pro = page().querySelector('[data-boot-skeleton="pro"]');
+ expect(classes(pro)).toEqual(expect.arrayContaining(['flex', 'flex-col', 'h-dvh']));
+ const shell = pro?.querySelector('[data-pro-shell]');
+ const rail = shell?.firstElementChild;
+ expect(classes(rail)).toEqual(expect.arrayContaining(['w-14', 'flex']));
+ expect(rail?.querySelectorAll('[data-sk-rail]')).toHaveLength(5);
+ const panes = pro?.querySelectorAll('[data-sk-pro-pane]') ?? [];
+ expect([...panes].map((p) => p.getAttribute('data-sk-pro-pane'))).toEqual(['main', 'split']);
+ for (const pane of panes) {
+ // The tab strip, with eight tab slots for the CSS to pick from, right
+ // above the pane body.
+ const [strip, body] = [...pane.children];
+ expect(strip.querySelectorAll('[data-sk-pro-tab]')).toHaveLength(8);
+ expect(classes(strip)).toEqual(expect.arrayContaining(['h-9', 'bg-secondary']));
+ // A page Pro takes over draws its panes empty, to keep its HTML small.
+ // (The /pro page draws every body, see ProSkeleton below.)
+ expect([...body.children].map((b) => b.getAttribute('data-sk-pro-body'))).toEqual(['other']);
+ }
+ // The split pane only shows with a split.
+ expect(classes(panes[1])).toEqual(expect.arrayContaining(['hidden', 'boot-pro-split:flex']));
+ });
+
+ it('lets the login card win for a signed-out visitor', () => {
+ const container = page();
+ const login = container.querySelector('[data-boot-skeleton="login"]');
+ expect(classes(login?.parentElement)).toEqual(expect.arrayContaining(['hidden', 'boot-out:block']));
+ });
+});
+
+describe('ProSkeleton', () => {
+ it('is the Pro frame, or the login card for a signed-out visitor', () => {
+ const container = html() => {
+ for (const [k, v] of Object.entries(attrs)) document.documentElement.setAttribute(`data-boot-${k}`, v);
+ };
+ const pane = (which: string) => container.querySelector(`[data-sk-pro-pane="${which}"]`)!;
+ const shown = (els: Iterable) => [...els].filter((el) => getComputedStyle(el).display !== 'none');
+ const tabs = (which: string) => shown(pane(which).querySelectorAll('[data-sk-pro-tab]'));
+ const active = (which: string) =>
+ [...pane(which).querySelectorAll('[data-sk-pro-tab]')].findIndex(
+ (el) => !['', 'transparent', 'rgba(0, 0, 0, 0)'].includes(getComputedStyle(el).backgroundColor),
+ );
+ const body = (which: string) =>
+ shown(pane(which).querySelectorAll('[data-sk-pro-body]')).map((el) => el.getAttribute('data-sk-pro-body'));
+
+ it('draws one active mail tab without attributes', () => {
+ expect(tabs('main')).toHaveLength(1);
+ expect(active('main')).toBe(0);
+ expect(body('main')).toEqual(['mail']);
+ });
+
+ it('draws the stored count, the active tab and its page in each pane', () => {
+ boot({ pro: 'on', 'pro-main-tabs': '3', 'pro-main-active': '2', 'pro-main-kind': 'calendar', 'pro-split-tabs': '2', 'pro-split-active': '0', 'pro-split-kind': 'other', 'pro-split': 'right' });
+ expect(tabs('main')).toHaveLength(3);
+ expect(active('main')).toBe(2);
+ expect(body('main')).toEqual(['calendar']);
+ expect(tabs('split')).toHaveLength(2);
+ expect(active('split')).toBe(0);
+ expect(body('split')).toEqual(['other']);
+ });
+});
diff --git a/components/boot-skeleton/__tests__/settings-skeleton.test.tsx b/components/boot-skeleton/__tests__/settings-skeleton.test.tsx
new file mode 100644
index 000000000..29b64efa0
--- /dev/null
+++ b/components/boot-skeleton/__tests__/settings-skeleton.test.tsx
@@ -0,0 +1,93 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { SettingsSkeleton, SettingsSkeletonBody } from '../settings-skeleton';
+import { SETTINGS_TAB_IDS } from '@/lib/settings-tabs';
+
+/**
+ * The settings skeleton marks the open page and hides the pages the last
+ * session's nav didn't have, both from attributes the boot script sets on
+ * . The selectors live in app/boot-skeleton.css as Tailwind variants;
+ * read them from there and run them against the rendered rows.
+ */
+const css = readFileSync(join(process.cwd(), 'app/boot-skeleton.css'), 'utf8');
+
+/** The selector inside `@custom-variant (&:where())`. */
+function variantSelector(name: string): string {
+ const match = css.match(new RegExp(`@custom-variant ${name} \\(&:where\\(([\\s\\S]*?)\\)\\);`));
+ if (!match) throw new Error(`no variant ${name}`);
+ return match[1].trim();
+}
+
+/** The standard settings frame (the hidden Pro frame carries its own copy of the body). */
+function mount(html: string) {
+ document.body.innerHTML = html;
+ return document.body.querySelector('[data-boot-skeleton="settings"]') ?? document.body;
+}
+
+afterEach(() => {
+ document.body.innerHTML = '';
+ document.documentElement.removeAttribute('data-boot-settings-tab');
+ document.documentElement.removeAttribute('data-boot-settings-tabs');
+});
+
+describe('settings skeleton nav', () => {
+ it('draws a row for every settings page', () => {
+ const root = mount(renderToString(('[data-sk-settings-tab]')];
+ const matching = rows.filter((row) => row.matches(active)).map((row) => row.getAttribute('data-sk-settings-tab'));
+ expect(matching).toEqual([tab]);
+ const row = rows.find((r) => r.getAttribute('data-sk-settings-tab') === tab)!;
+ expect(row.className).toContain('boot-settings-active:bg-accent');
+ });
+
+ it('hides the optional pages the last nav did not list, and shows recovery only when it did', () => {
+ const root = mount(renderToString((`[data-sk-settings-tab="${tab}"]`)!;
+ const hidesFilters = variantSelector('boot-no-settings-filters');
+ const showsRecovery = variantSelector('boot-settings-recovery');
+ expect(row('filters').className).toContain('boot-no-settings-filters:hidden');
+ expect(row('recovery').className).toContain('boot-settings-recovery:flex');
+
+ // No hints: everything but recovery.
+ expect(row('filters').matches(hidesFilters)).toBe(false);
+ expect(row('recovery').matches(showsRecovery)).toBe(false);
+
+ document.documentElement.setAttribute('data-boot-settings-tabs', 'account appearance recovery');
+ expect(row('filters').matches(hidesFilters)).toBe(true);
+ expect(row('recovery').matches(showsRecovery)).toBe(true);
+
+ document.documentElement.setAttribute('data-boot-settings-tabs', 'account filters');
+ expect(row('filters').matches(hidesFilters)).toBe(false);
+ expect(row('recovery').matches(showsRecovery)).toBe(false);
+ });
+
+ it('drops the section jump row on pages with one section', () => {
+ const root = mount(renderToString(('.boot-settings-one-section\\:hidden')!;
+ expect(row).not.toBeNull();
+ const oneSection = variantSelector('boot-settings-one-section');
+ document.documentElement.setAttribute('data-boot-settings-tab', 'filters');
+ expect(row.matches(oneSection)).toBe(true);
+ document.documentElement.setAttribute('data-boot-settings-tab', 'appearance');
+ expect(row.matches(oneSection)).toBe(false);
+ });
+
+ it('has the back-to-mail box only outside a Pro pane', () => {
+ const page = mount(renderToString(
+ {/* Desktop */}
+
+ );
+}
diff --git a/components/boot-skeleton/bodies.tsx b/components/boot-skeleton/bodies.tsx
new file mode 100644
index 000000000..0f80d29cd
--- /dev/null
+++ b/components/boot-skeleton/bodies.tsx
@@ -0,0 +1,25 @@
+import type { BootSurface } from "@/lib/boot-skeleton/surfaces";
+import { MailSkeletonBody } from "./mail-skeleton";
+import { CalendarSkeletonBody } from "./calendar-skeleton";
+import { ContactsSkeletonBody } from "./contacts-skeleton";
+import { FilesSkeletonBody } from "./files-skeleton";
+import { SettingsSkeletonBody } from "./settings-skeleton";
+
+/**
+ * A surface's content without its frame, for the Pro shell's panes, which
+ * host the apps embedded (no rail, no Mountain View shell).
+ */
+export function SkeletonBody({ surface, embedded = true }: { surface: BootSurface; embedded?: boolean }) {
+ switch (surface) {
+ case "calendar":
+ return : the view menu button and the phone's pills. */
+ views?: Record;
+ /** calendar.tasks.label: the sidebar's tasks entry. */
+ tasks?: string;
+ /** calendar.tasks.filter_all, _pending, _completed, _overdue */
+ taskFilters?: [string, string, string, string];
+ /** calendar.tasks.create */
+ newTask?: string;
+ /** calendar.tasks.quick_add_placeholder */
+ quickAdd?: string;
+}
+
+const MODES: CalendarViewMode[] = ["month", "week", "day", "agenda", "tasks"];
+
+/** The skeleton's words from a translator for the "calendar" namespace. */
+export function calendarSkeletonText(t: (key: string) => string): CalendarSkeletonText {
+ return {
+ title: t("title"),
+ today: t("views.today"),
+ search: t("search.title"),
+ views: {
+ month: t("views.month"),
+ week: t("views.week"),
+ day: t("views.day"),
+ agenda: t("views.agenda"),
+ tasks: t("views.tasks"),
+ },
+ tasks: t("tasks.label"),
+ taskFilters: [t("tasks.filter_all"), t("tasks.filter_pending"), t("tasks.filter_completed"), t("tasks.filter_overdue")],
+ newTask: t("tasks.create"),
+ quickAdd: t("tasks.quick_add_placeholder"),
+ };
+}
+
+/** Shown for the view on . */
+const VIEW_SHOWN: Record = {
+ month: "hidden boot-cal-month:flex",
+ week: "hidden boot-cal-week:flex",
+ day: "hidden boot-cal-day:flex",
+ agenda: "hidden boot-cal-agenda:flex",
+ tasks: "hidden boot-cal-tasks:flex",
+};
+
+/** The view menu button's label for the view on . */
+const VIEW_LABEL: Record = {
+ month: "hidden boot-cal-month:inline",
+ week: "hidden boot-cal-week:inline",
+ day: "hidden boot-cal-day:inline",
+ agenda: "hidden boot-cal-agenda:inline",
+ tasks: "hidden boot-cal-tasks:inline",
+};
+
+/** The phone's view pill drawn as current. */
+const PILL_ON: Record = {
+ month: "boot-cal-month:bg-primary boot-cal-month:text-primary-foreground",
+ week: "boot-cal-week:bg-primary boot-cal-week:text-primary-foreground",
+ day: "boot-cal-day:bg-primary boot-cal-day:text-primary-foreground",
+ agenda: "boot-cal-agenda:bg-primary boot-cal-agenda:text-primary-foreground",
+ // Only there when tasks are on.
+ tasks: "hidden boot-cal-tasks-on:flex boot-cal-tasks:bg-primary boot-cal-tasks:text-primary-foreground",
+};
+
+/** Tasks have no dates to step through and no events to search. */
+const NOT_TASKS = "boot-cal-tasks:hidden";
+
+/** ToolbarButton (components/ui/toolbar.tsx): a 32px muted icon button. */
+function ToolbarIcon({ className, children }: { className?: string; children: ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** IconButton size icon-lg: the phone toolbar's 44px buttons. */
+function PhoneIcon({ outline, className, children }: { outline?: boolean; className?: string; children: ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** An outline xs button (Today, the view menu). */
+function OutlineButton({ className, children }: { className?: string; children?: ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** A word when the caller has it, else a placeholder as wide as a short one. */
+function Word({ text, w }: { text?: string; w: string }) {
+ return text ? {text} : ReactNode> = {
+ month: MonthSkeleton,
+ week: WeekSkeleton,
+ day: DaySkeleton,
+ agenda: AgendaSkeleton,
+ tasks: TasksSkeleton,
+};
+
+/**
+ * The grid of a calendar view where calendar-app's renderView() puts it.
+ * With `view` it draws that one (the loaded page while its calendars load,
+ * with `label` as its status); without, the one `data-boot-calendar-view`
+ * names.
+ */
+export function CalendarViewSkeleton({
+ view,
+ label,
+ text,
+}: {
+ view?: CalendarViewMode;
+ label?: string;
+ text?: CalendarSkeletonText;
+}) {
+ return (
+
+
+ );
+}
diff --git a/components/boot-skeleton/contacts-skeleton.tsx b/components/boot-skeleton/contacts-skeleton.tsx
new file mode 100644
index 000000000..ddc416d79
--- /dev/null
+++ b/components/boot-skeleton/contacts-skeleton.tsx
@@ -0,0 +1,268 @@
+import { ArrowLeft, Book, BookUser, ChevronDown, Filter, Menu, Plus, Printer, Square, X } from "@/components/icons";
+import type { Density } from "@/lib/density";
+import { cn } from "@/lib/cn";
+import { Bar, Block, Circle, repeat, textWidth } from "./kit";
+import { AppShellSkeleton, type RailLabels } from "./shell";
+import { PhoneActionsSkeleton, SearchFieldSkeleton, ToolIcon } from "./toolbar-skeleton";
+
+export interface ContactsSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /** Rail labels for the phone bottom bar (sidebar.*). */
+ labels?: RailLabels;
+}
+
+/**
+ * Mountain View's content card on a desktop: the data-mv-card row of the
+ * contacts, files and plugin pages, inset 16px from the canvas.
+ */
+export const MV_CARD_ROW = "lg:mv:mb-4 lg:mv:mx-4 lg:mv:rounded-[var(--mv-card-radius)] lg:mv:bg-background";
+
+const SIDEBAR_ROW_PY = { paddingBlock: "var(--density-sidebar-py, 4px)" } as const;
+const CONTACT_ROW_STYLE = {
+ gap: "var(--density-item-gap)",
+ paddingInline: "16px",
+ paddingBlock: "var(--density-item-py)",
+} as const;
+
+/**
+ * Contact rows as ContactListItem draws them (components/contacts/
+ * contact-list-item.tsx): the density's padding and gap, a 32px avatar, a
+ * name line and an email line; extra compact drops the avatar and the email.
+ * Shared by the page skeleton and the list's own loading state, so the one
+ * hands over to the other without a jump.
+ *
+ * `density` comes from the settings store once the app runs; without it (the
+ * server HTML) the boot script's data-boot-density picks the variant. With
+ * `letters`, a letter heading leads, as when the list groups by letter.
+ */
+export function ContactRowsSkeleton({
+ density,
+ letters = true,
+ count = 18,
+}: {
+ density?: Density;
+ letters?: boolean;
+ count?: number;
+}) {
+ const compactHide = density === undefined ? "boot-density-xc:hidden" : density === "extra-compact" ? "hidden" : undefined;
+ return (
+
+ );
+}
+
+/** The categories sidebar (components/contacts/contacts-sidebar.tsx). */
+function ContactsSidebarSkeleton() {
+ return (
+
+
+ );
+}
diff --git a/components/boot-skeleton/files-skeleton.tsx b/components/boot-skeleton/files-skeleton.tsx
new file mode 100644
index 000000000..840ec325e
--- /dev/null
+++ b/components/boot-skeleton/files-skeleton.tsx
@@ -0,0 +1,360 @@
+import {
+ ArrowUpDown,
+ FolderOpen,
+ HardDrive,
+ LayoutGrid,
+ LayoutList,
+ Menu,
+ MoreVertical,
+ PanelRight,
+ Plus,
+ RefreshCw,
+ Search,
+ Trash2,
+ X,
+} from "@/components/icons";
+import { FILE_LIST_COLUMNS } from "@/components/files/file-list-layout";
+import { cn } from "@/lib/cn";
+import { Bar, Block, Circle, repeat, textWidth } from "./kit";
+import { MV_CARD_ROW } from "./contacts-skeleton";
+import { AppShellSkeleton, type RailLabels } from "./shell";
+import { PhoneActionsSkeleton, SearchFieldSkeleton, ToolIcon } from "./toolbar-skeleton";
+
+export interface FilesSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /** Rail labels for the phone bottom bar (sidebar.*). */
+ labels?: RailLabels;
+}
+
+const SIDEBAR_ROW = { paddingBlock: "var(--density-sidebar-py, 4px)", paddingInlineStart: "12px" } as const;
+/** An unticked SelectBox (file-views.tsx). */
+const SELECT_BOX = "block w-4 h-4 shrink-0 rounded border border-muted-foreground/50 bg-background";
+/** A row's or tile's ⋮ button (IconButton icon-sm). */
+function MoreButton({ className }: { className?: string }) {
+ return (
+
+
+
+ );
+}
diff --git a/components/boot-skeleton/kit.tsx b/components/boot-skeleton/kit.tsx
new file mode 100644
index 000000000..310ca466e
--- /dev/null
+++ b/components/boot-skeleton/kit.tsx
@@ -0,0 +1,100 @@
+/**
+ * The page skeleton kit.
+ *
+ * Plain markup with no hooks, no store reads and no next-intl, so the same
+ * component renders on the server (before any JS runs), during hydration and
+ * inside a loaded page's own loading state, and Lite pages without a message
+ * catalog can draw it too. Variants are picked by CSS from the `data-boot-*`
+ * attributes the boot script sets on (lib/boot-skeleton/boot-script.ts);
+ * the classes behind them live in app/boot-skeleton.css.
+ */
+import { Fragment, type CSSProperties, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type SkeletonSurface =
+ | "mail"
+ | "calendar"
+ | "contacts"
+ | "files"
+ | "apps"
+ | "settings"
+ | "pro"
+ | "admin"
+ | "admin-login"
+ | "login"
+ | "setup";
+
+interface RegionProps {
+ /** Which page this is the skeleton of; tests and the probes look for it. */
+ surface: SkeletonSurface;
+ /**
+ * The one polite "Loading" announcement for the whole page. Leave it out
+ * only where no translation is at hand (Lite before its catalog loads).
+ */
+ label?: string;
+ className?: string;
+ style?: CSSProperties;
+ children?: ReactNode;
+}
+
+/**
+ * The outermost element of a page skeleton: marks the page busy and carries
+ * the single status message. Everything visual inside is aria-hidden.
+ */
+export function SkeletonRegion({ surface, label, className, style, children }: RegionProps) {
+ return (
+ ) {
+ return ;
+}
+
+/** A placeholder for a box: a button, an input, a card. */
+export function Block({ className, w, style }: ShapeProps) {
+ return (
+
+ );
+}
+
+/**
+ * Widths for placeholder text that look like text: varied, but the same on
+ * every render (no randomness, so server and client markup agree).
+ */
+export function textWidth(i: number, min = 40, spread = 45): string {
+ return `${min + ((i * 37 + 11) % spread)}%`;
+}
+
+/** `count` items from `render`, keyed by index. */
+export function repeat(count: number, render: (i: number) => ReactNode): ReactNode[] {
+ const out: ReactNode[] = [];
+ for (let i = 0; i < count; i++) out.push({render(i)} );
+ return out;
+}
diff --git a/components/boot-skeleton/login-skeleton.tsx b/components/boot-skeleton/login-skeleton.tsx
new file mode 100644
index 000000000..c36e4ef8d
--- /dev/null
+++ b/components/boot-skeleton/login-skeleton.tsx
@@ -0,0 +1,150 @@
+/**
+ * The sign-in page as it loads: the card with logo, heading, the user name
+ * and password fields, the 2FA link and the button, and the version line
+ * under it (app/(main)/[locale]/login/page.tsx, the default form). Class
+ * lists mirror the page's, so the form takes the card's place without a
+ * jump.
+ *
+ * What the card holds depends on /api/config, which arrives after the first
+ * paint: SSO-only, demo and dev mode, a server list, the remember-me and
+ * token switches, a hidden heading or subtitle and a custom logo size give a
+ * card of a different height. This draws the default form.
+ *
+ * Signed-in pages draw it too, for a visitor with nothing stored that could
+ * sign them back in (AppShellSkeleton, data-boot-auth="out").
+ */
+import { cn } from "@/lib/cn";
+import { Bar, Block, SkeletonRegion } from "./kit";
+
+/**
+ * A placeholder for one line of text in `className`'s font: exactly as tall
+ * as that line (a zero-width space sets it), with a bar across `w`
+ * of it. Give it a width class where it sits in a flex row.
+ */
+export function TextLine({ className, w, bar }: { className?: string; w: string; bar?: string }) {
+ return (
+
+ );
+}
+
+const CENTERED = "inset-x-0 mx-auto";
+
+/** An empty text field with its label, as the login form draws them. */
+function Field({ label }: { label: string }) {
+ return (
+
+ {/* The theme menu button: its icon, and the theme's name from sm up. */}
+
+
+ {accessibilityButton ? (
+
+ ) : null}
+
+
+ );
+}
+
+/**
+ * The admin sign-in page (app/(main)/admin/login/page.tsx): no card, the
+ * logo, the fixed English heading and line, one password field and the
+ * button. The page itself renders in full on the server; this is for
+ * the places that draw a page by its surface.
+ */
+export function AdminLoginSkeleton({ label, className }: LoginSkeletonProps) {
+ return (
+
+
+
+ );
+}
diff --git a/components/boot-skeleton/mail-skeleton.tsx b/components/boot-skeleton/mail-skeleton.tsx
new file mode 100644
index 000000000..e94dd4f89
--- /dev/null
+++ b/components/boot-skeleton/mail-skeleton.tsx
@@ -0,0 +1,700 @@
+/**
+ * The mail page as a skeleton: folder sidebar, message list and reading pane,
+ * in each layout the app has (split, horizontal, focus, Mountain View, tablet,
+ * phone). Class lists follow the real components (components/mail/mail-app.tsx,
+ * components/layout/sidebar.tsx, components/layout/mobile-header.tsx,
+ * components/email/thread-list-item.tsx, components/email/email-viewer.tsx),
+ * so the page fills in over it without anything moving.
+ *
+ * The pieces with a `density`/`shape` prop are shared with the loaded app's
+ * own loading states (the list's skeleton rows, the sidebar before the
+ * folders arrive, the viewer while a message loads). Without those props they
+ * pick their variant by CSS from the boot attributes, which is what the page
+ * skeleton needs; with them they draw exactly the one the app asks for.
+ */
+import type { ReactNode } from "react";
+import {
+ ArrowLeft,
+ CalendarEvent,
+ ChevronLeft,
+ ChevronRight,
+ Forward,
+ Reply,
+ ReplyAll,
+ ChevronDown,
+ ChevronsLeft,
+ Filter,
+ Mail,
+ Menu,
+ MoreVertical,
+ Pencil,
+ RefreshCw,
+ Search,
+ Settings,
+ Square,
+ Users,
+} from "@/components/icons";
+import { cn } from "@/lib/cn";
+import type { Density } from "@/lib/density";
+import { Bar, Block, Circle, SkeletonRegion, repeat, textWidth } from "./kit";
+import { AppShellSkeleton, type RailLabels } from "./shell";
+
+export interface MailSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /** Rail labels for the phone bottom bar (sidebar.*). */
+ labels?: RailLabels;
+}
+
+/** Folder row indent: the row's own start padding and the expand chevron's slot (sidebar.tsx). */
+export const FOLDER_ROW_PX_BASE = 8;
+export const FOLDER_CHEVRON_SLOT = 20;
+
+/**
+ * One line of placeholder text that is exactly as tall as a line of the real
+ * text (h-lh: one line-height of its own font size and leading), with the bar
+ * centred on it. `className` carries the font size and leading.
+ */
+function TextLine({ className, w, bar = "h-3" }: { className?: string; w: string; bar?: string }) {
+ return (
+
+ );
+}
+
+// --- Sidebar -----------------------------------------------------------------
+
+/**
+ * Folder rows as SidebarRow draws them (sidebar.tsx): text-sm, the density's
+ * block padding, a 2px leading stripe, the chevron slot and a 16px icon.
+ * Under Mountain View the rows are 32px pills with 20px icons, as
+ * globals.css makes the real ones.
+ */
+export function FolderRowsSkeleton({ count = 7 }: { count?: number }) {
+ return (
+ // On the sidebar's panel colour, which dark themes share with the shapes.
+
+ );
+}
+
+/** The "Folders" section header (SidebarSectionHeader, first). */
+function FolderSectionHeaderSkeleton({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+function SidebarSkeleton({ embedded }: { embedded: boolean }) {
+ return (
+ = { stacked: 16, "one-line": 32, mv: 22 };
+
+/**
+ * Message list rows. With `shape`, the rows the loaded list is about to draw
+ * (EmailList's loading state); without, every shape, shown by CSS from the
+ * boot attributes (one-line where useListRowShape says so, Mountain View's
+ * rows from a tablet up).
+ */
+export function MailListRowsSkeleton({
+ shape,
+ density,
+ preview,
+ className,
+}: { shape?: MailRowShape; className?: string } & RowOptions) {
+ const o: RowOptions = { density, preview };
+ if (shape) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
+
+/** The list header row: select toggle, search field, folder menu (mail-app.tsx). */
+function ListToolbarSkeleton({ embedded }: { embedded: boolean }) {
+ const icon = "flex items-center justify-center h-8 w-8 shrink-0 text-muted-foreground";
+ const round = "grid place-items-center w-10 h-10 rounded-full shrink-0 text-muted-foreground";
+ return (
+
+
+ );
+ }
+ return (
+
+
+ );
+}
diff --git a/components/boot-skeleton/plugin-page-skeleton.tsx b/components/boot-skeleton/plugin-page-skeleton.tsx
new file mode 100644
index 000000000..ee7b6a0e4
--- /dev/null
+++ b/components/boot-skeleton/plugin-page-skeleton.tsx
@@ -0,0 +1,44 @@
+import { cn } from "@/lib/cn";
+import { Bar } from "./kit";
+import { MV_CARD_ROW } from "./contacts-skeleton";
+import { AppShellSkeleton, type RailLabels } from "./shell";
+import { PhoneActionsSkeleton } from "./toolbar-skeleton";
+
+export interface PluginPageSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /** Rail labels for the phone bottom bar (sidebar.*). */
+ labels?: RailLabels;
+}
+
+/**
+ * A plugin page's own content (components/plugins/plugin-page-app.tsx).
+ * Nothing about the page is known before its plugin starts, not even its
+ * title, so this is the frame's column: the phone header (PhoneAppHeader,
+ * below 48rem) and an empty content area, which is also what the page shows
+ * while the plugins start. `embedded` is the Pro pane variant: no header.
+ */
+export function PluginPageSkeletonBody({ embedded = false }: { embedded?: boolean }) {
+ return (
+
+ );
+}
+
+/** Skeleton of a plugin page (/apps//). */
+export function PluginPageSkeleton({ label, labels }: PluginPageSkeletonProps) {
+ return (
+
+
+ );
+}
diff --git a/components/boot-skeleton/pro-skeleton.tsx b/components/boot-skeleton/pro-skeleton.tsx
new file mode 100644
index 000000000..a5294ee56
--- /dev/null
+++ b/components/boot-skeleton/pro-skeleton.tsx
@@ -0,0 +1,144 @@
+/**
+ * The Pro shell as a skeleton (app/(main)/[locale]/pro/page.tsx): the rail,
+ * then one or two panes, each a tab strip (components/pro/pro-tab-bar.tsx)
+ * over the active tab's page drawn embedded.
+ *
+ * The server can't know the stored tabs, so it draws every variant and CSS
+ * picks one from what the boot script read out of `pro-tabs`
+ * (data-boot-pro-*, see the "pro" section of app/boot-skeleton.css): how many
+ * tabs each pane has, which is active, which pane has focus, whether the
+ * split pane shows and on which side, and which page each pane shows.
+ */
+import type { CSSProperties } from "react";
+import { cn } from "@/lib/cn";
+import type { BootSurface } from "@/lib/boot-skeleton/surfaces";
+import { Bar, Block, SkeletonRegion, repeat, textWidth } from "./kit";
+import { SkeletonBody } from "./bodies";
+import { LoginSkeleton } from "./login-skeleton";
+import { RailSkeleton } from "./shell";
+
+export interface ProSkeletonProps {
+ /** common.loading */
+ label?: string;
+}
+
+const LINE = "1px solid rgba(128, 128, 128, 0.3)";
+const STRIP_BORDER: CSSProperties = { borderBottom: LINE };
+const DIVIDER: CSSProperties = { borderInlineStart: LINE };
+/** Most tabs a strip draws; the boot script caps its count to match. */
+const MAX_TABS = 8;
+const BODIES: BootSurface[] = ["mail", "calendar", "contacts", "files", "settings"];
+
+/** ProTabBar: up to eight tabs, shown by CSS from the stored count. */
+function TabStripSkeleton() {
+ return (
+
+ );
+}
+
+/** One pane: its tab strip over the active tab's page. */
+function PaneSkeleton({ pane, bodies, className }: { pane: "main" | "split"; bodies: BootSurface[]; className?: string }) {
+ return (
+
+
+ );
+}
+
+/**
+ * Skeleton of the Pro page, for its gate and the server HTML of /pro. A
+ * visitor with nothing stored that could sign them back in gets the login
+ * card's shape, as on every signed-in page.
+ */
+export function ProSkeleton({ label }: ProSkeletonProps) {
+ return (
+ <>
+ > = {
+ security: "boot-no-settings-security:hidden",
+ sharing: "boot-no-settings-sharing:hidden",
+ filters: "boot-no-settings-filters:hidden",
+ vacation: "boot-no-settings-vacation:hidden",
+ recovery: "hidden boot-settings-recovery:flex",
+ calendar: "boot-no-calendar:hidden boot-no-settings-calendar:hidden",
+ contacts: "boot-no-settings-contacts:hidden",
+ files: "boot-no-files:hidden boot-no-settings-files:hidden",
+ addons: "boot-no-settings-addons:hidden",
+};
+
+/** A line of text as tall as its line box, so rows keep the real height. */
+function Line({ className, bar, w }: { className?: string; bar: string; w: string }) {
+ return (
+
+
+
+ );
+}
diff --git a/components/boot-skeleton/setup-skeleton.tsx b/components/boot-skeleton/setup-skeleton.tsx
new file mode 100644
index 000000000..fae4d7846
--- /dev/null
+++ b/components/boot-skeleton/setup-skeleton.tsx
@@ -0,0 +1,109 @@
+/**
+ * The setup wizard as it loads (app/(main)/setup/page.tsx): the header, the
+ * seven-step progress bar and the card with the welcome step, which a fresh
+ * install opens on. The wizard asks /api/setup/status first; a wizard
+ * session that already passed the token goes on to a later step, whose card
+ * is taller.
+ *
+ * The page passes its translated strings, so the frame is drawn for real;
+ * without them (a connector link to /setup) it is drawn in bars.
+ */
+import { cn } from "@/lib/cn";
+import { SETUP_STEPS } from "@/lib/setup/steps";
+import { SkeletonRegion, repeat } from "./kit";
+import { TextLine } from "./login-skeleton";
+
+export interface SetupSkeletonStrings {
+ title: string;
+ subtitle: string;
+ /** One label per step, in order. */
+ steps: readonly string[];
+ welcomeTitle: string;
+ welcomeBody: string;
+ tokenLabel: string;
+ tokenPlaceholder: string;
+ continueLabel: string;
+}
+
+export interface SetupSkeletonProps {
+ /** common.loading */
+ label?: string;
+ strings?: SetupSkeletonStrings;
+ className?: string;
+}
+
+const CENTERED = "inset-x-0 mx-auto";
+
+export function SetupSkeleton({ label, strings, className }: SetupSkeletonProps) {
+ return (
+
+
+
+ );
+}
diff --git a/components/boot-skeleton/shell.tsx b/components/boot-skeleton/shell.tsx
new file mode 100644
index 000000000..ced5c7b32
--- /dev/null
+++ b/components/boot-skeleton/shell.tsx
@@ -0,0 +1,315 @@
+/**
+ * The app frame every signed-in page shares, as a skeleton: the page root, the
+ * Mountain View top bar, the vertical rail and the phone bottom bar. Class
+ * lists mirror the real ones (components/layout/navigation-rail.tsx,
+ * components/layout/mv-top-bar.tsx and the roots of mail-app, calendar-app,
+ * contacts-app, files-app, settings-app), so the frame doesn't move when the
+ * page takes over.
+ */
+import type { ReactNode } from "react";
+import {
+ Accessibility,
+ Bell,
+ CalendarEvent,
+ Folder,
+ Grid3x3,
+ Keyboard,
+ Mail,
+ Menu,
+ Plus,
+ Search,
+ Settings,
+ Shield,
+ Users,
+} from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { Bar, Circle, SkeletonRegion, type SkeletonSurface } from "./kit";
+import { LoginSkeleton } from "./login-skeleton";
+import { ProFrameSkeleton } from "./pro-skeleton";
+import { PRO_SURFACES, type BootSurface } from "@/lib/boot-skeleton/surfaces";
+
+export type RailApp = "mail" | "calendar" | "contacts" | "files" | "settings";
+
+/** A rail item drawn as current: an app, or the admin panel (NavigationRail adminActive). */
+export type RailActive = RailApp | "admin";
+
+/** Translated rail labels for the phone bottom bar; bars are drawn where one is missing. */
+export type RailLabels = Partial>;
+
+const RAIL_BORDER = { borderRight: "1px solid rgba(128, 128, 128, 0.3)" } as const;
+const DIVIDER = { borderColor: "rgba(128, 128, 128, 0.3)" } as const;
+
+/** Hidden when the last session's rail didn't show the app (bulwark-boot-hints). */
+const APP_HIDE: Record<"calendar" | "contacts" | "files", string> = {
+ calendar: "boot-no-calendar:hidden",
+ contacts: "boot-no-contacts:hidden",
+ files: "boot-no-files:hidden",
+};
+
+const APPS = [
+ { id: "mail", icon: Mail },
+ { id: "calendar", icon: CalendarEvent },
+ { id: "contacts", icon: Users },
+ { id: "files", icon: Folder },
+] as const;
+
+/**
+ * The 56px vertical rail (NavigationRail collapsed). `className` decides at
+ * which widths it shows. `search` draws the global search button the Pro
+ * shell's rail starts with. Items carry `data-sk-rail` so the Pro frame can
+ * mark the focused tab's app from CSS.
+ */
+export function RailSkeleton({
+ active,
+ search = false,
+ className,
+}: {
+ active?: RailActive;
+ search?: boolean;
+ className?: string;
+}) {
+ const item = (on: boolean) =>
+ cn(
+ "relative flex items-center justify-center w-10 h-10 rounded-md max-lg:min-h-[44px]",
+ on ? "bg-primary/10 text-primary" : "text-muted-foreground",
+ );
+ const footerItem = "flex items-center justify-center w-10 h-10 rounded-md";
+ return (
+
+ );
+}
+
+/**
+ * The phone/tablet bottom bar (NavigationRail horizontal). `className` decides
+ * at which widths it shows.
+ */
+export function BottomBarSkeleton({
+ active,
+ labels,
+ className,
+}: {
+ active?: RailActive;
+ labels?: RailLabels;
+ className?: string;
+}) {
+ // The admin panel's own bar has its entry before Settings.
+ const items: { id: RailActive; icon: typeof Mail }[] = [
+ ...APPS,
+ ...(active === "admin" ? [{ id: "admin" as const, icon: Shield }] : []),
+ { id: "settings", icon: Settings },
+ ];
+ return (
+
+ );
+}
+
+/** Mountain View's 64px top bar (components/layout/mv-top-bar.tsx), desktop only. */
+export function MvTopBarSkeleton({
+ search = true,
+ menu = true,
+ className,
+}: {
+ search?: boolean;
+ /** The sidebar toggle before the brand (MvTopBar showMenuButton). */
+ menu?: boolean;
+ className?: string;
+}) {
+ const round = "grid place-items-center w-12 h-12 rounded-full text-muted-foreground";
+ return (
+
+ );
+}
+
+interface AppShellSkeletonProps {
+ surface: SkeletonSurface;
+ /** The page's own "Loading" string (common.loading). */
+ label?: string;
+ /** Rail item drawn as current. */
+ active?: RailApp;
+ /**
+ * Below which width the vertical rail gives way to the bottom bar: mail and
+ * settings switch at 64rem, calendar, contacts, files and plugin pages at 48rem.
+ */
+ railBelow: "md" | "lg";
+ labels?: RailLabels;
+ /** Whether the Mountain View top bar holds the search field (mail does). */
+ mvSearch?: boolean;
+ /** Whether the Mountain View top bar starts with the sidebar toggle (MvTopBar showMenuButton). */
+ mvMenu?: boolean;
+ /** Extra classes for the row under the top bar (Mountain View card margins etc.). */
+ rowClassName?: string;
+ /** Extra classes for the phone/tablet bottom bar, e.g. to hide it while a message is open. */
+ bottomBarClassName?: string;
+ children: ReactNode;
+}
+
+/**
+ * Page root plus frame. `children` go in the row next to the rail: the page's
+ * own sidebar, list and panes.
+ *
+ * When nothing is stored that could sign the visitor back in, the boot script
+ * marks the page `data-boot-auth="out"` and the login card is drawn instead:
+ * that is where the app is about to send them.
+ *
+ * When the Pro interface is about to take the page over (`data-boot-pro="on"`:
+ * the setting is on and the screen is a desktop), the Pro frame is drawn
+ * instead, so the hop to /pro moves nothing. The login card wins over it: a
+ * signed-out visitor ends up on the login page either way.
+ */
+export function AppShellSkeleton({
+ surface,
+ label,
+ active,
+ railBelow,
+ labels,
+ mvSearch = false,
+ mvMenu = true,
+ rowClassName,
+ bottomBarClassName,
+ children,
+}: AppShellSkeletonProps) {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/components/boot-skeleton/toolbar-skeleton.tsx b/components/boot-skeleton/toolbar-skeleton.tsx
new file mode 100644
index 000000000..219969a3d
--- /dev/null
+++ b/components/boot-skeleton/toolbar-skeleton.tsx
@@ -0,0 +1,62 @@
+/**
+ * Header-row pieces shared by the contacts, files and plugin page skeletons,
+ * drawn at the sizes of the real controls in components/ui/toolbar.tsx and
+ * components/layout/phone-header-actions.tsx. Plain spans: nothing here is
+ * focusable, and the caller's region is aria-hidden.
+ */
+import type { ComponentType } from "react";
+import { MoreVertical, Search } from "@/components/icons";
+import { cn } from "@/lib/cn";
+import { Bar, Circle } from "./kit";
+
+type Icon = ComponentType<{ className?: string }>;
+
+/** A 32px toolbar icon button (ToolbarButton, IconButton icon-sm). */
+export function ToolIcon({ icon: Icon, className }: { icon: Icon; className?: string }) {
+ return (
+
+
+
+ ) : (
+ {
+ // Into a calendar that takes it: the default one, else the
+ // first the user may write to.
+ const target = writableTaskCalendars.find((c) => c.isDefault) ?? writableTaskCalendars[0];
+ if (!client || !target) {
+ toast.error(t("notifications.task_save_error"));
+ return;
+ }
+ taskStore.createTask(client, { "@type": "Task", title, progress: "needs-action", calendarIds: { [target.id]: true } })
+ .then((created) => { if (created) toast.success(t("notifications.task_created")); })
+ .catch((error: unknown) => toast.error(describeError(error, t("notifications.task_save_error"))));
+ }}
+ />
+ );
return (
);
diff --git a/components/connector/__tests__/connector-client.test.tsx b/components/connector/__tests__/connector-client.test.tsx
index 804f6a2fb..65bc7075b 100644
--- a/components/connector/__tests__/connector-client.test.tsx
+++ b/components/connector/__tests__/connector-client.test.tsx
@@ -1,5 +1,8 @@
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { TARGET_NAMES } from '@/lib/connector/registry';
+import { CONNECTOR_SURFACES } from '@/lib/boot-skeleton/surfaces';
// A connector link that can't be opened explains why in the reader's
// language (keys in tests), not in English only.
@@ -27,3 +30,21 @@ describe('connector link page', () => {
window.history.replaceState(null, '', '/');
});
});
+
+describe('connector link page while it resolves', () => {
+ // The server HTML is what shows until the redirect: the skeleton of the
+ // page the link opens, with the opening text as its status message.
+ it.each(TARGET_NAMES)('%s draws its destination skeleton', (target) => {
+ const html = renderToString({t('opening')} ;
}
diff --git a/components/contacts/__tests__/contact-list.test.tsx b/components/contacts/__tests__/contact-list.test.tsx
index 16fdd839f..a0864a598 100644
--- a/components/contacts/__tests__/contact-list.test.tsx
+++ b/components/contacts/__tests__/contact-list.test.tsx
@@ -77,6 +77,19 @@ describe('ContactList', () => {
expect(screen.getByTestId('contact-list-skeleton')).toBeInTheDocument();
});
+ it('draws the loading rows at the list density, as the page skeleton does', () => {
+ const avatars = () => [...screen.getByTestId('contact-list-skeleton').querySelectorAll('.rounded-full')];
+ act(() => { useSettingsStore.setState({ density: 'extra-compact', groupContactsByLetter: false }); });
+ const { unmount } = render( Devices > No printing: no Print buttons (Ctrl+P prints a note).
const printOff = useStrictestDevices().noPrint;
const tSidebar = useTranslations("sidebar");
@@ -956,7 +959,12 @@ function ContactsAppContent({ linkSegments: routeSegments }: ContactsAppProps =
}
};
- if (!isAuthenticated) return null;
+ // Until the session is restored: the page skeleton the server drew.
+ if (!isAuthenticated) {
+ return isEmbedded
+ ? { close(); void requestPrint({ kind: "contact-list" }); }} />}
)}
- isLoading={supportsSync && !contactsLoaded}
+ // Until the session is back, nobody knows yet whether the server
+ // keeps contacts: show the rows loading, not an empty book.
+ isLoading={!contactsLoaded && (supportsSync || !client)}
onPrint={printOff ? undefined : () => { void requestPrint({ kind: "contact-list" }); }}
printTitle={printContent?.kind === "list" ? listTitle : null}
/>
@@ -1566,8 +1576,14 @@ function ContactsAppContent({ linkSegments: routeSegments }: ContactsAppProps =
// prerender (static Lite build); at runtime it never suspends.
export function ContactsApp(props: ContactsAppProps = {}) {
return (
-
+ // The static Lite export writes this fallback into the page's HTML.
+
);
}
+
+function ContactsFallback() {
+ const { label, labels } = useSkeletonLabels();
+ return ) => void }) =>
+ React.createElement('button', { 'data-testid': 'pick-template', onClick: () => onSelect(TEMPLATE, {}) }, 'pick'),
+}));
+vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null }));
+vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null }));
+vi.mock('@/hooks/use-focus-trap', () => ({
+ useFocusTrap: () => ({ current: null }),
+}));
+vi.mock('@/hooks/use-pro-multi-account-identities', () => ({
+ useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }),
+ stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }),
+}));
+
+// ─── Store mocks ──────────────────────────────────────────────────────────────
+
+vi.mock('@/stores/auth-store', () => {
+ const state = {
+ client: null,
+ identities: [],
+ primaryIdentity: null,
+ isAuthenticated: false,
+ isDemoMode: false,
+ activeAccountId: null,
+ connectionLost: false,
+ getClientForAccount: () => undefined,
+ getAllConnectedClients: () => new Map(),
+ syncIdentities: () => {},
+ refreshIdentities: async () => {},
+ };
+ const hook = (sel?: (s: typeof state) => unknown) =>
+ typeof sel === 'function' ? sel(state) : state;
+ hook.getState = () => state;
+ hook.setState = (p: Partial) => Object.assign(state, p);
+ return { useAuthStore: hook };
+});
+
+vi.mock('@/stores/identity-store', () => {
+ const state = {
+ identities: [{ id: 'id-me', email: 'me@example.com', name: 'Me', htmlSignature: ') => Object.assign(state, p);
+ return { useIdentityStore: hook };
+});
+
+vi.mock('@/stores/account-store', () => {
+ const state = { accounts: [], getAccountById: () => undefined };
+ const hook = (sel?: (s: typeof state) => unknown) =>
+ typeof sel === 'function' ? sel(state) : state;
+ hook.getState = () => state;
+ hook.setState = (p: Partial) => Object.assign(state, p);
+ return { useAccountStore: hook };
+});
+
+vi.mock('@/stores/email-store', () => {
+ const state = {
+ draftSaveEnabled: false,
+ sendRawEmail: async () => ({ sent: true }),
+ };
+ const hook = (sel?: (s: typeof state) => unknown) =>
+ typeof sel === 'function' ? sel(state) : state;
+ hook.getState = () => state;
+ hook.setState = (p: Partial) => Object.assign(state, p);
+ return { useEmailStore: hook };
+});
+
+vi.mock('@/stores/settings-store', () => {
+ const state = {
+ timeFormat: '24h',
+ plainTextMode: false,
+ subAddressDelimiter: '+',
+ autoSelectReplyIdentity: true,
+ attachmentReminderEnabled: false,
+ attachmentReminderKeywords: [],
+ emptySubjectWarningEnabled: true,
+ recipientMentionsEnabled: false,
+ sendDelaySeconds: 0,
+ signaturePosition: 'above_quote',
+ signatureSeparatorEnabled: false,
+ requestReadReceiptDefault: false,
+ externalContentPolicy: 'block',
+ isSenderTrusted: () => false,
+ addTrustedSender: () => {},
+ trustedSendersAddressBook: null,
+ updateSetting: () => {},
+ };
+ const hook = (sel?: (s: typeof state) => unknown) =>
+ typeof sel === 'function' ? sel(state) : state;
+ hook.getState = () => state;
+ hook.setState = (p: Partial) => Object.assign(state, p);
+ return { useSettingsStore: hook, registerTemplateSyncBridge: () => {} };
+});
+
+vi.mock('@/stores/contact-store', () => {
+ const state = {
+ contacts: [],
+ getAutocomplete: async () => [],
+ addToTrustedSendersBook: async () => {},
+ };
+ const hook = (sel?: (s: typeof state) => unknown) =>
+ typeof sel === 'function' ? sel(state) : state;
+ hook.getState = () => state;
+ hook.setState = (p: Partial) => Object.assign(state, p);
+ return { useContactStore: hook };
+});
+
+// ─── Misc dependency mocks ────────────────────────────────────────────────────
+
+vi.mock('@/stores/toast-store', () => ({
+ toast: { info: () => {}, error: () => {}, success: () => {} },
+}));
+
+vi.mock('@/lib/plugin-hooks', () => ({
+ identityHooks: {
+ onSignatureRender: { size: 0, transform: async (value: unknown) => value },
+ onIdentitySelect: { size: 0, emit: async () => {} },
+ },
+ templateHooks: {
+ onTemplateRender: { size: 0, transform: async (value: unknown) => value },
+ onTemplateApply: { size: 0, emit: async () => {} },
+ },
+ emailHooks: {
+ onComposerOpen: { call: async () => [] },
+ onRecipientChange: { call: async () => [] },
+ getRecipientSuggestions: { call: async () => [] },
+ onRecipientChipsChange: { transform: async (chips: unknown) => chips },
+ onDraftChange: { emit: () => {} },
+ onBeforeDraftAutoSave: { transform: async (draft: unknown) => draft },
+ onBeforeEmailSend: { intercept: async () => true, interceptOutcome: async () => 'allowed' },
+ onComposeSend: { takeOver: async () => 'default' },
+ onTransformOutgoingEmail: { transform: async (email: unknown) => email },
+ },
+ contactHooks: {
+ search: { call: async () => [] },
+ onProvideRecipientSuggestions: { transform: async (initial: unknown) => initial },
+ },
+}));
+
+vi.mock('@/lib/email-threading', () => ({
+ computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
+}));
+vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } }));
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+const DRAFT = {
+ to: 'guest@example.com',
+ cc: '',
+ bcc: '',
+ subject: '',
+ body: '',
+ showCc: false,
+ showBcc: false,
+ selectedIdentityId: 'id-me',
+ subAddressTag: '',
+ mode: 'compose' as const,
+ draftId: null,
+};
+
+const nextFrame = () => act(() => new Promise((resolve) => requestAnimationFrame(() => resolve())));
+
+describe('applying a template with a data: image (#1490)', () => {
+ const range = Range.prototype as unknown as Record;
+ const doc = document as unknown as Record;
+ const client = {
+ uploadBlob: vi.fn(async (_file: File) => ({ blobId: 'blob-plan' })),
+ hasDelayedSend: () => false,
+ getMaxDelayedSend: () => 0,
+ };
+ beforeAll(() => {
+ range.getClientRects = () => [];
+ range.getBoundingClientRect = () => ({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+ doc.elementFromPoint = () => null;
+ useAuthStore.setState({ client: client as never });
+ });
+ afterAll(() => {
+ delete range.getClientRects;
+ delete range.getBoundingClientRect;
+ delete doc.elementFromPoint;
+ useAuthStore.setState({ client: null });
+ });
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('uploads the image and sends it as an inline part shown by cid', async () => {
+ const onSend = vi.fn();
+ render( {}} />);
+ await waitFor(() => {
+ const el = document.querySelector('.ProseMirror') as (HTMLElement & { editor?: Editor }) | null;
+ expect(el?.editor).toBeTruthy();
+ });
+ await nextFrame();
+
+ act(() => { fireEvent.keyDown(window, { key: 't' }); });
+ fireEvent.click(await screen.findByTestId('pick-template'));
+ await waitFor(() => expect(screen.queryByTestId('pick-template')).toBeNull());
+ await waitFor(() => expect(document.querySelector('.ProseMirror img')).not.toBeNull());
+
+ expect(client.uploadBlob).toHaveBeenCalledTimes(1);
+ const file = client.uploadBlob.mock.calls[0][0];
+ expect(file.type).toBe('image/png');
+ expect(new Uint8Array(await file.arrayBuffer())).toEqual(Uint8Array.from(atob(PNG), (c) => c.charCodeAt(0)));
+
+ fireEvent.click(screen.getAllByTestId('composer-send')[0]);
+ await waitFor(() => expect(onSend).toHaveBeenCalledTimes(1));
+ const { htmlBody, attachments } = onSend.mock.calls[0][0];
+ const inline = attachments?.find((a: { disposition?: string }) => a.disposition === 'inline');
+ expect(inline).toMatchObject({ blobId: 'blob-plan', type: 'image/png' });
+ expect(htmlBody).toContain(`src="cid:${inline.cid}"`);
+ expect(htmlBody).not.toContain('data:image');
+ });
+});
diff --git a/components/email/__tests__/composer-template-reply.test.tsx b/components/email/__tests__/composer-template-reply.test.tsx
index f804dde67..44ee3ff12 100644
--- a/components/email/__tests__/composer-template-reply.test.tsx
+++ b/components/email/__tests__/composer-template-reply.test.tsx
@@ -107,6 +107,8 @@ vi.mock('@/stores/settings-store', () => {
recipientMentionsEnabled: false,
sendDelaySeconds: 0,
signaturePosition: 'above_quote',
+ signatureNewMailEnabled: true,
+ signatureReplyForwardEnabled: true,
signatureSeparatorEnabled: false,
requestReadReceiptDefault: false,
externalContentPolicy: 'block',
diff --git a/components/email/__tests__/viewer-toolbar-over-side-panel.test.tsx b/components/email/__tests__/viewer-toolbar-over-side-panel.test.tsx
index 37b707f9e..47c196759 100644
--- a/components/email/__tests__/viewer-toolbar-over-side-panel.test.tsx
+++ b/components/email/__tests__/viewer-toolbar-over-side-panel.test.tsx
@@ -131,6 +131,33 @@ describe('the reader toolbar and the plugin side panel', () => {
expect(document.querySelector('[data-plugin-detail-panel]')).toBeTruthy();
});
+ it('loads a message with its toolbar where the loaded reader puts it', () => {
+ // The loading state lifts the toolbar above the message row too, so the
+ // row stays put when the message arrives: the same element at the same
+ // place (a moved row counts as a layout shift).
+ const view = (props: { email: Email | null; isLoading: boolean }) => (
+ {}} {...props} />
+ );
+ const { container, rerender } = render(view({ email: null, isLoading: true }));
+ const root = container.firstElementChild as HTMLElement;
+ expect(root.children).toHaveLength(2);
+ const row = root.children[1];
+ expect(row.className).toContain('flex-row');
+ expect(root.children[0].querySelector('.sk-shape')).toBeTruthy();
+ rerender(view({ email, isLoading: false }));
+ expect(root.querySelector('[data-viewer-top-toolbar="full-width"]')).toBe(root.children[0]);
+ expect(root.children[1]).toBe(row);
+ });
+
+ it('loads a message on a phone with the toolbar in the message column', () => {
+ device.isMobile = true;
+ const { container } = render(
+ {}} />,
+ );
+ const root = container.firstElementChild as HTMLElement;
+ expect(root.children).toHaveLength(1);
+ });
+
it('keeps the toolbar in the message column on a phone', () => {
device.isMobile = true;
show();
diff --git a/components/email/compose-format.ts b/components/email/compose-format.ts
index 82e9e9081..2d3b83cf7 100644
--- a/components/email/compose-format.ts
+++ b/components/email/compose-format.ts
@@ -139,7 +139,19 @@ export function replaceEmbeddedSignature(
? children.find((node) => node.textContent?.includes(options.quoteHeader!))
: undefined;
const quote = header ?? children.find(isQuoteBoundary) ?? null;
- removed = { parent: doc.body, insertBefore: quote };
+ // With no line above it, the signature would open the body and leave no
+ // place to type (#1503). Put an empty one first, as getInitialBody does,
+ // and keep the bare line breaks for the gap down to the quote.
+ const above = quote ? children.slice(0, children.indexOf(quote)) : children;
+ const hasLineAbove = above.some((node) => node.nodeType === 1
+ ? (node as Element).tagName !== 'BR'
+ : !!node.textContent?.trim());
+ if (!hasLineAbove) {
+ removed = { parent: doc.body, insertBefore: above[0] ?? quote };
+ signatureHtml = `${signatureHtml}`;
+ } else {
+ removed = { parent: doc.body, insertBefore: quote };
+ }
}
const host = doc.createElement('div');
host.innerHTML = signatureHtml;
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 87ae048e9..0e18405ba 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -103,7 +103,7 @@ import { OrgDisclaimerPreview } from "@/components/email/org-disclaimer-preview"
import "@/lib/org/outgoing";
import { SubAddressHelper } from "@/components/identity/sub-address-helper";
import { generateSubAddress } from "@/lib/sub-addressing";
-import { substitutePlaceholders, spliceTemplateAboveSignature, composeBodyHasUserContent } from "@/lib/template-utils";
+import { substitutePlaceholders, spliceTemplateAboveSignature, composeBodyHasUserContent, embedTemplateImages } from "@/lib/template-utils";
import { findUnfilledPlaceholders, stripEmbeddedSignatureHtml } from "@/lib/placeholder-check";
import enMessages from "@/locales/en/common.json";
import { TemplatePicker } from "@/components/templates/template-picker";
@@ -553,6 +553,13 @@ export function EmailComposer({
const updateSetting = useSettingsStore((state) => state.updateSetting);
const sendDelaySeconds = useSettingsStore((state) => state.sendDelaySeconds);
const signaturePosition = useSettingsStore((state) => state.signaturePosition);
+ const signatureNewMailEnabled = useSettingsStore((state) => state.signatureNewMailEnabled);
+ const signatureReplyForwardEnabled = useSettingsStore((state) => state.signatureReplyForwardEnabled);
+ // Whether automatic signature insertion is on for this composer mode: new
+ // mail (and re-opened drafts, which open in compose mode) follow the
+ // new-mail toggle, replies and forwards the reply/forward one. What the
+ // body already carries is never stripped - only the insert/append is gated.
+ const autoSignatureEnabled = mode === 'compose' ? signatureNewMailEnabled : signatureReplyForwardEnabled;
const signatureSeparatorEnabled = useSettingsStore((state) => state.signatureSeparatorEnabled);
const requestReadReceiptDefault = useSettingsStore((state) => state.requestReadReceiptDefault);
// A draft belongs to the account the composer was opened in. Switching
@@ -628,12 +635,13 @@ export function EmailComposer({
const shouldEmbedSignatureAboveQuote =
(mode === 'reply' || mode === 'replyAll' || mode === 'forward') &&
signaturePosition === 'above_quote' &&
+ signatureReplyForwardEnabled &&
hasInitialSignature;
// New-mail composes always embed the signature into the editor body so it's
// editable/removable (the previous read-only preview below the editor was
// never spec-correct - see #329). Compose mode also ignores any leftover
// `replyTo` from a still-selected email; getInitialBody short-circuits below.
- const shouldEmbedSignatureInNewMail = mode === 'compose' && hasInitialSignature;
+ const shouldEmbedSignatureInNewMail = mode === 'compose' && signatureNewMailEnabled && hasInitialSignature;
// Format a single EmailAddress for display in the composer input
const toRecipient = (r: { name?: string; email?: string }): Recipient =>
@@ -777,10 +785,13 @@ export function EmailComposer({
: (from.email || from.name || tCommon('unknown')))
: tCommon('unknown');
+ // Like a new mail, an empty line above the signature gives the cursor a
+ // place for the reply. Without it the reply started on the "-- " line (#1503).
const signatureBlock = buildEmbeddedSignatureHtml(initialSignatureIdentity, {
embed: shouldEmbedSignatureAboveQuote,
separator: signatureSeparatorEnabled,
});
+ const head = `${prefix || (signatureBlock ? '' : '')}${signatureBlock}`;
// Whether the quoted original may show its remote images in the editor:
// the viewer's rule, minus the per-message "load" click it doesn't know.
@@ -804,7 +815,7 @@ export function EmailComposer({
rewriteCidImagesForEditor(sanitizeEmailHtml(replyTo.htmlBody)),
{ remoteAllowed: quoteRemoteAllowed, showQuoteBorder: replyTo.quoteWrapInBlockquote !== false },
);
- return `${prefix}${signatureBlock}
${replyHeader(replyTo.quoteHeaderHtml)}${island}`; + return `${head}
${replyHeader(replyTo.quoteHeaderHtml)}${island}`; } const escaped = replyTo.body ? replyTo.body.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
') @@ -813,7 +824,7 @@ export function EmailComposer({ const bodyHtml = wrap ? `
${replyHeader(replyTo.quoteHeaderHtml)}${bodyHtml}`; + return `${head}
${replyHeader(replyTo.quoteHeaderHtml)}${bodyHtml}`; } // Build quoted content as HTML @@ -831,15 +842,15 @@ export function EmailComposer({ rewriteCidImagesForEditor(sanitizeEmailHtml(replyTo.htmlBody)), { remoteAllowed: quoteRemoteAllowed }, ); - return `${prefix}${signatureBlock}
${replyHeader(`
${replyHeader(`
'); if (mode === 'forward') { - return `${prefix}${signatureBlock}
${tQuote('forwarded_separator')}
${tQuote('from_label')}: ${escapeHtml(fromStrFull)}
${tQuote('date_label')}: ${escapeHtml(date)}
${tQuote('subject_label')}: ${escapeHtml(replyTo.subject || '')}
${escapedOriginal}`; + return `${head}
${tQuote('forwarded_separator')}
${tQuote('from_label')}: ${escapeHtml(fromStrFull)}
${tQuote('date_label')}: ${escapeHtml(date)}
${tQuote('subject_label')}: ${escapeHtml(replyTo.subject || '')}
${escapedOriginal}`; } else if (mode === 'reply' || mode === 'replyAll') { - return `${prefix}${signatureBlock}
${replyHeader(`
${replyHeader(`((resolve) => {
+ const reader = new FileReader();
+ reader.onload = (e) => resolve((e.target?.result as string) ?? null);
+ reader.onerror = () => resolve(null);
+ reader.readAsDataURL(file);
+ });
+ const [{ blobId }, dataUrl] = await Promise.all([
+ (composerClientRef.current ?? client).uploadBlob(file),
+ readAsDataUrl,
+ ]);
+ if (!dataUrl) throw new Error('Failed to read image as data URL');
+ const cid = `${generateUUID()}@webmail`;
+ inlineImagesRef.current.push({
+ cid,
+ blobId,
+ type: file.type || 'application/octet-stream',
+ name: file.name,
+ size: file.size,
+ dataUrl,
+ uploadedAt: Date.now(),
+ });
+ return { src: dataUrl, cid };
+ } catch (error) {
+ debug.error(`Failed to upload inline image ${file.name}:`, error);
+ toast.error(t('upload_failed', { filename: file.name }));
+ return null;
+ }
+ }, [client, t]);
+
const handleTemplateSelect = useCallback(async (template: EmailTemplate, filledValues: Record) => {
let filledSubject = Object.keys(filledValues).length > 0
? substitutePlaceholders(template.subject, filledValues)
@@ -2134,6 +2182,8 @@ export function EmailComposer({
filledSubject = rendered.subject;
bodyContent = plainTextMode ? rendered.text : sanitizePluginBodyHtml(rendered.html);
}
+ // Its data: images go out as cid: parts, like pasted ones (#1490).
+ if (!plainTextMode) bodyContent = await embedTemplateImages(bodyContent, handleImageUpload);
if (mode === 'compose') {
// An empty template subject must not wipe one the user typed (#540).
@@ -2219,7 +2269,7 @@ export function EmailComposer({
setShowTemplatePicker(false);
notifyTemplateApplied(template);
- }, [mode, plainTextMode, signatureIdentity, signatureSeparatorEnabled]);
+ }, [mode, plainTextMode, signatureIdentity, signatureSeparatorEnabled, handleImageUpload]);
useEffect(() => {
const handleTemplateKey = (e: KeyboardEvent) => {
@@ -2402,40 +2452,6 @@ export function EmailComposer({
}
}, [client, t, plainTextMode]);
- const handleImageUpload = useCallback(async (
- file: File,
- ): Promise<{ src: string; cid: string } | null> => {
- if (!client) return null;
- try {
- const readAsDataUrl = new Promise((resolve) => {
- const reader = new FileReader();
- reader.onload = (e) => resolve((e.target?.result as string) ?? null);
- reader.onerror = () => resolve(null);
- reader.readAsDataURL(file);
- });
- const [{ blobId }, dataUrl] = await Promise.all([
- (composerClientRef.current ?? client).uploadBlob(file),
- readAsDataUrl,
- ]);
- if (!dataUrl) throw new Error('Failed to read image as data URL');
- const cid = `${generateUUID()}@webmail`;
- inlineImagesRef.current.push({
- cid,
- blobId,
- type: file.type || 'application/octet-stream',
- name: file.name,
- size: file.size,
- dataUrl,
- uploadedAt: Date.now(),
- });
- return { src: dataUrl, cid };
- } catch (error) {
- debug.error(`Failed to upload inline image ${file.name}:`, error);
- toast.error(t('upload_failed', { filename: file.name }));
- return null;
- }
- }, [client, t]);
-
const handleFileSelect = async (event: React.ChangeEvent) => {
if (!event.target.files) return;
await addFiles(Array.from(event.target.files));
@@ -2667,7 +2683,7 @@ export function EmailComposer({
// below the editor - was saved without it (#823). Embed the *marked-up*
// form so re-opening the draft round-trips the signature as one block and
// signatureAlreadyInBody sees it instead of appending a second copy.
- const draftSignatureHtml = signatureAlreadyInBody
+ const draftSignatureHtml = signatureAlreadyInBody || !autoSignatureEnabled
? ''
: buildEmbeddedSignatureHtml(signatureIdentity, {
embed: true,
@@ -2675,7 +2691,7 @@ export function EmailComposer({
});
const draftHtmlBody = plainTextMode ? undefined : `${body}${draftSignatureHtml}`;
const draftTextBody = plainTextMode
- ? (signatureAlreadyInBody
+ ? (signatureAlreadyInBody || !autoSignatureEnabled
? body
: appendPlainTextSignature(body, signatureIdentity, { separator: signatureSeparatorEnabled }))
: htmlToPlainText(draftHtmlBody!, imageAltText);
@@ -3637,9 +3653,14 @@ export function EmailComposer({
// above-quote replies, a re-opened draft) `signatureAlreadyInBody` is set
// and the trailing append below is skipped so we don't duplicate it.
+ // Whether automatic signature insertion is on for this composer mode
+ // (component-level `autoSignatureEnabled` - see signatureAlreadyInBody).
+ // What the body already carries is never stripped - only the append is
+ // gated.
+
// Build HTML signature block (used only in rich text mode)
const buildSignatureHtml = (): string => {
- if (signatureAlreadyInBody) return '';
+ if (signatureAlreadyInBody || !autoSignatureEnabled) return '';
const sep = wantsSignatureSeparator(signatureSeparatorEnabled, signatureIdentity) ? `
--
` : `
`; if (signatureIdentity?.htmlSignature) { return `${sep}${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}`; @@ -3656,8 +3677,8 @@ export function EmailComposer({ // In plain text mode, send text/plain only (no HTML body) const signatureOpts = { separator: signatureSeparatorEnabled }; const builtTextBody = plainTextMode - ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts)) - : (signatureAlreadyInBody ? htmlToPlainText(body, imageAltText) : appendPlainTextSignature(htmlToPlainText(body, imageAltText), signatureIdentity, signatureOpts)); + ? (signatureAlreadyInBody || !autoSignatureEnabled ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts)) + : (signatureAlreadyInBody || !autoSignatureEnabled ? htmlToPlainText(body, imageAltText) : appendPlainTextSignature(htmlToPlainText(body, imageAltText), signatureIdentity, signatureOpts)); // Before any blobId is read: forwarded parts may still sit on the account // that holds the original message. @@ -4834,8 +4855,10 @@ export function EmailComposer({ {/* Hide the visual signature preview when the signature has already been embedded into the body (compose, above-quote replies, re-opened - drafts) - it would otherwise read as a second signature. */} - {signatureAlreadyInBody ? null + drafts) - it would otherwise read as a second signature. Also when + automatic insertion is off: nothing will be appended at send time, + so a preview would promise a signature that never goes out. */} + {signatureAlreadyInBody || !autoSignatureEnabled ? null : plainTextMode ? ( getPlainTextSignature(signatureIdentity) ? (
diff --git a/app/(main)/admin/__tests__/admin-login-logo.test.tsx b/app/(main)/admin/__tests__/admin-login-logo.test.tsx
new file mode 100644
index 000000000..742242a8f
--- /dev/null
+++ b/app/(main)/admin/__tests__/admin-login-logo.test.tsx
@@ -0,0 +1,28 @@
+import { renderToString } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+// The admin sign-in page renders in full on the server, which can't know the
+// theme: it sends both logos and CSS shows the one for the theme, instead of
+// the light logo turning white after the first paint in dark mode.
+
+vi.mock('@/hooks/use-config', () => ({
+ useConfig: () => ({
+ appName: 'Webmail',
+ loginLogoLightUrl: '/branding/light.svg',
+ loginLogoDarkUrl: '/branding/dark.svg',
+ }),
+}));
+
+const { default: AdminLoginPage } = await import('../login/page');
+
+describe('admin sign-in logo', () => {
+ it('sends the light and the dark logo, each for its theme', () => {
+ const container = document.createElement('div');
+ container.innerHTML = renderToString({children} ,
+}));
+vi.mock('../_unsaved-changes-guard', () => ({ UnsavedChangesGuard: () => null }));
+
+const { AdminLayoutClient } = await import('../_layout-client');
+
+describe('admin layout while the session is checked', () => {
+ it('draws the page header and section placeholders in the content slot', () => {
+ render((null);
const [authError, setAuthError] = useState(null);
@@ -135,9 +138,9 @@ export function AdminLayoutClient({ children }: { children: React.ReactNode }) {
) : authenticated === null ? (
- page
{authError}
- Loading admin panel…
-
+ // The page's header and section placeholders, where the boot
+ // skeleton drew them.
+
-
+
-
+
-
+
-
+
-
+
{header}
-
);
}
diff --git a/app/(main)/admin/_pages/version.tsx b/app/(main)/admin/_pages/version.tsx
index 6093aa948..5b0cd2b12 100644
--- a/app/(main)/admin/_pages/version.tsx
+++ b/app/(main)/admin/_pages/version.tsx
@@ -12,6 +12,7 @@ import {
import { SettingsSection, SettingItem } from '@/components/settings/settings-section';
import { Button } from '@/components/ui/button';
import { AdminPageHeader } from '@/components/admin/page-header';
+import { AdminBodySkeleton } from '@/components/boot-skeleton/admin-skeleton';
import { Badge, type BadgeTone } from '@/components/admin/badge';
import { useAdminFeedback } from '@/components/admin/feedback';
import { adminPageDef } from '@/lib/admin/admin-nav';
@@ -117,9 +118,7 @@ export function VersionPage() {
return (
-
+
{header}
-
);
}
diff --git a/app/(main)/admin/login/page.tsx b/app/(main)/admin/login/page.tsx
index 9a95d9312..df5c8ee86 100644
--- a/app/(main)/admin/login/page.tsx
+++ b/app/(main)/admin/login/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState, type FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { AlertCircle, Shield } from '@/components/icons';
import { useConfig } from '@/hooks/use-config';
-import { useThemeStore } from '@/stores/theme-store';
import { apiFetch, withBasePath } from '@/lib/browser-navigation';
import { safeAdminNext } from '@/lib/connector/admin-next';
@@ -14,8 +13,10 @@ export default function AdminLoginPage() {
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { loginLogoLightUrl, loginLogoDarkUrl, appName } = useConfig();
- const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
- const logoUrl = withBasePath(resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl);
+ // Both logos, picked by CSS: the server can't know the theme, and a logo
+ // chosen from the theme store swaps after the first paint.
+ const logoLight = withBasePath(loginLogoLightUrl || loginLogoDarkUrl);
+ const logoDark = withBasePath(loginLogoDarkUrl || loginLogoLightUrl);
useEffect(() => {
document.title = `Sign in - Admin - ${appName}`;
@@ -57,8 +58,11 @@ export default function AdminLoginPage() {
-
+
- {logoUrl ? (
- 
+ {logoLight ? (
+ <>
+ 
+ 
+
) : (
+
+);
+
+describe('setup wizard while the status loads', () => {
+ it('server-renders the wizard frame', () => {
+ const container = document.createElement('div');
+ container.innerHTML = renderToString(page);
+ const region = container.querySelector('[data-boot-skeleton="setup"]');
+ expect(region).not.toBeNull();
+ expect(region!.querySelector('[role="status"]')?.textContent).toBe(en.setup.loading);
+ // Header, all seven steps and the welcome card, in the page's words.
+ expect(region!.textContent).toContain(en.setup.title);
+ for (const step of Object.values(en.setup.steps)) expect(region!.textContent).toContain(step);
+ expect(region!.textContent).toContain(en.setup.welcome.token_label);
+ expect(container.querySelectorAll('a[href], button, input')).toHaveLength(0);
+ });
+
+ it('keeps it on the client until the status is there', () => {
+ const { container } = render(page);
+ expect(container.querySelector('[data-boot-skeleton="setup"]')).not.toBeNull();
+ expect(container.querySelector('.max-w-md')).toBeNull();
+ });
+});
diff --git a/app/(main)/setup/page.tsx b/app/(main)/setup/page.tsx
index e913b3f77..c8c34e241 100644
--- a/app/(main)/setup/page.tsx
+++ b/app/(main)/setup/page.tsx
@@ -6,6 +6,8 @@ import { useTranslations } from 'next-intl';
import { Check, CheckCircle2, AlertTriangle, AlertCircle, Server, ShieldCheck, KeyRound, FileText, Palette, Lock, ShieldAlert } from '@/components/icons';
import { apiFetch, getPathPrefix, withBasePath } from '@/lib/browser-navigation';
import { takeSetupTokenFromUrl } from '@/lib/setup/url-token';
+import { SetupSkeleton } from '@/components/boot-skeleton/setup-skeleton';
+import { SETUP_STEPS } from '@/lib/setup/steps';
type State = 'bootstrap' | 'configured' | 'env-managed';
@@ -85,15 +87,7 @@ const EMPTY_CONFIG: WizardConfig = {
// The wizard follows the browser's language, like the login page; the
// labels are setup.steps..
-const STEPS = [
- { id: 'welcome' },
- { id: 'server' },
- { id: 'auth' },
- { id: 'security' },
- { id: 'logging' },
- { id: 'branding' },
- { id: 'review' },
-] as const;
+const STEPS = SETUP_STEPS;
type SetupT = ReturnType>;
@@ -201,8 +195,24 @@ export default function SetupWizardPage() {
return setInsecureAcknowledged(true)} />;
}
+ // The server HTML, and every visit until the status answers: the wizard's
+ // frame with the welcome step, where a fresh install starts.
if (bootstrapping) {
- return t(`steps.${step.id}`)),
+ welcomeTitle: t('welcome.title'),
+ welcomeBody: t('welcome.body'),
+ tokenLabel: t('welcome.token_label'),
+ tokenPlaceholder: t('welcome.token_placeholder'),
+ continueLabel: t('welcome.continue'),
+ }}
+ />
+ );
}
if (completed) {
diff --git a/app/boot-skeleton.css b/app/boot-skeleton.css
new file mode 100644
index 000000000..b33ec0f2e
--- /dev/null
+++ b/app/boot-skeleton.css
@@ -0,0 +1,421 @@
+/*
+ * Page skeletons (components/boot-skeleton).
+ *
+ * The server draws every variant of a skeleton; these variants show the one
+ * that matches the attributes the boot script set on before the first
+ * paint (lib/boot-skeleton/boot-script.ts). Part of the first stylesheet, so
+ * nothing here arrives late.
+ */
+
+/* Mountain View shell. Its geometry only applies on desktop, so pair it with
+ lg: in markup (lg:mv:hidden), except the phone bottom bar, which follows
+ the layout at every width. */
+@custom-variant mv (&:where([data-interface-layout="mountain-view"] *));
+
+/* Mail layout (effectiveMailLayout: Mountain View and simple mode are focus). */
+@custom-variant boot-split (&:where([data-boot-mail-layout="split"] *));
+@custom-variant boot-horizontal (&:where([data-boot-mail-layout="horizontal"] *));
+@custom-variant boot-focus (&:where([data-boot-mail-layout="focus"] *));
+
+/* A message, thread, contact, settings page or admin page is open. */
+@custom-variant boot-open (&:where([data-boot-pane] *));
+@custom-variant boot-thread (&:where([data-boot-pane="thread"] *));
+
+/* The Pro interface takes this page over on a desktop. */
+@custom-variant boot-pro (&:where([data-boot-pro="on"] *));
+
+/* Nothing stored that checkAuth could restore: draw the login card. */
+@custom-variant boot-out (&:where([data-boot-auth="out"] *));
+
+/* Calendar view. */
+@custom-variant boot-cal-month (&:where([data-boot-calendar-view="month"] *));
+@custom-variant boot-cal-week (&:where([data-boot-calendar-view="week"] *));
+@custom-variant boot-cal-day (&:where([data-boot-calendar-view="day"] *));
+@custom-variant boot-cal-agenda (&:where([data-boot-calendar-view="agenda"] *));
+@custom-variant boot-cal-tasks (&:where([data-boot-calendar-view="tasks"] *));
+@custom-variant boot-cal-collapsed (&:where([data-boot-collapsed~="calendar"] *));
+
+/* Files. */
+@custom-variant boot-files-grid (&:where([data-boot-files-view="grid"] *));
+@custom-variant boot-files-details (&:where([data-boot-files-details="on"] *));
+
+/* What the rail showed last time (bulwark-boot-hints). Without hints every
+ app is drawn: the rail of a server with all of them. */
+@custom-variant boot-no-calendar (&:where([data-boot-rail]:not([data-boot-rail~="calendar"]) *));
+@custom-variant boot-no-contacts (&:where([data-boot-rail]:not([data-boot-rail~="contacts"]) *));
+@custom-variant boot-no-files (&:where([data-boot-rail]:not([data-boot-rail~="files"]) *));
+@custom-variant boot-rail-add-app (&:where([data-boot-rail~="add-app"] *));
+@custom-variant boot-rail-admin (&:where([data-boot-rail~="admin"] *));
+@custom-variant boot-rail-a11y (&:where([data-boot-rail~="a11y"] *));
+@custom-variant boot-rail-quota (&:where([data-boot-rail~="quota"] *));
+
+/* A placeholder shape. A slow opacity pulse rather than a moving shimmer:
+ opacity runs on the compositor, so the skeleton costs the main thread
+ nothing while the app's JS is still starting up. The colour is a tint of
+ the text colour rather than --color-muted, which equals the sidebar
+ colour in dark mode (and nearly so in light mode), so shapes show on every
+ panel and follow a theme's palette. */
+.sk-shape {
+ background-color: color-mix(in oklab, var(--color-foreground) 9%, transparent);
+ animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes sk-pulse {
+ 50% {
+ opacity: 0.55;
+ }
+}
+
+/* Reduced motion: no pulse at all (the global rule only shortens it). */
+@media (prefers-reduced-motion: reduce) {
+ :root:not([data-motion="full"]) .sk-shape {
+ animation: none;
+ }
+}
+:root[data-motion="reduce"] .sk-shape {
+ animation: none;
+}
+
+/* More contrast: shapes that stand out from the panels they sit on. */
+@media (prefers-contrast: more) {
+ :root:not([data-contrast="normal"]) .sk-shape {
+ background-color: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+ }
+}
+:root[data-contrast="more"] .sk-shape {
+ background-color: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+}
+
+/* Forced colours drop backgrounds; keep the shapes as system grey. */
+@media (forced-colors: active) {
+ .sk-shape {
+ forced-color-adjust: none;
+ background-color: GrayText;
+ animation: none;
+ }
+}
+
+/* pro */
+
+/* The Pro shell takes a standard page over (components/boot-skeleton/shell.tsx):
+ on a desktop with the Pro interface on, unless the visitor is signed out,
+ and never again inside the Pro shell itself (an embedded page's gate). */
+@custom-variant boot-pro-frame (&:where([data-boot-pro="on"]:not([data-boot-auth="out"]) *):not(:where([data-pro-shell] *)));
+
+/* The Pro split pane, on its stored side. */
+@custom-variant boot-pro-split (&:where([data-boot-pro-split] *));
+@custom-variant boot-pro-split-left (&:where([data-boot-pro-split="left"] *));
+
+/* Each pane's tab strip draws as many tabs as the store holds (up to eight),
+ and its body the active tab's page (lib/boot-skeleton/boot-script.ts,
+ data-boot-pro--tabs / -active / -kind). One tab and mail without them. */
+[data-sk-pro-tab]:nth-child(n+2),
+[data-sk-pro-body] {
+ display: none;
+}
+:root[data-boot-pro-main-tabs="2"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+2),
+:root[data-boot-pro-main-tabs="3"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+3),
+:root[data-boot-pro-main-tabs="4"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+4),
+:root[data-boot-pro-main-tabs="5"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+5),
+:root[data-boot-pro-main-tabs="6"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+6),
+:root[data-boot-pro-main-tabs="7"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+7),
+:root[data-boot-pro-main-tabs="8"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(-n+8),
+:root[data-boot-pro-split-tabs="2"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+2),
+:root[data-boot-pro-split-tabs="3"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+3),
+:root[data-boot-pro-split-tabs="4"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+4),
+:root[data-boot-pro-split-tabs="5"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+5),
+:root[data-boot-pro-split-tabs="6"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+6),
+:root[data-boot-pro-split-tabs="7"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+7),
+:root[data-boot-pro-split-tabs="8"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(-n+8) {
+ display: flex;
+}
+:root:not([data-boot-pro-main-active]) [data-sk-pro-pane="main"] [data-sk-pro-tab]:first-child,
+:root:not([data-boot-pro-split-active]) [data-sk-pro-pane="split"] [data-sk-pro-tab]:first-child,
+:root[data-boot-pro-main-active="0"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(1),
+:root[data-boot-pro-main-active="1"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(2),
+:root[data-boot-pro-main-active="2"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(3),
+:root[data-boot-pro-main-active="3"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(4),
+:root[data-boot-pro-main-active="4"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(5),
+:root[data-boot-pro-main-active="5"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(6),
+:root[data-boot-pro-main-active="6"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(7),
+:root[data-boot-pro-main-active="7"] [data-sk-pro-pane="main"] [data-sk-pro-tab]:nth-child(8),
+:root[data-boot-pro-split-active="0"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(1),
+:root[data-boot-pro-split-active="1"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(2),
+:root[data-boot-pro-split-active="2"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(3),
+:root[data-boot-pro-split-active="3"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(4),
+:root[data-boot-pro-split-active="4"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(5),
+:root[data-boot-pro-split-active="5"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(6),
+:root[data-boot-pro-split-active="6"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(7),
+:root[data-boot-pro-split-active="7"] [data-sk-pro-pane="split"] [data-sk-pro-tab]:nth-child(8) {
+ /* ProTabBar's active tab; its bottom edge covers the strip's border. */
+ background-color: var(--color-background);
+ border-inline-color: rgba(128, 128, 128, 0.3);
+ --sk-pro-tab-accent: var(--sk-pro-pane-accent);
+}
+:root:not([data-boot-pro-focus="split"]) [data-sk-pro-pane="main"],
+:root[data-boot-pro-focus="split"] [data-sk-pro-pane="split"] {
+ /* The focused pane's active tab carries the accent top edge. */
+ --sk-pro-pane-accent: var(--color-primary);
+}
+:root:not([data-boot-pro-main-kind]) [data-sk-pro-pane="main"] [data-sk-pro-body="mail"],
+:root:not([data-boot-pro-split-kind]) [data-sk-pro-pane="split"] [data-sk-pro-body="mail"],
+:root[data-boot-pro-main-kind="mail"] [data-sk-pro-pane="main"] [data-sk-pro-body="mail"],
+:root[data-boot-pro-main-kind="calendar"] [data-sk-pro-pane="main"] [data-sk-pro-body="calendar"],
+:root[data-boot-pro-main-kind="contacts"] [data-sk-pro-pane="main"] [data-sk-pro-body="contacts"],
+:root[data-boot-pro-main-kind="files"] [data-sk-pro-pane="main"] [data-sk-pro-body="files"],
+:root[data-boot-pro-main-kind="settings"] [data-sk-pro-pane="main"] [data-sk-pro-body="settings"],
+:root[data-boot-pro-main-kind="other"] [data-sk-pro-pane="main"] [data-sk-pro-body="other"],
+:root[data-boot-pro-split-kind="mail"] [data-sk-pro-pane="split"] [data-sk-pro-body="mail"],
+:root[data-boot-pro-split-kind="calendar"] [data-sk-pro-pane="split"] [data-sk-pro-body="calendar"],
+:root[data-boot-pro-split-kind="contacts"] [data-sk-pro-pane="split"] [data-sk-pro-body="contacts"],
+:root[data-boot-pro-split-kind="files"] [data-sk-pro-pane="split"] [data-sk-pro-body="files"],
+:root[data-boot-pro-split-kind="settings"] [data-sk-pro-pane="split"] [data-sk-pro-body="settings"],
+:root[data-boot-pro-split-kind="other"] [data-sk-pro-pane="split"] [data-sk-pro-body="other"] {
+ display: block;
+}
+
+/* The rail marks the focused tab's app (pro/page.tsx, railActiveItemId). */
+:root:not([data-boot-pro-kind]) [data-pro-shell] [data-sk-rail="mail"],
+:root[data-boot-pro-kind="mail"] [data-pro-shell] [data-sk-rail="mail"],
+:root[data-boot-pro-kind="calendar"] [data-pro-shell] [data-sk-rail="calendar"],
+:root[data-boot-pro-kind="contacts"] [data-pro-shell] [data-sk-rail="contacts"],
+:root[data-boot-pro-kind="files"] [data-pro-shell] [data-sk-rail="files"],
+:root[data-boot-pro-kind="settings"] [data-pro-shell] [data-sk-rail="settings"] {
+ background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+ color: var(--color-primary);
+}
+
+/* settings */
+
+/* The open settings page in the skeleton nav: the row whose
+ data-sk-settings-tab matches data-boot-settings-tab. */
+@custom-variant boot-settings-active (&:where(
+ [data-boot-settings-tab="account"] [data-sk-settings-tab="account"],
+ [data-boot-settings-tab="general"] [data-sk-settings-tab="general"],
+ [data-boot-settings-tab="notifications"] [data-sk-settings-tab="notifications"],
+ [data-boot-settings-tab="appearance"] [data-sk-settings-tab="appearance"],
+ [data-boot-settings-tab="accessibility"] [data-sk-settings-tab="accessibility"],
+ [data-boot-settings-tab="message_list"] [data-sk-settings-tab="message_list"],
+ [data-boot-settings-tab="reading"] [data-sk-settings-tab="reading"],
+ [data-boot-settings-tab="composing"] [data-sk-settings-tab="composing"],
+ [data-boot-settings-tab="vacation"] [data-sk-settings-tab="vacation"],
+ [data-boot-settings-tab="filters"] [data-sk-settings-tab="filters"],
+ [data-boot-settings-tab="organize"] [data-sk-settings-tab="organize"],
+ [data-boot-settings-tab="security"] [data-sk-settings-tab="security"],
+ [data-boot-settings-tab="sharing"] [data-sk-settings-tab="sharing"],
+ [data-boot-settings-tab="recovery"] [data-sk-settings-tab="recovery"],
+ [data-boot-settings-tab="calendar"] [data-sk-settings-tab="calendar"],
+ [data-boot-settings-tab="contacts"] [data-sk-settings-tab="contacts"],
+ [data-boot-settings-tab="files"] [data-sk-settings-tab="files"],
+ [data-boot-settings-tab="addons"] [data-sk-settings-tab="addons"],
+ [data-boot-settings-tab="backup"] [data-sk-settings-tab="backup"]
+));
+
+/* Settings pages the nav listed last time (bulwark-boot-hints). Without
+ hints every page is drawn except recovery (an Enterprise feature). */
+@custom-variant boot-no-settings-security (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="security"]) *));
+@custom-variant boot-no-settings-sharing (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="sharing"]) *));
+@custom-variant boot-no-settings-filters (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="filters"]) *));
+@custom-variant boot-no-settings-vacation (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="vacation"]) *));
+@custom-variant boot-no-settings-calendar (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="calendar"]) *));
+@custom-variant boot-no-settings-contacts (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="contacts"]) *));
+@custom-variant boot-no-settings-files (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="files"]) *));
+@custom-variant boot-no-settings-addons (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="addons"]) *));
+@custom-variant boot-settings-recovery (&:where([data-boot-settings-tabs~="recovery"] *));
+
+/* Settings pages with one section have no section jump row (SectionNav). */
+@custom-variant boot-settings-one-section (&:where([data-boot-settings-tab="security"] *, [data-boot-settings-tab="filters"] *, [data-boot-settings-tab="vacation"] *, [data-boot-settings-tab="recovery"] *, [data-boot-settings-tab="addons"] *));
+/* Accessibility has eleven sections: its jump row wraps to a second line. */
+@custom-variant boot-settings-two-rows (&:where([data-boot-settings-tab="accessibility"] *));
+
+/* contacts, files, apps */
+
+/* List density (data-boot-density, the settings' density): contact rows drop
+ the avatar and the second line in extra compact. */
+@custom-variant boot-density-xc (&:where([data-boot-density="extra-compact"] *));
+
+/* /contacts/new: the new-contact form (data-boot-pane="create"). */
+@custom-variant boot-create (&:where([data-boot-pane="create"] *));
+
+/* calendar */
+
+/* Week numbers beside the sidebar's mini month (showWeekNumbers). */
+@custom-variant boot-cal-weeknums (&:where([data-boot-cal-weeknums="on"] *));
+
+/* Calendar tasks are on (enableCalendarTasks): a view pill and a sidebar row. */
+@custom-variant boot-cal-tasks-on (&:where([data-boot-cal-tasks="on"] *));
+
+/* The views measure their pane to size their rows; the skeleton does the
+ same with the pane as a size container. --sk-head is the header's
+ offsetHeight (whole pixels, as the views read it). */
+.sk-cal-view {
+ container-type: size;
+}
+.sk-cal-week,
+.sk-cal-day {
+ /* pt-2 + weekday line + gap-0.5 + date circle + pb-1.5 + border */
+ --sk-head: round(nearest, 3.5rem + 1.03125rem + 1px, 1px);
+ --sk-hour-min: 60px;
+ /* fillHourHeight takes the fitted height from ceil(min * 0.9) up. */
+ --sk-hour-floor: 54px;
+ --sk-hour: var(--sk-hour-min);
+ --sk-shift: 0px;
+}
+.sk-cal-day {
+ --sk-hour-min: 64px;
+ --sk-hour-floor: 58px;
+}
+.sk-cal-month {
+ /* py-2 + text-xs line + border */
+ --sk-head: calc(2rem + 1px);
+ --sk-week-min: 146px;
+ --sk-week: var(--sk-week-min);
+}
+@media (width < 48rem) {
+ .sk-cal-week {
+ --sk-head: round(nearest, 3rem + 1.03125rem + 1px, 1px);
+ }
+ .sk-cal-month {
+ --sk-head: round(nearest, 0.75rem + 1.03125rem + 1px, 1px);
+ --sk-week-min: 52px;
+ }
+}
+@supports (height: round(down, 1.5px, 1px)) and (height: 1cqh) {
+ .sk-cal-week,
+ .sk-cal-day {
+ /* clientHeight, a whole number of pixels */
+ --sk-pane: round(nearest, 100cqh, 1px);
+ --sk-fit: round(down, (var(--sk-pane) - var(--sk-head)) / var(--boot-cal-hours, 12), 1px);
+ --sk-hour: max(var(--sk-fit), clamp(0px, (var(--sk-hour-floor) - var(--sk-fit)) * 1000, var(--sk-hour-min)));
+ /* The scroll the grid opens at: an hour before now, at most to the end. */
+ --sk-shift: clamp(
+ 0px,
+ var(--boot-cal-scroll, -1) * var(--sk-hour-min) - 8px,
+ var(--boot-cal-hours, 12) * var(--sk-hour) - (var(--sk-pane) - var(--sk-head))
+ );
+ }
+ .sk-cal-month {
+ --sk-week: max(var(--sk-week-min), round(down, (round(nearest, 100cqh, 1px) - var(--sk-head)) / 6, 1px));
+ }
+}
+.sk-cal-hours {
+ height: calc(var(--boot-cal-hours, 12) * var(--sk-hour));
+}
+.sk-cal-hours > * {
+ top: calc(-1 * var(--sk-shift));
+}
+.sk-cal-hour {
+ height: var(--sk-hour);
+}
+/* The slots' border-b border-border/50, one per hour, as a background. */
+.sk-cal-slots {
+ background-image: linear-gradient(
+ to bottom,
+ transparent calc(var(--sk-hour) - 1px),
+ color-mix(in oklab, var(--color-border) 50%, transparent) calc(var(--sk-hour) - 1px)
+ );
+ background-size: 100% var(--sk-hour);
+}
+/* A range that starts at midnight leaves its first hour unlabelled. */
+.sk-cal-first-label {
+ opacity: min(1, var(--boot-cal-start, 8));
+}
+/* The all-hours toggle shows while the hours are limited. */
+.sk-cal-hours-toggle {
+ opacity: min(1, 24 - var(--boot-cal-hours, 12));
+}
+.sk-cal-month-week {
+ height: var(--sk-week);
+}
+.sk-cal-mini-days {
+ height: calc(var(--boot-cal-mini-rows, 6) * 1.75rem);
+}
+@media (pointer: coarse) {
+ .sk-cal-mini-days {
+ height: calc(var(--boot-cal-mini-rows, 6) * 2.75rem);
+ }
+}
+/* Week columns: floor((pane - gutter) / columns), at least 80px; 120px on
+ phones (calendar-week-view.tsx, measureColWidth). Columns past the pane
+ are the next days of the strip, cut off. */
+.sk-cal-cols {
+ --sk-col: calc((100cqw - 3.5rem) / var(--boot-cal-cols, 7));
+ grid-auto-flow: column;
+ grid-auto-columns: var(--sk-col);
+}
+@supports (width: round(down, 1.5px, 1px)) and (width: 1cqw) {
+ .sk-cal-cols {
+ --sk-col: max(80px, round(down, (100cqw - 3.5rem) / var(--boot-cal-cols, 7), 1px));
+ }
+}
+@media (width < 48rem) {
+ .sk-cal-cols {
+ --sk-col: 120px;
+ }
+}
+
+/* mail */
+
+/* List density (the density setting, data-boot-density): extra-compact rows
+ (boot-density-xc, defined with contacts above) have no avatar, compact and
+ extra-compact ones no preview. */
+@custom-variant boot-dense (&:where([data-boot-density="compact"] *, [data-boot-density="extra-compact"] *));
+/* Message previews turned off (showPreview). */
+@custom-variant boot-no-preview (&:where([data-boot-preview="off"] *));
+/* The default interface layout, the opposite of mv: (both can't be told apart by order). */
+@custom-variant boot-std (&:where(:root:not([data-interface-layout="mountain-view"]) *));
+/* Mountain View's side panel shows only with calendar or contacts. */
+@custom-variant boot-no-mv-side (&:where([data-boot-rail]:not([data-boot-rail~="calendar"]):not([data-boot-rail~="contacts"]) *));
+
+/* Message list rows (MailListRowsSkeleton), in short classes because a
+ skeleton draws dozens of them. Geometry as ThreadListItem's: a 1px rule,
+ the cell's density padding and gap, its minimum height on stacked rows.
+ In the components layer, so utilities on the same element still win. */
+@layer components {
+ .sk-mrow {
+ border-bottom: 1px solid var(--color-border);
+ background-color: var(--color-background);
+ }
+ .sk-mcell {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--density-item-gap);
+ padding: var(--density-item-py) 0.75rem;
+ }
+ .sk-mcell-min {
+ min-height: var(--list-item-height);
+ }
+ /* The avatar's column: centred on the row. */
+ .sk-mav {
+ display: flex;
+ flex-shrink: 0;
+ align-self: stretch;
+ align-items: center;
+ }
+ /* A line of text as tall as the real one (font size and leading from its
+ classes), with its bar centred on it. */
+ .sk-ml {
+ position: relative;
+ display: block;
+ height: 1lh;
+ }
+ .sk-ml > .sk-shape {
+ position: absolute;
+ inset-block: 0;
+ inset-inline-start: 0;
+ height: 0.75rem;
+ margin-block: auto;
+ border-radius: 0.25rem;
+ }
+}
+
+/* Panels drawn in the shapes' own colour (the sidebar in dark themes, the
+ Mountain View phone header): lift the shapes off them. Below the contrast
+ rules' specificity, and not in forced colours. */
+@media not (forced-colors: active) {
+ :where(.dark) .sk-lift-dark .sk-shape,
+ :where([data-interface-layout="mountain-view"]) .sk-lift-mv .sk-shape,
+ .sk-lift .sk-shape {
+ background-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+ }
+}
diff --git a/app/globals.css b/app/globals.css
index 15f61878d..7cbfd50c8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,7 @@
@import "./theme-inline.css";
@import "./accessibility.css";
+@import "./boot-skeleton.css";
/* The app's font stack replaces Tailwind's default --font-sans, so the
font-sans utility and body use the same stack, and a theme's
diff --git a/components/admin/__tests__/admin-shell.test.tsx b/components/admin/__tests__/admin-shell.test.tsx
index d1d081e7e..6696a5445 100644
--- a/components/admin/__tests__/admin-shell.test.tsx
+++ b/components/admin/__tests__/admin-shell.test.tsx
@@ -37,10 +37,17 @@ describe('AdminShell', () => {
Element.prototype.scrollTo = () => {};
});
- it('does not server-render the phone layout, which desktop would show until hydration', () => {
+ // The server can't know the width: it draws the panel's skeleton, whose
+ // phone and desktop layouts CSS picks, rather than either real layout.
+ it('server-renders the panel skeleton, not a real layout', () => {
const html = renderToString(shell({ authenticated: false, isStalwartAutoLogin: false }));
- expect(html).not.toContain('back_to_mail');
- expect(html).not.toContain('admin_search');
+ const container = document.createElement('div');
+ container.innerHTML = html;
+ const region = container.querySelector('[data-boot-skeleton="admin"]');
+ expect(region).not.toBeNull();
+ expect(region!.querySelector('[role="status"]')?.textContent).toBe('common.loading');
+ expect(container.querySelectorAll('a[href], button, input')).toHaveLength(0);
+ expect(html).not.toContain(' = {
+ dashboard: LayoutDashboard,
+ settings: Server,
+ auth: Shield,
+ branding: Palette,
+ policy: Scale,
+ organisation: Building2,
+ 'org-signatures': PenLine,
+ 'org-templates': LayoutTemplate,
+ 'org-security': ShieldCheck,
+ 'org-sharing': Share2,
+ 'org-labels': Tag,
+ 'org-proofreading': SpellCheck,
+ 'org-calendars': CalendarDays,
+ 'org-notices': Bell,
+ 'org-devices': Smartphone,
+ plugins: Puzzle,
+ themes: SwatchBook,
+ marketplace: Store,
+ version: ArrowUpCircle,
+ telemetry: Activity,
+ monitoring: HeartRateMonitor,
+ logs: ScrollText,
+};
+
+/** In sidebar order; `top` has no heading. */
+export const ADMIN_GROUPS = ['top', 'organisation', 'extensions', 'system'] as const;
+
+export const ADMIN_GROUP_LABELS: Record = {
+ top: null,
+ organisation: 'Organisation',
+ extensions: 'Extensions',
+ system: 'System',
+};
diff --git a/components/admin/admin-shell.tsx b/components/admin/admin-shell.tsx
index 6a7dcb513..5343afe10 100644
--- a/components/admin/admin-shell.tsx
+++ b/components/admin/admin-shell.tsx
@@ -3,37 +3,7 @@
import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
-import {
- ArrowLeft,
- ArrowUpCircle,
- Activity,
- Bell,
- HeartRateMonitor,
- Building2,
- CalendarDays,
- ChevronRight,
- KeyRound,
- LayoutDashboard,
- LayoutTemplate,
- LogOut,
- Palette,
- PenLine,
- Puzzle,
- Scale,
- ScrollText,
- Search,
- Server,
- Share2,
- Shield,
- ShieldCheck,
- Smartphone,
- Store,
- SwatchBook,
- Tag,
- SpellCheck,
- X,
- type AppIcon,
-} from '@/components/icons';
+import { ArrowLeft, ChevronRight, KeyRound, LogOut, Search, Shield, X } from '@/components/icons';
import { Input } from '@/components/ui/input';
import { NavigationRail } from '@/components/layout/navigation-rail';
import { AboutFooter } from '@/components/settings/about-data-settings';
@@ -45,42 +15,13 @@ import { useUpdateStore, selectHasUpdate } from '@/stores/update-store';
import { useAdminUnsavedStore } from '@/stores/admin-unsaved-store';
import { apiFetch, getPathPrefix } from '@/lib/browser-navigation';
import { ADMIN_PAGES, adminPath, type AdminPageDef, type AdminPageId, type AdminSectionDef } from '@/lib/admin/admin-nav';
+import { AdminSessionLinksSkeleton, AdminSkeleton } from '@/components/boot-skeleton/admin-skeleton';
+import { useSkeletonLabels } from '@/components/boot-skeleton/use-skeleton-labels';
+import { ADMIN_GROUPS, ADMIN_GROUP_LABELS, ADMIN_PAGE_ICONS as PAGE_ICONS } from './admin-page-icons';
import { cn } from '@/lib/utils';
import { AdminLink } from './admin-link';
import { AdminShellContext } from './shell-context';
-const PAGE_ICONS: Record = {
- dashboard: LayoutDashboard,
- settings: Server,
- auth: Shield,
- branding: Palette,
- policy: Scale,
- organisation: Building2,
- 'org-signatures': PenLine,
- 'org-templates': LayoutTemplate,
- 'org-security': ShieldCheck,
- 'org-sharing': Share2,
- 'org-labels': Tag,
- 'org-proofreading': SpellCheck,
- 'org-calendars': CalendarDays,
- 'org-notices': Bell,
- 'org-devices': Smartphone,
- plugins: Puzzle,
- themes: SwatchBook,
- marketplace: Store,
- version: ArrowUpCircle,
- telemetry: Activity,
- monitoring: HeartRateMonitor,
- logs: ScrollText,
-};
-
-const GROUP_LABELS: Record = {
- top: null,
- organisation: 'Organisation',
- extensions: 'Extensions',
- system: 'System',
-};
-
interface AdminShellProps {
/** Whether the admin session is in place; the sidebar counts load then. */
authenticated: boolean;
@@ -109,6 +50,7 @@ export function AdminShell({ authenticated, isStalwartAutoLogin, configReadOnly,
const tSettings = useTranslations('settings');
const tSidebar = useTranslations('sidebar');
const location = useAdminLocation();
+ const { label: loadingLabel, labels: railLabels } = useSkeletonLabels();
const isDesktop = useIsDesktop();
// The server can't know the window width, so its HTML would be the phone
// layout, shown on desktop until hydration swaps it (the rail's Admin link
@@ -188,8 +130,8 @@ export function AdminShell({ authenticated, isStalwartAutoLogin, configReadOnly,
}, [trimmed]);
const groups = useMemo(() => (
- (['top', 'organisation', 'extensions', 'system'] as const)
- .map((group) => ({ group, label: GROUP_LABELS[group], items: matches.filter((m) => m.page.group === group) }))
+ ADMIN_GROUPS
+ .map((group) => ({ group, label: ADMIN_GROUP_LABELS[group], items: matches.filter((m) => m.page.group === group) }))
.filter((g) => g.items.length > 0)
), [matches]);
@@ -301,7 +243,19 @@ export function AdminShell({ authenticated, isStalwartAutoLogin, configReadOnly,
);
- if (!hydrated) return ;
+ // The server HTML and the hydration pass: the panel's skeleton, both
+ // layouts drawn and picked by CSS until the width is known.
+ if (!hydrated) {
+ return (
+
))}
{t('loading')}
page
'); }); // The shell's own names come from the translations, and the tab says @@ -59,7 +66,10 @@ describe('AdminShell', () => { it('hides the session links until the check says which kind of admin this is', () => { const { rerender } = render(shell({ authenticated: false, isStalwartAutoLogin: false })); - expect(screen.queryByText('Sign out of admin')).toBeNull(); + // Only their shapes hold the place while the check runs. + expect(screen.queryByRole('button', { name: 'Sign out of admin' })).toBeNull(); + expect(screen.queryByRole('link', { name: 'Change password' })).toBeNull(); + expect(screen.getByText('Sign out of admin').closest('[aria-hidden="true"]')).not.toBeNull(); rerender(shell({ authenticated: true, isStalwartAutoLogin: true })); expect(screen.queryByText('Sign out of admin')).toBeNull(); rerender(shell({ authenticated: true, isStalwartAutoLogin: false })); diff --git a/components/admin/admin-page-icons.ts b/components/admin/admin-page-icons.ts new file mode 100644 index 000000000..e8d6903e9 --- /dev/null +++ b/components/admin/admin-page-icons.ts @@ -0,0 +1,66 @@ +/** + * The admin sidebar's icons and group headings. A plain module (no + * "use client"), so the admin shell and its page skeleton, which the server + * renders, draw the same list. + */ +import { + Activity, + ArrowUpCircle, + Bell, + Building2, + CalendarDays, + HeartRateMonitor, + LayoutDashboard, + LayoutTemplate, + Palette, + PenLine, + Puzzle, + Scale, + ScrollText, + Server, + Share2, + Shield, + ShieldCheck, + Smartphone, + Store, + SwatchBook, + Tag, + SpellCheck, + type AppIcon, +} from '@/components/icons'; +import type { AdminPageDef, AdminPageId } from '@/lib/admin/admin-nav'; + +export const ADMIN_PAGE_ICONS: Record{sessionLinks(true)}
}
+ {(showSessionLinks || !authenticated) && (
+
+ {showSessionLinks ? sessionLinks(true) :
+ )}
- {showSessionLinks &&
diff --git a/components/boot-skeleton/__tests__/auth-skeletons.test.tsx b/components/boot-skeleton/__tests__/auth-skeletons.test.tsx
new file mode 100644
index 000000000..fbea8e9e9
--- /dev/null
+++ b/components/boot-skeleton/__tests__/auth-skeletons.test.tsx
@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { RouteSkeleton } from '../route-skeleton';
+import { BottomBarSkeleton, RailSkeleton } from '../shell';
+import { AdminSkeleton } from '../admin-skeleton';
+import type { BootSurface } from '@/lib/boot-skeleton/surfaces';
+
+function dom(html: string) {
+ const container = document.createElement('div');
+ container.innerHTML = html;
+ return container;
+}
+
+const css = readFileSync(join(process.cwd(), 'app/boot-skeleton.css'), 'utf8');
+
+// A signed-in page drawn for a visitor with nothing stored: the boot script
+// sets data-boot-auth="out", and the CSS swaps the app's frame for the
+// login card, the page the app is about to send them to.
+describe('signed-in pages for a signed-out visitor', () => {
+ it('boot-out matches data-boot-auth="out"', () => {
+ expect(css).toMatch(/@custom-variant boot-out \(&:where\(\[data-boot-auth="out"\] \*\)\);/);
+ });
+
+ it.each{sessionLinks(false)}
}
+ {/* Held in place while the session is checked, as the boot skeleton draws them. */}
+ {(showSessionLinks || !authenticated) && (
+
+ {showSessionLinks ? sessionLinks(false) :
+ )}
+
+
+ );
+}
+
+/**
+ * Placeholders for a page's sections (SettingsSection: a heading and rows of
+ * settings), below its header: the pages show it while they fetch, so the
+ * boot skeleton's shapes stay where they are. `status` is announced.
+ */
+export function AdminBodySkeleton({ status }: { status?: string }) {
+ return (
+
+ {status ? {status} : null}
+
+
+ );
+}
+
+export interface AdminSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /**
+ * The open page, as the shell reads it from the URL: null for /admin.
+ * Leave it out where the URL isn't the admin's own (a connector link):
+ * then the boot script's data-boot-pane picks the phone list or a page.
+ */
+ page?: AdminPageId | null;
+ /** settings.back_to_mail, for the box above the page list. */
+ backLabel?: string;
+ /** shell.admin_search, the search field's placeholder. */
+ searchLabel?: string;
+ /** The phone bottom bar's labels. */
+ labels?: RailLabels;
+ className?: string;
+}
+
+export function AdminSkeleton({ label, page, backLabel, searchLabel, labels, className }: AdminSkeletonProps) {
+ const active: AdminPageId | null = page === undefined ? null : page ?? "dashboard";
+ const def = pageDef(page);
+ // Phone: the list at /admin, the page below it.
+ const showIndex = page === undefined ? "boot-open:hidden" : page === null ? "" : "hidden";
+ const showPage = page === undefined ? "hidden boot-open:block" : page === null ? "hidden" : "";
+
+ return (
+
+
+
+ {/* Phone and tablet */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* The sidebar's "+" stands in for this one while the sidebar shows. */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {views ? MODES.map((v) => {views[v]}) :
+
+
+
+
+
+ );
+}
+
+/** The inline sidebar of a desktop: header, mini month and calendar list. */
+function SidebarSkeleton({ text }: { text?: CalendarSkeletonText }) {
+ const weekNumberCell = ;
+ const columns = "grid grid-cols-7 boot-cal-weeknums:grid-cols-[1.25rem_repeat(7,minmax(0,1fr))]";
+ const chevron = "flex items-center justify-center h-8 w-8 [&_svg]:size-4";
+ return (
+
+
+
+
+
+
+
+
+ {/* Below 400px the title takes a line of its own. */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {MODES.map((v) => (
+
+ {views ? views[v] :
+
+ {/* CalendarSidebarHeader */}
+
+ );
+}
+
+/**
+ * The hour labels down the gutter, one per hour row. Each sits centred on
+ * its row's top line; a range that starts later than midnight labels its
+ * first hour inside the row instead (calendar-week-view.tsx). The gutter
+ * stops short of the last line, which has no label.
+ */
+function HourGutter({ className, labelW }: { className: string; labelW: string }) {
+ return (
+
+ {text?.title ? (
+ {text.title}
+ ) : (
+
+
+ {/* MiniCalendar */}
+
+
+
+ {/* CalendarSidebarPanel: one section of calendars. */}
+
+
+
+
+ {weekNumberCell}
+ {repeat(7, () => (
+
+ {/* 4 to 6 weeks: as many as the month has (--boot-cal-mini-rows). */}
+
+ {repeat(6, () => (
+ <>
+ {weekNumberCell}
+ {repeat(7, () =>
+
+ {/* The tasks entry, when tasks are on. */}
+
+
+
+ {/* A section header, its add button taking the row to 32px. */}
+
+
+ {repeat(4, (i) => (
+
+
+ ))}
+
+ {repeat(24, (i) => (
+
+ );
+}
+
+/** The all-hours toggle in the gutter's header cell, while the hours are limited. */
+function HoursToggle({ className }: { className: string }) {
+ return (
+
+
+ ))}
+
+
+
+ );
+}
+
+/** The weekday and date of a column header. */
+function DayHead({ className, date }: { className?: string; date: string }) {
+ return (
+ <>
+
+ {label ? {label} : null}
+ {view
+ ? VIEWS[view]({ className: "flex", text })
+ : (Object.keys(VIEWS) as CalendarViewMode[]).map((v) => {
+ const View = VIEWS[v];
+ return
+ );
+}
+
+/**
+ * The calendar page's own content: everything in the row next to the rail.
+ * `embedded` is the variant drawn inside a Pro pane (useIsEmbedded()), which
+ * has no rail, no Mountain View shell and fills its pane (h-full). Pro runs
+ * on desktops only, so the breakpoints pick the desktop layout there too.
+ */
+export function CalendarSkeletonBody({ embedded = false, text }: { embedded?: boolean; text?: CalendarSkeletonText }) {
+ return (
+
+ );
+}
+
+/** Skeleton of the calendar page. */
+export function CalendarSkeleton({ label, labels, text }: CalendarSkeletonProps) {
+ return (
+
+
+ );
+}
+
+/** The list's toolbar (contact-list.tsx): menu on narrow panes, select, search, print, phone actions. */
+function ContactListToolbarSkeleton({ embedded }: { embedded: boolean }) {
+ return (
+
+
+
+ {/* All contacts: always first, and selected on arrival. */}
+
+
+
+
+
+
+
+ {repeat(3, (i) => (
+
+
+ ))}
+
+
+ );
+}
+
+/** ContactDetail with nothing open (contact-detail.tsx). */
+function EmptyDetailSkeleton() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+/**
+ * ContactForm for a new contact (contact-form.tsx): its title bar, the photo
+ * row, the first fields and the Cancel/Save footer. /contacts/new opens it at
+ * once, without waiting for any data.
+ */
+function NewContactFormSkeleton() {
+ return (
+
+
+ );
+}
+
+/**
+ * The contacts page's own content: everything in the row next to the rail.
+ * `embedded` is the variant drawn inside a Pro pane (useIsEmbedded()), which
+ * has no rail, no Mountain View shell and fills its pane (h-full).
+ *
+ * Desktop: sidebar, list and the empty detail. Tablet: the sidebar is a
+ * closed drawer and the list toolbar gets its Menu button. Phone: the list
+ * with its create button, or, with a contact (data-boot-pane="detail") or the
+ * new-contact form ("create") in the URL, the detail with its back bar.
+ */
+export function ContactsSkeletonBody({ embedded = false }: { embedded?: boolean }) {
+ return (
+
+ );
+}
+
+/** Skeleton of the contacts page. */
+export function ContactsSkeleton({ label, labels }: ContactsSkeletonProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+}
+
+/**
+ * FilesHeader (files-header.tsx): the drawer button on narrow panes, the
+ * breadcrumb, then search (an icon on a phone), sort, the list/grid switch,
+ * refresh (not on a phone), the details toggle and the phone actions. The
+ * Pro account picker shows the breadcrumb alone.
+ */
+function FilesHeaderSkeleton({ picker }: { picker: boolean }) {
+ const on = "bg-primary/10 text-primary";
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {picker ? null :
+ );
+}
+
+/** FileDetailsPanel with nothing selected: the open folder's summary. */
+function FileDetailsSkeleton() {
+ return (
+
+ );
+}
+
+/** The Pro account picker (FileBrowser accountPickerMode): a heading and account cards. */
+function AccountPickerSkeleton() {
+ return (
+
+ );
+}
+
+/**
+ * The files page's own content: everything in the row next to the rail.
+ * `embedded` is the variant drawn inside a Pro pane (useIsEmbedded()), which
+ * has no rail, no Mountain View shell and fills its pane (h-full); there the
+ * page opens on the account picker, without a sidebar or tools.
+ *
+ * Desktop: sidebar, header, listing and, when left open, the details panel.
+ * Below 64rem the sidebar is a closed drawer, the header gets its Menu button,
+ * the details panel lies over the listing and a create button floats.
+ */
+export function FilesSkeletonBody({ embedded = false }: { embedded?: boolean }) {
+ return (
+
+ );
+}
+
+/** Skeleton of the files page. */
+export function FilesSkeleton({ label, labels }: FilesSkeletonProps) {
+ return (
+
+
+
+ {picker ? null : (
+
+
+ )}
+
+ {label ? {label} : null}
+ {children}
+
+ );
+}
+
+interface ShapeProps {
+ className?: string;
+ /** Width as any CSS length, e.g. "60%" or "8rem". */
+ w?: string;
+ style?: CSSProperties;
+}
+
+/** A placeholder for a line of text: give it a height (h-3, h-4) and a width. */
+export function Bar({ className, w, style }: ShapeProps) {
+ return (
+
+ );
+}
+
+/** A placeholder for an avatar or a round button: give it a size (w-8 h-8). */
+export function Circle({ className, style }: Omit
+
+ );
+}
+
+export interface LoginSkeletonProps {
+ /** common.loading */
+ label?: string;
+ /**
+ * Draw the accessibility button the login page has in its corner. The
+ * login page itself renders the real one (AccessibilityQuickPanelHost);
+ * a signed-in page drawing the card for a signed-out visitor doesn't.
+ */
+ accessibilityButton?: boolean;
+ className?: string;
+}
+
+export function LoginSkeleton({ label, accessibilityButton = false, className }: LoginSkeletonProps) {
+ return (
+
+
+
+
+
+ {/* The version line under the card. */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header: collapse button and account switcher. Hidden in a Pro pane and under Mountain View. */}
+ {!embedded && (
+
+ );
+}
+
+// --- Message list ------------------------------------------------------------
+
+/** How the list draws its rows (useListRowShape, plus Mountain View's own rows). */
+export type MailRowShape = "stacked" | "one-line" | "mv";
+
+interface RowOptions {
+ /** Live: the density setting. Left out, the boot attributes decide by CSS. */
+ density?: Density;
+ /** Live: whether rows show a preview (showPreview). */
+ preview?: boolean;
+}
+
+/** Classes for the avatar, or null where the density has none. */
+function avatarClass(o: RowOptions): string | null {
+ if (o.density === undefined) return "boot-density-xc:hidden";
+ return o.density === "extra-compact" ? null : "";
+}
+
+/** Classes for the two preview lines, or null where the row has none. */
+function previewClass(o: RowOptions): string | null {
+ if (o.density === undefined) return "boot-dense:hidden boot-no-preview:hidden";
+ return o.preview === false || o.density === "compact" || o.density === "extra-compact" ? null : "";
+}
+
+/*
+ * The rows below are drawn dozens of times, so they use the short classes in
+ * app/boot-skeleton.css (mail section) for what every row repeats: sk-mrow
+ * (the row and its rule), sk-mcell (the cell: the density's padding and gap,
+ * and its minimum height), sk-mav (the avatar's column) and sk-ml (a line of
+ * text, with its bar).
+ */
+
+/** One line of row text, as tall as the real line; `w` is the bar's width. */
+function L({ className, w }: { className?: string; w: string }) {
+ return (
+
+
+
+ );
+}
+
+/** A stacked row (ThreadListItem on phones and in the split list). */
+function StackedRow({ i, o }: { i: number; o: RowOptions }) {
+ const avatar = avatarClass(o);
+ const preview = previewClass(o);
+ return (
+
+
+ )}
+ {/* Mountain View: the Compose button heads the navigation. */}
+ {!embedded && (
+
+
+
+
+
+
+ )}
+
+ {/* Mountain View lists the folders without a heading. */}
+
+
+
+ );
+}
+
+/** A one-line row (the focused list and the bottom reading pane on a desktop). */
+function OneLineRow({ i, o }: { i: number; o: RowOptions }) {
+ const avatar = avatarClass(o);
+ return (
+
+ {avatar !== null && (
+
+
+
+ )}
+
+
+
+
+
+ );
+}
+
+/** Mountain View's row on a tablet or desktop: check box and star, then one 40px line. */
+function MvRow({ i }: { i: number }) {
+ return (
+
+ {avatar !== null && (
+
+
+
+ )}
+
+
+
+
+ );
+}
+
+/** Enough rows of each shape to fill a tall viewport. */
+const ROWS: Record
+ {/* The check box and the star, 26px each (an 18px icon in p-1). */}
+
+
+
+
+
+
+
+
+ );
+}
+
+/**
+ * The phone and tablet header (MobileHeader): menu, the search pill on
+ * phones or the folder name on tablets, the ⋮ menu and the account.
+ */
+function MobileHeaderSkeleton() {
+ return (
+
+
+ {/* Mountain View's list toolbar (MvListToolbar). */}
+ {!embedded && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+// --- Reading pane --------------------------------------------------------------
+
+/**
+ * The viewer while a message loads (EmailViewer's loading state draws this
+ * same component): the toolbar, the subject block and the sender block of the
+ * default reader, then the message body's tinted sheet.
+ */
+/**
+ * The reader's top toolbar while a message loads. The loaded reader lifts its
+ * toolbar above the message row on a tablet or desktop (EmailViewer's
+ * `liftToolbar`); its loading state draws this there too, so the row below
+ * doesn't move when the message arrives.
+ */
+export function MailMessageToolbarSkeleton() {
+ const button = "h-8 w-20 rounded-md";
+ return (
+
+
+ );
+}
+
+export function MailMessageSkeleton({ className, toolbar = true }: { className?: string; toolbar?: boolean }) {
+ return (
+
+ );
+}
+
+/**
+ * A conversation on a phone while it loads (ThreadConversationView): the
+ * header with back, subject and count, then the message cards.
+ */
+export function MailConversationSkeleton({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+/** The empty reading pane: nothing open (EmailViewer without an email). */
+function EmptyReaderSkeleton({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+/** The reader's frame (EmailViewer's shell()). */
+function ReaderFrame({ children }: { children: ReactNode }) {
+ return (
+
+ {/* Phones: back, then icon-over-label actions. */}
+
+
+
+
+
+
+
+ {/* Back to the list, where the reader has the list's place (tablet, focus). */}
+
+
+
+
+
+
+ );
+}
+
+/** Mountain View's side panel rail (MvSidePanel): calendar and contacts. */
+function MvSidePanelSkeleton() {
+ return (
+
+ );
+}
+
+// --- The page ------------------------------------------------------------------
+
+/**
+ * The mail page's own content: everything in the row next to the rail.
+ * `embedded` is the variant drawn inside a Pro pane (useIsEmbedded()), which
+ * has no rail, no Mountain View shell and fills its pane (h-full).
+ */
+export function MailSkeletonBody({ embedded = false }: { embedded?: boolean }) {
+ return (
+ <>
+ {/* Folders: in the flow on a desktop, a closed drawer below that. */}
+
+ {/* AppMain. Under Mountain View the rounded card inset from the canvas. */}
+ {children}
+
+
+ {!embedded &&
+ {/* The message list. */}
+
+
+ {!embedded &&
+ {/* The reading pane. */}
+
+
+ {/* The round Compose button (Mountain View's sits in its navigation). */}
+
+
+
+
+
+
+
+
+ );
+}
+
+/**
+ * The Pro frame alone. AppShellSkeleton draws it in place of a standard
+ * page's frame when Pro is about to take that page over; `data-pro-shell`
+ * keeps a skeleton inside the real Pro shell from doing that again.
+ */
+export function ProFrameSkeleton({
+ label,
+ className,
+ surface,
+}: ProSkeletonProps & {
+ className?: string;
+ /**
+ * Set when this frame stands in for a standard page Pro is about to take
+ * over. Its panes are then drawn empty (tab strips only): the frame doesn't
+ * move on the hop to /pro, and the page's body, which would otherwise be in
+ * every standard page's HTML a second and third time for the few who use
+ * Pro, fills in once /pro has loaded. /pro's own HTML draws the bodies.
+ */
+ surface?: BootSurface;
+}) {
+ const bodies = surface ? [] : BODIES;
+ return (
+
+ {bodies.map((surface) => (
+
+
+
+ ))}
+ {/* A message, folder, search or compose tab: no page skeleton of its own. */}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+/** The desktop nav (settings-app.tsx, "Desktop layout"). */
+function SettingsNav({ embedded }: { embedded: boolean }) {
+ let row = 0;
+ return (
+
+ );
+}
+
+/** A settings page: the section jump row, then sections of rows (settings-section.tsx). */
+function SettingsPage({ sections }: { sections: number }) {
+ return (
+ <>
+ {/* The section jump row; none on a page with one section, two lines on
+ Accessibility (app/boot-skeleton.css). */}
+
+ {repeat(4, (i) => (
+
+
+ {repeat(sections, (s) => (
+
+
+ );
+}
+
+/** A phone header row: back arrow, title, then the ⋮ menu and the avatar (PhoneHeaderActions). */
+function PhoneHeader({ list }: { list: boolean }) {
+ return (
+
+
+ ))}
+
+
+
+ {repeat(3, (r) => (
+
+
+
+ ))}
+
+
+
+
+
+ );
+}
+
+/** The phone and tablet list of pages (settings-app.tsx, "Mobile layout"). */
+function PhoneList() {
+ let row = 0;
+ return (
+
+ );
+}
+
+/** One settings page on the phone or tablet, when the URL names one. */
+function PhonePage() {
+ return (
+
+ );
+}
+
+/**
+ * The settings page's own content: everything in the row next to the rail.
+ * `embedded` is the variant drawn inside a Pro pane (useIsEmbedded()), which
+ * has no rail, no Mountain View shell and fills its pane (h-full); it has no
+ * back-to-mail box either, and the Pro shell is desktop only.
+ */
+export function SettingsSkeletonBody({ embedded = false }: { embedded?: boolean }) {
+ return (
+
+
+ );
+}
+
+/** Skeleton of the settings page. */
+export function SettingsSkeleton({ label, labels }: SettingsSkeletonProps) {
+ return (
+
+
+ {embedded ? null : (
+
+
+ )}
+
+
+ {(PRO_SURFACES as readonly string[]).includes(surface) ? (
+
+
+ ) : null}
+
+
+
{taskStore.error === TASKS_LOAD_ERROR && (
@@ -1981,29 +2034,21 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
taskIds={listedTaskIds}
compact={isMobile}
/>
- {
- // Into a calendar that takes it: the default one, else the
- // first the user may write to.
- const target = writableTaskCalendars.find((c) => c.isDefault) ?? writableTaskCalendars[0];
- if (!client || !target) {
- toast.error(t("notifications.task_save_error"));
- return;
- }
- taskStore.createTask(client, { "@type": "Task", title, progress: "needs-action", calendarIds: { [target.id]: true } })
- .then((created) => { if (created) toast.success(t("notifications.task_created")); })
- .catch((error: unknown) => toast.error(describeError(error, t("notifications.task_save_error"))));
- }}
- />
+ {/* A plugin may draw the list itself (the calendar-task-view
+ slot), with Bulwark's list back while its frame is not
+ drawn; the toolbar above stays Bulwark's. */}
+ {pluginTaskView ? (
+
);
+ }
}
})();
@@ -2013,10 +2058,11 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
-
+ {t("status.loading_events")}
)}
- {Array.from({ length: 8 }, (_, i) => (
-
+ // The rows the page skeleton drew, at the same density.
+
-
-
- ))}
-
-
-
-
- --
')).toBe(true); + }); + + it('leaves an empty line above a delimiter that arrives with late identities', async () => { + useSettingsStore.setState({ signaturePosition: 'above_quote' }); + setIdentities([]); + const props = { mode: 'reply' as const, replyTo: TO_ME }; + const { rerender } = render(Your apartment
Cheers, Me
' }], + defaultIdentityId: 'id-me', + }; + const hook = (sel?: (s: typeof state) => unknown) => + typeof sel === 'function' ? sel(state) : state; + hook.getState = () => state; + hook.setState = (p: Partial${replyHeader(replyTo.quoteHeaderHtml)}${island}`; + return `${head}
${replyHeader(replyTo.quoteHeaderHtml)}${island}`; } const escaped = replyTo.body ? replyTo.body.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
') @@ -813,7 +824,7 @@ export function EmailComposer({ const bodyHtml = wrap ? `
${escaped}` : escaped; - return `${prefix}${signatureBlock}
${replyHeader(replyTo.quoteHeaderHtml)}${bodyHtml}`; + return `${head}
${replyHeader(replyTo.quoteHeaderHtml)}${bodyHtml}`; } // Build quoted content as HTML @@ -831,15 +842,15 @@ export function EmailComposer({ rewriteCidImagesForEditor(sanitizeEmailHtml(replyTo.htmlBody)), { remoteAllowed: quoteRemoteAllowed }, ); - return `${prefix}${signatureBlock}
${replyHeader(`
${quoteHeader}
`)}${island}`;
+ return `${head}${replyHeader(`
${quoteHeader}
`)}${island}`;
}
if (replyTo.body) {
const escapedOriginal = replyTo.body.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, ''); if (mode === 'forward') { - return `${prefix}${signatureBlock}
${tQuote('forwarded_separator')}
${tQuote('from_label')}: ${escapeHtml(fromStrFull)}
${tQuote('date_label')}: ${escapeHtml(date)}
${tQuote('subject_label')}: ${escapeHtml(replyTo.subject || '')}
${escapedOriginal}`; + return `${head}
${tQuote('forwarded_separator')}
${tQuote('from_label')}: ${escapeHtml(fromStrFull)}
${tQuote('date_label')}: ${escapeHtml(date)}
${tQuote('subject_label')}: ${escapeHtml(replyTo.subject || '')}
${escapedOriginal}`; } else if (mode === 'reply' || mode === 'replyAll') { - return `${prefix}${signatureBlock}
${replyHeader(`
${tQuote('reply_line', { date: escapeHtml(date), from: escapeHtml(fromStrFull) })}
${escapedOriginal}`; + return `${head}
${replyHeader(`
${tQuote('reply_line', { date: escapeHtml(date), from: escapeHtml(fromStrFull) })}
${escapedOriginal}`; } } return prefix; @@ -1326,6 +1337,9 @@ export function EmailComposer({ const isReplyLike = mode === 'reply' || mode === 'replyAll' || mode === 'forward'; if (!isReplyLike && mode !== 'compose') return; if (isReplyLike && signaturePosition !== 'above_quote') return; + // With automatic insertion off the body never got a signature spliced + // in, so there is nothing to swap. + if (!autoSignatureEnabled) return; if (plainTextMode) { // A new plain-text message carries the signature at the end of the @@ -1367,7 +1381,7 @@ export function EmailComposer({ // would re-run on unrelated identity-field changes and re-splice the // signature into the live editor. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [signatureIdentity?.id, signatureContent, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode, pluginSignatureRevision]); + }, [signatureIdentity?.id, signatureContent, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode, pluginSignatureRevision, autoSignatureEnabled]); const openScheduleDialog = useCallback(() => { setShowScheduleDialog(true); @@ -2112,6 +2126,40 @@ export function EmailComposer({ } }; + const handleImageUpload = useCallback(async ( + file: File, + ): Promise<{ src: string; cid: string } | null> => { + if (!client) return null; + try { + const readAsDataUrl = new Promise
--
` : `
`; if (signatureIdentity?.htmlSignature) { return `${sep}${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}`; @@ -3656,8 +3677,8 @@ export function EmailComposer({ // In plain text mode, send text/plain only (no HTML body) const signatureOpts = { separator: signatureSeparatorEnabled }; const builtTextBody = plainTextMode - ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts)) - : (signatureAlreadyInBody ? htmlToPlainText(body, imageAltText) : appendPlainTextSignature(htmlToPlainText(body, imageAltText), signatureIdentity, signatureOpts)); + ? (signatureAlreadyInBody || !autoSignatureEnabled ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts)) + : (signatureAlreadyInBody || !autoSignatureEnabled ? htmlToPlainText(body, imageAltText) : appendPlainTextSignature(htmlToPlainText(body, imageAltText), signatureIdentity, signatureOpts)); // Before any blobId is read: forwarded parts may still sit on the account // that holds the original message. @@ -4834,8 +4855,10 @@ export function EmailComposer({ {/* Hide the visual signature preview when the signature has already been embedded into the body (compose, above-quote replies, re-opened - drafts) - it would otherwise read as a second signature. */} - {signatureAlreadyInBody ? null + drafts) - it would otherwise read as a second signature. Also when + automatic insertion is off: nothing will be appended at send time, + so a preview would promise a signature that never goes out. */} + {signatureAlreadyInBody || !autoSignatureEnabled ? null : plainTextMode ? ( getPlainTextSignature(signatureIdentity) ? (
diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx
index 05def799e..bebd4f42c 100644
--- a/components/email/email-list.tsx
+++ b/components/email/email-list.tsx
@@ -29,6 +29,8 @@ import { useShallow } from "zustand/react/shallow";
import { useAuthStore } from "@/stores/auth-store";
import { useSettingsStore } from "@/stores/settings-store";
import { useListRowShape } from "@/hooks/use-list-row-shape";
+import { MailListRowsSkeleton, type MailRowShape } from "@/components/boot-skeleton/mail-skeleton";
+import type { Density } from "@/lib/density";
import { useUIStore } from "@/stores/ui-store";
import { useMessageListTabsStore } from "@/stores/message-list-tabs-store";
import { emailKeyFor, groupEmailsByThread, sortThreadGroups, threadKeyFor, getEmailTagIds } from "@/lib/thread-utils";
@@ -124,27 +126,11 @@ const BATCH_TOOLBAR_WIDE = 480;
// Declared out here so re-renders of the list keep the same element. Inside
// EmailList every render made a new component, which remounted the skeleton
-// and replayed its fade-in each time the store changed while a list loaded.
-function LoadingSkeleton() {
- return (
-
- {[...Array(8)].map((_, i) => (
-
- );
+// each time the store changed while a list loaded.
+function LoadingSkeleton({ shape, density, preview }: { shape: MailRowShape; density: Density; preview: boolean }) {
+ // The page skeleton's rows (components/boot-skeleton), so the list the app
+ // draws while it loads is the one the server painted before it started.
+ return
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
+
) : emails.length === 0 && !isLoading ? (
{/* R9: an empty search offers Clear search; Drafts, which the
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index c5b85d991..8c3167aa9 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -117,6 +117,7 @@ import {
Pencil,
Paperclip,
} from "@/components/icons";
+import { MailMessageSkeleton, MailMessageToolbarSkeleton } from "@/components/boot-skeleton/mail-skeleton";
import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/navigation";
import type { Attachment as PostalMimeAttachment } from 'postal-mime';
@@ -3929,12 +3930,12 @@ ${printWatermark ? printWatermark.html : ''}
)}
);
- const shell = (content: React.ReactNode) => (
+ const shell = (content: React.ReactNode, top: React.ReactNode = null) => (
- {null}
+ {top}
setSearchQuery("")} />;
if (showEmpty && inTrash) {
return
{content}
{sidePanel}
@@ -3943,54 +3944,14 @@ ${printWatermark ? printWatermark.html : ''}
);
- // Show loading skeleton while email is being fetched
+ // Show loading skeleton while email is being fetched: the page skeleton's
+ // message pane, so a linked message keeps the shape it had before the app
+ // started.
+ // Its toolbar sits where the loaded reader puts its own: above the message
+ // row when lifted, so the row doesn't move when the message arrives.
if (isLoading && !email) {
- return shell(
-
- {/* Loading Header Skeleton - gentler animation */}
-
- );
+ const lifted = toolbarPosition === 'top' && liftToolbar;
+ return shell(
-
-
- {/* Loading Content Skeleton */}
-
-
-
- {/* Loading Sender Info Skeleton */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {t("threads.loading")}
+
+ );
}
return (
diff --git a/components/files/__tests__/file-browser-shared-folders.test.tsx b/components/files/__tests__/file-browser-shared-folders.test.tsx
index baa812746..14a53e064 100644
--- a/components/files/__tests__/file-browser-shared-folders.test.tsx
+++ b/components/files/__tests__/file-browser-shared-folders.test.tsx
@@ -143,6 +143,19 @@ describe('FileBrowser', () => {
act(() => { useFileStore.setState({ client: null, sharedRoots: [], allFolders: [] }); });
});
+ it('draws the loading listing in the list view, as the page skeleton did', () => {
+ renderBrowser({ resources: [], hasListed: false });
+ expect(screen.getByTestId('files-list-skeleton')).toBeInTheDocument();
+ expect(screen.queryByTestId('files-grid-skeleton')).toBeNull();
+ });
+
+ it('draws the loading listing as tiles when the grid view is picked', () => {
+ act(() => { useSettingsStore.setState({ filesSettings: { ...DEFAULT_FILES_SETTINGS, defaultViewMode: 'grid' } }); });
+ renderBrowser({ resources: [], hasListed: false });
+ expect(screen.getByTestId('files-grid-skeleton')).toBeInTheDocument();
+ expect(screen.queryByTestId('files-list-skeleton')).toBeNull();
+ });
+
it('lists folders shared with the user at the root and in the sidebar (#1181)', async () => {
const { onNavigate } = renderBrowser();
await screen.findAllByText('Team');
diff --git a/components/files/file-browser.tsx b/components/files/file-browser.tsx
index 8165070cd..e1f272ac1 100644
--- a/components/files/file-browser.tsx
+++ b/components/files/file-browser.tsx
@@ -42,6 +42,7 @@ import type { FileNodeRights } from "@/lib/jmap/types";
import type { FileResourceView } from "@/lib/plugin-types";
import { isAppShortcutBlocked, isArrowKeyWidgetTarget } from "@/lib/keyboard";
import { isSingleKeyShortcutOff } from "@/lib/single-key-shortcuts";
+import { FilesListingSkeleton } from "@/components/boot-skeleton/files-skeleton";
const NO_FORMATS: string[] = [];
@@ -1079,7 +1080,7 @@ export function FileBrowser({
);
}
// Until the first listing is in, an empty list means "not loaded yet".
- if ((isLoading || !hasListed) && resources.length === 0) return
-
- {Array.from({ length: 7 }, (_, i) => (
-
- );
-}
-
/** Plugin entries at the end of a file's menu, after a separator when there are any. */
function FilePluginMenuEntries({ files, mimeType, onRan }: { files: FileResourceView[]; mimeType?: string; onRan: () => void }) {
const hasActions = usePluginActions("file-actions", { mimeType }).length > 0;
diff --git a/components/files/file-list-layout.ts b/components/files/file-list-layout.ts
new file mode 100644
index 000000000..f02e6e478
--- /dev/null
+++ b/components/files/file-list-layout.ts
@@ -0,0 +1,8 @@
+/**
+ * The file list's columns: select, name, then modified (from md) and size
+ * (from sm), then the row actions. A plain module, so the page skeleton
+ * (components/boot-skeleton/files-skeleton.tsx) lays its rows out on the
+ * same grid as FileListView without importing a client component.
+ */
+export const FILE_LIST_COLUMNS =
+ "grid grid-cols-[auto_minmax(0,1fr)_auto] sm:grid-cols-[auto_minmax(0,1fr)_5.5rem_auto] md:grid-cols-[auto_minmax(0,1fr)_9rem_5.5rem_auto] items-center gap-x-3";
diff --git a/components/files/file-views.tsx b/components/files/file-views.tsx
index 51fdb6c98..11a26656c 100644
--- a/components/files/file-views.tsx
+++ b/components/files/file-views.tsx
@@ -12,6 +12,7 @@ import {
} from "@/components/files/file-item-parts";
import type { SortDir, SortKey } from "@/components/files/files-header";
import { TOUCH_HIT_AREA } from "@/components/ui/button";
+import { FILE_LIST_COLUMNS } from "./file-list-layout";
export interface FileItemHandlers {
/** Selection click (plain, Ctrl/Cmd, Shift) on the item body. */
@@ -147,7 +148,7 @@ function SortHeader({ label, column, sortKey, sortDir, onSort, className }: {
);
}
-const LIST_COLUMNS = "grid grid-cols-[auto_minmax(0,1fr)_auto] sm:grid-cols-[auto_minmax(0,1fr)_5.5rem_auto] md:grid-cols-[auto_minmax(0,1fr)_9rem_5.5rem_auto] items-center gap-x-3";
+const LIST_COLUMNS = FILE_LIST_COLUMNS;
export function FileListView({
resources, selected, focusedName, tabStopName, dropTarget, cutNames, starredPaths, pathOf, touch, iconOptions, getImageUrl, handlers,
diff --git a/components/files/files-app.tsx b/components/files/files-app.tsx
index bb734af3e..0942d9f7b 100644
--- a/components/files/files-app.tsx
+++ b/components/files/files-app.tsx
@@ -43,6 +43,8 @@ import { useLiteLinkSegments } from "@/hooks/use-lite-link-segments";
import { useDocumentTitle } from "@/hooks/use-document-title";
import { MvTopBar } from "@/components/layout/mv-top-bar";
import { useMountainViewShell } from "@/hooks/use-mountain-view-shell";
+import { FilesSkeleton, FilesSkeletonBody } from "@/components/boot-skeleton/files-skeleton";
+import { useSkeletonLabels } from "@/components/boot-skeleton/use-skeleton-labels";
export interface FilesAppProps {
/** Path segments after `/files` - the folder path, one segment per level. */
@@ -53,6 +55,7 @@ export function FilesApp({ linkSegments: routeSegments }: FilesAppProps = {}) {
// Static Lite build: the route params are empty, read the link from the URL.
const linkSegments = useLiteLinkSegments('files', routeSegments);
const t = useTranslations("files");
+ const skeleton = useSkeletonLabels();
const tSidebar = useTranslations("sidebar");
const tShell = useTranslations("shell");
useDocumentTitle(tSidebar("files"));
@@ -802,7 +805,12 @@ export function FilesApp({ linkSegments: routeSegments }: FilesAppProps = {}) {
useFileStore.setState({ supportsFiles: null });
}, [getClientForAccount]);
- if (!isAuthenticated) return null;
+ // Until the session is restored: the page skeleton the server drew.
+ if (!isAuthenticated) {
+ return isEmbedded
+ ?
-
-
-
-
- ))}
-
diff --git a/components/layout/__tests__/sidebar-row-click-area.test.tsx b/components/layout/__tests__/sidebar-row-click-area.test.tsx
new file mode 100644
index 000000000..b09e4363b
--- /dev/null
+++ b/components/layout/__tests__/sidebar-row-click-area.test.tsx
@@ -0,0 +1,85 @@
+import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import type { Mailbox } from '@/lib/jmap/types';
+
+// A folder row opens its folder wherever it is clicked, not only on the
+// button inside it. Mountain View draws a 32px pill around a ~20px button,
+// and clicks on the pill's padding, the chevron slot or the count did
+// nothing (#1501). The row's own controls keep their click.
+
+vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
+vi.mock('@/components/tour/tour-provider', () => ({
+ useTour: () => ({ startTour: vi.fn(), resetTourCompletion: vi.fn(), activeTour: null, endTour: vi.fn(), registerStep: vi.fn() }),
+}));
+vi.mock('@/contexts/drag-drop-context', () => ({
+ useDragDropContext: () => ({ isDragging: false }),
+}));
+vi.mock('@/hooks/use-mailbox-drop', () => ({
+ useMailboxDrop: () => ({ dropHandlers: {}, isValidDropTarget: false, isInvalidDropTarget: false }),
+}));
+vi.mock('@/hooks/use-tag-drop', () => ({
+ useTagDrop: () => ({ dropHandlers: {}, isValidDropTarget: false }),
+}));
+vi.mock('../account-switcher', () => ({ AccountSwitcher: () => null }));
+
+const { Sidebar } = await import('../sidebar');
+const { useSettingsStore } = await import('@/stores/settings-store');
+const { useUIStore } = await import('@/stores/ui-store');
+
+const mailboxes = [
+ { id: 'inbox', name: 'Inbox', role: 'inbox', parentId: null, totalEmails: 9, unreadEmails: 4, sortOrder: 0, myRights: { mayAddItems: true } },
+ { id: 'receipts', name: 'Receipts', role: null, parentId: null, totalEmails: 5, unreadEmails: 3, sortOrder: 1, myRights: { mayAddItems: true } },
+ { id: 'shops', name: 'Shops', role: null, parentId: 'receipts', totalEmails: 0, unreadEmails: 0, sortOrder: 0, myRights: { mayAddItems: true } },
+] as unknown as Mailbox[];
+
+const row = (id: string) => document.querySelector(`[data-testid="folder-row"][data-mailbox-id="${id}"]`)!;
+
+describe.each([
+ ['Mountain View', 'mountain-view', true],
+ ['the default layout', 'default', false],
+] as const)('folder row click area in %s', (_name, interfaceLayout, mvShell) => {
+ beforeEach(() => {
+ useUIStore.setState({ sidebarCollapsed: false } as never);
+ useSettingsStore.setState({ interfaceLayout, hideAccountSwitcher: true, enableUnifiedMailbox: false } as never);
+ });
+
+ it('opens the folder from a click on the row outside its button', () => {
+ const onMailboxSelect = vi.fn();
+ render( {}} mvShell={mvShell} />);
+ expect(row('receipts').className).toContain('cursor-pointer');
+ });
+
+ it('only expands or collapses the folder from its chevron', () => {
+ const onMailboxSelect = vi.fn();
+ render((null);
+ // Plugins' panels (the side-panel slot), their buttons below the apps'.
+ // A plugin's panel opening (a click, or the plugin's openPanel) shuts the app's, and the other way round.
+ const plugins = usePluginSidePanel(() => setOpen(null));
+ const pluginOpen = plugins.entries.find((e) => e.pluginId === plugins.open) ?? null;
+ const openApp = (id: MvSidePanelId | null) => {
+ if (id) plugins.choose(null);
+ setOpen(id);
+ };
+ const openPlugin = (pluginId: string | null) => {
+ if (pluginId) setOpen(null);
+ plugins.choose(pluginId);
+ };
const showCalendar = supportsCalendar && calendarEnabled;
const showContacts = (client?.supportsContacts() ?? false) && contactsEnabled;
@@ -57,9 +70,11 @@ export function MvSidePanel() {
...(showContacts ? [{ id: "contacts" as const, label: t("contacts"), icon: Users, color: "text-[#1a73e8]" }] : []),
];
- if (buttons.length === 0) return null;
+ if (buttons.length === 0 && plugins.entries.length === 0) return null;
+ // A plugin's panel without a rail button (setSidePanel's rail: false) opens on its request only.
+ const pluginButtons = plugins.entries.filter((e) => e.inRail);
// A panel whose app went away (policy change, account switch) stays shut.
- const active = open && buttons.some((b) => b.id === open) ? open : null;
+ const active = open && !pluginOpen && buttons.some((b) => b.id === open) ? open : null;
return (
<>
@@ -75,7 +90,17 @@ export function MvSidePanel() {
{active === "contacts" && setOpen(null)} />}
)}
- }
);
}
diff --git a/components/layout/navigation-rail.tsx b/components/layout/navigation-rail.tsx
index e6016a1d0..1ebaed59c 100644
--- a/components/layout/navigation-rail.tsx
+++ b/components/layout/navigation-rail.tsx
@@ -34,6 +34,7 @@ import { toUnicodeEmail } from "@/lib/idn";
import { usePluginPages, pluginPageHref, isPluginPageActive } from "@/hooks/use-plugin-pages";
import { NotificationBell } from "@/components/notifications/notification-center";
import { useBottomControls } from "@/hooks/use-bottom-controls";
+import { writeRailHints, type RailHint } from "@/lib/boot-skeleton/hints";
interface NavItem {
id: string;
@@ -348,6 +349,23 @@ export function NavigationRail({
const visibleItems = navItems.filter((item) => !item.hidden);
+ // Leave the next page load's skeleton a note of what this rail shows
+ // (lib/boot-skeleton/hints.ts). Only once a session is up: before that the
+ // rail is still missing the apps the server offers.
+ const quotaShown = !!quota && quota.total > 0;
+ useEffect(() => {
+ if (!client) return;
+ const items: RailHint[] = [];
+ for (const item of navItems) if (item.id !== 'mail' && !item.hidden) items.push(item.id as RailHint);
+ if (sidebarAppsEnabled && onManageApps) items.push('add-app');
+ if (isStalwartAdmin) items.push('admin');
+ if (showAccessibilityButton) items.push('a11y');
+ if (quotaShown) items.push('quota');
+ writeRailHints(items);
+ // navItems is rebuilt every render; its inputs are listed instead.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [client, supportsCalendar, calendarEnabled, supportsContacts, contactsEnabled, supportsFiles, filesEnabled, sidebarAppsEnabled, !!onManageApps, isStalwartAdmin, showAccessibilityButton, quotaShown]);
+
const getIsActive = (href: string, itemId: string) => {
if (activeAppId) return false;
if (onNavigate) {
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index a76ce0940..107df3199 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -44,6 +44,7 @@ import {
MoreVertical,
} from "@/components/icons";
import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
+import { FOLDER_CHEVRON_SLOT, FOLDER_ROW_PX_BASE, FolderRowsSkeleton } from "@/components/boot-skeleton/mail-skeleton";
import { localizeMailboxName } from "@/lib/mailbox-label";
import {
buildKeywordTree,
@@ -168,8 +169,8 @@ interface SidebarProps {
onLoginSharedMailboxSelect?: (loginId: string, mailboxId: string) => void;
}
-const ROW_PX_BASE = 8;
-const CHEVRON_SLOT = 20;
+const ROW_PX_BASE = FOLDER_ROW_PX_BASE;
+const CHEVRON_SLOT = FOLDER_CHEVRON_SLOT;
const INDENT_STEP = 12;
// Icons and colours follow the JMAP role only.
@@ -430,11 +431,20 @@ function SidebarRow({
const longPress = useLongPress((point) => {
if (rowRef.current && onContextMenu) onContextMenu(menuEventAt(rowRef.current, point));
}, hasMenu);
+ // The whole row opens the folder, not just its button: the row's padding,
+ // the chevron slot and the space around the count were dead (#1501). The
+ // button stays the keyboard target; controls of their own keep their click.
+ const openFromRow = !isVirtual && onClick
+ ? (e: React.MouseEvent) => {
+ if (!(e.target as Element).closest('button, a, input, [role="button"]')) onClick();
+ }
+ : undefined;
return (
{tree.length === 0 ? (
-
- {!isCollapsed && t("loading_mailboxes")}
+ // The page skeleton's folder rows, so nothing moves when the
+ // folders arrive (components/boot-skeleton).
+ ) => (values?.name ? `${key}:${values.name}` : key) }));
+vi.mock('../plugin-iframe-slot', () => ({ PluginIframeSlot: () => }));
+
+import { PluginDialogHost } from '../plugin-dialog-host';
+import { awaitCustomDialog, head, resetDialogLimits, resolveHead } from '@/lib/plugin-sandbox/host-dialog';
+import { POPOVER_GAP } from '@/lib/plugin-sandbox/dialog-anchor';
+
+// A custom dialog with an anchor: a popover beside the control the user
+// clicked, naming the plugin in one line, closed by Escape or a click outside.
+
+beforeEach(() => {
+ while (head()) resolveHead(null);
+ resetDialogLimits();
+});
+
+const anchor = { left: 100, top: 50, right: 124, bottom: 74 };
+
+describe('a plugin dialog beside its trigger', () => {
+ it('stands below the trigger, names the plugin, and has no centred backdrop', () => {
+ render(('[data-plugin-dialog="follow-ups"]')!;
+ expect(panel.style.left).toBe('100px');
+ expect(panel.style.top).toBe(`${74 + POPOVER_GAP}px`);
+ expect(panel.style.width).toContain('320px');
+ });
+
+ it('closes with null on a click outside', async () => {
+ render(;
+ act(() => { result = awaitCustomDialog({ pluginId: 'follow-ups', title: 'Follow up', message: '', slot: 'plugin-dialog', anchor }); });
+ await act(async () => { fireEvent.mouseDown(screen.getByRole('dialog')); });
+ await expect(result!).resolves.toBeNull();
+ expect(screen.queryByRole('dialog')).toBeNull();
+ });
+
+ it('closes with null on Escape', async () => {
+ render(;
+ act(() => { result = awaitCustomDialog({ pluginId: 'follow-ups', title: 'Follow up', message: '', slot: 'plugin-dialog', anchor }); });
+ await act(async () => { fireEvent.keyDown(document, { key: 'Escape' }); });
+ await expect(result!).resolves.toBeNull();
+ });
+
+ it('is the centred dialog without an anchor', () => {
+ render(; fill?: boolean };
+ expect(opts.slot).toBe('side-panel');
+ expect(opts.extraProps).toEqual({ focusRequest: 0 });
+ expect(container.querySelector('[data-plugin-iframe-fill]')).not.toBeNull();
+
+ fireEvent.click(screen.getByRole('button', { name: 'close' }));
+ expect(container.querySelector('[data-plugin-side-panel]')).toBeNull();
+ });
+
+ it('remembers the open panel in this browser', () => {
+ offer('fu', 'Follow-ups');
+ const first = render( = Promise.resolve({})) => ({ destroy: vi.fn(), updateProps: vi.fn(), setTheme: vi.fn(), initPromise });
+const createSlotInstance = vi.fn((..._args: unknown[]) => slotInstance());
+vi.mock('@/lib/plugin-sandbox/host-bridge', () => ({
+ createSlotInstance: (...args: unknown[]) => createSlotInstance(...args),
+}));
+vi.mock('@/lib/plugin-sandbox/host-theme', () => ({ snapshotHostTheme: () => ({}) }));
+
+const { PluginTaskView, usePluginTaskView } = await import('../plugin-task-view');
+const registry = await import('@/lib/plugin-sandbox/registry');
+
+function offer(id: string, opts: { slot?: string; fill?: boolean; permissions?: InstalledPlugin['permissions']; shouldShow?: boolean } = {}) {
+ const permissions = opts.permissions ?? ['ui:tasks', 'tasks:read'];
+ const plugin: InstalledPlugin = {
+ id, name: id, version: '1.0.0', author: '', description: '', type: 'ui-extension',
+ permissions, grantedPermissions: permissions, entrypoint: 'index.js',
+ enabled: true, status: 'running', settings: {},
+ };
+ registry.register({
+ plugin,
+ code: '',
+ tier: 'untrusted',
+ background: { evaluateShouldShow: vi.fn(async () => opts.shouldShow ?? true) } as never,
+ slotOffers: [{ name: (opts.slot ?? 'calendar-task-view') as never, order: 100, hasShouldShow: opts.shouldShow !== undefined, ...(opts.fill ? { fill: true } : {}) }],
+ hookDisposables: [],
+ });
+}
+
+/** The task view's list area as calendar-app draws it. */
+function TaskArea({ calendarIds = ['c1', 'c2'] }: { calendarIds?: string[] }) {
+ const view = usePluginTaskView();
+ const list = ;
+ if (!view) return list;
+ return ; fill?: boolean };
+ expect(opts.slot).toBe('calendar-task-view');
+ expect(opts.fill).toBe(true);
+ expect(opts.extraProps).toEqual({ filter: 'pending', calendarIds: ['c1', 'c2'] });
+ expect(container.querySelector('[data-plugin-iframe-fill]')).not.toBeNull();
+ await Promise.resolve();
+ expect(queryByTestId('bulwark-task-list')).toBeNull();
+ });
+
+ it('hands the calendars only to a plugin that reads tasks', async () => {
+ offer('looks', { permissions: ['ui:tasks'] });
+ render( };
+ expect(opts.extraProps).toEqual({ filter: 'pending' });
+ });
+
+ it("gives Bulwark's list back when the plugin's shouldShow says no", async () => {
+ offer('picky', { shouldShow: false });
+ const { findByTestId, container } = render(): { left: number; top: number } | null {
+ const [place, setPlace] = useState<{ left: number; top: number } | null>(null);
+ useLayoutEffect(() => {
+ const panel = panelRef.current;
+ if (!anchor || !panel) return;
+ const update = () => {
+ const r = panel.getBoundingClientRect();
+ const next = placePopover(
+ anchor,
+ { width: r.width, height: r.height },
+ { width: window.innerWidth, height: window.innerHeight },
+ document.documentElement.dir === 'rtl',
+ );
+ setPlace((p) => (p && p.left === next.left && p.top === next.top ? p : next));
+ };
+ update();
+ const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+ observer?.observe(panel);
+ window.addEventListener('resize', update);
+ return () => {
+ observer?.disconnect();
+ window.removeEventListener('resize', update);
+ };
+ }, [anchor, panelRef]);
+ return place;
+}
+
/** A footer button's icon by name; unknown names show none. */
function FooterIcon({ name }: { name?: string }) {
const Glyph = name ? iconForName(name) : null;
@@ -335,7 +424,7 @@ function FooterIcon({ name }: { name?: string }) {
}
/** The "⋯" menu in a plugin dialog's header: the way out of a plugin that keeps asking. */
-function PluginDialogMenu({ name, onTurnOff }: { name: string; onTurnOff: () => void }) {
+function PluginDialogMenu({ name, onTurnOff, compact }: { name: string; onTurnOff: () => void; compact?: boolean }) {
const t = useTranslations('plugins.dialog');
const [open, setOpen] = useState(false);
const ref = useRef(null);
@@ -356,9 +445,9 @@ function PluginDialogMenu({ name, onTurnOff }: { name: string; onTurnOff: () =>
aria-expanded={open}
aria-label={t('plugin_menu', { name })}
title={t('plugin_menu', { name })}
- className={cn('p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground', open && 'bg-muted text-foreground')}
+ className={cn(compact ? 'p-1' : 'p-1.5', 'rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground', open && 'bg-muted text-foreground')}
>
-
+ {t("loading_mailboxes")}
+ {!isCollapsed &&
) : (
<>
@@ -2120,8 +2134,11 @@ function SidebarImpl({
{(mvFoldersHeadless || (foldersExpanded && !isCollapsed) || isCollapsed) && (
<>
{mailboxes.length === 0 ? (
-
- {!isCollapsed && t("loading_mailboxes")}
+ // The page skeleton's folder rows, so nothing moves when the
+ // folders arrive (components/boot-skeleton).
+ >>) => {
+ const Component = lazy(async () => ({ default: await load() }));
+ return function Dynamic(props: Record) {
+ return () {
+ let resolve!: (value: T) => void;
+ const promise = new Promise((r) => { resolve = r; });
+ return { promise, resolve };
+}
+
+let fetchEmails: ReturnType;
+let fetchEmailContent: ReturnType;
+
+beforeEach(() => {
+ list.isLoading = [];
+ viewer.isLoading = [];
+ device.isMobile = false;
+ nav.replace.mockReset();
+ vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('Unexpected network request')));
+ vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} });
+ usePluginStore.setState({ initializePlugins: vi.fn().mockResolvedValue(undefined) });
+ useThemeStore.setState({ syncServerThemes: vi.fn().mockResolvedValue(undefined) });
+ useUIStore.setState({ activeView: 'list' });
+ const client = {
+ getAccountId: () => 'acc', getUsername: () => 'a@example.org',
+ getSieveAccountId: () => null, hasDelayedSend: () => false, getSession: () => null,
+ getMailboxes: vi.fn().mockResolvedValue([inbox]),
+ };
+ useAuthStore.setState({
+ isAuthenticated: true, isLoading: false, client: client as never, activeAccountId: 'login-a', identities: [],
+ getClientForAccount: () => client as never,
+ getAllConnectedClients: () => new Map([['login-a', client]]) as never,
+ });
+ useSettingsStore.setState({ enableUnifiedMailbox: false, interfaceLayout: 'default', mailLayout: 'focus' } as never);
+ fetchEmails = vi.fn().mockResolvedValue(undefined);
+ fetchEmailContent = vi.fn().mockResolvedValue(null);
+ useEmailStore.setState({
+ emails: [], selectedEmail: null, selectedMailbox: 'inbox', selectedKeyword: null, mailboxes: [inbox],
+ viewingAccountId: null, accountMailboxes: {}, isUnifiedView: false, unifiedRole: null,
+ isScheduledView: false, isLoadingEmail: false, isLoading: false, searchQuery: '',
+ searchFilters: { ...DEFAULT_SEARCH_FILTERS }, searchMailboxId: '',
+ selectedEmailKeys: new Set(), unreadSection: null,
+ fetchMailboxes: vi.fn().mockResolvedValue(undefined), fetchEmails,
+ fetchQuota: vi.fn().mockResolvedValue(undefined), fetchTagCounts: vi.fn().mockResolvedValue(undefined),
+ refreshScheduledMetadata: vi.fn().mockResolvedValue(undefined),
+ fetchEmailContent,
+ } as never);
+});
+afterEach(() => {
+ vi.restoreAllMocks();
+ vi.unstubAllGlobals();
+});
+
+describe('mail page hand-off from the boot skeleton', () => {
+ it('draws the mail skeleton, not a spinner, while the session is restored', async () => {
+ useAuthStore.setState({ isAuthenticated: false, client: null, checkAuth: vi.fn(() => new Promise(() => {})) } as never);
+ const { container } = render(();
+ fetchEmailContent.mockReturnValue(content.promise);
+ const { getByTestId, container } = render(;
+ client.getThreadEmails = vi.fn(() => new Promise(() => {}));
+ const { container, queryByTestId } = render(
{/* Bottom Navigation - mobile and tablet (hidden when embedded) */}
- {(isMobile || isTablet) && activeView !== "viewer" && !isEmbedded && (
+ {(isMobile || isTablet) && mobileView !== "viewer" && !isEmbedded && (
{/* Keyboard Shortcuts Modal */}
diff --git a/components/plugins/__tests__/plugin-dialog-popover.test.tsx b/components/plugins/__tests__/plugin-dialog-popover.test.tsx
new file mode 100644
index 000000000..699b86019
--- /dev/null
+++ b/components/plugins/__tests__/plugin-dialog-popover.test.tsx
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string, values?: Record
+ {t("loading_mailboxes")}
+ {!isCollapsed &&
) : (
<>
diff --git a/components/mail/__tests__/mail-app-boot-skeleton.test.tsx b/components/mail/__tests__/mail-app-boot-skeleton.test.tsx
new file mode 100644
index 000000000..920c50b20
--- /dev/null
+++ b/components/mail/__tests__/mail-app-boot-skeleton.test.tsx
@@ -0,0 +1,182 @@
+import React, { Suspense, lazy } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Mailbox } from '@/lib/jmap/types';
+import { useAuthStore } from '@/stores/auth-store';
+import { useEmailStore } from '@/stores/email-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { usePluginStore } from '@/stores/plugin-store';
+import { useThemeStore } from '@/stores/theme-store';
+import { useUIStore } from '@/stores/ui-store';
+import { DEFAULT_SEARCH_FILTERS } from '@/lib/jmap/search-utils';
+
+// The mail page hands over from the page skeleton the server drew without
+// anything jumping: the auth gate draws that same skeleton, the list keeps
+// its skeleton rows until the folder's first page is in, and a linked message
+// keeps the reader open while it loads.
+
+const nav = vi.hoisted(() => ({ replace: vi.fn(), push: vi.fn(), back: vi.fn(), prefetch: vi.fn() }));
+vi.mock('@/i18n/navigation', () => ({
+ useRouter: () => nav,
+ usePathname: () => '/en',
+ Link: ({ children }: { children: React.ReactNode }) => children,
+}));
+vi.mock('next/dynamic', () => ({ default: (load: () => Promise
-
- );
+ return
-
-
- {t("common.loading")}
-
+ {t('threads.loading')}
+
+ ) : isMobile && conversationThread ? (
+ {buttons.map((b) => (
+
+ ))}
+
+ );
+ const frame = (
+ {
+ if (e.target === e.currentTarget) cancel();
+ }}
+ data-plugin-dialog-popover=""
+ >
+
+ );
+ }
+
return (
+
+
+
+ {current.title || name}
++ + {t('from_plugin', { name })} +
+{frame}
+ {footer}
+
{message}
-
- {buttons.length > 0 && (
-
- {buttons.map((b) => (
-
- ))}
-
- )}
+ {footer}
) : (
<>
@@ -328,6 +386,37 @@ function PluginDialogView({ current, layer }: { current: DialogRequest; layer: '
);
}
+/**
+ * Where a popover dialog's panel stands: measured before it paints and again
+ * when its content (the plugin's frame) or the window changes size.
+ */
+function usePopoverPlace(anchor: AnchorRect | undefined, panelRef: React.RefObject
diff --git a/components/plugins/plugin-iframe-slot.tsx b/components/plugins/plugin-iframe-slot.tsx
index e02b9bcc9..1865ce624 100644
--- a/components/plugins/plugin-iframe-slot.tsx
+++ b/components/plugins/plugin-iframe-slot.tsx
@@ -25,6 +25,13 @@ interface Props {
extraProps?: Record;
/** The frame fills its panel and scrolls inside, instead of growing with its content. */
fill?: boolean;
+ /**
+ * Told whether the frame is up: false when the plugin's shouldShow says no
+ * or its frame fails to start, true once it has started. For a slot that
+ * stands in for a part of Bulwark (calendar-task-view), so the caller can
+ * draw its own part again.
+ */
+ onShownChange?: (shown: boolean) => void;
}
interface FloatingDropdownState {
@@ -38,9 +45,11 @@ interface FloatingDropdownState {
ariaLabel?: string;
}
-export function PluginIframeSlot({ pluginId, slot, extraProps, fill = false }: Props) {
+export function PluginIframeSlot({ pluginId, slot, extraProps, fill = false, onShownChange }: Props) {
const wrapperRef = useRef(null);
const instanceRef = useRef(null);
+ const onShownChangeRef = useRef(onShownChange);
+ useEffect(() => { onShownChangeRef.current = onShownChange; }, [onShownChange]);
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(undefined);
const [floatingDropdown, setFloatingDropdown] = useState(null);
@@ -80,6 +89,10 @@ export function PluginIframeSlot({ pluginId, slot, extraProps, fill = false }: P
return () => { cancelled = true; };
}, [pluginId, slot, props]);
+ useEffect(() => {
+ if (show === false) onShownChangeRef.current?.(false);
+ }, [show]);
+
// Spawn / tear down the slot iframe.
useEffect(() => {
if (show !== true) return;
@@ -130,7 +143,17 @@ export function PluginIframeSlot({ pluginId, slot, extraProps, fill = false }: P
},
});
instanceRef.current = inst;
+ // A frame that fails to start stays blank; say so to a caller that can
+ // draw something in its place.
+ let live = true;
+ if (onShownChangeRef.current) {
+ inst.initPromise.then(
+ () => { if (live) onShownChangeRef.current?.(true); },
+ () => { if (live) onShownChangeRef.current?.(false); },
+ );
+ }
return () => {
+ live = false;
try { inst.destroy(); } catch { /* ignore */ }
instanceRef.current = null;
setFloatingDropdown(null);
diff --git a/components/plugins/plugin-page-app.tsx b/components/plugins/plugin-page-app.tsx
index e81005e7b..3d2be1b96 100644
--- a/components/plugins/plugin-page-app.tsx
+++ b/components/plugins/plugin-page-app.tsx
@@ -3,7 +3,7 @@
import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
-import { Loader2, Puzzle } from "@/components/icons";
+import { Puzzle } from "@/components/icons";
import { useAuthStore, redirectToLogin, saveRedirectAfterLogin } from "@/stores/auth-store";
import { useEmailStore } from "@/stores/email-store";
import { usePluginStore } from "@/stores/plugin-store";
@@ -22,6 +22,8 @@ import { useDocumentTitle } from "@/hooks/use-document-title";
import { findPage, subscribePages } from "@/lib/plugin-sandbox/pages";
import { offersForSlot, subscribe as subscribeSlots } from "@/lib/plugin-sandbox/registry";
import { cn } from "@/lib/utils";
+import { PluginPageSkeleton, PluginPageSkeletonBody } from "@/components/boot-skeleton/plugin-page-skeleton";
+import { useSkeletonLabels } from "@/components/boot-skeleton/use-skeleton-labels";
export interface PluginPageAppProps {
/** Path segments after `/apps`: `[pluginId, pageId, ...subPath]`. */
@@ -36,6 +38,7 @@ export interface PluginPageAppProps {
*/
export function PluginPageApp({ linkSegments = [] }: PluginPageAppProps) {
const t = useTranslations("plugin_pages");
+ const skeleton = useSkeletonLabels();
const [pluginId = "", pageId = "", ...rest] = linkSegments;
const subPath = rest.join("/");
@@ -91,7 +94,12 @@ export function PluginPageApp({ linkSegments = [] }: PluginPageAppProps) {
const extraProps = useMemo(() => ({ pageId, path: subPath }), [pageId, subPath]);
- if (!isAuthenticated) return null;
+ // Until the session is restored: the page skeleton the server drew.
+ if (!isAuthenticated) {
+ return isEmbedded
+ ?
);
} else if (!pluginsReady) {
+ // The plugins are starting: the same empty area the page skeleton drew,
+ // so nothing moves before the page (or the "not available" note) arrives.
content = (
-
- (readStored);
+ const [focusRequest, setFocusRequest] = useState(0);
+ // A plugin that went away (disabled, removed) leaves its panel shut.
+ const open = chosen && entries.some((e) => e.pluginId === chosen) ? chosen : null;
+ const choose = useCallback((pluginId: string | null) => {
+ setChosen(pluginId);
+ writeStored(pluginId);
+ }, []);
+ const state = useRef({ entries, open, onOpen });
+ state.current = { entries, open, onOpen };
+ useEffect(() => onPanelRequest((request) => {
+ if (request.slot !== 'side-panel') return null;
+ if (!state.current.entries.some((e) => e.pluginId === request.pluginId)) return null;
+ const isOpen = state.current.open === request.pluginId;
+ const wantOpen = request.mode === 'open' ? true : request.mode === 'close' ? false : !isOpen;
+ if (wantOpen) {
+ choose(request.pluginId);
+ setFocusRequest((n) => n + 1);
+ state.current.onOpen?.();
+ } else if (isOpen) {
+ choose(null);
+ }
+ return wantOpen;
+ }), [choose]);
+ return { entries, open, choose, focusRequest };
+}
+
+/** A plugin's panel: the host's header (title, close) over the plugin's frame, which fills the rest. */
+export function PluginSidePanelBody({ entry, focusRequest, onClose }: {
+ entry: SidePanelEntry;
+ focusRequest: number;
+ onClose: () => void;
+}) {
+ const tCommon = useTranslations('common');
+ const extraProps = useMemo(() => ({ focusRequest }), [focusRequest]);
+ return (
+ <>
+ (null);
+ const notShown = notShownBy === pluginId;
+ const onShownChange = useCallback((shown: boolean) => setNotShownBy(shown ? null : pluginId), [pluginId]);
+ return (
+ <>
+ {notShown && fallback}
+ = {
mail: 'mail',
@@ -37,12 +39,21 @@ export function useProInterfaceActive(): boolean {
* segments are handed to the tab that opens (#733), so `/mail/message/`
* opens that message in a Pro mail tab instead of silently landing on the
* inbox.
+ *
+ * Until /pro has rendered, the Pro skeleton covers the standard page, which
+ * may finish loading first (a fast session restore, a slow /pro chunk): the
+ * visitor sees the Pro frame from the first paint to the loaded Pro shell,
+ * never the standard page in between. The server HTML and the hydration pass
+ * draw nothing here (isDesktop is false there); the page's own skeleton is
+ * already the Pro frame then (components/boot-skeleton/shell.tsx).
*/
export function ProInterfaceRedirect() {
const router = useRouter();
const pathname = usePathname();
const proInterface = useSettingsStore((s) => s.proInterface);
const isDesktop = useIsDesktop();
+ const { label } = useSkeletonLabels();
+ const takingOver = proInterface && isDesktop && matchSurface(pathname) !== null;
useEffect(() => {
if (!proInterface || !isDesktop) return;
@@ -63,5 +74,10 @@ export function ProInterfaceRedirect() {
router.replace('/pro');
}, [proInterface, isDesktop, pathname, router]);
- return null;
+ if (!takingOver) return null;
+ return (
+
-
- );
+ // The mail page this hands over to, where the composer opens: its skeleton,
+ // with the opening text as the status message.
+ return
-
- );
+ // The calendar is where this goes next: its skeleton, with "Opening…" as
+ // the page's status.
+ return ()),
+ usePathname: () => nav.pathname,
+}));
+
// The Lite export leaves the catalog out of the [locale] layout, because the
// prop was baked into every exported page and pushed the Stalwart zip past its
// size limit. The provider then loads the catalog itself and must render
-// nothing until it has it: English text would flash on a German page, and the
+// no text until it has it (only the page's skeleton, which has none): English text would flash on a German page, and the
// prerendered HTML has to match the client's first render.
vi.unmock('next-intl');
@@ -20,12 +26,22 @@ function Cancel() {
describe('IntlProvider without server messages (Lite)', () => {
afterEach(() => {
useLocaleStore.setState({ locale: '' });
+ nav.pathname = null;
});
it('prerenders nothing for a non-English locale', () => {
expect(renderToString( ({
+ useTranslations: (ns?: string) => (key: string) => (ns ? `${ns}.${key}` : key),
+ useMessages: () => ({}),
+ useLocale: () => 'en',
+ useFormatter: () => ({ dateTime: String, relativeTime: String, number: String }),
+}));
+vi.mock('@/hooks/use-media-query', async (importOriginal) => ({
+ atLeast: (await importOriginal()).atLeast,
+ useIsDesktop: () => true,
+ useIsMobile: () => false,
+ useMediaQuery: () => false,
+ useDeviceDetection: () => ({ isMobile: false, isTablet: false, isDesktop: true }),
+}));
+vi.mock('@/hooks/use-config', () => ({ useConfig: () => ({ appName: 'Mail', stalwartFeaturesEnabled: true }) }));
+vi.mock('@/components/layout/navigation-rail', () => ({ NavigationRail: () => null }));
+vi.mock('@/components/layout/sidebar-apps-modal', () => ({ SidebarAppsModal: () => null }));
+vi.mock('@/components/plugins/app-top-banner-slot', () => ({ AppTopBannerSlot: () => null }));
+vi.mock('@/components/settings/appearance-settings', () => ({
+ AppearanceSettings: () => (() => {})) } as never);
+});
+afterEach(() => {
+ vi.unstubAllGlobals();
+ vi.restoreAllMocks();
+});
+
+describe('Settings while the session restores', () => {
+ it('draws the settings skeleton when signed out', () => {
+ useAuthStore.setState({ isAuthenticated: false, isLoading: true, client: null });
+ render(
+ updateSetting('signatureNewMailEnabled', checked)}
+ />
+
+
+
+ updateSetting('signatureReplyForwardEnabled', checked)}
+ />
+
+
`, so its UI (e.g. S/MIME key import) is
@@ -130,51 +118,14 @@ interface TabDef {
sub?: boolean;
}
-const tabIcons: Record = {
- account: User,
- general: SettingsIcon,
- notifications: Bell,
- appearance: Palette,
- accessibility: Accessibility,
- message_list: LayoutList,
- reading: BookOpen,
- composing: PenLine,
- vacation: PalmtreeIcon,
- filters: Filter,
- organize: FolderOpen,
- security: Shield,
- sharing: Users,
- recovery: RotateCcw,
- calendar: Calendar,
- contacts: BookUser,
- files: HardDrive,
- addons: Puzzle,
- backup: Database,
-};
+// Shared with the boot skeleton, which draws the same nav before any script runs.
+const tabIcons = SETTINGS_TAB_ICONS;
const tabGroupOrder: TabGroup[] = ['top', 'mail', 'apps', 'bottom'];
-// Map legacy tab IDs to current ones; runs once on read of localStorage and
-// for every deep link, so old bookmarks, connector links and sidebar gears
-// land on the page that now holds the setting.
-export const LEGACY_TAB_MAP: Record = {
- email: 'reading',
- advanced: 'backup',
- layout: 'appearance',
- themes: 'appearance',
- content_senders: 'reading',
- identities: 'account',
- language: 'general',
- protocol_handlers: 'general',
- templates: 'composing',
- folders: 'organize',
- keywords: 'organize',
- downloads: 'reading',
- sidebar_apps: 'addons',
- plugins: 'addons',
- about_data: 'backup',
- debug: 'backup',
-};
+// Legacy tab ids and their current pages live in lib/settings-tabs.ts, which
+// the pre-paint boot script reads too.
+export { LEGACY_TAB_MAP };
// Where on the new page a legacy tab's settings now sit, so an old link
// lands on that section rather than at the top of the page.
@@ -282,6 +233,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
const tShell = useTranslations('shell');
const tDelegates = useTranslations('delegates');
const tPalette = useTranslations('command_palette');
+ const skeletonLabels = useSkeletonLabels();
const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
const isEmbedded = useIsEmbedded();
@@ -494,8 +446,12 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
// an advanced section stays hidden until the switch is on, so after a
// short wait turn it on rather than give up.
const updateSetting = useSettingsStore((s) => s.updateSetting);
+ // The page itself rather than its skeleton (see the gate below).
+ const pageShown = isAuthenticated && !!client;
useEffect(() => {
if (!pendingSection || pendingSection.tab !== activeTab) return;
+ // The skeleton has no sections: wait until the page is drawn.
+ if (!pageShown) return;
if (typeof window === 'undefined') return;
let cancelled = false;
let timer: ReturnType | undefined;
@@ -516,7 +472,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
window.cancelAnimationFrame(raf);
if (timer) clearTimeout(timer);
};
- }, [pendingSection, activeTab, updateSetting]);
+ }, [pendingSection, activeTab, updateSetting, pageShown]);
// Leaving the settings panel drops any shared-account scope so it never
// leaks into the next visit or another session.
@@ -842,8 +798,24 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
isAuthenticated,
);
- if (!isAuthenticated) {
- return null;
+ // Which pages this account has, for the next load's skeleton nav
+ // (lib/boot-skeleton/hints.ts). Only the account's own list, once its
+ // capabilities are known; plugin entries are left out.
+ const hintedTabs = client && !managedAccountId
+ ? visibleTabs.filter((tab) => !tab.id.includes(':')).map((tab) => tab.id).join(' ')
+ : null;
+ useEffect(() => {
+ if (hintedTabs) writeSettingsHints(hintedTabs.split(' '));
+ }, [hintedTabs]);
+
+ // Until the session is up, the page's skeleton (the same one the server
+ // drew). Waiting for the client, not only the persisted sign-in, means the
+ // nav renders once with the account's pages instead of growing as the
+ // capabilities arrive.
+ if (!isAuthenticated || !client) {
+ return isEmbedded
+ ? = {
+ account: User,
+ general: SettingsIcon,
+ notifications: Bell,
+ appearance: Palette,
+ accessibility: Accessibility,
+ message_list: LayoutList,
+ reading: BookOpen,
+ composing: PenLine,
+ vacation: PalmtreeIcon,
+ filters: Filter,
+ organize: FolderOpen,
+ security: Shield,
+ sharing: Users,
+ recovery: RotateCcw,
+ calendar: Calendar,
+ contacts: BookUser,
+ files: HardDrive,
+ addons: Puzzle,
+ backup: Database,
+};
+
+export type SettingsTabGroup = 'top' | 'mail' | 'apps' | 'bottom';
+
+/**
+ * The settings nav in order, by group, with every page a server can offer.
+ * The settings page leaves out what the account or the admin doesn't have
+ * (see the `tabs` list in settings-app.tsx); the skeleton hides those rows
+ * from the last session's hints.
+ */
+export const SETTINGS_NAV_GROUPS: readonly { group: SettingsTabGroup; tabs: readonly SettingsSearchTab[] }[] = [
+ { group: 'top', tabs: ['account', 'security', 'sharing', 'notifications', 'general', 'appearance', 'accessibility'] },
+ { group: 'mail', tabs: ['message_list', 'reading', 'composing', 'organize', 'filters', 'vacation', 'recovery'] },
+ { group: 'apps', tabs: ['calendar', 'contacts', 'files', 'addons'] },
+ { group: 'bottom', tabs: ['backup'] },
+];
diff --git a/hooks/__tests__/use-calendar-alerts-hooks.test.tsx b/hooks/__tests__/use-calendar-alerts-hooks.test.tsx
index 9a17672d9..331953d64 100644
--- a/hooks/__tests__/use-calendar-alerts-hooks.test.tsx
+++ b/hooks/__tests__/use-calendar-alerts-hooks.test.tsx
@@ -8,7 +8,12 @@ import { useCalendarNotificationStore } from '@/stores/calendar-notification-sto
import { useSettingsStore } from '@/stores/settings-store';
import { useToastStore } from '@/stores/toast-store';
import { calendarHooks, clearAllHooks } from '@/lib/plugin-hooks';
-import type { CalendarEvent } from '@/lib/jmap/types';
+import { useTaskStore } from '@/stores/task-store';
+import type { CalendarEvent, CalendarTask } from '@/lib/jmap/types';
+
+const sounds = vi.hoisted(() => ({ play: vi.fn(), title: vi.fn() }));
+vi.mock('@/lib/notification-sound', () => ({ playNotificationSound: sounds.play }));
+vi.mock('@/lib/title-alert', () => ({ startTitleAlert: sounds.title }));
// A reminder that fires tells plugins (onCalendarAlert); the user closing
// its toast tells them it was dismissed (onCalendarAlertAcknowledge). A
@@ -30,6 +35,21 @@ const event = {
},
} as unknown as CalendarEvent;
+const task = {
+ id: 't1',
+ '@type': 'Task',
+ uid: 'uid-t1',
+ title: 'Call back Anna',
+ calendarIds: { c1: true },
+ due: new Date(Date.now() + 60 * 60_000).toISOString().slice(0, 19),
+ start: null,
+ progress: 'needs-action',
+ useDefaultAlerts: false,
+ alerts: {
+ 'follow-up': { '@type': 'Alert', action: 'display', trigger: { '@type': 'AbsoluteTrigger', when: fireTime } },
+ },
+} as unknown as CalendarTask;
+
function Toasts() {
const toasts = useToastStore((s) => s.toasts);
const removeToast = useToastStore((s) => s.removeToast);
@@ -41,12 +61,19 @@ beforeEach(() => {
useToastStore.setState({ toasts: [] });
useCalendarNotificationStore.getState().clearAll();
useAuthStore.setState({ isAuthenticated: true, client: null });
- useSettingsStore.setState({ calendarNotificationsEnabled: true, calendarNotificationSound: false, enableCalendarTasks: false });
+ useSettingsStore.setState({
+ calendarNotificationsEnabled: true, calendarNotificationSound: false, enableCalendarTasks: false,
+ doNotDisturb: false, visualAlerts: false,
+ });
useCalendarStore.setState({ events: [event], calendars: [] });
+ useTaskStore.setState({ tasks: [] });
+ sounds.play.mockClear();
+ sounds.title.mockClear();
});
afterEach(() => {
vi.useRealTimers();
+ vi.restoreAllMocks();
});
describe('reminder hooks', () => {
@@ -76,6 +103,92 @@ describe('reminder hooks', () => {
});
});
+describe('a task reminder', () => {
+ beforeEach(() => {
+ useSettingsStore.setState({ enableCalendarTasks: true });
+ useCalendarStore.setState({ events: [] });
+ useTaskStore.setState({ tasks: [task] });
+ });
+
+ it('reaches plugins with its task id, and its dismissal too', async () => {
+ const fired = vi.fn();
+ const acknowledged = vi.fn();
+ calendarHooks.onCalendarAlert.register('t', fired);
+ calendarHooks.onCalendarAlertAcknowledge.register('t', acknowledged);
+
+ renderHook(() => useCalendarAlerts());
+ render(,
+ options: { warm?: boolean; basePath?: string; legacy?: boolean; emailId?: string; noParamsSize?: boolean } = {},
+): Promise {
+ const source = readFileSync(resolve('public/sw.js'), 'utf8');
+ let notification: { data: unknown } | undefined;
+ let target: string | undefined;
+ const listeners = new Map void>();
+ const cache = new Map();
+ const client = {
+ id: 'window-1', url: 'https://mail.example.test/',
+ postMessage() {},
+ async focus() { return this; },
+ async navigate(url: string) { target = url; return this; },
+ };
+ // Safari before 17 has no URLSearchParams.size.
+ const SearchParams = options.noParamsSize
+ ? class extends URLSearchParams { get size(): number { return undefined as unknown as number; } }
+ : URLSearchParams;
+ const context = vm.createContext({
+ URL, URLSearchParams: SearchParams, Response, AbortController, setTimeout, clearTimeout, console,
+ self: {
+ location: { href: `https://mail.example.test${options.basePath ?? ''}/sw.js`, origin: 'https://mail.example.test' },
+ addEventListener: (type: string, fn: (event: unknown) => void) => listeners.set(type, fn),
+ clients: {
+ matchAll: async () => options.warm ? [client] : [],
+ openWindow: async (url: string) => { target = url; },
+ },
+ registration: {
+ showNotification: async (_title: string, data: { data: unknown }) => { notification = data; },
+ getNotifications: async () => [],
+ },
+ },
+ caches: { open: async () => ({
+ match: async (key: string) => cache.has(key) ? new Response(cache.get(key)) : undefined,
+ put: async (key: string, response: Response) => cache.set(key, await response.text()),
+ }) },
+ fetch: async (url: string) => ({ ok: true, json: async () => preview(url) }),
+ });
+ vm.runInContext(source, context);
+ async function dispatch(type: string, event: Record) {
+ const waits: Promise[] = [];
+ const listener = listeners.get(type);
+ if (!listener) throw new Error(`Missing worker handler: ${type}`);
+ listener({ ...event, waitUntil: (p: Promise) => waits.push(p) });
+ await Promise.all(waits);
+ }
+ const payload = options.legacy
+ ? { changed: { [accountId]: { EmailDelivery: 'new' } } }
+ : { kind: 'jmap-email-push', accountId, emailIds: [options.emailId ?? 'new-email'] };
+ await dispatch('push', { data: { json: () => payload } });
+ if (!notification) throw new Error('No notification shown');
+ await dispatch('notificationclick', { notification: { ...notification, close() {} } });
+ if (!target) throw new Error('Notification did not navigate');
+ return target;
+}
diff --git a/lib/__tests__/jmap-archived-items.test.ts b/lib/__tests__/jmap-archived-items.test.ts
index 794124849..78e2d04ca 100644
--- a/lib/__tests__/jmap-archived-items.test.ts
+++ b/lib/__tests__/jmap-archived-items.test.ts
@@ -69,15 +69,16 @@ describe('JMAPClient archived items', () => {
expect(queries(spy).every(([, args]) => (args.filter as { accountId?: string })?.accountId === ACCOUNT)).toBe(true);
});
- it('drops the other accounts in an unfiltered mixed answer', async () => {
- // A server that ignores the filter and answers with every account.
+ it('drops the other accounts in an unfiltered mixed answer and keeps items without accountId', async () => {
+ // A server that ignores the filter and answers with every account. 'n' has
+ // no accountId, the way Stalwart sends items to a user without Impersonate (#1480).
respondWith((body) => ({
methodResponses: body.methodCalls.map(([method, , id]) => method === 'x:ArchivedItem/query'
? [method, { ids: ['a', 'z', 'n'], total: 3 }, id]
: [method, { list: [archivedEmail('a'), archivedEmail('z', { accountId: 'cz' }), archivedEmail('n', { accountId: undefined })] }, id]),
}));
const result = await client().listArchivedEmails(undefined, { days: 0 });
- expect(result.items.map((i) => i.id)).toEqual(['a']);
+ expect(result.items.map((i) => i.id)).toEqual(['a', 'n']);
});
it('throws the refusal with its type when the server has no license', async () => {
diff --git a/lib/__tests__/jmap-mailbox-pagination.test.ts b/lib/__tests__/jmap-mailbox-pagination.test.ts
new file mode 100644
index 000000000..4dea54e23
--- /dev/null
+++ b/lib/__tests__/jmap-mailbox-pagination.test.ts
@@ -0,0 +1,230 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { JMAPClient } from '../jmap/client';
+
+type RawMailbox = { id: string; name: string; parentId?: string };
+type MethodCall = [string, Record, string];
+type RequestTarget = { request(calls: MethodCall[]): Promise };
+
+function createClient(
+ maxObjectsInGet = 2,
+ accounts: Record = { primary: { name: 'user@example.com' } },
+): JMAPClient {
+ const client = new JMAPClient('https://jmap.example.com', 'user@example.com', 'pass');
+ Object.assign(client, {
+ apiUrl: 'https://jmap.example.com/api',
+ accountId: 'primary',
+ username: 'user@example.com',
+ accounts,
+ capabilities: { 'urn:ietf:params:jmap:core': { maxObjectsInGet } },
+ });
+ return client;
+}
+
+function serve(client: JMAPClient, mailboxes: Record, clamp = Infinity, withTotal = true): MethodCall[][] {
+ const requests: MethodCall[][] = [];
+ vi.spyOn(client as unknown as RequestTarget, 'request').mockImplementation(async (calls) => {
+ if (calls[0][0] === 'Mailbox/get') {
+ return { methodResponses: calls.map(([, args, tag]) => [
+ 'Mailbox/get', { list: (mailboxes[args.accountId as string] ?? []).slice(0, client.getMaxObjectsInGet()), state: 'm' }, tag,
+ ]) };
+ }
+ requests.push(calls);
+ const accountId = calls[0][1].accountId as string;
+ const position = calls[0][1].position as number;
+ const limit = calls[0][1].limit as number;
+ const all = mailboxes[accountId] ?? [];
+ const page = all.slice(position, position + Math.min(limit, clamp));
+ return { methodResponses: [
+ ['Mailbox/query', { ids: page.map(({ id }) => id), queryState: 's', ...(withTotal && calls[0][1].calculateTotal ? { total: all.length } : {}) }, 'query'],
+ ['Mailbox/get', { list: page, state: 'm', notFound: [] }, 'get'],
+ ] };
+ });
+ return requests;
+}
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('JMAP mailbox pagination', () => {
+ it('loads a complete hierarchy across server-clamped pages', async () => {
+ const client = createClient(2);
+ const requests = serve(client, { primary: [
+ { id: 'grandchild', name: 'Grandchild', parentId: 'child' },
+ { id: 'other', name: 'Other' },
+ { id: 'child', name: 'Child', parentId: 'root' },
+ { id: 'root', name: 'Root' },
+ ] }, 1);
+
+ const mailboxes = await client.getMailboxes();
+
+ expect(mailboxes.map(({ id, parentId }) => [id, parentId])).toEqual([
+ ['grandchild', 'child'], ['other', undefined], ['child', 'root'], ['root', undefined],
+ ]);
+ expect(requests.map(([query]) => query[1].position)).toEqual([0, 1, 2, 3]);
+ expect(requests.map(([query]) => query[1].calculateTotal)).toEqual([true, false, false, false]);
+ expect(requests.every((calls) => calls.length === 2 && calls[1][1]['#ids'] && !calls[1][1].ids)).toBe(true);
+ });
+
+ it.each([
+ ['missing ids', undefined, 's', []],
+ ['mixed ids', ['third', 4], 's', []],
+ ['duplicate ids', ['parent'], 's', [{ id: 'parent', name: 'Parent' }]],
+ ['early empty page', [], 's', []],
+ ['missing object', ['third'], 's', []],
+ ])('rejects %s instead of publishing a partial hierarchy', async (_label, ids, queryState, list) => {
+ const client = createClient();
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ vi.spyOn(client as unknown as RequestTarget, 'request')
+ .mockResolvedValueOnce({ methodResponses: [
+ ['Mailbox/get', { list: [{ id: 'child' }, { id: 'parent' }] }, '0'],
+ ] })
+ .mockResolvedValueOnce({ methodResponses: [
+ ['Mailbox/query', { ids: ['child', 'parent'], queryState: 's', total: 3 }, 'query'],
+ ['Mailbox/get', { list: [{ id: 'child', name: 'Child' }, { id: 'parent', name: 'Parent' }] }, 'get'],
+ ] })
+ .mockResolvedValueOnce({ methodResponses: [
+ ['Mailbox/query', { ids, queryState }, 'query'],
+ ['Mailbox/get', { list }, 'get'],
+ ] });
+
+ await expect(client.getMailboxes()).rejects.toThrow();
+ });
+
+ it('prefixes shared mailbox and parent ids', async () => {
+ const client = createClient(1, { primary: { name: 'user@example.com' }, shared: { name: 'team@example.com' } });
+ serve(client, {
+ primary: [{ id: 'inbox', name: 'Inbox' }],
+ shared: [{ id: 'child', name: 'Child', parentId: 'parent' }, { id: 'parent', name: 'Parent' }],
+ });
+
+ expect((await client.getAllMailboxes()).find(({ name }) => name === 'Child')).toMatchObject({
+ id: 'shared:child', originalId: 'child', parentId: 'shared:parent', accountId: 'shared', isShared: true,
+ });
+ });
+
+ it('keeps small accounts on the existing single-request fast path', async () => {
+ const client = createClient(3);
+ const requests = serve(client, { primary: [{ id: 'inbox', name: 'Inbox' }] });
+ expect(await client.getMailboxes()).toHaveLength(1);
+ expect(requests).toHaveLength(0);
+ expect(client['request']).toHaveBeenCalledTimes(1);
+ });
+
+ it.each([true, false])('loads an exact page multiple (total returned: %s)', async (withTotal) => {
+ const client = createClient(2);
+ const list = Array.from({ length: 4 }, (_, i) => ({ id: String(i), name: String(i) }));
+ const requests = serve(client, { primary: list }, Infinity, withTotal);
+ expect(await client.getMailboxes()).toHaveLength(4);
+ expect(requests.map(([query]) => query[1].position)).toEqual(withTotal ? [0, 2] : [0, 2, 4]);
+ expect(requests.map(([query]) => query[1].calculateTotal)).toEqual(withTotal ? [true, false] : [true, false, false]);
+ });
+
+ it('retains Mailbox collection state and packed small-account retrieval', async () => {
+ const client = createClient(2, { primary: { name: 'Self' }, shared: { name: 'Shared' } });
+ serve(client, {
+ primary: [{ id: 'inbox', name: 'Inbox' }],
+ shared: [{ id: 'parent', name: 'Parent' }, { id: 'child', name: 'Child', parentId: 'parent' }, { id: 'other', name: 'Other' }],
+ });
+ const result = await client.getAllMailboxesWithState();
+ expect(result.mailboxes.map(({ id }) => id)).toEqual(['inbox', 'shared:parent', 'shared:child', 'shared:other']);
+ expect(result.states).toEqual({ primary: 'm', shared: 'm' });
+ expect(vi.mocked(client['request']).mock.calls[0][0].map(([name]) => name)).toEqual(['Mailbox/get', 'Mailbox/get']);
+ });
+
+ it('rejects a partial refresh when one paginated account fails', async () => {
+ const client = createClient(2, { primary: { name: 'Self' }, shared: { name: 'Shared' } });
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ vi.spyOn(client as unknown as RequestTarget, 'request')
+ .mockResolvedValueOnce({ methodResponses: [
+ ['Mailbox/get', { list: [{ id: 'a' }, { id: 'b' }] }, '0'],
+ ['Mailbox/get', { state: 'shared-state', list: [{ id: 'inbox', name: 'Shared Inbox' }] }, '1'],
+ ] })
+ .mockRejectedValueOnce(new Error('page failed'));
+ await expect(client.getAllMailboxesWithState()).rejects.toThrow('complete mailbox list');
+ });
+
+ it('pages when an unbounded get is rejected as requestTooLarge (Stalwart 1.0)', async () => {
+ const client = createClient();
+ const list = [{ id: 'a', name: 'A' }, { id: 'b', name: 'B' }, { id: 'c', name: 'C' }];
+ serve(client, { primary: list });
+ vi.mocked(client['request']).mockResolvedValueOnce({ methodResponses: [
+ ['error', { type: 'requestTooLarge' }, '0'],
+ ] });
+ expect((await client.getMailboxes()).map(({ id }) => id)).toEqual(['a', 'b', 'c']);
+ });
+
+ it('pages a shared account whose packed get is rejected as requestTooLarge', async () => {
+ const client = createClient(2, { primary: { name: 'Self' }, shared: { name: 'Shared' } });
+ const shared = [{ id: 'a', name: 'A' }, { id: 'b', name: 'B', parentId: 'a' }, { id: 'c', name: 'C', parentId: 'b' }];
+ serve(client, { primary: [{ id: 'inbox', name: 'Inbox' }], shared });
+ vi.mocked(client['request']).mockResolvedValueOnce({ methodResponses: [
+ ['Mailbox/get', { list: [{ id: 'inbox', name: 'Inbox' }], state: 'm' }, '0'],
+ ['error', { type: 'requestTooLarge' }, '1'],
+ ] });
+ const result = await client.getAllMailboxesWithState();
+ expect(result.mailboxes.map(({ id }) => id)).toEqual(['inbox', 'shared:a', 'shared:b', 'shared:c']);
+ expect(result.states).toEqual({ primary: 'm', shared: 'm' });
+ });
+
+ it('starts over when the mailbox state moves between pages', async () => {
+ const client = createClient();
+ const page = (ids: string[], queryState: string, total?: number) => ({ methodResponses: [
+ ['Mailbox/query', { ids, queryState, ...(total ? { total } : {}) }, 'query'],
+ ['Mailbox/get', { list: ids.map((id) => ({ id, name: id })), state: queryState }, 'get'],
+ ] });
+ const request = vi.spyOn(client as unknown as RequestTarget, 'request')
+ .mockResolvedValueOnce({ methodResponses: [['Mailbox/get', { list: [{ id: 'a' }, { id: 'b' }] }, '0']] })
+ .mockResolvedValueOnce(page(['a', 'b'], 's1', 3))
+ .mockResolvedValueOnce(page(['c'], 's2'))
+ .mockResolvedValueOnce(page(['a', 'b'], 's2', 3))
+ .mockResolvedValueOnce(page(['c'], 's2'));
+
+ const result = await client.getAllMailboxesWithState();
+ expect(result.mailboxes.map(({ id }) => id)).toEqual(['a', 'b', 'c']);
+ expect(result.states).toEqual({ primary: 's2' });
+ expect(request).toHaveBeenCalledTimes(5);
+ });
+
+ it('gives up when the mailbox state keeps moving', async () => {
+ const client = createClient();
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ let n = 0;
+ const request = vi.spyOn(client as unknown as RequestTarget, 'request').mockImplementation(async (calls) => {
+ if (calls[0][0] === 'Mailbox/get') return { methodResponses: [['Mailbox/get', { list: [{ id: 'a' }, { id: 'b' }] }, '0']] };
+ const position = calls[0][1].position as number;
+ const ids = position === 0 ? ['a', 'b'] : ['c'];
+ const state = `s${n++}`;
+ return { methodResponses: [
+ ['Mailbox/query', { ids, queryState: state, ...(position === 0 ? { total: 3 } : {}) }, 'query'],
+ ['Mailbox/get', { list: ids.map((id) => ({ id, name: id })), state }, 'get'],
+ ] };
+ });
+
+ await expect(client.getMailboxes()).rejects.toThrow('changed while it was being loaded');
+ expect(request).toHaveBeenCalledTimes(1 + 3 * 2);
+ });
+
+ it.each([false, true])('respects maxCallsInRequest=1 (shared: %s)', async (shared) => {
+ const client = createClient(2, shared ? { primary: { name: 'Self' }, shared: { name: 'Shared' } } : undefined);
+ Object.assign(client, { capabilities: { 'urn:ietf:params:jmap:core': { maxObjectsInGet: 2, maxCallsInRequest: 1 } } });
+ const boxes = [{ id: 'a', name: 'A' }, { id: 'b', name: 'B' }, { id: 'c', name: 'C' }];
+ const spy = vi.spyOn(client as unknown as RequestTarget, 'request').mockImplementation(async (calls) => {
+ expect(calls).toHaveLength(1);
+ const [name, args, tag] = calls[0];
+ if (name === 'Mailbox/query') {
+ const ids = boxes.slice(args.position as number, (args.position as number) + 2).map(box => box.id);
+ return { methodResponses: [[name, { ids, queryState: 'q', total: 3 }, tag]] };
+ }
+ const ids = args.ids as string[] | undefined;
+ expect(args['#ids']).toBeUndefined();
+ const list = ids ? boxes.filter(box => ids.includes(box.id)) : boxes.slice(0, 2);
+ return { methodResponses: [[name, { list, state: 'm', notFound: [] }, tag]] };
+ });
+ const result = shared ? await client.getAllMailboxes() : await client.getMailboxes();
+ expect(result).toHaveLength(shared ? 6 : 3);
+ const gets = spy.mock.calls.flatMap(([calls]) => calls).filter(([name, args]) => name === 'Mailbox/get' && args.ids);
+ for (const accountId of shared ? ['primary', 'shared'] : ['primary']) {
+ expect(gets.filter(([, args]) => args.accountId === accountId).map(([, args]) => args.ids))
+ .toEqual([['a', 'b'], ['c']]);
+ }
+ });
+});
diff --git a/lib/__tests__/plugin-actions-proxy-api.test.ts b/lib/__tests__/plugin-actions-proxy-api.test.ts
index 6202f506b..127418b5b 100644
--- a/lib/__tests__/plugin-actions-proxy-api.test.ts
+++ b/lib/__tests__/plugin-actions-proxy-api.test.ts
@@ -18,6 +18,9 @@ import { dayLabelsByDate, resetDayLabels } from '../plugin-sandbox/day-labels';
import { allPages, resetPages } from '../plugin-sandbox/pages';
import { onPanelRequest, resetPanelRequests } from '../plugin-sandbox/panel-requests';
import { onPageNavigation, resetPageNavigation } from '../plugin-sandbox/page-navigation';
+import { onOpenTask, resetOpenTask } from '../plugin-sandbox/open-task';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useSettingsStore } from '@/stores/settings-store';
import type { StreamSink } from '../plugin-sandbox/proxy-client';
import '../plugin-sandbox/loader';
@@ -169,6 +172,77 @@ describe('day labels and pages', () => {
await expect(dispatchApiCall(paged, 'ui.openPage', ['files'])).resolves.toBe(false);
});
});
+
+ describe('ui.openTask', () => {
+ beforeEach(() => { resetOpenTask(); });
+
+ it('opens the task in the calendar\'s editor and says whether it did', async () => {
+ const seen: string[] = [];
+ onOpenTask((id) => { seen.push(id); return id === 't1'; });
+ const tasky = plugin({ id: 'ot1', permissions: ['ui:tasks'] });
+ await expect(dispatchApiCall(tasky, 'ui.openTask', ['t1'])).resolves.toBe(true);
+ await expect(dispatchApiCall(plugin({ id: 'ot1', permissions: ['tasks:read'] }), 'ui.openTask', ['gone'])).resolves.toBe(false);
+ expect(seen).toEqual(['t1', 'gone']);
+ });
+
+ it('answers false while no calendar is on screen', async () => {
+ await expect(dispatchApiCall(plugin({ id: 'ot2', permissions: ['ui:tasks'] }), 'ui.openTask', ['t1'])).resolves.toBe(false);
+ });
+
+ it('needs ui:tasks or tasks:read and a task id', async () => {
+ const seen: string[] = [];
+ onOpenTask((id) => { seen.push(id); return true; });
+ await expect(dispatchApiCall(plugin({ id: 'ot3', permissions: ['calendar:read'] }), 'ui.openTask', ['t1'])).rejects.toThrow(/lacks permission/);
+ await expect(dispatchApiCall(plugin({ id: 'ot3', permissions: ['ui:tasks'] }), 'ui.openTask', [42])).rejects.toThrow(/taskId/);
+ expect(seen).toEqual([]);
+ });
+ });
+
+ describe('ui.openCalendar', () => {
+ const seen: string[] = [];
+ beforeEach(() => {
+ resetPageNavigation();
+ seen.length = 0;
+ useSettingsStore.setState({ enableCalendarTasks: true });
+ useCalendarStore.setState({ viewMode: 'month' });
+ });
+
+ it('opens the task view: the calendar\'s view set, the tab moved to its permalink', async () => {
+ onPageNavigation((href) => { seen.push(href); });
+ await expect(dispatchApiCall(plugin({ id: 'tv1', permissions: ['ui:tasks'] }), 'ui.openCalendar', [{ view: 'tasks' }])).resolves.toBe(true);
+ expect(useCalendarStore.getState().viewMode).toBe('tasks');
+ await expect(dispatchApiCall(plugin({ id: 'tv1', permissions: ['calendar:read'] }), 'ui.openCalendar', [{ view: 'week' }])).resolves.toBe(true);
+ expect(seen).toEqual(['/calendar/tasks', '/calendar/week']);
+ });
+
+ it('needs the view\'s permission and refuses any other view', async () => {
+ onPageNavigation((href) => { seen.push(href); });
+ await expect(dispatchApiCall(plugin({ id: 'tv2', permissions: ['calendar:read'] }), 'ui.openCalendar', [{ view: 'tasks' }])).rejects.toThrow(/lacks permission/);
+ await expect(dispatchApiCall(plugin({ id: 'tv2', permissions: ['ui:tasks'] }), 'ui.openCalendar', [{ view: 'month' }])).rejects.toThrow(/lacks permission/);
+ await expect(dispatchApiCall(plugin({ id: 'tv2', permissions: ['ui:tasks'] }), 'ui.openCalendar', [{ view: 'settings' }])).rejects.toThrow(/view must be one of/);
+ await expect(dispatchApiCall(plugin({ id: 'tv2', permissions: ['ui:tasks'] }), 'ui.openCalendar', [{ view: 'tasks', date: 'x' }])).rejects.toThrow(/unknown property/);
+ expect(seen).toEqual([]);
+ expect(useCalendarStore.getState().viewMode).toBe('month');
+ });
+
+ it('answers false while nothing can move the tab or the user has tasks off', async () => {
+ const tasky = plugin({ id: 'tv3', permissions: ['ui:tasks'] });
+ await expect(dispatchApiCall(tasky, 'ui.openCalendar', [{ view: 'tasks' }])).resolves.toBe(false);
+ onPageNavigation((href) => { seen.push(href); });
+ useSettingsStore.setState({ enableCalendarTasks: false });
+ await expect(dispatchApiCall(tasky, 'ui.openCalendar', [{ view: 'tasks' }])).resolves.toBe(false);
+ expect(seen).toEqual([]);
+ expect(useCalendarStore.getState().viewMode).toBe('month');
+ });
+
+ it('moves the tab at most 10 times a minute', async () => {
+ onPageNavigation((href) => { seen.push(href); });
+ const busy = plugin({ id: 'tv4', permissions: ['ui:tasks'] });
+ for (let i = 0; i < 10; i++) await dispatchApiCall(busy, 'ui.openCalendar', [{ view: 'tasks' }]);
+ await expect(dispatchApiCall(busy, 'ui.openCalendar', [{ view: 'tasks' }])).rejects.toThrow(/a minute/);
+ expect(seen).toHaveLength(10);
+ });
+ });
});
describe('proxy.fetch', () => {
diff --git a/lib/__tests__/plugin-dialog-anchor.test.ts b/lib/__tests__/plugin-dialog-anchor.test.ts
new file mode 100644
index 000000000..77a9c71d3
--- /dev/null
+++ b/lib/__tests__/plugin-dialog-anchor.test.ts
@@ -0,0 +1,136 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { InstalledPlugin } from '../plugin-types';
+import { dispatchApiCall } from '../plugin-sandbox/host-api';
+import { head, resetDialogLimits, resolveHead } from '../plugin-sandbox/host-dialog';
+import {
+ forgetTrigger, noteTrigger, placePopover, trackTriggers, triggerAnchor, POPOVER_GAP, POPOVER_MARGIN, TRIGGER_WINDOW_MS,
+} from '../plugin-sandbox/dialog-anchor';
+
+// api.ui.openDialog({ anchor: 'trigger' }): the dialog beside the control the
+// user activated last, when that was a moment ago.
+
+function plugin(): InstalledPlugin {
+ return {
+ id: 'p1', name: 'Plugin One', version: '1.0.0', author: '', description: '', type: 'hook',
+ permissions: [], entrypoint: 'index.js', enabled: true, status: 'running', settings: {}, managed: true,
+ };
+}
+
+/** A control on the page standing at this rect. */
+function control(html: string, rect: { left: number; top: number; width: number; height: number }): HTMLElement {
+ const host = document.createElement('div');
+ host.innerHTML = html;
+ document.body.appendChild(host);
+ const el = host.querySelector('[data-at]') ?? host.firstElementChild as HTMLElement;
+ el.getBoundingClientRect = () => ({
+ left: rect.left, top: rect.top, right: rect.left + rect.width, bottom: rect.top + rect.height,
+ width: rect.width, height: rect.height, x: rect.left, y: rect.top, toJSON: () => ({}),
+ });
+ return el;
+}
+
+let stop: () => void = () => {};
+beforeEach(() => {
+ forgetTrigger();
+ resetDialogLimits();
+ while (head()) resolveHead(null);
+ stop = trackTriggers();
+});
+afterEach(() => {
+ stop();
+ document.body.innerHTML = '';
+});
+
+describe('the trigger a dialog opens beside', () => {
+ it('is the button under the pointer, measured again when the dialog opens', () => {
+ const button = control('', { left: 100, top: 50, width: 24, height: 24 });
+ button.querySelector('span')!.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 110, clientY: 60 }));
+ expect(triggerAnchor()).toEqual({ left: 100, top: 50, right: 124, bottom: 74 });
+ });
+
+ it('is the point a menu entry was chosen at, the menu being gone', () => {
+ const entry = control('', { left: 300, top: 200, width: 180, height: 28 });
+ entry.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 320, clientY: 210 }));
+ entry.parentElement!.remove();
+ expect(triggerAnchor()).toEqual({ left: 320, top: 210, right: 320, bottom: 210 });
+ });
+
+ it('is the focused control on Enter, and nothing after another key', () => {
+ const button = control('', { left: 10, top: 20, width: 20, height: 20 });
+ button.focus();
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+ expect(triggerAnchor()).toEqual({ left: 10, top: 20, right: 30, bottom: 40 });
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift' }));
+ expect(triggerAnchor()).not.toBeNull();
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 's' }));
+ expect(triggerAnchor()).toBeNull();
+ });
+
+ it('is forgotten after the window', () => {
+ const button = control('', { left: 10, top: 20, width: 20, height: 20 });
+ noteTrigger(button, undefined, 1000);
+ expect(triggerAnchor(1000 + TRIGGER_WINDOW_MS)).not.toBeNull();
+ expect(triggerAnchor(1001 + TRIGGER_WINDOW_MS)).toBeNull();
+ });
+
+ it('keeps its rect when the control has gone', () => {
+ const button = control('', { left: 10, top: 20, width: 20, height: 20 });
+ noteTrigger(button);
+ button.remove();
+ expect(triggerAnchor()).toEqual({ left: 10, top: 20, right: 30, bottom: 40 });
+ });
+});
+
+describe('placePopover', () => {
+ const viewport = { width: 1000, height: 800 };
+ const size = { width: 320, height: 200 };
+
+ it('stands below the anchor, at its start', () => {
+ expect(placePopover({ left: 100, top: 50, right: 124, bottom: 74 }, size, viewport))
+ .toEqual({ left: 100, top: 74 + POPOVER_GAP });
+ });
+
+ it('lines up with the end in RTL', () => {
+ expect(placePopover({ left: 600, top: 50, right: 624, bottom: 74 }, size, viewport, true).left).toBe(624 - 320);
+ });
+
+ it('goes above when it does not fit below', () => {
+ expect(placePopover({ left: 100, top: 700, right: 124, bottom: 724 }, size, viewport).top).toBe(700 - POPOVER_GAP - 200);
+ });
+
+ it('stays inside the window', () => {
+ expect(placePopover({ left: 950, top: 10, right: 980, bottom: 30 }, size, viewport).left).toBe(1000 - POPOVER_MARGIN - 320);
+ expect(placePopover({ left: 100, top: 300, right: 100, bottom: 300 }, { width: 320, height: 700 }, viewport).top)
+ .toBe(800 - POPOVER_MARGIN - 700);
+ });
+});
+
+describe("ui.openDialog's anchor", () => {
+ it("is the trigger's place when the plugin asks for it", async () => {
+ const button = control('', { left: 100, top: 50, width: 24, height: 24 });
+ button.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 110, clientY: 60 }));
+ const result = dispatchApiCall(plugin(), 'ui.openDialog', [{ slot: 'plugin-dialog', anchor: 'trigger', width: 320 }]);
+ await vi.waitFor(() => expect(head()).not.toBeNull());
+ expect(head()?.anchor).toEqual({ left: 100, top: 50, right: 124, bottom: 74 });
+ resolveHead(null);
+ await expect(result).resolves.toBeNull();
+ });
+
+ it('is none without the option, without a trigger, or with a place the plugin names', async () => {
+ const button = control('', { left: 100, top: 50, width: 24, height: 24 });
+ button.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }));
+ for (const opts of [{ slot: 'plugin-dialog' }, { slot: 'plugin-dialog', anchor: { left: 0, top: 0, right: 0, bottom: 0 } }]) {
+ const result = dispatchApiCall(plugin(), 'ui.openDialog', [opts]);
+ await vi.waitFor(() => expect(head()).not.toBeNull());
+ expect(head()?.anchor).toBeUndefined();
+ resolveHead(null);
+ await result;
+ }
+ forgetTrigger();
+ const result = dispatchApiCall(plugin(), 'ui.openDialog', [{ slot: 'plugin-dialog', anchor: 'trigger' }]);
+ await vi.waitFor(() => expect(head()).not.toBeNull());
+ expect(head()?.anchor).toBeUndefined();
+ resolveHead(null);
+ await result;
+ });
+});
diff --git a/lib/__tests__/plugin-hook-permissions.test.ts b/lib/__tests__/plugin-hook-permissions.test.ts
index 4f6557044..550be16bb 100644
--- a/lib/__tests__/plugin-hook-permissions.test.ts
+++ b/lib/__tests__/plugin-hook-permissions.test.ts
@@ -43,7 +43,7 @@ vi.mock('../plugin-sandbox/shortcuts', () => ({ registerShortcuts: () => () => {
import { loadSandboxedPlugin, unloadSandboxedPlugin, setSandboxStoreAccessor } from '../plugin-sandbox/loader';
import { get as getActive } from '../plugin-sandbox/registry';
-import { emailHooks, renderHooks, appLifecycleHooks } from '../plugin-hooks';
+import { emailHooks, renderHooks, appLifecycleHooks, calendarHooks } from '../plugin-hooks';
import { hookPermission, mayOfferSlot, mayRegisterHook, pluginHasPermission } from '../plugin-sandbox/permissions';
import { useEmailStore } from '@/stores/email-store';
import type { Email } from '../jmap/types';
@@ -143,6 +143,74 @@ describe('a message that is already open', () => {
});
});
+describe('reminders', () => {
+ const eventAlert = { id: 'a1', eventId: 'e1', eventTitle: 'Dentist', triggerTime: '2026-10-31T08:00:00.000Z' };
+ const taskAlert = { id: 'follow-up', taskId: 't1', taskTitle: 'Call back Anna', triggerTime: '2026-10-31T08:00:00.000Z' };
+ const reminderHooks = ['onBeforeCalendarAlert', 'onCalendarAlert', 'onCalendarAlertAcknowledge'];
+
+ function calls(): unknown[][] {
+ return (mocks.invokeHook as ReturnType).mock.calls;
+ }
+
+ it.each(['onCalendarAlert', 'onCalendarAlertAcknowledge'])('%s may be registered with calendar:read or tasks:read', (hook) => {
+ expect(mayRegisterHook(plugin({ permissions: ['calendar:read'] }), hook)).toBe(true);
+ expect(mayRegisterHook(plugin({ permissions: ['tasks:read'] }), hook)).toBe(true);
+ expect(mayRegisterHook(plugin({ permissions: ['email:read'] }), hook)).toBe(false);
+ });
+
+ it('lets only a plugin that may change the calendar or the tasks take a reminder over', () => {
+ expect(mayRegisterHook(plugin({ permissions: ['calendar:read', 'tasks:read'] }), 'onBeforeCalendarAlert')).toBe(false);
+ expect(mayRegisterHook(plugin({ permissions: ['calendar:write'] }), 'onBeforeCalendarAlert')).toBe(true);
+ expect(mayRegisterHook(plugin({ permissions: ['tasks:write'] }), 'onBeforeCalendarAlert')).toBe(true);
+ });
+
+ it("hands a plugin with tasks:read a task's reminder only", async () => {
+ mocks.background.hooks = reminderHooks;
+ await loadSandboxedPlugin(plugin({ permissions: ['tasks:read'] }));
+
+ await calendarHooks.onCalendarAlert.emit(eventAlert);
+ await calendarHooks.onCalendarAlertAcknowledge.emit({ alertId: 'a1', eventId: 'e1' });
+ expect(calls()).toHaveLength(0);
+
+ await calendarHooks.onCalendarAlert.emit(taskAlert);
+ await calendarHooks.onCalendarAlertAcknowledge.emit({ alertId: 'follow-up', taskId: 't1' });
+ expect(calls().map((c) => c[0])).toEqual(['onCalendarAlert', 'onCalendarAlertAcknowledge']);
+ });
+
+ it("lets a plugin with tasks:write silence a task's reminder, never an event's", async () => {
+ mocks.background.hooks = ['onBeforeCalendarAlert'];
+ await loadSandboxedPlugin(plugin({ permissions: ['tasks:read', 'tasks:write', 'calendar:read'] }));
+ (mocks.invokeHook as ReturnType).mockResolvedValue(false);
+
+ expect(await calendarHooks.onBeforeCalendarAlert.intercept(eventAlert)).toBe(true);
+ expect(calls()).toHaveLength(0);
+ expect(await calendarHooks.onBeforeCalendarAlert.intercept(taskAlert)).toBe(false);
+ expect(calls().map((c) => c[0])).toEqual(['onBeforeCalendarAlert']);
+ });
+
+ it('does not let a plugin that only reads silence a reminder', async () => {
+ mocks.background.hooks = ['onBeforeCalendarAlert'];
+ await loadSandboxedPlugin(plugin({ permissions: ['calendar:read', 'tasks:read'] }));
+ (mocks.invokeHook as ReturnType).mockResolvedValue(false);
+
+ expect(await calendarHooks.onBeforeCalendarAlert.intercept(eventAlert)).toBe(true);
+ expect(await calendarHooks.onBeforeCalendarAlert.intercept(taskAlert)).toBe(true);
+ expect(calls()).toHaveLength(0);
+ });
+
+ it("hands a plugin with calendar:read an event's reminder only", async () => {
+ mocks.background.hooks = reminderHooks;
+ await loadSandboxedPlugin(plugin({ permissions: ['calendar:read'] }));
+
+ await calendarHooks.onCalendarAlert.emit(taskAlert);
+ await calendarHooks.onCalendarAlertAcknowledge.emit({ alertId: 'follow-up', taskId: 't1' });
+ expect(calls()).toHaveLength(0);
+
+ await calendarHooks.onCalendarAlert.emit(eventAlert);
+ expect(calls().map((c) => c[0])).toEqual(['onCalendarAlert']);
+ });
+});
+
describe('permission tables', () => {
it('refuses a hook it does not know', () => {
expect(hookPermission('onSomethingNew')).toBeNull();
diff --git a/lib/__tests__/plugin-hooks.test.ts b/lib/__tests__/plugin-hooks.test.ts
index 68e7749ef..eb67afeb4 100644
--- a/lib/__tests__/plugin-hooks.test.ts
+++ b/lib/__tests__/plugin-hooks.test.ts
@@ -269,6 +269,25 @@ describe('onBeforeBlobUpload offload budget', () => {
});
});
+describe('onBeforeCalendarAlert budget', () => {
+ it('shows the reminder after 5s when a plugin hangs, not after the dialog budget', async () => {
+ vi.useFakeTimers();
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ try {
+ calendarHooks.onBeforeCalendarAlert.register('hung', () => new Promise(() => {}));
+ let allowed: boolean | undefined;
+ void calendarHooks.onBeforeCalendarAlert.intercept({ id: 'a1', taskId: 't1' }).then((a) => { allowed = a; });
+ await vi.advanceTimersByTimeAsync(4_900);
+ expect(allowed).toBeUndefined();
+ await vi.advanceTimersByTimeAsync(200);
+ expect(allowed).toBe(true);
+ } finally {
+ vi.useRealTimers();
+ vi.restoreAllMocks();
+ }
+ });
+});
+
describe('isExternalAttachmentResult', () => {
const valid = { externalAttachment: true, html: 'y', text: 'https://x/y' };
diff --git a/lib/__tests__/plugin-host-calendar-tasks.test.ts b/lib/__tests__/plugin-host-calendar-tasks.test.ts
index 2ae3d3d97..03d20d6c3 100644
--- a/lib/__tests__/plugin-host-calendar-tasks.test.ts
+++ b/lib/__tests__/plugin-host-calendar-tasks.test.ts
@@ -7,6 +7,8 @@ import { useCalendarStore } from '@/stores/calendar-store';
import { useTaskStore } from '@/stores/task-store';
import { useIdentityStore } from '@/stores/identity-store';
import { useSettingsStore } from '@/stores/settings-store';
+import { useContactStore } from '@/stores/contact-store';
+import { BIRTHDAY_CALENDAR_ID, BIRTHDAY_CALENDAR_COLOR } from '@/lib/birthday-calendar';
import { calendarHooks, taskHooks } from '../plugin-hooks';
vi.mock('@/stores/toast-store', () => ({
@@ -24,7 +26,9 @@ function plugin(perms: string[]): InstalledPlugin {
}
const READ = plugin(['calendar:read', 'tasks:read']);
+const READ_WITH_CONTACTS = plugin(['calendar:read', 'tasks:read', 'contacts:read']);
const WRITE = plugin(['calendar:read', 'calendar:write', 'tasks:read', 'tasks:write']);
+const WRITE_WITH_CONTACTS = plugin(['calendar:read', 'calendar:write', 'tasks:read', 'tasks:write', 'contacts:read']);
const NONE = plugin([]);
const work = { id: 'cal-work', name: 'Work', color: '#f00', isVisible: true, isDefault: true, isTasksOnly: false } as Calendar;
@@ -73,7 +77,8 @@ beforeEach(() => {
identities: [{ id: 'id1', name: 'Ann', email: 'ann@example.com' }] as never,
preferredPrimaryId: null,
});
- useSettingsStore.setState({ timeZone: 'Europe/Berlin' } as never);
+ useSettingsStore.setState({ timeZone: 'Europe/Berlin', showBirthdayCalendar: false, birthdayCalendarColor: BIRTHDAY_CALENDAR_COLOR } as never);
+ useContactStore.setState({ contacts: [], contactsLoaded: true });
});
afterEach(() => {
@@ -81,6 +86,8 @@ afterEach(() => {
useCalendarStore.setState({ calendars: [], events: [] });
useTaskStore.setState({ tasks: [] });
useIdentityStore.setState({ identities: [] });
+ useSettingsStore.setState({ showBirthdayCalendar: false });
+ useContactStore.setState({ contacts: [] });
calendarHooks.onBeforeEventCreate.removePlugin('veto');
taskHooks.onBeforeTaskDelete.removePlugin('veto');
});
@@ -196,6 +203,105 @@ describe('api.calendar', () => {
await expect(call(WRITE, 'calendar.deleteEvent', 'missing')).rejects.toThrow(/no event with id "missing"/);
await expect(call(WRITE, 'calendar.updateEvent', 'e1', {})).rejects.toThrow(/patch is empty/);
});
+
+ it('includes the virtual birthday calendar in listCalendars only when contacts:read is held and showBirthdayCalendar is enabled', async () => {
+ useSettingsStore.setState({ showBirthdayCalendar: true, birthdayCalendarColor: '#f59e0b' });
+ // Plugin without contacts:read does not see the birthday calendar
+ const calsWithoutContacts = await call(READ, 'calendar.listCalendars') as { id: string }[];
+ expect(calsWithoutContacts.some((c) => c.id === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ // Plugin with contacts:read sees the birthday calendar
+ const cals = await call(READ_WITH_CONTACTS, 'calendar.listCalendars') as { id: string; name: string; color: string }[];
+ expect(cals).toEqual([
+ { id: 'cal-work', name: 'Work', color: '#f00', isVisible: true, isDefault: true, isTasksOnly: false },
+ { id: 'cal-todo', name: 'To do', color: '', isVisible: true, isDefault: false, isTasksOnly: true },
+ { id: BIRTHDAY_CALENDAR_ID, name: 'Birthdays', color: '#f59e0b', isVisible: true, isDefault: false, isTasksOnly: false },
+ ]);
+ });
+
+ it('returns contact birthdays in getEvents only when contacts:read is held and showBirthdayCalendar is enabled', async () => {
+ useSettingsStore.setState({ showBirthdayCalendar: true });
+ useContactStore.setState({
+ contacts: [
+ {
+ id: 'c1',
+ name: { full: 'Alice Smith' },
+ anniversaries: { b1: { kind: 'birth', date: '1990-05-15' } },
+ } as never,
+ ],
+ });
+
+ // Plugin without contacts:read does not see birthday events
+ const eventsWithoutContacts = await call(READ, 'calendar.getEvents', { from: '2026-05-01', to: '2026-06-01' }) as { id: string; calendarId: string }[];
+ expect(eventsWithoutContacts.some((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ // Plugin with contacts:read sees birthday events
+ const events = await call(READ_WITH_CONTACTS, 'calendar.getEvents', { from: '2026-05-01', to: '2026-06-01' }) as {
+ id: string; title: string; calendarId: string; isAllDay: boolean; start: string;
+ }[];
+
+ const birthday = events.find((e) => e.calendarId === BIRTHDAY_CALENDAR_ID);
+ expect(birthday).toBeDefined();
+ expect(birthday).toEqual(expect.objectContaining({
+ id: 'birthday-c1-b1-2026',
+ title: '🎂 Alice Smith (36)',
+ calendarId: BIRTHDAY_CALENDAR_ID,
+ isAllDay: true,
+ start: '2026-05-15T00:00:00',
+ }));
+
+ // Respects date range bounds using same start/end as regular events
+ const beforeBirthday = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-01', to: '2026-05-10',
+ }) as { calendarId: string }[];
+ expect(beforeBirthday.some((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ const afterBirthday = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-20', to: '2026-05-31',
+ }) as { calendarId: string }[];
+ expect(afterBirthday.some((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ // The end is exclusive, as for regular events: a week ending at the
+ // birthday's midnight does not contain it.
+ const weekEndingOnBirthday = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-08', to: '2026-05-15',
+ }) as { calendarId: string }[];
+ expect(weekEndingOnBirthday.some((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ // A birthday covers its whole day, so a range inside that day finds it.
+ const middayOnBirthday = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-15T10:00', to: '2026-05-15T12:00',
+ }) as { id: string }[];
+ expect(middayOnBirthday.map((e) => e.id)).toContain('birthday-c1-b1-2026');
+
+ // Respects calendarIds filtering
+ const onlyWork = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-01', to: '2026-06-01', calendarIds: ['cal-work'],
+ }) as { calendarId: string }[];
+ expect(onlyWork.some((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(false);
+
+ const onlyBirthdays = await call(READ_WITH_CONTACTS, 'calendar.getEvents', {
+ from: '2026-05-01', to: '2026-06-01', calendarIds: [BIRTHDAY_CALENDAR_ID],
+ }) as { calendarId: string }[];
+ expect(onlyBirthdays.every((e) => e.calendarId === BIRTHDAY_CALENDAR_ID)).toBe(true);
+
+ // Fetching a birthday event by ID requires contacts:read
+ expect(await call(READ, 'calendar.getEvent', 'birthday-c1-b1-2026')).toBeNull();
+ const single = await call(READ_WITH_CONTACTS, 'calendar.getEvent', 'birthday-c1-b1-2026');
+ expect(single).toEqual(expect.objectContaining({
+ id: 'birthday-c1-b1-2026',
+ title: '🎂 Alice Smith (36)',
+ }));
+
+ // Birthday events cannot be mutated
+ await expect(call(WRITE_WITH_CONTACTS, 'calendar.updateEvent', 'birthday-c1-b1-2026', { title: 'New' }))
+ .rejects.toThrow(/birthday events cannot be modified/);
+ await expect(call(WRITE_WITH_CONTACTS, 'calendar.deleteEvent', 'birthday-c1-b1-2026'))
+ .rejects.toThrow(/birthday events cannot be modified/);
+ await expect(call(WRITE_WITH_CONTACTS, 'calendar.createEvent', {
+ title: 'New', calendarId: BIRTHDAY_CALENDAR_ID, start: '2026-05-15T10:00', end: '2026-05-15T11:00',
+ })).rejects.toThrow(/no calendar with id "__birthday-calendar__"/);
+ });
});
describe('api.tasks', () => {
diff --git a/lib/__tests__/plugin-permission-coverage.test.ts b/lib/__tests__/plugin-permission-coverage.test.ts
index adfa971ca..ececac6f5 100644
--- a/lib/__tests__/plugin-permission-coverage.test.ts
+++ b/lib/__tests__/plugin-permission-coverage.test.ts
@@ -37,7 +37,10 @@ function gatedPermissions(): Map {
where.set(perm, [...(where.get(perm) ?? []), by]);
};
for (const [method, perm] of Object.entries(PERM_PER_METHOD)) add(perm, `method ${method}`);
- for (const [hook, spec] of Object.entries(HOOK_CATALOG)) add(spec.permission, `hook ${hook}`);
+ for (const [hook, spec] of Object.entries(HOOK_CATALOG)) {
+ add(spec.permission, `hook ${hook}`);
+ if ('alsoPermission' in spec) add(spec.alsoPermission, `hook ${hook}`);
+ }
for (const [slot, spec] of Object.entries(SLOT_CATALOG)) {
for (const perm of spec.permissions) add(perm, `slot ${slot}`);
if (spec.props === '*') continue;
diff --git a/lib/__tests__/settings-search.test.ts b/lib/__tests__/settings-search.test.ts
index 94d83011a..c4728bd46 100644
--- a/lib/__tests__/settings-search.test.ts
+++ b/lib/__tests__/settings-search.test.ts
@@ -77,6 +77,12 @@ describe('settings search index (English messages)', () => {
expect(resultsFor('composing', 'reply signature').map((r) => r.label)).toContain('Signature position');
});
+ it('finds the newer signature settings on their tabs', () => {
+ expect(labelsFor('composing')).toContain('Signature on new mail');
+ expect(labelsFor('composing')).toContain('Signature on replies & forwards');
+ expect(labelsFor('composing')).toContain('Undo send / send delay');
+ });
+
it('marks the rows the Advanced switch hides', () => {
const advanced = settingsSubResults(en, 'message_list', 'Bulwark').filter((r) => r.advanced).map((r) => r.label);
expect(advanced).toContain('Emails per page');
diff --git a/lib/__tests__/sw-push-owner.test.ts b/lib/__tests__/sw-push-owner.test.ts
new file mode 100644
index 000000000..ade1e246a
--- /dev/null
+++ b/lib/__tests__/sw-push-owner.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { parseMailPath, resolveFolderRef } from '@/lib/deep-links';
+import type { Mailbox } from '@/lib/jmap/types';
+import { pushClick } from './helpers/push-click';
+
+const folders = [
+ { id: 'a', name: 'Inbox', role: 'inbox', accountId: 'personal', totalEmails: 0, unreadEmails: 0 },
+ { id: 'team:a', originalId: 'a', name: 'Inbox', role: 'inbox', isShared: true, accountId: 'team', totalEmails: 0, unreadEmails: 0 },
+] as Mailbox[];
+
+function parseTarget(target: string) {
+ const url = new URL(target, 'https://mail.example.test');
+ return parseMailPath(url.pathname.split('/mail/')[1].split('/'), url.searchParams);
+}
+
+describe('push click keeps the owning mailbox (#1491)', () => {
+ for (const owner of ['personal', 'team']) {
+ for (const unreadTotal of [1, 3]) {
+ for (const warm of [false, true]) {
+ it(`${owner}, ${unreadTotal} unread, ${warm ? 'existing' : 'new'} window`, async () => {
+ const target = await pushClick(owner, async (url) => {
+ expect(new URL(url, 'https://mail.example.test').searchParams.get('accountId')).toBe(owner);
+ return { slot: 0, unreadTotal, email: { id: 'same-id', threadId: 't', subject: 'Mail' } };
+ }, { warm });
+ const link = parseTarget(target);
+ expect(link?.slot).toBe(0);
+ if (unreadTotal === 1) {
+ expect(link).toMatchObject({ kind: 'message', id: 'same-id', ownerAccountId: owner });
+ } else {
+ expect(link).toMatchObject({ kind: 'folder', ref: 'inbox', ownerAccountId: owner });
+ if (link?.kind !== 'folder') throw new Error('Expected folder link');
+ expect(resolveFolderRef(link.ref, folders, link.ownerAccountId)).toBe(owner === 'team' ? 'team:a' : 'a');
+ }
+ });
+ }
+ }
+ }
+
+ it('keeps the owner when organisation policy hides message details', async () => {
+ const target = await pushClick('team', async () => ({ slot: 2, unreadTotal: 1, redacted: true, email: { id: 'same-id' } }));
+ expect(parseTarget(target)).toMatchObject({ kind: 'message', ownerAccountId: 'team', slot: 2 });
+ });
+
+ it('keeps the login slot and owner with a mount prefix and legacy payload', async () => {
+ const target = await pushClick('team', async () => ({ slot: 2, unreadTotal: 3, email: { id: 'same-id' } }), { basePath: '/webmail', legacy: true });
+ expect(target).toMatch(/^\/webmail\/mail\/folder\/inbox\?/);
+ expect(parseTarget(target)).toMatchObject({ kind: 'folder', ownerAccountId: 'team', slot: 2 });
+ });
+
+ it('keeps the slot and owner where URLSearchParams has no size', async () => {
+ const target = await pushClick('team', async () => ({ slot: 1, unreadTotal: 1, email: { id: 'same-id' } }), { noParamsSize: true });
+ expect(parseTarget(target)).toMatchObject({ kind: 'message', ownerAccountId: 'team', slot: 1 });
+ });
+
+ it('does not fall back to a personal folder for an unavailable owner', () => {
+ expect(resolveFolderRef('inbox', folders, 'unavailable')).toBeNull();
+ });
+
+ it('keeps old unscoped folder links working', () => {
+ expect(resolveFolderRef('inbox', folders)).toBe('a');
+ });
+});
diff --git a/lib/__tests__/template-utils.test.ts b/lib/__tests__/template-utils.test.ts
index cab6e7adb..05e677966 100644
--- a/lib/__tests__/template-utils.test.ts
+++ b/lib/__tests__/template-utils.test.ts
@@ -12,6 +12,7 @@ import {
importTemplates,
spliceTemplateAboveSignature,
composeBodyHasUserContent,
+ embedTemplateImages,
} from '../template-utils';
import type { EmailTemplate } from '../template-types';
@@ -437,3 +438,51 @@ describe('composeBodyHasUserContent', () => {
expect(composeBodyHasUserContent(`
`, upload);
+ expect(upload).toHaveBeenCalledTimes(1);
+ expect(html.match(/data-cid="img1@webmail"/g)).toHaveLength(2);
+ });
+
+ it('replaces a cid the template was saved with', async () => {
+ const html = await embedTemplateImages(``, uploader());
+ expect(html).toContain('data-cid="img1@webmail"');
+ expect(html).not.toContain('old@webmail');
+ });
+
+ it('leaves remote, cid: and non-raster images alone', async () => {
+ const upload = uploader();
+ const html = '
';
+ expect(await embedTemplateImages(html, upload)).toBe(html);
+ expect(upload).not.toHaveBeenCalled();
+ });
+
+ it('keeps an image as it is when its upload fails', async () => {
+ const html = ``;
+ expect(await embedTemplateImages(html, async () => null)).toBe(html);
+ });
+});
diff --git a/lib/boot-skeleton/__tests__/boot-script.test.ts b/lib/boot-skeleton/__tests__/boot-script.test.ts
new file mode 100644
index 000000000..9e0bcef60
--- /dev/null
+++ b/lib/boot-skeleton/__tests__/boot-script.test.ts
@@ -0,0 +1,669 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { bootConfig, bootSkeletonScript, type BootLayoutConfig } from '../boot-script';
+import { THEME_CACHE_KEY } from '../keys';
+
+/**
+ * Runs the exact string the root layout inlines into , in a scope with
+ * none of this module's imports: a function that reached for one would throw
+ * here (and in the browser), and the test would see default attributes.
+ */
+function boot(path: string, config: Partial = {}) {
+ window.history.replaceState(null, '', path);
+ new Function(bootSkeletonScript({ ...bootConfig(), ...config }))();
+}
+
+const html = () => document.documentElement;
+const attr = (name: string) => html().getAttribute(`data-boot-${name}`);
+const cssVar = (name: string) => html().style.getPropertyValue(name);
+const settings = (state: Record) =>
+ localStorage.setItem('settings-storage', JSON.stringify({ state, version: 12 }));
+const signedIn = () =>
+ localStorage.setItem('auth-storage', JSON.stringify({ state: { isAuthenticated: true }, version: 0 }));
+
+function desktop(matches: boolean) {
+ window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+ matches: matches && query.includes('64rem'),
+ media: query,
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ })) as unknown as typeof window.matchMedia;
+}
+
+beforeEach(() => {
+ localStorage.clear();
+ sessionStorage.clear();
+ for (const a of [...html().attributes]) {
+ if (a.name.startsWith('data-boot-') || a.name === 'data-interface-layout' || a.name === 'data-theme-skin' || a.name === 'style') {
+ html().removeAttribute(a.name);
+ }
+ }
+ document.head.querySelectorAll('#active-theme, #active-theme-skin').forEach((el) => el.remove());
+ desktop(true);
+});
+
+afterEach(() => {
+ vi.restoreAllMocks();
+});
+
+describe('boot script: defaults', () => {
+ it('draws the split inbox with the regular density and default widths when nothing is stored', () => {
+ boot('/en/mail/folder/inbox');
+ expect(attr('surface')).toBe('mail');
+ expect(attr('mail-layout')).toBe('split');
+ expect(html().getAttribute('data-interface-layout')).toBe('default');
+ expect(cssVar('--list-item-height')).toBe('48px');
+ expect(cssVar('--density-item-py')).toBe('12px');
+ expect(cssVar('--boot-mail-sidebar-w')).toBe('256px');
+ expect(cssVar('--boot-mail-list-w')).toBe('384px');
+ expect(cssVar('--boot-mail-list-h')).toBe('320px');
+ expect(attr('pane')).toBeNull();
+ expect(attr('pro')).toBeNull();
+ });
+
+ it('treats the bare root as mail', () => {
+ boot('/');
+ expect(attr('surface')).toBe('mail');
+ });
+
+ it('survives corrupt JSON in every key it reads', () => {
+ for (const key of ['settings-storage', 'column-widths', 'calendar-storage', 'auth-storage', 'account-registry', 'bulwark-boot-hints', THEME_CACHE_KEY]) {
+ localStorage.setItem(key, '{not json');
+ }
+ boot('/en/calendar');
+ expect(attr('surface')).toBe('calendar');
+ expect(attr('calendar-view')).toBe('month');
+ expect(cssVar('--list-item-height')).toBe('48px');
+ expect(cssVar('--boot-mail-sidebar-w')).toBe('256px');
+ expect(attr('rail')).toBeNull();
+ expect(document.getElementById('active-theme')).toBeNull();
+ });
+
+ it('survives storage that throws on access', () => {
+ const throwing = { get: () => { throw new Error('SecurityError'); } };
+ const local = Object.getOwnPropertyDescriptor(window, 'localStorage');
+ const session = Object.getOwnPropertyDescriptor(window, 'sessionStorage');
+ Object.defineProperty(window, 'localStorage', { configurable: true, ...throwing });
+ Object.defineProperty(window, 'sessionStorage', { configurable: true, ...throwing });
+ try {
+ boot('/en/settings/filters');
+ expect(attr('surface')).toBe('settings');
+ expect(attr('settings-tab')).toBe('filters');
+ expect(cssVar('--boot-settings-nav-w')).toBe('256px');
+ } finally {
+ Object.defineProperty(window, 'localStorage', local!);
+ Object.defineProperty(window, 'sessionStorage', session!);
+ }
+ });
+
+ it('ignores state that is not an object', () => {
+ localStorage.setItem('settings-storage', JSON.stringify({ state: 'oops' }));
+ localStorage.setItem('column-widths', JSON.stringify([1, 2]));
+ boot('/en/mail');
+ expect(attr('mail-layout')).toBe('split');
+ expect(cssVar('--boot-mail-list-w')).toBe('384px');
+ });
+});
+
+describe('boot script: layout settings', () => {
+ it('applies Mountain View, its density rhythm and forces the focus layout', () => {
+ settings({ interfaceLayout: 'mountain-view', density: 'compact', mailLayout: 'split' });
+ boot('/en/mail');
+ expect(html().getAttribute('data-interface-layout')).toBe('mountain-view');
+ expect(cssVar('--list-item-height')).toBe('32px');
+ expect(cssVar('--density-item-py')).toBe('6px');
+ expect(cssVar('--density-item-gap')).toBe('8px');
+ expect(attr('mail-layout')).toBe('focus');
+ });
+
+ it.each([
+ ['extra-compact', 'auto', '2px', '0px'],
+ ['compact', 'auto', '4px', '1px'],
+ ['regular', '48px', '12px', '4px'],
+ ['comfortable', '64px', '16px', '6px'],
+ ])('writes the %s density variables', (density, height, py, sidebar) => {
+ settings({ density });
+ boot('/en/mail');
+ expect(cssVar('--list-item-height')).toBe(height);
+ expect(cssVar('--density-item-py')).toBe(py);
+ expect(cssVar('--density-sidebar-py')).toBe(sidebar);
+ expect(attr('density')).toBe(density);
+ });
+
+ it('names the density and whether previews are off, for the mail rows', () => {
+ boot('/en/mail');
+ expect(attr('density')).toBe('regular');
+ expect(attr('preview')).toBeNull();
+ settings({ density: 'extra-compact', showPreview: false });
+ boot('/en/mail');
+ expect(attr('density')).toBe('extra-compact');
+ expect(attr('preview')).toBe('off');
+ settings({ density: 'cosy', showPreview: true });
+ boot('/en/mail');
+ expect(attr('density')).toBe('regular');
+ expect(attr('preview')).toBeNull();
+ });
+
+ it('falls back to regular for an unknown density', () => {
+ settings({ density: 'cosy' });
+ boot('/en/mail');
+ expect(cssVar('--list-item-height')).toBe('48px');
+ expect(attr('density')).toBe('regular');
+ });
+
+ it('keeps the horizontal and focus layouts, and simple mode forces focus', () => {
+ settings({ mailLayout: 'horizontal' });
+ boot('/en/mail');
+ expect(attr('mail-layout')).toBe('horizontal');
+ settings({ mailLayout: 'focus' });
+ boot('/en/mail');
+ expect(attr('mail-layout')).toBe('focus');
+ settings({ mailLayout: 'horizontal', simpleMode: true });
+ boot('/en/mail');
+ expect(attr('mail-layout')).toBe('focus');
+ });
+
+ it('clamps stored column widths the way the mail store does', () => {
+ localStorage.setItem('column-widths', JSON.stringify({ sidebarWidth: 1000, emailListWidth: 100, emailListHeight: 500 }));
+ boot('/en/mail');
+ expect(cssVar('--boot-mail-sidebar-w')).toBe('400px');
+ expect(cssVar('--boot-mail-list-w')).toBe('240px');
+ expect(cssVar('--boot-mail-list-h')).toBe('500px');
+ });
+
+ it('reads the other surfaces\' widths, defaulting bad values', () => {
+ localStorage.setItem('calendar-sidebar-width', '300');
+ localStorage.setItem('contacts-sidebar-width', 'abc');
+ localStorage.setItem('contacts-list-width', '450');
+ localStorage.setItem('files-sidebar-width', '999');
+ localStorage.setItem('settings-sidebar-width', '210');
+ boot('/en/contacts');
+ expect(cssVar('--boot-cal-sidebar-w')).toBe('300px');
+ expect(cssVar('--boot-contacts-sidebar-w')).toBe('256px');
+ expect(cssVar('--boot-contacts-list-w')).toBe('450px');
+ expect(cssVar('--boot-files-sidebar-w')).toBe('400px');
+ expect(cssVar('--boot-settings-nav-w')).toBe('210px');
+ });
+
+ it('marks the files view and details panel', () => {
+ settings({ filesSettings: { defaultViewMode: 'grid' } });
+ localStorage.setItem('files-show-details', '1');
+ boot('/en/files/Documents');
+ expect(attr('surface')).toBe('files');
+ expect(attr('files-view')).toBe('grid');
+ expect(attr('files-details')).toBe('on');
+ });
+});
+
+describe('boot script: mail and contacts panes', () => {
+ it.each([
+ ['/en/mail/message/M123', 'message'],
+ ['/en/mail/thread/T9', 'thread'],
+ ['/en/mail?email=M1', 'message'],
+ ['/en/mail/folder/inbox', null],
+ ['/en/mail/message', null],
+ ])('%s opens pane %s', (path, pane) => {
+ boot(path);
+ expect(attr('pane')).toBe(pane);
+ });
+
+ it.each([
+ ['/en/contacts', null],
+ ['/en/contacts/new', 'create'],
+ ['/en/contacts?addEmail=a%40example.com', 'create'],
+ ['/en/contacts/abc/edit', 'detail'],
+ ['/en/contacts?contactId=abc', 'detail'],
+ ])('%s opens pane %s', (path, pane) => {
+ boot(path);
+ expect(attr('surface')).toBe('contacts');
+ expect(attr('pane')).toBe(pane);
+ });
+});
+
+describe('boot script: calendar', () => {
+ it.each(['month', 'week', 'day', 'agenda', 'tasks'])('takes the %s view from the URL', (view) => {
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'agenda' } }));
+ boot(`/en/calendar/${view}/2026-11-04`);
+ expect(attr('calendar-view')).toBe(view);
+ });
+
+ it('opens a bare date in month view, like parseCalendarPath', () => {
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'week' } }));
+ boot('/en/calendar/2026-11-04');
+ expect(attr('calendar-view')).toBe('month');
+ });
+
+ it('uses the stored view for /calendar and event links, month without one', () => {
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'day' } }));
+ boot('/en/calendar');
+ expect(attr('calendar-view')).toBe('day');
+ boot('/en/calendar/event/E1');
+ expect(attr('calendar-view')).toBe('day');
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'year' } }));
+ boot('/en/calendar');
+ expect(attr('calendar-view')).toBe('month');
+ });
+
+ it('counts week columns and display hours from the settings', () => {
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-cols')).toBe('7');
+ expect(cssVar('--boot-cal-hours')).toBe('12');
+ settings({ calendarHideNonWorkingDays: true, calendarWorkingDays: [1, 2, 3, 4, 5], calendarDayStartHour: 7, calendarDayEndHour: 19 });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-cols')).toBe('5');
+ expect(cssVar('--boot-cal-hours')).toBe('12');
+ settings({ calendarLimitHours: false, calendarHideNonWorkingDays: true, calendarWorkingDays: [] });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-cols')).toBe('7');
+ expect(cssVar('--boot-cal-hours')).toBe('24');
+ settings({ calendarDayStartHour: 20, calendarDayEndHour: 8 });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-hours')).toBe('24');
+ });
+
+ it('marks a collapsed calendar sidebar', () => {
+ localStorage.setItem('calendar-sidebar-collapsed', '1');
+ boot('/en/calendar');
+ expect(attr('collapsed')).toBe('calendar');
+ });
+
+ it('gives the first shown hour, 0 for the whole day', () => {
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-start')).toBe('8');
+ settings({ calendarDayStartHour: 6, calendarDayEndHour: 22 });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-start')).toBe('6');
+ settings({ calendarLimitHours: false, calendarDayStartHour: 6, calendarDayEndHour: 22 });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-start')).toBe('0');
+ });
+
+ describe('with a fixed clock', () => {
+ afterEach(() => vi.useRealTimers());
+
+ it('opens the hour grid an hour before now, at the top when now is outside the shown hours', () => {
+ vi.useFakeTimers({ toFake: ['Date'] });
+ vi.setSystemTime(new Date(2026, 10, 4, 15, 30));
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-scroll')).toBe('6');
+ settings({ calendarLimitHours: false });
+ boot('/en/calendar/day');
+ expect(cssVar('--boot-cal-scroll')).toBe('14');
+ vi.setSystemTime(new Date(2026, 10, 4, 21, 0));
+ settings({});
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-scroll')).toBe('-1');
+ });
+
+ it('reads the clock in the time zone the settings name', () => {
+ vi.useFakeTimers({ toFake: ['Date'] });
+ vi.setSystemTime(new Date(Date.UTC(2026, 10, 4, 14, 0)));
+ settings({ calendarLimitHours: false, timeZone: 'Asia/Tokyo' });
+ boot('/en/calendar/week');
+ // 23:00 in Tokyo.
+ expect(cssVar('--boot-cal-scroll')).toBe('22');
+ settings({ calendarLimitHours: false, timeZone: 'Not/AZone' });
+ boot('/en/calendar/week');
+ expect(cssVar('--boot-cal-scroll')).toBe(String(new Date().getHours() - 1));
+ });
+
+ it('counts the mini month rows of the linked month, else this one', () => {
+ vi.useFakeTimers({ toFake: ['Date'] });
+ vi.setSystemTime(new Date(2026, 1, 10, 12, 0));
+ // February 2026 starts on a Sunday and has 28 days.
+ boot('/en/calendar');
+ expect(cssVar('--boot-cal-mini-rows')).toBe('5');
+ settings({ firstDayOfWeek: 0 });
+ boot('/en/calendar');
+ expect(cssVar('--boot-cal-mini-rows')).toBe('4');
+ // November 2026 starts on a Sunday: six rows from Monday, five from Sunday.
+ settings({});
+ boot('/en/calendar/week/2026-11-04');
+ expect(cssVar('--boot-cal-mini-rows')).toBe('6');
+ boot('/en/calendar/2026-11-04');
+ expect(cssVar('--boot-cal-mini-rows')).toBe('6');
+ settings({ firstDayOfWeek: 0 });
+ boot('/en/calendar/week/2026-11-04');
+ expect(cssVar('--boot-cal-mini-rows')).toBe('5');
+ });
+ });
+
+ it('marks week numbers in the mini month', () => {
+ boot('/en/calendar');
+ expect(attr('cal-weeknums')).toBeNull();
+ settings({ showWeekNumbers: true });
+ boot('/en/calendar');
+ expect(attr('cal-weeknums')).toBe('on');
+ boot('/en/mail');
+ expect(attr('cal-weeknums')).toBeNull();
+ });
+
+ it('marks calendar tasks as on', () => {
+ boot('/en/calendar');
+ expect(attr('cal-tasks')).toBeNull();
+ settings({ enableCalendarTasks: true });
+ boot('/en/calendar');
+ expect(attr('cal-tasks')).toBe('on');
+ boot('/en/contacts');
+ expect(attr('cal-tasks')).toBeNull();
+ });
+});
+
+describe('boot script: settings', () => {
+ it('opens the page a URL names, migrating legacy ids', () => {
+ boot('/en/settings/themes');
+ expect(attr('settings-tab')).toBe('appearance');
+ expect(attr('pane')).toBe('detail');
+ boot('/en/settings/filters/rules');
+ expect(attr('settings-tab')).toBe('filters');
+ });
+
+ it('falls back to the stored tab for an unknown or missing URL tab', () => {
+ localStorage.setItem('settings-active-tab', 'keywords');
+ boot('/en/settings/no-such-tab');
+ expect(attr('settings-tab')).toBe('organize');
+ expect(attr('pane')).toBeNull();
+ boot('/en/settings');
+ expect(attr('settings-tab')).toBe('organize');
+ });
+
+ it('defaults to appearance, and honours the one-shot sidebar gear link', () => {
+ boot('/en/settings');
+ expect(attr('settings-tab')).toBe('appearance');
+ sessionStorage.setItem('settings-deep-link-tab', 'folders');
+ boot('/en/settings');
+ expect(attr('settings-tab')).toBe('organize');
+ expect(attr('pane')).toBe('detail');
+ });
+});
+
+describe('boot script: pages that lead elsewhere', () => {
+ it.each([
+ ['/connector/app', 'mail', null],
+ ['/connector/mail_folder?ref=inbox', 'mail', null],
+ ['/connector/contacts', 'contacts', null],
+ ['/connector/files?path=/Docs', 'files', null],
+ ['/connector/setup', 'setup', null],
+ ['/connector/admin?tab=logs', 'admin', 'detail'],
+ ['/connector/admin', 'admin', null],
+ ['/connector/admin_plugin?id=x', 'admin', 'detail'],
+ ])('%s draws %s', (path, surface, pane) => {
+ boot(path);
+ expect(attr('surface')).toBe(surface);
+ expect(attr('via')).toBe('connector');
+ expect(attr('pane')).toBe(pane);
+ });
+
+ it('draws a connector calendar link in its view and a settings link on its page', () => {
+ boot('/connector/calendar?view=agenda&date=2026-11-04');
+ expect(attr('surface')).toBe('calendar');
+ expect(attr('calendar-view')).toBe('agenda');
+ boot('/connector/calendar');
+ expect(attr('calendar-view')).toBe('month');
+ boot('/connector/settings?tab=templates');
+ expect(attr('surface')).toBe('settings');
+ expect(attr('settings-tab')).toBe('composing');
+ });
+
+ it('leaves an unknown connector target without a surface', () => {
+ boot('/connector/nope');
+ expect(attr('surface')).toBeNull();
+ });
+
+ it('draws mail behind mailto and the calendar behind webcal', () => {
+ boot('/protocol/mailto?url=mailto%3Aa%40b.c');
+ expect(attr('surface')).toBe('mail');
+ expect(attr('via')).toBe('mailto');
+ boot('/protocol/webcal?url=webcal%3A%2F%2Fx');
+ expect(attr('surface')).toBe('calendar');
+ expect(attr('via')).toBe('webcal');
+ });
+
+ it.each([
+ ['/admin', 'admin', null],
+ ['/admin/branding', 'admin', 'detail'],
+ ['/admin/login', 'admin-login', null],
+ ['/setup', 'setup', null],
+ ['/en/login', 'login', null],
+ ['/en/pro', 'pro', null],
+ ['/en/apps/plugin-x/page-y', 'apps', null],
+ ])('%s is %s', (path, surface, pane) => {
+ boot(path);
+ expect(attr('surface')).toBe(surface);
+ expect(attr('pane')).toBe(pane);
+ });
+});
+
+describe('boot script: Pro interface', () => {
+ it('predicts the hop to /pro on a desktop with the Pro interface on', () => {
+ settings({ proInterface: true });
+ boot('/en/mail/folder/inbox');
+ expect(attr('pro')).toBe('on');
+ boot('/en/settings/appearance');
+ expect(attr('pro')).toBe('on');
+ boot('/en/pro');
+ expect(attr('pro')).toBe('on');
+ });
+
+ it('not on a narrow screen, not without the setting, not for other pages', () => {
+ settings({ proInterface: true });
+ desktop(false);
+ boot('/en/mail');
+ expect(attr('pro')).toBeNull();
+ desktop(true);
+ boot('/admin');
+ expect(attr('pro')).toBeNull();
+ settings({ proInterface: false });
+ boot('/en/mail');
+ expect(attr('pro')).toBeNull();
+ });
+});
+
+describe('boot script: Pro tabs', () => {
+ const tab = (id: string, kind: string, paneId = 'main') => ({ id, kind, labelKey: kind, closeable: id !== 'home-mail', paneId });
+ const proTabs = (state: Record) =>
+ localStorage.setItem('pro-tabs', JSON.stringify({ state, version: 4 }));
+ const pro = () => ({
+ split: attr('pro-split'),
+ focus: attr('pro-focus'),
+ kind: attr('pro-kind'),
+ main: [attr('pro-main-tabs'), attr('pro-main-active'), attr('pro-main-kind')],
+ side: [attr('pro-split-tabs'), attr('pro-split-active'), attr('pro-split-kind')],
+ });
+
+ beforeEach(() => settings({ proInterface: true }));
+
+ it('draws the single home mail tab when nothing is stored', () => {
+ boot('/en/pro');
+ expect(pro()).toEqual({ split: null, focus: 'main', kind: 'mail', main: ['1', '0', 'mail'], side: [null, null, null] });
+ });
+
+ it('falls back to the home mail tab for corrupt or empty tabs', () => {
+ localStorage.setItem('pro-tabs', '{not json');
+ boot('/en/pro');
+ expect(pro().main).toEqual(['1', '0', 'mail']);
+ proTabs({ tabs: 'nope', activeTabId: 3 });
+ boot('/en/pro');
+ expect(pro().main).toEqual(['1', '0', 'mail']);
+ proTabs({ tabs: [null, { id: 'x' }, 7], activeTabId: 'x' });
+ boot('/en/pro');
+ expect(pro().main).toEqual(['1', '0', 'mail']);
+ });
+
+ it('reads the tab count, the active tab and the split', () => {
+ proTabs({
+ tabs: [tab('home-mail', 'mail'), tab('c', 'calendar'), tab('f', 'folder'), tab('s', 'settings', 'split'), tab('e', 'email', 'split')],
+ activeTabId: 'c',
+ activeSplitTabId: 'e',
+ focusedPaneId: 'split',
+ splitSide: 'left',
+ });
+ boot('/en/pro');
+ expect(pro()).toEqual({
+ split: 'left', focus: 'split', kind: 'email',
+ main: ['3', '1', 'calendar'],
+ side: ['2', '1', 'other'],
+ });
+ });
+
+ it('gives the calendar and settings variants to a pane that shows them', () => {
+ proTabs({ tabs: [tab('home-mail', 'mail'), tab('c', 'calendar'), tab('s', 'settings', 'split')], activeTabId: 'c', activeSplitTabId: 's' });
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'week' }, version: 0 }));
+ localStorage.setItem('settings-active-tab', 'filters');
+ boot('/en/pro');
+ expect(attr('calendar-view')).toBe('week');
+ expect(cssVar('--boot-cal-cols')).toBe('7');
+ expect(attr('settings-tab')).toBe('filters');
+ expect(attr('pane')).toBeNull();
+ });
+
+ it('merges a split pane into an empty main pane', () => {
+ proTabs({ tabs: [tab('c', 'calendar', 'split'), tab('f', 'files', 'split')], activeTabId: 'gone', activeSplitTabId: 'f', focusedPaneId: 'split' });
+ boot('/en/pro');
+ expect(pro()).toEqual({ split: null, focus: 'main', kind: 'files', main: ['2', '1', 'files'], side: [null, null, null] });
+ });
+
+ it('focuses the tab the redirect opens for a standard page', () => {
+ proTabs({
+ tabs: [tab('home-mail', 'mail'), tab('c', 'calendar', 'split')],
+ activeTabId: 'home-mail',
+ activeSplitTabId: 'c',
+ focusedPaneId: 'main',
+ });
+ boot('/en/calendar/week/2026-11-04');
+ expect(pro()).toMatchObject({ split: 'right', focus: 'split', kind: 'calendar', main: ['1', '0', 'mail'], side: ['1', '0', 'calendar'] });
+ expect(attr('calendar-view')).toBe('week');
+
+ // No contacts tab yet: a new one at the end of the focused pane.
+ boot('/en/contacts');
+ expect(pro()).toMatchObject({ focus: 'main', kind: 'contacts', main: ['2', '1', 'contacts'], side: ['1', '0', 'calendar'] });
+ });
+
+ it('caps the drawn tabs at eight', () => {
+ const many = Array.from({ length: 12 }, (_, i) => tab(`t${i}`, i === 11 ? 'files' : 'email'));
+ proTabs({ tabs: many, activeTabId: 't11' });
+ boot('/en/pro');
+ expect(pro().main).toEqual(['8', '7', 'files']);
+ });
+
+ it('sets nothing when Pro does not take the page over', () => {
+ proTabs({ tabs: [tab('home-mail', 'mail'), tab('c', 'calendar', 'split')], activeSplitTabId: 'c' });
+ desktop(false);
+ boot('/en/mail');
+ expect(pro()).toEqual({ split: null, focus: null, kind: null, main: [null, null, null], side: [null, null, null] });
+ expect(attr('calendar-view')).toBeNull();
+ });
+});
+
+describe('boot script: signed-out visitors', () => {
+ it('marks a visitor with nothing stored as signed out on app pages', () => {
+ boot('/en/mail');
+ expect(attr('auth')).toBe('out');
+ boot('/en/calendar/week');
+ expect(attr('auth')).toBe('out');
+ });
+
+ it('not on the login, admin or setup pages', () => {
+ for (const path of ['/en/login', '/admin', '/admin/login', '/setup']) {
+ boot(path);
+ expect(attr('auth')).toBeNull();
+ }
+ });
+
+ it('not with a persisted session, a remembered account, a demo account or an impersonation hand-off', () => {
+ signedIn();
+ boot('/en/mail');
+ expect(attr('auth')).toBeNull();
+ localStorage.clear();
+ localStorage.setItem('account-registry', JSON.stringify({ state: { accounts: [{ id: 'a', rememberMe: true }] } }));
+ boot('/en/mail');
+ expect(attr('auth')).toBeNull();
+ localStorage.setItem('account-registry', JSON.stringify({ state: { accounts: [{ id: 'd', rememberMe: false, serverUrl: 'https://demo.example.com' }] } }));
+ boot('/en/mail');
+ expect(attr('auth')).toBeNull();
+ localStorage.clear();
+ boot('/en/mail?impersonated=1');
+ expect(attr('auth')).toBeNull();
+ });
+
+ it('counts an account that will be dropped (no remember me) as signed out', () => {
+ localStorage.setItem('account-registry', JSON.stringify({ state: { accounts: [{ id: 'a', rememberMe: false }] } }));
+ boot('/en/mail');
+ expect(attr('auth')).toBe('out');
+ boot('/en/mail', { lite: true });
+ expect(attr('auth')).toBeNull();
+ });
+});
+
+describe('boot script: rail hints', () => {
+ it('passes the stored rail items on, dropping anything odd', () => {
+ localStorage.setItem('bulwark-boot-hints', JSON.stringify({ v: 1, rail: ['mail', 'calendar', 'quota', '', 3] }));
+ boot('/en/mail');
+ expect(attr('rail')).toBe('mail calendar quota');
+ });
+
+ it('passes the settings pages the nav listed on, known ids only', () => {
+ localStorage.setItem('bulwark-boot-hints', JSON.stringify({ v: 1, rail: ['mail'], settings: ['account', 'filters', 'recovery', 'plugin:x', 'nope', 7] }));
+ boot('/en/settings');
+ expect(attr('settings-tabs')).toBe('account filters recovery');
+ });
+
+ it('leaves the settings pages out without hints', () => {
+ boot('/en/settings');
+ expect(attr('settings-tabs')).toBeNull();
+ });
+});
+
+describe('boot script: Lite', () => {
+ it('reads a parked deep link instead of the surface root it was replayed on', () => {
+ sessionStorage.setItem('bulwark-lite:pending-path', '/de/calendar/day/2026-11-04');
+ boot('/de/calendar/', { lite: true });
+ expect(attr('surface')).toBe('calendar');
+ expect(attr('calendar-view')).toBe('day');
+ });
+
+ it('ignores the parked path outside Lite', () => {
+ sessionStorage.setItem('bulwark-lite:pending-path', '/de/calendar/day/2026-11-04');
+ localStorage.setItem('calendar-storage', JSON.stringify({ state: { viewMode: 'week' } }));
+ boot('/de/calendar/');
+ expect(attr('calendar-view')).toBe('week');
+ });
+
+ it('strips the base path and the Lite mount', () => {
+ boot('/webmail/en/files/Docs', { basePath: '/webmail' });
+ expect(attr('surface')).toBe('files');
+ (window as unknown as Record).__BULWARK_LITE_MOUNT__ = '/bulwark';
+ try {
+ boot('/bulwark/en/settings/filters', { lite: true });
+ expect(attr('surface')).toBe('settings');
+ expect(attr('settings-tab')).toBe('filters');
+ } finally {
+ delete (window as unknown as Record).__BULWARK_LITE_MOUNT__;
+ }
+ });
+});
+
+describe('boot script: cached theme', () => {
+ it('puts the cached theme and skin back before the page renders', () => {
+ localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({ v: 1, css: ':root{--color-primary:red}', skin: 'html[data-theme-skin="t1"] body{font-family:x}', skinId: 't1' }));
+ boot('/en/mail');
+ expect(document.getElementById('active-theme')?.textContent).toBe(':root{--color-primary:red}');
+ expect(document.getElementById('active-theme-skin')?.textContent).toContain('font-family:x');
+ expect(html().getAttribute('data-theme-skin')).toBe('t1');
+ });
+
+ it('reuses existing elements instead of adding a second copy', () => {
+ localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({ v: 1, css: 'a{}' }));
+ boot('/en/mail');
+ boot('/en/mail');
+ expect(document.querySelectorAll('#active-theme')).toHaveLength(1);
+ });
+
+ it('ignores a cache from another format version, or a skin without its id', () => {
+ localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({ v: 2, css: 'a{}' }));
+ boot('/en/mail');
+ expect(document.getElementById('active-theme')).toBeNull();
+ localStorage.setItem(THEME_CACHE_KEY, JSON.stringify({ v: 1, skin: 'b{}' }));
+ boot('/en/mail');
+ expect(document.getElementById('active-theme-skin')).toBeNull();
+ });
+});
diff --git a/lib/boot-skeleton/__tests__/surfaces.test.ts b/lib/boot-skeleton/__tests__/surfaces.test.ts
new file mode 100644
index 000000000..d3b8a1268
--- /dev/null
+++ b/lib/boot-skeleton/__tests__/surfaces.test.ts
@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { TARGET_NAMES, getTarget } from '@/lib/connector/registry';
+import { locales } from '@/i18n/routing';
+import { CONNECTOR_SURFACES, surfaceFromPath } from '../surfaces';
+import { BOOT_HINTS_KEY } from '../keys';
+import { resetRailHintsMemo, writeRailHints, writeSettingsHints } from '../hints';
+
+describe('connector targets', () => {
+ it('every target the connector can resolve has a skeleton surface', () => {
+ for (const name of TARGET_NAMES) expect(CONNECTOR_SURFACES[name], name).toBeTruthy();
+ expect(Object.keys(CONNECTOR_SURFACES).sort()).toEqual([...TARGET_NAMES].sort());
+ });
+
+ it('the surface matches where the target resolves to', () => {
+ const firstSegment: Record = { '': 'mail' };
+ for (const name of TARGET_NAMES) {
+ const target = getTarget(name)!;
+ const params: Record = {};
+ for (const [key, spec] of Object.entries(target.params ?? {})) {
+ if (!spec.required) continue;
+ params[key] = spec.type === 'enum' ? spec.values![0] : 'x';
+ }
+ const { path } = target.resolve(params);
+ const seg = path.split('/').filter(Boolean)[0] ?? '';
+ expect(CONNECTOR_SURFACES[name], `${name} -> ${path}`).toBe(firstSegment[seg] ?? seg);
+ }
+ });
+});
+
+describe('surfaceFromPath', () => {
+ it.each([
+ ['/', 'mail'],
+ ['/en', 'mail'],
+ ['/de/mail/folder/inbox', 'mail'],
+ ['/en/calendar/week/2026-11-04', 'calendar'],
+ ['/ar/contacts/abc', 'contacts'],
+ ['/en/files/de', 'files'],
+ ['/en/apps/p/q', 'apps'],
+ ['/en/settings/filters', 'settings'],
+ ['/en/pro', 'pro'],
+ ['/en/login', 'login'],
+ ['/admin', 'admin'],
+ ['/admin/logs', 'admin'],
+ ['/admin/login', 'admin-login'],
+ ['/setup', 'setup'],
+ ['/connector/calendar', 'calendar'],
+ ['/connector/admin_auth', 'admin'],
+ ['/connector/nope', null],
+ ['/protocol/mailto', 'mail'],
+ ['/protocol/webcal', 'calendar'],
+ ['/webmail/de/calendar', 'calendar'],
+ ['/en/auth/callback', null],
+ ['/en/plugins/oauth/callback', null],
+ ])('%s -> %s', (path, surface) => {
+ expect(surfaceFromPath(path, locales)).toBe(surface);
+ });
+});
+
+describe('rail hints', () => {
+ beforeEach(() => {
+ localStorage.clear();
+ resetRailHintsMemo();
+ });
+
+ it('stores the rail items with mail first', () => {
+ writeRailHints(['calendar', 'quota']);
+ expect(JSON.parse(localStorage.getItem(BOOT_HINTS_KEY)!)).toEqual({ v: 1, rail: ['mail', 'calendar', 'quota'] });
+ });
+
+ it('skips writing the same value twice', () => {
+ writeRailHints(['files']);
+ localStorage.removeItem(BOOT_HINTS_KEY);
+ writeRailHints(['files']);
+ expect(localStorage.getItem(BOOT_HINTS_KEY)).toBeNull();
+ writeRailHints(['files', 'admin']);
+ expect(JSON.parse(localStorage.getItem(BOOT_HINTS_KEY)!).rail).toEqual(['mail', 'files', 'admin']);
+ });
+
+ it('keeps the rail and the settings pages side by side', () => {
+ writeRailHints(['calendar']);
+ writeSettingsHints(['account', 'filters']);
+ expect(JSON.parse(localStorage.getItem(BOOT_HINTS_KEY)!)).toEqual({ v: 1, rail: ['mail', 'calendar'], settings: ['account', 'filters'] });
+ writeRailHints(['files']);
+ expect(JSON.parse(localStorage.getItem(BOOT_HINTS_KEY)!)).toEqual({ v: 1, rail: ['mail', 'files'], settings: ['account', 'filters'] });
+ });
+});
diff --git a/lib/boot-skeleton/__tests__/theme-cache.test.ts b/lib/boot-skeleton/__tests__/theme-cache.test.ts
new file mode 100644
index 000000000..66c414eed
--- /dev/null
+++ b/lib/boot-skeleton/__tests__/theme-cache.test.ts
@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+ bootSkinCSS,
+ injectThemeCSS,
+ injectThemeSkinCSS,
+ removeThemeCSS,
+ removeThemeSkinCSS,
+} from '@/lib/theme-loader';
+import { THEME_CACHE_KEY, THEME_CACHE_MAX } from '../keys';
+
+const cache = () => JSON.parse(localStorage.getItem(THEME_CACHE_KEY) || 'null');
+
+beforeEach(() => {
+ localStorage.clear();
+ removeThemeCSS();
+ removeThemeSkinCSS();
+ document.documentElement.removeAttribute('data-theme-skin');
+});
+
+describe('theme cache for the boot script', () => {
+ it('keeps a copy of the injected colour block and skin', () => {
+ injectThemeCSS(':root{--color-primary:#f00}');
+ injectThemeSkinCSS('body[data-theme-skin="t1"] .toolbar{gap:2px}', 't1');
+ expect(cache()).toEqual({
+ v: 1,
+ css: ':root{--color-primary:#f00}',
+ skin: 'html[data-theme-skin="t1"] body .toolbar{gap:2px}',
+ skinId: 't1',
+ });
+ });
+
+ it('drops the parts that are removed, and the whole entry when nothing is left', () => {
+ injectThemeCSS('a{}');
+ injectThemeSkinCSS('b{}', 't1');
+ removeThemeSkinCSS();
+ expect(cache()).toEqual({ v: 1, css: 'a{}' });
+ removeThemeCSS();
+ expect(localStorage.getItem(THEME_CACHE_KEY)).toBeNull();
+ });
+
+ it('does not cache a theme too large for localStorage', () => {
+ injectThemeCSS('a{}');
+ injectThemeCSS(`:root{--x:"${'y'.repeat(THEME_CACHE_MAX)}"}`);
+ expect(localStorage.getItem(THEME_CACHE_KEY)).toBeNull();
+ expect(document.getElementById('active-theme')?.textContent).toContain('--x');
+ });
+
+ it('clears the boot copy\'s attribute once the real skin is on ', () => {
+ document.documentElement.setAttribute('data-theme-skin', 't1');
+ injectThemeSkinCSS('b{}', 't1');
+ expect(document.body.getAttribute('data-theme-skin')).toBe('t1');
+ expect(document.documentElement.hasAttribute('data-theme-skin')).toBe(false);
+ });
+
+ it('reuses a
+ {t("loading")}
);
} else {
diff --git a/components/plugins/plugin-side-panels.tsx b/components/plugins/plugin-side-panels.tsx
new file mode 100644
index 000000000..b81d389e2
--- /dev/null
+++ b/components/plugins/plugin-side-panels.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useTranslations } from 'next-intl';
+import { iconForName, Puzzle, X, type AppIcon } from '@/components/icons';
+import { usePluginSlotOffers } from '@/hooks/use-plugin-slot-offers';
+import { get as getActivePlugin } from '@/lib/plugin-sandbox/registry';
+import { onPanelRequest } from '@/lib/plugin-sandbox/panel-requests';
+import { sidePanelLooks, subscribeSidePanels } from '@/lib/plugin-sandbox/side-panels';
+import { cn } from '@/lib/utils';
+import { PluginIframeSlot } from './plugin-iframe-slot';
+
+// The `side-panel` slot: one panel per plugin beside the mail, opened from
+// its button in the rail at the right edge. Mountain View puts the buttons
+// in its own side panel's rail (mv-side-panel.tsx); the default layout
+// shows PluginSidePanel. At most one panel is open; which one is
+// remembered in this browser. A plugin that set `rail: false` has no
+// button: its panel opens only on its request; a rail without buttons is
+// not drawn.
+
+const STORAGE_KEY = 'plugin-side-panel-open';
+
+export interface SidePanelEntry {
+ pluginId: string;
+ title: string;
+ Icon: AppIcon;
+ fill: boolean;
+ /** Whether the rail shows its button (api.ui.setSidePanel's `rail`). */
+ inRail: boolean;
+}
+
+function readStored(): string | null {
+ try { return localStorage.getItem(STORAGE_KEY); } catch { return null; }
+}
+
+function writeStored(pluginId: string | null): void {
+ try {
+ if (pluginId) localStorage.setItem(STORAGE_KEY, pluginId);
+ else localStorage.removeItem(STORAGE_KEY);
+ } catch {
+ // Storage may be blocked; the panel is just shut next time.
+ }
+}
+
+/** The plugins offering a side panel, each with the title and icon it set (api.ui.setSidePanel). */
+export function usePluginSidePanelEntries(): SidePanelEntry[] {
+ const offers = usePluginSlotOffers('side-panel');
+ const looks = useSyncExternalStore(subscribeSidePanels, sidePanelLooks, sidePanelLooks);
+ return useMemo(() => {
+ return offers.map((offer) => {
+ const look = looks.get(offer.pluginId);
+ return {
+ pluginId: offer.pluginId,
+ title: look?.title || getActivePlugin(offer.pluginId)?.plugin.name || offer.pluginId,
+ Icon: iconForName(look?.icon) ?? Puzzle,
+ fill: !!offer.fill,
+ inRail: look?.rail !== false,
+ };
+ });
+ }, [offers, looks]);
+}
+
+/**
+ * Which plugin's side panel is open (null: none), remembered in this
+ * browser, and the plugins' api.ui.openPanel('side-panel') requests;
+ * `onOpen` runs when a plugin's request opens its panel.
+ */
+export function usePluginSidePanel(onOpen?: () => void) {
+ const entries = usePluginSidePanelEntries();
+ const [chosen, setChosen] = useState
+
+ {entry.title}
+
+
+
+
+ );
+}
+
+/**
+ * The default layout's side panel: a slim rail at the right edge with a
+ * button per plugin, and the open plugin's panel left of it. Nothing
+ * without a plugin offering one.
+ */
+export function PluginSidePanel() {
+ const t = useTranslations('sidebar');
+ const { entries, open, choose, focusRequest } = usePluginSidePanel();
+ if (entries.length === 0) return null;
+ const active = entries.find((e) => e.pluginId === open) ?? null;
+ const inRail = entries.filter((e) => e.inRail);
+ return (
+ <>
+ {active && (
+
+ )}
+ {inRail.length > 0 && }
+
+ );
+}
+
+/** A plugin's button in a side panel's rail. */
+export function SidePanelButton({ entry, pressed, onClick, className, pressedClassName }: {
+ entry: SidePanelEntry;
+ pressed: boolean;
+ onClick: () => void;
+ className?: string;
+ pressedClassName?: string;
+}) {
+ const { Icon } = entry;
+ return (
+
+ );
+}
diff --git a/components/plugins/plugin-task-view.tsx b/components/plugins/plugin-task-view.tsx
new file mode 100644
index 000000000..eb5fdd6bd
--- /dev/null
+++ b/components/plugins/plugin-task-view.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { usePluginSlotOffers } from '@/hooks/use-plugin-slot-offers';
+import type { TaskViewFilter } from '@/stores/task-store';
+import { cn } from '@/lib/utils';
+import { PluginIframeSlot } from './plugin-iframe-slot';
+
+// The `calendar-task-view` slot: a plugin drawing the calendar's task view
+// below its toolbar, in place of Bulwark's task list. One plugin at a time,
+// the first offering it (by its offer's order, then the plugins' order);
+// none, and the calendar shows its own list. So does a plugin whose
+// shouldShow says no or whose frame fails to start.
+
+/** The plugin drawing the task view, or null when none offers it. */
+export function usePluginTaskView(): { pluginId: string; fill: boolean } | null {
+ const offers = usePluginSlotOffers('calendar-task-view');
+ const first = offers[0];
+ return useMemo(() => (first ? { pluginId: first.pluginId, fill: !!first.fill } : null), [first]);
+}
+
+/**
+ * The plugin's frame in the area below the task toolbar: filled when the
+ * plugin asks for it (it scrolls inside), else the area scrolls. Its props:
+ * the toolbar's filter and the calendars ticked in the sidebar. `fallback`
+ * (Bulwark's list) stands in while the frame is not drawn.
+ */
+export function PluginTaskView({ pluginId, fill, filter, calendarIds, fallback }: {
+ pluginId: string;
+ fill: boolean;
+ filter: TaskViewFilter;
+ calendarIds: readonly string[];
+ fallback: ReactNode;
+}) {
+ // One array per set of ids, so the frame gets no update while they stay.
+ const idsKey = calendarIds.join('\u0000');
+ const ids = useMemo(() => (idsKey ? idsKey.split('\u0000') : []), [idsKey]);
+ const extraProps = useMemo(() => ({ filter, calendarIds: ids }), [filter, ids]);
+ // The plugin whose frame is not drawn. The frame stays mounted (hidden),
+ // so a shouldShow that says yes for another filter takes the view back.
+ const [notShownBy, setNotShownBy] = useState
+
+
+ );
+}
diff --git a/components/pro/__tests__/pro-interface-redirect.test.tsx b/components/pro/__tests__/pro-interface-redirect.test.tsx
index 7b91ccdbf..e16c7b7da 100644
--- a/components/pro/__tests__/pro-interface-redirect.test.tsx
+++ b/components/pro/__tests__/pro-interface-redirect.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { cleanup, render } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
// The Pro shell takes over the standard routes and hands their deep link to
@@ -11,7 +11,9 @@ vi.mock('@/i18n/navigation', () => ({
usePathname: () => nav.pathname,
useRouter: () => ({ replace: nav.replace }),
}));
-vi.mock('@/hooks/use-media-query', () => ({ useIsDesktop: () => true }));
+const device = vi.hoisted(() => ({ desktop: true }));
+vi.mock('@/hooks/use-media-query', () => ({ useIsDesktop: () => device.desktop }));
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
vi.mock('@/stores/settings-store', () => ({
useSettingsStore: (selector: (s: { proInterface: boolean }) => unknown) => selector({ proInterface: true }),
}));
@@ -25,6 +27,7 @@ const { ProInterfaceRedirect } = await import('../pro-interface-redirect');
describe('ProInterfaceRedirect', () => {
beforeEach(() => {
vi.clearAllMocks();
+ device.desktop = true;
});
function visit(path: string, search: string) {
@@ -56,4 +59,24 @@ describe('ProInterfaceRedirect', () => {
expect(setPendingDeepLink).not.toHaveBeenCalled();
expect(openTab).toHaveBeenLastCalledWith('files');
});
+
+ it('covers the standard page with the Pro skeleton until /pro renders', () => {
+ visit('/calendar/week/2026-11-04', '');
+ const cover = document.querySelector('[data-pro-takeover]');
+ expect(cover?.querySelector('[data-boot-skeleton="pro"]')).not.toBeNull();
+ expect(cover?.className).toContain('fixed');
+ });
+
+ it('draws nothing on /pro itself, below desktop width, or on other pages', () => {
+ visit('/pro', '');
+ expect(document.querySelector('[data-pro-takeover]')).toBeNull();
+ cleanup();
+ visit('/login', '');
+ expect(document.querySelector('[data-pro-takeover]')).toBeNull();
+ cleanup();
+ device.desktop = false;
+ visit('/mail', '');
+ expect(document.querySelector('[data-pro-takeover]')).toBeNull();
+ expect(nav.replace).not.toHaveBeenCalled();
+ });
});
diff --git a/components/pro/pro-interface-redirect.tsx b/components/pro/pro-interface-redirect.tsx
index 5f30c8348..fe7ea4fc2 100644
--- a/components/pro/pro-interface-redirect.tsx
+++ b/components/pro/pro-interface-redirect.tsx
@@ -7,6 +7,8 @@ import { useIsDesktop } from "@/hooks/use-media-query";
import { useProTabStore, type ProAppTabKind } from "@/stores/pro-tab-store";
import { matchSurface, type AppSurface } from "@/lib/deep-links";
import { setPendingDeepLink } from "@/lib/deep-link-handoff";
+import { ProSkeleton } from "@/components/boot-skeleton/pro-skeleton";
+import { useSkeletonLabels } from "@/components/boot-skeleton/use-skeleton-labels";
const SURFACE_TO_TAB: Record
+
+ );
}
diff --git a/components/protocol/__tests__/mailto-protocol-client.test.tsx b/components/protocol/__tests__/mailto-protocol-client.test.tsx
new file mode 100644
index 000000000..ef594d63d
--- /dev/null
+++ b/components/protocol/__tests__/mailto-protocol-client.test.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/lib/protocol-handlers/session', () => ({
+ // Still asking an open tab whether it takes the message.
+ requestOpenMailtoInExistingClient: vi.fn(() => new Promise(() => {})),
+ savePendingMailto: vi.fn(),
+}));
+
+const { MailtoProtocolClient } = await import('../mailto-protocol-client');
+
+afterEach(() => {
+ window.history.replaceState(null, '', '/');
+});
+
+describe('mailto handler page', () => {
+ // It hands over to the mail page, where the composer opens: it draws that
+ // page's skeleton instead of a line of text on a blank page.
+ it('draws the mail skeleton with the opening text as its status', () => {
+ window.history.replaceState(null, '', '/protocol/mailto?url=mailto%3Aa%40example.com');
+ const { container } = render({openingText}
-{openingText}
-appearance pane
,
+}));
+
+const { SettingsApp } = await import('../settings-app');
+const { useAuthStore } = await import('@/stores/auth-store');
+const { usePluginStore } = await import('@/stores/plugin-store');
+const { useThemeStore } = await import('@/stores/theme-store');
+const { useSettingsStore } = await import('@/stores/settings-store');
+const { SETTINGS_NAV_GROUPS } = await import('../settings-tab-icons');
+const { BOOT_HINTS_KEY } = await import('@/lib/boot-skeleton/keys');
+const { resetRailHintsMemo } = await import('@/lib/boot-skeleton/hints');
+
+/** A client that supports everything it is asked about. */
+const fullClient = new Proxy({}, {
+ get: (_t, prop) => {
+ if (prop === 'then') return undefined;
+ if (prop === 'getAccountId') return () => 'acc';
+ if (typeof prop === 'string' && prop.startsWith('supports')) return () => true;
+ if (prop === 'getShareTargets') return () => Promise.resolve([]);
+ return () => null;
+ },
+});
+/** A client with none of the optional capabilities. */
+const bareClient = new Proxy({}, {
+ get: (_t, prop) => (prop === 'then' ? undefined : prop === 'getAccountId' ? () => 'acc' : () => null),
+});
+
+const skeleton = () => document.querySelector('[data-boot-skeleton="settings"]');
+
+beforeEach(() => {
+ vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('Unexpected network request')));
+ localStorage.clear();
+ resetRailHintsMemo();
+ localStorage.setItem('settings-active-tab', 'appearance');
+ usePluginStore.setState({ initializePlugins: vi.fn().mockResolvedValue(undefined) });
+ useThemeStore.setState({ syncServerThemes: vi.fn().mockResolvedValue(undefined) } as never);
+ // The restore stays pending: the page is still waiting for the session.
+ useAuthStore.setState({ checkAuth: vi.fn(() => new PromiseFollow up
Hello Mr.
${openEnded}`)).toBe(true); }); }); + +describe('embedTemplateImages', () => { + // A 1×1 PNG. + const PNG = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='; + const DATA = `data:image/png;base64,${PNG}`; + const uploader = () => { + let n = 0; + return vi.fn(async (_file: File) => ({ cid: `img${++n}@webmail` })); + }; + + it('uploads a data: image and tags it with the cid', async () => { + const upload = uploader(); + const html = await embedTemplateImages(`Plan
';
+ expect(await embedTemplateImages(html, upload)).toBe(html);
+ expect(upload).not.toHaveBeenCalled();
+ });
+
+ it('keeps an image as it is when its upload fails', async () => {
+ const html = `