Migrate Calendar interface patterns

webui/src/features/calendar/CalendarSettingsPanel.tsx

@@ -4,8 +4,10 @@ import {
   Button,
   Card,
   DismissibleAlert,
+  DocumentationHelpLink,
   FormField,
   ToggleSwitch,
+  useUnsavedDraftGuard,
   type ApiSettings,
   type AuthInfo
 } from "@govoplan/core-webui";
@@ -14,6 +16,10 @@ import {
   updateCalendarViewPreferences,
   type CalendarViewPreferences
 } from "../../api/calendar";
+import {
+  CALENDAR_DOCUMENTATION,
+  CALENDAR_I18N,
+} from "./interfacePatterns";
 
 type CalendarPreferenceDraft = Pick<
   CalendarViewPreferences,
@@ -74,11 +80,11 @@ export default function CalendarSettingsPanel({
     }
   }
 
-  async function savePreferences() {
+  async function savePreferences(): Promise<boolean> {
     if (draft.workday_end_hour <= draft.workday_start_hour) {
       setTone("warning");
       setMessage("Workday end must be after workday start.");
-      return;
+      return false;
     }
     setSaving(true);
     setMessage("");
@@ -92,17 +98,36 @@ export default function CalendarSettingsPanel({
       window.dispatchEvent(
         new CustomEvent("govoplan:calendar-preferences-changed")
       );
+      return true;
     } catch (error) {
       setTone("warning");
       setMessage(errorText(error));
+      return false;
     } finally {
       setSaving(false);
     }
   }
 
   const disabled = loading || saving;
+  const saveDisabledReason = loading
+    ? CALENDAR_I18N.loading
+    : saving
+      ? CALENDAR_I18N.saving
+      : !dirty
+        ? CALENDAR_I18N.noChanges
+        : undefined;
+
+  useUnsavedDraftGuard({
+    dirty,
+    onSave: savePreferences,
+    onDiscard: () => setDraft(loaded ?? FALLBACK_DRAFT)
+  });
+
   return (
     <div className="dashboard-grid settings-dashboard-grid calendar-settings-panel">
+      <div className="calendar-settings-documentation">
+        <DocumentationHelpLink reference={CALENDAR_DOCUMENTATION} />
+      </div>
       <Card title="Calendar display">
         <div className="form-grid">
           <ToggleSwitch
@@ -203,7 +228,8 @@ export default function CalendarSettingsPanel({
             <Button
               type="button"
               variant="primary"
-              disabled={disabled || !dirty}
+              disabled={Boolean(saveDisabledReason)}
+              disabledReason={saveDisabledReason}
               onClick={() => void savePreferences()}
             >
               <Save size={16} /> {saving ? "Saving" : "Save preferences"}