Migrate Calendar interface patterns

webui/src/features/calendar/CalendarPage.tsx

@@ -12,6 +12,7 @@ import {
   AdminIconButton,
   Button,
   DismissibleAlert,
+  DocumentationHelpLink,
   LoadingFrame,
   SegmentedControl,
   TableActionGroup,
@@ -98,6 +99,10 @@ import {
   type CalendarViewPreferences,
   type ContinuousViewport,
 } from "./calendarViewModel";
+import {
+  CALENDAR_DOCUMENTATION,
+  CALENDAR_I18N,
+} from "./interfacePatterns";
 
 type EventEditScope = "occurrence" | "series";
 type EventDialogState =
@@ -797,7 +802,8 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
                         label: syncing ? i18nMessage("i18n:govoplan-calendar.syncing_value.ca80b487", { value0: calendar.name }) : i18nMessage("i18n:govoplan-calendar.sync_value.72e4ba66", { value0: calendar.name }),
                         icon: <RefreshCw size={15} className={syncing ? "calendar-sync-spin" : undefined} />,
                         onClick: () => void handleSyncSource(source),
-                        disabled: saving || syncing
+                        disabled: saving || syncing,
+                        disabledReason: saving || syncing ? CALENDAR_I18N.saving : undefined
                       },
                       (canManageCalendars || canDeleteCalendars) && {
                         id: "edit",
@@ -815,7 +821,7 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
             }
             {canManageCalendars &&
             <div className="calendar-create-action">
-                <Button type="button" onClick={() => setCalendarDialog({ kind: "create" })} disabled={saving}>
+                <Button type="button" onClick={() => setCalendarDialog({ kind: "create" })} disabled={saving} disabledReason={saving ? CALENDAR_I18N.saving : undefined}>
                   <Plus size={16} /> i18n:govoplan-calendar.add_calendar.124c55eb
                 </Button>
               </div>
@@ -889,13 +895,14 @@ export default function CalendarPage({ settings, auth }: {settings: ApiSettings;
             </div>
 
             <div className="calendar-toolbar-right">
+              <DocumentationHelpLink reference={CALENDAR_DOCUMENTATION} />
               <AdminIconButton
                 label="i18n:govoplan-calendar.refresh.56e3badc"
                 icon={<RefreshCw size={18} />}
                 onClick={() => void loadEvents()}
               />
               {canWrite &&
-              <Button type="button" variant="primary" onClick={() => setEventDialog({ kind: "create" })} disabled={!targetCalendarId}>
+              <Button type="button" variant="primary" onClick={() => setEventDialog({ kind: "create" })} disabled={!targetCalendarId} disabledReason={!targetCalendarId ? CALENDAR_I18N.targetCalendarRequired : undefined}>
                   <Plus size={17} /> i18n:govoplan-calendar.new.6403f2b7
                 </Button>
               }