- {THEME_OPTIONS.map((option) => {
- const Icon = option.icon;
- const isActive = theme === option.value;
- return (
-
- );
- })}
-
- )}
+
@@ -1749,7 +1728,7 @@ function LoginPageContent() {
- {showThemeMenu && (
-
+ {THEME_OPTIONS.map((option) => (
+ handleThemeSelect(option.value)}
+ />
+ ))}
+
- {THEME_OPTIONS.map((option) => {
- const Icon = option.icon;
- const isActive = theme === option.value;
- return (
-
- );
- })}
-
- )}
+
diff --git a/app/boot-skeleton.css b/app/boot-skeleton.css
index dc27f65a3..f2d87e532 100644
--- a/app/boot-skeleton.css
+++ b/app/boot-skeleton.css
@@ -223,6 +223,7 @@
[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="files_sync"] [data-sk-settings-tab="files_sync"],
[data-boot-settings-tab="addons"] [data-sk-settings-tab="addons"],
[data-boot-settings-tab="offline"] [data-sk-settings-tab="offline"],
[data-boot-settings-tab="privacy"] [data-sk-settings-tab="privacy"],
@@ -242,6 +243,7 @@
@custom-variant boot-no-settings-addons (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="addons"]) *));
@custom-variant boot-no-settings-offline (&:where([data-boot-settings-tabs]:not([data-boot-settings-tabs~="offline"]) *));
@custom-variant boot-settings-recovery (&:where([data-boot-settings-tabs~="recovery"] *));
+@custom-variant boot-settings-files-sync (&:where([data-boot-settings-tabs~="files_sync"] *));
/* 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"] *));
diff --git a/components/boot-skeleton/settings-skeleton.tsx b/components/boot-skeleton/settings-skeleton.tsx
index c49515063..82477c6bb 100644
--- a/components/boot-skeleton/settings-skeleton.tsx
+++ b/components/boot-skeleton/settings-skeleton.tsx
@@ -27,6 +27,8 @@ const OPTIONAL: Partial> = {
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",
+ // Desktop app only, while the files sync runs.
+ files_sync: "hidden boot-settings-files-sync:flex",
addons: "boot-no-settings-addons:hidden",
// Not in the static Lite build.
offline: "boot-no-settings-offline:hidden",
diff --git a/components/calendar/__tests__/calendar-app.test.tsx b/components/calendar/__tests__/calendar-app.test.tsx
index 2b48c34bd..b6dc61f6d 100644
--- a/components/calendar/__tests__/calendar-app.test.tsx
+++ b/components/calendar/__tests__/calendar-app.test.tsx
@@ -595,6 +595,21 @@ describe('CalendarApp task feedback', () => {
});
});
+describe('CalendarApp quick editor', () => {
+ // Usability report 2026-11-04: Save stayed off until a title was typed.
+ // Google Calendar saves "(No title)"; so does the quick editor now.
+ it('saves an event without a title as "(No title)"', async () => {
+ renderApp();
+ fireEvent.click(slots()[3]);
+ const quick = await screen.findByRole('dialog', { name: 'quick_create.aria_label' }, { timeout: 2000 });
+ const save = within(quick).getByRole('button', { name: 'form.save' });
+ expect(save).toBeEnabled();
+ fireEvent.click(save);
+ await waitFor(() => expect(store.createEvent).toHaveBeenCalledTimes(1));
+ expect(store.createEvent.mock.calls[0][1]).toMatchObject({ title: 'events.no_title', showWithoutTime: false });
+ });
+});
+
describe('CalendarApp creating in the month view', () => {
it('opens the quick editor for an all-day event on a single click', async () => {
setUp([], 'month');
@@ -611,6 +626,70 @@ describe('CalendarApp creating in the month view', () => {
});
});
+ // Usability report 2026-11-04: a drag over the month's days did nothing.
+ it('opens the quick editor for the days a drag picked and saves them as one all-day event', async () => {
+ setUp([], 'month');
+ renderApp();
+ // Thursday 15 to Tuesday 20 October, across two week rows.
+ const thursday = monthCell(/October 15, 2026/)!;
+ const tuesday = monthCell(/October 20, 2026/)!;
+ thursday.closest('[data-week]')!.getBoundingClientRect = () => ({ top: 0, bottom: 100, left: 0, right: 700 }) as DOMRect;
+ tuesday.closest('[data-week]')!.getBoundingClientRect = () => ({ top: 100, bottom: 200, left: 0, right: 700 }) as DOMRect;
+ thursday.getBoundingClientRect = () => ({ top: 0, bottom: 100, left: 300, right: 400 }) as DOMRect;
+ tuesday.getBoundingClientRect = () => ({ top: 100, bottom: 200, left: 100, right: 200 }) as DOMRect;
+ const mouse = { pointerId: 1, pointerType: 'mouse', isPrimary: true, button: 0 };
+ fireEvent.pointerDown(thursday, { ...mouse, clientX: 350, clientY: 80 });
+ fireEvent.pointerMove(thursday, { ...mouse, clientX: 150, clientY: 180 });
+ fireEvent.pointerUp(thursday, { ...mouse, clientX: 150, clientY: 180 });
+
+ const quick = await screen.findByRole('dialog', { name: 'quick_create.aria_label' });
+ expect(within(quick).getByText('events.all_day')).toBeInTheDocument();
+ expect(within(quick).getByText(/Oct 15 2026.* – .*Oct 20 2026/)).toBeInTheDocument();
+ // No title needed: it saves as "(No title)".
+ const save = within(quick).getByRole('button', { name: 'form.save' });
+ expect(save).toBeEnabled();
+ fireEvent.click(save);
+ await waitFor(() => expect(store.createEvent).toHaveBeenCalledTimes(1));
+ expect(store.createEvent.mock.calls[0][1]).toMatchObject({
+ title: 'events.no_title', start: '2026-10-15T00:00:00', duration: 'P6D', showWithoutTime: true, calendarIds: { cal: true },
+ });
+ });
+
+ it('opens the full editor on the same days from "More options"', async () => {
+ setUp([], 'month');
+ renderApp();
+ const thursday = monthCell(/October 15, 2026/)!;
+ const friday = monthCell(/October 16, 2026/)!;
+ thursday.closest('[data-week]')!.getBoundingClientRect = () => ({ top: 0, bottom: 100, left: 0, right: 700 }) as DOMRect;
+ thursday.getBoundingClientRect = () => ({ top: 0, bottom: 100, left: 300, right: 400 }) as DOMRect;
+ friday.getBoundingClientRect = () => ({ top: 0, bottom: 100, left: 400, right: 500 }) as DOMRect;
+ const mouse = { pointerId: 1, pointerType: 'mouse', isPrimary: true, button: 0 };
+ fireEvent.pointerDown(thursday, { ...mouse, clientX: 350, clientY: 80 });
+ fireEvent.pointerMove(thursday, { ...mouse, clientX: 450, clientY: 80 });
+ fireEvent.pointerUp(thursday, { ...mouse, clientX: 450, clientY: 80 });
+ const quick = await screen.findByRole('dialog', { name: 'quick_create.aria_label' });
+ fireEvent.click(within(quick).getByRole('button', { name: 'quick_create.more_options' }));
+ const dates = await waitFor(() => {
+ const found = Array.from(document.querySelectorAll('input[type="date"]')).map((input) => input.value);
+ expect(found.length).toBeGreaterThan(1);
+ return found;
+ });
+ expect(dates.slice(0, 2)).toEqual(['2026-10-15', '2026-10-16']);
+ });
+
+ it('offers no new event in the month view without a calendar that can take one', () => {
+ setUp([], 'month');
+ useCalendarStore.setState({
+ calendars: [{ ...calendars[0], myRights: { ...RIGHTS, mayWriteAll: false, mayWriteOwn: false } }],
+ } as never);
+ renderApp();
+ const day = monthCell(/October 15, 2026/)!;
+ fireEvent.click(day);
+ fireEvent.keyDown(day.querySelector('[data-day-button]')!, { key: 'ArrowRight', shiftKey: true });
+ expect(screen.queryByRole('dialog', { name: 'quick_create.aria_label' })).toBeNull();
+ expect(day.closest('[role="grid"]')!.getAttribute('aria-multiselectable')).toBeNull();
+ });
+
it('opens the day on a phone tap instead', () => {
media.mobile = true;
media.desktop = false;
diff --git a/components/calendar/__tests__/calendar-month-view-drag-create.test.tsx b/components/calendar/__tests__/calendar-month-view-drag-create.test.tsx
new file mode 100644
index 000000000..f87ee1e85
--- /dev/null
+++ b/components/calendar/__tests__/calendar-month-view-drag-create.test.tsx
@@ -0,0 +1,267 @@
+import { render, fireEvent, cleanup, act, screen } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach, beforeEach, beforeAll } from 'vitest';
+import type { CalendarEvent, Calendar } from '@/lib/jmap/types';
+
+// Usability report 2026-11-04: in the month view a drag over the days did
+// nothing. It now picks days, as in Google Calendar and Outlook, and opens
+// the quick editor for an all-day event over them.
+
+const announce = vi.hoisted(() => vi.fn());
+vi.mock('@/lib/announce', async (importOriginal) => ({
+ ...(await importOriginal()),
+ announce,
+}));
+
+import { CalendarMonthView } from '../calendar-month-view';
+
+const calendars = [{ id: 'cal-1', name: 'Work', color: '#123456' }] as unknown as Calendar[];
+const standup = {
+ id: 'e1', '@type': 'Event', uid: 'e1', title: 'Standup', start: '2026-11-05T00:00:00', duration: 'P1D',
+ showWithoutTime: true, calendarIds: { 'cal-1': true },
+} as unknown as CalendarEvent;
+
+type Props = React.ComponentProps;
+
+function renderMonth(overrides: Partial = {}) {
+ const props: Props = {
+ focus: { date: new Date(2026, 10, 4), nonce: 0 },
+ windowKey: 'month:2026-11-04',
+ // Monday 2 Nov to Sunday 22 Nov 2026: three week rows.
+ rangeStart: new Date(2026, 10, 2),
+ rangeEnd: new Date(2026, 10, 22),
+ selectedDate: new Date(2026, 10, 4),
+ events: [standup],
+ calendars,
+ onSelectDate: vi.fn(),
+ onSelectEvent: vi.fn(),
+ onCreateAllDay: vi.fn(),
+ onCreateRange: vi.fn(),
+ onOpenDay: vi.fn(),
+ onContextMenuEmpty: vi.fn(),
+ ...overrides,
+ };
+ const view = render(('[data-week]').forEach((row, r) => {
+ row.getBoundingClientRect = box(0, r * 100, 700, 100);
+ row.querySelectorAll('[data-month-day]').forEach((cell, c) => {
+ cell.getBoundingClientRect = box((rtl ? 6 - c : c) * 100, r * 100, 100, 100);
+ });
+ });
+}
+
+const cell = (key: string) => document.querySelector(`[data-month-day="${key}"]`)!;
+/** The middle of a day's box, in the layout above. */
+function pointOf(key: string) {
+ const rect = cell(key).getBoundingClientRect();
+ return { clientX: rect.left + 50, clientY: rect.top + 80 };
+}
+const picked = () => Array.from(document.querySelectorAll('[data-month-day][aria-selected="true"]')).map((el) => el.getAttribute('data-month-day'));
+
+const mouse = { pointerId: 1, pointerType: 'mouse', isPrimary: true, button: 0 };
+function drag(from: string, to: string, via: string[] = [], release = true) {
+ const grid = cell(from);
+ fireEvent.pointerDown(grid, { ...mouse, ...pointOf(from) });
+ for (const key of [...via, to]) fireEvent.pointerMove(grid, { ...mouse, ...pointOf(key) });
+ if (release) fireEvent.pointerUp(grid, { ...mouse, ...pointOf(to) });
+}
+
+beforeAll(() => {
+ Element.prototype.setPointerCapture ??= () => {};
+ Element.prototype.releasePointerCapture ??= () => {};
+});
+beforeEach(() => announce.mockClear());
+afterEach(() => {
+ cleanup();
+ document.documentElement.dir = '';
+ vi.useRealTimers();
+});
+
+describe('Month view: dragging over days', () => {
+ it('picks the days in reading order across week rows and creates over them', () => {
+ const { props } = renderMonth();
+ drag('2026-11-05', '2026-11-10', ['2026-11-06', '2026-11-09'], false);
+ // Thursday to next Tuesday, wrapping at the end of the row; the
+ // selected day (Wednesday 4th) keeps its own mark.
+ expect(picked()).toEqual(['2026-11-04', '2026-11-05', '2026-11-06', '2026-11-07', '2026-11-08', '2026-11-09', '2026-11-10']);
+ expect(cell('2026-11-07').className).toContain('bg-primary/15');
+ fireEvent.pointerUp(cell('2026-11-05'), { ...mouse, ...pointOf('2026-11-10') });
+
+ expect(props.onCreateRange).toHaveBeenCalledTimes(1);
+ expect(props.onCreateRange).toHaveBeenCalledWith(new Date(2026, 10, 5), new Date(2026, 10, 10));
+ expect(props.onCreateAllDay).not.toHaveBeenCalled();
+ });
+
+ it('works backwards too', () => {
+ const { props } = renderMonth();
+ drag('2026-11-10', '2026-11-05', ['2026-11-09', '2026-11-06']);
+ expect(props.onCreateRange).toHaveBeenCalledWith(new Date(2026, 10, 5), new Date(2026, 10, 10));
+ });
+
+ it('mirrors in a right-to-left grid: the day to the left is the next one', () => {
+ document.documentElement.dir = 'rtl';
+ const { props } = renderMonth();
+ // Thursday 5th sits at x 200-300; Saturday 7th to its left at 0-100.
+ expect(pointOf('2026-11-07').clientX).toBeLessThan(pointOf('2026-11-05').clientX);
+ drag('2026-11-05', '2026-11-07');
+ expect(props.onCreateRange).toHaveBeenCalledWith(new Date(2026, 10, 5), new Date(2026, 10, 7));
+ });
+
+ it('leaves a click on the empty space of a day to the click: one all-day event there', () => {
+ const { props } = renderMonth();
+ const day = cell('2026-11-12');
+ fireEvent.pointerDown(day, { ...mouse, ...pointOf('2026-11-12') });
+ fireEvent.pointerUp(day, { ...mouse, ...pointOf('2026-11-12') });
+ fireEvent.click(day);
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ expect(props.onCreateAllDay).toHaveBeenCalledWith(new Date(2026, 10, 12));
+ });
+
+ it("doesn't count the click that ends a drag as a click on the last day", () => {
+ const { props } = renderMonth();
+ drag('2026-11-12', '2026-11-13');
+ fireEvent.click(cell('2026-11-13'));
+ expect(props.onCreateRange).toHaveBeenCalledTimes(1);
+ expect(props.onCreateAllDay).not.toHaveBeenCalled();
+ });
+
+ it('starts nothing from an event bar, the date number or "+N more"', () => {
+ // Six events on the 12th: some go under "+N more".
+ const busy = Array.from({ length: 6 }, (_, i) => ({ ...standup, id: `b${i}`, uid: `b${i}`, title: `Busy ${i}`, start: '2026-11-12T00:00:00' }));
+ const { props } = renderMonth({ events: [standup, ...busy] });
+ const bar = screen.getByRole('button', { name: /Standup/ });
+ const dateNumber = cell('2026-11-12').querySelector('[data-day-button]')!;
+ const more = screen.getByText('events.more');
+ for (const target of [bar, dateNumber, more]) {
+ fireEvent.pointerDown(target, { ...mouse, ...pointOf('2026-11-05') });
+ fireEvent.pointerMove(target, { ...mouse, ...pointOf('2026-11-06') });
+ fireEvent.pointerUp(target, { ...mouse, ...pointOf('2026-11-06') });
+ }
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ expect(picked()).toEqual(['2026-11-04']);
+ });
+
+ it('picks nothing where no calendar can take a new event', () => {
+ const { props } = renderMonth({ onCreateRange: undefined, onCreateAllDay: undefined });
+ drag('2026-11-05', '2026-11-10', ['2026-11-06'], false);
+ expect(picked()).toEqual(['2026-11-04']);
+ fireEvent.pointerUp(cell('2026-11-05'), { ...mouse, ...pointOf('2026-11-10') });
+ expect(props.onOpenDay).not.toHaveBeenCalled();
+ });
+
+ it('reads the days out while they are picked', async () => {
+ renderMonth();
+ drag('2026-11-05', '2026-11-10', [], false);
+ expect(announce).toHaveBeenLastCalledWith(
+ expect.stringMatching(/^selected_range$/),
+ expect.objectContaining({ key: 'calendar-month-selection' }),
+ );
+ });
+
+ it('marks the days of the quick editor and spans its placeholder over them', () => {
+ renderMonth({
+ pendingPreview: { start: new Date(2026, 10, 5), end: new Date(2026, 10, 10), title: 'Trip', allDay: true, calendarId: 'cal-1' },
+ });
+ expect(picked()).toEqual(['2026-11-04', '2026-11-05', '2026-11-06', '2026-11-07', '2026-11-08', '2026-11-09', '2026-11-10']);
+ const bars = Array.from(document.querySelectorAll('[data-pending-preview]'));
+ // Thursday to Sunday in the first row, Monday and Tuesday in the next.
+ expect(bars.map((bar) => bar.closest('[data-month-day]')!.getAttribute('data-month-day'))).toEqual(['2026-11-05', '2026-11-09']);
+ expect(bars.map((bar) => (bar.parentElement as HTMLElement).style.width)).toEqual(['calc(400% + 2px)', 'calc(200% + 0px)']);
+ });
+});
+
+describe('Month view: picking days by keyboard', () => {
+ const key = (el: HTMLElement, k: string, shiftKey = false) => fireEvent.keyDown(el, { key: k, shiftKey });
+ const dateButton = (day: string) => cell(day).querySelector('[data-day-button]')!;
+
+ it('grows the selection with Shift+arrows and creates over it with Enter', () => {
+ const { props } = renderMonth();
+ key(dateButton('2026-11-04'), 'ArrowRight', true);
+ key(dateButton('2026-11-05'), 'ArrowDown', true);
+ expect(picked()).toEqual(expect.arrayContaining(['2026-11-04', '2026-11-05', '2026-11-08', '2026-11-12']));
+ expect(announce).toHaveBeenLastCalledWith('selected_range enter_hint', expect.anything());
+ key(dateButton('2026-11-12'), 'Enter');
+ expect(props.onCreateRange).toHaveBeenCalledWith(new Date(2026, 10, 4), new Date(2026, 10, 12));
+ expect(props.onOpenDay).not.toHaveBeenCalled();
+ });
+
+ it('keeps Enter opening the day without a selection, and Escape drops one', () => {
+ const { props } = renderMonth();
+ key(dateButton('2026-11-04'), 'ArrowRight', true);
+ key(dateButton('2026-11-05'), 'Escape');
+ expect(picked()).toEqual(['2026-11-04']);
+ const enter = fireEvent.keyDown(dateButton('2026-11-05'), { key: 'Enter' });
+ expect(enter).toBe(true);
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ });
+
+ it('drops the selection on a plain arrow', () => {
+ const { props } = renderMonth();
+ key(dateButton('2026-11-04'), 'ArrowRight', true);
+ key(dateButton('2026-11-05'), 'ArrowRight');
+ key(dateButton('2026-11-06'), 'Enter');
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ });
+});
+
+describe('Month view: picking days on a touch screen', () => {
+ const finger = { pointerId: 7, pointerType: 'touch', isPrimary: true, button: 0 };
+
+ it('starts after a long press, then follows the finger', () => {
+ vi.useFakeTimers();
+ const { props } = renderMonth();
+ const start = cell('2026-11-05');
+ fireEvent.pointerDown(start, { ...finger, ...pointOf('2026-11-05') });
+ act(() => { vi.advanceTimersByTime(500); });
+ expect(picked()).toContain('2026-11-05');
+ fireEvent.pointerMove(start, { ...finger, ...pointOf('2026-11-12') });
+ // The grid doesn't scroll under a finger picking days.
+ const move = new Event('touchmove', { cancelable: true, bubbles: true });
+ start.dispatchEvent(move);
+ expect(move.defaultPrevented).toBe(true);
+ fireEvent.pointerUp(start, { ...finger, ...pointOf('2026-11-12') });
+ expect(props.onCreateRange).toHaveBeenCalledWith(new Date(2026, 10, 5), new Date(2026, 10, 12));
+ // The long press's own menu doesn't open over the new event.
+ fireEvent.contextMenu(start);
+ expect(props.onContextMenuEmpty).not.toHaveBeenCalled();
+ });
+
+ it('lets a swipe scroll: nothing is picked', () => {
+ vi.useFakeTimers();
+ const { props } = renderMonth();
+ const start = cell('2026-11-05');
+ fireEvent.pointerDown(start, { ...finger, ...pointOf('2026-11-05') });
+ fireEvent.pointerMove(start, { ...finger, clientX: 150, clientY: 140 });
+ act(() => { vi.advanceTimersByTime(500); });
+ const move = new Event('touchmove', { cancelable: true, bubbles: true });
+ start.dispatchEvent(move);
+ expect(move.defaultPrevented).toBe(false);
+ fireEvent.pointerUp(start, { ...finger, ...pointOf('2026-11-12') });
+ expect(picked()).toEqual(['2026-11-04']);
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ });
+
+ it('keeps the long-press menu of a single day', () => {
+ vi.useFakeTimers();
+ const { props } = renderMonth();
+ const start = cell('2026-11-05');
+ fireEvent.pointerDown(start, { ...finger, ...pointOf('2026-11-05') });
+ act(() => { vi.advanceTimersByTime(500); });
+ fireEvent.contextMenu(start);
+ expect(props.onContextMenuEmpty).not.toHaveBeenCalled();
+ fireEvent.pointerUp(start, { ...finger, ...pointOf('2026-11-05') });
+ expect(props.onCreateRange).not.toHaveBeenCalled();
+ expect(props.onContextMenuEmpty).toHaveBeenCalledWith(expect.anything(), new Date(2026, 10, 5), undefined, true);
+ });
+});
diff --git a/components/calendar/__tests__/calendar-week-view-drag-create.test.tsx b/components/calendar/__tests__/calendar-week-view-drag-create.test.tsx
new file mode 100644
index 000000000..8c8aa9331
--- /dev/null
+++ b/components/calendar/__tests__/calendar-week-view-drag-create.test.tsx
@@ -0,0 +1,141 @@
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest';
+import { CalendarWeekView } from '../calendar-week-view';
+import { CalendarDayView } from '../calendar-day-view';
+import type { CalendarEvent, Calendar } from '@/lib/jmap/types';
+
+// Usability report 2026-11-04: dragging over an empty stretch of a day drew
+// a see-through selection the events showed through, and the new event's
+// placeholder lay over the events it overlapped ("Lernblock" hidden behind
+// it) instead of taking a column beside them.
+
+const calendars = [{ id: 'cal-1', name: 'Work', color: '#123456' }] as unknown as Calendar[];
+
+function timed(id: string, start: string, duration: string): CalendarEvent {
+ return {
+ id, '@type': 'Event', uid: id, title: id, start, duration, timeZone: null,
+ showWithoutTime: false, calendarIds: { 'cal-1': true },
+ } as unknown as CalendarEvent;
+}
+
+const lernblock = timed('Lernblock', '2026-09-09T12:30:00', 'PT1H');
+const draft = {
+ start: new Date(2026, 8, 9, 11, 45), end: new Date(2026, 8, 9, 15, 45),
+ title: '(No title)', allDay: false, calendarId: 'cal-1',
+};
+
+type WeekProps = React.ComponentProps;
+
+function renderWeek(overrides: Partial = {}) {
+ const props: WeekProps = {
+ focus: { date: new Date(2026, 8, 9), nonce: 0 },
+ windowKey: 'week:2026-09-07',
+ rangeStart: new Date(2026, 8, 7),
+ rangeEnd: new Date(2026, 8, 13),
+ selectedDate: new Date(2026, 8, 9),
+ events: [],
+ calendars,
+ onSelectDate: vi.fn(),
+ onSelectEvent: vi.fn(),
+ onCreateAtTime: vi.fn(),
+ ...overrides,
+ };
+ return { props, ...render((`[data-slot^="${key}T"]`);
+ const cell = slot?.closest('[role="gridcell"]');
+ if (!cell) throw new Error(`no column for ${key}`);
+ return cell;
+}
+
+/** The pixel offset of a time in a column whose hours are 60 px tall. */
+function yOf(key: string, minutes: number): number {
+ const first = Number(document.querySelector(`[data-slot^="${key}T"]`)!.getAttribute('data-slot')!.split('T')[1]);
+ return minutes - first * 60;
+}
+
+/** The positioned box around the drawn placeholder of the new event. */
+function placeholderBox(): HTMLElement {
+ const preview = document.querySelector('[data-pending-preview]');
+ if (!preview) throw new Error('no placeholder');
+ return preview.style.width ? preview : preview.parentElement!;
+}
+
+function eventBox(id: string): HTMLElement {
+ const box = Array.from(document.querySelectorAll('[data-calendar-event]'))
+ .find((el) => el.textContent?.includes(id));
+ if (!box) throw new Error(`no event ${id}`);
+ return box;
+}
+
+beforeAll(() => {
+ // jsdom has no pointer capture.
+ Element.prototype.setPointerCapture ??= () => {};
+ Element.prototype.releasePointerCapture ??= () => {};
+});
+
+afterEach(() => cleanup());
+
+describe('Week view drag-to-create', () => {
+ it('draws the selection opaque and above the events it passes over', () => {
+ renderWeek({ events: [lernblock] });
+ const col = column('2026-09-09');
+ fireEvent.pointerDown(col, { pointerId: 1, pointerType: 'mouse', button: 0, clientY: yOf('2026-09-09', 675) });
+ fireEvent.pointerMove(col, { pointerId: 1, pointerType: 'mouse', clientY: yOf('2026-09-09', 975) });
+
+ const selection = col.querySelector('[data-drag-selection]');
+ expect(selection).not.toBeNull();
+ expect(selection!.textContent).toContain('11:15 – 16:15');
+ // An opaque fill: the event under it doesn't show through.
+ expect(selection!.style.backgroundColor).toContain('var(--color-background)');
+ expect(selection!.className).toContain('z-30');
+ expect(eventBox('Lernblock').className).toContain('z-10');
+ });
+
+ it('creates the range the selection showed', () => {
+ const { props } = renderWeek({ events: [lernblock] });
+ const col = column('2026-09-09');
+ fireEvent.pointerDown(col, { pointerId: 1, pointerType: 'mouse', button: 0, clientY: yOf('2026-09-09', 675) });
+ fireEvent.pointerMove(col, { pointerId: 1, pointerType: 'mouse', clientY: yOf('2026-09-09', 975) });
+ fireEvent.pointerUp(col, { pointerId: 1, pointerType: 'mouse', clientY: yOf('2026-09-09', 940) });
+
+ expect(props.onCreateAtTime).toHaveBeenCalledWith(new Date(2026, 8, 9, 11, 15), new Date(2026, 8, 9, 16, 15));
+ });
+});
+
+describe('The new event beside the events it overlaps', () => {
+ it('shares the width with them in the week view', () => {
+ renderWeek({ events: [lernblock], pendingPreview: draft });
+ expect(placeholderBox().style.width).toBe('50%');
+ expect(eventBox('Lernblock').style.width).toBe('50%');
+ // Each in its own half.
+ expect(placeholderBox().style.insetInlineStart).not.toBe(eventBox('Lernblock').style.insetInlineStart);
+ });
+
+ it('keeps the whole width where nothing overlaps it', () => {
+ renderWeek({ events: [timed('Later', '2026-09-09T17:00:00', 'PT1H')], pendingPreview: draft });
+ expect(placeholderBox().style.width).toBe('100%');
+ });
+
+ it('shares the width with them in the day view', () => {
+ render(
+ (() => {
@@ -1984,7 +2001,8 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
onContextMenuEvent={handleContextMenuEvent}
onContextMenuEmpty={handleContextMenuEmpty}
onReplyEvent={handleReplyEvent}
- onCreateAllDay={handleGridCreateAllDay}
+ onCreateAllDay={canCreateEvents ? handleGridCreateAllDay : undefined}
+ onCreateRange={canCreateEvents ? handleGridCreateDays : undefined}
firstDayOfWeek={firstDayOfWeek}
isMobile={isMobile}
pendingPreview={gridPreview}
diff --git a/components/calendar/calendar-day-view.tsx b/components/calendar/calendar-day-view.tsx
index 8368b0429..d5bf5c515 100644
--- a/components/calendar/calendar-day-view.tsx
+++ b/components/calendar/calendar-day-view.tsx
@@ -10,7 +10,7 @@ import { EventCard, eventFillClass, eventFillStyle } from "./event-card";
import { CalendarTaskChip } from "./task-chip";
import { QuickEventInput } from "./quick-event-input";
import { AllHoursToggle, HiddenEventsIndicator } from "./display-hours-controls";
-import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents } from "@/lib/calendar-utils";
+import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents, pendingTimedMinutes, PENDING_LAYOUT_ID } from "@/lib/calendar-utils";
import { clipToDisplayHours, partitionByDisplayHours } from "@/lib/calendar-display-range";
import { displayNow, isDisplayToday } from "@/lib/timezone";
import { groupTasksByDueDay } from "@/lib/calendar-tasks";
@@ -203,6 +203,25 @@ export function CalendarDayView({
return map;
}, [days, eventsByDay, hours]);
+ // The new event being created takes a column beside the events it
+ // overlaps, as it will once saved, instead of covering them. Only its
+ // times count: typing its title doesn't redo the layout.
+ const pendingStartMs = pendingPreview && !pendingPreview.allDay ? pendingPreview.start.getTime() : null;
+ const pendingEndMs = pendingPreview && !pendingPreview.allDay ? pendingPreview.end.getTime() : null;
+ const pendingLayout = useMemo(() => {
+ if (pendingStartMs === null || pendingEndMs === null) return null;
+ const preview = { start: new Date(pendingStartMs), end: new Date(pendingEndMs) };
+ const day = days.find((d) => isSameDay(d, preview.start));
+ const bounds = day ? pendingTimedMinutes(preview, day) : null;
+ if (!day || !bounds) return null;
+ const key = format(day, "yyyy-MM-dd");
+ const partition = partitionByDisplayHours(eventsByDay.get(key)?.timed ?? [], day, hours);
+ const all = layoutOverlappingEvents(partition.visible, day, bounds);
+ const pending = all.find((layout) => layout.event.id === PENDING_LAYOUT_ID);
+ if (!pending) return null;
+ return { key, layouts: all.filter((layout) => layout.event.id !== PENDING_LAYOUT_ID), pending };
+ }, [pendingStartMs, pendingEndMs, days, eventsByDay, hours]);
+
const scrollToFocus = useCallback(() => {
const root = rootRef.current;
if (!root) return;
@@ -279,7 +298,7 @@ export function CalendarDayView({
}, []);
const {
- dragCreate, handleGridPointerDown, handleGridPointerMove, handleGridPointerUp,
+ dragCreate, handleGridPointerDown, handleGridPointerMove, handleGridPointerUp, handleGridPointerCancel,
resizeVisual, handleResizePointerDown, handleResizePointerMove, handleResizePointerUp,
quickCreate, handleSlotClick, handleSlotDoubleClick, handleQuickCreateSubmit, handleQuickCreateCancel,
dropTarget, handleColumnDragOver, handleColumnDragLeave, handleColumnDrop,
@@ -519,7 +538,7 @@ export function CalendarDayView({
const key = format(day, "yyyy-MM-dd");
const today = isDisplayToday(day);
const dayLayout = layoutByDay.get(key);
- const layouted = dayLayout?.layouts ?? [];
+ const layouted = (pendingLayout?.key === key ? pendingLayout.layouts : dayLayout?.layouts) ?? [];
return (
handleGridPointerDown(e, key, day)}
onPointerMove={handleGridPointerMove}
onPointerUp={handleGridPointerUp}
+ onPointerCancel={handleGridPointerCancel}
onDragOver={(e) => handleColumnDragOver(e, key)}
onDragLeave={handleColumnDragLeave}
onDrop={(e) => handleColumnDrop(e, day)}
@@ -656,8 +676,11 @@ export function CalendarDayView({
{dragCreate?.dayKey === key && (
)}
- {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
+ {pendingPreview && pendingLayout?.key === key && (
(() => {
- const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
- const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
- const durationMin = Math.max(15, endMin - startMin);
- if (startMin + durationMin <= hours.startMinutes || startMin >= hours.endMinutes) return null;
- const clip = clipToDisplayHours(startMin, startMin + durationMin, hours);
+ const { startMinutes: startMin, endMinutes: endMin, column, totalColumns } = pendingLayout.pending;
+ if (endMin <= hours.startMinutes || startMin >= hours.endMinutes) return null;
+ const clip = clipToDisplayHours(startMin, endMin, hours);
const cal = calendars.find(c => c.id === pendingPreview.calendarId);
const color = paint(cal?.color || "#3b82f6");
- // Drawn like a saved event, so the new event shows where
- // it will land while it is being created.
+ // Drawn like a saved event, in the column it will take, so the new
+ // event shows where it will land while it is being created.
return (
- (null);
const bottomSentinelRef = useRef(null);
+ // Picking days to create an event over them (drag, long press, Shift+arrows).
+ const rangeSelect = useMonthRangeSelect({
+ scrollRef,
+ enabled: !!onCreateRange,
+ onCreateRange: (start, end) => onCreateRange?.(start, end),
+ onContextMenuDay: onContextMenuEmpty ? (e, day) => onContextMenuEmpty(e, day, undefined, true) : undefined,
+ });
+ // The days stay marked while the quick editor for them is open; Escape
+ // or a click elsewhere closes it and the mark goes with it.
+ const draftRange = useMemo(() => {
+ if (!pendingPreview?.allDay) return null;
+ const start = startOfDay(pendingPreview.start);
+ const end = startOfDay(pendingPreview.end);
+ return end < start ? { start, end: start } : { start, end };
+ }, [pendingPreview?.allDay, pendingPreview?.start, pendingPreview?.end]);
+ const highlight = rangeSelect.selection ?? draftRange;
+ const picking = rangeSelect.selection;
+ const announcement = picking
+ ? [
+ isSameDay(picking.start, picking.end)
+ ? tSelect("selected_day", { day: formatFullDate(picking.start) })
+ : tSelect("selected_range", { start: formatFullDate(picking.start), end: formatFullDate(picking.end) }),
+ picking.keyboard ? tSelect("enter_hint") : "",
+ ].join(" ").trim()
+ : "";
+ // The days picked, read out as they change (the last of a quick run).
+ useEffect(() => {
+ if (announcement) announce(announcement, { key: "calendar-month-selection", debounceMs: 250 });
+ }, [announcement]);
+
// Six rows fill the viewport, as a single month used to; taller rows grow
// with their chips.
const [viewportHeight, setViewportHeight] = useState(0);
@@ -420,8 +460,21 @@ export function CalendarMonthView({
const focusKey = dayKey(focus.date);
return keys.has(focusKey) ? focusKey : (weeks[0]?.[0] ? dayKey(weeks[0][0]) : selectedKey);
}, [weeks, selectedKey, focus.date]);
+ const { extendTo, commitKeyboard, clearKeyboard } = rangeSelect;
const handleDayKeyDown = useCallback((e: React.KeyboardEvent, day: Date, dayIndex: number) => {
- if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+ if (e.altKey || e.ctrlKey || e.metaKey) return;
+ // Enter over days picked with Shift+arrows creates there; without
+ // them it opens the day, as before.
+ if (e.key === "Enter" && !e.shiftKey && commitKeyboard()) {
+ e.preventDefault();
+ return;
+ }
+ if (e.key === "Escape" && clearKeyboard()) {
+ e.preventDefault();
+ e.stopPropagation();
+ return;
+ }
+ if (e.shiftKey && !onCreateRange) return;
const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
let delta: number;
switch (e.key) {
@@ -438,9 +491,11 @@ export function CalendarMonthView({
const next = addDays(day, delta);
const target = scrollRef.current?.querySelector(`[data-day-button="${dayKey(next)}"]`);
if (!target) return;
+ if (e.shiftKey) extendTo(day, next);
+ else clearKeyboard();
onSelectDate(next);
target.focus();
- }, [onSelectDate]);
+ }, [onSelectDate, onCreateRange, extendTo, commitKeyboard, clearKeyboard]);
const [dropDayKey, setDropDayKey] = useState(null);
@@ -484,13 +539,20 @@ export function CalendarMonthView({
}, [t, describeError, userEmailsFor, onMoveEvent]);
return (
-
- {pendingPreview.title}
-
-
- {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+
);
diff --git a/components/calendar/calendar-month-view.tsx b/components/calendar/calendar-month-view.tsx
index 6ad3d854a..c5c4ef7a8 100644
--- a/components/calendar/calendar-month-view.tsx
+++ b/components/calendar/calendar-month-view.tsx
@@ -1,8 +1,8 @@
"use client";
-import { useMemo, useState, useCallback, useRef, useLayoutEffect, type DragEvent } from "react";
+import { useMemo, useState, useCallback, useEffect, useRef, useLayoutEffect, type DragEvent } from "react";
import { useTranslations } from "next-intl";
-import { format, parseISO, eachDayOfInterval, addDays, isSameDay } from "date-fns";
+import { format, parseISO, eachDayOfInterval, addDays, isSameDay, differenceInCalendarDays, startOfDay } from "date-fns";
import { cn } from "@/lib/utils";
import { EventCard } from "./event-card";
import { CalendarTaskChip } from "./task-chip";
@@ -26,6 +26,8 @@ import { useDisplayDateFormatter } from "@/hooks/use-display-date-formatter";
import type { MoveEventHandler } from "@/hooks/use-time-grid-interactions";
import { useCvdColor } from "@/hooks/use-cvd-color";
import { useEventUserEmails } from "@/hooks/use-event-user-emails";
+import { isInMonthRange, useMonthRangeSelect, type MonthRange } from "@/hooks/use-month-range-select";
+import { announce } from "@/lib/announce";
interface CalendarMonthViewProps extends ScrollWindowViewProps {
selectedDate: Date;
@@ -41,6 +43,12 @@ interface CalendarMonthViewProps extends ScrollWindowViewProps {
onReplyEvent?: (anchor: HTMLElement, event: CalendarEvent) => void;
/** A click on a day's empty space: a new all-day event there (wide screens). */
onCreateAllDay?: (date: Date) => void;
+ /**
+ * Days picked by a drag over empty day space, a long press and drag on
+ * touch, or Shift+arrows and Enter: a new all-day event over them. Left
+ * out where no calendar can take a new event.
+ */
+ onCreateRange?: (start: Date, end: Date) => void;
/** Open a day in the day view (its date number, or its "N more" link). */
onOpenDay?: (date: Date) => void;
firstDayOfWeek?: number;
@@ -162,6 +170,7 @@ export function CalendarMonthView({
onContextMenuEmpty,
onReplyEvent,
onCreateAllDay,
+ onCreateRange,
onOpenDay,
isMobile,
pendingPreview,
@@ -174,6 +183,7 @@ export function CalendarMonthView({
onMoveEvent,
}: CalendarMonthViewProps) {
const t = useTranslations("calendar");
+ const tSelect = useTranslations("calendar_month_select");
const paint = useCvdColor();
const describeError = useCalendarErrorMessage();
// An event of another signed-in login is read with that login's addresses.
@@ -271,6 +281,36 @@ export function CalendarMonthView({
const topSentinelRef = useRef
+
+ {pendingPreview.title}
+
+
+ {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(endMin, timeFormat)}
+
+
{/* As tall as the window allows (it's moved up to fit), then it scrolls. */}
diff --git a/desktop-policies/Bulwark.admx b/desktop-policies/Bulwark.admx
index 1b60d0497..6a2a8211c 100644
--- a/desktop-policies/Bulwark.admx
+++ b/desktop-policies/Bulwark.admx
@@ -224,5 +224,30 @@
+
+
+
+
+
+
+
+
+
diff --git a/desktop-policies/de-DE/Bulwark.adml b/desktop-policies/de-DE/Bulwark.adml
index 2975e98f9..8ae5378f3 100644
--- a/desktop-policies/de-DE/Bulwark.adml
+++ b/desktop-policies/de-DE/Bulwark.adml
@@ -67,6 +67,14 @@
Wenn aktiviert oder nicht konfiguriert, trägt sich die App unter Windows in die Liste „Öffnen mit“ für gängige Dokumente und Bilder und in das Menü „Senden an“ ein, damit Benutzer eine Datei aus dem Dateimanager an eine neue Nachricht anhängen können. Sie wird nie zum Standardprogramm für diese Dateien. Wenn deaktiviert, entfernt die App diese Einträge für den Benutzer. Mail-Links und .eml-, .ics- und .vcf-Dateien sind nicht betroffen.
Entwicklertools
Dieselben Werte wie die gleichnamige Richtlinie von Chrome. 2: Die Entwicklertools sind aus und die Einstellung ist gesperrt. 0 oder 1 oder nicht konfiguriert: Benutzer können sie nach einer Warnung in den Einstellungen einschalten. Mit den Entwicklertools kann jeder an der Tastatur alles lesen, was die App enthält, auch E-Mails und Passwörter im Speicher.
+ Zuletzt verwendete Dateien im Menü „Anfügen“ anzeigen
+ Wenn aktiviert oder nicht konfiguriert, listet die Schaltfläche „Anfügen“ in einer neuen Nachricht die Dateien auf, die der Benutzer zuletzt geöffnet hat, so wie das Betriebssystem sie erfasst. Ein Klick fügt eine davon an. Die Liste wird beim Öffnen des Menüs gelesen und bleibt auf dem Gerät. Wenn deaktiviert, fehlt die Liste und die App lehnt es ab, sie zu lesen. Das Anfügen über den Dateidialog ist nicht betroffen.
+ Dateien als Laufwerk zulassen
+ Wenn aktiviert oder nicht konfiguriert, können Benutzer ihre Dateien im Dateimanager als Laufwerk anzeigen. Dateien werden beim Öffnen heruntergeladen. Vorerst nur unter Windows. Wenn deaktiviert, wird das Laufwerk nicht angeboten, und ein vorhandenes Laufwerk wird mit den Kopien der Dateien darin entfernt. Die Dateien auf dem Server sind davon nicht betroffen.
+ Synchronisieren von Ordnern mit Dateien zulassen
+ Wenn aktiviert oder nicht konfiguriert, können Benutzer einen Ordner auf dem Computer und einen Ordner in Dateien in beide Richtungen gleich halten. Wenn deaktiviert, wird dies nicht angeboten, und Ordner, die gerade synchronisiert werden, hören damit auf. Die Dateien in diesen Ordnern bleiben, wo sie sind.
+ Laufwerksbuchstabe für Dateien
+ Nur unter Windows. Ein Buchstabe von D bis Z gibt dem Laufwerk Dateien für jeden Benutzer diesen Buchstaben, und Benutzer können ihn nicht ändern. Geben Sie none ein, damit es nie einen Buchstaben bekommt. Wenn nicht konfiguriert, wählen Benutzer in den Einstellungen, und bis dahin gibt es keinen Buchstaben. Ein Wert, den die App nicht lesen kann, gilt als none.
Adressen Wert (0, 1 oder 2)
diff --git a/desktop-policies/en-US/Bulwark.adml b/desktop-policies/en-US/Bulwark.adml
index 9ae91340a..5ef2446ee 100644
--- a/desktop-policies/en-US/Bulwark.adml
+++ b/desktop-policies/en-US/Bulwark.adml
@@ -67,6 +67,14 @@
When enabled or not configured, the app adds itself to the "Open with" list for common documents and pictures and to the "Send to" menu on Windows, so people can attach a file to a new message from the file manager. It never becomes the default program for those files. When disabled, the app removes these entries for the user. Mail links and .eml, .ics and .vcf files are not affected.
Developer tools
The same values as Chrome's policy of this name. 2: developer tools are off and the setting is locked. 0 or 1, or not configured: people can turn them on under Settings, after a warning. Developer tools let anyone at the keyboard read everything the app holds, mail and passwords in memory included.
+ Show recent files in the Attach menu
+ When enabled or not configured, the Attach button in a new message lists the files the user opened recently, as the operating system records them, so one click attaches one. The list is read when the menu opens and stays on the device. When disabled, the list is gone and the app refuses to read it. Attaching through the file dialog is not affected.
+ Allow Files as a drive
+ When enabled or not configured, people can show their Files in the file manager as a drive, with files downloaded when opened. Windows only for now. When disabled, the drive is not offered, and a drive that is already there is removed with the copies of files in it. Files on the server are not affected.
+ Allow syncing folders with Files
+ When enabled or not configured, people can keep a folder on the computer and a folder in Files the same, in both directions. When disabled, this is not offered and folders that sync now stop. The files in those folders stay where they are.
+ Drive letter for Files
+ Windows only. A letter from D to Z gives the Files drive that letter for every user, and they can't change it. Enter none to never give it a letter. When not configured, people choose under Settings, and there is no letter until they do. A value the app can't read counts as none.
Addresses Value (0, 1 or 2)
diff --git a/desktop-policies/org.bulwarkmail.desktop.mobileconfig b/desktop-policies/org.bulwarkmail.desktop.mobileconfig
index 23ddb522c..8487f71b6 100644
--- a/desktop-policies/org.bulwarkmail.desktop.mobileconfig
+++ b/desktop-policies/org.bulwarkmail.desktop.mobileconfig
@@ -69,6 +69,14 @@
DeveloperToolsAvailability
2
+ RecentFilesInAttach
+ FilesDriveEnabled
+ FilesFolderSyncEnabled
+ FilesDriveLetter
+ none
Recommended
UpdateChannel
diff --git a/desktop-policies/policies.json b/desktop-policies/policies.json
index 89dd1e510..cf625e1da 100644
--- a/desktop-policies/policies.json
+++ b/desktop-policies/policies.json
@@ -29,6 +29,10 @@
"BrowserSignIn": true,
"OpenWithEnabled": true,
"DeveloperToolsAvailability": 2,
+ "RecentFilesInAttach": true,
+ "FilesDriveEnabled": true,
+ "FilesFolderSyncEnabled": true,
+ "FilesDriveLetter": "none",
"Recommended": {
"UpdateChannel": "stable"
}
diff --git a/hooks/__tests__/use-composer-edits.test.tsx b/hooks/__tests__/use-composer-edits.test.tsx
index 6e234bee2..7fe08ead7 100644
--- a/hooks/__tests__/use-composer-edits.test.tsx
+++ b/hooks/__tests__/use-composer-edits.test.tsx
@@ -226,6 +226,19 @@ describe('sending', () => {
await expect(result.current.edits.confirmSend()).resolves.toBe(true);
});
+ it('asks in the app\'s own window where the shell has them; Escape is going back', async () => {
+ const show = vi.fn(async (_request: unknown) => null as unknown);
+ const desktop = (window as unknown as { bulwarkDesktop: { dialogs: Record } }).bulwarkDesktop;
+ desktop.dialogs = { confirm, show, cancel: vi.fn() };
+ useEditSessions.setState({ sessions: [session({ changed: true })] });
+ const { result } = setup({ start: [chip] });
+ await expect(result.current.edits.confirmSend()).resolves.toBe(false);
+ expect(confirm).not.toHaveBeenCalled();
+ expect(show.mock.calls[0][0]).toMatchObject({ message: [{ text: 'send_stale_detail' }], buttons: [{ label: 'send_stale_back', variant: 'secondary' }, { label: 'send_stale_send' }], defaultIndex: 0 });
+ show.mockResolvedValueOnce({ button: 1 });
+ await expect(result.current.edits.confirmSend()).resolves.toBe(true);
+ });
+
it('sees a save from a moment ago, which the list has not heard of', async () => {
useEditSessions.setState({ sessions: [session()] });
const { result } = setup({ start: [chip] });
diff --git a/hooks/__tests__/use-time-grid-interactions.test.ts b/hooks/__tests__/use-time-grid-interactions.test.ts
index ad9629a86..5c65ef79b 100644
--- a/hooks/__tests__/use-time-grid-interactions.test.ts
+++ b/hooks/__tests__/use-time-grid-interactions.test.ts
@@ -82,6 +82,8 @@ describe("useTimeGridInteractions slot clicks (#435)", () => {
act(() => result.current.handleGridPointerDown(pointer(160), "2026-09-03", day));
act(() => result.current.handleGridPointerMove(pointer(400)));
expect(result.current.dragCreate).toEqual({ dayKey: "2026-09-03", startMinutes: 540, endMinutes: 780 });
+ act(() => result.current.handleGridPointerMove(pointer(2000)));
+ expect(result.current.dragCreate).toEqual({ dayKey: "2026-09-03", startMinutes: 540, endMinutes: 1200 });
act(() => result.current.handleGridPointerUp(pointer(2000)));
const [start, end] = onCreateRange.mock.calls[0];
@@ -89,6 +91,61 @@ describe("useTimeGridInteractions slot clicks (#435)", () => {
expect(end).toEqual(new Date(2026, 8, 3, 20, 0, 0, 0));
});
+ // The selection said 11:15 – 16:15 and the event came out shorter: the
+ // range drawn, its label and the event created must be the same.
+ describe("drag-to-create creates what the selection shows", () => {
+ const day = new Date(2026, 10, 2);
+ let top = 0;
+ const column = {
+ getBoundingClientRect: () => ({ top }),
+ setPointerCapture: vi.fn(),
+ releasePointerCapture: vi.fn(),
+ };
+ const pointer = (clientY: number) => ({
+ pointerType: "mouse", button: 0, pointerId: 1, clientY,
+ target: { closest: () => null }, currentTarget: column,
+ }) as unknown as React.PointerEvent;
+ beforeEach(() => { top = 0; });
+
+ it("commits the range last drawn, not one measured again on release", () => {
+ const { result, onCreateRange } = renderInteractions();
+ act(() => result.current.handleGridPointerDown(pointer(675), "2026-11-02", day));
+ act(() => result.current.handleGridPointerMove(pointer(975)));
+ expect(result.current.dragCreate).toEqual({ dayKey: "2026-11-02", startMinutes: 675, endMinutes: 975 });
+ // The release reports a slightly different spot (a trackpad lifting).
+ act(() => result.current.handleGridPointerUp(pointer(948)));
+
+ const [start, end] = onCreateRange.mock.calls[0];
+ expect(start).toEqual(new Date(2026, 10, 2, 11, 15));
+ expect(end).toEqual(new Date(2026, 10, 2, 16, 15));
+ });
+
+ it("follows the grid when it scrolls during the drag, and creates what it then shows", () => {
+ const { result, onCreateRange } = renderInteractions();
+ act(() => result.current.handleGridPointerDown(pointer(675), "2026-11-02", day));
+ act(() => result.current.handleGridPointerMove(pointer(975)));
+ // The wheel scrolls the grid up by an hour under a still pointer.
+ top = -60;
+ act(() => { window.dispatchEvent(new Event("scroll")); });
+ expect(result.current.dragCreate).toEqual({ dayKey: "2026-11-02", startMinutes: 675, endMinutes: 1035 });
+ act(() => result.current.handleGridPointerUp(pointer(975)));
+
+ const [start, end] = onCreateRange.mock.calls[0];
+ expect(start).toEqual(new Date(2026, 10, 2, 11, 15));
+ expect(end).toEqual(new Date(2026, 10, 2, 17, 15));
+ });
+
+ it("creates nothing when the browser takes the pointer over", () => {
+ const { result, onCreateRange } = renderInteractions();
+ act(() => result.current.handleGridPointerDown(pointer(675), "2026-11-02", day));
+ act(() => result.current.handleGridPointerMove(pointer(975)));
+ act(() => result.current.handleGridPointerCancel());
+ expect(result.current.dragCreate).toBeNull();
+ act(() => result.current.handleGridPointerUp(pointer(975)));
+ expect(onCreateRange).not.toHaveBeenCalled();
+ });
+ });
+
it("a 23:00 click ends at midnight of the next day", () => {
const { result, onCreateRange } = renderInteractions();
const day = new Date(2026, 8, 3);
diff --git a/hooks/use-composer-edits.ts b/hooks/use-composer-edits.ts
index 6f7bb7367..806aec004 100644
--- a/hooks/use-composer-edits.ts
+++ b/hooks/use-composer-edits.ts
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, type Dispatch, type SetStateAction } fr
import { useTranslations } from "next-intl";
import { editAllowed, editFileInfo, followEditSessions, getEditBridge, parseEditSource, readEditedFile, takeFilesForReply, useEditSessions, type EditSource } from "@/lib/desktop/edit-attachments";
import { getDesktopBridge } from "@/lib/desktop/bridge";
+import { askInWindow } from "@/lib/desktop/dialog-window";
import { useEditAttachment } from "@/hooks/use-edit-attachment";
import { toast } from "@/stores/toast-store";
@@ -203,8 +204,18 @@ export function useComposerEdits({ attachments, se
const session = att.editSessionId ? all.find((s) => s.id === att.editSessionId) : undefined;
return session?.changed && editFileInfo(att.file)?.hash !== session.hash ? [session] : [];
});
+ if (stale.length === 0) return true;
+ // A window of the app's own; an older shell asks with the OS's message box.
+ const asked = askInWindow({
+ title: t("send_stale_title", { name: stale[0].name }),
+ message: t("send_stale_detail"),
+ buttons: [{ label: t("send_stale_back"), variant: "secondary" }, { label: t("send_stale_send") }],
+ defaultIndex: 0,
+ });
+ const answer = asked ? await asked.answer : "failed";
+ if (answer !== "failed") return Boolean(answer && "button" in answer && answer.button === 1);
const dialogs = getDesktopBridge()?.dialogs;
- if (stale.length === 0 || !dialogs) return true;
+ if (!dialogs) return true;
const choice = await dialogs.confirm({
type: "warning",
message: t("send_stale_title", { name: stale[0].name }),
diff --git a/hooks/use-context-menu.ts b/hooks/use-context-menu.ts
index 7796434be..ab3c6edaf 100644
--- a/hooks/use-context-menu.ts
+++ b/hooks/use-context-menu.ts
@@ -2,7 +2,6 @@
import { useState, useCallback, useEffect, useRef } from "react";
import type { ContextMenuPosition } from "@/components/ui/context-menu";
-import { nativeMenuIsOpen } from "@/lib/desktop/native-menu";
interface ContextMenuState {
isOpen: boolean;
@@ -115,14 +114,12 @@ export function useContextMenu(): UseContextMenuReturn {
};
const handleClickOutside = (e: MouseEvent) => {
- if (nativeMenuIsOpen()) return;
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
closeContextMenu();
}
};
const handleScroll = (e: Event) => {
- if (nativeMenuIsOpen()) return;
if (menuRef.current && e.target instanceof Node && menuRef.current.contains(e.target)) {
return;
}
@@ -133,8 +130,6 @@ export function useContextMenu(): UseContextMenuReturn {
// A focused control in the menu may have opened a system dialog that
// took the focus from the window, such as a color input's (#1366).
if (menuRef.current?.contains(document.activeElement)) return;
- // In the desktop app the menu is native: it closes itself, and says what was picked.
- if (nativeMenuIsOpen()) return;
closeContextMenu();
};
diff --git a/hooks/use-month-range-select.ts b/hooks/use-month-range-select.ts
new file mode 100644
index 000000000..82bee48ce
--- /dev/null
+++ b/hooks/use-month-range-select.ts
@@ -0,0 +1,283 @@
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type PointerEvent, type RefObject } from "react";
+import { isSameDay } from "date-fns";
+import { parseDayKey } from "@/lib/calendar-scroll-window";
+
+/** Days picked in the month grid, first and last in date order. */
+export interface MonthRange {
+ start: Date;
+ end: Date;
+}
+
+/** Days being picked; `keyboard` when Shift+arrows picked them (Enter creates). */
+export interface MonthSelection extends MonthRange {
+ keyboard?: boolean;
+}
+
+/** How long a finger rests on a day before a drag picks days instead of scrolling. */
+export const LONG_PRESS_MS = 450;
+/** A finger that moves this far before the long press is scrolling. */
+const TOUCH_SLOP_PX = 10;
+
+/** The days from `a` to `b` in reading order, whichever way the drag went. */
+export function monthRange(a: Date, b: Date): MonthRange {
+ return a <= b ? { start: a, end: b } : { start: b, end: a };
+}
+
+export function isInMonthRange(day: Date, range: MonthRange | null | undefined): boolean {
+ if (!range) return false;
+ return (day >= range.start || isSameDay(day, range.start)) && (day <= range.end || isSameDay(day, range.end));
+}
+
+/**
+ * The day cell under a point of the month grid: the week row at that
+ * height, then the cell at that position in it. Measured from the cells
+ * themselves, so a right-to-left grid needs nothing extra; a point past
+ * the grid takes the nearest row and cell. Not elementFromPoint: an event
+ * bar over several days belongs to its first day's cell.
+ */
+export function monthDayAtPoint(root: HTMLElement, x: number, y: number): Date | null {
+ const rows = Array.from(root.querySelectorAll("[data-week]"));
+ if (rows.length === 0) return null;
+ const nearest = (items: T[], from: (rect: DOMRect) => [number, number], at: number): T => {
+ let best = items[0];
+ let bestDistance = Infinity;
+ for (const item of items) {
+ const [low, high] = from(item.getBoundingClientRect());
+ const distance = at < low ? low - at : at >= high ? at - high + 1 : 0;
+ if (distance < bestDistance) {
+ best = item;
+ bestDistance = distance;
+ if (distance === 0) break;
+ }
+ }
+ return best;
+ };
+ const row = nearest(rows, (rect) => [rect.top, rect.bottom], y);
+ const cells = Array.from(row.querySelectorAll("[data-month-day]"));
+ if (cells.length === 0) return null;
+ const cell = nearest(cells, (rect) => [rect.left, rect.right], x);
+ return parseDayKey(cell.dataset.monthDay ?? "");
+}
+
+/** What a press on the grid hits that isn't empty day space. */
+const NOT_EMPTY_SPACE = "[data-month-entry], button, a, input, select, textarea, [role='button'], [data-calendar-event]";
+
+interface PressState {
+ pointerId: number;
+ touch: boolean;
+ anchor: Date;
+ current: Date;
+ x: number;
+ y: number;
+ /** Days are being picked (mouse: the pointer left the first day; touch: the long press). */
+ active: boolean;
+ /** The touch's own context menu, held back until it is clear whether days were picked. */
+ heldMenu: { event: MouseEvent; day: Date } | null;
+ timer: ReturnType | null;
+ stop: () => void;
+}
+
+interface UseMonthRangeSelectOptions {
+ /** The month grid's scroll container: its rows carry data-week, its cells data-month-day. */
+ scrollRef: RefObject;
+ /** Off when no calendar can take a new event. */
+ enabled: boolean;
+ /** Days were picked: open the quick editor for them. */
+ onCreateRange: (start: Date, end: Date) => void;
+ /** A long press that picked no other day keeps opening the day's menu. */
+ onContextMenuDay?: (event: MouseEvent, day: Date) => void;
+}
+
+/**
+ * Picking days in the month view to create an event over them, as Google
+ * Calendar and Outlook do: press on a day's empty space and drag to another
+ * day (across week rows in reading order, either way), or Shift+arrows from
+ * the focused day and Enter. On touch a long press starts it, so a swipe
+ * still scrolls. The days go to the same quick editor as a drag in the week
+ * and day views.
+ */
+export function useMonthRangeSelect({ scrollRef, enabled, onCreateRange, onContextMenuDay }: UseMonthRangeSelectOptions) {
+ const [selection, setSelection] = useState(null);
+ const pressRef = useRef(null);
+ // The click that ends a drag is not a click on the day it ended on.
+ const wasDragging = useRef(false);
+ // A touch drag's own context menu (Windows sends it after the finger lifts).
+ const muteMenuUntil = useRef(0);
+ // Shift+arrows: the day the keyboard selection started on.
+ const keyAnchor = useRef(null);
+
+ const show = useCallback((press: PressState) => {
+ const range = monthRange(press.anchor, press.current);
+ setSelection((prev) => (prev && isSameDay(prev.start, range.start) && isSameDay(prev.end, range.end) ? prev : range));
+ }, []);
+
+ const end = useCallback(() => {
+ const press = pressRef.current;
+ pressRef.current = null;
+ if (press) {
+ if (press.timer) clearTimeout(press.timer);
+ press.stop();
+ }
+ setSelection(null);
+ return press;
+ }, []);
+
+ useEffect(() => () => {
+ const press = pressRef.current;
+ if (press?.timer) clearTimeout(press.timer);
+ press?.stop();
+ }, []);
+
+ const follow = useCallback((press: PressState) => {
+ const root = scrollRef.current;
+ if (!root) return;
+ const day = monthDayAtPoint(root, press.x, press.y);
+ if (!day) return;
+ if (!press.active) {
+ if (isSameDay(day, press.anchor)) return;
+ press.active = true;
+ }
+ press.current = day;
+ show(press);
+ }, [scrollRef, show]);
+
+ const activate = useCallback((press: PressState, root: HTMLElement) => {
+ press.active = true;
+ show(press);
+ // From here a moving finger picks days: the grid must not scroll.
+ const holdStill = (e: TouchEvent) => { if (e.cancelable) e.preventDefault(); };
+ root.addEventListener("touchmove", holdStill, { passive: false });
+ const previous = press.stop;
+ press.stop = () => {
+ previous();
+ root.removeEventListener("touchmove", holdStill);
+ };
+ }, [show]);
+
+ const onPointerDown = useCallback((e: PointerEvent) => {
+ if (!enabled || !e.isPrimary) return;
+ const touch = e.pointerType === "touch";
+ if (!touch && e.button !== 0) return;
+ const target = e.target as HTMLElement;
+ if (target.closest(NOT_EMPTY_SPACE)) return;
+ const cell = target.closest("[data-month-day]");
+ const root = scrollRef.current;
+ if (!cell || !root) return;
+ end();
+ keyAnchor.current = null;
+ const anchor = parseDayKey(cell.dataset.monthDay ?? "");
+ const press: PressState = {
+ pointerId: e.pointerId, touch, anchor, current: anchor, x: e.clientX, y: e.clientY,
+ active: false, heldMenu: null, timer: null, stop: () => {},
+ };
+ // The wheel moves the grid under a pointer that stands still: follow it.
+ const onScroll = () => { if (press.active) follow(press); };
+ root.addEventListener("scroll", onScroll);
+ press.stop = () => root.removeEventListener("scroll", onScroll);
+ if (touch) {
+ press.timer = setTimeout(() => {
+ press.timer = null;
+ if (pressRef.current === press) activate(press, root);
+ }, LONG_PRESS_MS);
+ }
+ pressRef.current = press;
+ }, [enabled, scrollRef, end, follow, activate]);
+
+ const onPointerMove = useCallback((e: PointerEvent) => {
+ const press = pressRef.current;
+ if (!press || e.pointerId !== press.pointerId) return;
+ if (press.touch && !press.active) {
+ // A swipe before the long press: the grid scrolls, nothing is picked.
+ if (Math.hypot(e.clientX - press.x, e.clientY - press.y) > TOUCH_SLOP_PX) end();
+ return;
+ }
+ press.x = e.clientX;
+ press.y = e.clientY;
+ const wasActive = press.active;
+ follow(press);
+ if (press.active && !wasActive && !press.touch) {
+ try { e.currentTarget.setPointerCapture(press.pointerId); } catch { /* the pointer is gone */ }
+ }
+ }, [end, follow]);
+
+ const onPointerUp = useCallback((e: PointerEvent) => {
+ const press = pressRef.current;
+ if (!press || e.pointerId !== press.pointerId) return;
+ end();
+ if (!press.active) return;
+ wasDragging.current = true;
+ requestAnimationFrame(() => { wasDragging.current = false; });
+ try { e.currentTarget.releasePointerCapture(press.pointerId); } catch { /* not captured */ }
+ const range = monthRange(press.anchor, press.current);
+ if (press.touch && isSameDay(range.start, range.end)) {
+ // A long press that stayed on its day: the day's menu, as before.
+ if (press.heldMenu) onContextMenuDay?.(press.heldMenu.event, press.heldMenu.day);
+ return;
+ }
+ if (press.touch) muteMenuUntil.current = Date.now() + 1000;
+ onCreateRange(range.start, range.end);
+ }, [end, onCreateRange, onContextMenuDay]);
+
+ const onPointerCancel = useCallback((e: PointerEvent) => {
+ const press = pressRef.current;
+ if (!press || e.pointerId !== press.pointerId) return;
+ end();
+ }, [end]);
+
+ /** Captured before the cells' own handler: a touch drag's long press is not a right-click. */
+ const onContextMenuCapture = useCallback((e: MouseEvent) => {
+ const press = pressRef.current;
+ if (press?.touch) {
+ // The browser's long press can come before ours: it starts the pick.
+ if (!press.active && scrollRef.current) {
+ if (press.timer) clearTimeout(press.timer);
+ press.timer = null;
+ activate(press, scrollRef.current);
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ press.heldMenu = { event: e, day: press.anchor };
+ return;
+ }
+ if (Date.now() < muteMenuUntil.current) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }, [scrollRef, activate]);
+
+ // --- Keyboard ---
+
+ /** Shift+arrow from `from` to `to`: the selection grows or shrinks from where it started. */
+ const extendTo = useCallback((from: Date, to: Date) => {
+ if (!enabled) return;
+ if (!keyAnchor.current) keyAnchor.current = from;
+ setSelection({ ...monthRange(keyAnchor.current, to), keyboard: true });
+ }, [enabled]);
+
+ /** Enter: create over the keyboard selection. False when there is none. */
+ const commitKeyboard = useCallback((): boolean => {
+ if (!keyAnchor.current || !selection) return false;
+ const range = selection;
+ keyAnchor.current = null;
+ setSelection(null);
+ onCreateRange(range.start, range.end);
+ return true;
+ }, [selection, onCreateRange]);
+
+ /** Escape or a plain arrow: the keyboard selection goes. False when there was none. */
+ const clearKeyboard = useCallback((): boolean => {
+ if (!keyAnchor.current) return false;
+ keyAnchor.current = null;
+ setSelection(null);
+ return true;
+ }, []);
+
+ return {
+ selection,
+ wasDragging,
+ pointerHandlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onContextMenuCapture },
+ extendTo,
+ commitKeyboard,
+ clearKeyboard,
+ };
+}
diff --git a/hooks/use-time-grid-interactions.ts b/hooks/use-time-grid-interactions.ts
index 9c48fad53..8e7acca45 100644
--- a/hooks/use-time-grid-interactions.ts
+++ b/hooks/use-time-grid-interactions.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, type PointerEvent, type DragEvent } from "react";
+import { useState, useCallback, useEffect, useRef, type PointerEvent, type DragEvent } from "react";
import { format } from "date-fns";
import { useAuthStore } from "@/stores/auth-store";
import { useCalendarStore } from "@/stores/calendar-store";
@@ -72,6 +72,17 @@ interface UseTimeGridInteractionsOptions {
onMoveEvent?: MoveEventHandler;
}
+/**
+ * The range a drag from `anchorMinutes` to `currentMinutes` (both snapped)
+ * selects, or null when it is shorter than a quarter of an hour. The
+ * drawn selection, its label and the event it creates all come from this.
+ */
+export function dragCreateRange(anchorMinutes: number, currentMinutes: number): { startMinutes: number; endMinutes: number } | null {
+ const startMinutes = Math.min(anchorMinutes, currentMinutes);
+ const endMinutes = Math.max(anchorMinutes, currentMinutes);
+ return endMinutes - startMinutes >= 15 ? { startMinutes, endMinutes } : null;
+}
+
/** `date` moved by `minutes` on the local clock, not by elapsed time. */
function addWallClockMinutes(date: Date, minutes: number): Date {
const shifted = new Date(date);
@@ -101,6 +112,9 @@ export function useTimeGridInteractions({
const wasDragging = useRef(false);
// --- Drag-to-create ---
+ // The range on screen is the range created: the release commits the
+ // selection last drawn rather than measuring the pointer again, and a
+ // scroll during the drag redraws it under the pointer.
const dragRef = useRef<{
dayKey: string;
dayDate: Date;
@@ -108,10 +122,31 @@ export function useTimeGridInteractions({
pointerId: number;
startY: number;
captured: boolean;
+ column: HTMLElement;
+ lastY: number;
+ range: { startMinutes: number; endMinutes: number } | null;
+ stopScrollWatch?: () => void;
} | null>(null);
const [dragCreate, setDragCreate] = useState(null);
+ const updateDragRange = useCallback((clientY: number) => {
+ const drag = dragRef.current;
+ if (!drag) return;
+ drag.lastY = clientY;
+ const range = dragCreateRange(drag.startMinutes, snapToMinutes(clientY, drag.column.getBoundingClientRect().top));
+ drag.range = range;
+ setDragCreate(range ? { dayKey: drag.dayKey, ...range } : null);
+ }, [snapToMinutes]);
+
+ const endDrag = useCallback(() => {
+ const drag = dragRef.current;
+ dragRef.current = null;
+ drag?.stopScrollWatch?.();
+ setDragCreate(null);
+ return drag;
+ }, []);
+
const handleGridPointerDown = useCallback((
e: PointerEvent,
dayKey: string,
@@ -125,34 +160,34 @@ export function useTimeGridInteractions({
const rect = e.currentTarget.getBoundingClientRect();
const minutes = snapToMinutes(e.clientY, rect.top);
+ dragRef.current?.stopScrollWatch?.();
dragRef.current = {
dayKey, dayDate, startMinutes: minutes,
pointerId: e.pointerId, startY: e.clientY, captured: false,
+ column: e.currentTarget, lastY: e.clientY, range: null,
};
}, [snapToMinutes, isMobile]);
const handleGridPointerMove = useCallback((e: PointerEvent) => {
- if (!dragRef.current) return;
+ const drag = dragRef.current;
+ if (!drag) return;
- if (!dragRef.current.captured) {
- if (Math.abs(e.clientY - dragRef.current.startY) < 5) return;
- dragRef.current.captured = true;
- e.currentTarget.setPointerCapture(dragRef.current.pointerId);
+ if (!drag.captured) {
+ if (Math.abs(e.clientY - drag.startY) < 5) return;
+ drag.captured = true;
+ e.currentTarget.setPointerCapture(drag.pointerId);
+ // The wheel or the browser's autoscroll moves the grid under a
+ // pointer that stands still: follow it.
+ const onScroll = () => updateDragRange(drag.lastY);
+ window.addEventListener("scroll", onScroll, true);
+ drag.stopScrollWatch = () => window.removeEventListener("scroll", onScroll, true);
}
- const rect = e.currentTarget.getBoundingClientRect();
- const currentMinutes = snapToMinutes(e.clientY, rect.top);
- const start = Math.min(dragRef.current.startMinutes, currentMinutes);
- const end = Math.max(dragRef.current.startMinutes, currentMinutes);
-
- setDragCreate(end > start ? { dayKey: dragRef.current.dayKey, startMinutes: start, endMinutes: end } : null);
- }, [snapToMinutes]);
+ updateDragRange(e.clientY);
+ }, [updateDragRange]);
const handleGridPointerUp = useCallback((e: PointerEvent) => {
- const drag = dragRef.current;
- dragRef.current = null;
- setDragCreate(null);
-
+ const drag = endDrag();
if (!drag || !drag.captured) return;
wasDragging.current = true;
@@ -160,19 +195,22 @@ export function useTimeGridInteractions({
try { e.currentTarget.releasePointerCapture(drag.pointerId); } catch { /* may already be released */ }
- const rect = e.currentTarget.getBoundingClientRect();
- const endMinutes = snapToMinutes(e.clientY, rect.top);
- const start = Math.min(drag.startMinutes, endMinutes);
- const end = Math.max(drag.startMinutes, endMinutes);
-
- if (end - start < 15) return;
+ const range = drag.range;
+ if (!range) return;
const startDate = new Date(drag.dayDate);
- startDate.setHours(Math.floor(start / 60), start % 60, 0, 0);
+ startDate.setHours(Math.floor(range.startMinutes / 60), range.startMinutes % 60, 0, 0);
const endDate = new Date(drag.dayDate);
- endDate.setHours(Math.floor(end / 60), end % 60, 0, 0);
+ endDate.setHours(Math.floor(range.endMinutes / 60), range.endMinutes % 60, 0, 0);
onCreateRange(startDate, endDate);
- }, [snapToMinutes, onCreateRange]);
+ }, [endDrag, onCreateRange]);
+
+ useEffect(() => () => dragRef.current?.stopScrollWatch?.(), []);
+
+ /** The browser took the pointer over (a touch scroll, a system gesture): nothing is created. */
+ const handleGridPointerCancel = useCallback(() => {
+ endDrag();
+ }, [endDrag]);
// --- Resize ---
const resizeRef = useRef<{
@@ -438,6 +476,7 @@ export function useTimeGridInteractions({
handleGridPointerDown,
handleGridPointerMove,
handleGridPointerUp,
+ handleGridPointerCancel,
resizeVisual,
handleResizePointerDown,
handleResizePointerMove,
diff --git a/integration/tests/22-ent-security.spec.ts b/integration/tests/22-ent-security.spec.ts
index 051556ec5..441ace783 100644
--- a/integration/tests/22-ent-security.spec.ts
+++ b/integration/tests/22-ent-security.spec.ts
@@ -392,6 +392,8 @@ test('item 2: the ARF format arrives as a feedback report', async ({ browser })
await deliverAndWait({ from: ENT.bob, to: [ENT.alice], subject, text: 'Click here' });
const alice = await userPage(browser, ENT.alice);
await alice.locator(`[data-testid="email-list-item"][data-subject="${subject}"]`).first().click({ button: 'right', timeout: 60_000 });
+ // A row's menu has it under More actions.
+ await alice.getByTestId('ctx-more').click();
await alice.getByTestId('ctx-report-phishing').click();
await alice.getByTestId('phishing-report-confirm').click();
await expect(alice.getByText(`Reported to ${ENT.sec} and moved to Junk.`).first()).toBeVisible({ timeout: 30_000 });
diff --git a/integration/tests/27-month-drag-create.spec.ts b/integration/tests/27-month-drag-create.spec.ts
new file mode 100644
index 000000000..c9bd255e8
--- /dev/null
+++ b/integration/tests/27-month-drag-create.spec.ts
@@ -0,0 +1,367 @@
+import { test, expect, type Browser, type Page } from '@playwright/test';
+import { addDays, format, startOfWeek } from 'date-fns';
+import { mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { contextOptions } from './helpers/ent';
+import { JmapClient } from './helpers/jmap';
+import { neutralizeDevOverlay } from './helpers/app';
+
+/**
+ * Usability report 2026-11-04: creating by dragging over the calendar.
+ * - Month view: a drag over days (across week rows, either way), Shift+
+ * arrows and Enter, a long press and drag on a phone, all open the quick
+ * editor (the full one on a phone) for an all-day event over the days.
+ * - Week view: the event created is the range the selection showed, the
+ * selection is drawn over the events it covers, the new event takes a
+ * column beside an overlapping one, and Save works without a title.
+ * Against a VM 106 Stalwart (1.0 and 0.16); every save is checked on the
+ * server and removed again.
+ *
+ * Account: dso-ux-pim, password IT_DSO_PASSWORD. Items are titled
+ * "MDRAG …" (the untitled one is found by its time) and deleted.
+ * Screenshots go to IT_SHOTS_DIR, named month-drag--….
+ */
+
+const PASSWORD = process.env.IT_DSO_PASSWORD ?? '';
+const A = 'dso-ux-pim@example.org';
+const CORE = 'urn:ietf:params:jmap:core';
+const CAL = 'urn:ietf:params:jmap:calendars';
+const RUN = Date.now().toString(36);
+const TZ = 'Europe/Berlin';
+const prefix = `MDRAG ${RUN}`;
+const SERVER = process.env.IT_ENT_SERVER ?? 'unknown';
+const SHOTS = process.env.IT_SHOTS_DIR ?? path.join(tmpdir(), 'bulwark-month-drag');
+
+test.skip(!PASSWORD, 'Set IT_DSO_PASSWORD (vault "Stalwart test – dso-* throwaway accounts")');
+
+type Obj = { id: string; title?: string; start?: string; duration?: string; showWithoutTime?: boolean; calendarIds?: Record };
+
+async function events(c: JmapClient): Promise {
+ const r = await c.request([
+ ['CalendarEvent/query', { accountId: c.accountId, limit: 2000 }, 'q'],
+ ['CalendarEvent/get', {
+ accountId: c.accountId,
+ '#ids': { resultOf: 'q', name: 'CalendarEvent/query', path: '/ids' },
+ properties: ['id', 'title', 'start', 'duration', 'showWithoutTime', 'calendarIds'],
+ }, 'g'],
+ ], [CORE, CAL]);
+ return r.methodResponses[1][1].list as Obj[];
+}
+
+async function destroy(c: JmapClient, ids: string[]): Promise {
+ if (ids.length) await c.request([['CalendarEvent/set', { accountId: c.accountId, destroy: ids }, '0']], [CORE, CAL]);
+}
+
+async function defaultCalendar(c: JmapClient): Promise {
+ const r = await c.request([['Calendar/get', { accountId: c.accountId, properties: ['id', 'isDefault'] }, '0']], [CORE, CAL]);
+ const list = r.methodResponses[0][1].list as Array<{ id: string; isDefault?: boolean }>;
+ return (list.find((cal) => cal.isDefault) ?? list[0]).id;
+}
+
+async function create(c: JmapClient, title: string, start: string, duration: string, allDay = false): Promise {
+ await c.request([['CalendarEvent/set', {
+ accountId: c.accountId,
+ create: { n: { '@type': 'Event', title, start, duration, timeZone: allDay ? null : TZ, showWithoutTime: allDay, calendarIds: { [await defaultCalendar(c)]: true } } },
+ }, '0']], [CORE, CAL]);
+}
+
+/** Waits for the server to hold an event that `match` accepts. */
+async function serverEvent(c: JmapClient, match: (o: Obj) => boolean): Promise {
+ let found: Obj | undefined;
+ await expect.poll(async () => {
+ found = (await events(c)).find(match);
+ return !!found;
+ }, { timeout: 20000 }).toBe(true);
+ return found!;
+}
+
+async function signIn(browser: Browser, opts: { dark?: boolean; width?: number; phone?: boolean } = {}): Promise {
+ const base = contextOptions(opts.phone);
+ const context = await browser.newContext({
+ ...base,
+ timezoneId: TZ,
+ colorScheme: opts.dark ? 'dark' : 'light',
+ viewport: opts.phone ? base.viewport : { width: opts.width ?? 1366, height: 860 },
+ });
+ const page = await context.newPage();
+ await neutralizeDevOverlay(page);
+ await page.goto('/');
+ await page.locator('#username').waitFor({ state: 'visible', timeout: 60000 });
+ await page.fill('#username', A);
+ await page.fill('#password', PASSWORD);
+ await page.click('button[type="submit"]');
+ await page.locator('a[href$="/calendar"]').first().waitFor({ timeout: 60000 });
+ await page.locator('a[href$="/calendar"]').first().click();
+ await page.locator('[data-testid="calendar-item"]').first().waitFor({ timeout: 60000 }).catch(() => {});
+ return page;
+}
+
+async function view(page: Page, key: 'm' | 'w'): Promise {
+ await page.locator('body').click({ position: { x: 1, y: 1 } }).catch(() => {});
+ await page.keyboard.press(key);
+ await page.keyboard.press('t');
+ await page.waitForTimeout(800);
+}
+
+async function shot(page: Page, name: string): Promise {
+ mkdirSync(SHOTS, { recursive: true });
+ await page.screenshot({ path: path.join(SHOTS, `month-drag-${SERVER}-${name}.png`) });
+}
+
+const cell = (page: Page, day: Date) => page.locator(`[data-month-day="${format(day, 'yyyy-MM-dd')}"]`);
+const picked = (page: Page) => page.$$eval('[data-month-day][aria-selected="true"]', (els) => els.map((e) => e.getAttribute('data-month-day')));
+const quick = (page: Page) => page.getByRole('dialog').filter({ has: page.getByPlaceholder('Add title') });
+
+/** Empty space of a day: just above the bottom edge of its cell. */
+async function emptySpot(page: Page, day: Date): Promise<{ x: number; y: number }> {
+ const box = (await cell(page, day).boundingBox())!;
+ return { x: box.x + box.width / 2, y: box.y + box.height - 5 };
+}
+
+async function dragDays(page: Page, from: Date, to: Date, release = true): Promise {
+ const a = await emptySpot(page, from);
+ const b = await emptySpot(page, to);
+ await page.mouse.move(a.x, a.y);
+ await page.mouse.down();
+ for (let i = 1; i <= 10; i++) await page.mouse.move(a.x + ((b.x - a.x) * i) / 10, a.y + ((b.y - a.y) * i) / 10);
+ if (release) await page.mouse.up();
+}
+
+const days = (from: Date, to: Date) => {
+ const out: string[] = [];
+ for (let d = from; d <= to; d = addDays(d, 1)) out.push(format(d, 'yyyy-MM-dd'));
+ return out;
+};
+
+// Next week's Thursday to the Tuesday after: two week rows.
+const nextMonday = addDays(startOfWeek(new Date(), { weekStartsOn: 1 }), 7);
+const thursday = addDays(nextMonday, 3);
+const tuesday = addDays(nextMonday, 8);
+const thisThursday = addDays(nextMonday, -4);
+
+test.describe('Creating by dragging over the calendar', () => {
+ test.describe.configure({ mode: 'serial' });
+ let c: JmapClient;
+ const untitled: string[] = [];
+
+ test.beforeAll(async () => {
+ c = await JmapClient.connect(A, PASSWORD);
+ });
+
+ test.afterAll(async () => {
+ const all = await events(c);
+ await destroy(c, [...all.filter((o) => o.title?.startsWith(prefix)).map((o) => o.id), ...untitled]);
+ });
+
+ test('month: a drag from Thursday to next Tuesday creates one all-day event over the days', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser);
+ await view(page, 'm');
+ await dragDays(page, thursday, tuesday, false);
+ // The days in reading order, wrapping at the end of the row.
+ expect(await picked(page)).toEqual(expect.arrayContaining(days(thursday, tuesday)));
+ await shot(page, 'dragging-light-1366');
+ await page.mouse.up();
+
+ const editor = quick(page);
+ await expect(editor).toBeVisible();
+ await expect(editor).toContainText(`${format(thursday, 'EEEE, MMMM d')} – ${format(tuesday, 'EEEE, MMMM d')}`);
+ await expect(editor).toContainText('All day');
+ // The placeholder spans the days while the editor is open.
+ await expect(page.locator('[data-pending-preview]')).toHaveCount(2);
+ await shot(page, 'popover-light-1366');
+ await editor.getByPlaceholder('Add title').fill(`${prefix} trip`);
+ await editor.getByRole('button', { name: 'Save' }).click();
+ await expect(editor).toBeHidden();
+
+ const saved = await serverEvent(c, (o) => o.title === `${prefix} trip`);
+ expect(saved).toMatchObject({ start: `${format(thursday, 'yyyy-MM-dd')}T00:00:00`, duration: 'P6D', showWithoutTime: true });
+ expect(Object.keys(saved.calendarIds ?? {})).toEqual([await defaultCalendar(c)]);
+ await expect(page.locator('[data-month-day] [role="button"], [data-month-day] button').filter({ hasText: `${prefix} trip` }).first()).toBeVisible();
+ await shot(page, 'saved-light-1366');
+ await destroy(c, [saved.id]);
+ await page.context().close();
+ });
+
+ test('month: backwards works, and Escape cancels and clears the mark (dark)', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser, { dark: true });
+ await view(page, 'm');
+ await dragDays(page, tuesday, thursday, false);
+ await shot(page, 'dragging-dark-1366');
+ await page.mouse.up();
+ const editor = quick(page);
+ await expect(editor).toContainText(`${format(thursday, 'EEEE, MMMM d')} – ${format(tuesday, 'EEEE, MMMM d')}`);
+ await shot(page, 'popover-dark-1366');
+ await page.keyboard.press('Escape');
+ await expect(editor).toBeHidden();
+ expect((await picked(page)).filter((d) => days(thursday, tuesday).includes(d!))).toEqual([]);
+ await page.context().close();
+ });
+
+ test('month: "More options" opens the full editor on the same days; a click still opens one day', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser);
+ await view(page, 'm');
+ await dragDays(page, thursday, tuesday);
+ await quick(page).getByRole('button', { name: 'More options' }).click();
+ await expect(page.locator('input[type="date"]').first()).toHaveValue(format(thursday, 'yyyy-MM-dd'));
+ await expect(page.locator('input[type="date"]').nth(1)).toHaveValue(format(tuesday, 'yyyy-MM-dd'));
+ await expect(page.getByLabel('All-day event')).toBeChecked();
+ await shot(page, 'more-options-light-1366');
+ await page.getByRole('button', { name: 'Cancel' }).click();
+
+ // A single click on empty space: the quick editor for that day, all day.
+ const spot = await emptySpot(page, thursday);
+ await page.mouse.click(spot.x, spot.y);
+ await expect(quick(page)).toContainText(format(thursday, 'EEEE, MMMM d'));
+ await expect(quick(page)).not.toContainText(' – ');
+ await expect(quick(page)).toContainText('All day');
+ await page.keyboard.press('Escape');
+ await page.context().close();
+ });
+
+ test('month: Shift+arrows pick days and Enter opens the quick editor for them', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser);
+ await view(page, 'm');
+ await page.locator(`[data-day-button="${format(thursday, 'yyyy-MM-dd')}"]`).focus();
+ await page.keyboard.press('Shift+ArrowRight');
+ await page.keyboard.press('Shift+ArrowRight');
+ expect(await picked(page)).toEqual(expect.arrayContaining(days(thursday, addDays(thursday, 2))));
+ await page.keyboard.press('Enter');
+ await expect(quick(page)).toContainText(`${format(thursday, 'EEEE, MMMM d')} – ${format(addDays(thursday, 2), 'EEEE, MMMM d')}`);
+ await shot(page, 'keyboard-light-1366');
+ await page.keyboard.press('Escape');
+ await page.context().close();
+ });
+
+ test('month: moving an event by drag and opening it still work', async ({ browser }) => {
+ test.setTimeout(180_000);
+ // Next week's Sunday, a quiet day, to its Saturday.
+ const sunday = addDays(nextMonday, 6);
+ await create(c, `${prefix} move`, `${format(sunday, 'yyyy-MM-dd')}T00:00:00`, 'P1D', true);
+ const page = await signIn(browser);
+ await view(page, 'm');
+ const bar = page.getByRole('button', { name: new RegExp(`${prefix} move`) }).first();
+ await bar.dragTo(cell(page, addDays(sunday, -1)), { targetPosition: { x: 40, y: 90 } });
+ const moved = await serverEvent(c, (o) => o.title === `${prefix} move` && o.start === `${format(addDays(sunday, -1), 'yyyy-MM-dd')}T00:00:00`);
+ expect(moved.duration).toBe('P1D');
+ await page.getByRole('button', { name: new RegExp(`${prefix} move`) }).first().click();
+ await expect(page.getByRole('dialog').filter({ hasText: `${prefix} move` }).first()).toBeVisible();
+ await page.keyboard.press('Escape');
+ await page.context().close();
+ });
+
+ for (const dark of [false, true]) {
+ test(`month at 800 px (${dark ? 'dark' : 'light'}): a drag over days opens an editor on them`, async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser, { width: 800, dark });
+ await view(page, 'm');
+ await dragDays(page, thursday, tuesday, false);
+ expect(await picked(page)).toEqual(expect.arrayContaining(days(thursday, tuesday)));
+ await shot(page, `dragging-${dark ? 'dark' : 'light'}-800`);
+ await page.mouse.up();
+ // A narrow pane is the phone layout: the full editor; else the quick one.
+ const full = page.locator('input[type="date"]').first();
+ await expect(quick(page).or(full)).toBeVisible();
+ if (await full.isVisible()) {
+ await expect(full).toHaveValue(format(thursday, 'yyyy-MM-dd'));
+ await expect(page.locator('input[type="date"]').nth(1)).toHaveValue(format(tuesday, 'yyyy-MM-dd'));
+ } else {
+ await expect(quick(page)).toContainText(`${format(thursday, 'EEEE, MMMM d')} – ${format(tuesday, 'EEEE, MMMM d')}`);
+ }
+ await shot(page, `editor-${dark ? 'dark' : 'light'}-800`);
+ await page.context().close();
+ });
+ }
+
+ test('phone: a long press and drag picks days; a swipe still scrolls', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const page = await signIn(browser, { phone: true });
+ await view(page, 'm');
+ const cdp = await page.context().newCDPSession(page);
+ const touch = (type: string, x?: number, y?: number) => cdp.send('Input.dispatchTouchEvent', {
+ type, touchPoints: x === undefined ? [] : [{ x, y }],
+ } as never);
+ await cell(page, thursday).scrollIntoViewIfNeeded();
+ const a = await emptySpot(page, thursday);
+ const b = await emptySpot(page, tuesday);
+ await touch('touchStart', a.x, a.y);
+ await page.waitForTimeout(700);
+ for (let i = 1; i <= 8; i++) await touch('touchMove', a.x + ((b.x - a.x) * i) / 8, a.y + ((b.y - a.y) * i) / 8);
+ expect(await picked(page)).toEqual(expect.arrayContaining(days(thursday, tuesday)));
+ await shot(page, 'phone-long-press');
+ await touch('touchEnd');
+ // Phones get the full editor, on the same days.
+ await expect(page.locator('input[type="date"]').first()).toHaveValue(format(thursday, 'yyyy-MM-dd'));
+ await expect(page.locator('input[type="date"]').nth(1)).toHaveValue(format(tuesday, 'yyyy-MM-dd'));
+ await page.getByRole('button', { name: 'Cancel' }).click();
+
+ const scroller = page.locator('[role="grid"] > div').first();
+ const before = await scroller.evaluate((el) => el.scrollTop);
+ const s = await emptySpot(page, thursday);
+ await touch('touchStart', s.x, s.y);
+ for (let i = 1; i <= 6; i++) await touch('touchMove', s.x, s.y - i * 40);
+ await touch('touchEnd');
+ await page.waitForTimeout(600);
+ expect(await scroller.evaluate((el) => el.scrollTop)).not.toBe(before);
+ expect((await picked(page)).length).toBeLessThanOrEqual(1);
+ await expect(page.locator('input[type="date"]')).toHaveCount(0);
+ await page.context().close();
+ });
+
+ test('week: the event created is the range the selection showed, beside the event it overlaps', async ({ browser }) => {
+ test.setTimeout(180_000);
+ const day = format(thisThursday, 'yyyy-MM-dd');
+ await create(c, `${prefix} Lernblock`, `${day}T12:30:00`, 'PT1H');
+ for (const dark of [false, true]) {
+ const page = await signIn(browser, { dark });
+ await view(page, 'w');
+ const slot = page.locator(`[data-slot="${day}T11"]`);
+ await slot.scrollIntoViewIfNeeded();
+ const box = (await slot.boundingBox())!;
+ const y = (minutes: number) => box.y + ((minutes - 660) / 60) * box.height;
+ const x = box.x + box.width / 2;
+ await page.mouse.move(x, y(675));
+ await page.mouse.down();
+ for (let m = 690; m <= 975; m += 15) await page.mouse.move(x, y(m));
+ const selection = page.locator('[data-drag-selection]');
+ await expect(selection).toContainText('11:15 – 16:15');
+ // Drawn over the event it covers: the event doesn't show through.
+ // (Both sit in the day's column: the higher z-index is on top, and the fill has no transparency.)
+ const looks = await page.evaluate((title) => {
+ const sel = document.querySelector('[data-drag-selection]')!;
+ const ev = Array.from(document.querySelectorAll('[data-calendar-event]')).find((el) => el.textContent?.includes(title))!;
+ return { selZ: Number(getComputedStyle(sel).zIndex), evZ: Number(getComputedStyle(ev).zIndex), fill: getComputedStyle(sel).backgroundColor, sameColumn: sel.parentElement === ev.parentElement };
+ }, `${prefix} Lernblock`);
+ expect(looks.sameColumn).toBe(true);
+ expect(looks.selZ).toBeGreaterThan(looks.evZ);
+ expect(looks.fill).not.toMatch(/rgba\(.*,\s*0(\.\d+)?\)|\/\s*0?\.\d+\)|transparent/);
+ await shot(page, `week-dragging-${dark ? 'dark' : 'light'}-1366`);
+ await page.mouse.up();
+ const editor = quick(page);
+ await expect(editor).toContainText('11:15 – 16:15');
+ // The new event and the one it overlaps share the day's width.
+ const placeholder = (await page.locator('[data-pending-preview]').boundingBox())!;
+ const lernblock = (await page.locator('div[data-calendar-event]').filter({ hasText: `${prefix} Lernblock` }).first().boundingBox())!;
+ expect(placeholder.x + placeholder.width <= lernblock.x + 1 || lernblock.x + lernblock.width <= placeholder.x + 1).toBe(true);
+ await shot(page, `week-popover-${dark ? 'dark' : 'light'}-1366`);
+ if (!dark) {
+ // Save without a title.
+ await editor.getByRole('button', { name: 'Save' }).click();
+ const saved = await serverEvent(c, (o) => o.start === `${day}T11:15:00` && o.title === '(No title)');
+ untitled.push(saved.id);
+ expect(saved.duration).toBe('PT5H');
+ await page.waitForTimeout(1000);
+ await shot(page, 'week-saved-light-1366');
+ // Out of the way of the next drag, which starts at the same spot.
+ await destroy(c, [saved.id]);
+ } else {
+ await page.keyboard.press('Escape');
+ }
+ await page.context().close();
+ }
+ });
+});
diff --git a/lib/__tests__/window-controls-host.test.tsx b/lib/__tests__/window-controls-host.test.tsx
index b2c6a7771..61100f000 100644
--- a/lib/__tests__/window-controls-host.test.tsx
+++ b/lib/__tests__/window-controls-host.test.tsx
@@ -38,12 +38,12 @@ afterEach(() => {
describe('the menu bar in the desktop app', () => {
type BarEvent = { visible: boolean; open?: string; pinned?: boolean };
- type Line = { key: string; label: string; type: string; enabled: boolean; checked?: boolean; accelerator?: string; mnemonic?: number; items?: Line[] };
+ type Line = { key: string; id?: string; label: string; type: string; enabled: boolean; checked?: boolean; accelerator?: string; mnemonic?: number; items?: Line[] };
const line = (key: string, label: string, extra: Partial = {}): Line => ({ key, label, type: 'normal', enabled: true, mnemonic: 0, ...extra });
const MENUS = [
{ id: 'file', label: 'File', mnemonic: 'f', items: [
- line('0/0', 'New message', { accelerator: 'CmdOrCtrl+N' }),
+ line('0/0', 'New message', { accelerator: 'CmdOrCtrl+N', id: 'file.newMessage' }),
line('0/1', 'Print…', { enabled: false, mnemonic: 0 }),
{ key: '0/2', label: '', type: 'separator', enabled: false },
line('0/3', 'Exit', { mnemonic: 1, accelerator: 'Ctrl+Q' }),
@@ -143,6 +143,9 @@ describe('the menu bar in the desktop app', () => {
await waitFor(() => expect(document.activeElement).toBe(newMessage));
expect(newMessage.querySelector('[data-menu-label]')?.textContent).toBe('New message');
expect(newMessage.querySelector('[data-menu-keys]')?.textContent).toBe('Ctrl+N');
+ // Drawn as every menu's rows: its icon (by the shell's id) and the key as a keycap.
+ expect(newMessage.querySelector('svg')).not.toBeNull();
+ expect(newMessage.querySelector('[data-menu-keys]')?.hasAttribute('data-menu-shortcut')).toBe(true);
expect(within(menu).getByRole('menuitem', { name: /Print/ }).getAttribute('aria-disabled')).toBe('true');
// Down skips the line that's off.
fireEvent.keyDown(newMessage, { key: 'ArrowDown' });
diff --git a/lib/calendar-utils.ts b/lib/calendar-utils.ts
index faff279c4..e63ff4176 100644
--- a/lib/calendar-utils.ts
+++ b/lib/calendar-utils.ts
@@ -1,4 +1,4 @@
-import { addDays, differenceInCalendarDays, parseISO, startOfDay, subMilliseconds } from "date-fns";
+import { addDays, differenceInCalendarDays, isSameDay, parseISO, startOfDay, subMilliseconds } from "date-fns";
import { parseDuration } from "@/lib/calendar-event-normalization";
import type { CalendarEvent } from "@/lib/jmap/types";
import { fromWallClock, isValidTimeZone, parseLocalDateTime, toDisplayDate } from "@/lib/timezone";
@@ -229,14 +229,49 @@ export function buildTimedFullDayWeekSegments(events: CalendarEvent[], weekDays:
return packWeekSegments(rawSegments);
}
+/**
+ * The minutes the unsaved event being created covers on `day` in the week
+ * and day views, or null when it isn't a timed event starting that day. An
+ * end at or before the start is midnight.
+ */
+export function pendingTimedMinutes(
+ preview: { start: Date; end: Date; allDay?: boolean } | null | undefined,
+ day: Date,
+): { startMinutes: number; endMinutes: number } | null {
+ if (!preview || preview.allDay || !isSameDay(preview.start, day)) return null;
+ const startMinutes = preview.start.getHours() * 60 + preview.start.getMinutes();
+ let endMinutes = isSameDay(preview.end, day) ? preview.end.getHours() * 60 + preview.end.getMinutes() : 1440;
+ if (endMinutes <= startMinutes) endMinutes = 1440;
+ return { startMinutes, endMinutes: Math.max(startMinutes + 15, endMinutes) };
+}
+
+/** The id the unsaved event being created goes by in a day's layout. */
+export const PENDING_LAYOUT_ID = "__pending-event__";
+
+/**
+ * A day's timed events in columns: each group of overlapping events shares
+ * the day's width. `pending` is the new event being created (its minutes on
+ * that day); it takes a column like a saved one, with the id
+ * PENDING_LAYOUT_ID, so it doesn't cover the events it overlaps.
+ */
export function layoutOverlappingEvents(
events: CalendarEvent[],
day: Date,
+ pending?: { startMinutes: number; endMinutes: number } | null,
): TimedEventLayout[] {
const layoutInputs = events.flatMap((event) => {
const bounds = getTimedEventBoundsForDay(event, day);
return bounds ? [{ event, ...bounds }] : [];
});
+ if (pending) {
+ layoutInputs.push({
+ event: { id: PENDING_LAYOUT_ID } as CalendarEvent,
+ startMinutes: pending.startMinutes,
+ endMinutes: Math.max(pending.startMinutes + 15, pending.endMinutes),
+ continuesBefore: false,
+ continuesAfter: false,
+ });
+ }
const sorted = layoutInputs.sort((a, b) => {
const diff = a.startMinutes - b.startMinutes;
diff --git a/lib/desktop/__tests__/dialog-window.test.ts b/lib/desktop/__tests__/dialog-window.test.ts
new file mode 100644
index 000000000..4cff3ff00
--- /dev/null
+++ b/lib/desktop/__tests__/dialog-window.test.ts
@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { askInWindow, dialogWindowsAvailable, messageRuns, readDialogTheme } from '../dialog-window';
+import type { BulwarkDesktopBridge, DesktopDialogWindowRequest } from '../types';
+
+function setBridge(dialogs: Record | undefined) {
+ window.bulwarkDesktop = (dialogs ? { version: 1, platform: 'win32', dialogs } : undefined) as BulwarkDesktopBridge | undefined;
+}
+
+afterEach(() => {
+ setBridge(undefined);
+ document.documentElement.removeAttribute('style');
+ document.documentElement.className = '';
+ document.documentElement.removeAttribute('dir');
+});
+
+describe('askInWindow', () => {
+ it('is not there in the browser or on a shell with only the OS message box', () => {
+ expect(dialogWindowsAvailable()).toBe(false);
+ expect(askInWindow({ title: 'Empty trash?', buttons: [{ label: 'OK' }] })).toBeNull();
+ setBridge({ confirm: vi.fn() });
+ expect(dialogWindowsAvailable()).toBe(false);
+ expect(askInWindow({ title: 'Empty trash?', buttons: [{ label: 'OK' }] })).toBeNull();
+ });
+
+ it('sends the question with the page\'s look and hands back the answer', async () => {
+ document.documentElement.style.setProperty('--color-primary', '#185aea');
+ document.documentElement.style.setProperty('--color-background', 'rgb(10, 10, 10)');
+ document.documentElement.classList.add('dark');
+ document.documentElement.dir = 'rtl';
+ const show = vi.fn(async (_request: DesktopDialogWindowRequest) => ({ button: 1 }));
+ setBridge({ confirm: vi.fn(), show, cancel: vi.fn() });
+
+ const asked = askInWindow({ title: 'Empty trash?', message: 'Gone for good.', buttons: [{ label: 'Cancel', variant: 'secondary' }, { label: 'Empty', variant: 'destructive' }], defaultIndex: 0 })!;
+ await expect(asked.answer).resolves.toEqual({ button: 1 });
+ const request = show.mock.calls[0][0];
+ expect(request).toMatchObject({ title: 'Empty trash?', message: [{ text: 'Gone for good.' }], defaultIndex: 0, dir: 'rtl' });
+ expect(request.id).toMatch(/^dialog-/);
+ expect(request.theme?.dark).toBe(true);
+ expect(request.theme?.colours?.primary).toBe('rgb(24, 90, 234)');
+ expect(request.theme?.colours?.background).toBe('rgb(10, 10, 10)');
+ });
+
+ it('takes a question back until it is answered, and only then', async () => {
+ let answer: (value: unknown) => void = () => {};
+ const cancel = vi.fn();
+ setBridge({ confirm: vi.fn(), show: vi.fn(() => new Promise((resolve) => (answer = resolve))), cancel });
+ const asked = askInWindow({ title: 'Sign out?', buttons: [{ label: 'OK' }] })!;
+ asked.cancel();
+ expect(cancel).toHaveBeenCalledTimes(1);
+ const id = cancel.mock.calls[0][0];
+ expect(id).toMatch(/^dialog-/);
+ answer(null);
+ await expect(asked.answer).resolves.toBeNull();
+ asked.cancel();
+ expect(cancel).toHaveBeenCalledTimes(1);
+ });
+
+ it('says "failed" when the shell refuses, so the page can show its own dialog', async () => {
+ setBridge({ confirm: vi.fn(), show: vi.fn(async () => { throw new Error('Not a question'); }), cancel: vi.fn() });
+ await expect(askInWindow({ title: 'x', buttons: [{ label: 'OK' }] })!.answer).resolves.toBe('failed');
+ });
+});
+
+describe('messageRuns', () => {
+ it('keeps text as it is, with ** pairs bold only where asked', () => {
+ expect(messageRuns('Visit **github.com**? x')).toEqual([{ text: 'Visit **github.com**? x' }]);
+ expect(messageRuns('Visit **github.com**? x', true)).toEqual([{ text: 'Visit ' }, { text: 'github.com', bold: true }, { text: '? x' }]);
+ expect(messageRuns('')).toEqual([]);
+ });
+});
+
+describe('readDialogTheme', () => {
+ it('leaves out what it can\'t read as a colour', () => {
+ document.documentElement.style.setProperty('--color-foreground', 'not-a-colour');
+ const theme = readDialogTheme();
+ expect(theme.colours?.foreground).toBeUndefined();
+ expect(theme.dark).toBe(false);
+ });
+});
diff --git a/lib/desktop/__tests__/native-menu-keys.test.tsx b/lib/desktop/__tests__/native-menu-keys.test.tsx
deleted file mode 100644
index 3b4016619..000000000
--- a/lib/desktop/__tests__/native-menu-keys.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { readdirSync, readFileSync } from 'node:fs';
-import path from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { ContextMenuItem } from '@/components/ui/context-menu';
-import { readMenu, toAccelerator } from '../native-menu';
-
-// A native menu built from an HTML one shows a row's key apart from its label,
-// as the native menus' own accelerators do. The calendar's view menu came out
-// as "DayD", "WeekW": the key was read as part of the label.
-
-function menuOf(children: React.ReactNode) {
- render( {}} />);
- expect(items[0]).toMatchObject({ label: 'Cut', accelerator: 'Ctrl+X' });
- });
-
- it('a count is no key: it goes after the label', () => {
- const items = menuOf( {}} />);
- expect(items[0].label).toBe('Notifications (3)');
- expect(items[0].accelerator).toBeUndefined();
- });
-
- it('words in separate elements stay separate words', () => {
- const items = menuOf(
- ,
- );
- expect(items[0].label).toBe('Alice Example alice@example.net');
- });
-});
-
-describe('toAccelerator', () => {
- it.each([
- ['D', 'D'],
- ['r', 'R'],
- ['Shift + I', 'Shift+I'],
- ['Ctrl+X', 'Ctrl+X'],
- ['⌘X', 'Cmd+X'],
- ['⌘⇧K', 'Cmd+Shift+K'],
- ['Mod + Enter', 'CmdOrCtrl+Enter'],
- ['Del', 'Delete'],
- ['F2', 'F2'],
- ['?', '?'],
- ['#', '#'],
- ['Ctrl++', 'Ctrl+Plus'],
- ])('%s is %s', (hint, accelerator) => {
- expect(toAccelerator(hint)).toBe(accelerator);
- });
-
- it.each(['j / ↓', '', 'Hyper+Q', 'twelve'])('%s is no single key', (hint) => {
- expect(toAccelerator(hint)).toBeUndefined();
- });
-});
-
-// Menu rows show their keys through MenuShortcut (or ContextMenuItem's
-// shortcut), which the native menu knows. A raw in a file with menu
-// rows is how "DayD" happened.
-describe('menu rows show keys through MenuShortcut', () => {
- const root = path.resolve(__dirname, '../../..');
- it('no raw next to role="menuitem…" rows', () => {
- const files: string[] = [];
- const walk = (dir: string) => {
- for (const entry of readdirSync(dir, { withFileTypes: true })) {
- if (entry.name === 'node_modules' || entry.name === '__tests__' || entry.name.startsWith('.')) continue;
- const full = path.join(dir, entry.name);
- if (entry.isDirectory()) walk(full);
- else if (entry.name.endsWith('.tsx')) files.push(full);
- }
- };
- walk(path.join(root, 'components'));
- walk(path.join(root, 'app'));
- const offenders = files.filter((file) => {
- if (file.endsWith(path.join('ui', 'context-menu.tsx'))) return false;
- const source = readFileSync(file, 'utf8');
- return /role="menuitem/.test(source) && /]/.test(source);
- });
- expect(offenders.map((file) => path.relative(root, file))).toEqual([]);
- }, 60_000);
-});
diff --git a/lib/desktop/__tests__/native-ui.test.tsx b/lib/desktop/__tests__/native-ui.test.tsx
index 58df7bba2..9e1a37ff5 100644
--- a/lib/desktop/__tests__/native-ui.test.tsx
+++ b/lib/desktop/__tests__/native-ui.test.tsx
@@ -1,14 +1,12 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { ContextMenu, ContextMenuHeader, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from '@/components/ui/context-menu';
-import type { BulwarkDesktopBridge, DesktopNativeMenuItem } from '../types';
+import type { BulwarkDesktopBridge } from '../types';
import { accentColours, applySystemAccent } from '../system-accent';
import { mergedDesktopState, registerDesktopSurface, resetDesktopCommands, runDesktopCommand, setDesktopBaseState } from '../commands';
-import { readMenu } from '../native-menu';
import { noteOpenDraft, resetOpenDrafts, restoreUrlFor } from '../window-restore';
import { readDesktopPrefs, resetDesktopPrefsCache, setDesktopPref } from '../preferences';
import { closePopoutWindow, isPopoutPath } from '@/lib/popout/window-role';
-import { toast } from '@/stores/toast-store';
function setBridge(bridge: Partial | undefined) {
window.bulwarkDesktop = bridge as BulwarkDesktopBridge | undefined;
@@ -42,149 +40,6 @@ function testMenu(extra?: React.ReactNode, handlers: { reply?: () => void; inbox
);
}
-describe('an HTML menu shown natively', () => {
- let popup: ReturnType;
- let answer: (id: string | null) => void;
-
- beforeEach(() => {
- popup = vi.fn(() => new Promise((resolve) => { answer = resolve; }));
- setBridge({ version: 1, platform: 'win32', menu: { setState: () => {}, popup: popup as never } });
- });
-
- async function openMenu(children: React.ReactNode, onClose = vi.fn()) {
- render({children} );
- await waitFor(() => expect(popup).toHaveBeenCalled());
- return { items: popup.mock.calls[0][0] as DesktopNativeMenuItem[], at: popup.mock.calls[0][1], onClose };
- }
-
- it('reads every kind of row, in order, with submenus', async () => {
- const { items } = await openMenu(testMenu());
- expect(items.map((item) => item.label ?? item.type)).toEqual(['Three messages', 'Reply', 'Forward', 'separator', 'Move to', 'Rules']);
- expect(items[0].enabled).toBe(false);
- expect(items[2].enabled).toBe(false);
- expect(items[4].submenu?.map((item) => item.label)).toEqual(['Inbox', 'R&D']);
- // A disabled submenu shows, and has nothing in it.
- expect(items[5].enabled).toBe(false);
- expect(items[5].submenu).toBeUndefined();
- });
-
- it('takes the label without the shortcut or the hint', async () => {
- const { items } = await openMenu(testMenu());
- expect(items[1].label).toBe('Reply');
- });
-
- it('at the pointer from a right-click, under the button from a button', async () => {
- const { at } = await openMenu(testMenu());
- expect(at).toBeUndefined();
- popup.mockClear();
- render(
- {}}>
- {}} />
- ,
- );
- await waitFor(() => expect(popup).toHaveBeenCalled());
- expect(popup.mock.calls[0][1]).toEqual({ x: 40, y: 74 });
- });
-
- it('a pick runs the HTML row, the one a browser would run, and closes the menu', async () => {
- const reply = vi.fn();
- const inbox = vi.fn();
- const { items, onClose } = await openMenu(testMenu(undefined, { reply, inbox }));
- await act(async () => {
- answer(items[4].submenu![0].id!);
- });
- await waitFor(() => expect(onClose).toHaveBeenCalled());
- expect(inbox).toHaveBeenCalledTimes(1);
- expect(reply).not.toHaveBeenCalled();
- });
-
- it('dismissing it runs nothing and closes the menu', async () => {
- const reply = vi.fn();
- const { onClose } = await openMenu(testMenu(undefined, { reply }));
- await act(async () => {
- answer(null);
- });
- await waitFor(() => expect(onClose).toHaveBeenCalled());
- expect(reply).not.toHaveBeenCalled();
- });
-
- it('the hidden copy is never visible', async () => {
- await openMenu(testMenu());
- const menu = document.body.querySelector('[role="menu"]');
- expect(menu?.style.visibility).toBe('hidden');
- });
-
- it('stays HTML when something in it can\'t be shown natively', async () => {
- render(
- {}}>
- {testMenu()}
- ,
- );
- await waitFor(() => expect(document.body.querySelector('[role="menu"]')?.style.visibility).toBe('visible'));
- expect(popup).not.toHaveBeenCalled();
- expect(screen.getByRole('menuitem', { name: /Reply/ })).toBeTruthy();
- });
-
- it('a plugin\'s frame keeps the rest native, with a line to the HTML menu', async () => {
- const frame = (
-
- );
- const onClose = vi.fn();
- const { items } = await openMenu(testMenu(frame), onClose);
- expect(items.at(-1)).toMatchObject({ label: 'from_plugins' });
- expect(items.map((item) => item.label)).toContain('Reply');
- await act(async () => {
- answer(items.at(-1)!.id!);
- });
- await waitFor(() => expect(document.body.querySelector('[role="menu"]')?.style.visibility).toBe('visible'));
- expect(onClose).not.toHaveBeenCalled();
- });
-
- it('a frame that is no plugin\'s stays HTML whole', () => {
- const root = document.createElement('div');
- root.innerHTML = '';
- expect(readMenu(root).unsupported).toBe(true);
- });
-
- it('a row that went while the menu was up says so, instead of doing nothing', async () => {
- const warning = vi.spyOn(toast, 'warning').mockImplementation(() => '' as never);
- const reply = vi.fn();
- const { items, onClose } = await openMenu(testMenu(undefined, { reply }));
- const row = screen.getAllByRole('menuitem', { hidden: true }).find((el) => el.textContent?.includes('Reply'))!;
- row.parentElement!.remove();
- await act(async () => {
- answer(items[1].id!);
- });
- await waitFor(() => expect(onClose).toHaveBeenCalled());
- expect(reply).not.toHaveBeenCalled();
- expect(warning).toHaveBeenCalledWith('pick_gone');
- warning.mockRestore();
- });
-
- it('a row with no words stays HTML too: a colour swatch says nothing in a native menu', () => {
- const root = document.createElement('div');
- root.innerHTML = '';
- expect(readMenu(root).unsupported).toBe(true);
- });
-
- it('a search field over a list is left out, and what it searches stays', () => {
- const root = document.createElement('div');
- root.innerHTML = '';
- const read = readMenu(root);
- expect(read.unsupported).toBe(false);
- expect(read.items.map((item) => item.label)).toEqual(['Inbox']);
- });
-
- it('reads check and radio rows', () => {
- const root = document.createElement('div');
- root.innerHTML = '';
- expect(readMenu(root).items).toMatchObject([
- { type: 'checkbox', checked: true, label: 'Show' },
- { type: 'radio', checked: false, label: 'Other' },
- ]);
- });
-});
-
describe('the same menu in a browser', () => {
it('is the HTML menu, on screen, and no bridge is asked', async () => {
render( {}}>{testMenu()} );
@@ -194,6 +49,28 @@ describe('the same menu in a browser', () => {
});
});
+describe('the same menu in the desktop app', () => {
+ it('is the HTML menu too, with its icons and keys, and no native menu is asked for', async () => {
+ const popup = vi.fn(async () => null);
+ setBridge({ version: 1, platform: 'win32', menu: { setState: () => {}, popup: popup as never } });
+ document.documentElement.lang = 'de';
+ const Icon = () => ;
+ render(
+ {}}>
+ {}} shortcut="Shift + R" />
+ ,
+ );
+ await waitFor(() => expect(document.body.querySelector('[role="menu"]')?.style.visibility).toBe('visible'));
+ const row = screen.getByRole('menuitem', { name: /Allen antworten/ });
+ expect(row.querySelector('[data-testid="row-icon"]')).not.toBeNull();
+ // Windows' own words for the keys, not Chromium's "Umschalttaste".
+ expect(row.querySelector('[data-menu-shortcut]')?.textContent).toBe('Umschalt + R');
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ expect(popup).not.toHaveBeenCalled();
+ document.documentElement.lang = '';
+ });
+});
+
describe('menu commands', () => {
beforeEach(() => {
vi.useFakeTimers();
diff --git a/lib/desktop/__tests__/policy-schema.test.ts b/lib/desktop/__tests__/policy-schema.test.ts
index 07b11863c..b952bec50 100644
--- a/lib/desktop/__tests__/policy-schema.test.ts
+++ b/lib/desktop/__tests__/policy-schema.test.ts
@@ -15,6 +15,7 @@ import {
jmapServerAllowed,
parseCertificateRule,
parseInstanceUrl,
+ pagePolicySnapshot,
parsePolicyValue,
parseServerPattern,
pluginAllowedByPolicy,
@@ -32,7 +33,7 @@ describe('the schema', () => {
'PluginsMode', 'PluginAllowlist', 'OfflineEnabled', 'AppLockRequired', 'AppLockTimeoutMinutes', 'TelemetryAllowed',
'CrashReportsAllowed', 'QuickComposeShortcut', 'AuthServerAllowlist', 'AuthNegotiateDelegateAllowlist',
'AutoSelectCertificateForUrls', 'KeystoreEnabled', 'KeystoreAllowedOrigins', 'BrowserSignIn', 'WipeOfflineData',
- 'OpenWithEnabled', 'DeveloperToolsAvailability',
+ 'OpenWithEnabled', 'DeveloperToolsAvailability', 'RecentFilesInAttach', 'FilesDriveEnabled', 'FilesFolderSyncEnabled', 'FilesDriveLetter',
]);
for (const key of POLICY_KEYS) {
const { title, description } = POLICY_SCHEMA[key];
@@ -56,6 +57,44 @@ describe('developer tools and Open with', () => {
expect(resolvePolicies(layers({ forcedMachine: { OpenWithEnabled: 0 } })).OpenWithEnabled).toMatchObject({ value: false, locked: true });
expect(resolvePolicies(layers({ forcedMachine: { OpenWithEnabled: 'maybe' } })).OpenWithEnabled).toMatchObject({ value: false, locked: true });
});
+
+ it('hide recent files in the Attach menu only by force, and a value nobody can read hides them', () => {
+ expect(resolvePolicies(layers({})).RecentFilesInAttach).toMatchObject({ value: true, locked: false });
+ expect(resolvePolicies(layers({ recommendedMachine: { RecentFilesInAttach: 0 } })).RecentFilesInAttach).toMatchObject({ value: true, locked: false });
+ expect(resolvePolicies(layers({ forcedUser: { RecentFilesInAttach: 0 } })).RecentFilesInAttach).toMatchObject({ value: false, locked: true });
+ expect(resolvePolicies(layers({ forcedMachine: { RecentFilesInAttach: 'yes please' } })).RecentFilesInAttach).toMatchObject({ value: false, locked: true });
+ });
+});
+
+describe('Files on this computer', () => {
+ it('tells the page the drive and folder sync are forced off, so it can show the lock', () => {
+ const forced = resolvePolicies(layers({ forcedMachine: { FilesDriveEnabled: 0, FilesFolderSyncEnabled: 0, FilesDriveLetter: 'R' } }));
+ const page = pagePolicySnapshot(forced);
+ expect(page.FilesDriveEnabled).toMatchObject({ value: false, locked: true });
+ expect(page.FilesFolderSyncEnabled).toMatchObject({ value: false, locked: true });
+ // The letter comes from main with the drive's state.
+ expect(page.FilesDriveLetter).toMatchObject({ value: null, locked: false });
+ });
+
+ it('turn the drive and folder sync off only by force, and a value nobody can read leaves them off', () => {
+ for (const key of ['FilesDriveEnabled', 'FilesFolderSyncEnabled'] as const) {
+ expect(resolvePolicies(layers({}))[key]).toMatchObject({ value: true, locked: false });
+ expect(resolvePolicies(layers({ recommendedUser: { [key]: 0 } }))[key]).toMatchObject({ value: true, locked: false });
+ expect(resolvePolicies(layers({ forcedUser: { [key]: 0 } }))[key]).toMatchObject({ value: false, locked: true });
+ expect(resolvePolicies(layers({ forcedMachine: { [key]: 'perhaps' } }))[key]).toMatchObject({ value: false, locked: true });
+ }
+ });
+
+ it('takes a drive letter from D to Z or none, forced only, and a value nobody can read means no letter', () => {
+ expect(parsePolicyValue('FilesDriveLetter', 'x')).toEqual({ ok: true, value: 'X' });
+ expect(parsePolicyValue('FilesDriveLetter', ' Q: ')).toEqual({ ok: true, value: 'Q' });
+ expect(parsePolicyValue('FilesDriveLetter', 'NONE')).toEqual({ ok: true, value: 'none' });
+ for (const bad of ['C', 'A:', 'B', 'QQ', 'Q:\\', '', 4, null]) expect(parsePolicyValue('FilesDriveLetter', bad).ok, String(bad)).toBe(false);
+ expect(resolvePolicies(layers({})).FilesDriveLetter).toMatchObject({ value: null, locked: false });
+ expect(resolvePolicies(layers({ recommendedMachine: { FilesDriveLetter: 'R' } })).FilesDriveLetter).toMatchObject({ value: null, locked: false });
+ expect(resolvePolicies(layers({ forcedMachine: { FilesDriveLetter: 'r' } })).FilesDriveLetter).toMatchObject({ value: 'R', locked: true });
+ expect(resolvePolicies(layers({ forcedUser: { FilesDriveLetter: 'C' } })).FilesDriveLetter).toMatchObject({ value: 'none', locked: true });
+ });
});
describe('precedence', () => {
diff --git a/lib/desktop/__tests__/recent-files.test.ts b/lib/desktop/__tests__/recent-files.test.ts
new file mode 100644
index 000000000..7c5fa8c6e
--- /dev/null
+++ b/lib/desktop/__tests__/recent-files.test.ts
@@ -0,0 +1,109 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { DEFAULT_POLICY_SNAPSHOT, type PolicySnapshot } from '../policy-schema';
+import type { BulwarkDesktopBridge, DesktopRecentFilesBridge } from '../types';
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import { listRecentFiles, readRecentFile, recentFilesOffered, recentWhen, shortFolder, useRecentFilesOffered } from '../recent-files';
+
+describe('shortFolder', () => {
+ it('keeps the drive or share and the folders nearest the file, and drops the middle', () => {
+ expect(shortFolder('C:\\Users\\me\\Documents')).toBe('C:\\Users\\me\\Documents');
+ expect(shortFolder('C:\\Users\\me\\AppData\\Local\\Temp\\bw-shots-gnIFSO\\Documents\\Reports'))
+ .toBe('C:\\…\\Temp\\bw-shots-gnIFSO\\Documents\\Reports');
+ expect(shortFolder('\\\\fileserver\\departments\\Finance\\Controlling\\2026\\Quarterly\\Board'))
+ .toBe('\\\\fileserver\\departments\\…\\Quarterly\\Board');
+ expect(shortFolder('/home/me/projects/customer-a/2026/contracts/signed/final')).toBe('/…/customer-a/2026/contracts/signed/final');
+ // One long name: nothing to drop, the line's ellipsis does the rest.
+ const long = `C:\\${'x'.repeat(60)}`;
+ expect(shortFolder(long)).toBe(long);
+ });
+});
+
+function setBridge(recentFiles?: Partial, policy: Partial = {}) {
+ const snapshot = { ...DEFAULT_POLICY_SNAPSHOT, ...policy };
+ window.bulwarkDesktop = {
+ version: 1,
+ platform: 'win32',
+ policy: { get: () => snapshot, onChange: () => () => {} },
+ ...(recentFiles ? { recentFiles: recentFiles as DesktopRecentFilesBridge } : {}),
+ } as BulwarkDesktopBridge;
+}
+
+const off = { RecentFilesInAttach: { value: false, source: 'forced-machine', locked: true } } as Partial;
+
+afterEach(() => {
+ window.bulwarkDesktop = undefined;
+});
+
+describe('whether the Attach menu lists recent files', () => {
+ it('not in a browser, not under a shell without the list, not when the policy says no', () => {
+ expect(recentFilesOffered()).toBe(false);
+ setBridge();
+ expect(recentFilesOffered()).toBe(false);
+ setBridge({ list: vi.fn(), attach: vi.fn() });
+ expect(recentFilesOffered()).toBe(true);
+ setBridge({ list: vi.fn(), attach: vi.fn() }, off);
+ expect(recentFilesOffered()).toBe(false);
+ });
+
+ it("says no in the server's render, so the page's first render matches it", () => {
+ setBridge({ list: vi.fn(), attach: vi.fn() });
+ const Probe = () => createElement('span', null, useRecentFilesOffered() ? 'menu' : 'button');
+ expect(renderToString(createElement(Probe))).toBe('button');
+ });
+});
+
+describe('listRecentFiles', () => {
+ it('gives the files, and nothing when main says no or fails', async () => {
+ const file = { id: 'a', name: 'a.pdf', folder: 'C:\\Docs', path: 'C:\\Docs\\a.pdf', usedAt: 1 };
+ setBridge({ list: vi.fn(async () => ({ ok: true as const, files: [file] })) });
+ expect(await listRecentFiles()).toEqual([file]);
+ setBridge({ list: vi.fn(async () => ({ ok: false as const, reason: 'gesture' as const })) });
+ expect(await listRecentFiles()).toEqual([]);
+ setBridge({ list: vi.fn(async () => { throw new Error('gone'); }) });
+ expect(await listRecentFiles()).toEqual([]);
+ window.bulwarkDesktop = undefined;
+ expect(await listRecentFiles()).toEqual([]);
+ });
+});
+
+describe('readRecentFile', () => {
+ it('turns the bytes into a File with the name main gave', async () => {
+ const attach = vi.fn(async () => ({ ok: true as const, file: { name: 'Report.docx', data: new TextEncoder().encode('hello') } }));
+ setBridge({ attach });
+ const result = await readRecentFile('id-1');
+ expect(attach).toHaveBeenCalledWith('id-1');
+ expect(result.ok).toBe(true);
+ if (!result.ok) return;
+ expect(result.file.name).toBe('Report.docx');
+ expect(await result.file.text()).toBe('hello');
+ });
+
+ it('says what the user can act on, and keeps quiet about a lock or a policy', async () => {
+ const answer = (reason: string) => {
+ setBridge({ attach: vi.fn(async () => ({ ok: false, reason }) as never) });
+ return readRecentFile('x');
+ };
+ expect(await answer('missing')).toEqual({ ok: false, reason: 'missing' });
+ expect(await answer('too-large')).toEqual({ ok: false, reason: 'too-large' });
+ expect(await answer('unknown')).toEqual({ ok: false, reason: 'failed' });
+ expect(await answer('gesture')).toEqual({ ok: false, reason: 'failed' });
+ expect(await answer('locked')).toEqual({ ok: false, reason: 'quiet' });
+ expect(await answer('policy')).toEqual({ ok: false, reason: 'quiet' });
+ });
+});
+
+describe('recentWhen', () => {
+ const now = new Date(2026, 10, 4, 15, 0).getTime();
+ it('counts minutes and hours today, calendar days this week, then weeks and months', () => {
+ expect(recentWhen(now - 20_000, now, 'en')).toBe('now');
+ expect(recentWhen(now - 5 * 60_000, now, 'en')).toBe('5 minutes ago');
+ expect(recentWhen(now - 3 * 60 * 60_000, now, 'en')).toBe('3 hours ago');
+ // Last night at 23:00, 16 hours ago: yesterday.
+ expect(recentWhen(new Date(2026, 10, 3, 23, 0).getTime(), now, 'en')).toBe('yesterday');
+ expect(recentWhen(new Date(2026, 10, 1, 9, 0).getTime(), now, 'en')).toBe('3 days ago');
+ expect(recentWhen(now - 15 * 24 * 60 * 60_000, now, 'en')).toBe('2 weeks ago');
+ expect(recentWhen(now - 70 * 24 * 60 * 60_000, now, 'en')).toBe('2 months ago');
+ expect(recentWhen(now - 3 * 60 * 60_000, now, 'de')).toBe('vor 3 Stunden');
+ });
+});
diff --git a/lib/desktop/dialog-window.ts b/lib/desktop/dialog-window.ts
new file mode 100644
index 000000000..88acabacc
--- /dev/null
+++ b/lib/desktop/dialog-window.ts
@@ -0,0 +1,172 @@
+/**
+ * Short questions in a window of their own, in the desktop app: the shell draws a card
+ * like the in-page dialog in a frameless window, modal to this one (dialogs.show,
+ * src/main/dialog-window.ts in the desktop repo). The page sends its look along, so the
+ * window has the app's theme, accent, font and corners.
+ *
+ * Only for confirm/alert-sized questions: a title, a few lines of plain text and up to
+ * four buttons. Anything with fields, pickers or rich content stays in the page. Without
+ * the bridge (browser, Lite, an older shell) `askInWindow` returns null and the caller
+ * shows its in-page dialog.
+ */
+
+import { getDesktopBridge } from './bridge';
+import type { DesktopDialogWindowAnswer, DesktopDialogWindowColour, DesktopDialogWindowRequest, DesktopDialogWindowTheme } from './types';
+
+export type WindowQuestion = Omit & {
+ /** Plain text. With `boldMarks`, text between ** pairs is bold, as plugin dialogs have it. */
+ message?: string;
+ boldMarks?: boolean;
+};
+
+/** `failed`: the shell refused the request; show the dialog in the page instead. */
+export type WindowAnswer = DesktopDialogWindowAnswer | 'failed';
+
+export interface AskedInWindow {
+ answer: Promise;
+ /** Takes the question back: the state it belonged to went. Does nothing once answered. */
+ cancel: () => void;
+}
+
+type ShowBridge = Required>['dialogs']>, 'show' | 'cancel'>>;
+
+function showBridge(): ShowBridge | null {
+ const dialogs = getDesktopBridge()?.dialogs;
+ return dialogs && typeof dialogs.show === 'function' && typeof dialogs.cancel === 'function' ? (dialogs as ShowBridge) : null;
+}
+
+export function dialogWindowsAvailable(): boolean {
+ return showBridge() !== null;
+}
+
+/** Text in runs, with ** pairs bold (plugin-dialog-host.tsx's renderMessage, as runs). */
+export function messageRuns(text: string | undefined, boldMarks = false): { text: string; bold?: boolean }[] {
+ if (!text) return [];
+ if (!boldMarks) return [{ text }];
+ return text.split('**').flatMap((part, i) => (part ? [i % 2 === 1 ? { text: part, bold: true } : { text: part }] : []));
+}
+
+const COLOUR_VARS: Record = {
+ background: '--color-background',
+ foreground: '--color-foreground',
+ muted: '--color-muted',
+ mutedForeground: '--color-muted-foreground',
+ border: '--color-border',
+ input: '--color-input',
+ primary: '--color-primary',
+ primaryForeground: '--color-primary-foreground',
+ destructive: '--color-destructive',
+ destructiveForeground: '--color-destructive-foreground',
+ accent: '--color-accent',
+ accentForeground: '--color-accent-foreground',
+ ring: '--color-ring',
+};
+
+/** What Chromium computes an sRGB colour to. */
+const RGB = /^rgba?\((\d{1,3}), (\d{1,3}), (\d{1,3})(?:, ([\d.]+))?\)$/;
+
+/** One colour as rgb()/rgba(), whatever the theme wrote it as (hex, hsl, oklch, color-mix). */
+function resolveColour(probe: HTMLElement, value: string): string | undefined {
+ probe.style.color = '';
+ probe.style.color = value;
+ if (!probe.style.color) return undefined;
+ const computed = getComputedStyle(probe).color.trim();
+ const rgb = RGB.exec(computed);
+ if (rgb) {
+ const [r, g, b, a] = rgb.slice(1).map((n) => (n === undefined ? undefined : Number(n)));
+ return a === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${Math.round(a * 1000) / 1000})`;
+ }
+ // A wide-gamut form (oklch, color(srgb …)): a canvas gives its sRGB bytes.
+ try {
+ const context = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+ if (!context) return undefined;
+ context.fillStyle = computed;
+ context.fillRect(0, 0, 1, 1);
+ const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+ return `rgba(${r}, ${g}, ${b}, ${Math.round((a / 255) * 1000) / 1000})`;
+ } catch {
+ return undefined;
+ }
+}
+
+function pixels(value: string): number | undefined {
+ const n = parseFloat(value);
+ return Number.isFinite(n) ? n : undefined;
+}
+
+/** The page's look as it is now: the current theme, dark or light, accent, font and corners. */
+export function readDialogTheme(): DesktopDialogWindowTheme {
+ if (typeof document === 'undefined') return {};
+ const root = document.documentElement;
+ const styles = getComputedStyle(root);
+ // Inside the page, so the theme's own rules for dialogs and buttons apply to it too.
+ const probe = document.createElement('div');
+ probe.setAttribute('aria-hidden', 'true');
+ probe.style.cssText = 'position:fixed;left:-9999px;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none';
+ const card = document.createElement('div');
+ card.className = 'rounded-lg';
+ const button = document.createElement('div');
+ button.className = 'rounded-md';
+ probe.append(card, button);
+ document.body.append(probe);
+ try {
+ const colours: Partial> = {};
+ for (const [key, name] of Object.entries(COLOUR_VARS) as [DesktopDialogWindowColour, string][]) {
+ const value = styles.getPropertyValue(name).trim();
+ const colour = value ? resolveColour(probe, value) : undefined;
+ if (colour) colours[key] = colour;
+ }
+ return {
+ dark: root.classList.contains('dark'),
+ colours,
+ font: getComputedStyle(document.body).fontFamily || undefined,
+ fontSize: pixels(styles.fontSize),
+ radius: pixels(getComputedStyle(card).borderTopLeftRadius),
+ radiusSmall: pixels(getComputedStyle(button).borderTopLeftRadius),
+ };
+ } finally {
+ probe.remove();
+ }
+}
+
+let next = 0;
+
+/**
+ * Asks in a window of the app's own. Null when this shell can't (the browser, an older
+ * shell): show the in-page dialog then.
+ */
+export function askInWindow(question: WindowQuestion): AskedInWindow | null {
+ const bridge = showBridge();
+ if (!bridge) return null;
+ const { message, boldMarks, ...rest } = question;
+ next += 1;
+ const id = `dialog-${next}-${Math.random().toString(36).slice(2, 8)}`;
+ const request: DesktopDialogWindowRequest = {
+ ...rest,
+ id,
+ message: messageRuns(message, boldMarks),
+ theme: readDialogTheme(),
+ lang: document.documentElement.lang || undefined,
+ dir: document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
+ };
+ let settled = false;
+ let answer: Promise;
+ try {
+ answer = bridge.show(request).then(
+ (value) => value ?? null,
+ () => 'failed' as const,
+ );
+ } catch {
+ answer = Promise.resolve('failed');
+ }
+ answer = answer.then((value) => {
+ settled = true;
+ return value;
+ });
+ return {
+ answer,
+ cancel: () => {
+ if (!settled) bridge.cancel(id);
+ },
+ };
+}
diff --git a/lib/desktop/native-menu.ts b/lib/desktop/native-menu.ts
deleted file mode 100644
index c920c2fe6..000000000
--- a/lib/desktop/native-menu.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-/**
- * Turns an HTML menu into a native one. The ContextMenu component renders as it does
- * in a browser, hidden, with its submenus open. This reads the result and shows that
- * natively. A pick clicks the row the HTML menu has for it, so a menu has one list of
- * entries with one set of handlers and the two can't drift.
- *
- * A menu with something a native one can't show (a colour picker, a row with no text)
- * stays HTML. So does anything marked data-native-menu="html". A plugin's frame in the
- * menu doesn't: the rest shows natively, with one line that opens the HTML menu.
- */
-
-import { getDesktopBridge } from './bridge';
-import type { DesktopNativeMenuItem } from './types';
-
-export function nativeMenusAvailable(): boolean {
- return !!getDesktopBridge()?.menu?.popup;
-}
-
-export interface ReadMenu {
- items: DesktopNativeMenuItem[];
- /** The HTML row behind each native item's id. */
- elements: Map;
- /** There's something here a native menu can't show. */
- unsupported: boolean;
- /** A plugin drew something of its own in the menu. */
- hasFrames: boolean;
-}
-
-const ROW = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], button, a[href]';
-
-/** The native line that opens the HTML menu instead. */
-export const HTML_MENU_ITEM = "html-menu";
-
-function isDisabled(el: HTMLElement): boolean {
- return (el as HTMLButtonElement).disabled === true || el.getAttribute('aria-disabled') === 'true';
-}
-
-/** What a row shows apart from its label: the key, a count. Never part of the label. */
-const ASIDE = 'kbd, [data-menu-shortcut], [data-menu-badge]';
-
-/**
- * The words of an element, each element's apart: "Day" and "D" make "Day D", not
- * "DayD", and a name over an address doesn't run into it. Keys and counts are left out.
- */
-function wordsOf(node: Node): string {
- if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? '';
- if (!(node instanceof Element) || node.matches(ASIDE)) return '';
- return Array.from(node.childNodes).map(wordsOf).join(' ');
-}
-
-function labelOf(el: HTMLElement): string {
- const named = el.getAttribute('aria-label') ?? el.querySelector('[data-menu-label]')?.textContent ?? wordsOf(el);
- const badge = el.querySelector('[data-menu-badge]')?.textContent?.trim();
- const label = named.replace(/\s+/g, ' ').trim();
- return badge && label ? `${label} (${badge})` : label;
-}
-
-const KEY_NAMES: Record = {
- del: 'Delete', delete: 'Delete', esc: 'Escape', escape: 'Escape', enter: 'Enter', return: 'Enter',
- space: 'Space', tab: 'Tab', backspace: 'Backspace', insert: 'Insert', home: 'Home', end: 'End',
- pageup: 'PageUp', pagedown: 'PageDown', up: 'Up', down: 'Down', left: 'Left', right: 'Right',
- '↑': 'Up', '↓': 'Down', '←': 'Left', '→': 'Right', '+': 'Plus', '⌫': 'Backspace', '⏎': 'Enter', '↵': 'Enter',
-};
-const MODIFIERS: Record = {
- ctrl: 'Ctrl', control: 'Ctrl', mod: 'CmdOrCtrl', cmd: 'Cmd', command: 'Cmd', '⌘': 'Cmd', alt: 'Alt', option: 'Alt',
- '⌥': 'Alt', shift: 'Shift', '⇧': 'Shift', '⌃': 'Ctrl', meta: 'Super', win: 'Super',
-};
-const KEY = /^([A-Z0-9]|F([1-9]|1[0-9]|2[0-4])|[)!@#$%^&*(:;=<,_\-.>?/~`{\][|\\}"']|Plus|Space|Tab|Backspace|Delete|Insert|Enter|Up|Down|Left|Right|Home|End|PageUp|PageDown|Escape)$/;
-
-/**
- * A key hint as the app shows it ("Shift + I", "⌘X", "Del") in Electron's accelerator
- * syntax, or undefined when it isn't one key (two alternatives, a word).
- */
-export function toAccelerator(hint: string): string | undefined {
- let text = hint.trim();
- if (!text || text.includes(' / ')) return undefined;
- const parts: string[] = [];
- // macOS writes its modifiers as symbols with nothing between: ⌘⇧K.
- while (text.length > 1 && /^[⌘⌥⇧⌃]/.test(text)) {
- parts.push(MODIFIERS[text[0]]);
- text = text.slice(1).replace(/^\s*\+?\s*/, '');
- }
- const pieces = text === '+' ? ['+'] : text.split(/\s*\+\s*/).filter(Boolean);
- if (text.endsWith('++')) pieces.push('+');
- for (let i = 0; i < pieces.length - 1; i++) {
- const modifier = MODIFIERS[pieces[i].toLowerCase()];
- if (!modifier) return undefined;
- parts.push(modifier);
- }
- const last = pieces[pieces.length - 1];
- if (!last) return undefined;
- const key = KEY_NAMES[last.toLowerCase()] ?? (last.length === 1 ? last.toUpperCase() : last);
- if (!KEY.test(key)) return undefined;
- return [...new Set(parts), key].join('+');
-}
-
-function acceleratorOf(el: HTMLElement): string | undefined {
- const hint = el.querySelector('[data-menu-shortcut], kbd')?.textContent;
- return hint ? toAccelerator(hint) : undefined;
-}
-
-function isHidden(el: Element): boolean {
- return typeof window.getComputedStyle === 'function' && window.getComputedStyle(el).display === 'none';
-}
-
-export function readMenu(root: HTMLElement): ReadMenu {
- const elements = new Map();
- let unsupported = root.querySelector('[data-native-menu="html"], select, textarea, input[type="color"]') !== null;
- let hasFrames = false;
- let next = 1;
-
- const walk = (container: Element, into: DesktopNativeMenuItem[]): void => {
- for (const child of Array.from(container.children)) {
- if (!(child instanceof HTMLElement) || isHidden(child)) continue;
- if (child.getAttribute('role') === 'separator') {
- into.push({ type: 'separator' });
- continue;
- }
- if (child.tagName === 'IFRAME') {
- // Only a plugin's own slot has this coming. Anything else stays HTML whole.
- if (child.closest('[data-plugin-slot]')) hasFrames = true;
- else unsupported = true;
- continue;
- }
- if (child.dataset.submenuPanel !== undefined) continue;
- if (child.dataset.nativeSubmenu !== undefined) {
- // A folder with subfolders (a Move list): a native menu can't indent,
- // so it's a submenu with the folder itself first, as Thunderbird has it.
- const group: DesktopNativeMenuItem[] = [];
- walk(child, group);
- const [head, ...rest] = group;
- if (head && rest.length && head.type !== 'separator' && head.label) {
- into.push({ label: head.label, submenu: [head, { type: 'separator' }, ...rest] });
- } else {
- into.push(...group);
- }
- continue;
- }
- if (child.dataset.contextMenuHeader !== undefined) {
- const label = labelOf(child);
- if (label) into.push({ id: `h${next++}`, label, enabled: false });
- continue;
- }
- if (child.dataset.submenuTrigger !== undefined) {
- const label = labelOf(child);
- if (isDisabled(child)) {
- into.push({ id: `s${next++}`, label, enabled: false });
- continue;
- }
- const panel = child.parentElement?.querySelector(':scope > [data-submenu-panel]');
- if (!panel) {
- unsupported = true;
- continue;
- }
- const submenu: DesktopNativeMenuItem[] = [];
- walk(panel, submenu);
- into.push({ label, submenu });
- continue;
- }
- if (child.matches(ROW)) {
- // A row that opens its own popup: there's nothing to click through to.
- if (child.hasAttribute('aria-haspopup')) {
- unsupported = true;
- continue;
- }
- const label = labelOf(child);
- if (!label) {
- // A swatch or an icon says nothing in a native menu.
- unsupported = true;
- continue;
- }
- const id = `i${next++}`;
- elements.set(id, child);
- const role = child.getAttribute('role');
- const accelerator = acceleratorOf(child);
- into.push({
- id,
- label,
- enabled: !isDisabled(child),
- ...(accelerator ? { accelerator } : {}),
- ...(role === 'menuitemcheckbox' || role === 'menuitemradio'
- ? { type: role === 'menuitemcheckbox' ? 'checkbox' as const : 'radio' as const, checked: child.getAttribute('aria-checked') === 'true' }
- : {}),
- });
- continue;
- }
- // A search field over a list is no use where you can't type.
- if (child instanceof HTMLInputElement) continue;
- walk(child, into);
- }
- };
-
- const items: DesktopNativeMenuItem[] = [];
- walk(root, items);
- return { items, elements, unsupported, hasFrames };
-}
-
-const SETTLE_MS = 30;
-const SETTLE_LIMIT_MS = 400;
-
-/**
- * The menu once it stopped changing. Entries can render a moment after the menu
- * (the mail menu waits for its data), and a native menu can't grow once it's up.
- */
-export async function readSettledMenu(root: HTMLElement, cancelled: () => boolean): Promise {
- const started = Date.now();
- let previous = readMenu(root);
- while (!cancelled() && Date.now() - started < SETTLE_LIMIT_MS) {
- await new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
- const current = readMenu(root);
- if (current.items.length > 0 && JSON.stringify(current.items) === JSON.stringify(previous.items)) return current;
- previous = current;
- }
- return previous;
-}
-
-function labelOfId(items: DesktopNativeMenuItem[], id: string): string | undefined {
- for (const item of items) {
- if (item.id === id) return item.label;
- const below = item.submenu && labelOfId(item.submenu, id);
- if (below) return below;
- }
- return undefined;
-}
-
-export type NativeMenuOutcome = 'done' | 'html' | 'gone';
-
-/**
- * Shows it and clicks the row picked. Says when the pick found nothing: the page can
- * re-render under a menu that stays up (the list refreshing), and a row that's gone
- * would otherwise do nothing with no word about it. If the same line is back at the
- * same place, that's the one.
- */
-export async function showNativeMenu(read: ReadMenu, root: HTMLElement, at?: { x: number; y: number }, fromPlugins?: string): Promise {
- const popup = getDesktopBridge()?.menu?.popup;
- if (!popup) return 'done';
- const items = read.hasFrames && fromPlugins
- ? [...read.items, { type: 'separator' as const }, { id: HTML_MENU_ITEM, label: fromPlugins }]
- : read.items;
- document.documentElement.dataset.nativeMenuOpen = '';
- let picked: string | null;
- try {
- picked = await popup(items, at);
- } finally {
- delete document.documentElement.dataset.nativeMenuOpen;
- }
- if (!picked) return 'done';
- if (picked === HTML_MENU_ITEM) return 'html';
- let row = read.elements.get(picked);
- if (!row?.isConnected) {
- const again = root.isConnected ? readMenu(root) : null;
- row = again && labelOfId(again.items, picked) === labelOfId(read.items, picked) ? again.elements.get(picked) : undefined;
- }
- if (!row?.isConnected) return 'gone';
- row.click();
- return 'done';
-}
-
-/**
- * The system's menu font and the room a native menu adds around its words, in screen
- * pixels: Chromium's menus on Windows and Linux, AppKit's on macOS. Measured off the
- * real menus at 100 %; an estimate within a few pixels is all a placement needs.
- */
-const NATIVE_METRICS = {
- win32: { font: '12px "Segoe UI", system-ui, sans-serif', padding: 74, keyGap: 28, charWidth: 6.2 },
- darwin: { font: '14px -apple-system, system-ui, sans-serif', padding: 48, keyGap: 24, charWidth: 7.2 },
- linux: { font: '13px system-ui, sans-serif', padding: 70, keyGap: 28, charWidth: 6.8 },
-} as const;
-
-let measureContext: CanvasRenderingContext2D | null | undefined;
-
-function textWidth(text: string, font: string, charWidth: number): number {
- if (measureContext === undefined) {
- try {
- // jsdom has no canvas, and says so on the console.
- measureContext = typeof document === 'undefined' || /jsdom/i.test(navigator.userAgent)
- ? null
- : document.createElement('canvas').getContext('2d');
- } catch {
- measureContext = null;
- }
- }
- if (measureContext) {
- measureContext.font = font;
- const width = measureContext.measureText(text).width;
- if (Number.isFinite(width) && width > 0) return width;
- }
- return text.length * charWidth;
-}
-
-/**
- * How wide the native menu for these items will be, in the page's CSS pixels. A native
- * menu is drawn at the screen's scale, not the page's zoom: at 150 % zoom it takes up
- * less of the page. outerWidth is in screen pixels and innerWidth in CSS pixels, which
- * gives the zoom in a window with no frame.
- */
-export function estimateNativeMenuWidth(items: DesktopNativeMenuItem[], platform = getDesktopBridge()?.platform ?? 'win32'): number {
- const metrics = NATIVE_METRICS[platform] ?? NATIVE_METRICS.win32;
- let widest = 0;
- for (const item of items) {
- if (item.type === 'separator' || !item.label) continue;
- const key = item.accelerator ? metrics.keyGap + textWidth(item.accelerator, metrics.font, metrics.charWidth) : 0;
- widest = Math.max(widest, textWidth(item.label, metrics.font, metrics.charWidth) + key);
- }
- const screenWidth = widest + metrics.padding;
- const zoom = typeof window !== 'undefined' && window.innerWidth > 0 && window.outerWidth > 0
- ? Math.min(5, Math.max(0.25, window.outerWidth / window.innerWidth))
- : 1;
- return Math.round(screenWidth / zoom);
-}
-
-/**
- * Where a native menu from a button opens, in page coordinates: its top left corner,
- * under the button and lined up with the edge the HTML menu would use. Only that: the
- * OS keeps a native menu on the screen itself, and it may reach past the window.
- */
-export function nativeMenuPoint(
- anchor: { left: number; right: number; bottom: number; align?: 'start' | 'end' },
- menuWidth: number,
- rtl: boolean,
- gap: number,
-): { x: number; y: number } {
- const alignEnd = (anchor.align === 'end') !== rtl;
- return { x: Math.max(0, Math.round(alignEnd ? anchor.right - menuWidth : anchor.left)), y: Math.round(anchor.bottom + gap) };
-}
-
-/** A native menu is up: the window's blur or a stray event says nothing about it. */
-export function nativeMenuIsOpen(): boolean {
- return typeof document !== 'undefined' && document.documentElement.dataset.nativeMenuOpen !== undefined;
-}
diff --git a/lib/desktop/policy-schema.ts b/lib/desktop/policy-schema.ts
index e3229f2dd..fe2dbb390 100644
--- a/lib/desktop/policy-schema.ts
+++ b/lib/desktop/policy-schema.ts
@@ -82,6 +82,10 @@ export interface PolicyValues {
WipeOfflineData: string | null;
OpenWithEnabled: boolean;
DeveloperToolsAvailability: number | null;
+ RecentFilesInAttach: boolean;
+ FilesDriveEnabled: boolean;
+ FilesFolderSyncEnabled: boolean;
+ FilesDriveLetter: string | null;
}
export type PolicyKey = keyof PolicyValues;
@@ -128,7 +132,7 @@ export type PolicyDefinition = PolicyBase &
}
| {
type: 'string';
- format: 'instanceUrl' | 'shortcut' | 'hostList' | 'nonce';
+ format: 'instanceUrl' | 'shortcut' | 'hostList' | 'nonce' | 'driveLetter';
default: null;
maxLength: number;
label: PolicyText;
@@ -466,6 +470,60 @@ export const POLICY_SCHEMA: Record = {
de: 'Dieselben Werte wie die gleichnamige Richtlinie von Chrome. 2: Die Entwicklertools sind aus und die Einstellung ist gesperrt. 0 oder 1 oder nicht konfiguriert: Benutzer können sie nach einer Warnung in den Einstellungen einschalten. Mit den Entwicklertools kann jeder an der Tastatur alles lesen, was die App enthält, auch E-Mails und Passwörter im Speicher.',
},
},
+ RecentFilesInAttach: {
+ category: 'privacy',
+ type: 'boolean',
+ default: true,
+ onInvalid: false,
+ forcedOnly: true,
+ sample: true,
+ title: { en: 'Show recent files in the Attach menu', de: 'Zuletzt verwendete Dateien im Menü „Anfügen“ anzeigen' },
+ description: {
+ en: 'When enabled or not configured, the Attach button in a new message lists the files the user opened recently, as the operating system records them, so one click attaches one. The list is read when the menu opens and stays on the device. When disabled, the list is gone and the app refuses to read it. Attaching through the file dialog is not affected.',
+ de: 'Wenn aktiviert oder nicht konfiguriert, listet die Schaltfläche „Anfügen“ in einer neuen Nachricht die Dateien auf, die der Benutzer zuletzt geöffnet hat, so wie das Betriebssystem sie erfasst. Ein Klick fügt eine davon an. Die Liste wird beim Öffnen des Menüs gelesen und bleibt auf dem Gerät. Wenn deaktiviert, fehlt die Liste und die App lehnt es ab, sie zu lesen. Das Anfügen über den Dateidialog ist nicht betroffen.',
+ },
+ },
+ FilesDriveEnabled: {
+ category: 'system',
+ type: 'boolean',
+ default: true,
+ onInvalid: false,
+ forcedOnly: true,
+ sample: true,
+ title: { en: 'Allow Files as a drive', de: 'Dateien als Laufwerk zulassen' },
+ description: {
+ en: 'When enabled or not configured, people can show their Files in the file manager as a drive, with files downloaded when opened. Windows only for now. When disabled, the drive is not offered, and a drive that is already there is removed with the copies of files in it. Files on the server are not affected.',
+ de: 'Wenn aktiviert oder nicht konfiguriert, können Benutzer ihre Dateien im Dateimanager als Laufwerk anzeigen. Dateien werden beim Öffnen heruntergeladen. Vorerst nur unter Windows. Wenn deaktiviert, wird das Laufwerk nicht angeboten, und ein vorhandenes Laufwerk wird mit den Kopien der Dateien darin entfernt. Die Dateien auf dem Server sind davon nicht betroffen.',
+ },
+ },
+ FilesFolderSyncEnabled: {
+ category: 'system',
+ type: 'boolean',
+ default: true,
+ onInvalid: false,
+ forcedOnly: true,
+ sample: true,
+ title: { en: 'Allow syncing folders with Files', de: 'Synchronisieren von Ordnern mit Dateien zulassen' },
+ description: {
+ en: 'When enabled or not configured, people can keep a folder on the computer and a folder in Files the same, in both directions. When disabled, this is not offered and folders that sync now stop. The files in those folders stay where they are.',
+ de: 'Wenn aktiviert oder nicht konfiguriert, können Benutzer einen Ordner auf dem Computer und einen Ordner in Dateien in beide Richtungen gleich halten. Wenn deaktiviert, wird dies nicht angeboten, und Ordner, die gerade synchronisiert werden, hören damit auf. Die Dateien in diesen Ordnern bleiben, wo sie sind.',
+ },
+ },
+ FilesDriveLetter: {
+ category: 'system',
+ forcedOnly: true,
+ type: 'string',
+ format: 'driveLetter',
+ default: null,
+ maxLength: 8,
+ sample: 'none',
+ label: { en: 'Drive letter', de: 'Laufwerksbuchstabe' },
+ title: { en: 'Drive letter for Files', de: 'Laufwerksbuchstabe für Dateien' },
+ description: {
+ en: 'Windows only. A letter from D to Z gives the Files drive that letter for every user, and they can\'t change it. Enter none to never give it a letter. When not configured, people choose under Settings, and there is no letter until they do. A value the app can\'t read counts as none.',
+ de: 'Nur unter Windows. Ein Buchstabe von D bis Z gibt dem Laufwerk Dateien für jeden Benutzer diesen Buchstaben, und Benutzer können ihn nicht ändern. Geben Sie none ein, damit es nie einen Buchstaben bekommt. Wenn nicht konfiguriert, wählen Benutzer in den Einstellungen, und bis dahin gibt es keinen Buchstaben. Ein Wert, den die App nicht lesen kann, gilt als none.',
+ },
+ },
};
export const POLICY_KEYS = Object.keys(POLICY_SCHEMA) as PolicyKey[];
@@ -617,6 +675,16 @@ export function pluginAllowedByPolicy(mode: PluginsMode, allowlist: readonly str
const SHORTCUT = /^(?:(?:Command|Cmd|Control|Ctrl|CommandOrControl|CmdOrCtrl|Alt|Option|AltGr|Shift|Super|Meta)\+){1,4}(?:[A-Z0-9]|F[1-9]|F1[0-9]|F2[0-4]|Space|Tab|Enter|Backspace|Delete|Insert|Home|End|PageUp|PageDown|Up|Down|Left|Right|Plus|[-=,./;'`[\]\\])$/i;
+/** A drive letter from D to Z, upper case, or `none`. */
+function parseDriveLetter(raw: unknown): Parsed {
+ if (typeof raw !== 'string') return fail('not_text');
+ const text = raw.trim();
+ if (text.toLowerCase() === 'none') return { ok: true, value: 'none' };
+ const match = /^([D-Za-z]):?$/.exec(text);
+ if (!match || !/^[D-Z]$/i.test(match[1])) return fail('invalid_drive_letter');
+ return { ok: true, value: match[1].toUpperCase() };
+}
+
function parseShortcut(raw: unknown): Parsed {
if (typeof raw !== 'string') return fail('not_text');
const text = raw.trim();
@@ -796,6 +864,8 @@ export function parsePolicyValue(key: PolicyKey, raw: unknown, allowInsecure = f
return parseHostList(raw);
case 'nonce':
return parseNonce(raw);
+ case 'driveLetter':
+ return parseDriveLetter(raw);
}
break;
case 'list':
@@ -821,6 +891,8 @@ function failClosedValue(key: PolicyKey): PolicyValues[PolicyKey] {
if (definition.type === 'list') return [] as PolicyValues[PolicyKey];
// A shortcut nobody can read doesn't get the built-in one instead.
if (definition.type === 'string' && definition.format === 'shortcut') return 'off' as PolicyValues[PolicyKey];
+ // A drive letter nobody can read means no letter, not the user's own.
+ if (definition.type === 'string' && definition.format === 'driveLetter') return 'none' as PolicyValues[PolicyKey];
// A limit nobody can read is the tightest one, not the user's own.
if (definition.type === 'integer') return (definition.onInvalid !== undefined ? definition.onInvalid : definition.min) as PolicyValues[PolicyKey];
return definition.default as PolicyValues[PolicyKey];
@@ -916,6 +988,9 @@ const PAGE_POLICY_KEYS: readonly PolicyKey[] = [
'AppLockRequired',
'AppLockTimeoutMinutes',
'CrashReportsAllowed',
+ 'RecentFilesInAttach',
+ 'FilesDriveEnabled',
+ 'FilesFolderSyncEnabled',
];
/**
@@ -965,6 +1040,10 @@ export const POLICY_CONSUMERS: Record = {
BrowserSignIn: { repo: 'shell', file: 'src/main/features/browser-sign-in.ts' },
OpenWithEnabled: { repo: 'shell', file: 'src/main/features/os-default-app.ts' },
DeveloperToolsAvailability: { repo: 'shell', file: 'src/main/features/dev-tools.ts' },
+ RecentFilesInAttach: { repo: 'shell', file: 'src/main/features/os-recent.ts' },
+ FilesDriveEnabled: { repo: 'shell', file: 'src/main/features/files-drive.ts' },
+ FilesFolderSyncEnabled: { repo: 'shell', file: 'src/main/features/files-folders.ts' },
+ FilesDriveLetter: { repo: 'shell', file: 'src/main/features/files-drive.ts' },
};
/** The part the embedded server enforces. Sent to it by message. */
diff --git a/lib/desktop/recent-files.ts b/lib/desktop/recent-files.ts
new file mode 100644
index 000000000..b18a02211
--- /dev/null
+++ b/lib/desktop/recent-files.ts
@@ -0,0 +1,103 @@
+/**
+ * Recent files in the composer's Attach menu, in the desktop app only. The shell reads the
+ * OS's list when the menu opens and hands over what the menu shows; attaching sends back an
+ * id, and the bytes come back as a File for the composer's own checks, as a file from the
+ * file dialog does. In a browser there's no bridge, and nothing here offers anything.
+ */
+
+import { useSyncExternalStore } from 'react';
+import { getDesktopBridge } from './bridge';
+import { getDesktopPolicy, onDesktopPolicyChange } from './policy';
+import type { PolicySnapshot } from './policy-schema';
+import type { DesktopRecentFile } from './types';
+
+/** The shell's limit for one file, the same as for a file from "Open with" (HANDOFF_MAX_BYTES). */
+export const RECENT_FILE_MAX_BYTES = 100 * 1024 * 1024;
+
+/** The shell has the list and the RecentFilesInAttach policy doesn't hide it. */
+export function recentFilesOffered(policy: PolicySnapshot = getDesktopPolicy()): boolean {
+ return !!getDesktopBridge()?.recentFiles && policy.RecentFilesInAttach?.value !== false;
+}
+
+/** recentFilesOffered, live. False in the server's render, so the first render in the page matches it. */
+export function useRecentFilesOffered(): boolean {
+ return useSyncExternalStore(onDesktopPolicyChange, () => recentFilesOffered(), () => false);
+}
+
+/** Straight from the click that opened the menu: main wants one. Empty when there's nothing to show. */
+export async function listRecentFiles(): Promise {
+ const bridge = getDesktopBridge()?.recentFiles;
+ if (!bridge) return [];
+ try {
+ const result = await bridge.list();
+ return result.ok ? result.files : [];
+ } catch {
+ return [];
+ }
+}
+
+export type RecentFileAttach =
+ | { ok: true; file: File }
+ | { ok: false; reason: 'missing' | 'too-large' | 'failed' | 'quiet' };
+
+/** Straight from the click on the row. `quiet`: nothing worth telling the user (locked, or switched off). */
+export async function readRecentFile(id: string): Promise {
+ const bridge = getDesktopBridge()?.recentFiles;
+ if (!bridge) return { ok: false, reason: 'quiet' };
+ try {
+ const result = await bridge.attach(id);
+ if (result.ok) return { ok: true, file: new File([new Uint8Array(result.file.data)], result.file.name) };
+ if (result.reason === 'missing' || result.reason === 'too-large') return { ok: false, reason: result.reason };
+ // Locked or switched off since the menu opened: the page shows that itself.
+ if (result.reason === 'locked' || result.reason === 'policy') return { ok: false, reason: 'quiet' };
+ // An id from a list a newer one replaced, or a click main didn't see: worth another try.
+ return { ok: false, reason: 'failed' };
+ } catch {
+ return { ok: false, reason: 'failed' };
+ }
+}
+
+/**
+ * A long folder as its start and its end, which tell it apart: the drive or the share, then
+ * the folders nearest the file. The middle goes, where a path's end would under an ellipsis.
+ */
+export function shortFolder(folder: string, max = 44): string {
+ if (folder.length <= max) return folder;
+ const sep = folder.includes('\\') ? '\\' : '/';
+ const parts = folder.split(sep);
+ // \\server\share, or C:, or the empty start of /home.
+ const rootCount = folder.startsWith('\\\\') ? 4 : 1;
+ if (parts.length <= rootCount + 1) return folder;
+ const root = parts.slice(0, rootCount).join(sep);
+ let tail = parts.slice(rootCount);
+ while (tail.length > 1 && `${root}${sep}…${sep}${tail.join(sep)}`.length > max) tail = tail.slice(1);
+ return `${root}${sep}…${sep}${tail.join(sep)}`;
+}
+
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+ ['year', 365 * 24 * 60 * 60_000],
+ ['month', 30 * 24 * 60 * 60_000],
+ ['week', 7 * 24 * 60 * 60_000],
+ ['day', 24 * 60 * 60_000],
+ ['hour', 60 * 60_000],
+ ['minute', 60_000],
+];
+
+/** "5 minutes ago", "yesterday", "3 weeks ago", in the UI's language. Under a minute: "now". */
+export function recentWhen(usedAt: number, now: number, locale: string): string {
+ const format = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+ const ago = Math.max(0, now - usedAt);
+ // Whole days by the calendar, so something from last night is "yesterday", not "10 hours ago".
+ if (ago >= 12 * 60 * 60_000 && ago < 7 * 24 * 60 * 60_000) {
+ const day = (time: number) => {
+ const date = new Date(time);
+ return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / (24 * 60 * 60_000);
+ };
+ const days = day(now) - day(usedAt);
+ if (days >= 1) return format.format(-days, 'day');
+ }
+ for (const [unit, size] of UNITS) {
+ if (ago >= size) return format.format(-Math.floor(ago / size), unit);
+ }
+ return format.format(0, 'second');
+}
diff --git a/lib/desktop/types.ts b/lib/desktop/types.ts
index 467f918d1..356c40a00 100644
--- a/lib/desktop/types.ts
+++ b/lib/desktop/types.ts
@@ -80,7 +80,10 @@ export interface DesktopSystemTheme {
export type DesktopMenuState = Record;
-/** A native menu built from an HTML one (lib/desktop/native-menu.ts). */
+/**
+ * A native menu the shell can show. The page shows its own HTML menus in the desktop app
+ * too, so they have their icons and the app's key names; this stays for older pages.
+ */
export interface DesktopNativeMenuItem {
/** Handed back when this item is chosen. Left out of separators and submenus. */
id?: string;
@@ -116,6 +119,8 @@ export interface DesktopMenuBarEvent {
export interface DesktopMenuBarItem {
/** Its place in the app menu: handed back with its text when it's picked. */
key: string;
+ /** The line's command id (`message.reply`), or `role.`: the page draws its icon by it. Newer shells only. */
+ id?: string;
label: string;
type: 'normal' | 'checkbox' | 'radio' | 'separator' | 'submenu';
enabled: boolean;
@@ -190,8 +195,66 @@ export interface DesktopDialogsBridge {
defaultId?: number;
type?: 'none' | 'info' | 'warning' | 'question';
}) => Promise;
+ /**
+ * A short question in a window of the app's own, modal to this one and drawn like the
+ * in-page dialog (lib/desktop/dialog-window.ts). One at a time per page; the next waits.
+ * Absent on older shells.
+ */
+ show?: (request: DesktopDialogWindowRequest) => Promise;
+ /** Takes back a question asked with `show`, showing or waiting. */
+ cancel?: (id: string) => void;
}
+/** Plain text throughout: the shell sets textContent only. */
+export interface DesktopDialogWindowRequest {
+ /** The page's own name for it, for `cancel`. */
+ id: string;
+ title: string;
+ /** The text under the title, in runs; `bold` runs are drawn bold. */
+ message?: { text: string; bold?: boolean }[];
+ /** "From the plugin …": who is asking, when it isn't the app. Drawn under the title. */
+ source?: string;
+ /** The warning sign of a destructive confirm. */
+ icon?: 'warning';
+ /** In the order they stand, start to end. At most four. */
+ buttons: { label: string; variant?: 'primary' | 'secondary' | 'destructive' }[];
+ /** The button Enter takes and the focus starts on. */
+ defaultIndex?: number;
+ /** The ⋮ menu at the top end: a plugin's options. */
+ menu?: { label: string; items: { id: string; label: string; destructive?: boolean }[] };
+ theme?: DesktopDialogWindowTheme;
+ lang?: string;
+ dir?: 'ltr' | 'rtl';
+}
+
+export interface DesktopDialogWindowTheme {
+ dark?: boolean;
+ /** #rrggbb[aa] or rgb(a)(); anything else is dropped by the shell. */
+ colours?: Partial>;
+ font?: string;
+ fontSize?: number;
+ radius?: number;
+ radiusSmall?: number;
+}
+
+export type DesktopDialogWindowColour =
+ | 'background'
+ | 'foreground'
+ | 'muted'
+ | 'mutedForeground'
+ | 'border'
+ | 'input'
+ | 'primary'
+ | 'primaryForeground'
+ | 'destructive'
+ | 'destructiveForeground'
+ | 'accent'
+ | 'accentForeground'
+ | 'ring';
+
+/** A button by its index, a menu item by its id. Null: closed without an answer (Escape, Alt+F4, the page went). */
+export type DesktopDialogWindowAnswer = { button: number } | { menu: string } | null;
+
export interface DesktopClipboardBridge {
/** Puts a file on the clipboard, for pasting into a folder. False when that didn't work. */
copyFile: (name: string, data: ArrayBuffer) => Promise;
@@ -752,6 +815,39 @@ export interface DesktopDevToolsBridge {
onChange: (listener: (state: DesktopDevToolsState) => void) => () => void;
}
+/** One of the user's recently used files, as the Attach menu shows it. Nothing more of it reaches the page. */
+export interface DesktopRecentFile {
+ /** Opaque. `attach` takes it, from the window that listed it, until that window lists again. */
+ id: string;
+ name: string;
+ /** The folder it's in, for display. */
+ folder: string;
+ /** The whole path, for a tooltip. */
+ path: string;
+ /** When it was last used, in milliseconds since 1970. */
+ usedAt: number;
+ /** A small icon as a data: URL, when the OS gave one in time. */
+ icon?: string;
+}
+
+/** `gesture`: no click or key press just now. `policy`: RecentFilesInAttach is off. */
+export type DesktopRecentFilesResult =
+ | { ok: true; files: DesktopRecentFile[] }
+ | { ok: false; reason: 'policy' | 'locked' | 'gesture' };
+
+export type DesktopRecentFileAttachResult =
+ | { ok: true; file: DesktopOsFile }
+ | { ok: false; reason: 'policy' | 'locked' | 'gesture' | 'unknown' | 'missing' | 'too-large' | 'failed' };
+
+/**
+ * The files the OS says were used last, for the composer's Attach menu. Main wants a click
+ * or key press of its own for each call, reads only a file it just listed, and never logs.
+ */
+export interface DesktopRecentFilesBridge {
+ list: () => Promise;
+ attach: (id: string) => Promise;
+}
+
/** An attachment copied to a private folder and open in its default program. */
export interface DesktopEditSession {
id: string;
@@ -845,6 +941,223 @@ export interface DesktopEditBridge {
onChange: (listener: (sessions: DesktopEditSession[]) => void) => () => void;
}
+/*
+ * Files on this computer: folders kept the same as a Files folder, and on Windows the
+ * Files drive (Cloud Files API placeholders). The sync engine is the page's
+ * (lib/files-sync in the webmail): it holds the JMAP session and decides. Main only does
+ * what the page can't: the disk, the folder picker, the OS's sync root, and the
+ * callbacks Windows makes when someone opens a file that isn't on the disk yet.
+ *
+ * Paths here are always relative to a root, with `/` between parts, never `..`, never
+ * absolute. Main resolves them inside the root and refuses anything that leaves it,
+ * through a link or otherwise.
+ */
+
+/** A place on this computer kept the same as Files: a folder the user picked, or the drive. */
+export interface FilesRoot {
+ /** Main's id for it. Random, never a path. */
+ id: string;
+ kind: 'folder' | 'drive';
+ /** The page's local account id it belongs to. */
+ account: string;
+ /** Where it is on disk, to show and nothing else. */
+ path: string;
+ /** A folder: the Files folder it pairs with (null: the top of Files). The drive: null. */
+ remoteId: string | null;
+ /** What the page called the Files side when it was added, to show. */
+ remoteLabel: string;
+ paused: boolean;
+ createdAt: number;
+}
+
+/** One file or folder under a root, as it is on disk now. */
+export interface FilesLocalEntry {
+ /** Relative to the root, `/` between parts. */
+ path: string;
+ kind: 'file' | 'directory';
+ size: number;
+ mtimeMs: number;
+ /** The same across a rename on the same volume (file id, inode), to tell a move from a delete and a create. */
+ fileId: string;
+ /** The drive only: what the placeholder says. */
+ placeholder?: FilesPlaceholderState;
+}
+
+export interface FilesPlaceholderState {
+ /** The FileNode id written into it. Null for something made in Explorer that isn't a placeholder yet. */
+ identity: string | null;
+ /** Main or the page marked it in sync and nobody changed it since. */
+ inSync: boolean;
+ /** The content is on this disk. */
+ hydrated: boolean;
+ pin: 'pinned' | 'unpinned' | 'unspecified';
+}
+
+/** What the page expects a path to be, so main refuses to act on something that changed meanwhile. */
+export interface FilesExpect {
+ fileId: string;
+ size: number;
+ mtimeMs: number;
+}
+
+export type FilesError =
+ /** Not there. */
+ | 'missing'
+ /** Something is already at the target. */
+ | 'exists'
+ /** It changed since the page looked (`expect` didn't match). */
+ | 'changed'
+ /** Another program has it open. */
+ | 'busy'
+ | 'denied'
+ /** The path leaves the root, or goes through a link. */
+ | 'outside'
+ /** A name this file system can't hold. */
+ | 'name'
+ /** The disk is full. */
+ | 'full'
+ /** The organisation's policy says no. */
+ | 'policy'
+ /** No real click came with a call that needs one. */
+ | 'gesture'
+ /** The user closed the picker. */
+ | 'cancelled'
+ /** The folder is inside another root, holds one, or is a system folder. */
+ | 'overlap'
+ /** The root is paused, gone, or the app is locked. */
+ | 'inactive'
+ | 'unsupported'
+ | 'failed';
+
+export type FilesResult = { ok: true; value: T } | { ok: false; error: FilesError };
+
+/** Something on disk under a root changed. `paths: null`: too much at once, scan it all. */
+export interface FilesChangeEvent {
+ rootId: string;
+ paths: string[] | null;
+}
+
+/** Windows wants bytes of a file that isn't on the disk yet: someone opened it. */
+export interface FilesFetchRequest {
+ fetchId: string;
+ rootId: string;
+ /** The FileNode id in the placeholder. */
+ identity: string;
+ path: string;
+ /** What Windows asked for. Supplying from 0 to the end is always fine. */
+ offset: number;
+ length: number;
+ /** The size in the placeholder. */
+ total: number;
+}
+
+/** A remote file or folder the drive should show, before any content is fetched. */
+export interface FilesPlaceholder {
+ path: string;
+ kind: 'file' | 'directory';
+ size: number;
+ mtimeMs: number;
+ identity: string;
+}
+
+export interface FilesDriveLetterState {
+ /** In use now. */
+ letter: string | null;
+ /** The user's own choice, kept even while a policy overrides it. */
+ chosen: string | null;
+ /** `FilesDriveLetter` forces it (a letter, or `none`). */
+ locked: boolean;
+ /** Letters free now, D to Z. */
+ available: string[];
+}
+
+export interface FilesDriveState {
+ /** Windows 10 1809 or later with the helper loaded. */
+ supported: boolean;
+ /** `FilesDriveEnabled` is off. */
+ forcedOff: boolean;
+ /** Accounts the user turned the drive on for, whether or not it's registered right now. */
+ wanted: string[];
+ letter: FilesDriveLetterState;
+}
+
+/**
+ * What the main page takes once, in its first render (`files.claim()`), like `auth.claim`:
+ * a same-origin frame reaches the bridge through `parent`, and main can't tell its calls
+ * apart. Main also takes these calls only from the main window.
+ */
+export interface FilesControls {
+ roots: () => Promise;
+ /** Shows the OS folder picker. Needs a real click. */
+ addFolder: (request: { account: string; remoteId: string | null; remoteLabel: string }) => Promise>;
+ /** A folder: forgotten, its files stay. The drive: as `drive.disable(account, 'user')`. */
+ removeRoot: (rootId: string) => Promise;
+ setPaused: (rootId: string, paused: boolean) => Promise;
+ /** Everything under `under` (default: the whole root). Skips links and main's own temporary files. */
+ scan: (rootId: string, under?: string) => Promise>;
+ stat: (rootId: string, path: string) => Promise>;
+ /** A URL the page fetches once for the file's bytes (Range works). Refused for a drive file that isn't on the disk. */
+ openRead: (rootId: string, path: string) => Promise>;
+ /**
+ * Writing a file: chunks go to a temporary file next to it, `commitWrite` puts it in place
+ * if what's there is still `expect` (null: nothing may be there), and sets `mtimeMs`.
+ */
+ beginWrite: (rootId: string, path: string, options: { expect: FilesExpect | null; mtimeMs: number; size: number }) => Promise>;
+ writeChunk: (writeId: string, data: Uint8Array) => Promise>;
+ commitWrite: (writeId: string) => Promise>;
+ abortWrite: (writeId: string) => Promise;
+ mkdir: (rootId: string, path: string) => Promise>;
+ /** Never overwrites. A case-only rename works on a case-insensitive disk. */
+ move: (rootId: string, from: string, to: string, expect: FilesExpect | null) => Promise>;
+ /** A folder: to the OS's trash where it has one. Refused when it changed since `expect`. */
+ remove: (rootId: string, path: string, expect: FilesExpect | null) => Promise>;
+ onChange: (listener: (event: FilesChangeEvent) => void) => () => void;
+ /** The engine's own record of a root (what both sides looked like at the last sync). */
+ loadState: (rootId: string) => Promise;
+ saveState: (rootId: string, state: string) => Promise;
+ /** Opens Explorer, Finder or the file manager on it. */
+ showInFolder: (rootId: string, path: string) => Promise;
+ /** Windows only. Absent elsewhere. */
+ drive?: FilesDriveControls;
+}
+
+export interface FilesDriveControls {
+ state: () => Promise;
+ onStateChange: (listener: (state: FilesDriveState) => void) => () => void;
+ /**
+ * Registers and connects the account's sync root. Needs a real click unless the user
+ * turned it on before (a sign-in brings it back). `label` is the address, shown when
+ * there are several accounts.
+ */
+ enable: (account: string, label: string) => Promise>;
+ /**
+ * `user`: turned off. `signed-out`: the account signed out, and comes back at the next
+ * sign-in. `wipe` and `refused`: a wipe or a refused login. Each unregisters the sync root
+ * and deletes it with everything in it; only `signed-out` keeps the wish.
+ */
+ disable: (account: string, reason: 'user' | 'signed-out' | 'wipe' | 'refused') => Promise;
+ /** New placeholders, parents first. One answer per entry. */
+ place: (rootId: string, entries: FilesPlaceholder[]) => Promise>;
+ /**
+ * New metadata from the server for a placeholder that is in sync. `dehydrate`: the
+ * content changed, drop the copy on disk (a pinned one is fetched again). Refused
+ * with `changed` when someone edited it here meanwhile.
+ */
+ update: (rootId: string, path: string, meta: { size: number; mtimeMs: number; identity: string; dehydrate: boolean }, expect: FilesExpect | null) => Promise>;
+ /** After an upload: makes it a placeholder with this identity if it isn't one, and marks it in sync. */
+ markInSync: (rootId: string, path: string, identity: string, expect: FilesExpect) => Promise>;
+ onFetch: (listener: (request: FilesFetchRequest) => void) => () => void;
+ onFetchCancel: (listener: (fetchId: string) => void) => () => void;
+ /** Bytes for a fetch, in order from `offset`. False when Windows no longer wants them. */
+ supply: (fetchId: string, offset: number, data: Uint8Array) => Promise;
+ fail: (fetchId: string, error: 'offline' | 'missing' | 'failed') => void;
+ setLetter: (letter: string | null) => Promise>;
+}
+
+export interface FilesBridge {
+ claim: () => FilesControls | null;
+}
+
export interface BulwarkDesktopBridge {
version: number;
platform: 'win32' | 'darwin' | 'linux';
@@ -874,6 +1187,10 @@ export interface BulwarkDesktopBridge {
edit?: DesktopEditBridge;
/** Absent on older shells. */
devTools?: DesktopDevToolsBridge;
+ /** Files on this computer. Absent on older shells. */
+ files?: FilesBridge;
+ /** Absent on older shells. */
+ recentFiles?: DesktopRecentFilesBridge;
}
declare global {
diff --git a/lib/email-action-toast.ts b/lib/email-action-toast.ts
index 02d987771..a841fb5e4 100644
--- a/lib/email-action-toast.ts
+++ b/lib/email-action-toast.ts
@@ -159,6 +159,23 @@ export async function setSelectionTagWithUndo(
return done;
}
+/**
+ * Stars the selection or takes the star off (batchSetStarred; rejects when a write
+ * fails), with a toast that offers Undo. The messages already as asked are not put back.
+ */
+export async function setSelectionStarredWithUndo(
+ client: IJMAPClient,
+ starred: boolean,
+ words: { success: string; error: string; labels: UndoLabels },
+): Promise {
+ const points = keywordRestorePoints(resolveSelectedEmails(useEmailStore.getState()), ["$flagged"], { $flagged: starred });
+ await runBatchEmailAction(() => useEmailStore.getState().batchSetStarred(client, starred), {
+ success: words.success,
+ error: words.error,
+ undo: undoKeywordAction(client, points, words.labels),
+ });
+}
+
/**
* The toast's Undo for a reversible move (delete to Trash, archive, move,
* report spam, remove from folder): puts the messages back where `batches`
diff --git a/lib/files-sync/__tests__/engine.test.ts b/lib/files-sync/__tests__/engine.test.ts
new file mode 100644
index 000000000..381f435a2
--- /dev/null
+++ b/lib/files-sync/__tests__/engine.test.ts
@@ -0,0 +1,627 @@
+// @vitest-environment node
+/**
+ * The sync engine against an in-memory disk (main's answers) and a fake FileNode server
+ * (Stalwart's). Each test changes one side or both and checks both sides afterwards.
+ */
+import { describe, expect, it } from 'vitest';
+import type { FilesRoot } from '@/lib/desktop/types';
+import { FilesSyncEngine, type EngineTiming } from '../engine';
+import { namingFor } from '../names';
+import { parseRecord } from '../state';
+import { FakeDisk, str, text } from './helpers/fake-disk';
+import { FakeServer, type FakeServerOptions } from './helpers/fake-server';
+
+const FAST: Partial = { localDelayMs: 0, remoteDelayMs: 0, pollMs: 1e9, rescanMs: 1e9, retryMs: [1e9], soonMs: 5, fetchWaitMs: 2000 };
+
+interface Setup {
+ server: FakeServer;
+ disk: FakeDisk;
+ engine: FilesSyncEngine;
+ root: FilesRoot;
+ sync: () => Promise;
+ kinds: () => string[];
+}
+
+async function setup(options: { server?: FakeServerOptions; drive?: boolean; remoteFolder?: string | null; platform?: string; seed?: (server: FakeServer, disk: FakeDisk, rootId: string) => void } = {}): Promise {
+ const server = new FakeServer(options.server);
+ const platform = options.platform ?? 'win32';
+ const disk = new FakeDisk({ caseInsensitive: platform !== 'linux', drive: options.drive });
+ let remoteId: string | null = null;
+ if (options.remoteFolder !== null && !options.drive) remoteId = server.folder(options.remoteFolder ?? 'Sync').id;
+ const root = disk.addRoot({ id: 'r1', account: 'a1', kind: options.drive ? 'drive' : 'folder', remoteId });
+ options.seed?.(server, disk, root.id);
+ const engine = new FilesSyncEngine({ controls: disk, naming: namingFor(platform), device: 'Laptop', readUrl: disk.readUrl, timing: FAST, now: () => disk.clock });
+ engine.start();
+ engine.setAccount('a1', server.remote());
+ const sync = async () => {
+ await engine.refreshRoots();
+ engine.syncNow();
+ await engine.settled();
+ };
+ await sync();
+ return { server, disk, engine, root, sync, kinds: () => engine.activity.map((entry) => `${entry.kind} ${entry.path}${entry.detail ? ` (${entry.detail})` : ''}`).reverse() };
+}
+
+/** What's under the root's Files folder, as paths relative to it. */
+function remoteUnder(server: FakeServer, folder = 'Sync'): string[] {
+ return server.listing().filter((path) => path.startsWith(`${folder}/`)).map((path) => path.slice(folder.length + 1)).filter(Boolean);
+}
+
+describe('first sync', () => {
+ it('puts both sides together without deleting anything', async () => {
+ const { server, disk } = await setup({
+ seed: (s, d, rootId) => {
+ const sync = s.find('Sync')!;
+ const docs = s.folder('Docs', sync.id);
+ s.file('a.txt', docs.id, 'remote a');
+ s.file('top.txt', sync.id, 'top');
+ d.write(rootId, 'notes.txt', 'local notes');
+ d.write(rootId, 'Pics/p.png', 'png');
+ },
+ });
+ expect(disk.listing('r1')).toEqual(['Docs/', 'Docs/a.txt', 'Pics/', 'Pics/p.png', 'notes.txt', 'top.txt']);
+ expect(remoteUnder(server)).toEqual(['Docs/', 'Docs/a.txt', 'Pics/', 'Pics/p.png', 'notes.txt', 'top.txt']);
+ expect(disk.read('r1', 'Docs/a.txt')).toBe('remote a');
+ expect(server.content(server.find('Sync/notes.txt')!.id)).toBe('local notes');
+ expect(disk.trashed).toEqual([]);
+ const record = parseRecord(disk.states.get('r1') ?? null, server.find('Sync')!.id);
+ expect(record.items.map((item) => item.path).sort()).toEqual(['Docs', 'Docs/a.txt', 'Pics', 'Pics/p.png', 'notes.txt', 'top.txt']);
+ });
+
+ it('takes the same file on both sides as one, and keeps both when they differ', async () => {
+ const { server, disk, kinds } = await setup({
+ seed: (s, d, rootId) => {
+ const sync = s.find('Sync')!;
+ s.file('same.txt', sync.id, 'identical');
+ s.file('differ.txt', sync.id, 'from files');
+ d.write(rootId, 'same.txt', 'identical');
+ d.write(rootId, 'differ.txt', 'from here');
+ },
+ });
+ expect(server.uploads).toEqual([9]);
+ expect(disk.read('r1', 'differ.txt')).toBe('from files');
+ const copy = disk.listing('r1').find((path) => path.startsWith('differ (conflict, Laptop, '));
+ expect(copy).toBeDefined();
+ expect(disk.read('r1', copy!)).toBe('from here');
+ expect(server.content(server.find(`Sync/${copy}`)!.id)).toBe('from here');
+ expect(kinds()).toContain(`conflict differ.txt (${copy})`);
+ });
+
+ it('syncs the top of Files, without the trash, when the pair names no folder', async () => {
+ const s = await setup({
+ remoteFolder: null,
+ seed: (server) => {
+ server.file('root.txt', null, 'at the top');
+ server.file('old.txt', server.folder('.Trash').id, 'deleted');
+ },
+ });
+ expect(s.disk.listing('r1')).toEqual(['root.txt']);
+ s.disk.write('r1', 'up.txt', 'new');
+ await s.sync();
+ expect(s.server.listing()).toEqual(['root.txt', 'up.txt']);
+ });
+});
+
+describe('files the computer makes for itself', () => {
+ it('never uploads them', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { disk.write(rootId, 'desktop.ini', 'x'); disk.write(rootId, 'Docs/~$report.docx', 'lock'); disk.write(rootId, 'Docs/report.docx', 'r'); } });
+ expect(remoteUnder(s.server)).toEqual(['Docs/', 'Docs/report.docx']);
+ });
+});
+
+describe('renames and moves', () => {
+ it('sends a rename and a move made here, without uploading again', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { disk.write(rootId, 'a.txt', 'aaa'); disk.mkdirUser(rootId, 'Folder'); } });
+ const id = s.server.find('Sync/a.txt')!.id;
+ const uploads = s.server.uploads.length;
+ s.disk.moveUser('r1', 'a.txt', 'Folder/b.txt');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['Folder/', 'Folder/b.txt']);
+ expect(s.server.find('Sync/Folder/b.txt')!.id).toBe(id);
+ expect(s.server.uploads.length).toBe(uploads);
+ expect(s.kinds()).toContain('moved Folder/b.txt (a.txt)');
+ });
+
+ it('moves a file here when it moved in Files, keeping the same file', async () => {
+ const s = await setup({ seed: (server) => { const sync = server.find('Sync')!; server.folder('Other', sync.id); server.file('x.txt', sync.id, 'xx'); } });
+ const fileId = s.disk.node('r1', 'x.txt').fileId;
+ const downloads = s.server.downloads.length;
+ s.server.rename(s.server.find('Sync/x.txt')!.id, 'y.txt', s.server.find('Sync/Other')!.id);
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['Other/', 'Other/y.txt']);
+ expect(s.disk.node('r1', 'Other/y.txt').fileId).toBe(fileId);
+ expect(s.server.downloads.length).toBe(downloads);
+ });
+
+ it('moves a whole folder either way with what is in it', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { disk.write(rootId, 'A/one.txt', '1'); disk.write(rootId, 'A/B/two.txt', '2'); } });
+ s.disk.moveUser('r1', 'A', 'Renamed');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['Renamed/', 'Renamed/B/', 'Renamed/B/two.txt', 'Renamed/one.txt']);
+ s.server.rename(s.server.find('Sync/Renamed')!.id, 'Back');
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['Back/', 'Back/B/', 'Back/B/two.txt', 'Back/one.txt']);
+ expect(s.disk.trashed).toEqual([]);
+ });
+
+ it('lets the place in Files win when both sides renamed the same file', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'doc.txt', 'd') });
+ s.disk.moveUser('r1', 'doc.txt', 'mine.txt');
+ s.server.rename(s.server.find('Sync/doc.txt')!.id, 'theirs.txt');
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['theirs.txt']);
+ expect(remoteUnder(s.server)).toEqual(['theirs.txt']);
+ });
+
+ it('does case-only renames both ways', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'readme.txt', 'r') });
+ s.disk.moveUser('r1', 'readme.txt', 'README.txt');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['README.txt']);
+ s.server.rename(s.server.find('Sync/README.txt')!.id, 'ReadMe.txt');
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['ReadMe.txt']);
+ expect(s.server.uploads.length).toBe(1);
+ });
+});
+
+describe('conflicts', () => {
+ it('keeps both versions when both sides changed a file', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'report.txt', 'v1') });
+ const id = s.server.find('Sync/report.txt')!.id;
+ s.disk.write('r1', 'report.txt', 'mine, longer');
+ s.server.edit(id, 'theirs');
+ await s.sync();
+ expect(s.disk.read('r1', 'report.txt')).toBe('theirs');
+ expect(s.server.content(id)).toBe('theirs');
+ const copy = s.disk.listing('r1').find((path) => path.startsWith('report (conflict, Laptop, '))!;
+ expect(copy).toMatch(/^report \(conflict, Laptop, \d{4}-\d\d-\d\d \d\d\.\d\d\)\.txt$/);
+ expect(s.disk.read('r1', copy)).toBe('mine, longer');
+ expect(s.server.content(s.server.find(`Sync/${copy}`)!.id)).toBe('mine, longer');
+ expect(s.engine.activity.some((entry) => entry.kind === 'conflict' && entry.detail === copy)).toBe(true);
+ });
+
+ it('brings back a file deleted here that was changed in Files', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'keep.txt', 'v1') });
+ const id = s.server.find('Sync/keep.txt')!.id;
+ s.disk.deleteUser('r1', 'keep.txt');
+ s.server.edit(id, 'edited elsewhere');
+ await s.sync();
+ expect(s.disk.read('r1', 'keep.txt')).toBe('edited elsewhere');
+ expect(s.server.find('Sync/keep.txt')!.id).toBe(id);
+ });
+
+ it('uploads again a file changed here that was deleted in Files', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'mine.txt', 'v1') });
+ s.server.destroyTree(s.server.find('Sync/mine.txt')!.id);
+ s.disk.write('r1', 'mine.txt', 'v2 here');
+ await s.sync();
+ expect(s.server.content(s.server.find('Sync/mine.txt')!.id)).toBe('v2 here');
+ expect(s.disk.read('r1', 'mine.txt')).toBe('v2 here');
+ });
+
+ it('keeps a folder deleted in Files when something new was put in it here', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'F/old.txt', 'old') });
+ s.server.destroyTree(s.server.find('Sync/F')!.id);
+ s.disk.write('r1', 'F/new.txt', 'new');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['F/', 'F/new.txt', 'F/old.txt']);
+ expect(s.disk.trashed).toEqual([]);
+ });
+});
+
+describe('deletes', () => {
+ it('puts a file deleted here into the Files trash', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { disk.write(rootId, 'gone.txt', 'g'); disk.write(rootId, 'stay.txt', 's'); } });
+ const id = s.server.find('Sync/gone.txt')!.id;
+ s.disk.deleteUser('r1', 'gone.txt');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['stay.txt']);
+ const trashed = s.server.listing(true).find((path) => path.endsWith('/gone.txt'))!;
+ expect(trashed).toMatch(new RegExp(`^\\.Trash/\\d+~${s.server.find('Sync')!.id}/gone\\.txt$`));
+ expect(s.server.nodes.has(id)).toBe(true);
+ expect(s.kinds()).toContain('trashed gone.txt');
+ });
+
+ it('puts a file deleted in Files into the computer trash', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { disk.write(rootId, 'x.txt', 'x'); disk.write(rootId, 'y.txt', 'y'); } });
+ s.server.destroyTree(s.server.find('Sync/x.txt')!.id);
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['y.txt']);
+ expect(s.disk.trashed).toEqual(['x.txt']);
+ });
+
+ function many(server: FakeServer, disk: FakeDisk, rootId: string): void {
+ void server;
+ for (let i = 0; i < 60; i += 1) disk.write(rootId, `bulk/f${i}.txt`, `file ${i}`);
+ disk.write(rootId, 'other.txt', 'o');
+ }
+
+ it('asks before many deletes made here, and brings them back on no', async () => {
+ const s = await setup({ seed: many });
+ s.disk.deleteUser('r1', 'bulk');
+ await s.sync();
+ expect(s.engine.status().r1).toMatchObject({ state: 'confirm-delete', massDelete: { count: 61, side: 'remote' } });
+ expect(remoteUnder(s.server)).toContain('bulk/f0.txt');
+ expect(s.kinds()).toContain('mass-delete (61)');
+ s.engine.confirmMassDelete('r1', false);
+ await s.engine.settled();
+ expect(s.disk.listing('r1').filter((path) => path.startsWith('bulk/')).length).toBe(61);
+ expect(s.engine.status().r1.state).toBe('idle');
+ });
+
+ it('deletes them on yes', async () => {
+ const s = await setup({ seed: many });
+ s.disk.deleteUser('r1', 'bulk');
+ await s.sync();
+ s.engine.confirmMassDelete('r1', true);
+ await s.engine.settled();
+ expect(remoteUnder(s.server)).toEqual(['other.txt']);
+ expect(s.server.listing(true).filter((path) => path.startsWith('.Trash/')).length).toBe(63);
+ });
+
+ it('asks before many deletes from Files, and uploads them again on no', async () => {
+ const s = await setup({ seed: many });
+ s.server.destroyTree(s.server.find('Sync/bulk')!.id);
+ await s.sync();
+ expect(s.engine.status().r1).toMatchObject({ state: 'confirm-delete', massDelete: { count: 61, side: 'local' } });
+ expect(s.disk.trashed).toEqual([]);
+ s.engine.confirmMassDelete('r1', false);
+ await s.engine.settled();
+ expect(remoteUnder(s.server).filter((path) => path.startsWith('bulk/')).length).toBe(61);
+ });
+
+ it('removes them here on yes', async () => {
+ const s = await setup({ seed: many });
+ s.server.destroyTree(s.server.find('Sync/bulk')!.id);
+ await s.sync();
+ s.engine.confirmMassDelete('r1', true);
+ await s.engine.settled();
+ expect(s.disk.listing('r1')).toEqual(['other.txt']);
+ expect(s.disk.trashed).toEqual(['bulk']);
+ });
+
+ it('asks when more than half of a root goes at once', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => { for (let i = 0; i < 12; i += 1) disk.write(rootId, `f${i}.txt`, `${i}`); } });
+ for (let i = 0; i < 7; i += 1) s.disk.deleteUser('r1', `f${i}.txt`);
+ await s.sync();
+ expect(s.engine.status().r1.state).toBe('confirm-delete');
+ });
+});
+
+describe('names the disk cannot hold', () => {
+ it('shows them under another name here and never renames them in Files', async () => {
+ const s = await setup({
+ seed: (server) => {
+ const sync = server.find('Sync')!;
+ server.file('a:b?.txt', sync.id, 'colon');
+ server.file('CON.txt', sync.id, 'device');
+ server.file('trail.', sync.id, 'dot');
+ server.file('Report.txt', sync.id, 'upper');
+ server.file('report.txt', sync.id, 'lower');
+ },
+ });
+ expect(s.disk.listing('r1')).toEqual(['CON_.txt', 'Report.txt', 'a：b？.txt', 'report (2).txt', 'trail._']);
+ expect(s.kinds()).toEqual(expect.arrayContaining(['renamed-for-disk a：b？.txt (a：b？.txt)', 'renamed-for-disk report (2).txt (report (2).txt)']));
+ const id = s.server.find('Sync/a:b?.txt')!.id;
+ // An edit here goes to the same node, under the name it has in Files.
+ s.disk.write('r1', 'a：b？.txt', 'edited');
+ s.disk.write('r1', 'report (2).txt', 'lower edited');
+ await s.sync();
+ expect(s.server.content(id)).toBe('edited');
+ expect(s.server.content(s.server.find('Sync/report.txt')!.id)).toBe('lower edited');
+ expect(remoteUnder(s.server)).toEqual(['CON.txt', 'Report.txt', 'a:b?.txt', 'report.txt', 'trail.']);
+ // Another pass changes nothing on either side.
+ const sets = s.server.sets.length;
+ await s.sync();
+ expect(s.server.sets.length).toBe(sets);
+ });
+
+ it('keeps the name in Files when the disk name is renamed back and forth', async () => {
+ const s = await setup({ seed: (server) => server.file('q?.txt', server.find('Sync')!.id, 'q') });
+ s.server.rename(s.server.find('Sync/q?.txt')!.id, 'r?.txt');
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['r？.txt']);
+ expect(remoteUnder(s.server)).toEqual(['r?.txt']);
+ });
+
+ it('leaves names alone on a disk that takes them', async () => {
+ const s = await setup({ platform: 'linux', seed: (server) => { server.file('a:b.txt', server.find('Sync')!.id, '1'); server.file('A:b.txt', server.find('Sync')!.id, '2'); } });
+ expect(s.disk.listing('r1')).toEqual(['A:b.txt', 'a:b.txt']);
+ });
+});
+
+describe('reading and uploading', () => {
+ it('carries on when a file is renamed while it uploads', async () => {
+ const s = await setup();
+ s.disk.write('r1', 'big.txt', 'content');
+ s.server.beforeRequest = () => {
+ if (s.server.uploads.length === 1 && s.disk.has('r1', 'big.txt')) s.disk.moveUser('r1', 'big.txt', 'renamed.txt');
+ };
+ await s.sync();
+ s.server.beforeRequest = null;
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['renamed.txt']);
+ expect(s.server.uploads.length).toBe(1);
+ expect(s.disk.listing('r1')).toEqual(['renamed.txt']);
+ });
+
+ it('does not upload a file that changed while it was read, and uploads it once it holds still', async () => {
+ const s = await setup();
+ s.disk.write('r1', 'live.log', 'first');
+ let writes = 0;
+ s.disk.onRead = (rootId, path) => {
+ if (writes < 1) {
+ writes += 1;
+ s.disk.write(rootId, path, 'first and more');
+ }
+ };
+ await s.sync();
+ expect(s.server.uploads).toEqual([14]);
+ expect(s.server.content(s.server.find('Sync/live.log')!.id)).toBe('first and more');
+ });
+
+ it('keeps a file over the upload limit here, says so once, and uploads it once it fits', async () => {
+ const s = await setup({ server: { maxSizeUpload: 10 } });
+ s.disk.write('r1', 'huge.bin', 'x'.repeat(20));
+ await s.sync();
+ await s.sync();
+ expect(s.server.uploads).toEqual([]);
+ expect(s.engine.activity.filter((entry) => entry.kind === 'too-large')).toEqual([expect.objectContaining({ path: 'huge.bin', detail: '10', messageKey: 'errors.too_large' })]);
+ s.disk.write('r1', 'huge.bin', 'small');
+ await s.sync();
+ expect(s.server.content(s.server.find('Sync/huge.bin')!.id)).toBe('small');
+ });
+
+ it('writes a downloaded file in pieces and leaves nothing half written', async () => {
+ const big = new Uint8Array(2_600_000).map((_, i) => i % 251);
+ const s = await setup({ seed: (server) => server.file('big.bin', server.find('Sync')!.id, big) });
+ const node = s.disk.node('r1', 'big.bin');
+ expect(node.data?.length).toBe(big.length);
+ expect(node.data?.[2_599_999]).toBe(2_599_999 % 251);
+ expect(s.disk.openWrites).toBe(0);
+ });
+});
+
+describe('offline', () => {
+ it('keeps the changes while the server is away and sends them when it is back', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'a.txt', 'v1') });
+ s.server.offline = true;
+ s.disk.write('r1', 'a.txt', 'v2');
+ s.disk.write('r1', 'b.txt', 'new');
+ await s.sync();
+ expect(s.engine.status().r1.state).toBe('offline');
+ expect(s.engine.activity[0]).toMatchObject({ kind: 'waiting', messageKey: 'errors.offline' });
+ await s.sync();
+ expect(s.engine.activity.filter((entry) => entry.kind === 'waiting')).toHaveLength(1);
+ s.server.offline = false;
+ s.engine.retryNow();
+ await s.engine.settled();
+ expect(s.engine.status().r1.state).toBe('idle');
+ expect(s.server.content(s.server.find('Sync/a.txt')!.id)).toBe('v2');
+ expect(s.server.content(s.server.find('Sync/b.txt')!.id)).toBe('new');
+ });
+
+ it('keeps the record when an upload breaks off, and finishes it later', async () => {
+ const s = await setup();
+ s.disk.write('r1', 'u.txt', 'up');
+ s.server.failUploads = 1;
+ await s.sync();
+ expect(s.engine.status().r1.state).toBe('offline');
+ s.engine.retryNow();
+ await s.engine.settled();
+ expect(remoteUnder(s.server)).toEqual(['u.txt']);
+ });
+});
+
+describe('changes in Files', () => {
+ it('reads FileNode/changes, and lists everything again only when the server cannot say', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'a.txt', 'a') });
+ const fullListings = () => s.server.calls.filter(([name, args]) => name === 'FileNode/get' && (args as { ids: unknown }).ids === null).length;
+ const before = fullListings();
+ s.server.file('b.txt', s.server.find('Sync')!.id, 'b');
+ s.engine.remoteChanged('a1');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ await s.engine.settled();
+ expect(s.disk.read('r1', 'b.txt')).toBe('b');
+ expect(fullListings()).toBe(before);
+ s.server.file('c.txt', s.server.find('Sync')!.id, 'c');
+ s.server.account().coll.truncatedBelow = s.server.account().coll.log.length;
+ s.engine.remoteChanged('a1');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ await s.engine.settled();
+ expect(s.disk.read('r1', 'c.txt')).toBe('c');
+ expect(fullListings()).toBe(before + 1);
+ });
+
+ it('ignores changes outside the pair', async () => {
+ const s = await setup();
+ const passes = s.server.calls.length;
+ s.server.file('elsewhere.txt', null, 'x');
+ s.engine.remoteChanged('a1');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ await s.engine.settled();
+ // One /changes and one get of the new node, and no pass of the root.
+ expect(s.server.calls.length - passes).toBe(2);
+ });
+
+ it('says so when the paired folder is gone from Files, and deletes nothing', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'a.txt', 'a') });
+ s.server.destroyTree(s.server.find('Sync')!.id);
+ await s.sync();
+ expect(s.engine.status().r1).toMatchObject({ state: 'error', errorKey: 'errors.not_found' });
+ expect(s.disk.listing('r1')).toEqual(['a.txt']);
+ });
+});
+
+describe('pause', () => {
+ it('does nothing while paused and catches up on resume', async () => {
+ const s = await setup();
+ await s.engine.setPaused('r1', true);
+ s.disk.write('r1', 'while-paused.txt', 'p');
+ await s.sync();
+ expect(s.engine.status().r1.state).toBe('paused');
+ expect(remoteUnder(s.server)).toEqual([]);
+ await s.engine.setPaused('r1', false);
+ await s.engine.settled();
+ expect(remoteUnder(s.server)).toEqual(['while-paused.txt']);
+ });
+
+ it('runs nothing while the app is locked, and loses no record', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'a.txt', 'a') });
+ const record = s.disk.states.get('r1');
+ s.disk.locked = true;
+ await s.sync();
+ expect(s.disk.states.get('r1')).toBe(record);
+ s.disk.locked = false;
+ s.disk.emit('r1', null);
+ await s.engine.settled();
+ s.disk.write('r1', 'b.txt', 'b');
+ await s.sync();
+ expect(remoteUnder(s.server)).toEqual(['a.txt', 'b.txt']);
+ });
+});
+
+describe('the drive', () => {
+ async function drive(seed?: (server: FakeServer) => void) {
+ return setup({ drive: true, seed: (server) => seed?.(server) });
+ }
+
+ it('places every node of the account but the trash, and downloads nothing', async () => {
+ const s = await drive((server) => {
+ const docs = server.folder('Docs');
+ server.file('a.txt', docs.id, 'aaa');
+ server.file('top.txt', null, 'top');
+ const trash = server.folder('.Trash');
+ server.file('old.txt', trash.id, 'old');
+ });
+ expect(s.disk.listing('r1')).toEqual(['Docs/', 'Docs/a.txt', 'top.txt']);
+ expect(s.disk.node('r1', 'Docs/a.txt').placeholder).toMatchObject({ identity: s.server.find('Docs/a.txt')!.id, hydrated: false, inSync: true });
+ expect(s.server.downloads).toEqual([]);
+ expect(s.engine.items('a1')[s.server.find('Docs/a.txt')!.id]).toBe('online-only');
+ });
+
+ it('streams a file opened in Explorer from where Windows asked, to the end', async () => {
+ const content = new Uint8Array(3 * 1024 * 1024).map((_, i) => i % 199);
+ const s = await drive((server) => server.file('big.bin', null, content));
+ const request = s.disk.requestFetch('r1', 'big.bin', 10_000);
+ expect(request.offset).toBe(8192);
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ const got = s.disk.suppliedBytes(request.fetchId);
+ expect(got.length).toBe(content.length - 8192);
+ expect(got[0]).toBe(content[8192]);
+ expect(got.at(-1)).toBe(content.at(-1));
+ expect(s.disk.fetchFailed.size).toBe(0);
+ });
+
+ it('stops streaming when the fetch is cancelled, and fails one it cannot answer', async () => {
+ const content = new Uint8Array(4 * 1024 * 1024);
+ const s = await drive((server) => { server.file('big.bin', null, content); server.file('gone.txt', null, 'g'); });
+ s.server.partBytes = 64 * 1024;
+ s.disk.refuseSupplyAfter = 1024 * 1024;
+ const request = s.disk.requestFetch('r1', 'big.bin');
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ expect(s.disk.suppliedBytes(request.fetchId).length).toBe(1024 * 1024);
+ // Cancelled while the download runs: the rest isn't fetched, and nothing is failed.
+ s.disk.refuseSupplyAfter = null;
+ let second = '';
+ let parts = 0;
+ s.server.onPart = () => {
+ parts += 1;
+ if (parts === 2) s.disk.cancelFetch(second);
+ };
+ second = s.disk.requestFetch('r1', 'big.bin').fetchId;
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ s.server.onPart = null;
+ expect(parts).toBeLessThan(5);
+ expect(s.disk.suppliedBytes(second).length).toBeLessThan(content.length);
+ expect(s.disk.fetchFailed.has(second)).toBe(false);
+ // Deleted in Files meanwhile.
+ s.server.destroyTree(s.server.find('gone.txt')!.id);
+ const third = s.disk.requestFetch('r1', 'gone.txt');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ expect(s.disk.fetchFailed.get(third.fetchId)).toBe('missing');
+ s.server.offline = true;
+ s.disk.supplied.clear();
+ });
+
+ it('updates a placeholder when the file changed in Files', async () => {
+ const s = await drive((server) => server.file('a.txt', null, 'v1'));
+ s.server.edit(s.server.find('a.txt')!.id, 'version two');
+ await s.sync();
+ expect(s.disk.driveCalls.filter((call) => call.call === 'update')).toEqual([{ call: 'update', args: ['r1', 'a.txt', true] }]);
+ expect(s.disk.node('r1', 'a.txt')).toMatchObject({ size: 11, placeholder: { hydrated: false, inSync: true } });
+ });
+
+ it('uploads a file made in Explorer and marks it in sync', async () => {
+ const s = await drive();
+ s.disk.write('r1', 'new.txt', 'from explorer');
+ await s.sync();
+ const node = s.server.find('new.txt')!;
+ expect(s.server.content(node.id)).toBe('from explorer');
+ expect(s.disk.node('r1', 'new.txt').placeholder).toMatchObject({ identity: node.id, inSync: true });
+ });
+
+ it('uploads a file made in Explorer inside a placed folder, next to a file opened there', async () => {
+ const s = await drive((server) => { const docs = server.folder('Docs'); server.file('seen.txt', docs.id, 'seen'); });
+ const request = s.disk.requestFetch('r1', 'Docs/seen.txt');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ expect(s.disk.fetchFailed.has(request.fetchId)).toBe(false);
+ s.disk.write('r1', 'Docs/new.txt', 'from explorer');
+ await s.sync();
+ const node = s.server.find('Docs/new.txt');
+ expect(node && s.server.content(node.id)).toBe('from explorer');
+ });
+
+ it('takes a save over a placeholder as an edit here', async () => {
+ const s = await drive((server) => server.file('doc.txt', null, 'v1'));
+ const id = s.server.find('doc.txt')!.id;
+ s.disk.write('r1', 'doc.txt', 'saved over');
+ await s.sync();
+ expect(s.server.content(id)).toBe('saved over');
+ expect(s.disk.node('r1', 'doc.txt').placeholder).toMatchObject({ identity: id, inSync: true });
+ });
+
+ it('keeps both when a file edited here also changed in Files', async () => {
+ const s = await drive((server) => server.file('doc.txt', null, 'v1'));
+ const id = s.server.find('doc.txt')!.id;
+ s.disk.write('r1', 'doc.txt', 'here');
+ s.server.edit(id, 'there');
+ await s.sync();
+ const copy = s.disk.listing('r1').find((path) => path.includes('(conflict, Laptop,'))!;
+ expect(s.server.content(id)).toBe('there');
+ expect(s.disk.node('r1', 'doc.txt').placeholder).toMatchObject({ identity: id, hydrated: false });
+ expect(s.server.content(s.server.find(copy)!.id)).toBe('here');
+ });
+
+ it('finds a placeholder moved in Explorer by its identity', async () => {
+ const s = await drive((server) => { server.folder('A'); server.file('f.txt', null, 'f'); });
+ const id = s.server.find('f.txt')!.id;
+ s.disk.moveUser('r1', 'f.txt', 'A/g.txt');
+ await s.sync();
+ expect(s.server.find('A/g.txt')!.id).toBe(id);
+ expect(s.server.uploads).toEqual([]);
+ });
+
+ it('starts afresh when its folder came back empty', async () => {
+ const s = await drive((server) => server.file('a.txt', null, 'a'));
+ s.disk.trees.set('r1', new Map());
+ await s.sync();
+ expect(s.disk.listing('r1')).toEqual(['a.txt']);
+ expect(s.server.listing()).toEqual(['a.txt']);
+ });
+});
+
+describe('coverage', () => {
+ it('maps a node to its root and path', async () => {
+ const s = await setup({ seed: (server, disk, rootId) => disk.write(rootId, 'Docs/a.txt', 'a') });
+ const id = s.server.find('Sync/Docs/a.txt')!.id;
+ expect(s.engine.coverage('a1', id)).toEqual({ rootId: 'r1', kind: 'folder', path: 'Docs/a.txt' });
+ expect(s.engine.coverage('a1', s.server.find('Sync')!.id)).toEqual({ rootId: 'r1', kind: 'folder', path: '' });
+ expect(s.engine.coverage('a2', id)).toBeNull();
+ expect(s.engine.items('a1')[id]).toBe('synced');
+ });
+});
+
+void str;
+void text;
diff --git a/lib/files-sync/__tests__/helpers/fake-disk.ts b/lib/files-sync/__tests__/helpers/fake-disk.ts
new file mode 100644
index 000000000..23422e8ee
--- /dev/null
+++ b/lib/files-sync/__tests__/helpers/fake-disk.ts
@@ -0,0 +1,532 @@
+/**
+ * The desktop app's disk side of Files on this computer, in memory, answering as main does
+ * (desktop src/main/files/disk.ts, drive-controller.ts, features/files-folders.ts):
+ * - `expect` is checked on write, move and remove; null on a write means nothing may be there;
+ * - a move never overwrites, and a case-only rename works on a case-insensitive disk;
+ * - a folder root's remove goes to the trash, the drive's deletes;
+ * - `openRead` refuses folders and drive files whose content isn't here;
+ * - while locked, `roots()` is empty, everything else `inactive`, and the state calls reject;
+ * - the drive: placeholders with an identity, `update` refused with `changed` once someone wrote
+ * over one, `markInSync` making a file a placeholder again, fetches answered by `supply`.
+ */
+
+import type {
+ FilesChangeEvent,
+ FilesControls,
+ FilesDriveControls,
+ FilesDriveState,
+ FilesExpect,
+ FilesFetchRequest,
+ FilesLocalEntry,
+ FilesPlaceholder,
+ FilesPlaceholderState,
+ FilesResult,
+ FilesRoot,
+} from '@/lib/desktop/types';
+
+interface DiskNode {
+ kind: 'file' | 'directory';
+ data: Uint8Array | null;
+ /** For a dehydrated placeholder, its size. */
+ size: number;
+ fileId: string;
+ mtimeMs: number;
+ placeholder?: FilesPlaceholderState;
+}
+
+const ok = (value: T): FilesResult => ({ ok: true, value });
+const fail = (error: Parameters[0]): FilesResult => failOf(error) as FilesResult;
+function failOf(error: Exclude, { ok: true }>['error']) {
+ return { ok: false as const, error };
+}
+
+export const text = (value: string) => new TextEncoder().encode(value);
+export const str = (value: Uint8Array | null | undefined) => (value ? new TextDecoder().decode(value) : '');
+
+let fileIds = 1;
+
+export interface FakeDiskOptions {
+ caseInsensitive?: boolean;
+ drive?: boolean;
+}
+
+export class FakeDisk implements FilesControls {
+ readonly rootsList: FilesRoot[] = [];
+ readonly trees = new Map>();
+ readonly states = new Map();
+ readonly trashed: string[] = [];
+ readonly shown: { rootId: string; path: string }[] = [];
+ readonly calls: string[] = [];
+ locked = false;
+ clock = Date.UTC(2026, 10, 1);
+ private readonly listeners = new Set<(event: FilesChangeEvent) => void>();
+ private readonly fetchListeners = new Set<(request: FilesFetchRequest) => void>();
+ private readonly cancelListeners = new Set<(fetchId: string) => void>();
+ private readonly reads = new Map();
+ private readonly writes = new Map();
+ /** Called when a read URL is fetched, before the bytes go: to change the file meanwhile. */
+ onRead: ((rootId: string, path: string) => void) | null = null;
+ /** Bytes supplied per fetch. */
+ readonly supplied = new Map();
+ readonly fetchFailed = new Map();
+ /** Supply answers false from this many bytes on (Windows no longer wants them). */
+ refuseSupplyAfter: number | null = null;
+ readonly driveCalls: { call: string; args: unknown[] }[] = [];
+ driveWanted: string[] = [];
+ readonly drive?: FilesDriveControls;
+ private nextWrite = 1;
+
+ constructor(private readonly options: FakeDiskOptions = {}) {
+ if (options.drive) this.drive = this.makeDrive();
+ }
+
+ // ─── Test setup and what a user does ────────────────────────
+
+ addRoot(root: Partial & { id: string; account: string }): FilesRoot {
+ const full: FilesRoot = { kind: 'folder', path: `C:\\sync\\${root.id}`, remoteId: null, remoteLabel: '', paused: false, createdAt: 1, ...root };
+ this.rootsList.push(full);
+ this.trees.set(full.id, new Map());
+ return full;
+ }
+
+ private tree(rootId: string): Map {
+ const tree = this.trees.get(rootId);
+ if (!tree) throw new Error(`no root ${rootId}`);
+ return tree;
+ }
+
+ private key(path: string): string {
+ return this.options.caseInsensitive ? path.toLowerCase() : path;
+ }
+
+ /** The stored path for `path`, as cased on disk. */
+ private find(rootId: string, path: string): string | null {
+ const tree = this.tree(rootId);
+ if (tree.has(path)) return path;
+ if (!this.options.caseInsensitive) return null;
+ const wanted = this.key(path);
+ for (const stored of tree.keys()) if (this.key(stored) === wanted) return stored;
+ return null;
+ }
+
+ private tick(): number {
+ this.clock += 1000;
+ return this.clock;
+ }
+
+ private parentOk(rootId: string, path: string): boolean {
+ const slash = path.lastIndexOf('/');
+ if (slash < 0) return true;
+ const parent = this.find(rootId, path.slice(0, slash));
+ return !!parent && this.tree(rootId).get(parent)?.kind === 'directory';
+ }
+
+ /** A user writes a file: a new one, or over the old one in place (same file id). */
+ write(rootId: string, path: string, content: string | Uint8Array): void {
+ const data = typeof content === 'string' ? text(content) : content;
+ this.ensureParents(rootId, path);
+ const tree = this.tree(rootId);
+ const stored = this.find(rootId, path);
+ const old = stored ? tree.get(stored) : undefined;
+ const node: DiskNode = { kind: 'file', data, size: data.length, fileId: old?.fileId ?? `f${fileIds++}`, mtimeMs: this.tick() };
+ if (old?.placeholder) {
+ // Saved over with a plain write: no longer a placeholder.
+ node.placeholder = { identity: null, inSync: false, hydrated: true, pin: 'unspecified' };
+ } else if (this.isDrive(rootId)) {
+ node.placeholder = { identity: null, inSync: false, hydrated: true, pin: 'unspecified' };
+ }
+ tree.set(stored ?? path, node);
+ }
+
+ /** An app that keeps the placeholder edits a hydrated drive file: no longer in sync. */
+ editInPlace(rootId: string, path: string, content: string): void {
+ const node = this.node(rootId, path);
+ node.data = text(content);
+ node.size = node.data.length;
+ node.mtimeMs = this.tick();
+ if (node.placeholder) node.placeholder = { ...node.placeholder, inSync: false, hydrated: true };
+ }
+
+ mkdirUser(rootId: string, path: string): void {
+ this.ensureParents(rootId, `${path}/x`);
+ }
+
+ private ensureParents(rootId: string, path: string): void {
+ const parts = path.split('/');
+ const tree = this.tree(rootId);
+ for (let i = 1; i < parts.length; i += 1) {
+ const dir = parts.slice(0, i).join('/');
+ if (!this.find(rootId, dir)) {
+ tree.set(dir, {
+ kind: 'directory', data: null, size: 0, fileId: `f${fileIds++}`, mtimeMs: this.tick(),
+ ...(this.isDrive(rootId) ? { placeholder: { identity: null, inSync: false, hydrated: true, pin: 'unspecified' as const } } : {}),
+ });
+ }
+ }
+ }
+
+ moveUser(rootId: string, from: string, to: string): void {
+ const result = this.moveTree(rootId, from, to);
+ if (!result) throw new Error(`move ${from} -> ${to} failed`);
+ }
+
+ deleteUser(rootId: string, path: string): void {
+ const tree = this.tree(rootId);
+ const stored = this.find(rootId, path) ?? path;
+ for (const key of [...tree.keys()]) if (key === stored || key.startsWith(`${stored}/`)) tree.delete(key);
+ }
+
+ node(rootId: string, path: string): DiskNode {
+ const stored = this.find(rootId, path);
+ const node = stored ? this.tree(rootId).get(stored) : undefined;
+ if (!node) throw new Error(`nothing at ${path}`);
+ return node;
+ }
+
+ has(rootId: string, path: string): boolean {
+ return this.find(rootId, path) === path;
+ }
+
+ read(rootId: string, path: string): string {
+ return str(this.node(rootId, path).data);
+ }
+
+ /** Every path in a root, sorted, folders with a trailing slash. */
+ listing(rootId: string): string[] {
+ return [...this.tree(rootId)].map(([path, node]) => (node.kind === 'directory' ? `${path}/` : path)).sort();
+ }
+
+ emit(rootId: string, paths: string[] | null = null): void {
+ for (const listener of [...this.listeners]) listener({ rootId, paths });
+ }
+
+ private isDrive(rootId: string): boolean {
+ return this.rootsList.find((root) => root.id === rootId)?.kind === 'drive';
+ }
+
+ private active(rootId: string): boolean {
+ const root = this.rootsList.find((entry) => entry.id === rootId);
+ return !this.locked && !!root && !root.paused;
+ }
+
+ private entry(path: string, node: DiskNode): FilesLocalEntry {
+ return {
+ path,
+ kind: node.kind,
+ size: node.kind === 'directory' ? 0 : node.size,
+ mtimeMs: node.mtimeMs,
+ fileId: node.fileId,
+ ...(node.placeholder ? { placeholder: { ...node.placeholder } } : {}),
+ };
+ }
+
+ private matches(node: DiskNode | undefined, expect: FilesExpect | null): boolean {
+ if (expect === null) return !node;
+ if (!node) return false;
+ return node.fileId === expect.fileId && (node.kind === 'directory' ? 0 : node.size) === expect.size && node.mtimeMs === expect.mtimeMs;
+ }
+
+ private moveTree(rootId: string, from: string, to: string): DiskNode | null {
+ const tree = this.tree(rootId);
+ const source = this.find(rootId, from);
+ if (!source) return null;
+ const target = this.find(rootId, to);
+ if (target && this.key(target) !== this.key(source)) return null;
+ if (!this.parentOk(rootId, to)) return null;
+ const moving = [...tree].filter(([key]) => key === source || key.startsWith(`${source}/`));
+ for (const [key] of moving) tree.delete(key);
+ for (const [key, node] of moving) tree.set(to + key.slice(source.length), node);
+ return tree.get(to) ?? null;
+ }
+
+ // ─── FilesControls ──────────────────────────────────────────
+
+ async roots(): Promise {
+ return this.locked ? [] : this.rootsList.map((root) => ({ ...root }));
+ }
+
+ async addFolder(request: { account: string; remoteId: string | null; remoteLabel: string }): Promise> {
+ this.calls.push(`addFolder ${request.account} ${request.remoteId}`);
+ const root = this.addRoot({ id: `r${this.rootsList.length + 1}`, account: request.account, remoteId: request.remoteId, remoteLabel: request.remoteLabel });
+ return ok(root);
+ }
+
+ async removeRoot(rootId: string): Promise {
+ this.calls.push(`removeRoot ${rootId}`);
+ const at = this.rootsList.findIndex((root) => root.id === rootId);
+ if (at >= 0) this.rootsList.splice(at, 1);
+ }
+
+ async setPaused(rootId: string, paused: boolean): Promise {
+ const root = this.rootsList.find((entry) => entry.id === rootId);
+ if (root) root.paused = paused;
+ if (!paused) this.emit(rootId, null);
+ }
+
+ async scan(rootId: string): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ return ok([...this.tree(rootId)].map(([path, node]) => this.entry(path, node)));
+ }
+
+ async stat(rootId: string, path: string): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ const stored = this.find(rootId, path);
+ return ok(stored ? this.entry(stored, this.tree(rootId).get(stored) as DiskNode) : null);
+ }
+
+ async openRead(rootId: string, path: string): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ const stored = this.find(rootId, path);
+ const node = stored ? this.tree(rootId).get(stored) : undefined;
+ if (!node) return fail('missing');
+ if (node.kind !== 'file' || !node.data || (node.placeholder && !node.placeholder.hydrated)) return fail('unsupported');
+ const token = `mem://${this.reads.size + 1}-${Math.random().toString(36).slice(2)}`;
+ this.reads.set(token, { rootId, path: stored as string });
+ return ok({ url: token, entry: this.entry(stored as string, node) });
+ }
+
+ /** What the page's fetch of a read URL gets. */
+ readUrl = async (url: string): Promise => {
+ const grant = this.reads.get(url);
+ this.reads.delete(url);
+ if (!grant) throw new Error('404');
+ const node = this.node(grant.rootId, grant.path);
+ const data = node.data as Uint8Array;
+ this.onRead?.(grant.rootId, grant.path);
+ return data;
+ };
+
+ async beginWrite(rootId: string, path: string, options: { expect: FilesExpect | null; mtimeMs: number; size: number }): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ if (!this.parentOk(rootId, path)) return fail('missing');
+ const stored = this.find(rootId, path);
+ const node = stored ? this.tree(rootId).get(stored) : undefined;
+ if (node?.kind === 'directory') return fail('exists');
+ if (!this.matches(node, options.expect)) return fail(options.expect ? 'changed' : 'exists');
+ const id = `w${this.nextWrite++}`;
+ this.writes.set(id, { rootId, path, expect: options.expect, mtimeMs: options.mtimeMs, size: options.size, parts: [] });
+ return ok(id);
+ }
+
+ async writeChunk(writeId: string, data: Uint8Array): Promise> {
+ const write = this.writes.get(writeId);
+ if (!write) return fail('missing');
+ write.parts.push(new Uint8Array(data));
+ return ok(null);
+ }
+
+ async commitWrite(writeId: string): Promise> {
+ const write = this.writes.get(writeId);
+ this.writes.delete(writeId);
+ if (!write) return fail('missing');
+ if (!this.active(write.rootId)) return fail('inactive');
+ const size = write.parts.reduce((sum, part) => sum + part.length, 0);
+ if (size !== write.size) return fail('failed');
+ const stored = this.find(write.rootId, write.path);
+ const tree = this.tree(write.rootId);
+ const old = stored ? tree.get(stored) : undefined;
+ if (!this.matches(old, write.expect)) return fail(write.expect ? 'changed' : 'exists');
+ const data = new Uint8Array(size);
+ let at = 0;
+ for (const part of write.parts) {
+ data.set(part, at);
+ at += part.length;
+ }
+ const node: DiskNode = { kind: 'file', data, size, fileId: `f${fileIds++}`, mtimeMs: write.mtimeMs };
+ tree.set(stored ?? write.path, node);
+ return ok(this.entry(stored ?? write.path, node));
+ }
+
+ async abortWrite(writeId: string): Promise {
+ this.writes.delete(writeId);
+ }
+
+ get openWrites(): number {
+ return this.writes.size;
+ }
+
+ async mkdir(rootId: string, path: string): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ if (!this.parentOk(rootId, path)) return fail('missing');
+ const stored = this.find(rootId, path);
+ const tree = this.tree(rootId);
+ if (stored) {
+ const node = tree.get(stored) as DiskNode;
+ return node.kind === 'directory' ? ok(this.entry(stored, node)) : fail('exists');
+ }
+ const node: DiskNode = { kind: 'directory', data: null, size: 0, fileId: `f${fileIds++}`, mtimeMs: this.tick() };
+ tree.set(path, node);
+ return ok(this.entry(path, node));
+ }
+
+ async move(rootId: string, from: string, to: string, expect: FilesExpect | null): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ const source = this.find(rootId, from);
+ if (!source) return fail('missing');
+ const node = this.tree(rootId).get(source) as DiskNode;
+ if (expect && !this.matches(node, expect)) return fail('changed');
+ const target = this.find(rootId, to);
+ if (target && this.key(target) !== this.key(source)) return fail('exists');
+ if (!this.parentOk(rootId, to)) return fail('missing');
+ const moved = this.moveTree(rootId, source, to);
+ return moved ? ok(this.entry(to, moved)) : fail('failed');
+ }
+
+ async remove(rootId: string, path: string, expect: FilesExpect | null): Promise> {
+ if (!this.active(rootId)) return fail('inactive');
+ const stored = this.find(rootId, path);
+ if (!stored) return fail('missing');
+ const node = this.tree(rootId).get(stored) as DiskNode;
+ if (expect && !this.matches(node, expect)) return fail('changed');
+ this.deleteUser(rootId, stored);
+ this.trashed.push(stored);
+ return ok(this.isDrive(rootId) ? 'deleted' : 'trash');
+ }
+
+ onChange(listener: (event: FilesChangeEvent) => void): () => void {
+ this.listeners.add(listener);
+ return () => this.listeners.delete(listener);
+ }
+
+ async loadState(rootId: string): Promise {
+ if (this.locked) throw new Error('Locked');
+ return this.states.get(rootId) ?? null;
+ }
+
+ async saveState(rootId: string, state: string): Promise {
+ if (this.locked) throw new Error('Locked');
+ if (!this.rootsList.some((root) => root.id === rootId)) throw new Error('No such root');
+ this.states.set(rootId, state);
+ }
+
+ async showInFolder(rootId: string, path: string): Promise {
+ this.shown.push({ rootId, path });
+ return true;
+ }
+
+ // ─── The drive ──────────────────────────────────────────────
+
+ /** Windows asks for a file someone opened. */
+ requestFetch(rootId: string, path: string, offset = 0): FilesFetchRequest {
+ const node = this.node(rootId, path);
+ const fetchId = `fetch${this.supplied.size + this.fetchFailed.size + 1}-${Math.random().toString(36).slice(2, 6)}`;
+ const start = Math.floor(offset / 4096) * 4096;
+ const request: FilesFetchRequest = { fetchId, rootId, identity: node.placeholder?.identity ?? '', path, offset: start, length: node.size - start, total: node.size };
+ this.supplied.set(fetchId, { offset: start, length: 0, parts: [] });
+ for (const listener of [...this.fetchListeners]) listener(request);
+ return request;
+ }
+
+ /** Everything supplied for a fetch, in one piece. */
+ suppliedBytes(fetchId: string): Uint8Array {
+ const got = this.supplied.get(fetchId);
+ const out = new Uint8Array(got?.length ?? 0);
+ let at = 0;
+ for (const part of got?.parts ?? []) {
+ out.set(part, at);
+ at += part.length;
+ }
+ return out;
+ }
+
+ cancelFetch(fetchId: string): void {
+ for (const listener of [...this.cancelListeners]) listener(fetchId);
+ }
+
+ private makeDrive(): FilesDriveControls {
+ // The bridge hands these out as plain functions, as the preload does.
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
+ const disk = this;
+ const record = (call: string, ...args: unknown[]) => disk.driveCalls.push({ call, args });
+ const state = (): FilesDriveState => ({ supported: true, forcedOff: false, wanted: [...disk.driveWanted], letter: { letter: null, chosen: null, locked: false, available: ['E'] } });
+ return {
+ state: async () => state(),
+ onStateChange: () => () => {},
+ enable: async (account, label) => {
+ record('enable', account, label);
+ if (!disk.driveWanted.includes(account)) disk.driveWanted.push(account);
+ const existing = disk.rootsList.find((root) => root.kind === 'drive' && root.account === account);
+ return ok(existing ?? disk.addRoot({ id: `drive-${account}`, account, kind: 'drive', remoteId: null, remoteLabel: label }));
+ },
+ disable: async (account, reason) => {
+ record('disable', account, reason);
+ if (reason !== 'signed-out') disk.driveWanted = disk.driveWanted.filter((entry) => entry !== account);
+ const at = disk.rootsList.findIndex((root) => root.kind === 'drive' && root.account === account);
+ if (at >= 0) {
+ const [root] = disk.rootsList.splice(at, 1);
+ disk.trees.set(root.id, new Map());
+ }
+ },
+ place: async (rootId, entries: FilesPlaceholder[]) => {
+ record('place', rootId, entries.length);
+ if (!disk.active(rootId)) return fail('inactive');
+ const tree = disk.tree(rootId);
+ const answers = entries.map((entry) => {
+ if (!disk.parentOk(rootId, entry.path)) return { path: entry.path, error: 'missing' as const };
+ if (disk.find(rootId, entry.path)) return { path: entry.path, error: 'exists' as const };
+ tree.set(entry.path, {
+ kind: entry.kind,
+ data: null,
+ size: entry.kind === 'file' ? entry.size : 0,
+ fileId: `f${fileIds++}`,
+ mtimeMs: entry.mtimeMs,
+ placeholder: { identity: entry.identity, inSync: true, hydrated: entry.kind === 'directory', pin: 'unspecified' },
+ });
+ return { path: entry.path };
+ });
+ return ok(answers);
+ },
+ update: async (rootId, path, meta, expect) => {
+ record('update', rootId, path, meta.dehydrate);
+ if (!disk.active(rootId)) return fail('inactive');
+ const stored = disk.find(rootId, path);
+ const node = stored ? disk.tree(rootId).get(stored) : undefined;
+ if (!node) return fail('missing');
+ if (expect && !disk.matches(node, expect)) return fail('changed');
+ if (!node.placeholder?.identity || !node.placeholder.inSync) return fail('changed');
+ node.size = meta.size;
+ node.mtimeMs = meta.mtimeMs;
+ node.placeholder = { ...node.placeholder, identity: meta.identity, inSync: true };
+ if (meta.dehydrate) {
+ node.data = null;
+ node.placeholder.hydrated = false;
+ }
+ return ok(disk.entry(stored as string, node));
+ },
+ markInSync: async (rootId, path, identity, expect) => {
+ record('markInSync', rootId, path, identity);
+ if (!disk.active(rootId)) return fail('inactive');
+ const stored = disk.find(rootId, path);
+ const node = stored ? disk.tree(rootId).get(stored) : undefined;
+ if (!node) return fail('missing');
+ if (!disk.matches(node, expect)) return fail('changed');
+ node.placeholder = { identity, inSync: true, hydrated: true, pin: node.placeholder?.pin ?? 'unspecified' };
+ return ok(disk.entry(stored as string, node));
+ },
+ onFetch: (listener) => {
+ disk.fetchListeners.add(listener);
+ return () => disk.fetchListeners.delete(listener);
+ },
+ onFetchCancel: (listener) => {
+ disk.cancelListeners.add(listener);
+ return () => disk.cancelListeners.delete(listener);
+ },
+ supply: async (fetchId, offset, data) => {
+ const got = disk.supplied.get(fetchId);
+ if (!got) return false;
+ if (offset !== got.offset + got.length) return false;
+ if (disk.refuseSupplyAfter !== null && got.length >= disk.refuseSupplyAfter) return false;
+ got.parts.push(new Uint8Array(data));
+ got.length += data.length;
+ return true;
+ },
+ fail: (fetchId, error) => {
+ disk.fetchFailed.set(fetchId, error);
+ },
+ setLetter: async (letter) => {
+ record('setLetter', letter);
+ return ok({ letter, chosen: letter, locked: false, available: ['E'] });
+ },
+ };
+ }
+}
diff --git a/lib/files-sync/__tests__/helpers/fake-server.ts b/lib/files-sync/__tests__/helpers/fake-server.ts
new file mode 100644
index 000000000..e03340285
--- /dev/null
+++ b/lib/files-sync/__tests__/helpers/fake-server.ts
@@ -0,0 +1,247 @@
+/**
+ * Files on a fake server for the engine: lib/store's FakeFiles (FileNode/get, query and changes
+ * as both Stalwarts answer them) with FileNode/set and uploads added, as Stalwart does them:
+ * - a folder is a node without blobId; a node can only go under a folder;
+ * - two siblings with the same name are refused (`alreadyExists`);
+ * - a destroy with onDestroyRemoveChildren takes the subtree;
+ * - an upload over maxSizeUpload is an HTTP 413;
+ * - the session's filenode capability names forbidden characters (0.16.6+ style).
+ */
+
+import { TransportError, type StoreSession } from '@/lib/store/engine/transport';
+import { FakeFiles, FILES, FILES_SESSION, type FakeFilesOptions, type FakeNode } from '@/lib/store/__tests__/helpers/fake-files';
+import { JMAP_ACCOUNT } from '@/lib/store/__tests__/helpers/fake-jmap';
+import { FilesRemote } from '../../remote';
+
+export { JMAP_ACCOUNT };
+
+export interface FakeServerOptions extends FakeFilesOptions {
+ maxSizeUpload?: number;
+ forbiddenNameChars?: string;
+}
+
+export class FakeServer extends FakeFiles {
+ readonly session: StoreSession;
+ readonly sets: Record[] = [];
+ readonly uploads: number[] = [];
+ /** Fails the next N uploads like a network drop. */
+ failUploads = 0;
+ private serverClock = Date.UTC(2026, 9, 1);
+ private nextNodeId = 1000;
+ private nextBlob = 1;
+
+ constructor(options: FakeServerOptions = {}) {
+ super(options);
+ this.session = {
+ ...FILES_SESSION,
+ capabilities: {
+ ...FILES_SESSION.capabilities,
+ 'urn:ietf:params:jmap:core': { maxSizeUpload: options.maxSizeUpload ?? 50_000_000, maxObjectsInGet: 500, maxObjectsInSet: 500, maxCallsInRequest: 16 },
+ },
+ accounts: {
+ ...FILES_SESSION.accounts,
+ [JMAP_ACCOUNT]: {
+ ...FILES_SESSION.accounts[JMAP_ACCOUNT],
+ accountCapabilities: { [FILES]: { forbiddenNameChars: options.forbiddenNameChars ?? '/', forbiddenNodeNames: ['.', '..'], maxSizeFileNodeName: 255 } },
+ },
+ },
+ };
+ }
+
+ remote(): FilesRemote {
+ return new FilesRemote(this, () => this.session);
+ }
+
+ private stamp(): string {
+ this.serverClock += 1000;
+ return new Date(this.serverClock).toISOString();
+ }
+
+ get nodes(): Map {
+ return this.account().nodes;
+ }
+
+ /** What another device does in Files. */
+ folder(name: string, parentId: string | null = null): FakeNode {
+ const node = this.addFolder(name, parentId, `n${this.nextNodeId++}`);
+ node.modified = this.stamp();
+ return node;
+ }
+
+ file(name: string, parentId: string | null, content: string | Uint8Array): FakeNode {
+ const data = typeof content === 'string' ? new TextEncoder().encode(content) : content;
+ const node = this.addFile(name, parentId, data, { id: `n${this.nextNodeId++}`, blobId: `b${this.nextBlob++}`, modified: this.stamp() });
+ return node;
+ }
+
+ edit(id: string, content: string): void {
+ const data = new TextEncoder().encode(content);
+ const blobId = `b${this.nextBlob++}`;
+ this.blobs.set(blobId, data);
+ const node = this.nodes.get(id) as FakeNode;
+ node.blobId = blobId;
+ node.size = data.length;
+ node.modified = this.stamp();
+ this.account().coll.push('updated', id);
+ }
+
+ rename(id: string, name: string, parentId?: string | null): void {
+ const node = this.nodes.get(id) as FakeNode;
+ node.name = name;
+ if (parentId !== undefined) node.parentId = parentId;
+ this.account().coll.push('updated', id);
+ }
+
+ destroyTree(id: string): void {
+ for (const child of [...this.nodes.values()].filter((node) => node.parentId === id)) this.destroyTree(child.id);
+ this.removeNode(id);
+ }
+
+ /** The content of a node, as text. */
+ content(id: string): string {
+ const node = this.nodes.get(id);
+ return node?.blobId ? new TextDecoder().decode(this.blobs.get(node.blobId)) : '';
+ }
+
+ /** Path from the top to each node, sorted, folders with a slash. Without the trash unless asked. */
+ listing(withTrash = false): string[] {
+ const out: string[] = [];
+ const pathOf = (node: FakeNode): string | null => {
+ const parts = [node.name];
+ let parent = node.parentId;
+ while (parent) {
+ const up = this.nodes.get(parent);
+ if (!up) return null;
+ parts.unshift(up.name);
+ parent = up.parentId;
+ }
+ return parts.join('/');
+ };
+ for (const node of this.nodes.values()) {
+ const path = pathOf(node);
+ if (path === null) continue;
+ if (!withTrash && (path === '.Trash' || path.startsWith('.Trash/'))) continue;
+ out.push(node.blobId === null ? `${path}/` : path);
+ }
+ return out.sort();
+ }
+
+ find(path: string): FakeNode | undefined {
+ const parts = path.split('/');
+ let parent: string | null = null;
+ let found: FakeNode | undefined;
+ for (const part of parts) {
+ found = [...this.nodes.values()].find((node) => node.parentId === parent && node.name === part);
+ if (!found) return undefined;
+ parent = found.id;
+ }
+ return found;
+ }
+
+ override async upload(_jmap?: string, data?: Uint8Array, type?: string): Promise<{ blobId: string; type: string; size: number }> {
+ if (this.offline) throw new TransportError('network', 'Failed to fetch');
+ if (this.failUploads > 0) {
+ this.failUploads -= 1;
+ throw new TransportError('network', 'Connection reset');
+ }
+ const bytes = data ?? new Uint8Array();
+ const max = (this.session.capabilities['urn:ietf:params:jmap:core'] as { maxSizeUpload: number }).maxSizeUpload;
+ if (bytes.length > max) throw new TransportError('http', 'Upload failed: 413', 413);
+ const blobId = `up${this.nextBlob++}`;
+ this.blobs.set(blobId, new Uint8Array(bytes));
+ this.uploads.push(bytes.length);
+ return { blobId, type: type ?? 'application/octet-stream', size: bytes.length };
+ }
+
+ protected override handle(name: string, args: Record): Record {
+ if (name !== 'FileNode/set') return super.handle(name, args);
+ this.sets.push(args);
+ const account = this.account(String(args.accountId));
+ const nodes = account.nodes;
+ const forbidden = String(((this.session.accounts[JMAP_ACCOUNT].accountCapabilities as Record>)[FILES]).forbiddenNameChars ?? '');
+ const clash = (parentId: string | null, nodeName: string, except?: string) =>
+ [...nodes.values()].some((node) => node.parentId === parentId && node.name === nodeName && node.id !== except);
+ const isFolder = (id: string | null) => id === null || nodes.get(id)?.blobId === null;
+ const created: Record = {};
+ const notCreated: Record = {};
+ for (const [key, raw] of Object.entries((args.create ?? {}) as Record>)) {
+ const parentId = (raw.parentId as string | undefined) ?? null;
+ const nodeName = String(raw.name ?? '');
+ if (!nodeName || [...nodeName].some((ch) => forbidden.includes(ch))) {
+ notCreated[key] = { type: 'invalidProperties', description: 'Name contains a forbidden character.' };
+ continue;
+ }
+ if (parentId !== null && !nodes.has(parentId)) {
+ notCreated[key] = { type: 'invalidProperties', description: 'Parent ID does not exist or is not a folder.' };
+ continue;
+ }
+ if (!isFolder(parentId)) {
+ notCreated[key] = { type: 'invalidProperties', description: 'Parent ID does not exist or is not a folder.' };
+ continue;
+ }
+ if (clash(parentId, nodeName)) {
+ notCreated[key] = { type: 'alreadyExists', description: 'A node with the same name already exists.' };
+ continue;
+ }
+ const id = `n${this.nextNodeId++}`;
+ const blobId = (raw.blobId as string | undefined) ?? null;
+ const type = (raw.type as string | undefined) ?? (raw.mediaType as string | undefined) ?? null;
+ const node: FakeNode = { id, parentId, name: nodeName, blobId, type: blobId ? type : null, size: blobId ? (this.blobs.get(blobId)?.length ?? 0) : null, modified: this.stamp() };
+ nodes.set(id, node);
+ account.coll.push('created', id);
+ created[key] = { id };
+ }
+ const updated: Record = {};
+ const notUpdated: Record = {};
+ for (const [id, patch] of Object.entries((args.update ?? {}) as Record>)) {
+ const node = nodes.get(id);
+ if (!node) {
+ notUpdated[id] = { type: 'notFound' };
+ continue;
+ }
+ const parentId = 'parentId' in patch ? ((patch.parentId as string | null) ?? null) : node.parentId;
+ const nodeName = 'name' in patch ? String(patch.name) : node.name;
+ if ('parentId' in patch && !isFolder(parentId)) {
+ notUpdated[id] = { type: 'invalidProperties', description: 'Parent ID does not exist or is not a folder.' };
+ continue;
+ }
+ if (clash(parentId, nodeName, id)) {
+ notUpdated[id] = { type: 'alreadyExists' };
+ continue;
+ }
+ node.parentId = parentId;
+ node.name = nodeName;
+ if ('blobId' in patch) {
+ node.blobId = patch.blobId as string;
+ node.size = this.blobs.get(node.blobId)?.length ?? 0;
+ }
+ node.modified = this.stamp();
+ account.coll.push('updated', id);
+ updated[id] = null;
+ }
+ const destroyed: string[] = [];
+ const notDestroyed: Record = {};
+ for (const id of (args.destroy ?? []) as string[]) {
+ if (!nodes.has(id)) {
+ notDestroyed[id] = { type: 'notFound' };
+ continue;
+ }
+ if (!args.onDestroyRemoveChildren && [...nodes.values()].some((node) => node.parentId === id)) {
+ notDestroyed[id] = { type: 'nodeHasChildren' };
+ continue;
+ }
+ this.destroyTree(id);
+ destroyed.push(id);
+ }
+ return {
+ accountId: args.accountId,
+ newState: account.coll.state(),
+ created,
+ notCreated,
+ updated,
+ notUpdated,
+ destroyed,
+ notDestroyed,
+ };
+ }
+}
diff --git a/lib/files-sync/__tests__/host.test.ts b/lib/files-sync/__tests__/host.test.ts
new file mode 100644
index 000000000..d37b77657
--- /dev/null
+++ b/lib/files-sync/__tests__/host.test.ts
@@ -0,0 +1,225 @@
+/**
+ * The host of Files on this computer: claiming the bridge once, the accounts it runs for, what
+ * it publishes, the controller, and what sign-out, a wipe and a refused login do.
+ */
+import { render } from '@testing-library/react';
+import { createElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { FilesControls } from '@/lib/desktop/types';
+import { WindowControlsHost } from '@/components/layout/window-controls-host';
+import { noteCredentialsRejected } from '@/lib/offline/credentials-rejected';
+import { runWipeCleaners } from '@/lib/offline/wipe-registry';
+import { runBeforeSignOut } from '@/lib/sign-out-cleanup';
+import type { FilesSyncController, FilesSyncSnapshot } from '../types';
+import { claimFilesControls, resetFilesControlsForTests } from '../controls';
+import { FilesSyncHost, type HostAccount } from '../host';
+import { registerFilesSyncLifecycle, resetFilesSyncLifecycleForTests, setRunningFilesSyncHost } from '../lifecycle';
+import { FakeDisk } from './helpers/fake-disk';
+import { FakeServer } from './helpers/fake-server';
+
+const FAST = { localDelayMs: 0, remoteDelayMs: 0, pollMs: 1e9, rescanMs: 1e9, retryMs: [1e9], soonMs: 5, fetchWaitMs: 1000 };
+
+function fakeBridge(controls: FilesControls) {
+ const claim = vi.fn<() => FilesControls | null>();
+ let taken = false;
+ claim.mockImplementation(() => {
+ if (taken) return null;
+ taken = true;
+ return controls;
+ });
+ return { version: 1, platform: 'win32' as const, files: { claim } };
+}
+
+describe('claiming the bridge', () => {
+ afterEach(() => {
+ delete (window as { bulwarkDesktop?: unknown }).bulwarkDesktop;
+ resetFilesControlsForTests();
+ });
+
+ it('takes the controls in the first render, once, so a frame coming later gets nothing', () => {
+ const controls = new FakeDisk();
+ const bridge = fakeBridge(controls);
+ (window as { bulwarkDesktop?: unknown }).bulwarkDesktop = bridge;
+ const { rerender } = render(createElement(WindowControlsHost));
+ rerender(createElement(WindowControlsHost));
+ expect(bridge.files.claim).toHaveBeenCalledTimes(1);
+ expect(claimFilesControls()).toBe(controls);
+ // A same-origin frame reaching the bridge through parent.
+ expect(bridge.files.claim()).toBeNull();
+ });
+
+ it('takes nothing in a browser', () => {
+ render(createElement(WindowControlsHost));
+ expect(claimFilesControls()).toBeNull();
+ });
+});
+
+interface Rig {
+ host: FilesSyncHost;
+ disk: FakeDisk;
+ server: FakeServer;
+ snapshot: () => Partial;
+ controller: () => FilesSyncController | null;
+ folderOff: { value: boolean };
+ account: HostAccount;
+}
+
+function rig(options: { drive?: boolean; wanted?: string[] } = {}): Rig {
+ const disk = new FakeDisk({ caseInsensitive: true, drive: options.drive });
+ disk.driveWanted = options.wanted ?? [];
+ const server = new FakeServer();
+ let published: Partial = {};
+ let controller: FilesSyncController | null = null;
+ const folderOff = { value: false };
+ const host = new FilesSyncHost({
+ controls: disk,
+ platform: 'win32',
+ publish: (patch) => {
+ published = { ...published, ...patch };
+ },
+ setController: (next) => {
+ controller = next;
+ },
+ folderSyncForcedOff: () => folderOff.value,
+ downloadsForbidden: () => false,
+ remoteFor: () => server.remote(),
+ readUrl: disk.readUrl,
+ timing: FAST,
+ });
+ const account: HostAccount = { id: 'a1', label: 'a@example.org', client: { getSessionSnapshot: () => server.session, getAuthHeader: () => 'Basic x' } };
+ return { host, disk, server, snapshot: () => published, controller: () => controller, folderOff, account };
+}
+
+async function settle(host: FilesSyncHost): Promise {
+ await new Promise((resolve) => setTimeout(resolve, 10));
+ await host.engine.settled();
+ await new Promise((resolve) => setTimeout(resolve, 60));
+}
+
+describe('the host', () => {
+ it('runs the roots of signed-in accounts, publishes the current one, and registers the controller', async () => {
+ const r = rig();
+ r.disk.addRoot({ id: 'r1', account: 'a1', remoteId: null });
+ r.disk.addRoot({ id: 'r2', account: 'other', remoteId: null });
+ r.disk.write('r1', 'a.txt', 'a');
+ r.host.start();
+ r.host.setAccounts([r.account], 'a1');
+ await settle(r.host);
+ expect(r.server.listing()).toEqual(['a.txt']);
+ expect(r.snapshot()).toMatchObject({ available: true, account: 'a1', folderSyncForcedOff: false });
+ expect(r.snapshot().roots?.map((root) => root.id)).toEqual(['r1']);
+ expect(r.snapshot().status?.r1).toMatchObject({ state: 'idle' });
+ expect(r.snapshot().activity?.[0]).toMatchObject({ kind: 'uploaded', path: 'a.txt' });
+ expect(Object.values(r.snapshot().items ?? {})).toEqual(['synced']);
+ expect(r.controller()).not.toBeNull();
+ r.host.stop();
+ expect(r.controller()).toBeNull();
+ });
+
+ it('keeps folders out of sync while the policy forbids them', async () => {
+ const r = rig();
+ r.folderOff.value = true;
+ r.disk.addRoot({ id: 'r1', account: 'a1', remoteId: null });
+ r.disk.write('r1', 'a.txt', 'a');
+ r.host.start();
+ r.host.setAccounts([r.account], 'a1');
+ await settle(r.host);
+ expect(r.server.listing()).toEqual([]);
+ expect(r.snapshot().status?.r1).toMatchObject({ state: 'blocked', errorKey: 'errors.policy' });
+ expect(r.snapshot().folderSyncForcedOff).toBe(true);
+ r.host.stop();
+ });
+
+ it('turns the drive back on at sign-in without a click, and off at sign-out keeping the wish', async () => {
+ const r = rig({ drive: true, wanted: ['a1'] });
+ r.server.file('a.txt', null, 'a');
+ r.host.start();
+ r.host.setAccounts([r.account], 'a1');
+ await settle(r.host);
+ await settle(r.host);
+ expect(r.disk.driveCalls[0]).toEqual({ call: 'enable', args: ['a1', 'a@example.org'] });
+ expect(r.disk.listing('drive-a1')).toEqual(['a.txt']);
+ expect(r.disk.states.get('drive-a1')).toContain('a.txt');
+ await r.host.signedOut('a1');
+ expect(r.disk.driveCalls.at(-1)).toEqual({ call: 'disable', args: ['a1', 'signed-out'] });
+ expect(r.disk.driveWanted).toEqual(['a1']);
+ // The record went before the folder did: the next sign-in starts from an empty one.
+ expect(r.disk.states.get('drive-a1')).not.toContain('a.txt');
+ r.host.stop();
+ });
+
+ it('removes the drive and forgets the folders of a wiped account, and keeps their files', async () => {
+ const r = rig({ drive: true, wanted: ['a1', 'a2'] });
+ r.disk.addRoot({ id: 'r1', account: 'a1', remoteId: null });
+ r.disk.addRoot({ id: 'r2', account: 'a2', remoteId: null });
+ r.disk.write('r1', 'mine.txt', 'mine');
+ r.host.start();
+ await r.host.removeAccountData('a1', 'wipe');
+ expect(r.disk.driveCalls).toContainEqual({ call: 'disable', args: ['a1', 'wipe'] });
+ expect(r.disk.driveCalls.some((call) => call.args[0] === 'a2')).toBe(false);
+ expect(r.disk.calls).toEqual(['removeRoot r1']);
+ expect(r.disk.read('r1', 'mine.txt')).toBe('mine');
+ r.host.stop();
+ });
+
+ it('answers the controller: shared folders refused, the drive switch, show in folder', async () => {
+ const r = rig({ drive: true });
+ r.disk.addRoot({ id: 'r1', account: 'a1', remoteId: null });
+ r.disk.write('r1', 'Docs/a.txt', 'a');
+ r.host.start();
+ r.host.setAccounts([r.account], 'a1');
+ await settle(r.host);
+ const controller = r.controller()!;
+ expect(await controller.addFolder('shared1:n5', 'Team')).toEqual({ ok: false, error: 'unsupported' });
+ expect(r.disk.calls).toEqual([]);
+ const id = r.server.find('Docs/a.txt')!.id;
+ expect(controller.coverage(id)).toEqual({ rootId: 'r1', kind: 'folder', path: 'Docs/a.txt' });
+ expect(await controller.showInFolder(id)).toBe(true);
+ expect(r.disk.shown).toEqual([{ rootId: 'r1', path: 'Docs/a.txt' }]);
+ expect(await controller.showInFolder('unknown')).toBe(false);
+ expect((await controller.setDriveEnabled(true)).ok).toBe(true);
+ expect(r.disk.driveCalls.at(-1)).toEqual({ call: 'enable', args: ['a1', 'a@example.org'] });
+ expect(await controller.setDriveEnabled(false)).toEqual({ ok: true, value: null });
+ expect(r.disk.driveCalls.at(-1)).toEqual({ call: 'disable', args: ['a1', 'user'] });
+ r.host.stop();
+ });
+});
+
+describe('sign-out, wipe and refused logins', () => {
+ let r: Rig;
+ beforeEach(async () => {
+ resetFilesSyncLifecycleForTests();
+ registerFilesSyncLifecycle();
+ r = rig({ drive: true, wanted: ['a1'] });
+ r.disk.addRoot({ id: 'r1', account: 'a1', remoteId: null });
+ r.host.start();
+ setRunningFilesSyncHost(r.host);
+ });
+ afterEach(() => {
+ r.host.stop();
+ resetFilesSyncLifecycleForTests();
+ });
+
+ it('a wipe removes the drive and forgets the folders', async () => {
+ await runWipeCleaners('a1');
+ expect(r.disk.driveCalls).toContainEqual({ call: 'disable', args: ['a1', 'wipe'] });
+ expect(r.disk.calls).toContain('removeRoot r1');
+ });
+
+ it('a refused login the server is sure of does the same, an unsure one nothing', async () => {
+ noteCredentialsRejected('a1', false, 'refused');
+ noteCredentialsRejected('a1', true, 'session');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ expect(r.disk.driveCalls.filter((call) => call.call === 'disable')).toEqual([]);
+ noteCredentialsRejected('a1', true, 'refused');
+ await new Promise((resolve) => setTimeout(resolve, 20));
+ expect(r.disk.driveCalls).toContainEqual({ call: 'disable', args: ['a1', 'refused'] });
+ expect(r.disk.calls).toContain('removeRoot r1');
+ });
+
+ it('a sign-out takes the drive down and keeps the folders', async () => {
+ await runBeforeSignOut('a1');
+ expect(r.disk.driveCalls).toContainEqual({ call: 'disable', args: ['a1', 'signed-out'] });
+ expect(r.disk.calls).toEqual([]);
+ });
+});
diff --git a/lib/files-sync/__tests__/real-server.test.ts b/lib/files-sync/__tests__/real-server.test.ts
new file mode 100644
index 000000000..245301733
--- /dev/null
+++ b/lib/files-sync/__tests__/real-server.test.ts
@@ -0,0 +1,225 @@
+// @vitest-environment node
+/**
+ * The engine against a real Stalwart, with the in-memory disk. Skipped unless asked for:
+ *
+ * FILES_SYNC_REAL_URL=https://stalwart.internal.bulwarkmail.org FILES_SYNC_REAL_LABEL=0.16 \
+ * vw exec --env FILES_SYNC_REAL_PASSWORD="vault:///password" -- npx vitest run lib/files-sync/__tests__/real-server.test.ts
+ *
+ * Uses the throwaway accounts dso-fs and dso-fs-b (VM 106 ~/desktop-offline/dso_fs_provision.py,
+ * which also seeds dso-fs's "Seed" folder; dso_fs_dav_seed.py adds names Windows can't hold over
+ * WebDAV). It signs in once per account and stops there if that's refused: nothing polls as a
+ * missing user.
+ */
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { FetchTransport, type StoreSession } from '@/lib/store/engine/transport';
+import { FilesSyncEngine, type EngineTiming } from '../engine';
+import { namingFor } from '../names';
+import { FilesRemote, type RemoteNode } from '../remote';
+import { FakeDisk, str, text } from './helpers/fake-disk';
+
+const URL_BASE = process.env.FILES_SYNC_REAL_URL ?? '';
+const LABEL = process.env.FILES_SYNC_REAL_LABEL ?? '';
+const PASSWORD = process.env.FILES_SYNC_REAL_PASSWORD ?? '';
+const run = !!URL_BASE && !!PASSWORD;
+const FAST: Partial = { localDelayMs: 0, remoteDelayMs: 0, pollMs: 1e9, rescanMs: 1e9, retryMs: [1e9], soonMs: 50, fetchWaitMs: 30_000 };
+
+function basic(user: string): string {
+ return `Basic ${Buffer.from(`${user}@example.org:${PASSWORD}`).toString('base64')}`;
+}
+
+async function signIn(user: string): Promise {
+ const response = await fetch(`${URL_BASE}/jmap/session`, { headers: { Authorization: basic(user) } });
+ if (response.status !== 200) throw new Error(`${user} on ${LABEL}: session ${response.status}; run dso_fs_provision.py first`);
+ const session = (await response.json()) as StoreSession;
+ const transport = new FetchTransport({ session: () => session, auth: () => basic(user), refreshAuth: async () => basic(user) });
+ return new FilesRemote(transport, () => session);
+}
+
+async function tree(remote: FilesRemote): Promise> {
+ return new Map((await remote.listAll()).nodes.map((node) => [node.id, node]));
+}
+
+/** Paths below a folder, as Files has them, folders with a slash. */
+function pathsUnder(nodes: Map, folderId: string): string[] {
+ const out: string[] = [];
+ const walk = (parent: string, prefix: string) => {
+ for (const node of nodes.values()) {
+ if (node.parentId !== parent) continue;
+ const path = prefix ? `${prefix}/${node.name}` : node.name;
+ out.push(node.kind === 'directory' ? `${path}/` : path);
+ if (node.kind === 'directory') walk(node.id, path);
+ }
+ };
+ walk(folderId, '');
+ return out.sort();
+}
+
+function find(nodes: Map, parentId: string | null, name: string): RemoteNode | undefined {
+ return [...nodes.values()].find((node) => node.parentId === parentId && node.name === name);
+}
+
+async function download(remote: FilesRemote, node: RemoteNode): Promise {
+ const parts: Uint8Array[] = [];
+ await remote.download(node, (part) => parts.push(new Uint8Array(part)));
+ return new Uint8Array(Buffer.concat(parts));
+}
+
+describe.runIf(run)(`files sync against Stalwart ${LABEL}`, () => {
+ let a: FilesRemote;
+ let b: FilesRemote;
+ let other: FilesRemote;
+ let testFolder: RemoteNode;
+ let disk: FakeDisk;
+ let engine: FilesSyncEngine;
+ const created: string[] = [];
+
+ const sync = async () => {
+ await engine.refreshRoots();
+ engine.syncNow();
+ await engine.settled();
+ };
+
+ beforeAll(async () => {
+ a = await signIn('dso-fs');
+ b = await signIn('dso-fs-b');
+ // "Another device" of dso-fs: its own session and transport.
+ other = await signIn('dso-fs');
+ const nodes = await tree(a);
+ // What an earlier run left.
+ const old = [...nodes.values()].filter((node) => node.parentId === null && node.name.startsWith('Sync test '));
+ if (old.length > 0) await a.destroy(old.map((node) => node.id));
+ testFolder = await a.createFolder(`Sync test ${Date.now()}`, null);
+ created.push(testFolder.id);
+ disk = new FakeDisk({ caseInsensitive: true, drive: true });
+ engine = new FilesSyncEngine({ controls: disk, naming: namingFor('win32'), device: 'Test', readUrl: disk.readUrl, timing: FAST });
+ engine.start();
+ engine.setAccount('fs', a);
+ engine.setAccount('fs-b', b);
+ }, 120_000);
+
+ afterAll(async () => {
+ engine?.stop();
+ if (a && created.length > 0) await a.destroy(created).catch(() => {});
+ if (a) {
+ const nodes = await tree(a).catch(() => new Map());
+ const trash = find(nodes, null, '.Trash');
+ if (trash) await a.destroy([trash.id]).catch(() => {});
+ }
+ }, 120_000);
+
+ it('brings the seeded folder down whole, with names the disk can hold, and changes nothing in Files', async () => {
+ const before = await tree(a);
+ const seed = find(before, null, 'Seed');
+ expect(seed, 'run dso_fs_provision.py create').toBeDefined();
+ disk.addRoot({ id: 'seed', account: 'fs', remoteId: seed!.id });
+ await sync();
+ const listing = disk.listing('seed');
+ expect(listing).toEqual(expect.arrayContaining([
+ 'Documents/', 'Documents/Level 1/Level 2/deep note.md', 'Documents/Quarterly report 2026.txt', 'Empty folder/',
+ 'Pictures/photo 1.png', 'Ärger und Grüße/Übersicht März.txt', 'Large/large 1.bin', 'Large/large 2.bin',
+ 'Report.txt', 'report (2).txt', 'trailing dot._',
+ 'a：b.txt', 'what？.txt', 'quote＂.txt', 'pipe｜star＊.txt', 'less＜more＞.txt', 'back＼slash.txt',
+ ]));
+ if (LABEL === '0.16') expect(listing).toContain('CON_.txt');
+ expect(disk.read('seed', 'Ärger und Grüße/Übersicht März.txt')).toBe('Grüße aus Köln\n');
+ const large = find(before, find(before, seed!.id, 'Large')!.id, 'large 2.bin')!;
+ expect(disk.node('seed', 'Large/large 2.bin').size).toBe(large.size);
+ expect(Buffer.from(disk.node('seed', 'Large/large 2.bin').data!).equals(Buffer.from(await download(a, large)))).toBe(true);
+ const after = await tree(a);
+ expect(pathsUnder(after, seed!.id)).toEqual(pathsUnder(before, seed!.id));
+ expect(engine.status().seed.state).toBe('idle');
+ await engine.removeRoot('seed');
+ }, 180_000);
+
+ it('sends what is made here, with a large file, and keeps one over the limit here', async () => {
+ disk.addRoot({ id: 'pair', account: 'fs', remoteId: testFolder.id });
+ const big = new Uint8Array(3 * 1024 * 1024 + 11).map((_, i) => (i * 7) % 256);
+ disk.write('pair', 'Docs/Notes/plan.txt', 'the plan');
+ disk.write('pair', 'Grüße/übung.txt', 'Umlaute');
+ disk.write('pair', 'with space.txt', 'spaces');
+ disk.write('pair', 'big.bin', big);
+ const limit = a.maxUpload();
+ expect(limit).toBeGreaterThan(0);
+ disk.write('pair', 'too big.bin', new Uint8Array(limit + 1));
+ await sync();
+ const nodes = await tree(a);
+ expect(pathsUnder(nodes, testFolder.id)).toEqual(['Docs/', 'Docs/Notes/', 'Docs/Notes/plan.txt', 'Grüße/', 'Grüße/übung.txt', 'big.bin', 'with space.txt']);
+ expect(Buffer.from(await download(a, find(nodes, testFolder.id, 'big.bin')!)).equals(Buffer.from(big))).toBe(true);
+ expect(engine.activity.filter((entry) => entry.kind === 'too-large').map((entry) => entry.path)).toEqual(['too big.bin']);
+ }, 180_000);
+
+ it('follows renames, moves, edits, conflicts and deletes both ways', async () => {
+ let nodes = await tree(a);
+ const plan = find(nodes, find(nodes, find(nodes, testFolder.id, 'Docs')!.id, 'Notes')!.id, 'plan.txt')!;
+ // Here: rename and move.
+ disk.moveUser('pair', 'Docs/Notes/plan.txt', 'Grüße/Plan.txt');
+ await sync();
+ nodes = await tree(a);
+ expect(find(nodes, find(nodes, testFolder.id, 'Grüße')!.id, 'Plan.txt')?.id).toBe(plan.id);
+ // Another device: rename a folder and edit a file.
+ const spaced = find(nodes, testFolder.id, 'with space.txt')!;
+ await other.move(find(nodes, testFolder.id, 'Docs')!.id, { name: 'Documents' });
+ const blob = await other.upload(text('edited elsewhere'), 'text/plain');
+ await other.replaceBlob(spaced.id, blob.blobId);
+ engine.remoteChanged('fs');
+ await new Promise((resolve) => setTimeout(resolve, 200));
+ await sync();
+ expect(disk.listing('pair')).toEqual(expect.arrayContaining(['Documents/', 'Documents/Notes/']));
+ expect(disk.read('pair', 'with space.txt')).toBe('edited elsewhere');
+ // Both sides edit one file.
+ disk.write('pair', 'with space.txt', 'edited here, longer');
+ const blob2 = await other.upload(text('edited there'), 'text/plain');
+ await other.replaceBlob(spaced.id, blob2.blobId);
+ await sync();
+ const copy = disk.listing('pair').find((path) => path.startsWith('with space (conflict, Test, '))!;
+ expect(copy).toBeDefined();
+ expect(disk.read('pair', 'with space.txt')).toBe('edited there');
+ nodes = await tree(a);
+ expect(str(await download(a, find(nodes, testFolder.id, copy)!))).toBe('edited here, longer');
+ // Deleted here: into the Files trash.
+ disk.deleteUser('pair', 'big.bin');
+ await sync();
+ nodes = await tree(a);
+ expect(find(nodes, testFolder.id, 'big.bin')).toBeUndefined();
+ const trash = find(nodes, null, '.Trash')!;
+ expect(pathsUnder(nodes, trash.id).some((path) => path.endsWith('/big.bin'))).toBe(true);
+ // Deleted in Files: into the computer's trash.
+ await other.destroy([find(nodes, testFolder.id, 'Grüße')!.id]);
+ engine.remoteChanged('fs');
+ await new Promise((resolve) => setTimeout(resolve, 200));
+ await sync();
+ expect(disk.trashed).toContain('Grüße');
+ expect(disk.listing('pair').some((path) => path.startsWith('Grüße'))).toBe(false);
+ }, 240_000);
+
+ it('places the drive for the whole account and streams a file from where Windows asks', async () => {
+ disk.addRoot({ id: 'drive', account: 'fs', kind: 'drive', remoteId: null });
+ await sync();
+ const listing = disk.listing('drive');
+ expect(listing).toEqual(expect.arrayContaining(['Seed/', 'Seed/Large/large 2.bin', 'Seed/Pictures/photo 2.png']));
+ expect(listing.some((path) => path.startsWith('.Trash'))).toBe(false);
+ expect(disk.node('drive', 'Seed/Large/large 2.bin').placeholder).toMatchObject({ hydrated: false, inSync: true });
+ const request = disk.requestFetch('drive', 'Seed/Large/large 2.bin', 1024 * 1024 + 5);
+ const nodes = await tree(a);
+ const node = find(nodes, find(nodes, find(nodes, null, 'Seed')!.id, 'Large')!.id, 'large 2.bin')!;
+ const whole = await download(a, node);
+ for (let i = 0; i < 300 && disk.suppliedBytes(request.fetchId).length < node.size - request.offset; i += 1) {
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ }
+ const got = disk.suppliedBytes(request.fetchId);
+ expect(request.offset).toBe(1024 * 1024);
+ expect(got.length).toBe(node.size - request.offset);
+ expect(Buffer.from(got).equals(Buffer.from(whole.subarray(request.offset)))).toBe(true);
+ await engine.removeRoot('drive');
+ }, 240_000);
+
+ it('keeps each account to its own Files', async () => {
+ const own = await b.createFolder(`Sync test ${Date.now()}`, null);
+ disk.addRoot({ id: 'pair-b', account: 'fs-b', remoteId: own.id });
+ disk.write('pair-b', 'only b.txt', 'b');
+ await sync();
+ expect(pathsUnder(await tree(b), own.id)).toEqual(['only b.txt']);
+ expect([...(await tree(a)).values()].some((node) => node.name === 'only b.txt')).toBe(false);
+ await b.destroy([own.id]);
+ }, 120_000);
+});
diff --git a/lib/files-sync/__tests__/remote.test.ts b/lib/files-sync/__tests__/remote.test.ts
new file mode 100644
index 000000000..29793f91d
--- /dev/null
+++ b/lib/files-sync/__tests__/remote.test.ts
@@ -0,0 +1,111 @@
+// @vitest-environment node
+/** The Files side over JMAP, against the fake server's 0.16 and 1.0 behaviours, and names on disk. */
+import { describe, expect, it } from 'vitest';
+import { conflictName, diskName, freeLocalName, namingFor, nameKey } from '../names';
+import { RemoteTree } from '../remote';
+import { FakeServer } from './helpers/fake-server';
+
+describe('listing the whole tree', () => {
+ function big(options: ConstructorParameters[0]): FakeServer {
+ const server = new FakeServer(options);
+ for (let f = 0; f < 6; f += 1) {
+ const folder = server.folder(`folder ${f}`);
+ for (let i = 0; i < 120; i += 1) server.file(`f${i}.txt`, folder.id, `${f}/${i}`);
+ }
+ return server;
+ }
+
+ it('finds every folder past the /get ceiling where the query leaves folders out (0.16 before 0.16.6)', async () => {
+ const server = big({ queryOmitsFolders: true, style: 'blob' });
+ const { nodes } = await server.remote().listAll();
+ expect(nodes.length).toBe(6 + 720);
+ expect(nodes.filter((node) => node.kind === 'directory').length).toBe(6);
+ });
+
+ it('lists everything where the return-all /get is refused (1.0)', async () => {
+ const server = big({ getAll: 'refuse', style: 'draft' });
+ const { nodes, state } = await server.remote().listAll();
+ expect(nodes.length).toBe(726);
+ expect(nodes.filter((node) => node.kind === 'directory').length).toBe(6);
+ expect(state).toBe(server.account().coll.state());
+ });
+
+ it('fails rather than give part of the tree', async () => {
+ const server = big({});
+ let calls = 0;
+ server.beforeRequest = () => {
+ calls += 1;
+ if (calls === 3) server.offline = true;
+ };
+ await expect(server.remote().listAll()).rejects.toMatchObject({ name: 'TransportError' });
+ });
+});
+
+describe('writes', () => {
+ it('creates in the draft Stalwart 1.0 wants, and folders without content', async () => {
+ const server = new FakeServer();
+ const accountCaps = server.session.accounts.acc1.accountCapabilities as Record>;
+ accountCaps['urn:ietf:params:jmap:filenode'].supportedNodeTypes = ['File', 'Directory'];
+ const remote = server.remote();
+ const folder = await remote.createFolder('Docs', null);
+ const blob = await remote.upload(new TextEncoder().encode('hi'), 'text/plain; charset=utf-8');
+ await remote.createFile('a.txt', folder.id, blob);
+ const creates = server.sets.map((set) => Object.values(set.create as Record)[0]);
+ expect(creates[0]).toEqual({ '@type': 'Directory', name: 'Docs' });
+ expect(creates[1]).toEqual({ '@type': 'File', name: 'a.txt', parentId: folder.id, blobId: blob.blobId, mediaType: 'text/plain' });
+ });
+
+ it('moves into the Files trash the way the Files screen does', async () => {
+ const server = new FakeServer();
+ const remote = server.remote();
+ const a = server.file('a.txt', null, 'a');
+ const { trashId, batchId } = await remote.trash([a.id], null, null, 1_790_000_000_000);
+ expect(server.nodes.get(trashId)?.name).toBe('.Trash');
+ expect(server.nodes.get(batchId)?.name).toBe('1790000000000~');
+ expect(server.nodes.get(a.id)?.parentId).toBe(batchId);
+ });
+
+ it('keeps the tree in order as changes come', () => {
+ const tree = new RemoteTree();
+ tree.reset([
+ { id: 'd', parentId: null, name: 'D', kind: 'directory', blobId: null, size: 0, modifiedMs: 0, type: '' },
+ { id: 'f', parentId: 'd', name: 'f', kind: 'file', blobId: 'b', size: 1, modifiedMs: 0, type: '' },
+ { id: 't', parentId: null, name: '.Trash', kind: 'directory', blobId: null, size: 0, modifiedMs: 0, type: '' },
+ { id: 'x', parentId: 't', name: 'x', kind: 'file', blobId: 'b', size: 1, modifiedMs: 0, type: '' },
+ ], 's1');
+ expect(tree.subtree(null)?.map((node) => node.id)).toEqual(['d', 'f']);
+ expect(tree.inTrash('x')).toBe(true);
+ tree.apply({ changed: [], destroyed: ['d'] });
+ expect(tree.get('f')).toBeUndefined();
+ expect(tree.subtree('d')).toBeNull();
+ });
+});
+
+describe('names on disk', () => {
+ const win = namingFor('win32');
+
+ it('maps what Windows refuses and leaves the rest', () => {
+ expect(diskName('ac:d"e|f?g*h\\i.txt', win)).toBe('a＜b＞c：d＂e｜f？g＊h＼i.txt');
+ expect(diskName('CON', win)).toBe('CON_');
+ expect(diskName('nul.tar.gz', win)).toBe('nul_.tar.gz');
+ expect(diskName('com1.txt', win)).toBe('com1_.txt');
+ expect(diskName('console.txt', win)).toBe('console.txt');
+ expect(diskName('ends with dot.', win)).toBe('ends with dot._');
+ expect(diskName('ends with space ', win)).toBe('ends with space _');
+ expect(diskName('tab\there', win)).toBe('tab␉here');
+ expect(diskName('Grüße, Ärger.txt', win)).toBe('Grüße, Ärger.txt');
+ expect(diskName('a:b', namingFor('linux'))).toBe('a:b');
+ });
+
+ it('numbers a second name that differs only in case', () => {
+ const taken = new Set([nameKey('Report.txt', win)]);
+ expect(freeLocalName('report.txt', taken, win)).toBe('report (2).txt');
+ const linux = namingFor('linux');
+ expect(freeLocalName('report.txt', new Set([nameKey('Report.txt', linux)]), linux)).toBe('report.txt');
+ });
+
+ it('names a conflict copy with the device and the time', () => {
+ expect(conflictName('report.final.pdf', 'Windows', new Date(2026, 10, 4, 9, 5))).toBe('report.final (conflict, Windows, 2026-11-04 09.05).pdf');
+ expect(conflictName('.env', 'Mac', new Date(2026, 0, 1, 0, 0))).toBe('.env (conflict, Mac, 2026-01-01 00.00)');
+ });
+});
diff --git a/lib/files-sync/controls.ts b/lib/files-sync/controls.ts
new file mode 100644
index 000000000..5f2289c5e
--- /dev/null
+++ b/lib/files-sync/controls.ts
@@ -0,0 +1,28 @@
+/**
+ * The desktop app's Files on this computer calls, taken once per document in its first render
+ * (WindowControlsHost), as auth.claim and appLock.claim are: a same-origin plugin frame
+ * reaches `bulwarkDesktop` through `parent`, and main can't tell its calls from the page's.
+ * Whoever comes after the page gets nothing from the preload. Main also answers only the main
+ * window, so a pop-out's own claim is just its share of nothing.
+ */
+
+import { getDesktopBridge } from '@/lib/desktop/bridge';
+import type { FilesBridge, FilesControls } from '@/lib/desktop/types';
+
+let claimedFrom: FilesBridge | null | undefined;
+let claimed: FilesControls | null = null;
+
+export function claimFilesControls(): FilesControls | null {
+ const member = getDesktopBridge()?.files ?? null;
+ if (member !== claimedFrom) {
+ claimedFrom = member;
+ claimed = member?.claim?.() ?? null;
+ }
+ return claimed;
+}
+
+/** Tests only. */
+export function resetFilesControlsForTests(): void {
+ claimedFrom = undefined;
+ claimed = null;
+}
diff --git a/lib/files-sync/engine.ts b/lib/files-sync/engine.ts
new file mode 100644
index 000000000..9a4e6f707
--- /dev/null
+++ b/lib/files-sync/engine.ts
@@ -0,0 +1,688 @@
+/**
+ * Files on this computer: the engine for every root of the signed-in accounts. It keeps each
+ * account's FileNode tree current (a listing once, then FileNode/changes on push and on a slow
+ * poll), runs a RootSync per root when either side changed, and answers the drive's fetches.
+ *
+ * Main only does the disk (lib/desktop/types.ts FilesControls); everything that decides is here,
+ * in the page, with the app's own JMAP session. The host (host.ts) starts it in the main window
+ * and tells it which accounts are signed in.
+ *
+ * When a pass runs:
+ * - main's `onChange` for a root: soon after, so a burst of writes is one pass. `paths: null` is
+ * what a new, resumed or re-armed watch says first. A root id nobody knows: ask for the roots.
+ * - FileNode changes that touch a root: at once.
+ * - offline: again after 5 s, then longer, up to 5 minutes, and at once when the host hears the
+ * network is back.
+ * - every 10 minutes regardless, in case a change went unheard.
+ */
+
+import type { FilesControls, FilesFetchRequest, FilesRoot } from '@/lib/desktop/types';
+import { isOffline, type FilesSyncErrorName } from './errors';
+import type { DiskNaming } from './names';
+import { RemoteTree, type FilesRemote } from './remote';
+import { RootSync, type AccountLink, type ActivityInput } from './root-sync';
+import type { FilesSyncActivity, FilesSyncCoverage, FilesSyncItemStatus, FilesSyncRootStatus } from './types';
+
+export const ACTIVITY_LIMIT = 200;
+const PIECE = 1024 * 1024;
+const MOST_SOON = 5;
+
+export interface EngineTiming {
+ /** After main says something changed on disk. */
+ localDelayMs: number;
+ /** After a push says Files changed. */
+ remoteDelayMs: number;
+ /** /changes without a push, per account. */
+ pollMs: number;
+ /** A full pass of every root regardless. */
+ rescanMs: number;
+ /** Waits while offline, one after another; the last repeats. */
+ retryMs: number[];
+ /** Again after a pass where something changed while it was read. */
+ soonMs: number;
+ /** How long a drive fetch waits for the first listing. */
+ fetchWaitMs: number;
+}
+
+export const DEFAULT_TIMING: EngineTiming = {
+ localDelayMs: 1500,
+ remoteDelayMs: 300,
+ pollMs: 60_000,
+ rescanMs: 10 * 60_000,
+ retryMs: [5_000, 15_000, 30_000, 60_000, 120_000, 300_000],
+ soonMs: 3_000,
+ fetchWaitMs: 20_000,
+};
+
+export interface EngineOptions {
+ controls: FilesControls;
+ naming: DiskNaming;
+ device: string;
+ readUrl?: (url: string) => Promise;
+ now?: () => number;
+ timing?: Partial;
+ /** The organisation's word on a root: null when it may sync. */
+ blocked?: (root: FilesRoot) => FilesSyncErrorName | null;
+ /** May this account's files be downloaded to this computer? */
+ downloadsAllowed?: (account: string) => boolean;
+ /** Something the UI shows changed. */
+ onUpdate?: () => void;
+}
+
+async function fetchBytes(url: string): Promise {
+ const response = await fetch(url, { cache: 'no-store' });
+ if (!response.ok) throw new Error(`read failed: ${response.status}`);
+ return new Uint8Array(await response.arrayBuffer());
+}
+
+class Account implements AccountLink {
+ readonly tree = new RemoteTree();
+ private loaded = false;
+ private running: Promise | null = null;
+ private again = false;
+ private poll: ReturnType | null = null;
+ private readyWaiters: (() => void)[] = [];
+
+ constructor(
+ readonly account: string,
+ public remote: FilesRemote,
+ private readonly changed: (account: Account, ids: Set, origin: string | null) => void,
+ ) {}
+
+ get isLoaded(): boolean {
+ return this.loaded;
+ }
+
+ startPolling(ms: number, run: () => void): void {
+ this.stopPolling();
+ this.poll = setInterval(run, ms);
+ (this.poll as { unref?: () => void }).unref?.();
+ }
+
+ stopPolling(): void {
+ if (this.poll) clearInterval(this.poll);
+ this.poll = null;
+ }
+
+ /** Waits for the first listing, up to `ms`. */
+ ready(ms: number): Promise {
+ if (this.loaded) return Promise.resolve(true);
+ return new Promise((resolve) => {
+ const timer = setTimeout(() => resolve(false), ms);
+ this.readyWaiters.push(() => {
+ clearTimeout(timer);
+ resolve(true);
+ });
+ });
+ }
+
+ refresh(origin: string | null = null): Promise {
+ if (this.running) {
+ this.again = true;
+ return this.running;
+ }
+ this.running = (async () => {
+ try {
+ do {
+ this.again = false;
+ await this.catchUp(origin);
+ } while (this.again);
+ } finally {
+ this.running = null;
+ }
+ })();
+ return this.running;
+ }
+
+ private async catchUp(origin: string | null): Promise {
+ const ids = new Set();
+ if (!this.loaded || !this.tree.state) {
+ await this.listAll(ids);
+ } else {
+ const written = [...this.tree.written];
+ const heard = new Set();
+ const outcome = await this.remote.changes(this.tree.state, (batch, state) => {
+ for (const node of batch.changed) {
+ ids.add(node.id);
+ heard.add(node.id);
+ }
+ for (const id of batch.destroyed) {
+ ids.add(id);
+ heard.add(id);
+ }
+ this.tree.apply(batch);
+ this.tree.state = state;
+ });
+ // The server can't say what changed since then: read it all again. Only here.
+ if (outcome.outcome === 'resync') {
+ await this.listAll(ids);
+ } else {
+ for (const id of written) this.tree.written.delete(id);
+ // Made here and deleted elsewhere since: /changes says neither.
+ const unheard = written.filter((id) => !heard.has(id) && this.tree.get(id));
+ if (unheard.length > 0) {
+ const still = new Set((await this.remote.get(unheard)).map((node) => node.id));
+ for (const id of unheard) {
+ if (still.has(id)) continue;
+ this.tree.remove(id);
+ ids.add(id);
+ }
+ }
+ }
+ }
+ if (ids.size > 0) this.changed(this, ids, origin);
+ }
+
+ private async listAll(ids: Set): Promise {
+ const before = new Map(this.tree.nodes);
+ const { nodes, state } = await this.remote.listAll();
+ this.tree.reset(nodes, state);
+ // Whatever changed while it was read.
+ await this.remote.changes(state, (batch, next) => {
+ this.tree.apply(batch);
+ this.tree.state = next;
+ }).then((outcome) => {
+ if (outcome.outcome === 'resync') throw new Error('The FileNode state was refused right after a listing');
+ });
+ for (const [id, node] of this.tree.nodes) {
+ const old = before.get(id);
+ if (!old || old.parentId !== node.parentId || old.name !== node.name || old.blobId !== node.blobId) ids.add(id);
+ }
+ for (const id of before.keys()) if (!this.tree.nodes.has(id)) ids.add(id);
+ const first = !this.loaded;
+ this.loaded = true;
+ if (first) for (const waiter of this.readyWaiters.splice(0)) waiter();
+ }
+}
+
+class Runner {
+ private timer: ReturnType | null = null;
+ private due = 0;
+ private running: Promise | null = null;
+ private again = false;
+ private retryAt = 0;
+ private soon = 0;
+ private stopped = false;
+
+ constructor(readonly sync: RootSync, private readonly timing: EngineTiming) {}
+
+ get busy(): boolean {
+ return this.running !== null || (this.timer !== null && this.due - Date.now() <= Math.max(this.timing.localDelayMs, this.timing.soonMs));
+ }
+
+ get offline(): boolean {
+ return this.sync.status.state === 'offline';
+ }
+
+ request(delay: number): void {
+ if (this.stopped) return;
+ if (this.running) {
+ this.again = true;
+ return;
+ }
+ const due = Date.now() + delay;
+ if (this.timer) {
+ if (this.due <= due) return;
+ clearTimeout(this.timer);
+ }
+ this.due = due;
+ this.timer = setTimeout(() => {
+ this.timer = null;
+ void this.run();
+ }, delay);
+ }
+
+ private async run(): Promise {
+ if (this.stopped || this.running) return;
+ const pass = this.sync.pass().catch((error: unknown) => {
+ console.warn('[files-sync] A pass stopped:', error);
+ return 'retry' as const;
+ });
+ this.running = pass.then(() => {});
+ const outcome = await pass;
+ this.running = null;
+ if (this.stopped) return;
+ if (this.again) {
+ this.again = false;
+ this.request(0);
+ return;
+ }
+ if (outcome === 'retry') {
+ const waits = this.timing.retryMs;
+ this.request(waits[Math.min(this.retryAt, waits.length - 1)]);
+ this.retryAt += 1;
+ return;
+ }
+ this.retryAt = 0;
+ if (outcome === 'soon' && this.soon < MOST_SOON) {
+ this.soon += 1;
+ this.request(this.timing.soonMs);
+ return;
+ }
+ this.soon = 0;
+ }
+
+ /** Waits for what's running and whatever is due within the short delays. For tests and shutdown. */
+ async settle(): Promise {
+ for (let i = 0; i < 1000; i += 1) {
+ if (this.running) {
+ await this.running;
+ continue;
+ }
+ if (this.timer && this.due - Date.now() <= Math.max(this.timing.localDelayMs, this.timing.soonMs, this.timing.remoteDelayMs)) {
+ await new Promise((resolve) => setTimeout(resolve, Math.max(0, this.due - Date.now()) + 1));
+ continue;
+ }
+ return;
+ }
+ }
+
+ stop(): void {
+ this.stopped = true;
+ this.sync.stopped = true;
+ if (this.timer) clearTimeout(this.timer);
+ this.timer = null;
+ }
+}
+
+export class FilesSyncEngine {
+ roots: FilesRoot[] = [];
+ activity: FilesSyncActivity[] = [];
+ private readonly accounts = new Map();
+ private readonly runners = new Map();
+ private readonly timing: EngineTiming;
+ private readonly fetches = new Map();
+ private unsubscribe: (() => void)[] = [];
+ private rescan: ReturnType | null = null;
+ private rootsRun: Promise | null = null;
+ private rootsAgain = false;
+ private activitySeq = 0;
+ private stopped = false;
+ private readonly readUrl: (url: string) => Promise;
+ private readonly now: () => number;
+
+ constructor(private readonly options: EngineOptions) {
+ this.timing = { ...DEFAULT_TIMING, ...options.timing };
+ this.readUrl = options.readUrl ?? fetchBytes;
+ this.now = options.now ?? Date.now;
+ }
+
+ get controls(): FilesControls {
+ return this.options.controls;
+ }
+
+ start(): void {
+ const { controls } = this.options;
+ this.unsubscribe.push(controls.onChange((event) => {
+ const runner = this.runners.get(event.rootId);
+ if (!runner) {
+ void this.refreshRoots();
+ return;
+ }
+ runner.request(event.paths === null ? 0 : this.timing.localDelayMs);
+ }));
+ const drive = controls.drive;
+ if (drive) {
+ this.unsubscribe.push(drive.onFetch((request) => void this.fetch(request)));
+ this.unsubscribe.push(drive.onFetchCancel((fetchId) => {
+ const fetch = this.fetches.get(fetchId);
+ if (fetch) fetch.cancelled = true;
+ }));
+ }
+ this.rescan = setInterval(() => {
+ for (const runner of this.runners.values()) runner.request(0);
+ }, this.timing.rescanMs);
+ (this.rescan as { unref?: () => void }).unref?.();
+ void this.refreshRoots();
+ }
+
+ stop(): void {
+ this.stopped = true;
+ for (const stop of this.unsubscribe.splice(0)) stop();
+ if (this.rescan) clearInterval(this.rescan);
+ for (const runner of this.runners.values()) runner.stop();
+ this.runners.clear();
+ for (const account of this.accounts.values()) account.stopPolling();
+ this.accounts.clear();
+ for (const fetch of this.fetches.values()) fetch.cancelled = true;
+ }
+
+ // ─── Accounts ───────────────────────────────────────────────
+
+ /** A signed-in account and its way to Files. Its roots start. */
+ setAccount(account: string, remote: FilesRemote): void {
+ if (this.stopped) return;
+ const known = this.accounts.get(account);
+ if (known) {
+ known.remote = remote;
+ return;
+ }
+ const entry = new Account(account, remote, (from, ids, origin) => this.remoteTouched(from, ids, origin));
+ this.accounts.set(account, entry);
+ entry.startPolling(this.timing.pollMs, () => void this.pollAccount(account));
+ this.applyRoots();
+ }
+
+ /** Signed out, or gone: its roots stop. Nothing on disk changes. */
+ dropAccount(account: string): void {
+ const entry = this.accounts.get(account);
+ if (!entry) return;
+ entry.stopPolling();
+ this.accounts.delete(account);
+ for (const [id, runner] of this.runners) {
+ if (runner.sync.root.account !== account) continue;
+ runner.stop();
+ this.runners.delete(id);
+ }
+ this.update();
+ }
+
+ hasAccount(account: string): boolean {
+ return this.accounts.has(account);
+ }
+
+ /** A push said FileNode changed in this account. */
+ remoteChanged(account: string): void {
+ void this.pollAccount(account);
+ }
+
+ private async pollAccount(account: string): Promise {
+ const entry = this.accounts.get(account);
+ if (!entry?.isLoaded) {
+ // Nothing listed yet: a root's pass lists it.
+ for (const runner of this.runnersOf(account)) runner.request(this.timing.remoteDelayMs);
+ return;
+ }
+ try {
+ await entry.refresh();
+ } catch (error) {
+ if (!isOffline(error)) console.warn('[files-sync] Reading changes failed:', error);
+ }
+ }
+
+ /** The network is back: whatever waits goes now. */
+ retryNow(): void {
+ for (const runner of this.runners.values()) if (runner.offline) runner.request(0);
+ }
+
+ private runnersOf(account: string): Runner[] {
+ return [...this.runners.values()].filter((runner) => runner.sync.root.account === account);
+ }
+
+ private remoteTouched(account: Account, ids: Set, origin: string | null): void {
+ for (const runner of this.runnersOf(account.account)) {
+ if (runner.sync.root.id === origin) continue;
+ const remoteId = runner.sync.root.remoteId;
+ const touched = [...ids].some((id) => !!runner.sync.item(id) || account.tree.isUnder(id, remoteId) || id === remoteId);
+ if (touched) runner.request(this.timing.remoteDelayMs);
+ }
+ }
+
+ // ─── Roots ──────────────────────────────────────────────────
+
+ /** Asks main for the roots again and starts, changes or stops runners to match. */
+ refreshRoots(): Promise {
+ if (this.rootsRun) {
+ this.rootsAgain = true;
+ return this.rootsRun;
+ }
+ this.rootsRun = (async () => {
+ try {
+ do {
+ this.rootsAgain = false;
+ try {
+ this.roots = await this.options.controls.roots();
+ } catch {
+ this.roots = [];
+ }
+ this.applyRoots();
+ } while (this.rootsAgain && !this.stopped);
+ } finally {
+ this.rootsRun = null;
+ }
+ })();
+ return this.rootsRun;
+ }
+
+ private applyRoots(): void {
+ if (this.stopped) return;
+ const live = new Map(this.roots.map((root) => [root.id, root]));
+ for (const [id, runner] of this.runners) {
+ const root = live.get(id);
+ if (!root || !this.accounts.has(root.account)) {
+ runner.stop();
+ this.runners.delete(id);
+ continue;
+ }
+ const wasPaused = runner.sync.root.paused;
+ runner.sync.setRoot(root);
+ if (wasPaused && !root.paused) runner.request(0);
+ }
+ for (const root of this.roots) {
+ if (this.runners.has(root.id)) continue;
+ const account = this.accounts.get(root.account);
+ if (!account) continue;
+ const sync = new RootSync(root, {
+ account: account.account,
+ tree: account.tree,
+ get remote() {
+ return account.remote;
+ },
+ refresh: () => account.refresh(root.id),
+ }, {
+ controls: this.options.controls,
+ naming: this.options.naming,
+ device: this.options.device,
+ now: this.now,
+ readUrl: this.readUrl,
+ activity: (entry) => this.addActivity(entry),
+ changed: () => this.update(),
+ blocked: (current) => this.options.blocked?.(current) ?? null,
+ });
+ const runner = new Runner(sync, this.timing);
+ this.runners.set(root.id, runner);
+ runner.request(0);
+ }
+ this.update();
+ }
+
+ root(rootId: string): RootSync | null {
+ return this.runners.get(rootId)?.sync ?? null;
+ }
+
+ /** Runs a pass of a root (all of them without an id) now. */
+ syncNow(rootId?: string): void {
+ for (const [id, runner] of this.runners) if (!rootId || id === rootId) runner.request(0);
+ }
+
+ /** Waits until nothing runs or is due shortly. For tests and the sign-out. */
+ async settled(): Promise {
+ for (let i = 0; i < 50; i += 1) {
+ if (this.rootsRun) await this.rootsRun;
+ await Promise.all([...this.runners.values()].map((runner) => runner.settle()));
+ if (!this.rootsRun && [...this.runners.values()].every((runner) => !runner.busy)) return;
+ }
+ }
+
+ async setPaused(rootId: string, paused: boolean): Promise {
+ await this.options.controls.setPaused(rootId, paused);
+ await this.refreshRoots();
+ }
+
+ async removeRoot(rootId: string): Promise {
+ await this.options.controls.removeRoot(rootId);
+ await this.refreshRoots();
+ }
+
+ confirmMassDelete(rootId: string, allow: boolean): void {
+ const runner = this.runners.get(rootId);
+ if (!runner) return;
+ runner.sync.answerMassDelete(allow);
+ runner.request(0);
+ }
+
+ /** The drive's record goes before its folder does (sign-out): the next sign-in starts from an empty folder. */
+ async forgetRoot(rootId: string): Promise {
+ const runner = this.runners.get(rootId);
+ if (!runner) return;
+ runner.stop();
+ await runner.sync.forget();
+ this.runners.delete(rootId);
+ }
+
+ // ─── What the UI reads ──────────────────────────────────────
+
+ status(): Record {
+ const out: Record = {};
+ for (const [id, runner] of this.runners) out[id] = runner.sync.status;
+ return out;
+ }
+
+ items(account: string): Record {
+ const out: Record = {};
+ for (const runner of this.runnersOf(account)) Object.assign(out, runner.sync.items);
+ return out;
+ }
+
+ coverage(account: string, nodeId: string): FilesSyncCoverage | null {
+ for (const runner of this.runnersOf(account)) {
+ const { root } = runner.sync;
+ if (root.remoteId === nodeId) return { rootId: root.id, kind: root.kind, path: '' };
+ const item = runner.sync.item(nodeId);
+ if (item) return { rootId: root.id, kind: root.kind, path: item.path };
+ }
+ return null;
+ }
+
+ clearActivity(): void {
+ this.activity = [];
+ this.update();
+ }
+
+ private addActivity(entry: ActivityInput): void {
+ this.activitySeq += 1;
+ this.activity = [{ id: `${this.now()}-${this.activitySeq}`, at: this.now(), ...entry }, ...this.activity].slice(0, ACTIVITY_LIMIT);
+ this.update();
+ }
+
+ private update(): void {
+ this.options.onUpdate?.();
+ }
+
+ // ─── The drive's fetches ────────────────────────────────────
+
+ /**
+ * Someone opened a file on the drive that isn't on the disk: stream its content to main, from
+ * where Windows asked (rounded down to 4 KB) to the end, in order. Main fails a fetch it hears
+ * nothing of for 30 s, and Windows cancels after 60 s.
+ */
+ async fetch(request: FilesFetchRequest): Promise {
+ const drive = this.options.controls.drive;
+ if (!drive) return;
+ const handle = { cancelled: false };
+ this.fetches.set(request.fetchId, handle);
+ try {
+ let runner = this.runners.get(request.rootId);
+ if (!runner) {
+ await this.refreshRoots();
+ runner = this.runners.get(request.rootId);
+ }
+ if (!runner || runner.sync.root.kind !== 'drive') {
+ drive.fail(request.fetchId, this.accountsKnown(request.rootId) ? 'failed' : 'offline');
+ return;
+ }
+ const { root } = runner.sync;
+ if (this.options.downloadsAllowed && !this.options.downloadsAllowed(root.account)) {
+ drive.fail(request.fetchId, 'failed');
+ return;
+ }
+ const account = this.accounts.get(root.account);
+ if (!account || !(await account.ready(this.timing.fetchWaitMs))) {
+ drive.fail(request.fetchId, 'offline');
+ return;
+ }
+ // The newest version, not one deleted or replaced since the last push. Offline: what's known.
+ await account.refresh().catch(() => {});
+ const node = account.tree.get(request.identity);
+ if (!node || node.kind !== 'file' || account.tree.inTrash(node.id)) {
+ drive.fail(request.fetchId, 'missing');
+ runner.request(this.timing.remoteDelayMs);
+ return;
+ }
+ if (node.size !== request.total) {
+ // The placeholder is older than the file: the pass puts the new one there.
+ drive.fail(request.fetchId, 'failed');
+ runner.request(0);
+ return;
+ }
+ await this.stream(request, node, account, handle);
+ } catch (error) {
+ if (!handle.cancelled) drive.fail(request.fetchId, isOffline(error) ? 'offline' : 'failed');
+ } finally {
+ this.fetches.delete(request.fetchId);
+ }
+ }
+
+ private accountsKnown(rootId: string): boolean {
+ const root = this.roots.find((entry) => entry.id === rootId);
+ return !!root && this.accounts.has(root.account);
+ }
+
+ private async stream(request: FilesFetchRequest, node: { blobId: string | null; type: string; name: string; size: number }, account: Account, handle: { cancelled: boolean }): Promise {
+ const drive = this.options.controls.drive;
+ if (!drive) return;
+ const start = Math.max(0, request.offset);
+ let at = 0;
+ let sent = start;
+ let pending: Uint8Array[] = [];
+ let pendingBytes = 0;
+ let chain: Promise = Promise.resolve(true);
+ let refused = false;
+ const STOP = 'files-sync:fetch-stopped';
+ const flush = (all: boolean) => {
+ if (pendingBytes === 0 || (!all && pendingBytes < PIECE)) return;
+ const piece = joinParts(pending, pendingBytes);
+ pending = [];
+ pendingBytes = 0;
+ const offset = sent;
+ sent += piece.length;
+ chain = chain.then(async (good) => {
+ if (!good || handle.cancelled) return false;
+ const taken = await drive.supply(request.fetchId, offset, piece);
+ if (!taken) refused = true;
+ return taken;
+ });
+ };
+ try {
+ await account.remote.download(node, (part) => {
+ if (handle.cancelled || refused) throw new Error(STOP);
+ let slice = part;
+ if (at + part.length <= start) {
+ at += part.length;
+ return;
+ }
+ if (at < start) slice = part.subarray(start - at);
+ at += part.length;
+ pending.push(slice);
+ pendingBytes += slice.length;
+ flush(false);
+ });
+ } catch (error) {
+ if ((error as Error)?.message === STOP) return;
+ throw error;
+ }
+ flush(true);
+ await chain;
+ }
+}
+
+function joinParts(parts: Uint8Array[], size: number): Uint8Array {
+ if (parts.length === 1) return parts[0];
+ const out = new Uint8Array(size);
+ let at = 0;
+ for (const part of parts) {
+ out.set(part, at);
+ at += part.length;
+ }
+ return out;
+}
diff --git a/lib/files-sync/errors.ts b/lib/files-sync/errors.ts
new file mode 100644
index 000000000..b62063042
--- /dev/null
+++ b/lib/files-sync/errors.ts
@@ -0,0 +1,92 @@
+/**
+ * What went wrong, in the words the settings page shows: keys under `files_sync.errors.`
+ * (the ui writes the strings). Errors are told apart by name, not instanceof: Next has more
+ * than one copy of a module.
+ */
+
+import type { FilesError } from '@/lib/desktop/types';
+
+export type FilesSyncErrorName =
+ | 'offline'
+ | 'server_refused'
+ | 'too_large'
+ | 'name_invalid'
+ | 'disk_full'
+ | 'denied'
+ | 'busy'
+ | 'quota'
+ | 'not_found'
+ | 'policy'
+ | 'failed';
+
+/** The key in the `files_sync` namespace. */
+export function errorKey(name: FilesSyncErrorName): string {
+ return `errors.${name}`;
+}
+
+/** A disk answer the engine can't go on from for this item. */
+export class LocalError extends Error {
+ constructor(readonly error: FilesError) {
+ super(`files:${error}`);
+ this.name = 'LocalError';
+ }
+}
+
+export function localErrorName(error: FilesError): FilesSyncErrorName {
+ switch (error) {
+ case 'full':
+ return 'disk_full';
+ case 'denied':
+ case 'outside':
+ case 'gesture':
+ return 'denied';
+ case 'busy':
+ return 'busy';
+ case 'name':
+ return 'name_invalid';
+ case 'policy':
+ return 'policy';
+ case 'missing':
+ return 'not_found';
+ default:
+ return 'failed';
+ }
+}
+
+/** The server can't be reached, or is too busy now: the work waits, nothing failed. */
+export function isOffline(error: unknown): boolean {
+ const e = error as { name?: string; kind?: string; status?: number } | null;
+ if (e?.name !== 'TransportError') return false;
+ if (e.kind === 'network' || e.kind === 'rate') return true;
+ return e.kind === 'http' && typeof e.status === 'number' && e.status >= 500;
+}
+
+/** The server no longer takes this login. */
+export function isAuthRefused(error: unknown): boolean {
+ const e = error as { name?: string; kind?: string } | null;
+ return e?.name === 'TransportError' && e.kind === 'auth';
+}
+
+/** What a server error on one item means. */
+export function remoteErrorName(error: unknown): FilesSyncErrorName {
+ const e = error as { name?: string; type?: string; status?: number } | null;
+ if (isOffline(error)) return 'offline';
+ if (isAuthRefused(error)) return 'server_refused';
+ if (e?.name === 'TransportError' && e.status === 413) return 'too_large';
+ switch (e?.type) {
+ case 'overQuota':
+ return 'quota';
+ case 'forbidden':
+ case 'accountReadOnly':
+ return 'denied';
+ case 'notFound':
+ return 'not_found';
+ case 'tooLarge':
+ return 'too_large';
+ case 'invalidProperties':
+ case 'alreadyExists':
+ return 'name_invalid';
+ default:
+ return 'failed';
+ }
+}
diff --git a/lib/files-sync/host.ts b/lib/files-sync/host.ts
new file mode 100644
index 000000000..eb707d1fd
--- /dev/null
+++ b/lib/files-sync/host.ts
@@ -0,0 +1,329 @@
+/**
+ * Files on this computer in the page: starts the engine in the desktop app's main window, for
+ * the signed-in accounts, publishes what it does to stores/files-sync-store.ts and registers the
+ * controller the settings page and the Files screen use. The React side
+ * (components/providers/files-sync-host.tsx) feeds it the accounts, push and the policies.
+ *
+ * Each account reaches Files through the app's own JMAP session: the session resource and
+ * Authorization header the app's client holds, read when a request goes and renewed through
+ * it (as offline mode does). Nothing here writes a token or a password anywhere.
+ *
+ * What happens to an account's roots when it leaves (FILES-SYNC-BRIEF.md):
+ * - sign-out: the drive goes (`signed-out` keeps the wish, so the next sign-in brings it back
+ * without a click), and the folders stop syncing until then;
+ * - a wipe (lib/offline/wipe-registry.ts): the drive goes with everything in it, and the
+ * folders are forgotten; their files stay, they were the user's;
+ * - a refused login the server was sure of: the same as a wipe for these.
+ */
+
+import type { FilesControls, FilesDriveState, FilesResult, FilesRoot } from '@/lib/desktop/types';
+import { FetchTransport, type StoreSession } from '@/lib/store/engine/transport';
+import { FilesSyncEngine, type EngineTiming } from './engine';
+import type { FilesSyncErrorName } from './errors';
+import { namingFor } from './names';
+import { FilesRemote } from './remote';
+import type { FilesSyncController, FilesSyncSnapshot } from './types';
+
+/** What the host needs of the app's JMAP client. */
+export interface SessionClient {
+ getSessionSnapshot(): unknown;
+ getAuthHeader(): string;
+ isOfflineOnly?(): boolean;
+ requestNetworkOnly?(calls: [string, Record, string][]): Promise
list.length), rowCapacity, moreInHeader) : null;
const hiddenPerDay = fit?.hidden ?? null;
// Rows that grow with their content make room for the new event's preview.
- const previewRows = !capRows && pendingPreview && week.some((day) => checkIsSameDay(pendingPreview.start, day)) ? 1 : 0;
+ const previewRows = !capRows && pendingPreview && week.some((day) => checkIsSameDay(pendingPreview.start, day) || isInMonthRange(day, draftRange)) ? 1 : 0;
return (
) => void),
+ // A slow runner: the mount is counted a task after the composer is on
+ // screen, as when React runs its effects late (CI, compose-p2-1).
+ lateMount: false,
}));
vi.mock('@/components/layout/mv-top-bar', () => ({ MvTopBar: () => null }));
@@ -42,7 +45,8 @@ vi.mock('@/components/email/email-composer', async () => {
}) => {
const closed = useRef(false);
useEffect(() => {
- stub.mounts.push(mode);
+ if (stub.lateMount) setTimeout(() => stub.mounts.push(mode), 0);
+ else stub.mounts.push(mode);
stub.restore = onRestoreDiscarded ?? null;
// The old host moved the composer between dock and pane for ever
// (React error 185 in the browser); stop it here instead of hanging.
@@ -122,6 +126,7 @@ beforeEach(() => {
stub.closes = [];
stub.mounts = [];
stub.restore = null;
+ stub.lateMount = false;
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) });
@@ -157,24 +162,39 @@ afterEach(() => {
const composerMode = () => screen.getByTestId('stub-composer').getAttribute('data-mode');
-describe('Compose while a reply is docked (compose-p2-1)', () => {
- for (const action of ['stub reply', 'stub forward']) {
- it(`opens a new message in the pane after ${action}`, async () => {
- render( void handleEmailSelect(openFailure.target)} />
: undefined}
diff --git a/components/plugins/__tests__/plugin-dialog-window.test.tsx b/components/plugins/__tests__/plugin-dialog-window.test.tsx
new file mode 100644
index 000000000..dccd7b59e
--- /dev/null
+++ b/components/plugins/__tests__/plugin-dialog-window.test.tsx
@@ -0,0 +1,103 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+
+// In the desktop app a plugin's confirm or alert is a window of its own. The host
+// names the plugin there, the plugin's text stays text, and the ⋮ menu still
+// turns the plugin off. Prompts stay in the page.
+
+vi.mock('next-intl', () => ({
+ useTranslations: () => (key: string, values?: { name?: string }) => (values?.name ? `${key}:${values.name}` : key),
+}));
+vi.mock('../plugin-iframe-slot', () => ({ PluginIframeSlot: () => null }));
+
+import { PluginDialogHost } from '../plugin-dialog-host';
+import { awaitDialog, awaitPrompt, head, resetDialogLimits, resolveHead } from '@/lib/plugin-sandbox/host-dialog';
+import { usePluginStore } from '@/stores/plugin-store';
+import type { BulwarkDesktopBridge, DesktopDialogWindowAnswer, DesktopDialogWindowRequest } from '@/lib/desktop/types';
+
+type Show = (request: DesktopDialogWindowRequest) => Promise;
+let answer: (value: DesktopDialogWindowAnswer) => void;
+let show: ReturnType>;
+let disablePlugin: ReturnType;
+
+beforeEach(() => {
+ while (head()) resolveHead(null);
+ resetDialogLimits();
+ show = vi.fn(() => new Promise((resolve) => (answer = resolve)));
+ window.bulwarkDesktop = { version: 1, platform: 'win32', dialogs: { confirm: vi.fn(), show, cancel: vi.fn() } } as unknown as BulwarkDesktopBridge;
+ disablePlugin = vi.fn();
+ usePluginStore.setState({ plugins: [{ id: 'elw', name: 'External Link Warning' }] as never, disablePlugin } as never);
+});
+
+afterEach(() => {
+ window.bulwarkDesktop = undefined;
+});
+
+const LINK = {
+ pluginId: 'elw',
+ kind: 'confirm' as const,
+ title: 'Open external link?',
+ message: 'You\'re about to visit **github.com**.\n
',
+ confirmLabel: 'Continue',
+};
+
+describe('plugin dialogs in the desktop app', () => {
+ it('asks in a window with the plugin named in the host\'s line and its text as text', async () => {
+ render(;
+ act(() => { result = awaitDialog(LINK); });
+
+ expect(screen.queryByRole('dialog')).toBeNull();
+ expect(show).toHaveBeenCalledTimes(1);
+ expect(show.mock.calls[0][0]).toMatchObject({
+ title: 'Open external link?',
+ source: 'from_plugin:External Link Warning',
+ message: [{ text: 'You\'re about to visit ' }, { text: 'github.com', bold: true }, { text: '.\n' }],
+ buttons: [{ label: 'cancel', variant: 'secondary' }, { label: 'Continue', variant: 'primary' }],
+ defaultIndex: 1,
+ menu: { label: 'plugin_menu:External Link Warning', items: [{ id: 'turn-off', label: 'turn_off:External Link Warning', destructive: true }] },
+ });
+
+ await act(async () => answer({ button: 1 }));
+ await expect(result!).resolves.toBe(true);
+ expect(head()).toBeNull();
+ });
+
+ it('Cancel or Escape is no; "Turn off" in the menu turns the plugin off', async () => {
+ render(;
+ act(() => { result = awaitDialog(LINK); });
+ await act(async () => answer(null));
+ await expect(result!).resolves.toBe(false);
+
+ act(() => { result = awaitDialog(LINK); });
+ await act(async () => answer({ menu: 'turn-off' }));
+ await expect(result!).resolves.toBe(false);
+ expect(disablePlugin).toHaveBeenCalledWith('elw');
+ });
+
+ it('an alert has one button, and a destructive confirm starts on Cancel', async () => {
+ render(;
+ act(() => resolveHead(false));
+ expect(cancel).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/components/plugins/app-side-panel.tsx b/components/plugins/app-side-panel.tsx
index b6a04ff03..13461a519 100644
--- a/components/plugins/app-side-panel.tsx
+++ b/components/plugins/app-side-panel.tsx
@@ -20,6 +20,7 @@
// { view, context }), and so does api.ui.openPanel there.
import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { formatShortcutCombo } from '@/lib/shortcut-keys';
import { useTranslations } from 'next-intl';
import { PanelRightClose, PanelRightOpen } from '@/components/icons';
import { Button } from '@/components/ui/button';
@@ -72,7 +73,7 @@ export function PluginPanelToggle({ open, onClick, className, buttonRef, shortcu
size="icon"
onClick={onClick}
className={cn('h-8 w-8 shrink-0', className)}
- title={shortcut ? `${label} (${shortcut})` : label}
+ title={shortcut ? `${label} (${formatShortcutCombo(shortcut)})` : label}
aria-label={label}
aria-pressed={open}
aria-keyshortcuts={shortcut ?? undefined}
diff --git a/components/plugins/plugin-dialog-host.tsx b/components/plugins/plugin-dialog-host.tsx
index 24ed5d314..ef3ef1160 100644
--- a/components/plugins/plugin-dialog-host.tsx
+++ b/components/plugins/plugin-dialog-host.tsx
@@ -14,6 +14,11 @@
// (dialog-anchor.ts), with a one-line header naming the plugin. `fill: true`
// gives either form a fixed height the plugin's frame fills (a chat), so an
// anchored, filled dialog is a tall popover beside the control.
+//
+// In the desktop app a confirm or alert is a window of its own instead
+// (lib/desktop/dialog-window.ts), with the same parts: the title, the
+// "From the plugin" line, the ⋮ menu and the buttons. Prompts and custom
+// dialogs stay here: they hold fields and the plugin's own frame.
import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
import { useTranslations } from 'next-intl';
@@ -25,8 +30,11 @@ import { useFocusTrap } from '@/hooks/use-focus-trap';
import { toast } from '@/stores/toast-store';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
+import { ContextMenu, ContextMenuItem } from '@/components/ui/context-menu';
+import { useContextMenu } from '@/hooks/use-context-menu';
import { iconForName, Loader2, MoreVertical, Power, Puzzle, X } from '@/components/icons';
import { cn } from '@/lib/utils';
+import { askInWindow, dialogWindowsAvailable } from '@/lib/desktop/dialog-window';
import { PluginIframeSlot } from './plugin-iframe-slot';
import type { SlotName } from '@/lib/plugin-types';
@@ -65,12 +73,77 @@ export function PluginDialogHost(): React.JSX.Element | null {
return (
<>
- {base && (null);
- useEffect(() => {
- if (!open) return;
- const onDown = (e: MouseEvent) => {
- if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
- };
- document.addEventListener('mousedown', onDown, true);
- return () => document.removeEventListener('mousedown', onDown, true);
- }, [open]);
+ const menu = useContextMenu();
+ const open = menu.contextMenu.isOpen;
return (
- , "children">) {
return (
- {keys}
+ {formatShortcutCombo(keys)}
);
}
@@ -752,7 +806,6 @@ export function ContextMenuSubMenu({
hint,
}: ContextMenuSubMenuProps) {
const parent = useContext(MenuLevelContext);
- const native = useContext(NativeMenuContext);
const id = useId();
// Outside a ContextMenu (a host's own panel) it keeps its own state.
const [localOpen, setLocalOpen] = useState(false);
@@ -842,19 +895,15 @@ export function ContextMenuSubMenu({
- {native && !disabled && (
- 0 ? week[dayIndex - 1] : addDays(day, -1);
const firstOfMonth = !checkIsSameMonth(day, previous);
+ const picked = isInMonthRange(day, highlight);
return (
+ { logoutMenu.closeContextMenu(); logout(); }} />
+ {accounts.length > 1 && (
+ { logoutMenu.closeContextMenu(); logoutAll(); }} />
+ )}
+
)}
diff --git a/components/layout/phone-header-actions.tsx b/components/layout/phone-header-actions.tsx
index 7e74c7074..7d5ac90c9 100644
--- a/components/layout/phone-header-actions.tsx
+++ b/components/layout/phone-header-actions.tsx
@@ -1,14 +1,14 @@
"use client";
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
import { useTranslations } from "next-intl";
import { MoreVertical, Terminal, Bell } from "@/components/icons";
import { IconButton } from "@/components/ui/icon-button";
-import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
import { AccountSwitcher } from "@/components/layout/account-switcher";
import { PluginActions } from "@/components/plugins/plugin-actions";
import { AppSidePanelPhoneButton } from "@/components/plugins/app-side-panel";
-import { useMenuNavigation } from "@/hooks/use-menu-navigation";
+import { useContextMenu } from "@/hooks/use-context-menu";
import { useIsDesktop, useIsMobile } from "@/hooks/use-media-query";
import { openCommandPalette } from "@/lib/app-commands";
import { cn } from "@/lib/utils";
@@ -41,29 +41,17 @@ export function PhoneHeaderMenu({ menuItems }: PhoneHeaderMenuProps) {
const tNotifications = useTranslations("notification_center");
const unread = useUnreadNotificationCount();
const [showNotifications, setShowNotifications] = useState(false);
- const [open, setOpen] = useState(false);
- const triggerRef = useRef(null);
- const close = useCallback(() => setOpen(false), []);
- const { menuRef, onKeyDown } = useMenuNavigation({ open, onClose: close, triggerRef });
-
- useEffect(() => {
- if (!open) return;
- const onPointerDown = (e: MouseEvent) => {
- if (triggerRef.current?.contains(e.target as Node) || menuRef.current?.contains(e.target as Node)) return;
- setOpen(false);
- };
- document.addEventListener("mousedown", onPointerDown);
- return () => document.removeEventListener("mousedown", onPointerDown);
- }, [open, menuRef]);
+ const menu = useContextMenu();
+ const open = menu.contextMenu.isOpen;
+ const close = menu.closeContextMenu;
const appItems = menuItems?.(close);
return (
setOpen((v) => !v)}
+ onClick={(e) => (open ? close() : menu.openContextMenuFrom(e.currentTarget, null, "end"))}
className={cn(open && "bg-accent")}
label={unread > 0 ? `${t("more")} (${tNotifications("unread_count", { count: unread })})` : t("more")}
title=""
@@ -75,14 +63,7 @@ export function PhoneHeaderMenu({ menuItems }: PhoneHeaderMenuProps) {
)}
- {open && (
- setShowNotifications(false)} />}
);
diff --git a/components/layout/window-controls-host.tsx b/components/layout/window-controls-host.tsx
index 1681da6f0..a80fbd422 100644
--- a/components/layout/window-controls-host.tsx
+++ b/components/layout/window-controls-host.tsx
@@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import { applyControlsArea, watchTitlebarArea, watchWindowRows, type TitlebarArea } from "@/lib/window-controls-overlay";
import { claimBrowserSignIn } from "@/lib/desktop/browser-sign-in";
+import { claimFilesControls } from "@/lib/files-sync/controls";
/**
* The window's controls over the app, with no title bar row: see
@@ -13,7 +14,10 @@ import { claimBrowserSignIn } from "@/lib/desktop/browser-sign-in";
export function WindowControlsHost() {
// In the first render of every page, before any frame exists: a frame can reach the
// bridge, and whoever comes after this gets nothing.
- if (typeof window !== "undefined") claimBrowserSignIn();
+ if (typeof window !== "undefined") {
+ claimBrowserSignIn();
+ claimFilesControls();
+ }
const [area, setArea] = useState(null);
useEffect(() => watchTitlebarArea((next) => {
diff --git a/components/layout/window-menu-bar.tsx b/components/layout/window-menu-bar.tsx
index 33e8f517e..c94eb190d 100644
--- a/components/layout/window-menu-bar.tsx
+++ b/components/layout/window-menu-bar.tsx
@@ -2,7 +2,14 @@
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { useTranslations } from "next-intl";
-import { Check, ChevronRight } from "@/components/icons";
+import {
+ Archive, ArrowLeft, ArrowRight, BookOpen, Calendar, CalendarDays, CalendarPlus, Check, CheckSquare, ChevronDown,
+ ChevronRight, ChevronUp, Clipboard, Copy, Download, ExternalLink, FileText, FolderInput, Forward, Inbox, Info, Keyboard,
+ Lock, LogOut, Mail, MailOpen, Maximize2, Minus, Paperclip, PanelRight, Printer, RefreshCw, Reply, ReplyAll, Save, Scissors,
+ Search, Send, Settings, ShieldAlert, SquarePen, Star, Trash2, Undo, Redo, Upload, UserPlus, Users, Folder, ZoomIn, ZoomOut,
+ Server, RotateCcw, LayoutGrid, LayoutList, LayoutTemplate, Zap, Power,
+} from "@/components/icons";
+import { CONTEXT_MENU_PANEL_CLASS, MenuShortcut } from "@/components/ui/context-menu";
import { getDesktopBridge } from "@/lib/desktop/bridge";
import { MENU_BAR_ATTRIBUTE, cachedMenuBarPinned, menuKeyText, rememberMenuBarPinned } from "@/lib/desktop/menu-bar";
import type { DesktopMenuBarEntry, DesktopMenuBarItem, DesktopMenuBarMenu } from "@/lib/desktop/types";
@@ -23,6 +30,39 @@ import { cn } from "@/lib/utils";
*/
const LINE = "[data-menu-line]";
+
+type Glyph = React.ComponentType<{ className?: string }>;
+
+/**
+ * The icon of each line of the shell's menus, by its id (src/main/menu.ts in the desktop
+ * repo; a role's line comes as `role.`), so the bar's menus look like every other
+ * menu in the app. A shell that sends no ids gets the lines without icons.
+ */
+const MENU_BAR_ICONS: Record = {
+ "file.newMessage": SquarePen, "file.newEvent": CalendarPlus, "file.newTask": CheckSquare, "file.newContact": UserPlus,
+ "file.quickCompose": Zap, "file.newWindow": ExternalLink, "file.print": Printer, "file.savePdf": Download,
+ "file.import": Upload, "file.importMenu": Upload, "file.importCalendar": Calendar, "file.importContacts": Users,
+ "file.settings": Settings, "app.settings": Settings, "file.switchMode": Server, "file.lock": Lock, "file.close": Minus,
+ "file.quit": Power, "role.quit": Power, "role.close": Minus,
+ "role.undo": Undo, "role.redo": Redo, "role.cut": Scissors, "role.copy": Copy, "role.paste": Clipboard,
+ "role.selectAll": CheckSquare, "role.selectall": CheckSquare, "edit.search": Search,
+ "view.refresh": RefreshCw, "view.calendar.day": CalendarDays, "view.calendar.week": CalendarDays,
+ "view.calendar.month": CalendarDays, "view.calendar.agenda": CalendarDays, "view.readingPane": PanelRight,
+ "view.layout.split": PanelRight, "view.layout.horizontal": LayoutList, "view.layout.focus": LayoutTemplate,
+ "view.zoomIn": ZoomIn, "view.zoomOut": ZoomOut, "view.zoomReset": RotateCcw,
+ "role.togglefullscreen": Maximize2, "role.toggleFullScreen": Maximize2,
+ "compose.send": Send, "compose.saveDraft": Save, "compose.attach": Paperclip,
+ "message.reply": Reply, "message.replyAll": ReplyAll, "message.forward": Forward, "message.markRead": MailOpen,
+ "message.markUnread": Mail, "message.star": Star, "message.move": FolderInput, "message.archive": Archive,
+ "message.spam": ShieldAlert, "message.delete": Trash2, "message.openWindow": ExternalLink,
+ "go.inbox": Inbox, "go.sent": Send, "go.drafts": FileText, "go.nextMessage": ChevronDown, "go.previousMessage": ChevronUp,
+ "go.nextUnread": MailOpen, "go.mail": Mail, "go.calendar": Calendar, "go.contacts": Users, "go.files": Folder,
+ "go.back": ArrowLeft, "go.forward": ArrowRight, "go.today": CalendarDays, "go.nextPeriod": ChevronRight,
+ "go.previousPeriod": ArrowLeft,
+ "window.minimize": Minus, "role.minimize": Minus, "window.cycle": LayoutGrid,
+ "help.shortcuts": Keyboard, "help.docs": BookOpen, "help.updates": Download, "help.restart": RefreshCw, "help.about": Info,
+ "role.about": Info, "app.lock": Lock, "file.unlock": Lock, "app.logout": LogOut,
+};
const ENABLED_LINE = `${LINE}:not([aria-disabled="true"])`;
type Focus = { kind: "name"; index: number } | { kind: "line" | "panel"; sub?: boolean };
@@ -363,6 +403,7 @@ export function WindowMenuBar() {
const isSub = item.type === "submenu";
const checkable = item.type === "checkbox" || item.type === "radio";
const opened = level === "panel" && isSub && sub === index;
+ const LineIcon = item.id ? MENU_BAR_ICONS[item.id] : undefined;
return (
);
@@ -456,7 +501,7 @@ export function WindowMenuBar() {
aria-label={menu.label}
data-menu-panel=""
tabIndex={-1}
- className="absolute start-0 top-full mt-0.5 min-w-56 max-w-[min(24rem,90vw)] max-h-[calc(100dvh-2.75rem)] overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none"
+ className={cn("absolute start-0 top-full mt-0.5 min-w-56 max-w-[min(22rem,90vw)] max-h-[calc(100dvh-2.75rem)] overflow-y-auto py-1 text-foreground outline-none", CONTEXT_MENU_PANEL_CLASS)}
>
{renderLines(openItems, "panel")}
@@ -466,7 +511,7 @@ export function WindowMenuBar() {
role="menu"
aria-label={openItems[sub]?.label}
data-menu-subpanel=""
- className="fixed z-10 min-w-44 max-w-[min(24rem,90vw)] max-h-[calc(100dvh-0.5rem)] overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+ className={cn("fixed z-10 min-w-44 max-w-[min(22rem,90vw)] max-h-[calc(100dvh-0.5rem)] overflow-y-auto py-1 text-foreground", CONTEXT_MENU_PANEL_CLASS)}
style={{ top: -9999, left: -9999 }}
>
{renderLines(subItems, "subpanel")}
diff --git a/components/mail/__tests__/mail-app-composer-replace.test.tsx b/components/mail/__tests__/mail-app-composer-replace.test.tsx
index d3ade0db1..3e03e6830 100644
--- a/components/mail/__tests__/mail-app-composer-replace.test.tsx
+++ b/components/mail/__tests__/mail-app-composer-replace.test.tsx
@@ -22,6 +22,9 @@ const stub = vi.hoisted(() => ({
closes: [] as string[],
mounts: [] as string[],
restore: null as null | ((data: Record {
+ // The end of a drag over days, not a click on this one.
+ if (rangeSelect.wasDragging.current) return;
onSelectDate(day);
// On phones a tap opens the day instead.
if (!isMobile) onCreateAllDay?.(day);
@@ -550,7 +616,8 @@ export function CalendarMonthView({
!inMonth && "bg-muted/30",
"hover:bg-muted/50",
selected && isMobile && "bg-primary/10",
- dropDayKey === key && "ring-2 ring-inset ring-primary bg-primary/10"
+ dropDayKey === key && "ring-2 ring-inset ring-primary bg-primary/10",
+ picked && "bg-primary/15 hover:bg-primary/15"
)}
>
void;
icon?: React.ComponentType<{ className?: string }>;
}) {
- return (
-
- );
+ return (null);
- // Portalled to , so without explicit focus handling the menu is
- // unreachable for keyboard and screen reader users (#719).
- const closeLogoutMenu = useCallback(() => setLogoutMenuOpen(false), []);
- const { menuRef: logoutPopoverRef, onKeyDown: onLogoutMenuKeyDown } = useMenuNavigation({
- open: logoutMenuOpen,
- onClose: closeLogoutMenu,
- triggerRef: logoutBtnRef,
- });
- const [logoutPopoverStyle, setLogoutPopoverStyle] = useState({});
+ // Sign out: the app's own menu, as every ⋮ and right-click has it.
+ const logoutMenu = useContextMenu();
+ const logoutMenuOpen = logoutMenu.contextMenu.isOpen;
const [showShortcutsModal, setShowShortcutsModal] = useState(false);
- const updateLogoutPosition = useCallback(() => {
- if (!logoutBtnRef.current) return;
- const rect = logoutBtnRef.current.getBoundingClientRect();
- setLogoutPopoverStyle(
- isDocumentRTL()
- ? {
- position: "fixed",
- right: window.innerWidth - rect.left + 8,
- bottom: Math.max(8, window.innerHeight - rect.bottom),
- }
- : {
- position: "fixed",
- left: rect.right + 8,
- bottom: Math.max(8, window.innerHeight - rect.bottom),
- }
- );
- }, []);
-
- // Position before the first paint (same reasoning as the quota popover above).
- useLayoutEffect(() => {
- if (logoutMenuOpen) updateLogoutPosition();
- }, [logoutMenuOpen, updateLogoutPosition]);
-
- useEffect(() => {
- if (!logoutMenuOpen) return;
- const handleClickOutside = (e: MouseEvent) => {
- if (
- logoutBtnRef.current?.contains(e.target as Node) ||
- logoutPopoverRef.current?.contains(e.target as Node)
- ) return;
- setLogoutMenuOpen(false);
- };
- const handleEscape = (e: KeyboardEvent) => {
- if (e.key === "Escape") setLogoutMenuOpen(false);
- };
- document.addEventListener("mousedown", handleClickOutside);
- document.addEventListener("keydown", handleEscape);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- document.removeEventListener("keydown", handleEscape);
- };
- }, [logoutMenuOpen, logoutPopoverRef]);
const navItems: NavItem[] = [
@@ -952,10 +903,9 @@ export function NavigationRail({
)}
- {/* Logout button with popover */}
+ {/* Sign out, with a menu */}
-
- {logoutMenuOpen && createPortal(
-
@@ -649,6 +716,7 @@ export function CalendarMonthView({
isMobile={isMobile}
calendarMap={calendarMap}
pendingPreview={pendingPreview}
+ draftRange={draftRange}
lastRow={capRows ? rowCapacity - 1 : Infinity}
selectedEventId={selectedEventId}
currentUserEmails={currentUserEmails}
@@ -693,7 +761,7 @@ type WeekSegment = ReturnType[number];
*/
function MonthCellEntries({
dayIndex, week, segments, rowLimit, isShown, rowCount, dayEventRows, dayTasks, hidden, overlayTop, rowHeight, chipHeight,
- isMobile, calendarMap, pendingPreview, lastRow, selectedEventId, currentUserEmails, canEditEvent, inView, timedStyle,
+ isMobile, calendarMap, pendingPreview, draftRange, lastRow, selectedEventId, currentUserEmails, canEditEvent, inView, timedStyle,
onSelectEvent, onHoverEvent, onHoverLeave, onContextMenuEvent, onReplyEvent, onToggleTaskComplete, onSelectTask, onShowMore, moreLabel, moreInHeader = false, paint,
}: {
dayIndex: number;
@@ -713,6 +781,8 @@ function MonthCellEntries({
isMobile?: boolean;
calendarMap: Map;
pendingPreview?: PendingEventPreview | null;
+ /** The days of a new all-day event being created: its bar spans them. */
+ draftRange?: MonthRange | null;
/** The last row a fixed-height week has room for; the preview must not go past it. */
lastRow: number;
selectedEventId?: string | null;
@@ -746,13 +816,25 @@ function MonthCellEntries({
// A click, double click or right-click on an entry is the entry's, not a
// click on the empty day (which creates an all-day event there).
const own = {
+ // Not empty day space: a drag from here doesn't pick days.
+ "data-month-entry": true,
onClick: (e: React.MouseEvent) => e.stopPropagation(),
onDoubleClick: (e: React.MouseEvent) => e.stopPropagation(),
onContextMenu: (e: React.MouseEvent) => e.stopPropagation(),
};
const daySegments = segments.filter((segment) => segment.startIndex === dayIndex && (isShown ? isShown(segment) : segment.row < rowLimit));
const tasks = dayTasks[dayIndex].filter((_, taskIndex) => dayEventRows[dayIndex] + taskIndex < rowLimit);
- const preview = pendingPreview && isSameDay(pendingPreview.start, day) ? pendingPreview : null;
+ // A new all-day event spans its days, from its first day or the start
+ // of each week row it continues into; a timed one sits on its day.
+ const previewSpan = (() => {
+ if (!pendingPreview) return 0;
+ if (draftRange) {
+ if (!isInMonthRange(day, draftRange) || (dayIndex > 0 && !isSameDay(day, draftRange.start))) return 0;
+ return Math.min(differenceInCalendarDays(draftRange.end, day) + 1, week.length - dayIndex);
+ }
+ return isSameDay(pendingPreview.start, day) ? 1 : 0;
+ })();
+ const preview = previewSpan > 0 ? pendingPreview : null;
return (
<>
@@ -835,10 +917,12 @@ function MonthCellEntries({
)}
{preview && (() => {
// On a full day it lies over the last row: below it, it landed on the next week's date.
- const previewRow = Math.min(lastRow, Math.max(rowCount, dayEventRows[dayIndex] + dayTasks[dayIndex].length));
+ let busiest = 0;
+ for (let d = dayIndex; d < dayIndex + previewSpan; d++) busiest = Math.max(busiest, dayEventRows[d] + dayTasks[d].length);
+ const previewRow = Math.min(lastRow, Math.max(rowCount, busiest));
const color = paint(calendarMap.get(preview.calendarId)?.color || "#3b82f6");
return (
-
+
{touch && (
{ closeContextMenu(); onClearCalendar(cal); }}
/>
)}
diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index 682519f87..98c99d451 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
import { IconButton } from "@/components/ui/icon-button";
import { ToolbarButton } from "@/components/ui/toolbar";
import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown, ArrowLeft, Menu, MoreVertical, RefreshCw, Search, Printer } from "@/components/icons";
-import { ContextMenu, ContextMenuItem, ContextMenuSeparator, MenuShortcut } from "@/components/ui/context-menu";
+import { ContextMenu, ContextMenuCheckItem, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
import { useContextMenu } from "@/hooks/use-context-menu";
import { startOfWeek } from "date-fns";
import { PhoneHeaderActions } from "@/components/layout/phone-header-actions";
@@ -473,21 +473,14 @@ export function CalendarToolbar({
{menuViews.map((v) => (
-
+ />
))}
diff --git a/components/calendar/calendar-week-view.tsx b/components/calendar/calendar-week-view.tsx
index 7051e1963..c3467c334 100644
--- a/components/calendar/calendar-week-view.tsx
+++ b/components/calendar/calendar-week-view.tsx
@@ -12,7 +12,7 @@ import { QuickEventInput } from "./quick-event-input";
import { CalendarTaskChip } from "./task-chip";
import { AllHoursToggle, HiddenEventsIndicator } from "./display-hours-controls";
import { groupTasksByDueDay } from "@/lib/calendar-tasks";
-import { buildTimedFullDayWeekSegments, buildWeekSegmentsRaw, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents, packWeekSegments } from "@/lib/calendar-utils";
+import { buildTimedFullDayWeekSegments, buildWeekSegmentsRaw, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, isTimedEventFullDayOnDate, layoutOverlappingEvents, packWeekSegments, pendingTimedMinutes, PENDING_LAYOUT_ID } from "@/lib/calendar-utils";
import { clipToDisplayHours, indexOfDayOnOrAfter, partitionByDisplayHours, remapSegmentsToShownDays, resolveWorkingDays } from "@/lib/calendar-display-range";
import { displayNow, isDisplayToday } from "@/lib/timezone";
import type { CalendarEvent, Calendar, CalendarTask } from "@/lib/jmap/types";
@@ -238,6 +238,25 @@ export function CalendarWeekView({
return map;
}, [days, timedEvents, hours]);
+ // The new event being created takes a column beside the events it
+ // overlaps, as it will once saved, instead of covering them. Only its
+ // times count: typing its title doesn't redo the layout.
+ const pendingStartMs = pendingPreview && !pendingPreview.allDay ? pendingPreview.start.getTime() : null;
+ const pendingEndMs = pendingPreview && !pendingPreview.allDay ? pendingPreview.end.getTime() : null;
+ const pendingLayout = useMemo(() => {
+ if (pendingStartMs === null || pendingEndMs === null) return null;
+ const preview = { start: new Date(pendingStartMs), end: new Date(pendingEndMs) };
+ const day = days.find((d) => isSameDay(d, preview.start));
+ const bounds = day ? pendingTimedMinutes(preview, day) : null;
+ if (!day || !bounds) return null;
+ const key = format(day, "yyyy-MM-dd");
+ const partition = partitionByDisplayHours(timedEvents.get(key) || [], day, hours);
+ const all = layoutOverlappingEvents(partition.visible, day, bounds);
+ const pending = all.find((layout) => layout.event.id === PENDING_LAYOUT_ID);
+ if (!pending) return null;
+ return { key, layouts: all.filter((layout) => layout.event.id !== PENDING_LAYOUT_ID), pending };
+ }, [pendingStartMs, pendingEndMs, days, timedEvents, hours]);
+
// Built over the consecutive days and then moved onto the drawn columns,
// so an event across a hidden weekend still spans Friday to Monday.
const allDaySegments = useMemo(() => {
@@ -378,7 +397,7 @@ export function CalendarWeekView({
}, []);
const {
- dragCreate, handleGridPointerDown, handleGridPointerMove, handleGridPointerUp,
+ dragCreate, handleGridPointerDown, handleGridPointerMove, handleGridPointerUp, handleGridPointerCancel,
resizeVisual, handleResizePointerDown, handleResizePointerMove, handleResizePointerUp,
quickCreate, handleSlotClick, handleSlotDoubleClick, handleQuickCreateSubmit, handleQuickCreateCancel,
dropTarget, handleColumnDragOver, handleColumnDragLeave, handleColumnDrop,
@@ -664,7 +683,7 @@ export function CalendarWeekView({
const key = format(day, "yyyy-MM-dd");
const todayCol = isDisplayToday(day);
const dayLayout = layoutByDay.get(key);
- const layouted = dayLayout?.layouts ?? [];
+ const layouted = (pendingLayout?.key === key ? pendingLayout.layouts : dayLayout?.layouts) ?? [];
return (
handleGridPointerDown(e, key, day)}
onPointerMove={handleGridPointerMove}
onPointerUp={handleGridPointerUp}
+ onPointerCancel={handleGridPointerCancel}
onDragOver={(e) => handleColumnDragOver(e, key)}
onDragLeave={handleColumnDragLeave}
onDrop={(e) => handleColumnDrop(e, day)}
@@ -801,8 +821,11 @@ export function CalendarWeekView({
{dragCreate?.dayKey === key && (
>(() => new Set());
+
+ if (!available || !controller || pageAsks) return null;
+ const keyOf = (s: FilesSyncRootStatus) => `${s.rootId}:${s.massDelete?.side}:${s.massDelete?.count}`;
+ const root = roots.find((r) => {
+ const s = status[r.id];
+ return s?.state === "confirm-delete" && !!s.massDelete && !later.has(keyOf(s));
+ });
+ if (!root) return null;
+ const rootStatus = status[root.id];
+ return (
+ setLater((prev) => new Set(prev).add(keyOf(rootStatus)))}
+ />
+ );
+}
diff --git a/components/files-sync/files-sync-status-line.tsx b/components/files-sync/files-sync-status-line.tsx
new file mode 100644
index 000000000..a94d09139
--- /dev/null
+++ b/components/files-sync/files-sync-status-line.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useFormatter, useTranslations } from "next-intl";
+import { AlertCircle, AlertTriangle, CheckCircle2, CloudOff, Loader2, Lock, Pause, RefreshCw, type AppIcon } from "@/components/icons";
+import { cn } from "@/lib/utils";
+import type { FilesSyncRootState, FilesSyncRootStatus } from "@/lib/files-sync/types";
+import { filesSyncErrorKey, syncTimeOptions } from "./files-sync-text";
+
+const ICONS: Record = {
+ starting: { icon: Loader2, className: "text-muted-foreground animate-spin motion-reduce:animate-none" },
+ syncing: { icon: RefreshCw, className: "text-primary animate-spin motion-reduce:animate-none" },
+ idle: { icon: CheckCircle2, className: "text-green-600 dark:text-green-400" },
+ paused: { icon: Pause, className: "text-muted-foreground" },
+ offline: { icon: CloudOff, className: "text-muted-foreground" },
+ error: { icon: AlertCircle, className: "text-destructive" },
+ "confirm-delete": { icon: AlertTriangle, className: "text-amber-600 dark:text-amber-400" },
+ blocked: { icon: Lock, className: "text-muted-foreground" },
+};
+
+/** One line saying how a root is doing: up to date, syncing, paused, offline, stopped. */
+export function FilesSyncStatusLine({ status, paused, className }: {
+ status: FilesSyncRootStatus | undefined;
+ /** The root says it's paused; the engine may not have said so yet. */
+ paused?: boolean;
+ className?: string;
+}) {
+ const t = useTranslations("files_sync");
+ const format = useFormatter();
+ const state: FilesSyncRootState = status?.state ?? (paused ? "paused" : "starting");
+
+ let text: string;
+ switch (state) {
+ case "idle":
+ text = status?.lastSyncedAt
+ ? t("status.idle", { time: format.dateTime(new Date(status.lastSyncedAt), syncTimeOptions(status.lastSyncedAt)) })
+ : t("status.idle_never");
+ break;
+ case "syncing":
+ text = t("status.syncing", { done: status?.done ?? 0, pending: status?.pending ?? 0 });
+ break;
+ case "offline":
+ text = t("status.offline", { count: status?.pending ?? 0 });
+ break;
+ case "error":
+ text = t("status.error", { reason: t(filesSyncErrorKey(status?.errorKey)) });
+ break;
+ case "confirm-delete":
+ text = t("status.confirm_delete");
+ break;
+ default:
+ text = t(`status.${state}`);
+ }
+ const { icon: Icon, className: iconClass } = ICONS[state];
+ return (
+ { closeMenu(); void onDownload(resource.name); }} />
)}
{ closeMenu(); toggleDetails(true); }} />
+ { closeMenu(); deleteNames([resource.name]); }} />
)}
+
)}
- {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
+ {pendingPreview && pendingLayout?.key === key && (
(() => {
- const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
- let endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
- if (endMin <= startMin) endMin = 1440;
- const durationMin = Math.max(15, endMin - startMin);
- if (startMin + durationMin <= hours.startMinutes || startMin >= hours.endMinutes) return null;
- const clip = clipToDisplayHours(startMin, startMin + durationMin, hours);
+ const { startMinutes: startMin, endMinutes: endMin, column, totalColumns } = pendingLayout.pending;
+ if (endMin <= hours.startMinutes || startMin >= hours.endMinutes) return null;
+ const clip = clipToDisplayHours(startMin, endMin, hours);
const cal = calendars.find(c => c.id === pendingPreview.calendarId);
const color = paint(cal?.color || "#3b82f6");
- // Drawn like a saved event, so the new event shows where
- // it will land while it is being created.
+ // Drawn like a saved event, in the column it will take, so the new
+ // event shows where it will land while it is being created.
return (
{
@@ -7143,7 +7195,7 @@ export function RecipientChipInput({
/>
))}
{
+ {
if (contextMenu.data) {
handleChipRemove(contextMenu.data.index, { stopPropagation: () => {} } as React.MouseEvent);
}
diff --git a/components/email/email-context-menu.tsx b/components/email/email-context-menu.tsx
index 0d0d2eb0b..112d41c47 100644
--- a/components/email/email-context-menu.tsx
+++ b/components/email/email-context-menu.tsx
@@ -2,9 +2,7 @@
import { useMemo } from "react";
import { useLocale, useTranslations } from "next-intl";
-import { spamApplicableIn } from "@/lib/spam-applicable";
-import { useSettingsStore } from "@/stores/settings-store";
-import { useEmailStore, removalFolder, canRemoveFromFolder, bulkDeleteIsPermanent } from "@/stores/email-store";
+import { useEmailStore, removalFolder, canRemoveFromFolder } from "@/stores/email-store";
import { useEmailTagScope, type TagScope } from "@/hooks/use-account-tags";
import { Email, Mailbox } from "@/lib/jmap/types";
import {
@@ -17,22 +15,9 @@ import {
import { PluginSlot } from "@/components/plugins/plugin-slot";
import { PluginActions, useMessageActionTarget, usePluginActions } from "@/components/plugins/plugin-actions";
import {
- Mail,
- MailOpen,
- Trash2,
- Archive,
- FolderInput,
- FolderX,
- Tag,
- ShieldAlert,
- ShieldCheck,
- Paperclip,
- Copy,
- Fish,
MoreHorizontal,
- Undo,
} from "@/components/icons";
-import { tidySeparators, useMessageActionList, type MessageActionEntry, type MessageActionKey } from "./message-actions";
+import { rowMenuSections, useMessageActionList, useSelectionActionList, type MessageActionEntry, type MessageActionKey } from "./message-actions";
import { restoreTarget, restoreTargetForAll } from "@/lib/trash-origin";
import { resolveMoveOwnerAccountId } from "@/lib/move-targets";
import { buildMoveMenu, type MoveMenuModel } from "@/lib/move-menu";
@@ -43,8 +28,6 @@ import { useConnectionState } from "@/hooks/use-connection-state";
import { getEmailTagIds } from "@/lib/thread-utils";
import { TagPicker } from "./tag-picker";
import { RulesContextSubMenu } from "./rules-menu";
-import { useArchiveActionEnabled } from "@/lib/archive-gate";
-import { usePhishingReport } from "@/hooks/use-phishing-report";
interface Position {
x: number;
@@ -104,6 +87,8 @@ interface EmailContextMenuProps {
onRescheduleScheduled?: () => void;
// Batch actions
onBatchMarkAsRead?: (read: boolean) => void;
+ /** Stars the whole selection, or takes the star off every message. */
+ onBatchSetStarred?: (starred: boolean) => void;
/** Tags every selected message carries, and those only some of them do. */
batchTagIds?: string[];
batchPartialTagIds?: string[];
@@ -152,21 +137,13 @@ interface EmailContextMenuProps {
* "More actions". The reader's ⋮ is that "more" already, so it shows them all.
*/
rowMenu?: boolean;
+ /**
+ * "more": only what a selection's menu has under "More actions", for the
+ * selection view's More actions button.
+ */
+ section?: "all" | "more";
}
-/**
- * What a row's menu shows at its top level, as Outlook and Gmail have it. The rest
- * goes under "More actions".
- */
-export const ROW_MENU_KEYS = new Set([
- "reschedule", "cancel_and_edit", "cancel_send", "edit_draft",
- "reply", "reply_all", "forward",
- "restore", "archive", "delete", "move",
- "read", "star", "tag",
- "spam",
- "open_window",
-]);
-
/** Entries that change the message on the server, or queue the change offline. */
const CHANGES_MAIL = new Set([
"archive", "delete", "read", "remove_from_folder", "star", "pin", "spam",
@@ -201,6 +178,7 @@ export function EmailContextMenu({
onMarkAsSpam,
onUndoSpam,
onBatchMarkAsRead,
+ onBatchSetStarred,
batchTagIds,
batchPartialTagIds,
batchTagScope = null,
@@ -230,33 +208,22 @@ export function EmailContextMenu({
extraEntries,
label,
rowMenu = false,
+ section = "all",
}: EmailContextMenuProps) {
const t = useTranslations("context_menu");
const tViewer = useTranslations("email_viewer");
- const tRecover = useTranslations("recover_deleted");
const shortcutOf = useMessageActionShortcut();
// Offline, a change to a message waits in the outbox only where the account keeps
// its mail on this device; otherwise it would fail, so it's greyed out. Rules and
// copies to another account always need the server.
const { offline, canChangeMail } = useConnectionState();
const tMenu = useTranslations("menuAudit");
- const archiveActionEnabled = useArchiveActionEnabled();
- const mountainView = useSettingsStore((state) => state.interfaceLayout === "mountain-view");
const isUnread = !email.keywords?.$seen;
const currentTagIds = getEmailTagIds(email.keywords);
// The row's account names its tags; a selection uses batchTagScope.
const tagScope = useEmailTagScope(email);
const showBatchActions = isMultiSelect && selectedCount > 1;
- const isInJunkFolder = currentMailboxRole === 'junk';
- // Marking your own outgoing mail as spam makes no sense - hide the action
- // in Sent, Drafts and Scheduled, and in Trash, where it is already thrown out.
- const spamApplicable = spamApplicableIn(currentMailboxRole);
- const deleteForever = bulkDeleteIsPermanent({ role: currentMailboxRole });
- const tActions = useTranslations("reader_actions");
const isScheduled = email.isScheduled === true;
- // One report per selected message, behind one confirm (enterprise pack).
- const batchPhishing = usePhishingReport(showBatchActions ? (batchEmails ?? []) : [], currentMailboxRole);
- const tPhishing = useTranslations("phishing_report");
// "Remove from this folder" needs one open folder and messages that are
// also in another one; for a selection, every selected message must be.
const folderToLeave = useEmailStore(removalFolder);
@@ -383,91 +350,7 @@ export function EmailContextMenu({
) : null;
- const archiveItem = archiveActionEnabled && (
- <>
- {/* Archive */}
- handleAction(onBatchArchive!)}
- disabled={!onBatchArchive || !canChangeMail}
- />
-
- );
- const deleteItem = (
- <>
- {/* Delete */}
- handleAction(onBatchDelete!)}
- disabled={!onBatchDelete || !canChangeMail}
- destructive={!mountainView}
- />
-
- );
- // A selection of read and unread mail gets both; otherwise the one that changes something.
- const selection = batchEmails?.length ? batchEmails : [email];
- const someUnread = selection.some((e) => !e.keywords?.$seen);
- const someRead = selection.some((e) => !!e.keywords?.$seen);
- const readItem = (
- <>
- {someUnread && (
- handleAction(() => onBatchMarkAsRead?.(true))}
- />
- )}
- {someRead && (
- handleAction(() => onBatchMarkAsRead?.(false))}
- />
- )}
-
- );
- const batchRestoreItem = batchRestoreTo ? (
- <>
- handleAction(() => onBatchMoveToMailbox?.(batchRestoreTo))}
- />
-
- {renderMoveList(onBatchMoveToMailbox)}
-
- )}
- {canRemove && (
- handleAction(onBatchRemoveFromFolder!)}
- />
- )}
-
- );
+ // Copy to another connected account, keeping the originals.
const copyTargetsContent = onCopyToAccount
? copyTrees.map((target) => (
- {copyTargetsContent}
-
- )}
-
- );
- const rulesItem = (
- <>
- {/* Rules: filter rules made from the sender(s), saved as Sieve */}
-
-
- )}
-
- );
- const spamBlock = (
- <>
- {/* Spam - contextual based on folder; pointless on own outgoing mail */}
- {spamApplicable && (
- <>
- handleAction(isInJunkFolder ? onBatchUndoSpam! : onBatchMarkAsSpam!)}
- disabled={(isInJunkFolder ? !onBatchUndoSpam : !onBatchMarkAsSpam) || !canChangeMail}
- destructive={!isInJunkFolder && !mountainView}
- />
- {batchPhishing.available && (
- handleAction(batchPhishing.report)}
- />
- )}
-
- )}
-
- );
- const renderSubmenu = (entry: Extract) => {
+ // A selection: the same structure as a row's menu, without what needs one
+ // message (useSelectionActionList), shared with the reading pane's selection view.
+ const selectionLists = useSelectionActionList({
+ emails: showBatchActions ? (batchEmails?.length ? batchEmails : [email]) : [],
+ currentMailboxRole,
+ canMove: canMoveAnywhere,
+ canRemoveFromFolder: canRemove,
+ canCopyToAccount: !!onCopyToAccount && copyTrees.length > 0,
+ canTag: !!onBatchToggleTag,
+ onRestore: batchRestoreTo ? () => onBatchMoveToMailbox?.(batchRestoreTo) : undefined,
+ onArchive: onBatchArchive,
+ onDelete: onBatchDelete,
+ onMarkAsRead: onBatchMarkAsRead,
+ onSetStarred: onBatchSetStarred,
+ onMarkAsSpam: onBatchMarkAsSpam,
+ onUndoSpam: onBatchUndoSpam,
+ onForwardAsAttachment: onBatchForwardAsAttachment,
+ onRemoveFromFolder: onBatchRemoveFromFolder,
+ });
+
+ const renderSubmenu = (entry: Extract, batch: boolean) => {
switch (entry.key) {
case "move":
return (
- {renderMoveList(onMoveToMailbox)}
+ {renderMoveList(batch ? onBatchMoveToMailbox : onMoveToMailbox)}
);
case "copy_to_account":
@@ -555,7 +398,16 @@ export function EmailContextMenu({
return (
);
@@ -564,43 +416,78 @@ export function EmailContextMenu({
}
};
- const renderEntries = (entries: MessageActionEntry[], keyPrefix = "") => entries.map((entry, index) => {
+ const renderEntries = (entries: MessageActionEntry[], keyPrefix = "", batch = false) => entries.map((entry, index) => {
if (entry.kind === "separator") return handleAction(entry.run)}
/>
);
});
- // A row's menu: the usual few, the rest one level down. Not Spam in Spam
- // and Restore in Trash stay at the top.
- const rowTop = rowMenu
- ? tidySeparators(singleEntries.filter((entry) => entry.kind === "separator" || ROW_MENU_KEYS.has(entry.key)))
- : singleEntries;
- const rowMore = rowMenu
- ? tidySeparators(singleEntries.filter((entry) => entry.kind === "separator" || !ROW_MENU_KEYS.has(entry.key)))
- : [];
- const singleMenu = (
+
+ // Plugins' entries: under "More actions" in a row's or a selection's menu,
+ // at the end of the reader's ⋮ (which is that "more" already).
+ const pluginEntries = (
<>
- {renderEntries(rowTop)}
- {rowMore.length > 0 && (
- <>
-
- {renderEntries(rowMore, "more-")}
-
-
- )}
+ {!showBatchActions && rowPlugins && rowPluginBlock}
+
+ {renderEntries(entries, "more-", batch)}
+ {pluginEntries}
+
+
+ );
+
+ let body: React.ReactNode;
+ if (showBatchActions) {
+ body = isScheduled ? null : section === "more" ? (
+ <>
+ {renderEntries(selectionLists.more, "more-", true)}
+ {pluginEntries}
+
+ ) : (
+ <>
+ {t("items_selected", { count: selectedCount })}
+ {renderEntries(selectionLists.top, "", true)}
+ {moreMenu(selectionLists.more, true)}
+
+ );
+ } else if (rowMenu) {
+ // A row's menu: the usual few, the rest one level down.
+ const { top, more } = rowMenuSections(singleEntries);
+ body = (
+ <>
+ {renderEntries(top)}
+ {moreMenu(more, false)}
+ {extraEntries}
+
+ );
+ } else {
+ body = (
+ <>
+ {renderEntries(singleEntries)}
+ {rowPlugins && rowPluginBlock}
+ {extraEntries}
+
{offline && {tMenu("offline_header")} }
- {showBatchActions ? (
- <>
-
- {t("items_selected", { count: selectedCount })}
-
-
- {!isScheduled && (<>
- {batchRestoreItem}
- {/* Compose-style actions first, above the archive/delete group,
- mirroring the single menu's ordering. */}
- handleAction(onBatchForwardAsAttachment!)}
- disabled={!onBatchForwardAsAttachment}
- />
-
);
}
diff --git a/components/email/email-hover-actions.tsx b/components/email/email-hover-actions.tsx
index de9d02acf..a81cf5ab3 100644
--- a/components/email/email-hover-actions.tsx
+++ b/components/email/email-hover-actions.tsx
@@ -1,7 +1,6 @@
"use client";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useMemo } from "react";
import { Email } from "@/lib/jmap/types";
import { useSettingsStore } from "@/stores/settings-store";
import type { HoverAction } from "@/stores/settings-store";
@@ -11,6 +10,8 @@ import { useArchiveActionEnabled, withoutArchiveIfOff } from "@/lib/archive-gate
import { useTranslations } from "next-intl";
import { useIsMobile } from "@/hooks/use-media-query";
import { TagPicker } from "@/components/email/tag-picker";
+import { ContextMenu } from "@/components/ui/context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
import { useEmailTagScope } from "@/hooks/use-account-tags";
import { getEmailTagIds } from "@/lib/thread-utils";
import { PluginActions, useMessageActionTarget, usePluginActions } from "@/components/plugins/plugin-actions";
@@ -100,8 +101,6 @@ const CORNER_CLASSES = {
} as const;
/** Roughly the picker's height; used to flip it above the row near the viewport bottom. */
-const TAG_PICKER_MAX_HEIGHT = 320;
-const TAG_PICKER_WIDTH = 224;
export function EmailHoverActions({
email,
@@ -142,40 +141,9 @@ export function EmailHoverActions({
// pane use. It is portalled to the body because every row sits inside a
// `transform`ed virtual item, which would make a `fixed` child scroll with the
// list and clip it at the scroller's edge.
- const [tagPickerPos, setTagPickerPos] = useState<{ top: number; left: number } | null>(null);
- const pickerRef = useRef(null);
- const tagButtonRef = useRef(null);
- const closeTagPicker = useCallback(() => setTagPickerPos(null), []);
-
- useEffect(() => {
- if (!tagPickerPos) return;
- const onPointerDown = (event: PointerEvent) => {
- const target = event.target as Node;
- // The anchor is left to its own click handler, which toggles the picker
- // shut - closing here first would let that click reopen it.
- if (tagButtonRef.current?.contains(target)) return;
- if (!pickerRef.current?.contains(target)) closeTagPicker();
- };
- const onKeyDown = (event: KeyboardEvent) => {
- if (event.key === "Escape") closeTagPicker();
- };
- // The anchor moves with the list, so scrolling dismisses rather than chases
- // it - but the picker's own tag list scrolls too, and that must not close it.
- const onScroll = (event: Event) => {
- if (pickerRef.current?.contains(event.target as Node)) return;
- closeTagPicker();
- };
- document.addEventListener("pointerdown", onPointerDown, true);
- document.addEventListener("keydown", onKeyDown);
- window.addEventListener("scroll", onScroll, true);
- window.addEventListener("resize", closeTagPicker);
- return () => {
- document.removeEventListener("pointerdown", onPointerDown, true);
- document.removeEventListener("keydown", onKeyDown);
- window.removeEventListener("scroll", onScroll, true);
- window.removeEventListener("resize", closeTagPicker);
- };
- }, [tagPickerPos, closeTagPicker]);
+ // The app's menu, under the button, with the picker in it.
+ const tagMenu = useContextMenu();
+ const tagPickerOpen = tagMenu.contextMenu.isOpen;
const isUnread = !email.keywords?.$seen;
const isStarred = email.keywords?.$flagged;
@@ -205,22 +173,8 @@ export function EmailHoverActions({
// Previously this cleared every tag on the message, which is a no-op on
// an untagged one - hence "clicking it does nothing". Open the picker.
if (!onSetTag) break;
- tagButtonRef.current = e.currentTarget as HTMLElement;
- const rect = e.currentTarget.getBoundingClientRect();
- setTagPickerPos((open) =>
- open
- ? null
- : {
- top:
- rect.bottom + TAG_PICKER_MAX_HEIGHT > window.innerHeight
- ? Math.max(8, rect.top - TAG_PICKER_MAX_HEIGHT - 4)
- : rect.bottom + 4,
- left: Math.max(
- 8,
- Math.min(rect.left, window.innerWidth - TAG_PICKER_WIDTH - 8),
- ),
- },
- );
+ if (tagPickerOpen) tagMenu.closeContextMenu();
+ else tagMenu.openContextMenuFrom(e.currentTarget as HTMLElement, null, "start");
break;
}
case "spam":
@@ -264,7 +218,7 @@ export function EmailHoverActions({
title={title}
aria-label={title}
aria-haspopup={actionId === "tag" ? "menu" : undefined}
- aria-expanded={actionId === "tag" ? tagPickerPos !== null : undefined}
+ aria-expanded={actionId === "tag" ? tagPickerOpen : undefined}
className={cn(
"transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
// Gmail's are round 40px targets that darken rather than change hue.
@@ -297,34 +251,32 @@ export function EmailHoverActions({
);
}
- const tagPicker =
- tagPickerPos && onSetTag
- ? createPortal(
-
+ {/* The menu is rendered in a portal, but React still bubbles its clicks to the row. */}
+
+ ) : null;
// While the picker is open the row is no longer hovered, so the toolbar has to
// stay mounted and visible or the picker would close under its own anchor.
// Shown on keyboard focus too (R7), not only on hover. Only a control inside
// the row counts, and only from the keyboard: a click focuses the row itself
// (or the button clicked), and focus-within kept the toolbar on the open row.
- const visibilityClass = tagPickerPos ? "flex" : "hidden group-hover:flex group-has-[:focus-visible]:flex";
+ const visibilityClass = tagPickerOpen ? "flex" : "hidden group-hover:flex group-has-[:focus-visible]:flex";
if (hoverActionsMode === 'floating') {
return (
diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx
index aa32bf841..a69ec7a66 100644
--- a/components/email/email-list.tsx
+++ b/components/email/email-list.tsx
@@ -11,11 +11,15 @@ import type { LoadListAttachments } from "@/lib/list-attachments";
import { listRowShowsChips } from "./attachment-chips";
import { listVerificationCode } from "@/lib/verification-code";
import { EmailContextMenu } from "./email-context-menu";
+import { SelectionView } from "./selection-view";
+import { restoreTargetForAll } from "@/lib/trash-origin";
+import { useSelectionActionList } from "./message-actions";
+import { useMessageActionShortcut } from "./message-action-shortcuts";
import { ViewSourceDialog } from "./view-source-dialog";
import { useCopyToAccount, useEmailExport, requestPrint } from "@/hooks/use-message-file-actions";
import { BatchTagButton } from "./batch-tag-button";
import { cn, cleanPreview } from "@/lib/utils";
-import { Trash2, Mail, MailX, MailOpen, Loader2, SearchX, AlertTriangle, CalendarClock, ShieldCheck, ShieldAlert, Archive, MoreVertical, X, FolderX, Fish, FolderInput, CheckSquare } from "@/components/icons";
+import { Trash2, Mail, MailX, MailOpen, Loader2, SearchX, AlertTriangle, CalendarClock, ShieldCheck, ShieldAlert, Archive, MoreVertical, X, FolderX, Fish, FolderInput } from "@/components/icons";
import { createPortal } from "react-dom";
import { ContextMenu } from "@/components/ui/context-menu";
import { MoveFolderList, moveMenuIsEmpty, useMoveMenu } from "./move-target-list";
@@ -51,7 +55,7 @@ import { useTranslations } from "next-intl";
import { localizeMailboxName } from "@/lib/mailbox-label";
import { toast } from "@/stores/toast-store";
import { confirmMailRemoval } from "@/lib/mail-removal-confirm";
-import { markSelectionReadWithUndo, runBatchEmailAction, setSelectionTagWithUndo, toastWithUndo, undoLabels, undoMoveAction } from "@/lib/email-action-toast";
+import { markSelectionReadWithUndo, runBatchEmailAction, setSelectionStarredWithUndo, setSelectionTagWithUndo, toastWithUndo, undoLabels, undoMoveAction } from "@/lib/email-action-toast";
import { useVirtualizer } from "@tanstack/react-virtual";
import { measureVisibleRow } from "@/lib/virtual-row-measure";
import { TagDisplayContext, useMeasuredTagDisplay } from "@/hooks/use-tag-display";
@@ -208,6 +212,7 @@ export function EmailList({
const openInWindow = useOpenEmailInWindow();
const tSpam = useTranslations('email_viewer.spam');
const tNotifications = useTranslations('notifications');
+ const tSelection = useTranslations('selectionView');
const tViewer = useTranslations('email_viewer');
const tSidebar = useTranslations('sidebar');
const tListExtra = useTranslations('mail_list_extra');
@@ -407,6 +412,11 @@ export function EmailList({
const [sourceEmail, setSourceEmail] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
+ // The selection view's More actions opens only that part of the selection's menu.
+ const [menuSection, setMenuSection] = useState<'all' | 'more'>('all');
+ useEffect(() => {
+ if (!contextMenu.isOpen) setMenuSection('all');
+ }, [contextMenu.isOpen]);
const later = useTimeoutWhileMounted();
const parentRef = useRef(null);
const batchToolbarRef = useRef(null);
@@ -654,6 +664,20 @@ export function EmailList({
}
};
+ const handleBatchSetStarred = async (starred: boolean) => {
+ if (!client || isProcessing) return;
+ setIsProcessing(true);
+ try {
+ await setSelectionStarredWithUndo(client, starred, {
+ success: tSelection(starred ? 'starred' : 'unstarred'),
+ error: tNotifications('error_updating'),
+ labels: undo,
+ });
+ } finally {
+ later(() => setIsProcessing(false), 500);
+ }
+ };
+
const handleBatchUndoSpam = async () => {
if (!client || isProcessing) return;
setIsProcessing(true);
@@ -777,33 +801,45 @@ export function EmailList({
// One read/unread button: "Mark as read" while any selected message is unread.
const selectionHasUnread = selectedEmailsForRemoval.some((email) => !email.keywords?.$seen);
- // Archive, Delete, Move, Mark read/unread and Tag, on the bar and in the
- // reading pane. The pane's copies get their own test ids.
- const selectionButtons = (where: 'bar' | 'pane') => {
- const testId = (id: string) => (where === 'bar' ? id : `pane-${id}`);
- // The pane has room: its buttons say what they do (mail-p2-15). The
- // bar beside the list stays icons with tooltips.
- const labelled = where === 'pane';
- const shape = labelled ? { size: 'sm' as const, title: '', className: 'gap-1.5' } : {};
- const name = (label: string) => (labelled ? {label} : null);
- return (
+ // The selection view's buttons: the selection menu's top level (useSelectionActionList).
+ const shortcutOf = useMessageActionShortcut();
+ const selectionUnread = selectedEmailsForRemoval.filter((email) => !email.keywords?.$seen).length;
+ const selectionRestoreTo = effectiveMailboxRole === 'trash' && hasSelection
+ ? restoreTargetForAll(selectedEmailsForRemoval, mailboxes, selectedMailbox)
+ : undefined;
+ const selectionActions = useSelectionActionList({
+ emails: selectedEmailsForRemoval,
+ currentMailboxRole: effectiveMailboxRole,
+ canMove: !moveMenuIsEmpty(selectionMoveModel),
+ canRemoveFromFolder: selectionCanLeaveFolder,
+ canTag: !isScheduledView,
+ onRestore: selectionRestoreTo ? () => void handleBatchMoveToMailbox(selectionRestoreTo) : undefined,
+ onArchive: () => void handleBatchArchive(),
+ onDelete: () => void handleBatchDelete(),
+ onMarkAsRead: (read) => void handleBatchMarkAsRead(read),
+ onSetStarred: (starred) => void handleBatchSetStarred(starred),
+ onMarkAsSpam: () => void handleBatchMarkAsSpam(),
+ onUndoSpam: () => void handleBatchUndoSpam(),
+ onRemoveFromFolder: () => void handleBatchRemoveFromFolder(),
+ });
+
+ // Archive, Delete, Move, Mark read/unread and Tag, as icons on the bar beside the
+ // list. The reading pane has the selection view.
+ const selectionButtons = () => (
<>
{archiveActionEnabled && effectiveMailboxRole !== 'archive' && (
- void handleBatchArchive()} disabled={isProcessing} data-testid={testId('batch-archive')} {...shape}>
+ void handleBatchArchive()} disabled={isProcessing} data-testid="batch-archive">
)}
{!moveMenuIsEmpty(selectionMoveModel) && (
moveMenu.openContextMenuFrom(e.currentTarget, null, 'end')}
disabled={isProcessing}
- data-testid={testId('batch-move')}
- {...shape}
+ data-testid="batch-move"
>
)}
handleBatchMarkAsRead(selectionHasUnread)}
disabled={isProcessing}
- data-testid={testId('batch-mark-read')}
- {...shape}
+ data-testid="batch-mark-read"
>
{selectionHasUnread ?
)}
- {/* The reading pane for a selection: its count and the bar's buttons (mail-10). */}
+ {/* The reading pane for a selection: the selection menu's actions as buttons. */}
{selectionPaneHost && hasSelection && !isScheduledView && createPortal(
-
- ,
+ (entry.key === 'star' ? undefined : shortcutOf(entry.key, entry.testId === 'ctx-mark-read'))}
+ onMove={(button) => moveMenu.openContextMenuFrom(button, null, 'start')}
+ onMore={(button) => {
+ const anchor = selectedEmailsForRemoval[0];
+ if (!anchor) return;
+ setMenuSection('more');
+ openContextMenuFrom(button, anchor, 'start');
+ }}
+ onClear={clearSelection}
+ tags={{ selectedIds: selectionTags.all, partialIds: selectionTags.some, scope: selectionTags.scope, onToggle: handleBatchToggleTag }}
+ disabled={isProcessing || selectedEmailsForRemoval.length === 0}
+ />,
selectionPaneHost,
)}
@@ -1600,6 +1623,8 @@ export function EmailList({
} : undefined}
onViewSource={contextMenuEmail && !canExport(contextMenuEmail) ? undefined : () => setSourceEmail(contextMenuEmail)}
onBatchMarkAsRead={(read) => markSelectionRead(read)}
+ onBatchSetStarred={(starred) => void handleBatchSetStarred(starred)}
+ section={menuSection}
batchTagIds={selectionTags.all}
batchPartialTagIds={selectionTags.some}
batchTagScope={selectionTags.scope}
diff --git a/components/email/mail-list-menus.tsx b/components/email/mail-list-menus.tsx
index c69264028..037d69fcc 100644
--- a/components/email/mail-list-menus.tsx
+++ b/components/email/mail-list-menus.tsx
@@ -2,9 +2,9 @@
import { memo } from "react";
import { useTranslations } from "next-intl";
-import { ArrowUpDown, Check, CheckCheck, FolderX, MailOpen, MoreVertical, RefreshCw } from "@/components/icons";
+import { ArrowUpDown, CheckCheck, FolderX, MailOpen, MoreVertical, RefreshCw } from "@/components/icons";
import { ToolbarButton } from "@/components/ui/toolbar";
-import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu, ContextMenuCheckItem } from "@/components/ui/context-menu";
import { useContextMenu } from "@/hooks/use-context-menu";
import { useSettingsStore, getMessageListOrderFor } from "@/stores/settings-store";
import { usePolicyStore } from "@/stores/policy-store";
@@ -106,21 +106,7 @@ export function MailSortSubMenu({ folderRole, onPicked }: { folderRole: string |
/** A checkable entry of the Sort menu, as in Files'. */
function SortItem({ label, checked, onClick, testId }: { label: string; checked: boolean; onClick: () => void; testId?: string }) {
- return (
-
- );
+ return = new Set([
+ "reschedule", "cancel_and_edit", "cancel_send", "edit_draft",
+ "reply", "reply_all", "forward",
+ "restore", "archive", "delete", "move",
+ "read", "star", "tag",
+ "spam",
+ "open_window",
+]);
+
+/**
+ * "More actions", in groups with a line between: forwarding, links, filing and marks,
+ * then save, print and source. Keys not named here (a host's own entries) go before
+ * the last group.
+ */
+const MORE_GROUPS: MessageActionKey[][] = [
+ ["forward_as_attachment"],
+ ["copy_message_link", "copy_conversation_link"],
+ ["copy_to_account", "rules", "remove_from_folder", "pin", "report_phishing", "find_from_sender"],
+ ["export", "print", "view_source"],
+];
+
+function moreGroupOf(key: MessageActionKey): number {
+ const at = MORE_GROUPS.findIndex((group) => group.includes(key));
+ return at >= 0 ? at : MORE_GROUPS.length - 1.5;
+}
+
+/** Splits one message's actions into the row menu's top level and its "More actions". */
+export function rowMenuSections(list: MessageActionEntry[]): { top: MessageActionEntry[]; more: MessageActionEntry[] } {
+ const top = tidySeparators(list.filter((entry) => entry.kind === "separator" || ROW_MENU_KEYS.has(entry.key)));
+ const rest = list.filter(
+ (entry): entry is Exclude => entry.kind !== "separator" && !ROW_MENU_KEYS.has(entry.key),
+ );
+ // Stable: within a group the list's own order stays.
+ const sorted = rest
+ .map((entry, index) => ({ entry, index, group: moreGroupOf(entry.key) }))
+ .sort((a, b) => a.group - b.group || a.index - b.index);
+ const more: MessageActionEntry[] = [];
+ sorted.forEach(({ entry, group }, i) => {
+ if (i > 0 && sorted[i - 1].group !== group) more.push(SEPARATOR);
+ more.push(entry);
+ });
+ return { top, more };
+}
+
+export interface SelectionActionOptions {
+ /** The selected messages. */
+ emails: Email[];
+ currentMailboxRole?: string;
+ canMove?: boolean;
+ canRemoveFromFolder?: boolean;
+ canCopyToAccount?: boolean;
+ /** Offer the Tag submenu. */
+ canTag?: boolean;
+ /** In Trash: puts every selected message back. */
+ onRestore?: () => void;
+ onArchive?: () => void;
+ onDelete?: () => void;
+ onMarkAsRead?: (read: boolean) => void;
+ onSetStarred?: (starred: boolean) => void;
+ onMarkAsSpam?: () => void;
+ onUndoSpam?: () => void;
+ onForwardAsAttachment?: () => void;
+ onRemoveFromFolder?: () => void;
+}
+
+/**
+ * The actions for a selection of several messages. The selection's right-click menu
+ * and the reading pane's selection view both show these, in this order: the same
+ * structure as one message's row menu, without what needs a single message (answering,
+ * its own window, links, saving, printing, its source).
+ */
+export function useSelectionActionList(o: SelectionActionOptions): { top: MessageActionEntry[]; more: MessageActionEntry[] } {
+ const t = useTranslations("context_menu");
+ const tPhishing = useTranslations("phishing_report");
+ const tRecover = useTranslations("recover_deleted");
+ const tActions = useTranslations("reader_actions");
+ const archiveEnabled = useArchiveActionEnabled();
+ const mountainView = useSettingsStore((state) => state.interfaceLayout === "mountain-view");
+ const phishing = usePhishingReport(o.emails, o.currentMailboxRole);
+ const role = o.currentMailboxRole;
+ const inJunk = role === "junk";
+ const deleteForever = bulkDeleteIsPermanent({ role });
+ const someUnread = o.emails.some((e) => !e.keywords?.$seen);
+ const someRead = o.emails.some((e) => !!e.keywords?.$seen);
+ const allStarred = o.emails.length > 0 && o.emails.every((e) => !!e.keywords?.$flagged);
+
+ const item = (
+ key: MessageActionKey,
+ icon: Icon,
+ label: string,
+ run: (() => void) | undefined,
+ extra: { destructive?: boolean; testId?: string } = {},
+ ): MessageActionEntry => ({ kind: "item", key, icon, label, run: () => run?.(), disabled: !run, ...extra });
+
+ const restore = role === "trash" && o.onRestore
+ ? [item("restore", Undo, tRecover("restore"), o.onRestore, { testId: "ctx-restore" }), SEPARATOR]
+ : [];
+ // In Archive there's nowhere further to archive it to.
+ const archive = archiveEnabled && role !== "archive" ? [item("archive", Archive, t("archive"), o.onArchive, { testId: "ctx-archive" })] : [];
+ const del = item("delete", Trash2, deleteForever ? tActions("delete_forever") : t("delete"), o.onDelete, {
+ destructive: !mountainView,
+ testId: "ctx-delete",
+ });
+ const move: MessageActionEntry[] = o.canMove ? [{ kind: "submenu", key: "move", icon: FolderInput, label: t("move_to"), testId: "ctx-move-to" }] : [];
+ // A selection of read and unread mail gets both.
+ const read = [
+ ...(someUnread ? [item("read", MailOpen, t("mark_read"), () => o.onMarkAsRead?.(true), { testId: "ctx-mark-read" })] : []),
+ ...(someRead ? [item("read", Mail, t("mark_unread"), () => o.onMarkAsRead?.(false), { testId: "ctx-mark-unread" })] : []),
+ ];
+ // Takes the star off when every one has it, else stars them all.
+ const star = o.onSetStarred
+ ? [item("star", allStarred ? StarOff : Star, allStarred ? t("unstar") : t("star"), () => o.onSetStarred?.(!allStarred), {
+ testId: allStarred ? "ctx-unstar" : "ctx-star",
+ })]
+ : [];
+ const tag: MessageActionEntry[] = o.canTag ? [{ kind: "submenu", key: "tag", icon: Tag, label: t("tag"), testId: "ctx-tag" }] : [];
+ const spam = spamApplicableIn(role)
+ ? [item("spam", inJunk ? ShieldCheck : ShieldAlert, inJunk ? t("not_spam") : t("mark_as_spam"), inJunk ? o.onUndoSpam : o.onMarkAsSpam, {
+ destructive: !inJunk && !mountainView,
+ testId: inJunk ? "ctx-not-spam" : "ctx-spam",
+ })]
+ : [];
+
+ // The row menu's order in each layout (useMessageActionList).
+ const top = tidySeparators(mountainView
+ ? [...restore, ...archive, del, ...read, SEPARATOR, ...move, ...tag, SEPARATOR, ...star, ...spam]
+ : [...restore, ...archive, del, SEPARATOR, ...move, SEPARATOR, ...read, ...star, ...tag, SEPARATOR, ...spam]);
+
+ const copy: MessageActionEntry[] = o.canCopyToAccount
+ ? [{ kind: "submenu", key: "copy_to_account", icon: Copy, label: t("copy_to_account"), testId: "ctx-copy-to" }]
+ : [];
+ const more = tidySeparators([
+ item("forward_as_attachment", Paperclip, t("forward_as_attachments"), o.onForwardAsAttachment, { testId: "ctx-batch-forward-as-attachment" }),
+ SEPARATOR,
+ ...copy,
+ { kind: "submenu", key: "rules", icon: Filter, label: t("rules.title"), testId: "ctx-rules" },
+ ...(o.canRemoveFromFolder && o.onRemoveFromFolder
+ ? [item("remove_from_folder", FolderX, t("remove_from_folder"), o.onRemoveFromFolder, { testId: "ctx-remove-from-folder" })]
+ : []),
+ ...(phishing.available
+ ? [SEPARATOR, item("report_phishing", Fish, tPhishing("action"), phishing.report, { testId: "ctx-batch-report-phishing" })]
+ : []),
+ ]);
+ return { top, more };
+}
diff --git a/components/email/move-target-list.tsx b/components/email/move-target-list.tsx
index 34632ca49..88787d785 100644
--- a/components/email/move-target-list.tsx
+++ b/components/email/move-target-list.tsx
@@ -64,7 +64,7 @@ interface MoveFolderListProps {
* `panel`: the phone's full-width panel (44px rows).
*/
variant?: "menu" | "dialog" | "panel";
- /** Opens the Move dialog. Offered at the end of a long list, since a native menu has no filter field. */
+ /** Opens the Move dialog, which has the filter. Offered at the end of a long list. */
onChooseFolder?: () => void;
/** Always show the filter field (the dialog). */
alwaysFilter?: boolean;
@@ -80,9 +80,8 @@ interface MoveFolderListProps {
* greyed, other reachable accounts under their names, and a filter field
* once the list is long.
*
- * Each folder with subfolders is wrapped in `data-native-submenu`: the
- * desktop app's native copy of the menu makes it a submenu there, the folder
- * itself first (lib/desktop/native-menu.ts).
+ * Each folder with subfolders is wrapped in `data-native-submenu`, which keeps
+ * the folder and its subfolders together as one group.
*/
export function MoveFolderList({
model,
diff --git a/components/email/mv-list-toolbar.tsx b/components/email/mv-list-toolbar.tsx
index 6bb5d9516..fc3f55276 100644
--- a/components/email/mv-list-toolbar.tsx
+++ b/components/email/mv-list-toolbar.tsx
@@ -17,6 +17,7 @@ import {
Trash2,
RefreshCw,
Fish,
+ Plus,
} from "@/components/icons";
import { spamApplicableIn } from "@/lib/spam-applicable";
import { usePhishingReport } from "@/hooks/use-phishing-report";
@@ -546,6 +547,7 @@ export function MvListToolbar({
<>
{ closeMove(); onCreateFolder(); }}
/>
diff --git a/components/email/reader-attachments.tsx b/components/email/reader-attachments.tsx
index 52b386b42..7fbb874f3 100644
--- a/components/email/reader-attachments.tsx
+++ b/components/email/reader-attachments.tsx
@@ -2,11 +2,11 @@
import { useEffect, useState, type DragEvent, type ReactNode } from "react";
import { useTranslations } from "next-intl";
-import { ChevronDown, ChevronUp, Copy, Download, FolderInput, Loader2, Paperclip } from "@/components/icons";
+import { ChevronDown, ChevronUp, Copy, Download, FolderInput, Loader2, Paperclip, Eye, Pencil } from "@/components/icons";
import { Button } from "@/components/ui/button";
import { ContextMenu, ContextMenuItem } from "@/components/ui/context-menu";
import { useContextMenu } from "@/hooks/use-context-menu";
-import { nativeMenusAvailable } from "@/lib/desktop/native-menu";
+import { isDesktopApp } from "@/lib/desktop/bridge";
import { IconButton } from "@/components/ui/icon-button";
import { getAttachmentDisplayName } from "@/lib/attachment-name";
import { cn, formatFileSize } from "@/lib/utils";
@@ -129,7 +129,7 @@ export function ReaderAttachments({
const tEdit = useTranslations("desktopEdit");
const menu = useContextMenu();
const [desktopMenu, setDesktopMenu] = useState(false);
- useEffect(() => setDesktopMenu(nativeMenusAvailable()), []);
+ useEffect(() => setDesktopMenu(isDesktopApp()), []);
const menuTarget = menu.contextMenu.data;
// Opens nothing: no preview, and downloads are off.
const locked = (attachment: T) => downloadsOff && !opensPreview(attachment);
@@ -355,16 +355,16 @@ export function ReaderAttachments({
{desktopMenu && menuTarget && (
{!locked(menuTarget) && (
- { menu.closeContextMenu(); onOpen(menuTarget); }} />
+ { menu.closeContextMenu(); onOpen(menuTarget); }} />
)}
{!downloadsOff && (
- { menu.closeContextMenu(); onDownload(menuTarget); }} />
+ { menu.closeContextMenu(); onDownload(menuTarget); }} />
)}
{!downloadsOff && onEdit && canEdit?.(menuTarget) && (
- { menu.closeContextMenu(); onEdit(menuTarget); }} />
+ { menu.closeContextMenu(); onEdit(menuTarget); }} />
)}
{!downloadsOff && onCopyFile && (
- { menu.closeContextMenu(); onCopyFile(menuTarget); }} />
+ { menu.closeContextMenu(); onCopyFile(menuTarget); }} />
)}
)}
diff --git a/components/email/recent-files-menu-section.tsx b/components/email/recent-files-menu-section.tsx
new file mode 100644
index 000000000..524478d26
--- /dev/null
+++ b/components/email/recent-files-menu-section.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import { CONTEXT_MENU_ITEM_CLASS, menuLevelItems } from "@/components/ui/context-menu";
+import { attachmentIcon } from "@/components/email/attachment-chips";
+import { listRecentFiles, recentWhen, shortFolder } from "@/lib/desktop/recent-files";
+import type { DesktopRecentFile } from "@/lib/desktop/types";
+import { cn } from "@/lib/utils";
+
+/** Only an icon the shell made: a PNG as a data: URL. */
+const ICON_URL = /^data:image\/png;base64,[A-Za-z0-9+/=]+$/;
+
+/**
+ * The top of the composer's Attach menu in the desktop app: the files the OS says were
+ * used last, as Outlook lists them. Mounted when the menu opens, from that click, which is
+ * what the shell asks for. Until the list is there, and when it's empty, it takes no room.
+ * It stays an HTML menu (data-native-menu): a native one can't show the icons and folders.
+ */
+export function RecentFilesMenuSection({ onPick }: { onPick: (file: DesktopRecentFile) => void }) {
+ const t = useTranslations("desktopAttachRecent");
+ const locale = useLocale();
+ const [files, setFiles] = useState(null);
+ // One request per opening, also when a strict-mode remount runs the effect twice.
+ const request = useRef | null>(null);
+ const rootRef = useRef(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ request.current ??= listRecentFiles();
+ void request.current.then((list) => {
+ if (!cancelled) setFiles(list);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ // The menu put the focus on its first entry before the list came. If it's still
+ // there, the first file takes it: the list is what comes first.
+ useLayoutEffect(() => {
+ const root = rootRef.current;
+ const menu = root?.closest('[role="menu"]');
+ if (!root || !menu || !files?.length) return;
+ const active = document.activeElement;
+ const others = menuLevelItems(menu).filter((item) => !root.contains(item));
+ if (active && active === others[0]) root.querySelector('[role="menuitem"]')?.focus({ preventScroll: true });
+ }, [files]);
+
+ const now = Date.now();
+ return (
+ ) => string | undefined;
+ /** Opens the Move list under the button. */
+ onMove: (button: HTMLElement) => void;
+ /** Opens what the selection menu has under "More actions", under the button. */
+ onMore: (button: HTMLElement) => void;
+ onClear: () => void;
+ /** The tag picker for the whole selection. */
+ tags: { selectedIds: string[]; partialIds: string[]; scope: TagScope | null; onToggle: (tagId: string) => void };
+ disabled?: boolean;
+ /** Entries the device can't run now (offline). */
+ isDisabled?: (key: MessageActionKey) => boolean;
+}
+
+/**
+ * The reading pane while several messages are selected, as Outlook lays it out: what's
+ * selected, the selection menu's actions as buttons in even lines, More actions for the
+ * rest, and a way out. The buttons and their order come from the same list as the
+ * selection's right-click menu.
+ */
+export function SelectionView({ title, unread, entries, shortcutOf, onMove, onMore, onClear, tags, disabled, isDisabled }: SelectionViewProps) {
+ const t = useTranslations("email_list");
+ const tViewer = useTranslations("email_viewer");
+ const tCount = useTranslations("notification_center");
+ const tagMenu = useContextMenu();
+ const gridRef = useRef(null);
+ const [perLine, setPerLine] = useState(4);
+
+ // As many buttons a line as fit the pane (a container's width, not the window's), each
+ // as wide as the longest words of any of them, so none has to cut its label.
+ const labelsKey = entries.map((entry) => (entry.kind === "separator" ? "" : entry.label)).join("|");
+ useLayoutEffect(() => {
+ const grid = gridRef.current;
+ if (!grid) return;
+ const measure = () => {
+ const width = grid.clientWidth;
+ if (width <= 0) return;
+ let need = MIN_BUTTON_WIDTH;
+ for (const button of Array.from(grid.querySelectorAll("button"))) {
+ // Its icons, the label's whole text, the gaps between them, padding and border:
+ // what it needs whatever width it has now.
+ const style = getComputedStyle(button);
+ const parts = Array.from(button.children) as HTMLElement[];
+ const content = parts.reduce((sum, part) => sum + (part.hasAttribute("data-selection-label") ? part.scrollWidth : part.getBoundingClientRect().width), 0);
+ const gaps = (parseFloat(style.columnGap) || 0) * Math.max(0, parts.length - 1);
+ const frame = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.borderRightWidth) || 0);
+ need = Math.max(need, Math.ceil(content + gaps + frame) + 2);
+ }
+ setPerLine(Math.max(1, Math.floor((width + GAP) / (need + GAP))));
+ };
+ measure();
+ if (typeof ResizeObserver === "undefined") return;
+ const observer = new ResizeObserver(measure);
+ observer.observe(grid);
+ return () => observer.disconnect();
+ }, [labelsKey]);
+
+ // After an action the button that had the focus can go (Mark as read once all are
+ // read): the focus stays in the view, on the button now in its place.
+ const focused = useRef<{ el: HTMLElement; index: number } | null>(null);
+ useEffect(() => {
+ const grid = gridRef.current;
+ const last = focused.current;
+ if (!grid || !last || last.el.isConnected) return;
+ const active = document.activeElement;
+ if (active && active !== document.body) return;
+ const buttons = Array.from(grid.querySelectorAll("button:not(:disabled)"));
+ buttons[Math.min(last.index, buttons.length - 1)]?.focus();
+ });
+
+ const items = entries.filter((entry) => entry.kind !== "separator");
+ // More actions is the last button of the grid.
+ const lines = selectionRows(items.length + 1, perLine);
+ const widest = Math.max(1, ...lines);
+ const cell = `calc((100% - ${(widest - 1) * GAP}px) / ${widest})`;
+
+ const button = (entry: Exclude, index: number) => {
+ const Icon = entry.icon;
+ const common = {
+ variant: "outline" as const,
+ size: "sm" as const,
+ style: { width: cell },
+ className: cn(
+ "gap-2 min-w-0 justify-center",
+ entry.kind === "item" && entry.destructive && "hover:bg-destructive/10 hover:text-destructive",
+ ),
+ onFocus: (e: React.FocusEvent) => { focused.current = { el: e.currentTarget, index }; },
+ };
+ const label = {entry.label};
+ if (entry.kind === "submenu") {
+ const open = (el: HTMLElement) => (entry.key === "tag" ? tagMenu.openContextMenuFrom(el, null, "start") : onMove(el));
+ return (
+
+ );
+ }
+ const key = shortcutOf(entry);
+ return (
+
+ );
+ };
+
+ const all = [
+ ...items.map((entry, index) => button(entry, index)),
+ ,
+ ];
+ let at = 0;
+ const rows = lines.map((length) => {
+ const row = all.slice(at, at + length);
+ at += length;
+ // A line of one under lines of two spans the width.
+ return length === 1 && widest > 1 ? row.map((el) => cloneElement(el, { style: { width: "100%" } })) : row;
+ });
+
+ return (
+
+
+ entry.key === "tag")?.label}
+ >
+
+
+ );
+}
diff --git a/components/email/structured-mail/booking-calendar-actions.tsx b/components/email/structured-mail/booking-calendar-actions.tsx
index d39b0123f..a08d717c8 100644
--- a/components/email/structured-mail/booking-calendar-actions.tsx
+++ b/components/email/structured-mail/booking-calendar-actions.tsx
@@ -1,7 +1,6 @@
"use client";
-import { useCallback, useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { createPortal } from 'react-dom';
+import { useEffect, useRef } from 'react';
import { useTranslations } from 'next-intl';
import {
ArrowRight,
@@ -13,31 +12,26 @@ import {
Loader2,
} from '@/components/icons';
import { sanitizeColor } from '@/components/calendar/event-card';
-import { isDocumentRTL } from '@/i18n/direction';
+import { ContextMenu, ContextMenuHeader, ContextMenuItem } from '@/components/ui/context-menu';
+import { useContextMenu } from '@/hooks/use-context-menu';
+import { cn } from '@/lib/utils';
import type { Email } from '@/lib/jmap/types';
import type { StructuredCard } from '@/lib/structured-mail';
import { useBookingCalendar } from './use-booking-calendar';
import { useCollectionNames } from "@/hooks/use-collection-names";
const BUTTON = 'inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors min-h-[36px] disabled:opacity-50';
-const PICKER_WIDTH = 208;
-const EDGE = 8;
-
-interface PickerPosition { top: number; left?: number; right?: number; maxHeight: number }
-
-/** Where the picker goes: under the trigger, flipped above when there's no room, always inside the viewport. */
-function pickerPosition(rect: DOMRect, count: number): PickerPosition {
- const width = Math.min(PICKER_WIDTH, window.innerWidth - 2 * EDGE);
- const wanted = Math.min(36 * count + 40, 320);
- const below = window.innerHeight - rect.bottom - 4 - EDGE;
- const above = rect.top - 4 - EDGE;
- const placeBelow = below >= wanted || below >= above;
- const maxHeight = Math.max(120, Math.min(wanted, placeBelow ? below : above));
- const top = placeBelow ? rect.bottom + 4 : Math.max(EDGE, rect.top - 4 - maxHeight);
- const clamp = (value: number) => Math.max(EDGE, Math.min(value, window.innerWidth - width - EDGE));
- return isDocumentRTL()
- ? { top, right: clamp(window.innerWidth - rect.right), maxHeight }
- : { top, left: clamp(rect.left), maxHeight };
+/** A calendar's colour as a menu row's icon, one component per colour. */
+const dots = new Map>();
+function colorDot(color: string): React.ComponentType<{ className?: string }> {
+ let Dot = dots.get(color);
+ if (!Dot) {
+ Dot = function CalendarDot({ className }: { className?: string }) {
+ return ;
+ };
+ dots.set(color, Dot);
+ }
+ return Dot;
}
/**
@@ -52,49 +46,15 @@ export function BookingCalendarActions({ booking, email }: { booking: Structured
const t = useTranslations('structured_mail_calendar');
const calendar = useBookingCalendar(booking, email);
const { status, calendars, busy, error, notice } = calendar;
- const [picker, setPicker] = useState(null);
+ const picker = useContextMenu();
const triggerRef = useRef(null);
- const pickerRef = useRef(null);
const rowRef = useRef(null);
// An action was started from here: once it is done, focus goes to its
// outcome instead of being lost with the button or picker that vanished.
const focusAfterAction = useRef(false);
- const closePicker = useCallback(() => setPicker(null), []);
- const pickerOpen = picker !== null;
-
- useEffect(() => {
- if (!pickerOpen) return;
- pickerRef.current?.querySelector('[role="menuitem"]')?.focus();
- const onPointer = (event: MouseEvent | TouchEvent) => {
- const target = event.target as Node;
- if (pickerRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
- closePicker();
- };
- // Scrolling the list itself must not close it; scrolling the page moves the trigger away.
- const onScroll = (event: Event) => {
- if (event.target instanceof Node && pickerRef.current?.contains(event.target)) return;
- closePicker();
- };
- const onKey = (event: KeyboardEvent) => {
- if (event.key === 'Escape') {
- closePicker();
- triggerRef.current?.focus();
- }
- };
- window.addEventListener('scroll', onScroll, true);
- window.addEventListener('resize', closePicker);
- document.addEventListener('mousedown', onPointer);
- document.addEventListener('touchstart', onPointer);
- document.addEventListener('keydown', onKey);
- return () => {
- window.removeEventListener('scroll', onScroll, true);
- window.removeEventListener('resize', closePicker);
- document.removeEventListener('mousedown', onPointer);
- document.removeEventListener('touchstart', onPointer);
- document.removeEventListener('keydown', onKey);
- };
- }, [pickerOpen, closePicker]);
+ const closePicker = picker.closeContextMenu;
+ const pickerOpen = picker.contextMenu.isOpen;
useEffect(() => {
if (busy || !focusAfterAction.current) return;
@@ -107,21 +67,6 @@ export function BookingCalendarActions({ booking, email }: { booking: Structured
target?.focus();
}, [busy, status, notice, error]);
- const onMenuKey = (event: ReactKeyboardEvent) => {
- const items = Array.from(pickerRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
- if (items.length === 0) return;
- const at = items.indexOf(document.activeElement as HTMLElement);
- let next: number | null = null;
- if (event.key === 'ArrowDown') next = at < 0 ? 0 : (at + 1) % items.length;
- else if (event.key === 'ArrowUp') next = at < 0 ? items.length - 1 : (at - 1 + items.length) % items.length;
- else if (event.key === 'Home') next = 0;
- else if (event.key === 'End') next = items.length - 1;
- else if (event.key === 'Tab') closePicker();
- if (next === null) return;
- event.preventDefault();
- items[next].focus();
- };
-
const act = (action: () => Promise) => {
focusAfterAction.current = true;
void action();
@@ -137,11 +82,11 @@ export function BookingCalendarActions({ booking, email }: { booking: Structured
act(() => calendar.add(calendars[0]?.id));
return;
}
- if (picker) {
+ if (pickerOpen) {
closePicker();
return;
}
- if (triggerRef.current) setPicker(pickerPosition(triggerRef.current.getBoundingClientRect(), calendars.length));
+ if (triggerRef.current) picker.openContextMenuFrom(triggerRef.current, null, 'start');
};
const noticeText = notice === 'added' ? t('added') : notice === 'updated' ? t('updated') : notice === 'removed' ? t('removed') : null;
@@ -158,41 +103,34 @@ export function BookingCalendarActions({ booking, email }: { booking: Structured
onClick={onAdd}
disabled={busy}
aria-haspopup={calendars.length > 1 ? 'menu' : undefined}
- aria-expanded={calendars.length > 1 ? Boolean(picker) : undefined}
+ aria-expanded={calendars.length > 1 ? pickerOpen : undefined}
className={BUTTON}
>
; showInFolder: ReturnType };
+}
+
+function setPlatform(platform: 'win32' | 'darwin' | 'linux') {
+ window.bulwarkDesktop = { version: 1, platform } as unknown as BulwarkDesktopBridge;
+}
+
+function renderBrowser(resources: FileResource[] = [NOTES, PLANS]) {
+ const client = { listAllFileNodesAcrossAccounts: vi.fn(async () => []) } as unknown as IJMAPClient;
+ act(() => {
+ useFileStore.setState({ client, sharedRoots: [], allFolders: [], currentParentId: null, pathStack: [{ id: null, name: '' }], hasListed: true });
+ });
+ const noop = vi.fn(async () => {});
+ render(
+ ''}
+ favorites={[]}
+ recentFiles={[]}
+ onToggleFavorite={vi.fn()}
+ onOpenRecent={vi.fn()}
+ client={client}
+ ownAccountId="a"
+ onNavigate={vi.fn()}
+ onSetSelection={vi.fn()}
+ onToggleSelect={vi.fn()}
+ onPreviewFile={vi.fn()}
+ onDownload={noop}
+ onRenameNode={noop}
+ onDeleteNode={noop}
+ onDownloadNode={noop}
+ onRevealNode={noop}
+ onRemoveRecent={vi.fn()}
+ />,
+ );
+}
+
+function moreButton(name: string) {
+ return screen.getAllByRole('button', { name: 'more_actions' }).find((b) => b.closest('[data-resource]')?.getAttribute('data-resource') === name)!;
+}
+
+afterEach(() => {
+ cleanup();
+ window.bulwarkDesktop = undefined;
+ useFilesSyncStore.getState().reset();
+});
+
+describe('Show in Explorer on the Files screen', () => {
+ it('is in the row menu of a covered file and folder only, and opens it there', () => {
+ setPlatform('win32');
+ const c = controller(['f-notes', 'd-plans']);
+ useFilesSyncStore.setState({ available: true, controller: c });
+ renderBrowser();
+ fireEvent.click(moreButton('notes.txt'));
+ const item = within(screen.getByRole('menu')).getByRole('menuitem', { name: 'show_in.explorer' });
+ fireEvent.click(item);
+ expect(c.showInFolder).toHaveBeenCalledWith('f-notes');
+ expect(screen.queryByRole('menu')).toBeNull();
+ fireEvent.click(moreButton('Plans'));
+ fireEvent.click(within(screen.getByRole('menu')).getByRole('menuitem', { name: 'show_in.explorer' }));
+ expect(c.showInFolder).toHaveBeenLastCalledWith('d-plans');
+ });
+
+ it('is not offered for what no root covers, nor outside the app', () => {
+ setPlatform('win32');
+ useFilesSyncStore.setState({ available: true, controller: controller(['d-plans']) });
+ renderBrowser();
+ fireEvent.click(moreButton('notes.txt'));
+ expect(within(screen.getByRole('menu')).queryByRole('menuitem', { name: 'show_in.explorer' })).toBeNull();
+ cleanup();
+ useFilesSyncStore.setState({ available: false, controller: controller(['f-notes']) });
+ renderBrowser();
+ fireEvent.click(moreButton('notes.txt'));
+ expect(within(screen.getByRole('menu')).queryByRole('menuitem', { name: /show_in/ })).toBeNull();
+ });
+
+ it.each([
+ ['darwin', 'show_in.finder'],
+ ['linux', 'show_in.file_manager'],
+ ] as const)('is named for the platform: %s', (platform, label) => {
+ setPlatform(platform);
+ useFilesSyncStore.setState({ available: true, controller: controller(['f-notes']) });
+ renderBrowser([NOTES]);
+ fireEvent.click(moreButton('notes.txt'));
+ expect(within(screen.getByRole('menu')).getByRole('menuitem', { name: label })).toBeInTheDocument();
+ });
+});
+
+describe('sync status on the Files screen', () => {
+ it.each(['synced', 'syncing', 'pending', 'error', 'online-only'])('names a %s row', (state) => {
+ useFilesSyncStore.setState({ available: true, controller: controller([]), items: { 'f-notes': state } });
+ renderBrowser([NOTES, PLANS]);
+ const row = document.querySelector('[data-resource="notes.txt"]') as HTMLElement;
+ expect(within(row).getByRole('img', { name: `item.${state}` })).toBeInTheDocument();
+ // Plans has no status: no badge.
+ const plans = document.querySelector('[data-resource="Plans"]') as HTMLElement;
+ expect(plans.querySelector('[data-files-sync-item]')).toBeNull();
+ });
+
+ it('shows nothing outside the app', () => {
+ useFilesSyncStore.setState({ available: false, items: { 'f-notes': 'synced' } });
+ renderBrowser([NOTES]);
+ expect(document.querySelector('[data-files-sync-item]')).toBeNull();
+ });
+});
+
+describe('details panel', () => {
+ function renderPanel() {
+ render(
+ ''}
+ onClose={vi.fn()}
+ onOpen={vi.fn()}
+ onEdit={vi.fn()}
+ onShare={vi.fn()}
+ onToggleStar={vi.fn()}
+ />,
+ );
+ }
+
+ it('says the status and offers Show in Finder for a covered file', () => {
+ setPlatform('darwin');
+ const c = controller(['f-notes']);
+ useFilesSyncStore.setState({ available: true, controller: c, items: { 'f-notes': 'pending' } });
+ renderPanel();
+ expect(screen.getByText('item.label')).toBeInTheDocument();
+ expect(screen.getByText('item.pending')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'show_in.finder' }));
+ expect(c.showInFolder).toHaveBeenCalledWith('f-notes');
+ });
+
+ it('has neither for a file no root covers', () => {
+ setPlatform('win32');
+ useFilesSyncStore.setState({ available: true, controller: controller([]) });
+ renderPanel();
+ expect(screen.queryByText('item.label')).toBeNull();
+ expect(screen.queryByRole('button', { name: /show_in/ })).toBeNull();
+ });
+});
diff --git a/components/files-sync/__tests__/files-sync-prompts.test.tsx b/components/files-sync/__tests__/files-sync-prompts.test.tsx
new file mode 100644
index 000000000..b453cf873
--- /dev/null
+++ b/components/files-sync/__tests__/files-sync-prompts.test.tsx
@@ -0,0 +1,90 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NextIntlClientProvider } from 'next-intl';
+import en from '@/locales/en/common.json';
+import type { FilesRoot } from '@/lib/desktop/types';
+import type { FilesSyncController } from '@/lib/files-sync/types';
+
+// The mass-delete question asked wherever the user is (FilesSyncPrompts, mounted
+// with the app-wide hosts), and kept away while the settings page asks it itself.
+
+vi.unmock('next-intl');
+
+const { useFilesSyncStore } = await import('@/stores/files-sync-store');
+const { FilesSyncPrompts, useInlineMassDeleteQuestions } = await import('../files-sync-prompts');
+
+const ROOT: FilesRoot = {
+ id: 'r1', kind: 'folder', account: 'acc', path: 'C:\\Users\\ann\\Projects', remoteId: 'n1', remoteLabel: 'Work / Projects', paused: false, createdAt: 1,
+};
+
+function setup(count = 80, side: 'local' | 'remote' = 'local') {
+ const controller = { confirmMassDelete: vi.fn(async () => {}) } as unknown as FilesSyncController & { confirmMassDelete: ReturnType };
+ useFilesSyncStore.setState({
+ available: true,
+ account: 'acc',
+ controller,
+ roots: [ROOT],
+ status: { r1: { rootId: 'r1', state: 'confirm-delete', pending: 0, done: 0, lastSyncedAt: null, massDelete: { count, side } } },
+ });
+ return controller;
+}
+
+const wrap = (node: React.ReactNode) => {node} ;
+
+afterEach(() => useFilesSyncStore.getState().reset());
+
+describe('mass-delete prompt, app-wide', () => {
+ it('asks with the count and the side, and deletes on yes', () => {
+ const controller = setup(80, 'local');
+ render(wrap( = {
+ synced: { icon: CheckCircle2, className: "text-green-600 dark:text-green-400" },
+ syncing: { icon: RefreshCw, className: "text-primary animate-spin motion-reduce:animate-none" },
+ pending: { icon: Clock, className: "text-muted-foreground" },
+ error: { icon: AlertCircle, className: "text-destructive" },
+ "online-only": { icon: Cloud, className: "text-muted-foreground" },
+};
+
+/** The node's sync status, when the engine has one for it. */
+function useItemStatus(nodeId: string): FilesSyncItemStatus | null {
+ return useFilesSyncStore((s) => (s.available ? s.items[nodeId] ?? null : null));
+}
+
+/** "Show in Explorer" for a node a root covers, or null. */
+export function useShowInFolder(nodeId: string | null | undefined): { label: string; run: () => void } | null {
+ const t = useTranslations("files_sync");
+ const available = useFilesSyncStore((s) => s.available);
+ const controller = useFilesSyncStore((s) => s.controller);
+ // Coverage changes with the roots and what the engine knows of the tree.
+ useFilesSyncStore((s) => s.roots);
+ useFilesSyncStore((s) => s.items);
+ if (!available || !controller || !nodeId) return null;
+ if (!controller.coverage(nodeId)) return null;
+ return {
+ label: t(showInKey(getDesktopBridge()?.platform)),
+ run: () => {
+ void controller.showInFolder(nodeId).then(
+ (shown) => { if (!shown) toast.error(t("show_in.failed")); },
+ () => toast.error(t("show_in.failed")),
+ );
+ },
+ };
+}
+
+/** The menu entry of a row on the Files screen. */
+export function ShowInFolderMenuItem({ nodeId, onRan }: { nodeId: string; onRan: () => void }) {
+ const showIn = useShowInFolder(nodeId);
+ if (!showIn) return null;
+ return { onRan(); showIn.run(); }} />;
+}
+
+/** The same in the details panel's buttons. */
+export function ShowInFolderButton({ nodeId }: { nodeId: string }) {
+ const showIn = useShowInFolder(nodeId);
+ if (!showIn) return null;
+ return (
+
+ );
+}
+
+/** A small icon on a row, named for screen readers and on hover. */
+export function FilesSyncBadge({ nodeId, className }: { nodeId: string; className?: string }) {
+ const t = useTranslations("files_sync");
+ const status = useItemStatus(nodeId);
+ if (!status) return null;
+ const { icon: Icon, className: iconClass } = ITEM_ICONS[status];
+ const label = t(`item.${status}`);
+ return (
+
+
+
+ );
+}
+
+/** "On this computer: Synced", a row of the details panel's list. */
+export function FilesSyncDetailsRow({ nodeId }: { nodeId: string }) {
+ const t = useTranslations("files_sync");
+ const status = useItemStatus(nodeId);
+ if (!status) return null;
+ const { icon: Icon, className: iconClass } = ITEM_ICONS[status];
+ return (
+ ): string {
+ const t = useTranslations("files_sync");
+ // The side the items went from: this computer's folder, or the Files folder.
+ return massDelete.side === "local"
+ ? t("mass_delete.local", { count: massDelete.count, folder: rootName(root, t("drive.root_name")) })
+ : t("mass_delete.remote", { count: massDelete.count, folder: root.remoteLabel || t("drive.root_name") });
+}
+
+interface AnswerButtonsProps {
+ rootId: string;
+ count: number;
+ /** After an answer went out. */
+ onAnswered?: () => void;
+}
+
+/** "Delete them" and "Bring them back", straight to the engine. */
+export function MassDeleteAnswers({ rootId, count, onAnswered }: AnswerButtonsProps) {
+ const t = useTranslations("files_sync");
+ const controller = useFilesSyncStore((s) => s.controller);
+ const [busy, setBusy] = useState(false);
+ const answer = (allow: boolean) => {
+ if (!controller) return;
+ setBusy(true);
+ void controller.confirmMassDelete(rootId, allow).catch(() => {}).finally(() => {
+ setBusy(false);
+ onAnswered?.();
+ });
+ };
+ return (
+ <>
+
+
+
+ );
+}
+
+/** The question inside a folder's row on the settings page. */
+export function MassDeleteQuestion({ root, status }: { root: FilesRoot; status: FilesSyncRootStatus }) {
+ const massDelete = status.massDelete ?? { count: 0, side: "local" as const };
+ const text = useMassDeleteText(root, massDelete);
+ return (
+
+ )}
+ footer={(
+ <>
+
+
-
-
);
}
diff --git a/components/calendar/quick-create-popover.tsx b/components/calendar/quick-create-popover.tsx
index 913afae41..844bf936b 100644
--- a/components/calendar/quick-create-popover.tsx
+++ b/components/calendar/quick-create-popover.tsx
@@ -3,7 +3,7 @@
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useTranslations } from "next-intl";
-import { format } from "date-fns";
+import { format, isSameDay } from "date-fns";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Clock, X } from "@/components/icons";
@@ -58,8 +58,9 @@ export function computePosition(anchor: DOMRect | null, height: number, width =
}
/**
- * Compact editor that opens next to an empty slot clicked in the week or
- * day view: a title, the time that was picked, the calendar, and a way into
+ * Compact editor that opens next to an empty slot clicked or dragged over in
+ * the week or day view, or days picked in the month view: a title, the time
+ * that was picked, the calendar, and a way into
* the full editor. Enter saves, Escape or a click elsewhere discards.
*/
export function QuickCreatePopover({
@@ -148,14 +149,19 @@ export function QuickCreatePopover({
};
}, [onClose]);
- const canSave = draft.title.trim().length > 0 && !!draft.calendarId;
+ // An empty title saves as "(No title)", as in Google Calendar.
+ const canSave = !!draft.calendarId;
const handleSubmit = useCallback((e: React.FormEvent) => {
e.preventDefault();
if (canSave) onSave();
}, [canSave, onSave]);
const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
- const dateLabel = intlFormatter.dateTime(draft.start, { weekday: "long", month: "long", day: "numeric" });
+ const dayFormat = { weekday: "long", month: "long", day: "numeric" } as const;
+ // Days picked by a drag in the month view: the first and the last.
+ const dateLabel = draft.allDay && !isSameDay(draft.start, draft.end)
+ ? `${intlFormatter.dateTime(draft.start, dayFormat)} – ${intlFormatter.dateTime(draft.end, dayFormat)}`
+ : intlFormatter.dateTime(draft.start, dayFormat);
const timeLabel = draft.allDay ? t("events.all_day") : `${format(draft.start, timeFmt)} – ${format(draft.end, timeFmt)}`;
return createPortal(
diff --git a/components/contacts/contacts-sidebar.tsx b/components/contacts/contacts-sidebar.tsx
index 05c993c48..541c19fd6 100644
--- a/components/contacts/contacts-sidebar.tsx
+++ b/components/contacts/contacts-sidebar.tsx
@@ -745,6 +745,7 @@ export function ContactsSidebar({
{(["to", "cc", "bcc"] as const).map((field) => (
{
const groupId = groupContextMenu.data!.id;
diff --git a/components/email/__tests__/composer-attach-recent.test.tsx b/components/email/__tests__/composer-attach-recent.test.tsx
new file mode 100644
index 000000000..8a61dcd26
--- /dev/null
+++ b/components/email/__tests__/composer-attach-recent.test.tsx
@@ -0,0 +1,401 @@
+import { render, screen, fireEvent, act, waitFor, within } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { EmailComposer } from '../email-composer';
+import { useAuthStore } from '@/stores/auth-store';
+import { DEFAULT_POLICY_SNAPSHOT, type PolicySnapshot } from '@/lib/desktop/policy-schema';
+import type { BulwarkDesktopBridge, DesktopRecentFile } from '@/lib/desktop/types';
+
+// Recent files in the Attach menu, in the desktop app: the shell's side is
+// repos/desktop's test/recent-files.spec.ts; here the bridge is a stub.
+
+const hoisted = vi.hoisted(() => ({
+ picked: [] as unknown[],
+ beforeAttachmentUpload: vi.fn(async (_info: { name: string }) => true),
+ toastError: vi.fn(),
+}));
+
+vi.mock('@/components/files/file-picker-dialog', () => ({
+ FilePickerDialog: ({ onPick }: { onPick: (nodes: unknown[]) => void }) =>
+ React.createElement(
+ 'button',
+ { type: 'button', 'data-testid': 'fake-file-picker', onClick: () => onPick(hoisted.picked) },
+ 'pick',
+ ),
+}));
+
+// ─── Heavy component mocks (mirrors composer-plugin-attachment-source.test.tsx) ─
+
+vi.mock('@/components/email/rich-text-editor', () => ({
+ RichTextEditor: () => React.createElement('div', { 'data-testid': 'rich-text-editor' }),
+}));
+vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
+
+vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null }));
+vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null }));
+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' }],
+ defaultIdentityId: 'id-me',
+ };
+ 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 { 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,
+ sendDelaySeconds: 0,
+ signaturePosition: 'above_quote',
+ signatureSeparatorEnabled: false,
+ requestReadReceiptDefault: 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 };
+});
+
+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 };
+});
+
+vi.mock('@/stores/template-store', () => {
+ const state = { templates: [], addTemplate: 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 { useTemplateStore: hook };
+});
+
+// ─── Misc dependency mocks ────────────────────────────────────────────────────
+
+vi.mock('@/stores/toast-store', () => ({
+ toast: { info: () => {}, error: hoisted.toastError, 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' },
+ onBeforeAttachmentUpload: { intercept: hoisted.beforeAttachmentUpload },
+ onComposeSend: { takeOver: async () => 'default' },
+ onTransformOutgoingEmail: { transform: async (email: unknown) => email },
+ },
+ contactHooks: {
+ search: { call: async () => [] },
+ onProvideRecipientSuggestions: { transform: async (initial: unknown) => initial },
+ },
+}));
+
+vi.mock('@/lib/email-sanitization', () => ({
+ sanitizeSignatureHtml: (v: string) => v,
+ sanitizeEmailHtml: (v: string) => v,
+ parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
+}));
+
+vi.mock('@/lib/email-threading', () => ({
+ computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
+}));
+vi.mock('@/lib/signature-utils', () => ({
+ appendPlainTextSignature: (body: string) => body,
+ getPlainTextSignature: () => '',
+ plainTextBodyHasSignature: () => false,
+ plainTextBodyWithoutSignature: (body: string) => body,
+}));
+vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' }));
+vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } }));
+vi.mock('@/components/email/quoted-html', () => ({
+ buildQuotedHtmlBlock: () => '',
+ serializeEditorContent: () => '',
+}));
+vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s }));
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+const NOW = Date.now();
+const RECENT: DesktopRecentFile[] = [
+ { id: 'id-report', name: 'Quarterly report.docx', folder: '\\\\files\\team\\Reports', path: '\\\\files\\team\\Reports\\Quarterly report.docx', usedAt: NOW - 5 * 60_000, icon: 'data:image/png;base64,iVBORw0KGgo=' },
+ { id: 'id-budget', name: 'Budget 2027.xlsx', folder: 'C:\\Users\\me\\Documents', path: 'C:\\Users\\me\\Documents\\Budget 2027.xlsx', usedAt: NOW - 3 * 60 * 60_000 },
+];
+
+interface DesktopOptions {
+ files?: DesktopRecentFile[];
+ policyOff?: boolean;
+ /** The shell's native menus: the Attach menu must stay HTML all the same. */
+ popup?: ReturnType;
+}
+
+function desktop({ files = RECENT, policyOff = false, popup }: DesktopOptions = {}) {
+ const snapshot: PolicySnapshot = {
+ ...DEFAULT_POLICY_SNAPSHOT,
+ ...(policyOff ? { RecentFilesInAttach: { value: false, source: 'forced-machine', locked: true } } : {}),
+ } as PolicySnapshot;
+ const list = vi.fn(async () => ({ ok: true as const, files }));
+ const attach = vi.fn(async (id: string) => {
+ const file = files.find((f) => f.id === id);
+ return file
+ ? { ok: true as const, file: { name: file.name, data: new TextEncoder().encode(`bytes of ${file.name}`) } }
+ : { ok: false as const, reason: 'unknown' as const };
+ });
+ window.bulwarkDesktop = {
+ version: 1,
+ platform: 'win32',
+ policy: { get: () => snapshot, onChange: () => () => {} },
+ recentFiles: { list, attach },
+ ...(popup ? { menu: { popup, setState: () => {}, onCommand: () => () => {} } } : {}),
+ } as unknown as BulwarkDesktopBridge;
+ return { list, attach };
+}
+
+function client(overrides: Record = {}) {
+ return {
+ createDraft: vi.fn().mockResolvedValue('draft-1'),
+ getEmail: vi.fn(),
+ hasDelayedSend: () => false,
+ getMaxDelayedSend: () => 0,
+ // No Files, no plugins: in a browser, Attach is a plain button.
+ supportsFiles: () => false,
+ getMaxSizeAttachmentsPerEmail: () => 0,
+ getMaxSizeUpload: () => 0,
+ uploadBlob: vi.fn(() => new Promise(() => {})),
+ ...overrides,
+ };
+}
+
+const rows = () => screen.queryAllByTestId('composer-recent-file');
+
+async function openMenu() {
+ fireEvent.click(screen.getByTestId('composer-attach-menu'));
+ await act(async () => {});
+}
+
+describe('recent files in the Attach menu', () => {
+ afterEach(() => {
+ window.bulwarkDesktop = undefined;
+ useAuthStore.setState({ client: null });
+ vi.clearAllMocks();
+ hoisted.beforeAttachmentUpload.mockImplementation(async () => true);
+ });
+
+ it('in a browser the paperclip is the plain button it was', () => {
+ useAuthStore.setState({ client: client() as never });
+ render(, keywords: Record (name === 'then' ? undefined : () => undefined) });
-let popup: ReturnType;
-
beforeEach(() => {
- popup = vi.fn(async () => null);
window.bulwarkDesktop = {
version: 1,
platform: 'win32',
- menu: { setState: () => {}, popup },
+ menu: { setState: () => {} },
// The shell's list, for the ones used here.
edit: { canEdit: (name: string) => /\.(docx|txt)$/.test(name), list: async () => [], onChange: () => () => {} },
} as never;
@@ -74,8 +71,8 @@ async function viewerMenu(email: Email): Promise<(string | undefined)[]> {
render( = {}) {
describe('EmailContextMenu batch forward as attachment', () => {
it('shows the batch header and batch forward item when the right-clicked email is in a multi-selection', () => {
renderMenu({ isMultiSelect: true, selectedCount: 3, onBatchForwardAsAttachment: vi.fn() });
+ fireEvent.click(screen.getByTestId('ctx-more'));
expect(screen.getByTestId('ctx-batch-forward-as-attachment')).toBeInTheDocument();
expect(screen.getByText('items_selected')).toBeInTheDocument();
});
@@ -60,6 +61,7 @@ describe('EmailContextMenu batch forward as attachment', () => {
it('clicking the batch item invokes onBatchForwardAsAttachment and closes the menu', () => {
const onBatchForwardAsAttachment = vi.fn();
const { onClose } = renderMenu({ isMultiSelect: true, selectedCount: 3, onBatchForwardAsAttachment });
+ fireEvent.click(screen.getByTestId('ctx-more'));
fireEvent.click(screen.getByTestId('ctx-batch-forward-as-attachment'));
expect(onBatchForwardAsAttachment).toHaveBeenCalledTimes(1);
expect(onClose).toHaveBeenCalledTimes(1);
@@ -67,6 +69,7 @@ describe('EmailContextMenu batch forward as attachment', () => {
it('hides the single-message forward-as-attachment item in batch mode', () => {
renderMenu({ isMultiSelect: true, selectedCount: 3, onBatchForwardAsAttachment: vi.fn() });
+ fireEvent.click(screen.getByTestId('ctx-more'));
// vitest's next-intl mock renders labels as raw keys; the singular key
// must be absent while the plural batch key is present.
expect(screen.queryByText('forward_as_attachment')).toBeNull();
@@ -96,6 +99,7 @@ describe('EmailContextMenu batch forward as attachment', () => {
it('disables the batch item when no handler is passed', () => {
renderMenu({ isMultiSelect: true, selectedCount: 3 });
+ fireEvent.click(screen.getByTestId('ctx-more'));
expect((screen.getByTestId('ctx-batch-forward-as-attachment') as HTMLButtonElement).disabled).toBe(true);
});
});
diff --git a/components/email/__tests__/email-list-batch-bar.test.tsx b/components/email/__tests__/email-list-batch-bar.test.tsx
index 67bddb70b..3a9cb6a19 100644
--- a/components/email/__tests__/email-list-batch-bar.test.tsx
+++ b/components/email/__tests__/email-list-batch-bar.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
import { useEmailStore } from '@/stores/email-store';
import { useAuthStore } from '@/stores/auth-store';
import { useSettingsStore } from '@/stores/settings-store';
@@ -61,6 +61,7 @@ describe('selection bar', () => {
fireEvent.click(screen.getByTestId('batch-more'));
expect(screen.getByText('items_selected')).toBeTruthy();
expect(screen.getByTestId('ctx-move-to')).toBeTruthy();
+ fireEvent.click(screen.getByTestId('ctx-more'));
expect(screen.getByTestId('ctx-batch-forward-as-attachment')).toBeTruthy();
});
});
@@ -99,7 +100,8 @@ describe('selection bar: Move, read state and the reading pane', () => {
const pane = host.querySelector('[data-testid="selection-pane"]') as HTMLElement;
expect(pane).not.toBeNull();
expect(pane.textContent).toContain('selected_conversations');
- for (const id of ['archive', 'delete', 'move', 'mark-read']) {
+ // All read: the pane offers Mark as unread, as the selection's menu does.
+ for (const id of ['archive', 'delete', 'move', 'mark-unread', 'star', 'tag', 'spam', 'more']) {
expect(pane.querySelector(`[data-testid="pane-batch-${id}"]`)).not.toBeNull();
}
fireEvent.click(pane.querySelector('[data-testid="pane-batch-archive"]')!);
@@ -136,15 +138,71 @@ describe('the reading pane for a selection (mail-p2-15)', () => {
document.body.appendChild(host);
render(('[role="menuitem"]'))
+ .filter((row) => row.parentElement?.closest('[role="menu"]') === menu)
+ .map((row) => row.querySelector('[data-menu-label]')?.textContent ?? '');
+ expect(paneLabels(pane)).toEqual(menuTop);
+ expect(paneLabels(pane)).toEqual(['archive', 'delete', 'move_to', 'mark_read', 'mark_unread', 'star', 'tag', 'mark_as_spam', 'more_actions']);
+ host.remove();
+ });
+
+ it('opens what the menu has under More actions from its More actions button', () => {
+ const host = document.createElement('div');
+ document.body.appendChild(host);
+ render( = {}) =>
- ({
- id, name, sortOrder: 0, totalEmails: 0, unreadEmails: 0, totalThreads: 0, unreadThreads: 0,
- myRights: writable, isSubscribed: true, accountId: 'A', accountName: 'me@example.org', isShared: false, ...extra,
- }) as Mailbox;
-const shared = (id: string, name: string, extra: Partial = {}) =>
- box(`S:${id}`, name, { accountId: 'S', accountName: 'team@example.org', isShared: true, ...extra });
-
-const mailboxes = [
- box('inbox', 'Inbox', { role: 'inbox' }),
- box('trash', 'Trash', { role: 'trash' }),
- box('work', 'Work'),
- box('clients', 'Clients', { parentId: 'work' }),
- box('acme', 'Acme', { parentId: 'clients' }),
- box('rd', 'R&D'),
- shared('inbox', 'Inbox', { role: 'inbox' }),
- shared('trash', 'Trash', { role: 'trash' }),
-];
-
-let popup: ReturnType;
-
-beforeEach(() => {
- popup = vi.fn(() => new Promise(() => {}));
- window.bulwarkDesktop = { version: 1, platform: 'win32', menu: { setState: () => {}, popup: popup as never } } as unknown as BulwarkDesktopBridge;
-});
-
-afterEach(() => {
- window.bulwarkDesktop = undefined;
-});
-
-async function nativeMoveMenu(): Promise {
- const model = buildMoveMenu(mailboxes, { currentMailboxId: 'inbox', recentIds: () => ['acme'] });
- render(
- {}}>
-
- {}} />
-
- ,
- );
- await waitFor(() => expect(popup).toHaveBeenCalled());
- const items = popup.mock.calls[0][0] as DesktopNativeMenuItem[];
- return items[0].submenu!;
-}
-
-const labels = (items: DesktopNativeMenuItem[] | undefined) => (items ?? []).map((item) => item.label ?? item.type);
-
-describe('the Move menu shown natively', () => {
- it('has the recent folders under a header, then the account\'s own folders', async () => {
- const move = await nativeMoveMenu();
- expect(labels(move)).toEqual([
- 'recent', 'Work / Clients / Acme', 'separator',
- 'mailboxes.inbox', 'mailboxes.trash', 'R&D', 'Work',
- 'separator', 'team@example.org',
- ]);
- expect(move[0].enabled).toBe(false);
- // The open folder is there, greyed.
- expect(move[3].enabled).toBe(false);
- });
-
- it('nests subfolders as submenus, the folder itself first', async () => {
- const move = await nativeMoveMenu();
- const work = move.find((item) => item.label === 'Work')!;
- expect(labels(work.submenu)).toEqual(['Work', 'separator', 'Clients']);
- expect(work.submenu![0].id).toBeTruthy();
- const clients = work.submenu![2];
- expect(labels(clients.submenu)).toEqual(['Clients', 'separator', 'Acme']);
- });
-
- it('puts another account\'s folders in a submenu under its name', async () => {
- const move = await nativeMoveMenu();
- const team = move.find((item) => item.label === 'team@example.org')!;
- expect(labels(team.submenu)).toEqual(['mailboxes.inbox', 'mailboxes.trash']);
- });
-});
diff --git a/components/email/__tests__/phishing-report-menus.test.tsx b/components/email/__tests__/phishing-report-menus.test.tsx
index 9a25f5627..7d9644e1d 100644
--- a/components/email/__tests__/phishing-report-menus.test.tsx
+++ b/components/email/__tests__/phishing-report-menus.test.tsx
@@ -167,6 +167,7 @@ describe('the row menu', () => {
it('reports a whole selection, one message each', () => {
setAddress('soc@example.org');
rowMenu('inbox', { isMultiSelect: true, selectedCount: 2, batchEmails: [email, other], onBatchMarkAsSpam: vi.fn() });
+ fireEvent.click(screen.getByTestId('ctx-more'));
fireEvent.click(screen.getByTestId('ctx-batch-report-phishing'));
expect(usePhishingReportStore.getState().pending?.emails.map((e) => e.id)).toEqual(['e1', 'e2']);
});
diff --git a/components/email/__tests__/reader-attachments.test.tsx b/components/email/__tests__/reader-attachments.test.tsx
index 9bb922889..f742726cf 100644
--- a/components/email/__tests__/reader-attachments.test.tsx
+++ b/components/email/__tests__/reader-attachments.test.tsx
@@ -30,47 +30,50 @@ describe('the right-click menu in the desktop app', () => {
cleanup();
});
- const openMenu = async (popupAnswer: (items: { id?: string; label?: string }[]) => string | null, overrides: Partial[0]> = {}) => {
- const popup = vi.fn(async (items: { id?: string; label?: string }[]) => popupAnswer(items));
- window.bulwarkDesktop = { version: 1, platform: 'win32', menu: { setState: () => {}, popup } } as never;
+ // The same HTML menu as everywhere else in the app (it was a native menu).
+ const openMenu = async (overrides: Partial[0]> = {}) => {
+ window.bulwarkDesktop = { version: 1, platform: 'win32', menu: { setState: () => {} } } as never;
const props = renderBar([file('1', 'report.pdf')], { onCopyFile: vi.fn(), ...overrides });
fireEvent.contextMenu(await screen.findByTestId('attachment'), { clientX: 5, clientY: 5 });
- await waitFor(() => expect(popup).toHaveBeenCalled());
- return { props, popup };
+ const menu = await screen.findByRole('menu');
+ const labels = within(menu).queryAllByRole('menuitem').map((item) => item.querySelector('[data-menu-label]')?.textContent ?? '');
+ const pick = (label: string) => fireEvent.click(within(menu).getAllByRole('menuitem').find((item) => item.querySelector('[data-menu-label]')?.textContent === label)!);
+ return { props, labels, pick };
};
- it('has Open, Save as and Copy, natively', async () => {
- const { popup } = await openMenu(() => null);
- expect(popup.mock.calls[0][0].map((item) => item.label)).toEqual(['open', 'save_as', 'copy']);
+ it('has Open, Save as and Copy', async () => {
+ const { labels } = await openMenu();
+ expect(labels).toEqual(['open', 'save_as', 'copy']);
});
it.each([['open', 'onOpen'], ['save_as', 'onDownload'], ['copy', 'onCopyFile']] as const)('%s runs the action', async (label, handler) => {
- const { props } = await openMenu((items) => items.find((item) => item.label === label)!.id!);
+ const { props, pick } = await openMenu();
+ pick(label);
await waitFor(() => expect((props as unknown as Record>)[handler]).toHaveBeenCalledTimes(1));
expect((props as unknown as Record>)[handler].mock.calls[0][0]).toMatchObject({ id: '1' });
});
- it('with downloads off there\'s nothing to save or copy', async () => {
- const { popup } = await openMenu(() => null, { downloadsOff: true, opensPreview: () => true });
- expect(popup.mock.calls[0][0].map((item) => item.label)).toEqual(['open']);
+ it('with downloads off there is nothing to save or copy', async () => {
+ const { labels } = await openMenu({ downloadsOff: true, opensPreview: () => true });
+ expect(labels).toEqual(['open']);
});
it('Edit shows when the file can be edited and runs the action', async () => {
const onEdit = vi.fn();
- const { props, popup } = await openMenu((items) => items.find((i) => i.label === 'edit')?.id ?? null, { onEdit, canEdit: () => true });
- const labels = popup.mock.calls[0][0].flatMap((i: { label?: string }) => (i.label ? [i.label] : []));
+ const { props, labels, pick } = await openMenu({ onEdit, canEdit: () => true });
expect(labels).toEqual(['open', 'save_as', 'edit', 'copy']);
+ pick('edit');
await waitFor(() => expect(onEdit).toHaveBeenCalledWith(props.attachments[0]));
});
it('Edit stays out for a file it cannot take', async () => {
- const { popup } = await openMenu(() => null, { onEdit: vi.fn(), canEdit: () => false });
- expect(popup.mock.calls[0][0].map((i: { label?: string }) => i.label)).not.toContain('edit');
+ const { labels } = await openMenu({ onEdit: vi.fn(), canEdit: () => false });
+ expect(labels).not.toContain('edit');
});
it('Edit stays out with downloads off, whatever else says yes', async () => {
- const { popup } = await openMenu(() => null, { onEdit: vi.fn(), canEdit: () => true, downloadsOff: true });
- expect(popup.mock.calls[0][0].map((i: { label?: string }) => i.label)).not.toContain('edit');
+ const { labels } = await openMenu({ onEdit: vi.fn(), canEdit: () => true, downloadsOff: true });
+ expect(labels).not.toContain('edit');
});
it('a browser keeps its own menu', async () => {
diff --git a/components/email/__tests__/row-menu-everywhere.test.tsx b/components/email/__tests__/row-menu-everywhere.test.tsx
new file mode 100644
index 000000000..b99df236d
--- /dev/null
+++ b/components/email/__tests__/row-menu-everywhere.test.tsx
@@ -0,0 +1,138 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { Email, Mailbox } from '@/lib/jmap/types';
+
+vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
+vi.mock('@/hooks/use-copy-link', () => ({ useCopyLink: () => vi.fn() }));
+// Rules needs a Sieve account; its entry stands in here.
+vi.mock('../rules-menu', () => ({
+ RulesContextSubMenu: () => ;
+
+function renderMenu(props: Partial = {}) {
+ return render(
+ ('[role="menuitem"]'))
+ .filter((row) => row.parentElement?.closest('[role="menu"]') === menu)
+ .map((row) => row.querySelector('[data-menu-label]')?.textContent ?? '');
+}
+
+const ROW_TOP = ['reply', 'reply_all', 'forward', 'archive', 'delete', 'move_to', 'mark_unread', 'star', 'tag', 'mark_as_spam', 'open_in_window', 'more_actions'];
+
+afterEach(() => {
+ window.bulwarkDesktop = undefined;
+ localStorage.clear();
+});
+
+describe("a message row's right-click menu", () => {
+ it('has the short list at the top in the browser', () => {
+ renderMenu();
+ expect(labels(screen.getAllByRole('menu')[0])).toEqual(ROW_TOP);
+ });
+
+ it('is the same HTML menu in the desktop app, on screen, with no native copy', async () => {
+ const popup = vi.fn(async () => null);
+ window.bulwarkDesktop = { version: 1, platform: 'win32', menu: { setState: () => {}, popup } } as never;
+ renderMenu();
+ const menu = screen.getAllByRole('menu')[0];
+ await waitFor(() => expect(menu.style.visibility).toBe('visible'));
+ expect(labels(menu)).toEqual(ROW_TOP);
+ // Icons on the rows, as in the browser.
+ expect(within(menu).getByTestId('ctx-delete').querySelector('svg')).not.toBeNull();
+ expect(popup).not.toHaveBeenCalled();
+ });
+
+ it('keeps the rest under More actions, in the order asked for', () => {
+ renderMenu();
+ fireEvent.click(screen.getByTestId('ctx-more'));
+ expect(labels(screen.getByRole('menu', { name: 'more_actions' }))).toEqual([
+ 'forward_as_attachment', 'copy_message', 'copy_conversation', 'rules.title', 'pin', 'export_email', 'print', 'view_source',
+ ]);
+ });
+});
+
+describe("a selection's right-click menu", () => {
+ const selection = { isMultiSelect: true, selectedCount: 2, batchEmails: [email, other] };
+
+ it('has the same structure, without what needs one message', () => {
+ renderMenu(selection);
+ const top = labels(screen.getAllByRole('menu')[0]);
+ expect(top).toEqual(['archive', 'delete', 'move_to', 'mark_read', 'mark_unread', 'star', 'tag', 'mark_as_spam', 'more_actions']);
+ for (const single of ['reply', 'reply_all', 'forward', 'open_in_window']) expect(top).not.toContain(single);
+ fireEvent.click(screen.getByTestId('ctx-more'));
+ expect(labels(screen.getByRole('menu', { name: 'more_actions' }))).toEqual(['forward_as_attachments', 'rules.title']);
+ });
+
+ it('stars the whole selection', () => {
+ const onBatchSetStarred = vi.fn();
+ renderMenu({ ...selection, onBatchSetStarred });
+ fireEvent.click(screen.getByTestId('ctx-star'));
+ expect(onBatchSetStarred).toHaveBeenCalledWith(true);
+ });
+
+ it('only More actions, for the selection view\'s button', () => {
+ renderMenu({ ...selection, section: 'more' });
+ expect(labels(screen.getAllByRole('menu')[0])).toEqual(['forward_as_attachments', 'rules.title']);
+ });
+});
diff --git a/components/email/__tests__/selection-view-focus.test.tsx b/components/email/__tests__/selection-view-focus.test.tsx
new file mode 100644
index 000000000..944dfa80b
--- /dev/null
+++ b/components/email/__tests__/selection-view-focus.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Star, StarOff, Archive } from '@/components/icons';
+import { SelectionView } from '../selection-view';
+import type { MessageActionEntry } from '../message-actions';
+
+// After an action the focus stays where it was in the selection view: Star turning into
+// Unstar is the same button.
+
+const entries = (starred: boolean): MessageActionEntry[] => [
+ { kind: 'item', key: 'archive', icon: Archive, label: 'archive', run: vi.fn(), testId: 'ctx-archive' },
+ starred
+ ? { kind: 'item', key: 'star', icon: StarOff, label: 'unstar', run: vi.fn(), testId: 'ctx-unstar' }
+ : { kind: 'item', key: 'star', icon: Star, label: 'star', run: vi.fn(), testId: 'ctx-star' },
+];
+
+const props = {
+ title: '2 selected',
+ unread: 0,
+ shortcutOf: () => undefined,
+ onMove: vi.fn(),
+ onMore: vi.fn(),
+ onClear: vi.fn(),
+ tags: { selectedIds: [], partialIds: [], scope: null, onToggle: vi.fn() },
+};
+
+describe('the selection view after an action', () => {
+ it('keeps the focus on Star when it becomes Unstar', () => {
+ const { rerender } = render((null);
- const close = useCallback(() => setPos(null), []);
- const isOpen = pos !== null && active;
- // The picker sits at the end of : the focus moves into it on open,
- // the arrow keys walk the tags, and the focus goes back to the button on
- // close (Escape, Tab, a pick that closes it).
- const { menuRef: pickerRef, onKeyDown: onMenuKeyDown } = useMenuNavigation({
- open: isOpen,
- onClose: close,
- triggerRef: buttonRef,
- });
- const onPickerKeyDown = (event: ReactKeyboardEvent) => {
- // Home and End belong to the text fields (filter, new tag).
- if ((event.key === "Home" || event.key === "End") && event.target instanceof HTMLInputElement) return;
- onMenuKeyDown(event);
- };
-
- useEffect(() => {
- if (!pos) return;
- const onPointerDown = (event: PointerEvent) => {
- const target = event.target as Node;
- // The anchor is left to its own click handler, which toggles the picker
- // shut - closing here first would let that click reopen it.
- if (buttonRef.current?.contains(target)) return;
- if (!pickerRef.current?.contains(target)) close();
- };
- const onKeyDown = (event: KeyboardEvent) => {
- if (event.key === "Escape") close();
- };
- document.addEventListener("pointerdown", onPointerDown, true);
- document.addEventListener("keydown", onKeyDown);
- window.addEventListener("resize", close);
- return () => {
- document.removeEventListener("pointerdown", onPointerDown, true);
- document.removeEventListener("keydown", onKeyDown);
- window.removeEventListener("resize", close);
- };
- }, [pos, close, pickerRef]);
+ const menu = useContextMenu();
+ const isOpen = menu.contextMenu.isOpen && active;
return (
<>
{
- const rect = event.currentTarget.getBoundingClientRect();
- setPos((open) =>
- open
- ? null
- : {
- top: rect.bottom + 4,
- left: Math.max(8, Math.min(rect.left, window.innerWidth - TAG_PICKER_WIDTH - 8)),
- },
- );
- }}
+ onClick={(event) => (isOpen ? menu.closeContextMenu() : menu.openContextMenuFrom(event.currentTarget, null, "start"))}
aria-haspopup="menu"
aria-expanded={isOpen}
disabled={disabled}
@@ -109,21 +55,11 @@ export function BatchTagButton({
- {isOpen &&
- createPortal(
-
+
);
}
diff --git a/components/email/composer-toolbar-menu.tsx b/components/email/composer-toolbar-menu.tsx
index 07abf0e97..ad601258d 100644
--- a/components/email/composer-toolbar-menu.tsx
+++ b/components/email/composer-toolbar-menu.tsx
@@ -1,5 +1,6 @@
"use client";
+import { formatShortcutCombo } from "@/lib/shortcut-keys";
import { Button } from "@/components/ui/button";
import { ContextMenu, CONTEXT_MENU_ITEM_CLASS } from "@/components/ui/context-menu";
import { useContextMenu } from "@/hooks/use-context-menu";
@@ -112,17 +113,11 @@ export function ComposerToolbarMenuCheckItem({ checked, onToggle, description, t
data-testid={testId}
className={cn(CONTEXT_MENU_ITEM_CLASS, "items-start")}
>
-
- {pendingPreview.title}
-
-
- {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+
);
diff --git a/components/calendar/empty-space-context-menu.tsx b/components/calendar/empty-space-context-menu.tsx
index ab2b79124..680c66356 100644
--- a/components/calendar/empty-space-context-menu.tsx
+++ b/components/calendar/empty-space-context-menu.tsx
@@ -7,6 +7,7 @@ import {
ContextMenuSeparator,
} from "@/components/ui/context-menu";
import { Plus, CalendarDays, CheckSquare, Clock } from "@/components/icons";
+import { useSettingsStore } from "@/stores/settings-store";
interface Position {
x: number;
@@ -37,6 +38,8 @@ export function EmptySpaceContextMenu({
showAllDayOption = true,
}: EmptySpaceContextMenuProps) {
const t = useTranslations("calendar");
+ // The calendar's own keys (N, T), as the shortcut help lists them; gone with single keys off.
+ const singleKeys = useSettingsStore((state) => state.singleKeyShortcuts !== false);
const handle = (fn: () => void) => () => {
fn();
@@ -45,7 +48,7 @@ export function EmptySpaceContextMenu({
return (
+
+ {pendingPreview.title}
+
+
+ {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(endMin, timeFormat)}
+
rules.title
,
+}));
+
+import { EmailContextMenu } from '../email-context-menu';
+
+// The message's right-click menu is short everywhere: the browser and the desktop app
+// show the same HTML menu (the desktop app had a native copy, without icons and with
+// Chromium's key names), and the rarely used entries are under More actions. A
+// selection gets the same structure without what needs one message.
+
+const email = {
+ id: 'e1', blobId: 'b1', threadId: 't1', mailboxIds: { inbox: true }, keywords: { $seen: true },
+ from: [{ name: 'Alice', email: 'alice@example.com' }], subject: 'Hello', receivedAt: '2026-01-01T00:00:00Z',
+ hasAttachment: false, size: 100,
+} as unknown as Email;
+const other = { ...email, id: 'e2', keywords: {} } as unknown as Email;
+
+const mailboxes = [
+ { id: 'inbox', name: 'Inbox', role: 'inbox', parentId: null, myRights: { mayAddItems: true } },
+ { id: 'work', name: 'Work', role: null, parentId: null, myRights: { mayAddItems: true } },
+] as unknown as Mailbox[];
+
+type MenuProps = React.ComponentProps
-
,
- document.body,
- )}
+
+
+
@@ -476,73 +359,33 @@ export function EmailContextMenu({
))
: null;
- const copyItem = (
- <>
- {/* Copy to another connected account, keeping the originals */}
- {onCopyToAccount && copyTrees.length > 0 && (
-
- onBatchToggleTag?.(tagId)}
- scope={batchTagScope}
- />
-
-
- onSetTag?.(tagId)} scope={tagScope} />
+ {batch ? (
+ onBatchToggleTag?.(tagId)}
+ scope={batchTagScope}
+ />
+ ) : (
+ onSetTag?.(tagId)} scope={tagScope} />
+ )}
e.stopPropagation()}
- onContextMenu={(e) => e.stopPropagation()}
- >
- onSetTag(tagId)}
- />
-
,
- document.body,
- )
- : null;
+ const tagPicker = onSetTag ? (
+ e.stopPropagation()}
+ onContextMenu={(e) => e.stopPropagation()}
+ >
+ onSetTag(tagId)} />
+
+
-
- {selectionTitle}
-
- {selectionButtons('pane')}
- {
- const anchor = selectedEmailsForRemoval[0];
- if (anchor) openContextMenuFrom(e.currentTarget, anchor, 'end');
- }}
- >
-
-
-
-
+ {files && files.length > 0 && (
+ <>
+
+ );
+}
diff --git a/components/email/selection-view.tsx b/components/email/selection-view.tsx
new file mode 100644
index 000000000..afa0c9f22
--- /dev/null
+++ b/components/email/selection-view.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { cloneElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { ChevronDown, MoreHorizontal, CheckSquare } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { ContextMenu, MenuShortcut } from "@/components/ui/context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
+import { cn } from "@/lib/utils";
+import { TagPicker } from "./tag-picker";
+import type { MessageActionEntry, MessageActionKey } from "./message-actions";
+import type { TagScope } from "@/hooks/use-account-tags";
+
+/** The narrowest a button gets, whatever its words (CSS px). */
+const MIN_BUTTON_WIDTH = 120;
+const GAP = 8;
+
+/**
+ * How many buttons go on each line: as few lines as the width allows, and the lines as
+ * even as they can be, so no button is left alone at the end of a ragged wrap. With room
+ * for two a line and an odd count, the last one (More actions) gets a line of its own
+ * across the full width; with room for one, it's a column.
+ */
+export function selectionRows(count: number, perLine: number): number[] {
+ if (count <= 0) return [];
+ const most = Math.max(1, Math.min(perLine, count));
+ if (most === 1) return Array.from({ length: count }, () => 1);
+ const lines = Math.ceil(count / most);
+ const base = Math.floor(count / lines);
+ if (lines > 1 && base < 2) return [...Array.from({ length: Math.floor(count / 2) }, () => 2), 1];
+ const longer = count % lines;
+ return Array.from({ length: lines }, (_, i) => base + (i < longer ? 1 : 0));
+}
+
+/** "pane-batch-archive": the ids the selection bar's buttons had, for the pane's copies. */
+function paneTestId(entry: { key: string; testId?: string }): string {
+ const id = (entry.testId ?? entry.key).replace(/^ctx-/, "").replace(/^move-to$/, "move");
+ return `pane-batch-${id}`;
+}
+
+export interface SelectionViewProps {
+ /** "4 conversations selected". */
+ title: string;
+ /** How many of them are unread; a line under the title when there are some. */
+ unread: number;
+ /** The selection menu's top level (useSelectionActionList), in its order. */
+ entries: MessageActionEntry[];
+ /** The key hint for an entry, as the menu shows it. */
+ shortcutOf: (entry: Extract
+ {t("heading")}
+
+ {files.map((file) => {
+ const Fallback = attachmentIcon(null, file.name).icon;
+ return (
+
+ );
+ })}
+
+
+ )}
+ {title}
+ {unread > 0 &&{tCount("unread_count", { count: unread })}
} +
+ {rows.map((row, i) => (
+
+
+
+ {row}
+
+ ))}
+
+
+ 1 && (
+
- {t('select_calendar')}
{calendars.map((cal) => (
-
+ />
))}
-
,
- document.body,
+
)}
)}
diff --git a/components/files-sync/__tests__/files-sync-files-screen.test.tsx b/components/files-sync/__tests__/files-sync-files-screen.test.tsx
new file mode 100644
index 000000000..b4fa1fe2d
--- /dev/null
+++ b/components/files-sync/__tests__/files-sync-files-screen.test.tsx
@@ -0,0 +1,202 @@
+import { act, cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { FileBrowser } from '@/components/files/file-browser';
+import { FileDetailsPanel } from '@/components/files/file-details-panel';
+import { useFileStore, type FileResource } from '@/stores/file-store';
+import { useFilesSyncStore } from '@/stores/files-sync-store';
+import type { BulwarkDesktopBridge } from '@/lib/desktop/types';
+import type { FilesSyncController, FilesSyncItemStatus } from '@/lib/files-sync/types';
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
+
+// Files on this computer on the Files screen: "Show in Explorer" (Finder, file
+// manager) for what a root covers, and the sync status on rows and in the
+// details panel. The next-intl mock returns keys.
+
+vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } }));
+vi.mock('@/components/settings/share-collection-dialog', () => ({ ShareCollectionDialog: () => null }));
+
+const NOTES = {
+ id: 'f-notes', name: 'notes.txt', serverName: 'notes.txt', isDirectory: false, contentType: 'text/plain',
+ contentLength: 10, lastModified: '2026-10-01T00:00:00Z', blobId: 'b-notes', parentId: null,
+} as FileResource;
+const PLANS = {
+ id: 'd-plans', name: 'Plans', serverName: 'Plans', isDirectory: true, contentType: '',
+ contentLength: 0, lastModified: '2026-10-01T00:00:00Z', blobId: null, parentId: null,
+} as unknown as FileResource;
+
+function controller(covered: string[]) {
+ return {
+ coverage: vi.fn((id: string) => (covered.includes(id) ? { rootId: 'r1', kind: 'folder' as const, path: id } : null)),
+ showInFolder: vi.fn(async () => true),
+ } as unknown as FilesSyncController & { coverage: ReturnType{t('select_calendar')}
+
+ {t("item.label")}
+
+
+ {t(`item.${status}`)}
+
+
+ );
+}
diff --git a/components/files-sync/files-sync-prompts.tsx b/components/files-sync/files-sync-prompts.tsx
new file mode 100644
index 000000000..fdf938506
--- /dev/null
+++ b/components/files-sync/files-sync-prompts.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { useTranslations } from "next-intl";
+import { AlertTriangle } from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { useFilesSyncStore } from "@/stores/files-sync-store";
+import type { FilesRoot } from "@/lib/desktop/types";
+import type { FilesSyncRootStatus } from "@/lib/files-sync/types";
+import { rootName } from "./files-sync-text";
+
+/*
+ * The mass-delete question (FILES-SYNC-BRIEF: more than 50 items or more than half a
+ * pair at once pauses the pair and asks). The settings page asks it in the folder's
+ * row; everywhere else FilesSyncPrompts asks it in a dialog, so the user sees it
+ * wherever they are.
+ */
+
+let inlineHosts = 0;
+const inlineListeners = new Set<() => void>();
+const subscribeInline = (listener: () => void) => {
+ inlineListeners.add(listener);
+ return () => { inlineListeners.delete(listener); };
+};
+const inlineShown = () => inlineHosts > 0;
+
+/** The settings page asks in its rows while it's open: the dialog stays away meanwhile. */
+export function useInlineMassDeleteQuestions(): void {
+ useEffect(() => {
+ inlineHosts += 1;
+ inlineListeners.forEach((listener) => listener());
+ return () => {
+ inlineHosts -= 1;
+ inlineListeners.forEach((listener) => listener());
+ };
+ }, []);
+}
+
+/** The question's text, for a root in `confirm-delete`. */
+export function useMassDeleteText(root: FilesRoot, massDelete: NonNullable
+
+ );
+}
+
+function PromptDialog({ root, status, onLater }: { root: FilesRoot; status: FilesSyncRootStatus; onLater: () => void }) {
+ const t = useTranslations("files_sync");
+ const massDelete = status.massDelete!;
+ const text = useMassDeleteText(root, massDelete);
+ return (
+ + + {text} +
+
+
+ + + {text} +
+ ); +} diff --git a/components/files-sync/files-sync-text.ts b/components/files-sync/files-sync-text.ts new file mode 100644 index 000000000..50c395ba0 --- /dev/null +++ b/components/files-sync/files-sync-text.ts @@ -0,0 +1,46 @@ +import type { FilesRoot } from "@/lib/desktop/types"; +import type { FilesSyncActivityKind, FilesSyncItemStatus } from "@/lib/files-sync/types"; + +/** The engine's message keys, under `files_sync.errors.`. */ +export const FILES_SYNC_ERROR_KEYS = [ + "offline", "server_refused", "too_large", "name_invalid", "disk_full", "denied", "busy", "quota", "not_found", "policy", "failed", +] as const; + +/** + * The key inside the `files_sync` namespace for an engine message key. The engine may + * write `offline`, `errors.offline` or `files_sync.errors.offline`; anything unknown + * reads as `failed`, so a new key never shows raw. + */ +export function filesSyncErrorKey(key: string | undefined | null): string { + const last = (key ?? "").split(".").pop() ?? ""; + return `errors.${(FILES_SYNC_ERROR_KEYS as readonly string[]).includes(last) ? last : "failed"}`; +} + +export const FILES_SYNC_ACTIVITY_KINDS: readonly FilesSyncActivityKind[] = [ + "uploaded", "downloaded", "folder-created", "renamed", "moved", "deleted", "trashed", + "conflict", "renamed-for-disk", "too-large", "waiting", "mass-delete", "error", +]; + +export const FILES_SYNC_ITEM_STATES: readonly FilesSyncItemStatus[] = ["synced", "syncing", "pending", "error", "online-only"]; + +/** "Show in Explorer", "Show in Finder", "Show in file manager". */ +export function showInKey(platform: string | undefined | null): string { + if (platform === "win32") return "show_in.explorer"; + if (platform === "darwin") return "show_in.finder"; + return "show_in.file_manager"; +} + +/** The name of a root to show: the drive's, or the last part of the folder's path. */ +export function rootName(root: FilesRoot, driveName: string): string { + if (root.kind === "drive") return driveName; + const parts = root.path.split(/[\\/]+/).filter(Boolean); + return parts[parts.length - 1] ?? root.path; +} + +/** A time as "14:05" today and "3 Nov, 14:05" before. */ +export function syncTimeOptions(at: number, now = Date.now()): { hour: "numeric"; minute: "2-digit"; day?: "numeric"; month?: "short" } { + const sameDay = new Date(at).toDateString() === new Date(now).toDateString(); + return sameDay + ? { hour: "numeric", minute: "2-digit" } + : { day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }; +} diff --git a/components/files/file-browser.tsx b/components/files/file-browser.tsx index bd1c0d351..24e13cb88 100644 --- a/components/files/file-browser.tsx +++ b/components/files/file-browser.tsx @@ -39,6 +39,7 @@ import { getFilePreviewKind } from "@/lib/file-preview"; import type { FileAppAction } from "@/lib/files-app-actions"; import { useAppSidePanel } from "@/components/plugins/app-side-panel"; import { MAX_SIDE_PANEL_FILES } from "@/lib/plugin-sandbox/assistant/f.types"; +import { ShowInFolderMenuItem } from "@/components/files-sync/files-sync-item"; import { resourceToView, useFileStore, isSharedFilesPage, sharedFilePages, type FileResource } from "@/stores/file-store"; import { TRASH_LOCATION, TRASH_PATH, isTrashLocation } from "@/lib/files-trash"; import { PluginActions, usePluginActions } from "@/components/plugins/plugin-actions"; @@ -1057,6 +1058,7 @@ export function FileBrowser({
@@ -487,6 +489,7 @@ function FileTile({ resource, isSelected, isFocused, isTabStop, isCut, selecting
{!resource.isSymlink && <>
-
- {accounts.length > 1 && (
-
- )}
-
,
- document.body
- )}
+
+
{appItems && (
<>
{appItems}
@@ -101,8 +82,7 @@ export function PhoneHeaderMenu({ menuItems }: PhoneHeaderMenuProps) {
onClick={() => { close(); openCommandPalette(); }}
/>
- )}
+
{showNotifications &&
+ (null);
+ const accounts = useAccountStore((s) => s.accounts);
+ const activeAccountId = useAuthStore((s) => s.activeAccountId);
+ const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+ const revision = useAuthStore((s) => s.connectedAccountsRevision);
+ const client = useAuthStore((s) => s.client);
+
+ useEffect(() => {
+ const bridge = getDesktopBridge();
+ const controls = bridge?.files ? claimFilesControls() : null;
+ if (!bridge || !controls) return;
+ const store = useFilesSyncStore.getState();
+ const host = new Host({
+ controls,
+ platform: bridge.platform,
+ publish: (patch) => useFilesSyncStore.getState().publish(patch),
+ setController: (controller) => useFilesSyncStore.getState().setController(controller),
+ folderSyncForcedOff,
+ downloadsForbidden,
+ });
+ hostRef.current = host;
+ setRunningFilesSyncHost(host);
+ host.start();
+ const stopPush = subscribePushStateChanges((change, changedClient) => {
+ for (const [account, entry] of useAuthStore.getState().getAllConnectedClients()) {
+ if (entry !== changedClient) continue;
+ if (Object.values(change.changed).some((types) => !!types && "FileNode" in types)) host.remoteChanged(account);
+ }
+ });
+ const stopPolicy = onDesktopPolicyChange(() => host.policyChanged());
+ const online = () => host.online();
+ window.addEventListener("online", online);
+ return () => {
+ stopPush();
+ stopPolicy();
+ window.removeEventListener("online", online);
+ setRunningFilesSyncHost(null);
+ host.stop();
+ hostRef.current = null;
+ store.reset();
+ };
+ }, []);
+
+ useEffect(() => {
+ const host = hostRef.current;
+ if (!host) return;
+ const clients = isAuthenticated ? useAuthStore.getState().getAllConnectedClients() : new Map();
+ const list: HostAccount[] = [];
+ for (const [id, entry] of clients) {
+ const account = accounts.find((a) => a.id === id);
+ if (account && !account.isConnected) continue;
+ list.push({ id, label: account?.email || account?.username || account?.label || id, client: entry });
+ }
+ host.setAccounts(list, isAuthenticated ? activeAccountId : null);
+ }, [accounts, activeAccountId, isAuthenticated, revision, client]);
+
+ return null;
+}
diff --git a/components/settings/__tests__/desktop-files-settings.test.tsx b/components/settings/__tests__/desktop-files-settings.test.tsx
new file mode 100644
index 000000000..4ef21b3e3
--- /dev/null
+++ b/components/settings/__tests__/desktop-files-settings.test.tsx
@@ -0,0 +1,314 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { NextIntlClientProvider } from 'next-intl';
+import en from '@/locales/en/common.json';
+import type { FilesDriveState, FilesRoot } from '@/lib/desktop/types';
+import type { FilesSyncActivity, FilesSyncController, FilesSyncRootStatus } from '@/lib/files-sync/types';
+
+// Files on this computer, the settings page: the drive, synced folders, the
+// activity list and the mass-delete question, against the store and a fake
+// controller (the engine is built elsewhere).
+
+vi.unmock('next-intl');
+vi.mock('@/lib/debug', () => ({ debug: { log: () => {}, warn: () => {}, error: () => {} } }));
+
+const { useFilesSyncStore } = await import('@/stores/files-sync-store');
+const { useAuthStore } = await import('@/stores/auth-store');
+const { DesktopFilesSettings } = await import('../desktop-files-settings');
+
+type Fake = { [K in keyof FilesSyncController]: ReturnType };
+
+function fakeController(): Fake {
+ return {
+ addFolder: vi.fn(async () => ({ ok: true as const, value: folderRoot() })),
+ removeRoot: vi.fn(async () => {}),
+ setPaused: vi.fn(async () => {}),
+ confirmMassDelete: vi.fn(async () => {}),
+ setDriveEnabled: vi.fn(async () => ({ ok: true as const, value: null })),
+ setDriveLetter: vi.fn(async () => ({ ok: true as const, value: { letter: 'Z', chosen: 'Z', locked: false, available: [] } })),
+ coverage: vi.fn(() => null),
+ showInFolder: vi.fn(async () => true),
+ clearActivity: vi.fn(),
+ } as never;
+}
+
+function folderRoot(patch: Partial = {}): FilesRoot {
+ return {
+ id: 'r1', kind: 'folder', account: 'acc', path: 'C:\\Users\\ann\\Documents\\Projects', remoteId: 'n-proj',
+ remoteLabel: 'Projects', paused: false, createdAt: 1, ...patch,
+ };
+}
+
+function drive(patch: Partial = {}): FilesDriveState {
+ return {
+ supported: true, forcedOff: false, wanted: [],
+ letter: { letter: null, chosen: null, locked: false, available: ['X', 'Z'] },
+ ...patch,
+ };
+}
+
+let controller: ReturnType;
+
+function setup(patch: Record = {}) {
+ controller = fakeController();
+ useFilesSyncStore.setState({ available: true, account: 'acc', controller: controller as unknown as FilesSyncController, ...patch });
+}
+
+function renderPage() {
+ return render(
+
+ ,
+ );
+}
+
+beforeEach(() => {
+ useFilesSyncStore.getState().reset();
+});
+afterEach(() => {
+ useFilesSyncStore.getState().reset();
+});
+
+describe('Files on this computer settings page', () => {
+ it('draws nothing outside the desktop app or on an older shell', () => {
+ useFilesSyncStore.setState({ available: false, roots: [folderRoot()], drive: drive() });
+ const { container } = renderPage();
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it('has no drive section off Windows', () => {
+ setup({ drive: null });
+ renderPage();
+ expect(screen.queryByRole('switch', { name: 'Show Files as a drive' })).toBeNull();
+ expect(screen.getByRole('heading', { name: 'Synced folders' })).toBeInTheDocument();
+ });
+
+ it('turns the drive on for the account from the click itself', () => {
+ setup({ drive: drive() });
+ renderPage();
+ const toggle = screen.getByRole('switch', { name: 'Show Files as a drive' });
+ expect(toggle).toHaveAttribute('aria-checked', 'false');
+ // No drive, no letter.
+ expect(screen.queryByText('Drive letter')).toBeNull();
+ fireEvent.click(toggle);
+ // Synchronously: the shell needs the click it came from.
+ expect(controller.setDriveEnabled).toHaveBeenCalledWith(true);
+ });
+
+ it('shows the drive on, and turns it off', () => {
+ setup({ drive: drive({ wanted: ['acc'] }) });
+ renderPage();
+ const toggle = screen.getByRole('switch', { name: 'Show Files as a drive' });
+ expect(toggle).toHaveAttribute('aria-checked', 'true');
+ fireEvent.click(toggle);
+ expect(controller.setDriveEnabled).toHaveBeenCalledWith(false);
+ });
+
+ it('says the organisation turned the drive off and keeps the switch off', () => {
+ setup({ drive: drive({ forcedOff: true, wanted: ['acc'] }) });
+ renderPage();
+ const toggle = screen.getByRole('switch', { name: 'Show Files as a drive' });
+ expect(toggle).toHaveAttribute('aria-checked', 'false');
+ expect(toggle).toBeDisabled();
+ expect(screen.getByText(en.settings.org_locked)).toBeInTheDocument();
+ });
+
+ it('offers no letter by default and the free letters, and sets the chosen one', () => {
+ setup({ drive: drive({ wanted: ['acc'] }) });
+ renderPage();
+ const select = screen.getByRole('combobox', { name: 'Drive letter' }) as HTMLSelectElement;
+ expect(select.value).toBe('none');
+ expect([...select.options].map((o) => o.textContent)).toEqual(['No letter', 'X:', 'Z:']);
+ fireEvent.change(select, { target: { value: 'Z' } });
+ expect(controller.setDriveLetter).toHaveBeenCalledWith('Z');
+ fireEvent.change(select, { target: { value: 'none' } });
+ expect(controller.setDriveLetter).toHaveBeenLastCalledWith(null);
+ });
+
+ it('shows a letter forced by policy, locked', () => {
+ setup({ drive: drive({ wanted: ['acc'], letter: { letter: 'Q', chosen: 'X', locked: true, available: ['X'] } }) });
+ renderPage();
+ const select = screen.getByRole('combobox', { name: 'Drive letter' }) as HTMLSelectElement;
+ expect(select.value).toBe('Q');
+ expect(select).toBeDisabled();
+ const row = select.closest('[data-search-label]') as HTMLElement;
+ expect(within(row).getByText(en.settings.org_locked)).toBeInTheDocument();
+ });
+
+ it('lists a synced folder with its Files folder and pauses and resumes it', () => {
+ setup({ roots: [folderRoot()], status: { r1: { rootId: 'r1', state: 'idle', pending: 0, done: 0, lastSyncedAt: null } } });
+ const { rerender } = renderPage();
+ expect(screen.getByText('C:\\Users\\ann\\Documents\\Projects')).toBeInTheDocument();
+ expect(screen.getByText('With Projects in Files')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Pause' }));
+ expect(controller.setPaused).toHaveBeenCalledWith('r1', true);
+
+ act(() => useFilesSyncStore.setState({ roots: [folderRoot({ paused: true })], status: { r1: { rootId: 'r1', state: 'paused', pending: 0, done: 0, lastSyncedAt: null } } }));
+ rerender(
+
+ ,
+ );
+ fireEvent.click(screen.getByRole('button', { name: 'Resume' }));
+ expect(controller.setPaused).toHaveBeenLastCalledWith('r1', false);
+ });
+
+ it('asks before removing a folder, saying its files stay', () => {
+ setup({ roots: [folderRoot()] });
+ renderPage();
+ fireEvent.click(screen.getByRole('button', { name: 'Remove…' }));
+ const dialog = screen.getByRole('alertdialog');
+ expect(dialog).toHaveTextContent('The files on this computer stay where they are');
+ expect(controller.removeRoot).not.toHaveBeenCalled();
+ fireEvent.click(within(dialog).getByRole('button', { name: 'Stop syncing' }));
+ expect(controller.removeRoot).toHaveBeenCalledWith('r1');
+ });
+
+ it('says how each folder is doing', () => {
+ const at = Date.UTC(2026, 10, 4, 14, 5);
+ vi.useFakeTimers({ now: at + 60_000, toFake: ['Date'] });
+ const states: [string, Partial][] = [
+ ['idle', { lastSyncedAt: at }],
+ ['syncing', { done: 3, pending: 7 }],
+ ['paused', {}],
+ ['offline', { pending: 2 }],
+ ['error', { errorKey: 'files_sync.errors.quota' }],
+ ['blocked', {}],
+ ['starting', {}],
+ ];
+ const roots = states.map(([state]) => folderRoot({ id: state, path: `/home/ann/${state}` }));
+ const status = Object.fromEntries(states.map(([state, extra]) => [state, { rootId: state, state, pending: 0, done: 0, lastSyncedAt: null, ...extra }]));
+ setup({ roots, status });
+ renderPage();
+ const line = (id: string) => document.querySelector(`[data-files-sync-root="${id}"] [data-files-sync-state]`)!.textContent;
+ expect(line('idle')).toMatch(/^Up to date\. Last synced .*2:05/);
+ expect(line('syncing')).toBe('Syncing: 3 done, 7 to go');
+ expect(line('paused')).toBe('Paused');
+ expect(line('offline')).toBe('Offline. 2 changes wait for the server');
+ expect(line('error')).toBe('Stopped: Your storage in Files is full');
+ expect(line('blocked')).toBe('Turned off by your organisation');
+ expect(line('starting')).toBe('Starting…');
+ // A blocked folder can't be resumed, only removed.
+ expect(within(document.querySelector('[data-files-sync-root="blocked"]') as HTMLElement).queryByRole('button', { name: 'Resume' })).toBeNull();
+ vi.useRealTimers();
+ });
+
+ it('shows an unknown error key as a plain failure, never the key', () => {
+ setup({ roots: [folderRoot()], status: { r1: { rootId: 'r1', state: 'error', pending: 0, done: 0, lastSyncedAt: null, errorKey: 'something_new' } } });
+ renderPage();
+ expect(screen.getByText('Stopped: Something went wrong')).toBeInTheDocument();
+ });
+
+ it('adds a folder: picks the Files folder, then calls the controller from that click', async () => {
+ const listAllFileNodes = vi.fn(async () => [
+ { id: 'n-proj', name: 'Projects', parentId: null, blobId: null },
+ { id: 'n-2026', name: '2026', parentId: 'n-proj', blobId: null },
+ { id: 'n-file', name: 'a.txt', parentId: 'n-proj', blobId: 'b1' },
+ ]);
+ useAuthStore.setState({ client: { listAllFileNodes } as never });
+ setup({ roots: [] });
+ renderPage();
+ expect(screen.getByText('No folders are synced yet.')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Add folder…' }));
+ const dialog = await screen.findByRole('dialog', { name: 'Which folder in Files?' });
+ // Only folders are offered.
+ expect(within(dialog).queryByText('a.txt')).toBeNull();
+ fireEvent.click(within(dialog).getByRole('button', { name: 'Expand Projects' }));
+ await waitFor(() => expect(within(dialog).getByText('2026')).toBeInTheDocument());
+ fireEvent.click(within(dialog).getByText('2026'));
+ expect(controller.addFolder).not.toHaveBeenCalled();
+ fireEvent.click(within(dialog).getByRole('button', { name: 'Choose folder on this computer…' }));
+ // In the same task as the click: nothing slow is awaited first.
+ expect(controller.addFolder).toHaveBeenCalledWith('n-2026', 'Projects / 2026');
+ useAuthStore.setState({ client: null });
+ });
+
+ it('says why a folder could not be added, and nothing when the picker was closed', async () => {
+ useAuthStore.setState({ client: { listAllFileNodes: vi.fn(async () => [{ id: 'n-proj', name: 'Projects', parentId: null, blobId: null }]) } as never });
+ setup({ roots: [] });
+ controller.addFolder.mockResolvedValueOnce({ ok: false, error: 'overlap' });
+ renderPage();
+ fireEvent.click(screen.getByRole('button', { name: 'Add folder…' }));
+ let dialog = await screen.findByRole('dialog');
+ fireEvent.click(within(dialog).getByText('Projects'));
+ fireEvent.click(within(dialog).getByRole('button', { name: 'Choose folder on this computer…' }));
+ expect(await screen.findByRole('alert')).toHaveTextContent(en.files_sync.folders.add_failed.overlap);
+
+ controller.addFolder.mockResolvedValueOnce({ ok: false, error: 'cancelled' });
+ fireEvent.click(screen.getByRole('button', { name: 'Add folder…' }));
+ dialog = await screen.findByRole('dialog');
+ fireEvent.click(within(dialog).getByText('Projects'));
+ fireEvent.click(within(dialog).getByRole('button', { name: 'Choose folder on this computer…' }));
+ await waitFor(() => expect(controller.addFolder).toHaveBeenCalledTimes(2));
+ await waitFor(() => expect(screen.queryByRole('alert')).toBeNull());
+ useAuthStore.setState({ client: null });
+ });
+
+ it('hides adding folders when the organisation turned folder sync off', () => {
+ setup({ folderSyncForcedOff: true, roots: [folderRoot()], status: { r1: { rootId: 'r1', state: 'blocked', pending: 0, done: 0, lastSyncedAt: null } } });
+ renderPage();
+ expect(screen.queryByRole('button', { name: 'Add folder…' })).toBeNull();
+ expect(screen.getByTestId('files-sync-folders-locked')).toHaveTextContent(en.settings.org_locked);
+ // The folder can still be removed; its files stay.
+ expect(screen.getByRole('button', { name: 'Remove…' })).toBeInTheDocument();
+ });
+
+ it('lists recent activity newest first, marks conflicts and errors, and clears it', () => {
+ const activity: FilesSyncActivity[] = [
+ { id: 'a1', at: 1000, rootId: 'r1', kind: 'uploaded', direction: 'up', path: 'notes.txt' },
+ { id: 'a3', at: 3000, rootId: 'r1', kind: 'error', direction: 'up', path: 'big.iso', messageKey: 'files_sync.errors.quota' },
+ { id: 'a2', at: 2000, rootId: 'r1', kind: 'conflict', direction: null, path: 'plan.docx', detail: 'plan (conflict, PC, 2026-11-04).docx' },
+ { id: 'a4', at: 500, rootId: 'r1', kind: 'too-large', direction: null, path: 'video.mp4', detail: '1048576' },
+ ];
+ setup({ roots: [folderRoot()], activity });
+ renderPage();
+ const rows = within(screen.getByTestId('files-sync-activity')).getAllByRole('listitem');
+ expect(rows.map((r) => r.getAttribute('data-activity-kind'))).toEqual(['error', 'conflict', 'uploaded', 'too-large']);
+ expect(rows[0]).toHaveTextContent('big.iso couldn\'t be synced: Your storage in Files is full');
+ expect(within(rows[0]).getByRole('img', { name: 'Error' })).toBeInTheDocument();
+ expect(rows[1]).toHaveTextContent('plan.docx was changed in both places. The other version is kept as plan (conflict, PC, 2026-11-04).docx');
+ expect(within(rows[1]).getByRole('img', { name: 'Conflict' })).toBeInTheDocument();
+ expect(rows[2]).toHaveTextContent('Projects');
+ expect(rows[2]).toHaveTextContent('Uploaded notes.txt');
+ expect(within(rows[2]).getByRole('img', { name: 'To Files' })).toBeInTheDocument();
+ expect(rows[3]).toHaveTextContent('video.mp4 is bigger than Files allows (1 MB)');
+ expect(within(rows[3]).getByRole('img', { name: 'Error' })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
+ expect(controller.clearActivity).toHaveBeenCalled();
+ });
+
+ it('has a line for every kind of activity', () => {
+ const kinds = ['uploaded', 'downloaded', 'folder-created', 'renamed', 'moved', 'deleted', 'trashed', 'conflict', 'renamed-for-disk', 'too-large', 'waiting', 'mass-delete', 'error'] as const;
+ setup({ roots: [folderRoot()], activity: kinds.map((kind, i) => ({ id: kind, at: 10_000 - i, rootId: 'r1', kind, direction: null, path: 'x.txt', detail: 'y.txt' })) });
+ renderPage();
+ const rows = within(screen.getByTestId('files-sync-activity')).getAllByRole('listitem');
+ expect(rows).toHaveLength(kinds.length);
+ for (const row of rows) expect(row.textContent).not.toMatch(/files_sync\.|\{/);
+ });
+
+ it('says when nothing happened yet', () => {
+ setup({ roots: [folderRoot()] });
+ renderPage();
+ expect(screen.getByText('Nothing has happened yet.')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Clear' })).toBeDisabled();
+ });
+
+ it('asks about a mass delete in the folder row, with both answers', () => {
+ setup({
+ roots: [folderRoot(), folderRoot({ id: 'r2', path: '/home/ann/Photos', remoteLabel: 'Photos' })],
+ status: {
+ r1: { rootId: 'r1', state: 'confirm-delete', pending: 0, done: 0, lastSyncedAt: null, massDelete: { count: 120, side: 'local' } },
+ r2: { rootId: 'r2', state: 'confirm-delete', pending: 0, done: 0, lastSyncedAt: null, massDelete: { count: 64, side: 'remote' } },
+ },
+ });
+ renderPage();
+ const first = document.querySelector('[data-files-sync-root="r1"]') as HTMLElement;
+ expect(first).toHaveTextContent('120 items were deleted from Projects on this computer. Delete them in Files too?');
+ const second = document.querySelector('[data-files-sync-root="r2"]') as HTMLElement;
+ expect(second).toHaveTextContent('64 items were deleted from Photos in Files. Delete them on this computer too?');
+ fireEvent.click(within(first).getByRole('button', { name: 'Delete them' }));
+ expect(controller.confirmMassDelete).toHaveBeenCalledWith('r1', true);
+ fireEvent.click(within(second).getByRole('button', { name: 'Bring them back' }));
+ expect(controller.confirmMassDelete).toHaveBeenLastCalledWith('r2', false);
+ });
+});
diff --git a/components/settings/__tests__/settings-boot-skeleton.test.tsx b/components/settings/__tests__/settings-boot-skeleton.test.tsx
index 5417f9871..d974d4cd0 100644
--- a/components/settings/__tests__/settings-boot-skeleton.test.tsx
+++ b/components/settings/__tests__/settings-boot-skeleton.test.tsx
@@ -35,6 +35,7 @@ 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');
+const { useFilesSyncStore } = await import('@/stores/files-sync-store');
/** A client that supports everything it is asked about. */
const fullClient = new Proxy({}, {
@@ -91,11 +92,25 @@ describe('Settings while the session restores', () => {
expect(skeleton()).toBeNull();
const shown = [...document.querySelectorAll('[data-testid^="settings-tab-"]')]
.map((el) => el.getAttribute('data-testid')!.slice('settings-tab-'.length));
- // Recovery waits for a server probe this test doesn't answer.
- const drawn = SETTINGS_NAV_GROUPS.flatMap((g) => g.tabs).filter((tab) => tab !== 'recovery');
+ // Recovery waits for a server probe this test doesn't answer; Files on
+ // this computer for the desktop app's sync engine.
+ const drawn = SETTINGS_NAV_GROUPS.flatMap((g) => g.tabs).filter((tab) => tab !== 'recovery' && tab !== 'files_sync');
expect(shown).toEqual(drawn);
});
+ it('lists Files on this computer after Files only while the desktop sync engine runs', () => {
+ useAuthStore.setState({ isAuthenticated: true, isLoading: false, client: fullClient as never });
+ useFilesSyncStore.setState({ available: true });
+ try {
+ render( unknown> = {
getPrincipals: async () => [], listArchivedEmails: async () => ({ items: [], nextPosition: null }),
};
/** Pages with rows of the desktop app's own, or browser rows it hides. */
-const DESKTOP_PAGES = new Set(['general', 'notifications', 'privacy', 'backup']);
+const DESKTOP_PAGES = new Set(['general', 'notifications', 'privacy', 'backup', 'files_sync']);
/** The desktop app's bridge, answering as Windows does, with every switch off. */
const DESKTOP_BRIDGE = {
@@ -121,7 +123,7 @@ const TAB_PAGES: Record = {
accessibility: ['accessibility'],
message_list: ['message_list'], reading: ['reading'], composing: ['composing'], vacation: ['vacation'],
filters: ['filters'], organize: ['organize'], security: ['security'], sharing: ['sharing'], recovery: ['recovery'], calendar: ['calendar', 'calendar2'],
- contacts: ['contacts', 'contacts2'], files: ['files'], addons: ['addons'], backup: ['backup'],
+ contacts: ['contacts', 'contacts2'], files: ['files'], files_sync: ['files_sync'], addons: ['addons'], backup: ['backup'],
offline: ['offline'], privacy: ['privacy'], about: ['about'],
};
@@ -141,7 +143,15 @@ describe('settings search index', () => {
const realMatchMedia = window.matchMedia;
const variants: Record void> = {
base: () => {},
- desktop: () => { window.bulwarkDesktop = DESKTOP_BRIDGE as never; },
+ desktop: () => {
+ window.bulwarkDesktop = DESKTOP_BRIDGE as never;
+ // Files on this computer: the engine runs, on Windows, with the drive on offer.
+ useFilesSyncStore.setState({
+ available: true,
+ account: 'acc',
+ drive: { supported: true, forcedOff: false, wanted: [], letter: { letter: null, chosen: null, locked: false, available: ['Z'] } },
+ });
+ },
touch: () => {
window.matchMedia = ((q: string) => ({ ...realMatchMedia(q), matches: q.includes('coarse') })) as typeof window.matchMedia;
},
@@ -160,6 +170,7 @@ describe('settings search index', () => {
useAccountStore.setState(accountsInitial, true);
window.matchMedia = realMatchMedia;
window.bulwarkDesktop = undefined;
+ useFilesSyncStore.getState().reset();
apply();
out[variant] = {};
for (const [tab, Page] of Object.entries(pages)) {
diff --git a/components/settings/desktop-files-settings.tsx b/components/settings/desktop-files-settings.tsx
new file mode 100644
index 000000000..fbeb9357a
--- /dev/null
+++ b/components/settings/desktop-files-settings.tsx
@@ -0,0 +1,346 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useFormatter, useTranslations } from "next-intl";
+import {
+ AlertCircle, AlertTriangle, ArrowDown, ArrowUp, FolderSync, HardDrive, HelpCircle, Loader2, Trash2, type AppIcon,
+} from "@/components/icons";
+import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { FolderPickerDialog, type PickerFolder } from "@/components/files/folder-picker-dialog";
+import { FilesSyncStatusLine } from "@/components/files-sync/files-sync-status-line";
+import { MassDeleteQuestion, useInlineMassDeleteQuestions } from "@/components/files-sync/files-sync-prompts";
+import { filesSyncErrorKey, rootName, syncTimeOptions } from "@/components/files-sync/files-sync-text";
+import { fileNodeKind } from "@/lib/jmap/filenode-kind";
+import { findTrashFolder, trashSubtreeIds } from "@/lib/files-trash";
+import { cn, formatFileSize } from "@/lib/utils";
+import type { FilesDriveState, FilesError, FilesRoot } from "@/lib/desktop/types";
+import type { FilesSyncActivity, FilesSyncActivityKind } from "@/lib/files-sync/types";
+import { useAuthStore } from "@/stores/auth-store";
+import { useFilesSyncStore } from "@/stores/files-sync-store";
+import { OrgLockedNote } from "./org-locked-note";
+import { SettingItem, SettingsSection, Select, ToggleSwitch } from "./settings-section";
+
+/**
+ * Settings > Files on this computer, in the desktop app only: the Files drive
+ * (Windows), folders kept the same as a Files folder, and what happened lately.
+ * Everything comes from stores/files-sync-store.ts and goes to the engine's
+ * controller; the page never talks to the bridge.
+ */
+export function DesktopFilesSettings() {
+ const available = useFilesSyncStore((s) => s.available);
+ const drive = useFilesSyncStore((s) => s.drive);
+ // The page asks about a mass delete in the folder's row; the app-wide dialog waits.
+ useInlineMassDeleteQuestions();
+ if (!available) return null;
+ return (
+ (null);
+
+ const on = !drive.forcedOff && !!account && drive.wanted.includes(account);
+ const driveRoot = roots.find((r) => r.kind === "drive" && r.account === account);
+ const { letter } = drive;
+ const letterValue = (letter.locked ? letter.letter : letter.chosen) ?? "none";
+ const letters = [...new Set([...letter.available, letter.chosen, letter.letter].filter((l): l is string => !!l))].sort();
+
+ const toggle = (next: boolean) => {
+ if (!controller) return;
+ setError(null);
+ setBusy(true);
+ // Straight from the click: turning it on needs the click it came from.
+ void controller.setDriveEnabled(next).then(
+ (result) => { if (!result.ok) setError(addErrorKey(result.error)); },
+ () => setError("folders.add_failed.failed"),
+ ).finally(() => setBusy(false));
+ };
+ const chooseLetter = (value: string) => {
+ if (!controller) return;
+ setError(null);
+ void controller.setDriveLetter(value === "none" ? null : value).then(
+ (result) => { if (!result.ok) setError(addErrorKey(result.error)); },
+ () => setError("folders.add_failed.failed"),
+ );
+ };
+
+ return (
+
+
+
+ {on && driveRoot &&
+
+ )}
+ {error &&
+ );
+}
+
+/** The folders of the user's own Files, for the picker: no trash, nothing shared. */
+async function loadFolders(): Promise {
+ const client = useAuthStore.getState().client;
+ if (!client) throw new Error("not signed in");
+ const nodes = await client.listAllFileNodes();
+ const inTrash = trashSubtreeIds(nodes, findTrashFolder(nodes)?.id);
+ return nodes
+ .filter((n) => fileNodeKind(n) === "directory" && !n.discoverableOnly && !n.isShared && !inTrash.has(n.id) && !n.id.includes(":"))
+ .map((n) => ({ id: n.id, name: n.name, parentId: n.parentId ?? null }));
+}
+
+/** "Projects / 2026" for a folder, "My files" for the top. */
+function folderLabel(folders: PickerFolder[], id: string | null, top: string): string {
+ if (id === null) return top;
+ const byId = new Map(folders.map((f) => [f.id, f]));
+ const names: string[] = [];
+ const seen = new Set();
+ for (let cur = byId.get(id); cur && !seen.has(cur.id); cur = cur.parentId ? byId.get(cur.parentId) : undefined) {
+ seen.add(cur.id);
+ names.unshift(cur.name);
+ }
+ return names.join(" / ") || top;
+}
+
+function FoldersSection() {
+ const t = useTranslations("files_sync");
+ const tFiles = useTranslations("files");
+ const account = useFilesSyncStore((s) => s.account);
+ const roots = useFilesSyncStore((s) => s.roots);
+ const controller = useFilesSyncStore((s) => s.controller);
+ const forcedOff = useFilesSyncStore((s) => s.folderSyncForcedOff);
+ const [folders, setFolders] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [removing, setRemoving] = useState(null);
+
+ const folderRoots = roots.filter((r) => r.kind === "folder" && (!account || r.account === account));
+
+ const openPicker = () => {
+ setError(null);
+ setLoading(true);
+ loadFolders().then(setFolders, () => setError("folders.load_failed")).finally(() => setLoading(false));
+ };
+ // Called from the picker's button: the OS folder picker needs that click, so
+ // nothing is awaited before addFolder.
+ const pick = (remoteId: string | null) => {
+ if (!controller) return;
+ const label = folderLabel(folders ?? [], remoteId, tFiles("my_files"));
+ void controller.addFolder(remoteId, label).then(
+ (result) => { if (!result.ok) setError(addErrorKey(result.error)); },
+ () => setError("folders.add_failed.failed"),
+ );
+ };
+
+ return (
+
+ {forcedOff && (
+ setFolders(null)}
+ onPick={pick}
+ title={t("folders.pick_title")}
+ confirmText={t("folders.pick_confirm")}
+ folders={folders}
+ // Nothing is "where it is now": every folder, My files too, can be picked.
+ currentId="#none"
+ />
+ )}
+ setRemoving(null)}
+ onConfirm={() => { if (removing && controller) void controller.removeRoot(removing.id).catch(() => {}); }}
+ title={t("folders.remove_title")}
+ message={t("folders.remove_message")}
+ confirmText={t("folders.remove_confirm")}
+ variant="destructive"
+ />
+
+ );
+}
+
+function FolderRow({ root, onRemove }: { root: FilesRoot; onRemove: () => void }) {
+ const t = useTranslations("files_sync");
+ const status = useFilesSyncStore((s) => s.status[root.id]);
+ const controller = useFilesSyncStore((s) => s.controller);
+ const paused = root.paused || status?.state === "paused";
+ const blocked = status?.state === "blocked";
+ return (
+
+
+ );
+}
+
+const ERROR_KINDS: ReadonlySet = new Set(["error", "too-large"]);
+
+function ActivityMark({ item }: { item: FilesSyncActivity }) {
+ const t = useTranslations("files_sync");
+ let mark: { icon: AppIcon; label: string; className: string } | null = null;
+ if (ERROR_KINDS.has(item.kind)) mark = { icon: AlertCircle, label: t("activity.mark_error"), className: "text-destructive" };
+ else if (item.kind === "conflict") mark = { icon: AlertTriangle, label: t("activity.mark_conflict"), className: "text-amber-600 dark:text-amber-400" };
+ else if (item.kind === "mass-delete") mark = { icon: HelpCircle, label: t("activity.mark_question"), className: "text-amber-600 dark:text-amber-400" };
+ else if (item.direction === "up") mark = { icon: ArrowUp, label: t("activity.to_files"), className: "text-muted-foreground" };
+ else if (item.direction === "down") mark = { icon: ArrowDown, label: t("activity.to_computer"), className: "text-muted-foreground" };
+ if (!mark) return ;
+ const Icon = mark.icon;
+ return (
+
+
+
+ );
+}
+
+function ActivitySection() {
+ const t = useTranslations("files_sync");
+ const format = useFormatter();
+ const activity = useFilesSyncStore((s) => s.activity);
+ const roots = useFilesSyncStore((s) => s.roots);
+ const controller = useFilesSyncStore((s) => s.controller);
+ const items = useMemo(() => [...activity].sort((a, b) => b.at - a.at), [activity]);
+ const rootById = useMemo(() => new Map(roots.map((r) => [r.id, r])), [roots]);
+
+ const message = (item: FilesSyncActivity) => {
+ const detail = item.kind === "too-large" && item.detail && /^\d+$/.test(item.detail)
+ ? formatFileSize(Number(item.detail))
+ : item.detail ?? "";
+ const text = t(`activity.${item.kind}`, { path: item.path, detail });
+ return (item.kind === "error" || item.kind === "waiting") && item.messageKey
+ ? `${text}: ${t(filesSyncErrorKey(item.messageKey))}`
+ : text;
+ };
+
+ return (
+
+ {items.length === 0 ? (
+
+ );
+}
diff --git a/components/settings/settings-app.tsx b/components/settings/settings-app.tsx
index 36379f6f1..faadf3bba 100644
--- a/components/settings/settings-app.tsx
+++ b/components/settings/settings-app.tsx
@@ -42,6 +42,8 @@ import { HelpLinks } from '@/components/layout/help-links';
import { OrganizeSettings } from '@/components/settings/organize-settings';
import { AccountSecuritySettings } from '@/components/settings/account-security-settings';
import { FilesSettingsComponent } from '@/components/settings/files-settings';
+import { DesktopFilesSettings } from '@/components/settings/desktop-files-settings';
+import { useFilesSyncStore } from '@/stores/files-sync-store';
import { ContactsSettings } from '@/components/settings/contacts-settings';
import { AddonsSettings } from '@/components/settings/addons-settings';
import { NotificationSettings } from '@/components/settings/notification-settings';
@@ -686,6 +688,8 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
const supportsCalendar = client?.supportsCalendars() ?? false;
const supportsSieve = client?.supportsSieve() ?? false;
const supportsFiles = client?.supportsFiles() ?? false;
+ // Files on this computer: the desktop app's sync engine runs in this window.
+ const filesSyncAvailable = useFilesSyncStore((s) => s.available);
// Delegates (Settings > Sharing) needs someone to share with and something to share.
const supportsSharing = !delegationHidden && !!client?.getShareTargets && (client?.supportsPrincipals() ?? false)
&& ((client?.supportsMailboxSharing?.() ?? false)
@@ -718,6 +722,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
...(supportsCalendar && isFeatureEnabled('calendarEnabled') ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
...(isFeatureEnabled('contactsEnabled') ? [{ id: 'contacts' as Tab, label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' as TabGroup }] : []),
...(supportsFiles && isFeatureEnabled('filesEnabled') ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
+ ...(filesSyncAvailable && supportsFiles && isFeatureEnabled('filesEnabled') ? [{ id: 'files_sync' as Tab, label: tRoot(settingsTabLabelKey('files_sync')), icon: tabIcons.files_sync, group: 'apps' as TabGroup }] : []),
...(isFeatureEnabled('sidebarAppsEnabled') || isFeatureEnabled('pluginsEnabled') ? [{ id: 'addons' as Tab, label: t('tabs.addons'), icon: tabIcons.addons, group: 'apps' as TabGroup }] : []),
// Plugin-contributed pages nest under Add-ons: a page of its own for each
// plugin that offers one, and an entry for each plugin that offers only a
@@ -926,6 +931,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
: <> = {
calendar: Calendar,
contacts: BookUser,
files: HardDrive,
+ files_sync: FolderSync,
addons: Puzzle,
offline: CloudOff,
privacy: EyeOff,
@@ -66,6 +68,6 @@ export type SettingsTabGroup = 'top' | 'mail' | 'apps' | 'bottom';
export const SETTINGS_NAV_GROUPS: readonly { group: SettingsTabGroup; tabs: readonly SettingsSearchTab[] }[] = [
{ group: 'top', tabs: ['account', 'security', 'privacy', 'sharing', 'notifications', 'general', 'offline', 'appearance', 'accessibility'] },
{ group: 'mail', tabs: ['message_list', 'reading', 'composing', 'organize', 'filters', 'vacation', 'recovery'] },
- { group: 'apps', tabs: ['calendar', 'contacts', 'files', 'addons'] },
+ { group: 'apps', tabs: ['calendar', 'contacts', 'files', 'files_sync', 'addons'] },
{ group: 'bottom', tabs: ['backup', 'about'] },
];
diff --git a/components/templates/template-form.tsx b/components/templates/template-form.tsx
index 7f6b78fbc..284678b09 100644
--- a/components/templates/template-form.tsx
+++ b/components/templates/template-form.tsx
@@ -4,7 +4,7 @@ import { useState, useMemo, useEffect, useId, useRef } from 'react';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
-import { Star, Plus, Square, CheckSquare } from '@/components/icons';
+import { Star, Plus, Square, CheckSquare, Braces } from '@/components/icons';
import { ContextMenu, ContextMenuItem } from '@/components/ui/context-menu';
import { useContextMenu } from '@/hooks/use-context-menu';
import { cn } from '@/lib/utils';
@@ -338,6 +338,7 @@ export function TemplateForm({ template, initialData, onSave, onCancel, shared =
{BUILT_IN_PLACEHOLDERS.map((p) => (
{
diff --git a/components/ui/__tests__/confirm-dialog-window.test.tsx b/components/ui/__tests__/confirm-dialog-window.test.tsx
new file mode 100644
index 000000000..44ada0ebc
--- /dev/null
+++ b/components/ui/__tests__/confirm-dialog-window.test.tsx
@@ -0,0 +1,101 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { ConfirmDialog } from '../confirm-dialog';
+import type { BulwarkDesktopBridge, DesktopDialogWindowAnswer, DesktopDialogWindowRequest } from '@/lib/desktop/types';
+
+// In the desktop app the app's confirm (Empty trash, Delete forever, Sign out, …) is a
+// window of its own; without the shell's dialogs.show it stays in the page.
+
+type Show = (request: DesktopDialogWindowRequest) => Promise;
+
+function desktop(show: Show) {
+ const cancel = vi.fn();
+ window.bulwarkDesktop = { version: 1, platform: 'win32', dialogs: { confirm: vi.fn(), show: vi.fn(show), cancel } } as unknown as BulwarkDesktopBridge;
+ return { show: window.bulwarkDesktop!.dialogs!.show as unknown as ReturnType>, cancel };
+}
+
+/** A show that waits until the test answers. */
+function pending() {
+ let answer: (value: DesktopDialogWindowAnswer) => void = () => {};
+ const show: Show = () => new Promise((resolve) => (answer = resolve));
+ return { show, answer: (value: DesktopDialogWindowAnswer) => answer(value) };
+}
+
+afterEach(() => {
+ window.bulwarkDesktop = undefined;
+});
+
+const props = { title: 'Empty trash?', message: 'All messages in Trash will be deleted.', confirmText: 'Empty trash', variant: 'destructive' as const };
+
+describe('ConfirmDialog in the desktop app', () => {
+ it('asks in a window, draws nothing in the page, and confirms with the window\'s button', async () => {
+ const gate = pending();
+ const { show } = desktop(gate.show);
+ const onConfirm = vi.fn();
+ const onClose = vi.fn();
+ render(a@example.org } />);
+ expect(screen.getByRole('alertdialog', { name: 'Empty trash?' })).toBeTruthy();
+ expect(show).not.toHaveBeenCalled();
+ view.unmount();
+
+ window.bulwarkDesktop = { version: 1, platform: 'win32', dialogs: { confirm: vi.fn() } } as unknown as BulwarkDesktopBridge;
+ const older = render( {}}>
- {}} />
-
- {}} />
-
- {}} />
- ,
- );
- await waitFor(() => expect(popup).toHaveBeenCalled());
- const at = (popup.mock.calls[0] as unknown[])[1] as { x: number; y: number };
- expect(at.y).toBe(76);
- // Under the button: its left edge somewhere left of the button, not at the window's edge.
- expect(at.x).toBeGreaterThan(200);
- expect(at.x).toBeLessThan(468);
- } finally {
- MENU.width = 220;
- }
- });
-});
-
describe('a menu from a right-click on a row', () => {
function Row() {
const { contextMenu, openContextMenu, closeContextMenu } = useContextMenu();
diff --git a/components/ui/__tests__/context-menu-shared.test.tsx b/components/ui/__tests__/context-menu-shared.test.tsx
new file mode 100644
index 000000000..d2b6b4bfb
--- /dev/null
+++ b/components/ui/__tests__/context-menu-shared.test.tsx
@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ContextMenu, ContextMenuCheckItem, ContextMenuItem } from '../context-menu';
+
+// One right-click menu everywhere: rows with an icon column, a tick for what's on,
+// red only on a destructive row's icon (and the row under the pointer), and letters
+// that jump to a row.
+
+const Icon = ({ className }: { className?: string }) => ;
+
+function open(children: React.ReactNode) {
+ return render({children} );
+}
+
+describe('a destructive row', () => {
+ it('has the colour on its icon, not on its words', () => {
+ open( {}} /> );
+ const item = screen.getByRole('menuitem');
+ return {
+ label: item.querySelector('[data-menu-label]')?.textContent,
+ key: item.querySelector('[data-menu-shortcut]')?.textContent,
+ };
+}
+
+describe('a menu row\'s key', () => {
+ it('is not part of the label', () => {
+ expect(row('Shift + R')).toEqual({ label: 'Reply all', key: 'Shift + R' });
+ });
+
+ it('says Umschalt and Entf in German, as Windows does, never Umschalttaste', () => {
+ expect(row('Shift + R', 'de').key).toBe('Umschalt + R');
+ document.body.innerHTML = '';
+ expect(row('Del', 'de').key).toBe('Entf');
+ });
+
+ it('says Maj in French', () => {
+ expect(row('Shift + I', 'fr').key).toBe('Maj + I');
+ });
+
+ it('keeps a key that is already in the app\'s words', () => {
+ expect(row('Strg + Umschalt + Eingabe', 'de').key).toBe('Strg + Umschalt + Eingabe');
+ });
+});
+
+// Menu rows show their keys through MenuShortcut (or ContextMenuItem's shortcut),
+// which puts them apart from the label in the app's words. A raw in a file
+// with menu rows is how "DayD" happened.
+describe('menu rows show keys through MenuShortcut', () => {
+ const root = path.resolve(__dirname, '../../..');
+ it('no raw next to role="menuitem…" rows', () => {
+ const files: string[] = [];
+ const walk = (dir: string) => {
+ for (const entry of readdirSync(dir, { withFileTypes: true })) {
+ if (entry.name === 'node_modules' || entry.name === '__tests__' || entry.name.startsWith('.')) continue;
+ const full = path.join(dir, entry.name);
+ if (entry.isDirectory()) walk(full);
+ else if (entry.name.endsWith('.tsx')) files.push(full);
+ }
+ };
+ walk(path.join(root, 'components'));
+ walk(path.join(root, 'app'));
+ const offenders = files.filter((file) => {
+ if (file.endsWith(path.join('ui', 'context-menu.tsx'))) return false;
+ const source = readFileSync(file, 'utf8');
+ return /role="menuitem/.test(source) && /]/.test(source);
+ });
+ expect(offenders.map((file) => path.relative(root, file))).toEqual([]);
+ }, 60_000);
+});
+
+// "Umschalttaste" is Chromium's word, not Windows': it must not appear in what the
+// app writes itself.
+describe('no Umschalttaste', () => {
+ const root = path.resolve(__dirname, '../../..');
+ it('in any locale file or source file', () => {
+ const files: string[] = [];
+ const walk = (dir: string) => {
+ for (const entry of readdirSync(dir, { withFileTypes: true })) {
+ if (entry.name === 'node_modules' || entry.name === '__tests__' || entry.name.startsWith('.')) continue;
+ const full = path.join(dir, entry.name);
+ if (entry.isDirectory()) walk(full);
+ else if (/\.(tsx?|json)$/.test(entry.name)) files.push(full);
+ }
+ };
+ for (const dir of ['components', 'app', 'lib', 'hooks', 'locales']) walk(path.join(root, dir));
+ const offenders = files.filter((file) => /Umschalttaste/i.test(readFileSync(file, 'utf8')));
+ expect(offenders.map((file) => path.relative(root, file))).toEqual([]);
+ }, 60_000);
+});
diff --git a/components/ui/__tests__/one-menu-guard.test.ts b/components/ui/__tests__/one-menu-guard.test.ts
new file mode 100644
index 000000000..67f2ea08e
--- /dev/null
+++ b/components/ui/__tests__/one-menu-guard.test.ts
@@ -0,0 +1,88 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+// Every right-click, ⋮ and overflow menu is the shared ContextMenu
+// (components/ui/context-menu.tsx): one look, one keyboard model, one placement, and
+// the same in the browser and the desktop app. A component that draws a role="menu"
+// of its own is one more menu style. The few that aren't a list of actions are named
+// here with the reason.
+const ALLOWED: Record = {
+ 'components/ui/context-menu.tsx': 'the shared menu itself',
+ 'components/layout/window-menu-bar.tsx': "the desktop app's menu bar: the shell's menus, with a menu bar's keys; it draws its rows in the shared menu's look",
+ 'components/layout/account-switcher.tsx': 'account cards with avatars and storage, not a list of actions',
+ 'components/layout/mv-top-bar.tsx': "Mountain View's app launcher: a grid of apps, as Gmail has it",
+ 'components/email/email-viewer.tsx': "the phone's More sheet, which slides in and has sub-views",
+ 'components/email/rich-text-editor.tsx': "the editor toolbar's pickers (font, size, colour)",
+ 'components/email/move-to-dialog.tsx': 'a folder list inside the Move dialog',
+ 'components/files/import-eml-dialog.tsx': 'a folder list inside the import dialog',
+};
+
+const ROOT = path.resolve(__dirname, '../../..');
+
+function sources(dir: string, out: string[] = []): string[] {
+ for (const entry of readdirSync(dir, { withFileTypes: true })) {
+ if (entry.name === 'node_modules' || entry.name === '__tests__' || entry.name.startsWith('.')) continue;
+ const full = path.join(dir, entry.name);
+ if (entry.isDirectory()) sources(full, out);
+ else if (entry.name.endsWith('.tsx')) out.push(full);
+ }
+ return out;
+}
+
+const all = () => [...sources(path.join(ROOT, 'components')), ...sources(path.join(ROOT, 'app'))];
+const relative = (full: string) => path.relative(ROOT, full).split(path.sep).join('/');
+
+// role="menu" as an attribute, or role: "menu" in props; not a selector like '[role="menu"]'.
+const MENU_ROOT = /(?" that isn't an arrow's.
+const MENU_ROW = /<(ContextMenuItem|ContextMenuSubMenu)\b((?:=>|[^>])*)>/g;
+
+describe('one menu component', () => {
+ it('no component draws a menu of its own', () => {
+ const offenders = all()
+ .map(relative)
+ .filter((file) => !(file in ALLOWED))
+ .filter((file) => MENU_ROOT.test(readFileSync(path.join(ROOT, file), 'utf8')));
+ expect(offenders).toEqual([]);
+ }, 60_000);
+
+ it('the list of exceptions holds only files that still need it', () => {
+ const stale = Object.keys(ALLOWED).filter((file) => {
+ try {
+ return !MENU_ROOT.test(readFileSync(path.join(ROOT, file), 'utf8'));
+ } catch {
+ return true;
+ }
+ });
+ expect(stale).toEqual([]);
+ });
+
+ it('every row of it has an icon', () => {
+ const missing: string[] = [];
+ for (const full of all()) {
+ const source = readFileSync(full, 'utf8');
+ for (const match of source.matchAll(MENU_ROW)) {
+ const attrs = match[2];
+ if (attrs.includes('icon=') || attrs.includes('{...')) continue;
+ const line = source.slice(0, match.index).split(/\r?\n/).length;
+ missing.push(`${relative(full)}:${line}`);
+ }
+ }
+ expect(missing).toEqual([]);
+ }, 60_000);
+
+ it('a row that deletes or clears is drawn as destructive', () => {
+ const plain: string[] = [];
+ for (const full of all()) {
+ const source = readFileSync(full, 'utf8');
+ for (const match of source.matchAll(MENU_ROW)) {
+ const attrs = match[2];
+ if (!/icon=\{(Trash2|Eraser)\}/.test(attrs) || attrs.includes('destructive')) continue;
+ plain.push(`${relative(full)}:${source.slice(0, match.index).split(/\r?\n/).length}`);
+ }
+ }
+ expect(plain).toEqual([]);
+ }, 60_000);
+});
diff --git a/components/ui/confirm-dialog.tsx b/components/ui/confirm-dialog.tsx
index 8f6652e2a..243c754b6 100644
--- a/components/ui/confirm-dialog.tsx
+++ b/components/ui/confirm-dialog.tsx
@@ -1,6 +1,8 @@
"use client";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import { useTranslations } from "next-intl";
+import { askInWindow, dialogWindowsAvailable } from "@/lib/desktop/dialog-window";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
import { AlertTriangle } from "@/components/icons";
@@ -19,6 +21,82 @@ interface ConfirmDialogProps {
variant?: "default" | "destructive";
}
+const noChanges = () => () => {};
+
+interface WindowConfirm {
+ isOpen: boolean;
+ title: string;
+ message: string;
+ confirmText: string;
+ cancelText: string;
+ variant: "default" | "destructive";
+ onConfirm: () => void;
+ onClose: () => void;
+}
+
+/**
+ * Asks in a window of the app's own while `isOpen`, where the desktop shell can
+ * (lib/desktop/dialog-window.ts). True while it does, so the caller draws nothing; false
+ * in the browser, on an older shell, or once the shell refused, so the caller draws the
+ * in-page dialog. Closing it from the page (isOpen false, unmount) takes the window back.
+ */
+export function useConfirmInWindow({ isOpen, title, message, confirmText, cancelText, variant, onConfirm, onClose }: WindowConfirm): boolean {
+ const [refused, setRefused] = useState(false);
+ const handlers = useRef({ onConfirm, onClose });
+ useEffect(() => {
+ handlers.current = { onConfirm, onClose };
+ });
+ const available = useSyncExternalStore(noChanges, dialogWindowsAvailable, () => false);
+ const asking = isOpen && !refused && available;
+
+ useEffect(() => {
+ if (!asking) return;
+ const destructive = variant === "destructive";
+ const asked = askInWindow({
+ title,
+ message,
+ ...(destructive ? { icon: "warning" as const } : {}),
+ buttons: [
+ { label: cancelText, variant: "secondary" },
+ { label: confirmText, variant: destructive ? "destructive" : "primary" },
+ ],
+ // Enter says yes, except to something that can't be undone: there the focus starts on Cancel.
+ defaultIndex: destructive ? 0 : 1,
+ });
+ if (!asked) return;
+ let live = true;
+ void asked.answer.then((answer) => {
+ if (!live) return;
+ live = false;
+ if (answer === "failed") {
+ setRefused(true);
+ return;
+ }
+ if (answer && "button" in answer && answer.button === 1) {
+ try {
+ handlers.current.onConfirm();
+ } finally {
+ handlers.current.onClose();
+ }
+ } else {
+ handlers.current.onClose();
+ }
+ });
+ return () => {
+ if (!live) return;
+ live = false;
+ asked.cancel();
+ };
+ }, [asking, title, message, confirmText, cancelText, variant]);
+
+ // The next question tries the window again.
+ useEffect(() => {
+ if (!isOpen) setRefused(false);
+ }, [isOpen]);
+
+ return asking;
+}
+
export function ConfirmDialog({
isOpen,
onClose,
@@ -35,6 +113,19 @@ export function ConfirmDialog({
const resolvedConfirmText = confirmText || t("confirm");
const resolvedCancelText = cancelText || t("cancel");
+ // In the desktop app a plain question (no rich details) gets a window of its own.
+ const inWindow = useConfirmInWindow({
+ isOpen: isOpen && details == null,
+ title,
+ message,
+ confirmText: resolvedConfirmText,
+ cancelText: resolvedCancelText,
+ variant,
+ onConfirm,
+ onClose,
+ });
+ if (inWindow) return null;
+
return (
-
- ,
+ ,
document.body
);
}
@@ -657,7 +647,7 @@ export function ContextMenuItem({
"focus:outline-none focus-visible:bg-muted",
disabled && "opacity-50 cursor-not-allowed",
!disabled && "hover:bg-muted cursor-pointer",
- destructive && !disabled && "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10"
+ destructive && !disabled && "hover:bg-destructive/10 hover:text-destructive focus-visible:bg-destructive/10 focus-visible:text-destructive"
)}
// Hovering another entry closes an open submenu of this level, after
// a moment, so a diagonal move into the submenu doesn't.
@@ -675,7 +665,7 @@ export function ContextMenuItem({
onClick();
}}
>
- {Icon &&
- {open && (
-
+ { menu.closeContextMenu(); onTurnOff(); }}
+ />
+
);
}
diff --git a/components/providers/files-sync-host.tsx b/components/providers/files-sync-host.tsx
new file mode 100644
index 000000000..0f941679b
--- /dev/null
+++ b/components/providers/files-sync-host.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { getDesktopBridge } from "@/lib/desktop/bridge";
+import { getDesktopPolicy, onDesktopPolicyChange } from "@/lib/desktop/policy";
+import { canDownload } from "@/lib/device-policy";
+import { claimFilesControls } from "@/lib/files-sync/controls";
+import { FilesSyncHost as Host, type HostAccount } from "@/lib/files-sync/host";
+import { registerFilesSyncLifecycle, setRunningFilesSyncHost } from "@/lib/files-sync/lifecycle";
+import { scopeDecided } from "@/lib/offline/offline-mode";
+import { subscribePushStateChanges } from "@/lib/push-events";
+import { useAccountStore } from "@/stores/account-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { useFilesSyncStore } from "@/stores/files-sync-store";
+
+registerFilesSyncLifecycle();
+
+/** `FilesFolderSyncEnabled` forced off. Main removes the folders itself; this keeps the engine off them meanwhile. */
+function folderSyncForcedOff(): boolean {
+ const entry = getDesktopPolicy().FilesFolderSyncEnabled;
+ return entry.locked && entry.value === false;
+}
+
+/** A definite no from the organisation. An unknown policy isn't one. */
+function downloadsForbidden(account: string): boolean {
+ return scopeDecided(account) && !canDownload(account);
+}
+
+/**
+ * Files on this computer, in the desktop app's main window (it's under MainWindowOnly): starts
+ * the sync engine for the signed-in accounts and keeps it fed with push, the network and the
+ * policies. Renders nothing. In a browser, or a shell without the files bridge, it does nothing.
+ */
+export function FilesSyncHost() {
+ const hostRef = useRef
-
-
- )}
+
+ {drive &&
+ );
+}
+
+/** What went wrong turning something on, in words. */
+function addErrorKey(error: FilesError): string | null {
+ if (error === "cancelled") return null;
+ if (error === "overlap" || error === "denied" || error === "policy") return `folders.add_failed.${error}`;
+ return "folders.add_failed.failed";
+}
+
+function DriveSection({ drive }: { drive: FilesDriveState }) {
+ const t = useTranslations("files_sync");
+ const account = useFilesSyncStore((s) => s.account);
+ const roots = useFilesSyncStore((s) => s.roots);
+ const status = useFilesSyncStore((s) => s.status);
+ const controller = useFilesSyncStore((s) => s.controller);
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState{t(error)}
} +
+
+ )}
+ {folderRoots.length === 0 ? (
+ !forcedOff && {t("folders.forced_off")}
+{t("folders.empty")}
+ ) : ( +-
+ {folderRoots.map((root) => (
+
+
+
+ )}
+ {error && {t(error)}
} + {folders && ( +
+
+ {status?.state === "confirm-delete" && status.massDelete &&
+
+
+
+
+ {root.path}
+{t("folders.paired_with", { folder: root.remoteLabel })}
+
+ {!blocked && (
+
+ )}
+
+
+ {t("activity.empty")}
+ ) : ( +-
+ {items.map((item) => {
+ const root = rootById.get(item.rootId);
+ const marked = ERROR_KINDS.has(item.kind) || item.kind === "conflict" || item.kind === "mass-delete";
+ return (
+
-
+
+ + {root && ( + + {root.kind === "drive" ? : } + {rootName(root, t("drive.root_name"))} + + )} + {message(item)} +
+ );
+ })}
+
+
+
+
- {children}
-
- )}
- {!native && isOpen && !disabled && (
+ {isOpen && !disabled && (
{children}
);
- return readMenu(screen.getByTestId('root')).items;
-}
-
-describe('a row\'s key in a native menu', () => {
- it('is not part of the label, and becomes the accelerator', () => {
- const items = menuOf(
- ,
- );
- expect(items[0].label).toBe('Day');
- expect(items[0].accelerator).toBe('D');
- });
-
- it('a menu item\'s shortcut too', () => {
- const items = menuOf(