From de388a1d1273ffe8b76151f91440b64106b7d4d8 Mon Sep 17 00:00:00 2001
From: lucletoffe <15689941+lucletoffe@users.noreply.github.com>
Date: Thu, 15 Oct 2026 22:02:23 +0200
Subject: [PATCH] feat(calendar): order calendars by sortOrder and let users
 reorder them

Calendars were listed in the order the server returns them, which for
Stalwart is creation order, and the sortOrder property was never read.
Follow the JMAP Calendars rule instead: lower sortOrder first, equal
sortOrder by name (case- and accent-insensitive, numbers by value). The
store keeps the list sorted, so the sidebar, the calendar pickers and the
settings all show the same order; each account's calendars stay together.

Calendar settings gain move up / move down buttons, visible on touch
screens too, and drag and drop for the user's own calendars. A move
renumbers that account's calendars 1, 2, 3... and writes sortOrder only
where it changes. The renumbering also covers the account's calendars the
settings list does not show (iCal subscriptions), so they keep their
place relative to the others. Shared calendars are not offered for
reordering, their order is the owner's.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../calendar-order-settings.test.tsx          |  79 ++++++++++++
 .../settings/calendar-management-settings.tsx |  84 +++++++++++-
 lib/__tests__/calendar-sort.test.ts           | 120 +++++++++++++++++
 lib/calendar-sort.ts                          |  70 ++++++++++
 locales/ar/common.json                        |   2 +
 locales/ca/common.json                        |   2 +
 locales/cs/common.json                        |   2 +
 locales/da/common.json                        |   2 +
 locales/de/common.json                        |   2 +
 locales/en/common.json                        |   2 +
 locales/es/common.json                        |   2 +
 locales/fa/common.json                        |   2 +
 locales/fr/common.json                        |   2 +
 locales/he/common.json                        |   2 +
 locales/hu/common.json                        |   2 +
 locales/it/common.json                        |   2 +
 locales/ja/common.json                        |   2 +
 locales/ko/common.json                        |   2 +
 locales/lv/common.json                        |   2 +
 locales/mn/common.json                        |   2 +
 locales/nb/common.json                        |   2 +
 locales/nl/common.json                        |   2 +
 locales/pl/common.json                        |   2 +
 locales/pt/common.json                        |   2 +
 locales/ro/common.json                        |   2 +
 locales/ru/common.json                        |   2 +
 locales/sk/common.json                        |   2 +
 locales/tr/common.json                        |   2 +
 locales/uk/common.json                        |   2 +
 locales/zh-TW/common.json                     |   2 +
 locales/zh/common.json                        |   2 +
 .../calendar-store-sort-order.test.ts         | 121 ++++++++++++++++++
 stores/calendar-store.ts                      |  50 ++++++--
 33 files changed, 563 insertions(+), 15 deletions(-)
 create mode 100644 components/settings/__tests__/calendar-order-settings.test.tsx
 create mode 100644 lib/__tests__/calendar-sort.test.ts
 create mode 100644 lib/calendar-sort.ts
 create mode 100644 stores/__tests__/calendar-store-sort-order.test.ts

diff --git a/components/settings/__tests__/calendar-order-settings.test.tsx b/components/settings/__tests__/calendar-order-settings.test.tsx
new file mode 100644
index 000000000..6c701f407
--- /dev/null
+++ b/components/settings/__tests__/calendar-order-settings.test.tsx
@@ -0,0 +1,79 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CalendarManagementSettings } from '../calendar-management-settings';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useAuthStore } from '@/stores/auth-store';
+import type { Calendar } from '@/lib/jmap/types';
+
+function makeCalendar(overrides: Partial<Calendar>): Calendar {
+  return {
+    id: 'cal-1',
+    name: 'Work',
+    color: '#3b82f6',
+    sortOrder: 0,
+    isDefault: false,
+    isShared: false,
+    shareWith: null,
+    myRights: { mayWriteAll: true, mayWriteOwn: true, mayShare: true, mayDelete: true },
+    ...overrides,
+  } as unknown as Calendar;
+}
+
+const client = { getAccountId: () => 'acct', getPrincipals: vi.fn().mockResolvedValue([]) };
+let reorderCalendars: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  reorderCalendars = vi.fn().mockResolvedValue(undefined);
+  useAuthStore.setState({ client: client as never, serverUrl: null as never, username: null as never });
+  useCalendarStore.setState({
+    calendars: [
+      makeCalendar({ id: 'work', name: 'Work', sortOrder: 1 }),
+      makeCalendar({ id: 'home', name: 'Home', sortOrder: 2 }),
+      makeCalendar({ id: 'holidays', name: 'Holidays', sortOrder: 3 }),
+      makeCalendar({ id: 'x:team', name: 'Team', isShared: true, accountId: 'x' }),
+    ],
+    icalSubscriptions: [],
+    reorderCalendars,
+  } as never);
+});
+
+const row = (name: string) => screen.getAllByTestId('calendar-settings-item').find((el) => el.dataset.calendarName === name)!;
+const buttonIn = (name: string, label: string) =>
+  Array.from(row(name).querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === label)!;
+
+describe('Calendar order in settings', () => {
+  it('moves a calendar up past its neighbour', async () => {
+    render(<CalendarManagementSettings />);
+    fireEvent.click(buttonIn('Holidays', 'move_up'));
+    await waitFor(() => expect(reorderCalendars).toHaveBeenCalledWith(client, ['work', 'holidays', 'home']));
+  });
+
+  it('moves a calendar down past its neighbour', async () => {
+    render(<CalendarManagementSettings />);
+    fireEvent.click(buttonIn('Work', 'move_down'));
+    await waitFor(() => expect(reorderCalendars).toHaveBeenCalledWith(client, ['home', 'work', 'holidays']));
+  });
+
+  it('disables moving the first calendar up and the last one down', () => {
+    render(<CalendarManagementSettings />);
+    expect(buttonIn('Work', 'move_up')).toBeDisabled();
+    expect(buttonIn('Holidays', 'move_down')).toBeDisabled();
+  });
+
+  it('offers no reordering for a calendar shared with the user', () => {
+    render(<CalendarManagementSettings />);
+    expect(buttonIn('Team', 'move_up')).toBeUndefined();
+    expect(row('Team')).not.toHaveAttribute('draggable', 'true');
+  });
+
+  it('reorders by drag and drop', async () => {
+    render(<CalendarManagementSettings />);
+    const dataTransfer = { effectAllowed: '', dropEffect: '', setData: vi.fn() };
+    fireEvent.dragStart(row('Holidays'), { dataTransfer });
+    // Firefox starts no drag unless data is set.
+    expect(dataTransfer.setData).toHaveBeenCalledWith('text/plain', 'holidays');
+    fireEvent.dragOver(row('Work'), { dataTransfer });
+    fireEvent.drop(row('Work'), { dataTransfer });
+    await waitFor(() => expect(reorderCalendars).toHaveBeenCalledWith(client, ['holidays', 'work', 'home']));
+  });
+});
diff --git a/components/settings/calendar-management-settings.tsx b/components/settings/calendar-management-settings.tsx
index b6e9d6681..5f6cc8219 100644
--- a/components/settings/calendar-management-settings.tsx
+++ b/components/settings/calendar-management-settings.tsx
@@ -9,7 +9,7 @@ import { useAuthStore } from '@/stores/auth-store';
 import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';
 import { toast } from '@/stores/toast-store';
 import { SettingsSection } from './settings-section';
