From 35671dec733744c2e8fb3f49d63c8cb175fdf2c3 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 13:17:28 +0200
Subject: [PATCH] Adopt shared WebUI structural primitives

---
 .../features/calendar/CalendarEventDialog.tsx | 12 +++++-----
 .../calendar/CalendarMigrationDialog.tsx      |  5 ++--
 .../calendar/CalendarOutboxDialog.tsx         |  2 +-
 webui/src/styles/calendar.css                 | 23 -------------------
 4 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/webui/src/features/calendar/CalendarEventDialog.tsx b/webui/src/features/calendar/CalendarEventDialog.tsx
index 4c0e41c..319200a 100644
--- a/webui/src/features/calendar/CalendarEventDialog.tsx
+++ b/webui/src/features/calendar/CalendarEventDialog.tsx
@@ -355,7 +355,7 @@ export function CalendarEventDialog({
           <input value={location} onChange={(item) => setLocation(item.target.value)} maxLength={500} disabled={saving || !canWrite} />
         </label>
         <ToggleSwitch label="i18n:govoplan-calendar.whole_day.951c82d1" checked={allDay} disabled={saving || !canWrite} onChange={handleAllDayChange} />
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <label>
             <span>i18n:govoplan-calendar.start_date.ff99f5b5</span>
             <DateField value={startDate} onChange={handleStartDateChange} required disabled={saving || !canWrite} />
@@ -364,9 +364,9 @@ export function CalendarEventDialog({
             <span>i18n:govoplan-calendar.start_time.88d8206d</span>
             <TimeField value={startTime} onChange={handleStartTimeChange} disabled={saving || !canWrite || allDay} />
           </label>
-        </div>
+        </FormGrid>
         {!allDay &&
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
             <label>
               <span>i18n:govoplan-calendar.end_mode.5a06de37</span>
               <select value={endMode} onChange={(item) => setEndMode(item.target.value as CalendarEventEndMode)} disabled={saving || !canWrite}>
@@ -380,10 +380,10 @@ export function CalendarEventDialog({
                 <input type="number" min={1} step={60} value={durationSeconds} onChange={(item) => setDurationSeconds(item.target.value)} required disabled={saving || !canWrite} />
               </label>
           }
-          </div>
+        </FormGrid>
         }
         {(allDay || endMode === "end") &&
-        <div className="calendar-dialog-date-row">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
             <label>
               <span>i18n:govoplan-calendar.end_date.89d10cd6</span>
               <DateField value={endDate} min={startDate} onChange={setEndDate} required disabled={saving || !canWrite} />
@@ -392,7 +392,7 @@ export function CalendarEventDialog({
               <span>i18n:govoplan-calendar.end_time.cd7800da</span>
               <TimeField value={endTime} min={!allDay && startDate === endDate ? startTime : undefined} onChange={setEndTime} disabled={saving || !canWrite || allDay} />
             </label>
-          </div>
+        </FormGrid>
         }
         <details className="calendar-advanced-settings calendar-vevent-details">
           <summary>i18n:govoplan-calendar.vevent.9cf5be75</summary>
diff --git a/webui/src/features/calendar/CalendarMigrationDialog.tsx b/webui/src/features/calendar/CalendarMigrationDialog.tsx
index 58e4acf..299e837 100644
--- a/webui/src/features/calendar/CalendarMigrationDialog.tsx
+++ b/webui/src/features/calendar/CalendarMigrationDialog.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { RefreshCw, XCircle } from "lucide-react";
 import {
+  ActionToolbar,
   Button,
   Dialog,
   DismissibleAlert,
@@ -120,13 +121,13 @@ export function CalendarMigrationDialog({
           )}
           {batch && (
             <>
-              <div className="calendar-migration-heading">
+              <ActionToolbar surface="section-header" className="calendar-migration-heading">
                 <div>
                   <strong>{phaseLabel(batch.phase)}</strong>
                   <span>Updated {dateTimeLabel(new Date(batch.updated_at))}</span>
                 </div>
                 <StatusBadge status={batch.status} label={statusLabel(batch.status)} />
-              </div>
+              </ActionToolbar>
               <progress value={progress} max={100} aria-label="Remote move progress" />
               <dl className="calendar-migration-summary">
                 <div><dt>Events</dt><dd>{batch.total_events}</dd></div>
diff --git a/webui/src/features/calendar/CalendarOutboxDialog.tsx b/webui/src/features/calendar/CalendarOutboxDialog.tsx
index f06e785..f7c6032 100644
--- a/webui/src/features/calendar/CalendarOutboxDialog.tsx
+++ b/webui/src/features/calendar/CalendarOutboxDialog.tsx
@@ -113,7 +113,7 @@ export function CalendarOutboxDialog({
           <p className="calendar-outbox-calendar-name">{calendar.name}</p>
           <DocumentationHelpLink reference={CALENDAR_RECOVERY_DOCUMENTATION} />
           {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
-          <ActionToolbar className="calendar-outbox-toolbar">
+          <ActionToolbar justify="between" className="calendar-outbox-toolbar">
             <SegmentedControl<OutboxFilter>
               value={filter}
               ariaLabel="i18n:govoplan-calendar.outbox_filter.8305af40"
diff --git a/webui/src/styles/calendar.css b/webui/src/styles/calendar.css
index a286342..d8a970f 100644
--- a/webui/src/styles/calendar.css
+++ b/webui/src/styles/calendar.css
@@ -895,13 +895,6 @@
   cursor: not-allowed;
 }
 
-.calendar-dialog-row,
-.calendar-dialog-date-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
 .calendar-dialog-name-color-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 142px;
@@ -1117,13 +1110,6 @@
   font-weight: 700;
 }
 
-.calendar-outbox-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 .calendar-outbox-summary {
   display: flex;
   align-items: center;
@@ -1208,13 +1194,6 @@
   min-height: 240px;
 }
 
-.calendar-migration-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 .calendar-migration-heading > div {
   display: grid;
   gap: 3px;
@@ -1504,8 +1483,6 @@
     max-width: none;
   }
 
-  .calendar-dialog-row,
-  .calendar-dialog-date-row,
   .calendar-dialog-name-color-row,
   .calendar-sync-status-panel dl {
     grid-template-columns: 1fr;