fix: list company calendars in the calendar list on phones

components/calendar/__tests__/calendar-app.test.tsx

@@ -6,6 +6,8 @@ import { useAuthStore } from '@/stores/auth-store';
 import { useSettingsStore } from '@/stores/settings-store';
 import { useToastStore } from '@/stores/toast-store';
 import { useTaskStore } from '@/stores/task-store';
+import { usePolicyStore } from '@/stores/policy-store';
+import { DEFAULT_ORGANISATION_POLICY } from '@/lib/admin/organisation-policy';
 
 // The whole calendar page, with the shell around it stubbed out and the
 // stores holding a fixed set of calendars and events.
@@ -842,3 +844,23 @@ describe('CalendarApp day view tasks', () => {
     }
   });
 });
+
+describe('CalendarApp company calendars on a phone', () => {
+  it('lists them in the toolbar\'s calendar list, where hiding one is the synced choice', async () => {
+    media.mobile = true;
+    media.desktop = false;
+    const policy = usePolicyStore.getState().policy;
+    usePolicyStore.setState({ policy: { ...policy, organisation: { ...DEFAULT_ORGANISATION_POLICY, calendars: { feeds: [{ id: 'hol', name: 'Holidays', url: '', urlHeld: true, color: '#16a34a', refreshMinutes: 60 }], freeBusyGroup: '' } } } });
+    useSettingsStore.setState({ hiddenCompanyCalendars: [] } as never);
+    try {
+      renderApp();
+      // The toolbar's list (the sidebar heading has the same words).
+      fireEvent.click(document.querySelector<HTMLElement>('button[aria-label="my_calendars"]')!);
+      const list = (await screen.findByRole('heading', { name: 'my_calendars' })).parentElement!;
+      fireEvent.click(within(list).getByRole('button', { name: 'Holidays' }));
+      expect(useSettingsStore.getState().hiddenCompanyCalendars).toEqual(['hol']);
+    } finally {
+      usePolicyStore.setState({ policy });
+    }
+  });
+});

components/calendar/calendar-app.tsx

@@ -1719,6 +1719,12 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
     return expandRecurringEvents(company.events.filter((e) => !Object.keys(e.calendarIds).some((id) => hidden.has(id))), dateRange.start, dateRange.end);
   }, [company.events, company.hiddenIds, dateRange]);
 
+  // The phone toolbar's calendar list: the user's own and the company calendars.
+  const toolbarCalendars = useMemo(
+    () => (company.calendars.length > 0 ? [...displayCalendars, ...company.calendars] : displayCalendars),
+    [displayCalendars, company.calendars],
+  );
+
   const allCalendars = useMemo(() => {
     const withBirthdays = showBirthdayCalendar
       ? [...displayCalendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)]
@@ -2061,9 +2067,9 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps =
       onPrint={() => { void requestPrint({ kind: "calendar-view" }); }}
       isMobile={isMobile}
       onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined}
-      calendars={displayCalendars}
-      selectedCalendarIds={selectedCalendarIds}
-      onToggleVisibility={toggleCalendarVisibility}
+      calendars={toolbarCalendars}
+      selectedCalendarIds={shownCalendarIds}
+      onToggleVisibility={toggleShownCalendar}
       enableCalendarTasks={enableCalendarTasks}
       onMenuClick={isNarrow ? () => setNarrowSidebarOpen(true) : isMobile ? undefined : toggleSidebarCollapsed}
       sidebarOpen={isNarrow ? narrowSidebarOpen : !sidebarCollapsed}