-import { Plus, Pencil, Trash2, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser, Users, Bell } from '@/components/icons';
+import { Plus, Pencil, Trash2, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser, Users, Bell, ArrowUp, ArrowDown, GripVertical } from '@/components/icons';
 import { AlertListEditor } from '@/components/calendar/alert-list-editor';
 import { alertsToRows, rowsToAlerts, type AlertRow } from '@/lib/calendar-alerts';
 import { ShareCollectionDialog } from './share-collection-dialog';
@@ -22,6 +22,7 @@ import { useManagedAccountStore } from '@/stores/managed-account-store';
 import { apiFetch } from '@/lib/browser-navigation';
 import { CALENDAR_COLORS, sharedCalendarColorKey } from '@/lib/shared-calendar-colors';
 import { IS_LITE } from '@/lib/lite';
+import { calendarAccountKey, moveCalendar } from '@/lib/calendar-sort';
 
 function CalendarColorPicker({
   value,
@@ -233,7 +234,7 @@ export function CalendarManagementSettings() {
   const t = useTranslations('calendar.management');
   const { client, serverUrl, username } = useAuthStore();
   const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
-  const { calendars, updateCalendar, shareCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions: allSubs, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
+  const { calendars, updateCalendar, reorderCalendars, shareCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions: allSubs, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
   // Subscriptions are persisted globally but scoped per JMAP account via
   // accountId. Legacy entries with no accountId show in the active account.
   const currentAccountId = client?.getAccountId();
@@ -264,6 +265,14 @@ export function CalendarManagementSettings() {
   const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
   const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
   const colorPickerRef = useRef<HTMLDivElement>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+
+  const listedCalendars = calendars
+    .filter(cal => !isSubscriptionCalendar(cal.id))
+    .filter(cal => !managedAccountId || cal.accountId === managedAccountId);
+  // Only the user's own calendars are offered for reordering; a shared
+  // calendar's order is left to its owner.
+  const orderableCalendars = listedCalendars.filter(cal => !cal.isShared);
 
   // Load calendars if not yet loaded
   useEffect(() => {
@@ -443,6 +452,19 @@ export function CalendarManagementSettings() {
     setColorPickerId(null);
   };
 
+  // Move a calendar next to `targetId` (before it when moving up, after it
+  // when moving down) and store the new order as sortOrder.
+  const handleMove = async (calendarId: string, targetId: string | undefined) => {
+    if (!client || !targetId) return;
+    const orderedIds = moveCalendar(calendars, calendarId, targetId);
+    if (!orderedIds) return;
+    try {
+      await reorderCalendars(client, orderedIds);
+    } catch {
+      toast.error(t('error_update'));
+    }
+  };
+
   const handleDelete = async (calendarId: string) => {
     if (!client) return;
     setIsLoading(true);
@@ -500,11 +522,14 @@ export function CalendarManagementSettings() {
   return (
     <SettingsSection title={t('title')} description={t('description')}>
       <div className="space-y-2">
-        {calendars
-          .filter(cal => !isSubscriptionCalendar(cal.id))
-          .filter(cal => !managedAccountId || cal.accountId === managedAccountId)
-          .map((cal) => {
+        {listedCalendars.map((cal) => {
           const color = (cal.isShared && sharedCalendarColors[sharedCalendarColorKey(cal)]) || cal.color || '#3b82f6';
+          // Up and down step over the neighbours of the same account.
+          const siblings = cal.isShared ? [] : orderableCalendars.filter(c => calendarAccountKey(c) === calendarAccountKey(cal));
+          const orderIndex = siblings.indexOf(cal);
+          const isOrderable = siblings.length > 1;
+          const previousId = siblings[orderIndex - 1]?.id;
+          const nextId = siblings[orderIndex + 1]?.id;
 
           if (editingId === cal.id) {
             return (
@@ -581,8 +606,27 @@ export function CalendarManagementSettings() {
           return (
             <div
               key={cal.id}
-              className="flex items-center gap-3 py-2.5 px-3 rounded-md border border-border bg-background group"
+              data-testid="calendar-settings-item"
+              data-calendar-name={cal.name}
+              draggable={isOrderable}
+              onDragStart={isOrderable ? (e) => {
+                setDraggingId(cal.id);
+                // Firefox starts no drag without data.
+                e.dataTransfer.setData('text/plain', cal.id);
+                e.dataTransfer.effectAllowed = 'move';
+              } : undefined}
+              onDragOver={isOrderable && draggingId ? (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } : undefined}
+              onDrop={isOrderable && draggingId ? (e) => { e.preventDefault(); void handleMove(draggingId, cal.id); setDraggingId(null); } : undefined}
+              onDragEnd={() => setDraggingId(null)}
+              className={cn(
+                "flex items-center gap-3 py-2.5 px-3 rounded-md border border-border bg-background group",
+                draggingId === cal.id && "opacity-50",
+              )}
             >
+              {isOrderable && (
+                // No HTML drag and drop on touch screens: the arrows do it there.
+                <GripVertical className="w-4 h-4 -me-1.5 text-muted-foreground/60 cursor-grab flex-shrink-0 pointer-coarse:hidden" aria-hidden="true" />
+              )}
               {/* Color swatch - clickable to change color */}
               <div className="relative">
                 <button
@@ -657,6 +701,32 @@ export function CalendarManagementSettings() {
                 );
               })()}
 
+              {/* Shown for touch too: there is no hover, and no HTML drag and drop. */}
+              {isOrderable && (
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100 transition-opacity">
+                  <button
+                    type="button"
+                    onClick={() => handleMove(cal.id, previousId)}
+                    disabled={!previousId}
+                    className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none"
+                    title={t('move_up')}
+                    aria-label={t('move_up')}
+                  >
+                    <ArrowUp className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleMove(cal.id, nextId)}
+                    disabled={!nextId}
+                    className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none"
+                    title={t('move_down')}
+                    aria-label={t('move_down')}
+                  >
+                    <ArrowDown className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              )}
+
               <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                 <button
                   type="button"
diff --git a/lib/__tests__/calendar-sort.test.ts b/lib/__tests__/calendar-sort.test.ts
new file mode 100644
index 000000000..85914358f
--- /dev/null
+++ b/lib/__tests__/calendar-sort.test.ts
@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { compareCalendars, moveCalendar, sortCalendars, sortOrderUpdates } from '../calendar-sort';
+import type { Calendar } from '@/lib/jmap/types';
+
+function cal(overrides: Partial<Calendar>): Calendar {
+  return {
+    id: 'c', name: 'Cal', color: null, sortOrder: 0, isSubscribed: true, isVisible: true,
+    isDefault: false, includeInAvailability: 'all', timeZone: null, shareWith: null,
+    myRights: null,
+    ...overrides,
+  } as unknown as Calendar;
+}
+
+const names = (list: Calendar[]) => list.map((c) => c.name);
+const ids = (list: Calendar[]) => list.map((c) => c.id);
+
+describe('sortCalendars', () => {
+  it('orders by sortOrder, whatever order the server listed them in', () => {
+    // Stalwart lists calendars in creation order.
+    const list = [
+      cal({ id: 'b', name: 'Default', sortOrder: 20 }),
+      cal({ id: 'n', name: 'Holidays', sortOrder: 30 }),
+      cal({ id: 'e', name: 'Work', sortOrder: 1 }),
+      cal({ id: 'd', name: 'Personal', sortOrder: 10 }),
+    ];
+    expect(names(sortCalendars(list))).toEqual(['Work', 'Personal', 'Default', 'Holidays']);
+  });
+
+  it('sorts equal sortOrder by name, ignoring case and accents, numbers by value', () => {
+    const list = [
+      cal({ id: '1', name: 'zeta' }),
+      cal({ id: '2', name: 'Team 10' }),
+      cal({ id: '3', name: 'Éclair' }),
+      cal({ id: '4', name: 'alpha' }),
+      cal({ id: '5', name: 'Team 2' }),
+      cal({ id: '6', name: 'Beta' }),
+    ];
+    expect(names(sortCalendars(list))).toEqual(['alpha', 'Beta', 'Éclair', 'Team 2', 'Team 10', 'zeta']);
+  });
+
+  it('treats a missing sortOrder as 0', () => {
+    const list = [cal({ id: 'a', name: 'B', sortOrder: 1 }), cal({ id: 'b', name: 'A', sortOrder: undefined })];
+    expect(names(sortCalendars(list))).toEqual(['A', 'B']);
+  });
+
+  it('keeps each account together, in the order the accounts came', () => {
+    const list = [
+      cal({ id: 'own-2', name: 'Own 2', sortOrder: 2 }),
+      cal({ id: 'own-1', name: 'Own 1', sortOrder: 1 }),
+      cal({ id: 'x:b', name: 'Shared B', sortOrder: 0, isShared: true, accountId: 'x' }),
+      cal({ id: 'y:a', name: 'Other A', sortOrder: 0, isShared: true, accountId: 'y' }),
+      cal({ id: 'x:a', name: 'Shared A', sortOrder: 5, isShared: true, accountId: 'x' }),
+    ];
+    expect(ids(sortCalendars(list))).toEqual(['own-1', 'own-2', 'x:b', 'x:a', 'y:a']);
+  });
+
+  it('keeps the calendars of each local account (Pro shell) together', () => {
+    const list = [
+      cal({ id: 'A::b', name: 'A2', sortOrder: 2, localAccountId: 'A' }),
+      cal({ id: 'B::b', name: 'B1', sortOrder: 1, localAccountId: 'B' }),
+      cal({ id: 'A::c', name: 'A1', sortOrder: 1, localAccountId: 'A' }),
+    ];
+    expect(names(sortCalendars(list))).toEqual(['A1', 'A2', 'B1']);
+  });
+
+  it('does not change the list it is given', () => {
+    const list = [cal({ id: 'b', sortOrder: 2 }), cal({ id: 'a', sortOrder: 1 })];
+    sortCalendars(list);
+    expect(ids(list)).toEqual(['b', 'a']);
+  });
+
+  it('compareCalendars puts the lower sortOrder first', () => {
+    expect(compareCalendars(cal({ sortOrder: 1, name: 'Z' }), cal({ sortOrder: 2, name: 'A' }))).toBeLessThan(0);
+  });
+});
+
+describe('sortOrderUpdates', () => {
+  it('numbers the calendars 1, 2, 3 in the given order and skips unchanged ones', () => {
+    const list = [
+      cal({ id: 'a', sortOrder: 1 }),
+      cal({ id: 'b', sortOrder: 2 }),
+      cal({ id: 'c', sortOrder: 3 }),
+    ];
+    expect(sortOrderUpdates(list, ['a', 'c', 'b'])).toEqual([
+      { id: 'c', sortOrder: 2 },
+      { id: 'b', sortOrder: 3 },
+    ]);
+  });
+
+  it('ignores unknown ids', () => {
+    expect(sortOrderUpdates([cal({ id: 'a', sortOrder: 0 })], ['a', 'gone'])).toEqual([{ id: 'a', sortOrder: 1 }]);
+  });
+});
+
+describe('moveCalendar', () => {
+  const list = [
+    cal({ id: 'work', name: 'Work', sortOrder: 1 }),
+    cal({ id: 'home', name: 'Home', sortOrder: 10 }),
+    cal({ id: 'tasks', name: 'Tasks', sortOrder: 15, isTasksOnly: true }),
+    cal({ id: 'holidays', name: 'Holidays', sortOrder: 30 }),
+    cal({ id: 'x:team', name: 'Team', sortOrder: 0, isShared: true, accountId: 'x' }),
+  ];
+
+  it('moving up puts the calendar just before the target', () => {
+    expect(moveCalendar(list, 'holidays', 'home')).toEqual(['work', 'holidays', 'home', 'tasks']);
+  });
+
+  it('moving down puts the calendar just after the target, past calendars not shown in between', () => {
+    expect(moveCalendar(list, 'work', 'home')).toEqual(['home', 'work', 'tasks', 'holidays']);
+  });
+
+  it('refuses a move across accounts', () => {
+    expect(moveCalendar(list, 'work', 'x:team')).toBeNull();
+  });
+
+  it('refuses unknown ids and a move onto itself', () => {
+    expect(moveCalendar(list, 'work', 'gone')).toBeNull();
+    expect(moveCalendar(list, 'work', 'work')).toBeNull();
+  });
+});
diff --git a/lib/calendar-sort.ts b/lib/calendar-sort.ts
new file mode 100644
index 000000000..6e0c0e933
--- /dev/null
+++ b/lib/calendar-sort.ts
@@ -0,0 +1,70 @@
+import type { Calendar } from '@/lib/jmap/types';
+
+// Names compare the way the user reads them: accents and case are ignored, and
+// "Team 2" comes before "Team 10".
+const nameCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+
+/**
+ * JMAP Calendars: a calendar with a lower `sortOrder` is shown first, and
+ * calendars with equal `sortOrder` are sorted by name.
+ */
+export function compareCalendars(a: Calendar, b: Calendar): number {
+  return (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || nameCollator.compare(a.name ?? '', b.name ?? '');
+}
+
+/**
+ * Calendars of one account (and, in the Pro shell, one local account) stay
+ * together: the user's own first, then each sharing account, as fetched.
+ */
+export function calendarAccountKey(calendar: Calendar): string {
+  return `${calendar.localAccountId ?? ''}\u0000${calendar.isShared ? calendar.accountId ?? '' : ''}`;
+}
+
+/**
+ * The calendars in display order: grouped by account in the order the
+ * accounts first appear, and by `sortOrder`, then name, within each account.
+ */
+export function sortCalendars(calendars: Calendar[]): Calendar[] {
+  const accountRank = new Map<string, number>();
+  for (const calendar of calendars) {
+    const key = calendarAccountKey(calendar);
+    if (!accountRank.has(key)) accountRank.set(key, accountRank.size);
+  }
+  return [...calendars].sort((a, b) =>
+    accountRank.get(calendarAccountKey(a))! - accountRank.get(calendarAccountKey(b))! || compareCalendars(a, b),
+  );
+}
+
+/**
+ * `sortOrder` values that put `orderedIds` in that order: 1, 2, 3... Only the
+ * calendars whose value changes are returned, so a move writes as little as
+ * possible.
+ */
+export function sortOrderUpdates(calendars: Calendar[], orderedIds: string[]): { id: string; sortOrder: number }[] {
+  const byId = new Map(calendars.map((calendar) => [calendar.id, calendar]));
+  const updates: { id: string; sortOrder: number }[] = [];
+  orderedIds.forEach((id, index) => {
+    const calendar = byId.get(id);
+    if (calendar && calendar.sortOrder !== index + 1) updates.push({ id, sortOrder: index + 1 });
+  });
+  return updates;
+}
+
+/**
+ * The ids of the calendar's account in display order once it is moved next to
+ * `targetId`: before the target when it moves up, after it when it moves down.
+ * Null when the move is not possible (unknown ids, or another account).
+ */
+export function moveCalendar(calendars: Calendar[], calendarId: string, targetId: string): string[] | null {
+  const sorted = sortCalendars(calendars);
+  const moving = sorted.find((calendar) => calendar.id === calendarId);
+  const target = sorted.find((calendar) => calendar.id === targetId);
+  if (!moving || !target || moving === target) return null;
+  const key = calendarAccountKey(moving);
+  if (calendarAccountKey(target) !== key) return null;
+  const group = sorted.filter((calendar) => calendarAccountKey(calendar) === key);
+  const movingDown = group.indexOf(moving) < group.indexOf(target);
+  const rest = group.filter((calendar) => calendar !== moving);
+  rest.splice(rest.indexOf(target) + (movingDown ? 1 : 0), 0, moving);
+  return rest.map((calendar) => calendar.id);
+}
diff --git a/locales/ar/common.json b/locales/ar/common.json
index 968049efc..6c7aba474 100644
--- a/locales/ar/common.json
+++ b/locales/ar/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "تم نسخ رابط CalDAV إلى الحافظة",
       "share": "مشاركة التقويم",
       "new_event_in_calendar": "حدث جديد في هذا التقويم",
+      "move_up": "تحريك لأعلى",
+      "move_down": "تحريك لأسفل",
       "kind": "المحتوى",
       "kind_events": "الأحداث",
       "kind_tasks": "المهام",
diff --git a/locales/ca/common.json b/locales/ca/common.json
index eccc0aa81..d3339187c 100644
--- a/locales/ca/common.json
+++ b/locales/ca/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "URL de CalDAV copiat al porta-retalls",
       "share": "Comparteix el calendari",
       "new_event_in_calendar": "Esdeveniment nou en aquest calendari",
+      "move_up": "Mou amunt",
+      "move_down": "Mou avall",
       "kind": "Contingut",
       "kind_events": "Esdeveniments",
       "kind_tasks": "Tasques",
diff --git a/locales/cs/common.json b/locales/cs/common.json
index f899dbddb..43c94143e 100644
--- a/locales/cs/common.json
+++ b/locales/cs/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "URL CalDAV zkopírováno do schránky",
       "share": "Sdílet kalendář",
       "new_event_in_calendar": "Nová událost v tomto kalendáři",
+      "move_up": "Posunout nahoru",
+      "move_down": "Posunout dolů",
       "kind": "Obsah",
       "kind_events": "Události",
       "kind_tasks": "Úkoly",
diff --git a/locales/da/common.json b/locales/da/common.json
index fbbf0ce1d..a14919b45 100644
--- a/locales/da/common.json
+++ b/locales/da/common.json
@@ -3457,6 +3457,8 @@
       "url_copied": "CalDAV-URL kopieret til udklipsholder",
       "share": "Del kalender",
       "new_event_in_calendar": "Ny begivenhed i denne kalender",
+      "move_up": "Flyt op",
+      "move_down": "Flyt ned",
       "kind": "Indhold",
       "kind_events": "Begivenheder",
       "kind_tasks": "Opgaver",
diff --git a/locales/de/common.json b/locales/de/common.json
index 3a594ea72..336c2ee6e 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -3431,6 +3431,8 @@
       "error_clear": "Kalenderereignisse konnten nicht gelöscht werden",
       "share": "Kalender freigeben",
       "new_event_in_calendar": "Neuer Termin in diesem Kalender",
+      "move_up": "Nach oben",
+      "move_down": "Nach unten",
       "kind": "Inhalt",
       "kind_events": "Termine",
       "kind_tasks": "Aufgaben",
diff --git a/locales/en/common.json b/locales/en/common.json
index 4e9de0c46..43a20e5c5 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV URL copied to clipboard",
       "share": "Share calendar",
       "new_event_in_calendar": "New event in this calendar",
+      "move_up": "Move up",
+      "move_down": "Move down",
       "kind": "Contents",
       "kind_events": "Events",
       "kind_tasks": "Tasks",
diff --git a/locales/es/common.json b/locales/es/common.json
index 3fa407970..3a1767ffb 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -3431,6 +3431,8 @@
       "error_clear": "No se pudieron borrar los eventos del calendario",
       "share": "Compartir calendario",
       "new_event_in_calendar": "Nuevo evento en este calendario",
+      "move_up": "Mover arriba",
+      "move_down": "Mover abajo",
       "kind": "Contenido",
       "kind_events": "Eventos",
       "kind_tasks": "Tareas",
diff --git a/locales/fa/common.json b/locales/fa/common.json
index 7f48db283..bbc473f9b 100644
--- a/locales/fa/common.json
+++ b/locales/fa/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "آدرس CalDAV در کلیپ‌بورد کپی شد",
       "share": "اشتراک‌گذاری تقویم",
       "new_event_in_calendar": "رویداد جدید در این تقویم",
+      "move_up": "انتقال به بالا",
+      "move_down": "انتقال به پایین",
       "kind": "محتوا",
       "kind_events": "رویدادها",
       "kind_tasks": "وظایف",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 8a455eee5..cf75b7b3f 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -3457,6 +3457,8 @@
       "error_clear": "Impossible de supprimer les événements du calendrier",
       "share": "Partager le calendrier",
       "new_event_in_calendar": "Nouvel événement dans ce calendrier",
+      "move_up": "Déplacer vers le haut",
+      "move_down": "Déplacer vers le bas",
       "kind": "Contenu",
       "kind_events": "Événements",
       "kind_tasks": "Tâches",
diff --git a/locales/he/common.json b/locales/he/common.json
index 989f495c9..682db1bd3 100644
--- a/locales/he/common.json
+++ b/locales/he/common.json
@@ -3345,6 +3345,8 @@
       "error_default": "נכשל בהגדרת לוח שנה ברירת מחדל",
       "share": "שתף לוח שנה",
       "new_event_in_calendar": "אירוע חדש בלוח שנה זה",
+      "move_up": "עבור למעלה",
+      "move_down": "עבור למטה",
       "kind": "תוכן",
       "kind_events": "אירועים",
       "kind_tasks": "משימות",
diff --git a/locales/hu/common.json b/locales/hu/common.json
index e194011f2..d9c28f66e 100644
--- a/locales/hu/common.json
+++ b/locales/hu/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV URL a vágólapra másolva",
       "share": "Naptár megosztása",
       "new_event_in_calendar": "Új esemény ebben a naptárban",
+      "move_up": "Mozgatás fel",
+      "move_down": "Mozgatás le",
       "kind": "Tartalom",
       "kind_events": "Események",
       "kind_tasks": "Feladatok",
diff --git a/locales/it/common.json b/locales/it/common.json
index b105b1967..0140e0562 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -3431,6 +3431,8 @@
       "error_clear": "Impossibile cancellare gli eventi del calendario",
       "share": "Condividi calendario",
       "new_event_in_calendar": "Nuovo evento in questo calendario",
+      "move_up": "Sposta su",
+      "move_down": "Sposta giù",
       "kind": "Contenuto",
       "kind_events": "Eventi",
       "kind_tasks": "Attività",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index a6f5508ee..48ece6640 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -3431,6 +3431,8 @@
       "error_clear": "カレンダーイベントの削除に失敗しました",
       "share": "カレンダーを共有",
       "new_event_in_calendar": "このカレンダーに新規イベント",
+      "move_up": "上に移動",
+      "move_down": "下に移動",
       "kind": "内容",
       "kind_events": "イベント",
       "kind_tasks": "タスク",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index eb0f59305..65630324f 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "CalDAV URL이 클립보드에 복사되었어요",
       "share": "캘린더 공유",
       "new_event_in_calendar": "이 캘린더에 새 일정",
+      "move_up": "위로 이동",
+      "move_down": "아래로 이동",
       "kind": "내용",
       "kind_events": "일정",
       "kind_tasks": "할 일",
diff --git a/locales/lv/common.json b/locales/lv/common.json
index 34ae3d488..4b0dd2507 100644
--- a/locales/lv/common.json
+++ b/locales/lv/common.json
@@ -3430,6 +3430,8 @@
       "url_copied": "CalDAV URL nokopēts starpliktuvē",
       "share": "Kopīgot kalendāru",
       "new_event_in_calendar": "Jauns notikums šajā kalendārā",
+      "move_up": "Pārvietot uz augšu",
+      "move_down": "Pārvietot uz leju",
       "kind": "Saturs",
       "kind_events": "Notikumi",
       "kind_tasks": "Uzdevumi",
diff --git a/locales/mn/common.json b/locales/mn/common.json
index 439d91890..47c49a426 100644
--- a/locales/mn/common.json
+++ b/locales/mn/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV URL-г санах ой руу хуулсан",
       "share": "Хуанлигаа хуваалцах",
       "new_event_in_calendar": "Энэ хуанли дахь шинэ арга хэмжээ",
+      "move_up": "Дээш хөдлөх",
+      "move_down": "Доошоо шилжих",
       "kind": "Агуулга",
       "kind_events": "Үйл явдлууд",
       "kind_tasks": "Даалгаврууд",
diff --git a/locales/nb/common.json b/locales/nb/common.json
index 4b4258b96..d5f591a66 100644
--- a/locales/nb/common.json
+++ b/locales/nb/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV-URL kopiert til utklippstavlen",
       "share": "Del kalender",
       "new_event_in_calendar": "Ny hendelse i denne kalenderen",
+      "move_up": "Flytt opp",
+      "move_down": "Flytt ned",
       "kind": "Innhold",
       "kind_events": "Hendelser",
       "kind_tasks": "Oppgaver",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 6185127f7..377b5d7dd 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -3431,6 +3431,8 @@
       "error_clear": "Kan agendagebeurtenissen niet verwijderen",
       "share": "Agenda delen",
       "new_event_in_calendar": "Nieuwe afspraak in deze agenda",
+      "move_up": "Omhoog verplaatsen",
+      "move_down": "Omlaag verplaatsen",
       "kind": "Inhoud",
       "kind_events": "Afspraken",
       "kind_tasks": "Taken",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index e65a28bad..f816f9880 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "Adres URL CalDAV skopiowano do schowka",
       "share": "Udostępnij kalendarz",
       "new_event_in_calendar": "Nowe wydarzenie w tym kalendarzu",
+      "move_up": "Przesuń w górę",
+      "move_down": "Przesuń w dół",
       "kind": "Zawartość",
       "kind_events": "Wydarzenia",
       "kind_tasks": "Zadania",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 29cf6f142..c9aacf653 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -3457,6 +3457,8 @@
       "error_clear": "Falha ao limpar os eventos do calendário",
       "share": "Compartilhar calendário",
       "new_event_in_calendar": "Novo evento neste calendário",
+      "move_up": "Mover para cima",
+      "move_down": "Mover para baixo",
       "kind": "Conteúdo",
       "kind_events": "Eventos",
       "kind_tasks": "Tarefas",
diff --git a/locales/ro/common.json b/locales/ro/common.json
index d0910b0ed..cbe38b18d 100644
--- a/locales/ro/common.json
+++ b/locales/ro/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV URL copiat în clipboard",
       "share": "Partajare calendar",
       "new_event_in_calendar": "Eveniment nou în acest calendar",
+      "move_up": "Mutați în sus",
+      "move_down": "Mutați în jos",
       "kind": "Conținut",
       "kind_events": "Evenimente",
       "kind_tasks": "Sarcini",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index 51fc6cb43..c3052f9ca 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "CalDAV URL скопирован в буфер обмена",
       "share": "Поделиться календарём",
       "new_event_in_calendar": "Новое событие в этом календаре",
+      "move_up": "Переместить вверх",
+      "move_down": "Переместить вниз",
       "kind": "Содержимое",
       "kind_events": "События",
       "kind_tasks": "Задачи",
diff --git a/locales/sk/common.json b/locales/sk/common.json
index bf789b23d..fc416937b 100644
--- a/locales/sk/common.json
+++ b/locales/sk/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "URL CalDAV skopírovaná do schránky",
       "share": "Zdieľať kalendár",
       "new_event_in_calendar": "Nová udalosť v tomto kalendári",
+      "move_up": "Posunúť nahor",
+      "move_down": "Posunúť nadol",
       "kind": "Obsah",
       "kind_events": "Udalosti",
       "kind_tasks": "Úlohy",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index be75c33a0..6b9db1fea 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -3457,6 +3457,8 @@
       "url_copied": "CalDAV URL'si panoya kopyalandı",
       "share": "Takvimi paylaş",
       "new_event_in_calendar": "Bu takvimde yeni etkinlik",
+      "move_up": "Yukarı taşı",
+      "move_down": "Aşağı taşı",
       "kind": "İçerik",
       "kind_events": "Etkinlikler",
       "kind_tasks": "Görevler",
diff --git a/locales/uk/common.json b/locales/uk/common.json
index aab213403..c9b4534fb 100644
--- a/locales/uk/common.json
+++ b/locales/uk/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "URL-адресу CalDAV скопійовано в буфер обміну",
       "share": "Поділитися календарем",
       "new_event_in_calendar": "Нова подія в цьому календарі",
+      "move_up": "Перемістити вгору",
+      "move_down": "Перемістити вниз",
       "kind": "Вміст",
       "kind_events": "Події",
       "kind_tasks": "Завдання",
diff --git a/locales/zh-TW/common.json b/locales/zh-TW/common.json
index 5dcdfd143..bc9cd3c5f 100644
--- a/locales/zh-TW/common.json
+++ b/locales/zh-TW/common.json
@@ -3458,6 +3458,8 @@
       "url_copied": "CalDAV URL 已複製到剪貼簿",
       "share": "分享行事曆",
       "new_event_in_calendar": "在此行事曆中新增活動",
+      "move_up": "上移",
+      "move_down": "下移",
       "kind": "內容",
       "kind_events": "活動",
       "kind_tasks": "任務",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index 6aeb9a007..3ef423e83 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -3431,6 +3431,8 @@
       "url_copied": "CalDAV URL 已复制到剪贴板",
       "share": "共享日历",
       "new_event_in_calendar": "在此日历中新建事件",
+      "move_up": "上移",
+      "move_down": "下移",
       "kind": "内容",
       "kind_events": "日程",
       "kind_tasks": "任务",
diff --git a/stores/__tests__/calendar-store-sort-order.test.ts b/stores/__tests__/calendar-store-sort-order.test.ts
new file mode 100644
index 000000000..48cb4ac66
--- /dev/null
+++ b/stores/__tests__/calendar-store-sort-order.test.ts
@@ -0,0 +1,121 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useCalendarStore } from '../calendar-store';
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
+import type { Calendar } from '@/lib/jmap/types';
+
+function cal(overrides: Partial<Calendar>): Calendar {
+  return {
+    id: 'c', name: 'Cal', color: null, sortOrder: 0, isSubscribed: true, isVisible: true,
+    isDefault: false, includeInAvailability: 'all', timeZone: null, shareWith: null,
+    myRights: null,
+    ...overrides,
+  } as unknown as Calendar;
+}
+
+const names = () => useCalendarStore.getState().calendars.map((c) => c.name);
+
+beforeEach(() => {
+  useCalendarStore.setState({ calendars: [], selectedCalendarIds: [], error: null });
+});
+
+describe('calendar order', () => {
+  it('fetchCalendars lists the calendars by sortOrder, not in server order', async () => {
+    const client = {
+      getAllCalendarsWithFailures: vi.fn().mockResolvedValue({
+        calendars: [
+          cal({ id: 'b', name: 'Default', sortOrder: 20 }),
+          cal({ id: 'n', name: 'Holidays', sortOrder: 30 }),
+          cal({ id: 'e', name: 'Work', sortOrder: 1 }),
+        ],
+        failedAccountIds: [],
+      }),
+    } as unknown as IJMAPClient;
+
+    await useCalendarStore.getState().fetchCalendars(client);
+
+    expect(names()).toEqual(['Work', 'Default', 'Holidays']);
+  });
+
+  it('updateCalendar re-sorts when a calendar is renamed', async () => {
+    useCalendarStore.setState({
+      calendars: [cal({ id: 'a', name: 'Alpha' }), cal({ id: 'b', name: 'Beta' })],
+    });
+    const client = { updateCalendar: vi.fn().mockResolvedValue(undefined) } as unknown as IJMAPClient;
+
+    await useCalendarStore.getState().updateCalendar(client, 'a', { name: 'Zulu' });
+
+    expect(names()).toEqual(['Beta', 'Zulu']);
+  });
+
+  it('reorderCalendars writes only the sortOrders that change and re-sorts at once', async () => {
+    useCalendarStore.setState({
+      calendars: [
+        cal({ id: 'a', name: 'A', sortOrder: 1 }),
+        cal({ id: 'b', name: 'B', sortOrder: 2 }),
+        cal({ id: 'c', name: 'C', sortOrder: 3 }),
+      ],
+    });
+    const updateCalendar = vi.fn().mockResolvedValue(undefined);
+    const client = { updateCalendar } as unknown as IJMAPClient;
+
+    const done = useCalendarStore.getState().reorderCalendars(client, ['c', 'a', 'b']);
+    // Optimistic: the new order shows before the server answers.
+    expect(names()).toEqual(['C', 'A', 'B']);
+    await done;
+
+    expect(updateCalendar.mock.calls).toEqual([
+      ['c', { sortOrder: 1 }, undefined],
+      ['a', { sortOrder: 2 }, undefined],
+      ['b', { sortOrder: 3 }, undefined],
+    ]);
+    expect(useCalendarStore.getState().calendars.map((c) => c.sortOrder)).toEqual([1, 2, 3]);
+  });
+
+  it('reorderCalendars sends shared-account calendars their raw id and account', async () => {
+    useCalendarStore.setState({
+      calendars: [
+        cal({ id: 'x:a', originalId: 'a', name: 'A', sortOrder: 1, isShared: true, accountId: 'x' }),
+        cal({ id: 'x:b', originalId: 'b', name: 'B', sortOrder: 2, isShared: true, accountId: 'x' }),
+      ],
+    });
+    const updateCalendar = vi.fn().mockResolvedValue(undefined);
+
+    await useCalendarStore.getState().reorderCalendars({ updateCalendar } as unknown as IJMAPClient, ['x:b', 'x:a']);
+
+    expect(updateCalendar.mock.calls).toEqual([
+      ['b', { sortOrder: 1 }, 'x'],
+      ['a', { sortOrder: 2 }, 'x'],
+    ]);
+  });
+
+  it('after a failed write, shows the order the server holds and rethrows', async () => {
+    useCalendarStore.setState({
+      calendars: [
+        cal({ id: 'a', name: 'A', sortOrder: 1 }),
+        cal({ id: 'b', name: 'B', sortOrder: 2 }),
+        cal({ id: 'c', name: 'C', sortOrder: 3 }),
+      ],
+    });
+    const updateCalendar = vi.fn()
+      .mockResolvedValueOnce(undefined)
+      .mockRejectedValueOnce(new Error('forbidden'));
+    const client = { updateCalendar } as unknown as IJMAPClient;
+
+    await expect(useCalendarStore.getState().reorderCalendars(client, ['c', 'a', 'b'])).rejects.toThrow('forbidden');
+
+    // c got sortOrder 1 (saved), a kept 1, b kept 2: c and a tie, sorted by name.
+    expect(useCalendarStore.getState().calendars.map((c) => [c.id, c.sortOrder])).toEqual([
+      ['a', 1], ['c', 1], ['b', 2],
+    ]);
+    expect(useCalendarStore.getState().error).toBe('Failed to reorder calendars');
+  });
+
+  it('reorderCalendars does nothing when the order is unchanged', async () => {
+    useCalendarStore.setState({ calendars: [cal({ id: 'a', sortOrder: 1 }), cal({ id: 'b', sortOrder: 2 })] });
+    const updateCalendar = vi.fn();
+
+    await useCalendarStore.getState().reorderCalendars({ updateCalendar } as unknown as IJMAPClient, ['a', 'b']);
+
+    expect(updateCalendar).not.toHaveBeenCalled();
+  });
+});
diff --git a/stores/calendar-store.ts b/stores/calendar-store.ts
index 18a586946..6389b1a9a 100644
--- a/stores/calendar-store.ts
+++ b/stores/calendar-store.ts
@@ -25,6 +25,7 @@ import { generateUUID } from '@/lib/utils';
 import { apiFetch } from '@/lib/browser-navigation';
 import { explainServerAuthError } from '@/lib/server-auth-status';
 import { BIRTHDAY_CALENDAR_ID } from '@/lib/birthday-calendar';
+import { sortCalendars, sortOrderUpdates } from '@/lib/calendar-sort';
 import { getClientByLocalAccountId } from './client-registry';
 import { calendarHooks } from '@/lib/plugin-hooks';
 import { eventToView } from '@/lib/plugin-projection';
@@ -595,6 +596,8 @@ interface CalendarStore {
   rsvpEvent: (client: IJMAPClient, eventId: string, participantId: string, status: string, replyTo?: Record<string, string> | null, scope?: 'occurrence' | 'series') => Promise<boolean>;
   importEvents: (client: IJMAPClient, events: Partial<CalendarEvent>[], calendarId: string) => Promise<number | null>;
   updateCalendar: (client: IJMAPClient, calendarId: string, updates: Partial<Calendar>) => Promise<void>;
+  /** Store `orderedIds` in that order by renumbering their sortOrder. */
+  reorderCalendars: (client: IJMAPClient, orderedIds: string[]) => Promise<void>;
   setDefaultCalendar: (client: IJMAPClient, calendarId: string) => Promise<void>;
   shareCalendar: (client: IJMAPClient, calendarId: string, principalId: string, rights: CalendarRights | null) => Promise<void>;
   createCalendar: (client: IJMAPClient, calendar: Partial<Calendar>, options?: CreateCalendarOptions) => Promise<Calendar | null>;
@@ -674,7 +677,8 @@ export const useCalendarStore = create<CalendarStore>()(
         try {
           // Throws when the primary account fails, so a failed fetch leaves the
           // list and the selection as they were.
-          const { calendars, failedAccountIds } = await client.getAllCalendarsWithFailures();
+          const { calendars: fetched, failedAccountIds } = await client.getAllCalendarsWithFailures();
+          const calendars = sortCalendars(fetched);
           // Default the visible selection to event calendars only - tasks-only
           // calendars stay out of the event grid.
           const defaultSelected = calendars.filter(c => !c.isTasksOnly).map(c => c.id);
@@ -752,7 +756,7 @@ export const useCalendarStore = create<CalendarStore>()(
               }
             }),
           );
-          const calendars = results.flat();
+          const calendars = sortCalendars(results.flat());
           set({
             calendars,
             isLoading: false,
@@ -1122,9 +1126,9 @@ export const useCalendarStore = create<CalendarStore>()(
           client = resolveAccountClient(client, cal?.localAccountId);
           await client.updateCalendar(realId, updates, targetAccountId);
           set((state) => ({
-            calendars: state.calendars.map(c =>
+            calendars: sortCalendars(state.calendars.map(c =>
               c.id === calendarId ? { ...c, ...updates } : c
-            ),
+            )),
           }));
           void calendarHooks.onCalendarChange.emit({ calendarId, change: 'updated' });
         } catch (error) {
@@ -1134,6 +1138,36 @@ export const useCalendarStore = create<CalendarStore>()(
         }
       },
 
+      reorderCalendars: async (client, orderedIds) => {
+        const updates = sortOrderUpdates(get().calendars, orderedIds);
+        if (updates.length === 0) return;
+        const before = get().calendars;
+        const withSortOrders = (sortOrders: Map<string, number>) => sortCalendars(before.map((c) =>
+          sortOrders.has(c.id) ? { ...c, sortOrder: sortOrders.get(c.id)! } : c
+        ));
+        // Optimistic, so the list moves at once.
+        set({ error: null, calendars: withSortOrders(new Map(updates.map((u) => [u.id, u.sortOrder]))) });
+        const saved = new Map<string, number>();
+        try {
+          for (const { id, sortOrder } of updates) {
+            const cal = before.find(c => c.id === id);
+            const realId = cal?.originalId || stripLocalAccountPrefix(id, cal?.localAccountId);
+            await resolveAccountClient(client, cal?.localAccountId).updateCalendar(realId, { sortOrder }, cal?.accountId);
+            saved.set(id, sortOrder);
+          }
+        } catch (error) {
+          debug.error('Failed to reorder calendars:', error);
+          // Show the order the server now holds: the moves saved before the
+          // failure stay, the rest are undone.
+          set({ error: 'Failed to reorder calendars', calendars: withSortOrders(saved) });
+          throw error;
+        } finally {
+          for (const calendarId of saved.keys()) {
+            void calendarHooks.onCalendarChange.emit({ calendarId, change: 'updated' });
+          }
+        }
+      },
+
       setDefaultCalendar: async (client, calendarId) => {
         set({ error: null });
         try {
@@ -1197,7 +1231,7 @@ export const useCalendarStore = create<CalendarStore>()(
           // Added with its raw id; the next aggregated refetch namespaces it and
           // reconcileSelectedIds() remaps the selection so it stays visible.
           set((state) => ({
-            calendars: [...state.calendars, created],
+            calendars: sortCalendars([...state.calendars, created]),
             selectedCalendarIds: [...state.selectedCalendarIds, created.id],
           }));
           void calendarHooks.onCalendarChange.emit({ calendarId: created.id, change: 'created' });
@@ -1368,7 +1402,7 @@ export const useCalendarStore = create<CalendarStore>()(
           };
 
           set((state) => ({
-            calendars: [...state.calendars, calendar!],
+            calendars: sortCalendars([...state.calendars, calendar!]),
             selectedCalendarIds: [...state.selectedCalendarIds, calendar!.id],
             icalSubscriptions: [...state.icalSubscriptions, subscription],
           }));
@@ -1432,14 +1466,14 @@ export const useCalendarStore = create<CalendarStore>()(
         const updated = { ...sub, ...normalizedUpdates };
         set((state) => ({
           icalSubscriptions: state.icalSubscriptions.map(s => s.id === subscriptionId ? updated : s),
-          calendars: state.calendars.map(c => {
+          calendars: sortCalendars(state.calendars.map(c => {
             if (c.id !== sub.calendarId) return c;
             return {
               ...c,
               ...(normalizedUpdates.name ? { name: normalizedUpdates.name } : {}),
               ...(normalizedUpdates.color ? { color: normalizedUpdates.color } : {}),
             };
-          }),
+          })),
         }));
         void calendarHooks.onICalSubscriptionChange.emit({ subscriptionId, change: 'updated' });