Add CalDAV outbox recovery UI

webui/src/features/calendar/CalendarPage.tsx

@@ -57,6 +57,7 @@ import {
   type CalendarDeleteDialogState,
 } from "./CalendarCollectionDialogs";
 import { CalendarEventDialog } from "./CalendarEventDialog";
+import { CalendarOutboxDialog } from "./CalendarOutboxDialog";
 import {
   CalendarTimeGrid,
   CalendarWeekRows,
@@ -132,6 +133,7 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
   const [eventDialog, setEventDialog] = useState<EventDialogState | null>(null);
   const [calendarDialog, setCalendarDialog] = useState<CalendarCollectionDialogState | null>(null);
   const [calendarDeleteDialog, setCalendarDeleteDialog] = useState<CalendarDeleteDialogState | null>(null);
+  const [outboxDialog, setOutboxDialog] = useState<{ calendar: CalendarCollection; source: CalendarSyncSource } | null>(null);
   const [syncingSourceId, setSyncingSourceId] = useState("");
   const [continuousViewport, setContinuousViewport] = useState<ContinuousViewport>({ scrollTop: 0, height: 0 });
   const [draggingEventId, setDraggingEventId] = useState("");
@@ -1005,8 +1007,21 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
         onSave={handleCalendarSave}
         onRequestDelete={(calendar, eventCount, loadingEventCount) => openCalendarDelete(calendar, eventCount, loadingEventCount)}
         onSync={handleSyncSource}
+        onOpenOutbox={(source) => {
+          if (calendarDialog.kind === "edit") {
+            setOutboxDialog({ calendar: calendarDialog.calendar, source });
+          }
+        }}
         onDiscover={handleCalDavDiscovery} />
 
+      }
+      {outboxDialog &&
+      <CalendarOutboxDialog
+        settings={settings}
+        calendar={outboxDialog.calendar}
+        source={outboxDialog.source}
+        onClose={() => setOutboxDialog(null)} />
+
       }
       {calendarDeleteDialog &&
       <CalendarCollectionDeleteDialog