From ec538f524de1c9eab2ec38af1cca619e9e86d443 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Mon, 20 Jul 2026 18:10:48 +0200
Subject: [PATCH] feat(scheduling): compose request editor from core UI

---
 .../test-scheduling-page-structure.mjs        |  31 +-
 .../features/scheduling/SchedulingPage.tsx    | 964 ++++++++++--------
 webui/src/i18n/generatedTranslations.ts       |   2 +
 webui/src/styles/scheduling.css               | 380 ++-----
 4 files changed, 702 insertions(+), 675 deletions(-)

diff --git a/webui/scripts/test-scheduling-page-structure.mjs b/webui/scripts/test-scheduling-page-structure.mjs
index 1135ad0..07e2b6d 100644
--- a/webui/scripts/test-scheduling-page-structure.mjs
+++ b/webui/scripts/test-scheduling-page-structure.mjs
@@ -11,6 +11,8 @@ assert.match(page, /usePlatformUiCapability<CalendarPickerUiCapability>\("calend
 assert.match(page, /hasScope\(auth, "calendar:calendar:read"\)/);
 assert.match(page, /Boolean\(calendarPickerCapability\) && canReadCalendars && canReadAvailability && canWriteCalendarEvent/);
 assert.doesNotMatch(page, /@govoplan\/calendar-webui|govoplan-calendar\/webui/);
+assert.match(page, /Card,[\s\S]*DataGrid,[\s\S]*DataGridEmptyAction,[\s\S]*DataGridRowActions,[\s\S]*ModuleSubnav,[\s\S]*ToggleSwitch,[\s\S]*from "@govoplan\/core-webui"/);
+assert.doesNotMatch(page, /@govoplan\/core-webui\/src\//);
 assert.match(page, /className="scheduling-full-editor"/);
 assert.match(page, /className="scheduling-page-actions"/);
 
@@ -19,10 +21,35 @@ const editorActions = page.slice(
   page.indexOf('</div>', page.indexOf('<div className="scheduling-page-actions">'))
 );
 assert.ok(editorActions.indexOf("I18N.discard") < editorActions.indexOf("I18N.save"));
-assert.match(page, /<Plus aria-hidden="true" size=\{16\} \/> \{I18N\.addRequest\}/);
+assert.match(editorActions, /form="scheduling-create-form"/);
+
+const createBranchStart = page.indexOf("  if (creating) {");
+const createReturnStart = page.indexOf("\n    return (", createBranchStart);
+const browseBranchStart = page.indexOf("\n  return (", createReturnStart + 1);
+const createBranch = page.slice(createBranchStart, browseBranchStart);
+const browseBranch = page.slice(browseBranchStart);
+assert.match(createBranch, /<ModuleSubnav/);
+assert.match(createBranch, /className="scheduling-create-subnav"/);
+assert.doesNotMatch(browseBranch, /scheduling-sidebar|<aside/);
+
+assert.match(browseBranch, /<h1>\{I18N\.requests\}<\/h1>/);
+assert.match(browseBranch, /<Plus aria-hidden="true" size=\{16\} \/> \{I18N\.add\}/);
 assert.match(page, /title=\{I18N\.myRequests\}/);
 assert.match(page, /title=\{I18N\.invitedRequests\}/);
-assert.match(page, /className="scheduling-table-actions"/);
+assert.match(createBranch, /<Card title=\{I18N\.basicInformation\}>/);
+assert.match(createBranch, /<Card title=\{I18N\.calendarIntegration\}>/);
+assert.match(page, /<Card title=\{I18N\.candidateSlots\}>/);
+assert.match(page, /<Card title=\{I18N\.participants\}>/);
+assert.match(createBranch, /<ToggleSwitch[\s\S]*checked=\{calendarEnabled\}/);
+assert.match(page, /id="scheduling-create-candidate-slots-grid"/);
+assert.match(page, /id="scheduling-create-participants-grid"/);
+assert.match(page, /id="scheduling-candidate-slots-grid"/);
+assert.match(page, /id="scheduling-participants-grid"/);
+assert.match(page, /<DataGridRowActions/);
+assert.match(page, /<DataGridEmptyAction/);
+assert.doesNotMatch(page, /EmailAddressInput|MailboxAddress|addressSuggestions|addressLookupQuery/);
+assert.match(page, /type="email"[\s\S]*aria-label=\{I18N\.participantEmail\}/);
+assert.doesNotMatch(page, /header: I18N\.required|<table|scheduling-table|scheduling-card(?:\s|"|`)/);
 assert.match(page, /aria-label=\{i18nMessage\("i18n:govoplan-scheduling\.decide_on_value/);
 assert.match(page, /submitSchedulingAvailability\(settings, selected\.id/);
 assert.doesNotMatch(page, /<p>\{selected\.calendar_id\}<\/p>/);
diff --git a/webui/src/features/scheduling/SchedulingPage.tsx b/webui/src/features/scheduling/SchedulingPage.tsx
index 0b9d399..9fd175d 100644
--- a/webui/src/features/scheduling/SchedulingPage.tsx
+++ b/webui/src/features/scheduling/SchedulingPage.tsx
@@ -8,12 +8,16 @@ import {
   RefreshCw,
   Save,
   Send,
-  Trash2,
   XCircle
 } from "lucide-react";
 import {
   Button,
-  EmailAddressInput,
+  Card,
+  DataGrid,
+  DataGridEmptyAction,
+  DataGridRowActions,
+  ModuleSubnav,
+  ToggleSwitch,
   hasScope,
   i18nMessage,
   usePlatformLanguage,
@@ -21,7 +25,8 @@ import {
   type ApiSettings,
   type AuthInfo,
   type CalendarPickerUiCapability,
-  type MailboxAddress
+  type DataGridColumn,
+  type ModuleSubnavGroup
 } from "@govoplan/core-webui";
 import {
   closeSchedulingRequest,
@@ -33,12 +38,14 @@ import {
   evaluateSchedulingFreeBusy,
   listSchedulingNotifications,
   listSchedulingRequests,
-  lookupSchedulingAddresses,
   openSchedulingRequest,
   schedulingSummary,
   submitSchedulingAvailability,
+  type SchedulingCandidateSlot,
   type SchedulingAvailabilityValue,
   type SchedulingNotification,
+  type SchedulingParticipant,
+  type SchedulingPollOptionResult,
   type SchedulingRequest,
   type SchedulingSummaryResponse
 } from "../../api/scheduling";
@@ -52,12 +59,14 @@ import {
   type SchedulingRequestGroups
 } from "./schedulingViewModel";
 
-type SlotDraft = { label: string; start_at: string; end_at: string };
-type ParticipantDraft = { display_name: string; email: string; required: boolean };
+type CreateSection = "basic" | "calendar" | "slots" | "participants";
+type SlotDraft = { draftId: string; label: string; start_at: string; end_at: string };
+type ParticipantDraft = { draftId: string; display_name: string; email: string; required: boolean };
 
 const I18N = {
+  actions: "i18n:govoplan-core.actions.c3cd636a",
+  add: "i18n:govoplan-core.add.61cc55aa",
   addParticipant: "i18n:govoplan-scheduling.add_participant.6cff957d",
-  addRequest: "i18n:govoplan-scheduling.add_scheduling_request.3c71be15",
   addSlot: "i18n:govoplan-scheduling.add_slot.9fcff3ed",
   answered: "i18n:govoplan-scheduling.answered.e0aafffa",
   available: "i18n:govoplan-scheduling.available.7c62a142",
@@ -107,7 +116,6 @@ const I18N = {
   reminder: "i18n:govoplan-scheduling.send_reminder.cf5eb3bf",
   requestFailed: "i18n:govoplan-scheduling.request_failed.9fcda32c",
   requests: "i18n:govoplan-scheduling.scheduling_requests.b3c12f4d",
-  required: "i18n:govoplan-scheduling.required.eed6bfb4",
   requiresAvailabilityRead: "i18n:govoplan-scheduling.requires_calendar_availability_read_access.b48ed91b",
   requiresEventWrite: "i18n:govoplan-scheduling.requires_calendar_event_write_access.887b0763",
   responseRecorded: "i18n:govoplan-scheduling.your_response_has_been_recorded.b855088d",
@@ -119,6 +127,7 @@ const I18N = {
   selectResponse: "i18n:govoplan-scheduling.choose_availability_for_at_least_one_candidate_slot.28d2111f",
   sendResponse: "i18n:govoplan-scheduling.submit_response.a5f0c053",
   start: "i18n:govoplan-scheduling.start.952f3754",
+  statusLabel: "i18n:govoplan-scheduling.status.bae7d5be",
   title: "i18n:govoplan-scheduling.title.768e0c1c",
   titleRequired: "i18n:govoplan-scheduling.scheduling_request_title_is_required.a27338be",
   unchecked: "i18n:govoplan-scheduling.unchecked.1b927dec",
@@ -128,6 +137,22 @@ const I18N = {
   whatActionsDo: "i18n:govoplan-scheduling.what_do_these_actions_do.9a9aee0e"
 } as const;
 
+const CREATE_NAVIGATION: ModuleSubnavGroup<CreateSection>[] = [{
+  items: [
+    { id: "basic", label: I18N.basicInformation },
+    { id: "calendar", label: I18N.calendarIntegration },
+    { id: "slots", label: I18N.candidateSlots },
+    { id: "participants", label: I18N.participants }
+  ]
+}];
+
+const CREATE_SECTION_IDS: Record<CreateSection, string> = {
+  basic: "scheduling-create-basic",
+  calendar: "scheduling-create-calendar",
+  slots: "scheduling-create-slots",
+  participants: "scheduling-create-participants"
+};
+
 export default function SchedulingPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
   const { translateText } = usePlatformLanguage();
   const calendarPickerCapability = usePlatformUiCapability<CalendarPickerUiCapability>("calendar.picker");
@@ -142,6 +167,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
   const [error, setError] = useState("");
   const [success, setSuccess] = useState("");
   const [draftDirty, setDraftDirty] = useState(false);
+  const [createSection, setCreateSection] = useState<CreateSection>("basic");
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [location, setLocation] = useState("");
@@ -150,8 +176,6 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
   const [slots, setSlots] = useState<SlotDraft[]>(() => initialSlots(translateText));
   const [participants, setParticipants] = useState<ParticipantDraft[]>(() => [emptyParticipant()]);
   const [availability, setAvailability] = useState<Record<string, SchedulingAvailabilityValue | "">>({});
-  const [addressLookupQuery, setAddressLookupQuery] = useState("");
-  const [addressSuggestions, setAddressSuggestions] = useState<MailboxAddress[]>([]);
 
   const canWrite = hasScope(auth, "scheduling:schedule:write");
   const canRespond = hasScope(auth, "scheduling:availability:write");
@@ -223,34 +247,6 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
     return () => window.removeEventListener("beforeunload", preventUnsavedExit);
   }, [creating, draftDirty]);
 
-  useEffect(() => {
-    const query = addressLookupQuery.trim();
-    if (!creating || !canWrite || query.length < 2) {
-      setAddressSuggestions([]);
-      return undefined;
-    }
-    let cancelled = false;
-    const timer = window.setTimeout(() => {
-      void lookupSchedulingAddresses(settings, query)
-        .then((response) => {
-          if (cancelled || !response.available) {
-            setAddressSuggestions([]);
-            return;
-          }
-          setAddressSuggestions(response.candidates.flatMap((candidate): MailboxAddress[] => candidate.email
-            ? [{ ...(candidate.display_name ? { name: candidate.display_name } : {}), email: candidate.email }]
-            : []));
-        })
-        .catch(() => {
-          if (!cancelled) setAddressSuggestions([]);
-        });
-    }, 200);
-    return () => {
-      cancelled = true;
-      window.clearTimeout(timer);
-    };
-  }, [addressLookupQuery, canWrite, creating, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
-
   async function loadRequests() {
     setLoading(true);
     setError("");
@@ -280,6 +276,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
     resetDraft();
     setError("");
     setSuccess("");
+    setCreateSection("basic");
     setCreating(true);
   }
 
@@ -395,7 +392,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
   if (creating) {
     return (
       <main className="scheduling-page scheduling-editor-page">
-        <form className="scheduling-full-editor" onSubmit={(event) => void createRequest(event)}>
+        <div className="scheduling-full-editor">
           <header className="scheduling-page-header">
             <div className="scheduling-page-title">
               <CalendarCheck aria-hidden="true" size={20} />
@@ -406,181 +403,190 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
             </div>
             <div className="scheduling-page-actions">
               <Button type="button" onClick={discardCreate} disabled={saving}>{I18N.discard}</Button>
-              <Button type="submit" variant="primary" disabled={saving || !canWrite}>
+              <Button type="submit" form="scheduling-create-form" variant="primary" disabled={saving || !canWrite}>
                 <Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}
               </Button>
             </div>
           </header>
           {error ? <div className="scheduling-alert" role="alert">{error}</div> : null}
-          <div className="scheduling-editor-scroll">
-            <section className="scheduling-card scheduling-form-grid" aria-labelledby="scheduling-basic-heading">
-              <h2 id="scheduling-basic-heading">{I18N.basicInformation}</h2>
-              <label className="scheduling-field scheduling-field-wide">
-                <span>{I18N.title}</span>
-                <input required maxLength={500} value={title} onChange={(event) => changeDraft(setTitle, event.target.value)} />
-              </label>
-              <label className="scheduling-field scheduling-field-wide">
-                <span>{I18N.description}</span>
-                <textarea rows={4} value={description} onChange={(event) => changeDraft(setDescription, event.target.value)} />
-              </label>
-              <label className="scheduling-field scheduling-field-wide">
-                <span>{I18N.location}</span>
-                <input maxLength={500} value={location} onChange={(event) => changeDraft(setLocation, event.target.value)} />
-              </label>
-            </section>
+          <div className="scheduling-editor-layout">
+            <ModuleSubnav
+              active={createSection}
+              groups={CREATE_NAVIGATION}
+              className="scheduling-create-subnav"
+              onSelect={(section) => {
+                setCreateSection(section);
+                document.getElementById(CREATE_SECTION_IDS[section])?.scrollIntoView({ behavior: "smooth", block: "start" });
+              }} />
+            <form id="scheduling-create-form" className="scheduling-editor-scroll" onSubmit={(event) => void createRequest(event)}>
+              <section id={CREATE_SECTION_IDS.basic} className="scheduling-create-section">
+                <Card title={I18N.basicInformation}>
+                  <div className="scheduling-form-grid">
+                    <label className="scheduling-field scheduling-field-wide">
+                      <span>{I18N.title}</span>
+                      <input required maxLength={500} value={title} onChange={(event) => changeDraft(setTitle, event.target.value)} />
+                    </label>
+                    <label className="scheduling-field scheduling-field-wide">
+                      <span>{I18N.description}</span>
+                      <textarea rows={4} value={description} onChange={(event) => changeDraft(setDescription, event.target.value)} />
+                    </label>
+                    <label className="scheduling-field scheduling-field-wide">
+                      <span>{I18N.location}</span>
+                      <input maxLength={500} value={location} onChange={(event) => changeDraft(setLocation, event.target.value)} />
+                    </label>
+                  </div>
+                </Card>
+              </section>
 
-            <section className="scheduling-card" aria-labelledby="scheduling-calendar-heading">
-              <div className="scheduling-section-heading">
-                <div>
-                  <h2 id="scheduling-calendar-heading">{I18N.calendarIntegration}</h2>
-                  <p>{I18N.calendarDescription}</p>
-                </div>
-                <label className="scheduling-toggle">
-                  <input
-                    type="checkbox"
+              <section id={CREATE_SECTION_IDS.calendar} className="scheduling-create-section">
+                <Card title={I18N.calendarIntegration}>
+                  <ToggleSwitch
+                    label={I18N.calendar}
+                    help={I18N.calendarDescription}
                     checked={calendarEnabled}
                     disabled={!calendarIntegrationAvailable}
-                    onChange={(event) => {
-                      setCalendarEnabled(event.target.checked);
-                      if (!event.target.checked) setCalendarId("");
+                    onChange={(checked) => {
+                      setCalendarEnabled(checked);
+                      if (!checked) setCalendarId("");
                       setDraftDirty(true);
                     }} />
-                  <span>{I18N.calendar}</span>
-                </label>
-              </div>
-              {!calendarIntegrationAvailable ? <p className="scheduling-capability-note">{I18N.calendarUnavailable}</p> : null}
-              {calendarEnabled && CalendarPicker ? (
-                <CalendarPicker
-                  settings={settings}
-                  auth={auth}
-                  value={calendarId}
-                  onChange={(value) => {
-                    setCalendarId(value);
+                  {!calendarIntegrationAvailable ? <p className="scheduling-capability-note">{I18N.calendarUnavailable}</p> : null}
+                  {calendarEnabled && CalendarPicker ? (
+                    <CalendarPicker
+                      settings={settings}
+                      auth={auth}
+                      value={calendarId}
+                      onChange={(value) => {
+                        setCalendarId(value);
+                        setDraftDirty(true);
+                      }}
+                      label={I18N.calendar}
+                      emptyLabel={I18N.selectCalendar}
+                      required />
+                  ) : null}
+                </Card>
+              </section>
+
+              <section id={CREATE_SECTION_IDS.slots} className="scheduling-create-section">
+                <EditableSlots
+                  slots={slots}
+                  onAddBelow={(index) => {
+                    setSlots((items) => insertAfter(items, index, newSlot(items.length + 1, translateText)));
                     setDraftDirty(true);
                   }}
-                  label={I18N.calendar}
-                  emptyLabel={I18N.selectCalendar}
-                  required />
-              ) : null}
-            </section>
+                  onChange={(index, field, value) => {
+                    setSlots((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item));
+                    setDraftDirty(true);
+                  }}
+                  onMove={(from, to) => {
+                    setSlots((items) => moveItem(items, from, to));
+                    setDraftDirty(true);
+                  }}
+                  onRemove={(index) => {
+                    setSlots((items) => items.filter((_item, itemIndex) => itemIndex !== index));
+                    setDraftDirty(true);
+                  }} />
+              </section>
 
-            <EditableSlots
-              slots={slots}
-              onAdd={() => {
-                setSlots((items) => [...items, newSlot(items.length + 1, translateText)]);
-                setDraftDirty(true);
-              }}
-              onChange={(index, field, value) => {
-                setSlots((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, [field]: value } : item));
-                setDraftDirty(true);
-              }}
-              onRemove={(index) => {
-                setSlots((items) => items.filter((_item, itemIndex) => itemIndex !== index));
-                setDraftDirty(true);
-              }} />
-
-            <EditableParticipants
-              participants={participants}
-              suggestions={addressSuggestions}
-              canWrite={canWrite}
-              onSuggestionQueryChange={setAddressLookupQuery}
-              onAdd={() => {
-                setParticipants((items) => [...items, emptyParticipant()]);
-                setDraftDirty(true);
-              }}
-              onChange={(index, patch) => {
-                setParticipants((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item));
-                setDraftDirty(true);
-              }}
-              onRemove={(index) => {
-                setParticipants((items) => items.filter((_item, itemIndex) => itemIndex !== index));
-                setDraftDirty(true);
-              }} />
+              <section id={CREATE_SECTION_IDS.participants} className="scheduling-create-section">
+                <EditableParticipants
+                  participants={participants}
+                  disabled={!canWrite}
+                  onAddBelow={(index) => {
+                    setParticipants((items) => insertAfter(items, index, emptyParticipant()));
+                    setDraftDirty(true);
+                  }}
+                  onChange={(index, patch) => {
+                    setParticipants((items) => items.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item));
+                    setDraftDirty(true);
+                  }}
+                  onMove={(from, to) => {
+                    setParticipants((items) => moveItem(items, from, to));
+                    setDraftDirty(true);
+                  }}
+                  onRemove={(index) => {
+                    setParticipants((items) => items.filter((_item, itemIndex) => itemIndex !== index));
+                    setDraftDirty(true);
+                  }} />
+              </section>
+            </form>
           </div>
-        </form>
+        </div>
       </main>
     );
   }
 
   return (
     <main className="scheduling-page">
-      <div className="scheduling-shell">
-        <aside className="scheduling-sidebar" aria-label={I18N.requests}>
-          <div className="scheduling-sidebar-bar">
-            <strong>{I18N.requests}</strong>
-            <div className="scheduling-sidebar-actions">
-              <Button className="scheduling-icon-button" onClick={() => void loadRequests()} title={I18N.refresh} aria-label={I18N.refresh}>
-                <RefreshCw aria-hidden="true" size={16} />
-              </Button>
-              {canWrite ? (
-                <Button variant="primary" onClick={beginCreate}>
-                  <Plus aria-hidden="true" size={16} /> {I18N.addRequest}
-                </Button>
-              ) : null}
-            </div>
+      <section className="scheduling-workspace">
+        <header className="scheduling-page-header">
+          <div className="scheduling-page-title">
+            <CalendarCheck aria-hidden="true" size={20} />
+            <h1>{I18N.requests}</h1>
           </div>
-          <div className="scheduling-list">
-            {loading ? <div className="scheduling-note" role="status">{I18N.loading}</div> : null}
+          <div className="scheduling-page-actions">
+            <Button type="button" className="scheduling-icon-button" onClick={() => void loadRequests()} title={I18N.refresh} aria-label={I18N.refresh}>
+              <RefreshCw aria-hidden="true" size={16} />
+            </Button>
+            {canWrite ? (
+              <Button type="button" variant="primary" onClick={beginCreate}>
+                <Plus aria-hidden="true" size={16} /> {I18N.add}
+              </Button>
+            ) : null}
+          </div>
+        </header>
+
+        {error ? <div className="scheduling-alert" role="alert">{error}</div> : null}
+        {success ? <div className="scheduling-success" role="status">{success}</div> : null}
+
+        <div className="scheduling-detail">
+          {loading ? <div className="scheduling-note" role="status">{I18N.loading}</div> : null}
+          <div className="scheduling-request-groups">
             <RequestGroup title={I18N.myRequests} requests={groups.owned} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
             <RequestGroup title={I18N.invitedRequests} requests={groups.invited} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
             {groups.other.length ? (
               <RequestGroup title={I18N.managedRequests} requests={groups.other} selectedId={selected?.id} actor={actor} onSelect={setSelectedId} />
             ) : null}
           </div>
-        </aside>
 
-        <section className="scheduling-workspace">
-          <header className="scheduling-topbar">
-            <div className="scheduling-title-line">
-              <CalendarCheck aria-hidden="true" size={18} />
-              <div>
-                <strong>{selected?.title ?? I18N.requests}</strong>
-                {selected ? <small>{requestStatusLabel(selected, actor)}</small> : null}
-              </div>
-            </div>
-            {selected && canManageSelected ? (
-              <LifecycleActions
-                request={selected}
-                saving={saving}
-                onOpen={() => void runAction(() => openSchedulingRequest(settings, selected.id))}
-                onClose={() => void runAction(() => closeSchedulingRequest(settings, selected.id))}
-                onReminder={() => void runAction(() => createSchedulingNotifications(settings, selected.id, "reminder"))} />
-            ) : null}
-          </header>
+          {selected ? (
+            <>
+              <Card
+                title={selected.title}
+                actions={canManageSelected ? (
+                  <LifecycleActions
+                    request={selected}
+                    saving={saving}
+                    onOpen={() => void runAction(() => openSchedulingRequest(settings, selected.id))}
+                    onClose={() => void runAction(() => closeSchedulingRequest(settings, selected.id))}
+                    onReminder={() => void runAction(() => createSchedulingNotifications(settings, selected.id, "reminder"))} />
+                ) : null}>
+                <div className="scheduling-status-row">
+                  <span className={`scheduling-status scheduling-status-${selected.status}`}>{requestStatusLabel(selected, actor)}</span>
+                  <span>{i18nMessage("i18n:govoplan-scheduling.value_participants.e776b092", { value0: selected.participants.length })}</span>
+                  {summary ? <span>{i18nMessage("i18n:govoplan-scheduling.value_responses.ba17af9a", { value0: summary.poll_summary.response_count })}</span> : null}
+                </div>
+                {selected.description ? <p>{selected.description}</p> : null}
+                {selected.location ? <p><strong>{I18N.location}:</strong> {selected.location}</p> : null}
+              </Card>
 
-          {error ? <div className="scheduling-alert" role="alert">{error}</div> : null}
-          {success ? <div className="scheduling-success" role="status">{success}</div> : null}
-
-          <div className="scheduling-detail">
-            {selected ? (
-              <>
-                <section className="scheduling-card scheduling-summary-card">
-                  <div className="scheduling-status-row">
-                    <span className={`scheduling-status scheduling-status-${selected.status}`}>{requestStatusLabel(selected, actor)}</span>
-                    <span>{i18nMessage("i18n:govoplan-scheduling.value_participants.e776b092", { value0: selected.participants.length })}</span>
-                    {summary ? <span>{i18nMessage("i18n:govoplan-scheduling.value_responses.ba17af9a", { value0: summary.poll_summary.response_count })}</span> : null}
-                  </div>
-                  {selected.description ? <p>{selected.description}</p> : null}
-                  {selected.location ? <p><strong>{I18N.location}:</strong> {selected.location}</p> : null}
-                </section>
-
-                {selectedParticipant && selected.status === "collecting" ? (
-                  <form className="scheduling-card scheduling-response-card" onSubmit={(event) => void sendAvailability(event)}>
-                    <div className="scheduling-section-heading">
-                      <div>
-                        <h2>{I18N.candidateAvailability}</h2>
-                        <p>{selectedParticipant.status === "responded"
-                          ? (selected.allow_participant_updates ? I18N.responseReplace : I18N.responseRecorded)
-                          : I18N.invitationHelp}</p>
-                      </div>
-                      <Button
-                        variant="primary"
-                        type="submit"
-                        disabled={saving || !canRespond || (selectedParticipant.status === "responded" && !selected.allow_participant_updates)}>
-                        <Send aria-hidden="true" size={16} />
-                        {selectedParticipant.status === "responded" ? I18N.updateResponse : I18N.sendResponse}
-                      </Button>
-                    </div>
+              {selectedParticipant && selected.status === "collecting" ? (
+                <Card
+                  title={I18N.candidateAvailability}
+                  actions={(
+                    <Button
+                      variant="primary"
+                      type="submit"
+                      form="scheduling-response-form"
+                      disabled={saving || !canRespond || (selectedParticipant.status === "responded" && !selected.allow_participant_updates)}>
+                      <Send aria-hidden="true" size={16} />
+                      {selectedParticipant.status === "responded" ? I18N.updateResponse : I18N.sendResponse}
+                    </Button>
+                  )}>
+                  <form id="scheduling-response-form" className="scheduling-response-card" onSubmit={(event) => void sendAvailability(event)}>
+                    <p>{selectedParticipant.status === "responded"
+                      ? (selected.allow_participant_updates ? I18N.responseReplace : I18N.responseRecorded)
+                      : I18N.invitationHelp}</p>
                     {selectedParticipant.status === "responded" && selected.allow_participant_updates ? (
                       <p className="scheduling-capability-note">{I18N.updateResponseHelp}</p>
                     ) : null}
@@ -604,133 +610,96 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                       ))}
                     </div>
                   </form>
-                ) : null}
+                </Card>
+              ) : null}
 
-                <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-slots-heading">
-                  <div className="scheduling-section-heading">
-                    <h2 id="scheduling-slots-heading">{I18N.candidateSlots}</h2>
-                  </div>
-                  <div className="scheduling-table-scroll">
-                    <table className="scheduling-table">
-                      <thead><tr><th>{I18N.title}</th><th>{I18N.start}</th><th>{I18N.end}</th><th>{I18N.available}</th><th>{I18N.maybe}</th><th>{I18N.unavailable}</th><th aria-label={I18N.determined} /></tr></thead>
-                      <tbody>
-                        {selected.slots.map((slot) => {
-                          const result = slot.poll_option_id ? optionResultById.get(slot.poll_option_id) : null;
-                          const canDecide = canManageSelected && selected.status === "closed";
-                          return (
-                            <tr key={slot.id}>
-                              <td><strong>{slot.label}</strong>{slot.freebusy_status ? <small className={`scheduling-freebusy ${slot.freebusy_status}`}>{freeBusyLabel(slot.freebusy_status)}</small> : null}</td>
-                              <td>{formatDateTime(slot.start_at)}</td>
-                              <td>{formatDateTime(slot.end_at)}</td>
-                              <td>{result?.values.available ?? 0}</td>
-                              <td>{result?.values.maybe ?? 0}</td>
-                              <td>{result?.values.unavailable ?? 0}</td>
-                              <td className="scheduling-table-actions">
-                                {canDecide ? (
-                                  <Button
-                                    className="scheduling-icon-button"
-                                    title={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
-                                    aria-label={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
-                                    disabled={saving}
-                                    onClick={() => void runAction(() => decideSchedulingRequest(settings, selected.id, {
-                                      slot_id: slot.id,
-                                      handoff_to_calendar: selected.create_calendar_event_on_decision
-                                    }))}>
-                                    <Check aria-hidden="true" size={16} />
-                                  </Button>
-                                ) : null}
-                              </td>
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                </section>
+              <Card title={I18N.candidateSlots}>
+                <CandidateSlotsGrid
+                  slots={selected.slots}
+                  optionResultById={optionResultById}
+                  canDecide={canManageSelected && selected.status === "closed"}
+                  saving={saving}
+                  onDecide={(slot) => void runAction(() => decideSchedulingRequest(settings, selected.id, {
+                    slot_id: slot.id,
+                    handoff_to_calendar: selected.create_calendar_event_on_decision
+                  }))} />
+              </Card>
 
-                {selected.calendar_integration_enabled && canManageSelected && (showPlanningCalendarActions || showFinalCalendarAction || selected.calendar_event_id) ? (
-                  <section className="scheduling-card" aria-labelledby="scheduling-calendar-actions-heading">
-                    <div className="scheduling-section-heading">
-                      <div>
-                        <h2 id="scheduling-calendar-actions-heading">{I18N.calendarCoordination}</h2>
-                        {CalendarPicker && selected.calendar_id ? (
-                          <CalendarPicker
-                            className="scheduling-selected-calendar"
-                            settings={settings}
-                            auth={auth}
-                            value={selected.calendar_id}
-                            onChange={() => undefined}
-                            label={I18N.configuredCalendar}
-                            disabled />
-                        ) : <p>{I18N.configuredCalendar}</p>}
-                      </div>
-                      <div className="scheduling-card-actions">
-                        {showPlanningCalendarActions ? (
-                          <Button
-                            disabled={saving || !canReadAvailability}
-                            title={!canReadAvailability ? I18N.requiresAvailabilityRead : undefined}
-                            onClick={() => void runAction(() => evaluateSchedulingFreeBusy(settings, selected.id))}>
-                            <RefreshCw aria-hidden="true" size={16} /> {I18N.checkFreeBusy}
-                          </Button>
-                        ) : null}
-                        {showPlanningCalendarActions && selected.calendar_hold_enabled ? (
-                          <Button
-                            disabled={saving || !canWriteCalendarEvent}
-                            title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
-                            onClick={() => void runAction(() => createSchedulingHolds(settings, selected.id))}>
-                            <Clock aria-hidden="true" size={16} /> {I18N.holds}
-                          </Button>
-                        ) : null}
-                        {showFinalCalendarAction ? (
-                          <Button
-                            disabled={saving || !canWriteCalendarEvent}
-                            title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
-                            onClick={() => void runAction(() => createSchedulingCalendarEvent(settings, selected.id))}>
-                            <CalendarCheck aria-hidden="true" size={16} /> {I18N.finalEventLabel}
-                          </Button>
-                        ) : null}
-                      </div>
+              {selected.calendar_integration_enabled && canManageSelected && (showPlanningCalendarActions || showFinalCalendarAction || selected.calendar_event_id) ? (
+                <Card
+                  title={I18N.calendarCoordination}
+                  actions={(
+                    <div className="scheduling-card-actions">
+                      {showPlanningCalendarActions ? (
+                        <Button
+                          type="button"
+                          disabled={saving || !canReadAvailability}
+                          title={!canReadAvailability ? I18N.requiresAvailabilityRead : undefined}
+                          onClick={() => void runAction(() => evaluateSchedulingFreeBusy(settings, selected.id))}>
+                          <RefreshCw aria-hidden="true" size={16} /> {I18N.checkFreeBusy}
+                        </Button>
+                      ) : null}
+                      {showPlanningCalendarActions && selected.calendar_hold_enabled ? (
+                        <Button
+                          type="button"
+                          disabled={saving || !canWriteCalendarEvent}
+                          title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                          onClick={() => void runAction(() => createSchedulingHolds(settings, selected.id))}>
+                          <Clock aria-hidden="true" size={16} /> {I18N.holds}
+                        </Button>
+                      ) : null}
+                      {showFinalCalendarAction ? (
+                        <Button
+                          type="button"
+                          disabled={saving || !canWriteCalendarEvent}
+                          title={!canWriteCalendarEvent ? I18N.requiresEventWrite : undefined}
+                          onClick={() => void runAction(() => createSchedulingCalendarEvent(settings, selected.id))}>
+                          <CalendarCheck aria-hidden="true" size={16} /> {I18N.finalEventLabel}
+                        </Button>
+                      ) : null}
                     </div>
-                  </section>
-                ) : null}
+                  )}>
+                  {CalendarPicker && selected.calendar_id ? (
+                    <CalendarPicker
+                      className="scheduling-selected-calendar"
+                      settings={settings}
+                      auth={auth}
+                      value={selected.calendar_id}
+                      onChange={() => undefined}
+                      label={I18N.configuredCalendar}
+                      disabled />
+                  ) : <p>{I18N.configuredCalendar}</p>}
+                </Card>
+              ) : null}
 
-                <div className="scheduling-columns">
-                  <section className="scheduling-card">
-                    <h2>{I18N.participants}</h2>
-                    {selected.participants.length ? selected.participants.map((participant) => (
-                      <div className="scheduling-compact-row" key={participant.id}>
-                        <span>{participant.display_name || participant.email || participant.id}</span>
-                        <small>{participantStatusLabel(participant.status)}</small>
-                      </div>
-                    )) : <p className="scheduling-note">{I18N.noParticipants}</p>}
-                  </section>
-                  <section className="scheduling-card">
-                    <h2>{I18N.notifications}</h2>
-                    {notifications.length ? notifications.map((notification) => (
-                      <div className="scheduling-compact-row" key={notification.id}>
-                        <span>{notificationKindLabel(notification.event_kind)}</span>
-                        <small>{notificationStatusLabel(notification.status)}</small>
-                      </div>
-                    )) : <p className="scheduling-note">{I18N.noNotifications}</p>}
-                  </section>
-                </div>
+              <div className="scheduling-columns">
+                <Card title={I18N.participants}>
+                  <ParticipantsGrid participants={selected.participants} />
+                </Card>
+                <Card title={I18N.notifications}>
+                  {notifications.length ? notifications.map((notification) => (
+                    <div className="scheduling-compact-row" key={notification.id}>
+                      <span>{notificationKindLabel(notification.event_kind)}</span>
+                      <small>{notificationStatusLabel(notification.status)}</small>
+                    </div>
+                  )) : <p className="scheduling-note">{I18N.noNotifications}</p>}
+                </Card>
+              </div>
 
-                <details className="scheduling-card scheduling-action-help">
-                  <summary>{I18N.whatActionsDo}</summary>
-                  <ul>
-                    <li>i18n:govoplan-scheduling.open_starts_collecting_availability_responses.c8ec34e5</li>
-                    <li>i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519</li>
-                    <li>i18n:govoplan-scheduling.free_busy_checks_each_candidate_slot_against_the_selecte.50f0371a</li>
-                    <li>i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884</li>
-                    <li>i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252</li>
-                    <li>i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797</li>
-                  </ul>
-                </details>
-              </>
-            ) : <div className="scheduling-empty">{I18N.noRequest}</div>}
-          </div>
-        </section>
-      </div>
+              <Card title={I18N.whatActionsDo} collapsible collapseKey="scheduling-action-help">
+                <ul className="scheduling-action-help">
+                  <li>i18n:govoplan-scheduling.open_starts_collecting_availability_responses.c8ec34e5</li>
+                  <li>i18n:govoplan-scheduling.close_stops_accepting_new_availability_responses.a1d57519</li>
+                  <li>i18n:govoplan-scheduling.free_busy_checks_each_candidate_slot_against_the_selecte.50f0371a</li>
+                  <li>i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884</li>
+                  <li>i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252</li>
+                  <li>i18n:govoplan-scheduling.reminder_creates_a_notification_job_for_every_active_par.7ec68797</li>
+                </ul>
+              </Card>
+            </>
+          ) : <div className="scheduling-empty">{I18N.noRequest}</div>}
+        </div>
+      </section>
     </main>
   );
 
@@ -751,8 +720,7 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
     setCalendarEnabled(false);
     setSlots(initialSlots(translateText));
     setParticipants([emptyParticipant()]);
-    setAddressLookupQuery("");
-    setAddressSuggestions([]);
+    setCreateSection("basic");
     setDraftDirty(false);
   }
 }
@@ -771,19 +739,20 @@ function RequestGroup({
   onSelect: (requestId: string) => void;
 }) {
   return (
-    <section className="scheduling-list-group">
-      <h2>{title}</h2>
-      {requests.length ? requests.map((request) => (
-        <button
-          key={request.id}
-          className={`scheduling-list-item ${selectedId === request.id ? "is-selected" : ""}`}
-          type="button"
-          onClick={() => onSelect(request.id)}>
-          <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
-          <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
-        </button>
-      )) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
-    </section>
+    <Card title={title}>
+      <div className="scheduling-list-group">
+        {requests.length ? requests.map((request) => (
+          <button
+            key={request.id}
+            className={`scheduling-list-item ${selectedId === request.id ? "is-selected" : ""}`}
+            type="button"
+            onClick={() => onSelect(request.id)}>
+            <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
+            <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
+          </button>
+        )) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
+      </div>
+    </Card>
   );
 }
 
@@ -801,13 +770,13 @@ function LifecycleActions({
   onReminder: () => void;
 }) {
   if (request.status === "draft") {
-    return <Button variant="primary" disabled={saving} onClick={onOpen}><Send aria-hidden="true" size={16} /> {I18N.openPoll}</Button>;
+    return <Button type="button" variant="primary" disabled={saving} onClick={onOpen}><Send aria-hidden="true" size={16} /> {I18N.openPoll}</Button>;
   }
   if (request.status === "collecting") {
     return (
       <div className="scheduling-actions">
-        <Button disabled={saving} onClick={onReminder}><Bell aria-hidden="true" size={16} /> {I18N.reminder}</Button>
-        <Button variant="primary" disabled={saving} onClick={onClose}><XCircle aria-hidden="true" size={16} /> {I18N.closePoll}</Button>
+        <Button type="button" disabled={saving} onClick={onReminder}><Bell aria-hidden="true" size={16} /> {I18N.reminder}</Button>
+        <Button type="button" variant="primary" disabled={saving} onClick={onClose}><XCircle aria-hidden="true" size={16} /> {I18N.closePoll}</Button>
       </div>
     );
   }
@@ -816,105 +785,269 @@ function LifecycleActions({
 
 function EditableSlots({
   slots,
-  onAdd,
+  onAddBelow,
   onChange,
+  onMove,
   onRemove
 }: {
   slots: SlotDraft[];
-  onAdd: () => void;
-  onChange: (index: number, field: keyof SlotDraft, value: string) => void;
+  onAddBelow: (index: number) => void;
+  onChange: (index: number, field: "label" | "start_at" | "end_at", value: string) => void;
+  onMove: (from: number, to: number) => void;
   onRemove: (index: number) => void;
 }) {
+  const columns: DataGridColumn<SlotDraft>[] = [
+    {
+      id: "title",
+      header: I18N.title,
+      minWidth: 180,
+      resizable: true,
+      value: (slot) => slot.label,
+      render: (slot, index) => (
+        <input
+          className="scheduling-grid-input"
+          required
+          aria-label={I18N.title}
+          value={slot.label}
+          onChange={(event) => onChange(index, "label", event.target.value)} />
+      )
+    },
+    {
+      id: "start",
+      header: I18N.start,
+      minWidth: 200,
+      resizable: true,
+      value: (slot) => slot.start_at,
+      render: (slot, index) => (
+        <input
+          className="scheduling-grid-input"
+          required
+          type="datetime-local"
+          aria-label={I18N.start}
+          value={slot.start_at}
+          onChange={(event) => onChange(index, "start_at", event.target.value)} />
+      )
+    },
+    {
+      id: "end",
+      header: I18N.end,
+      minWidth: 200,
+      resizable: true,
+      value: (slot) => slot.end_at,
+      render: (slot, index) => (
+        <input
+          className="scheduling-grid-input"
+          required
+          type="datetime-local"
+          aria-label={I18N.end}
+          value={slot.end_at}
+          onChange={(event) => onChange(index, "end_at", event.target.value)} />
+      )
+    },
+    {
+      id: "actions",
+      header: I18N.actions,
+      width: 184,
+      sticky: "end",
+      render: (_slot, index) => (
+        <DataGridRowActions
+          onAddBelow={() => onAddBelow(index)}
+          onMoveUp={index > 0 ? () => onMove(index, index - 1) : undefined}
+          onMoveDown={index < slots.length - 1 ? () => onMove(index, index + 1) : undefined}
+          onRemove={() => onRemove(index)}
+          removeDisabled={slots.length === 1}
+          addLabel={I18N.addSlot}
+          removeLabel={i18nMessage("i18n:govoplan-scheduling.remove_slot_value.3adc7576", { value0: index + 1 })} />
+      )
+    }
+  ];
+
   return (
-    <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-edit-slots-heading">
-      <div className="scheduling-section-heading">
-        <h2 id="scheduling-edit-slots-heading">{I18N.candidateSlots}</h2>
-        <Button type="button" onClick={onAdd}><Plus aria-hidden="true" size={16} /> {I18N.addSlot}</Button>
-      </div>
-      <div className="scheduling-table-scroll">
-        <table className="scheduling-table scheduling-edit-table">
-          <thead><tr><th>{I18N.title}</th><th>{I18N.start}</th><th>{I18N.end}</th><th aria-label="i18n:govoplan-scheduling.remove.e963907d" /></tr></thead>
-          <tbody>{slots.map((slot, index) => (
-            <tr key={index}>
-              <td><input required value={slot.label} onChange={(event) => onChange(index, "label", event.target.value)} /></td>
-              <td><input required type="datetime-local" value={slot.start_at} onChange={(event) => onChange(index, "start_at", event.target.value)} /></td>
-              <td><input required type="datetime-local" value={slot.end_at} onChange={(event) => onChange(index, "end_at", event.target.value)} /></td>
-              <td className="scheduling-table-actions">
-                <Button
-                  className="scheduling-icon-button"
-                  type="button"
-                  disabled={slots.length === 1}
-                  title={i18nMessage("i18n:govoplan-scheduling.remove_slot_value.3adc7576", { value0: index + 1 })}
-                  aria-label={i18nMessage("i18n:govoplan-scheduling.remove_slot_value.3adc7576", { value0: index + 1 })}
-                  onClick={() => onRemove(index)}>
-                  <Trash2 aria-hidden="true" size={16} />
-                </Button>
-              </td>
-            </tr>
-          ))}</tbody>
-        </table>
-      </div>
-    </section>
+    <Card title={I18N.candidateSlots}>
+      <DataGrid
+        id="scheduling-create-candidate-slots-grid"
+        rows={slots}
+        columns={columns}
+        getRowKey={(slot) => slot.draftId}
+        initialFit="container" />
+    </Card>
   );
 }
 
 function EditableParticipants({
   participants,
-  suggestions,
-  canWrite,
-  onSuggestionQueryChange,
-  onAdd,
+  disabled,
+  onAddBelow,
   onChange,
+  onMove,
   onRemove
 }: {
   participants: ParticipantDraft[];
-  suggestions: MailboxAddress[];
-  canWrite: boolean;
-  onSuggestionQueryChange: (query: string) => void;
-  onAdd: () => void;
+  disabled: boolean;
+  onAddBelow: (index: number) => void;
   onChange: (index: number, patch: Partial<ParticipantDraft>) => void;
+  onMove: (from: number, to: number) => void;
   onRemove: (index: number) => void;
 }) {
+  const columns: DataGridColumn<ParticipantDraft>[] = [
+    {
+      id: "name",
+      header: I18N.name,
+      minWidth: 180,
+      resizable: true,
+      value: (participant) => participant.display_name,
+      render: (participant, index) => (
+        <input
+          className="scheduling-grid-input"
+          disabled={disabled}
+          aria-label={I18N.name}
+          value={participant.display_name}
+          onChange={(event) => onChange(index, { display_name: event.target.value })} />
+      )
+    },
+    {
+      id: "email",
+      header: I18N.participantEmail,
+      minWidth: 260,
+      resizable: true,
+      value: (participant) => participant.email,
+      render: (participant, index) => (
+        <input
+          className="scheduling-grid-input"
+          disabled={disabled}
+          type="email"
+          aria-label={I18N.participantEmail}
+          value={participant.email}
+          onChange={(event) => onChange(index, { email: event.target.value })} />
+      )
+    },
+    {
+      id: "actions",
+      header: I18N.actions,
+      width: 184,
+      sticky: "end",
+      render: (_participant, index) => (
+        <DataGridRowActions
+          disabled={disabled}
+          onAddBelow={() => onAddBelow(index)}
+          onMoveUp={index > 0 ? () => onMove(index, index - 1) : undefined}
+          onMoveDown={index < participants.length - 1 ? () => onMove(index, index + 1) : undefined}
+          onRemove={() => onRemove(index)}
+          addLabel={I18N.addParticipant}
+          removeLabel={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })} />
+      )
+    }
+  ];
+
   return (
-    <section className="scheduling-card scheduling-table-card" aria-labelledby="scheduling-edit-participants-heading">
-      <div className="scheduling-section-heading">
-        <h2 id="scheduling-edit-participants-heading">{I18N.participants}</h2>
-        <Button type="button" onClick={onAdd}><Plus aria-hidden="true" size={16} /> {I18N.addParticipant}</Button>
-      </div>
-      <div className="scheduling-table-scroll">
-        <table className="scheduling-table scheduling-edit-table">
-          <thead><tr><th>{I18N.name}</th><th>{I18N.participantEmail}</th><th>{I18N.required}</th><th aria-label="i18n:govoplan-scheduling.remove.e963907d" /></tr></thead>
-          <tbody>{participants.map((participant, index) => (
-            <tr key={index}>
-              <td><input value={participant.display_name} onChange={(event) => onChange(index, { display_name: event.target.value })} /></td>
-              <td><EmailAddressInput
-                value={participant.email ? [{ name: participant.display_name || undefined, email: participant.email }] : []}
-                suggestions={suggestions}
-                onSuggestionQueryChange={onSuggestionQueryChange}
-                allowMultiple={false}
-                disabled={!canWrite}
-                compact
-                addLabel={I18N.addParticipant}
-                emptyText={I18N.participantEmail}
-                onChange={(addresses) => {
-                  const address = addresses[0];
-                  onChange(index, {
-                    display_name: address?.name ?? participant.display_name,
-                    email: address?.email ?? ""
-                  });
-                }} /></td>
-              <td><input type="checkbox" checked={participant.required} aria-label={I18N.required} onChange={(event) => onChange(index, { required: event.target.checked })} /></td>
-              <td className="scheduling-table-actions"><Button
-                className="scheduling-icon-button"
-                type="button"
-                title={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })}
-                aria-label={i18nMessage("i18n:govoplan-scheduling.remove_participant_value.e55f2b70", { value0: index + 1 })}
-                onClick={() => onRemove(index)}><Trash2 aria-hidden="true" size={16} /></Button></td>
-            </tr>
-          ))}</tbody>
-        </table>
-      </div>
-    </section>
+    <Card title={I18N.participants}>
+      <DataGrid
+        id="scheduling-create-participants-grid"
+        rows={participants}
+        columns={columns}
+        getRowKey={(participant) => participant.draftId}
+        initialFit="container"
+        emptyText={I18N.noParticipants}
+        emptyActionColumnId="actions"
+        emptyAction={<DataGridEmptyAction disabled={disabled} onAdd={() => onAddBelow(-1)} label={I18N.addParticipant} />} />
+    </Card>
+  );
+}
+
+function CandidateSlotsGrid({
+  slots,
+  optionResultById,
+  canDecide,
+  saving,
+  onDecide
+}: {
+  slots: SchedulingCandidateSlot[];
+  optionResultById: Map<string, SchedulingPollOptionResult>;
+  canDecide: boolean;
+  saving: boolean;
+  onDecide: (slot: SchedulingCandidateSlot) => void;
+}) {
+  const columns: DataGridColumn<SchedulingCandidateSlot>[] = [
+    {
+      id: "title",
+      header: I18N.title,
+      minWidth: 190,
+      resizable: true,
+      value: (slot) => slot.label,
+      render: (slot) => (
+        <span className="scheduling-slot-title">
+          <strong>{slot.label}</strong>
+          {slot.freebusy_status ? <small className={`scheduling-freebusy ${slot.freebusy_status}`}>{freeBusyLabel(slot.freebusy_status)}</small> : null}
+        </span>
+      )
+    },
+    { id: "start", header: I18N.start, minWidth: 160, resizable: true, value: (slot) => slot.start_at, render: (slot) => formatDateTime(slot.start_at) },
+    { id: "end", header: I18N.end, minWidth: 160, resizable: true, value: (slot) => slot.end_at, render: (slot) => formatDateTime(slot.end_at) },
+    {
+      id: "available",
+      header: I18N.available,
+      width: 100,
+      align: "right",
+      value: (slot) => slot.poll_option_id ? optionResultById.get(slot.poll_option_id)?.values.available ?? 0 : 0
+    },
+    {
+      id: "maybe",
+      header: I18N.maybe,
+      width: 90,
+      align: "right",
+      value: (slot) => slot.poll_option_id ? optionResultById.get(slot.poll_option_id)?.values.maybe ?? 0 : 0
+    },
+    {
+      id: "unavailable",
+      header: I18N.unavailable,
+      width: 110,
+      align: "right",
+      value: (slot) => slot.poll_option_id ? optionResultById.get(slot.poll_option_id)?.values.unavailable ?? 0 : 0
+    },
+    {
+      id: "actions",
+      header: I18N.actions,
+      width: 72,
+      sticky: "end",
+      render: (slot) => canDecide ? (
+        <Button
+          className="scheduling-icon-button"
+          type="button"
+          title={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
+          aria-label={i18nMessage("i18n:govoplan-scheduling.decide_on_value.196409cd", { value0: slot.label })}
+          disabled={saving}
+          onClick={() => onDecide(slot)}>
+          <Check aria-hidden="true" size={16} />
+        </Button>
+      ) : null
+    }
+  ];
+
+  return (
+    <DataGrid
+      id="scheduling-candidate-slots-grid"
+      rows={slots}
+      columns={columns}
+      getRowKey={(slot) => slot.id}
+      initialFit="container" />
+  );
+}
+
+function ParticipantsGrid({ participants }: { participants: SchedulingParticipant[] }) {
+  const columns: DataGridColumn<SchedulingParticipant>[] = [
+    { id: "name", header: I18N.name, minWidth: 180, resizable: true, value: (participant) => participant.display_name ?? "" },
+    { id: "email", header: I18N.participantEmail, minWidth: 220, resizable: true, value: (participant) => participant.email ?? "" },
+    { id: "status", header: I18N.statusLabel, width: 140, value: (participant) => participantStatusLabel(participant.status) }
+  ];
+
+  return (
+    <DataGrid
+      id="scheduling-participants-grid"
+      rows={participants}
+      columns={columns}
+      getRowKey={(participant) => participant.id}
+      emptyText={I18N.noParticipants}
+      initialFit="container" />
   );
 }
 
@@ -982,6 +1115,7 @@ function newSlot(position: number, translateText: (value: string) => string): Sl
   start.setMinutes(0, 0, 0);
   const end = new Date(start.getTime() + 60 * 60 * 1000);
   return {
+    draftId: nextDraftId("slot"),
     label: translateText(i18nMessage("i18n:govoplan-scheduling.option_value.3f643dc0", { value0: position })),
     start_at: localValue(start),
     end_at: localValue(end)
@@ -989,7 +1123,27 @@ function newSlot(position: number, translateText: (value: string) => string): Sl
 }
 
 function emptyParticipant(): ParticipantDraft {
-  return { display_name: "", email: "", required: true };
+  return { draftId: nextDraftId("participant"), display_name: "", email: "", required: true };
+}
+
+let draftIdSequence = 0;
+
+function nextDraftId(prefix: string): string {
+  draftIdSequence += 1;
+  return `${prefix}-${draftIdSequence}`;
+}
+
+function insertAfter<T>(items: T[], index: number, item: T): T[] {
+  const insertionIndex = Math.min(items.length, Math.max(0, index + 1));
+  return [...items.slice(0, insertionIndex), item, ...items.slice(insertionIndex)];
+}
+
+function moveItem<T>(items: T[], from: number, to: number): T[] {
+  if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length) return items;
+  const next = [...items];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
 }
 
 function localValue(date: Date): string {
diff --git a/webui/src/i18n/generatedTranslations.ts b/webui/src/i18n/generatedTranslations.ts
index 463052e..abf2f02 100644
--- a/webui/src/i18n/generatedTranslations.ts
+++ b/webui/src/i18n/generatedTranslations.ts
@@ -88,6 +88,7 @@ export const generatedTranslations = {
     "i18n:govoplan-scheduling.sent.35f49dcf": "Sent",
     "i18n:govoplan-scheduling.skipped.5a000ad7": "Skipped",
     "i18n:govoplan-scheduling.start.952f3754": "Start",
+    "i18n:govoplan-scheduling.status.bae7d5be": "Status",
     "i18n:govoplan-scheduling.submit_response.a5f0c053": "Submit response",
     "i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884": "Tentative holds create one provisional calendar event per candidate slot.",
     "i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252": "The final event is created only for the selected slot.",
@@ -192,6 +193,7 @@ export const generatedTranslations = {
     "i18n:govoplan-scheduling.sent.35f49dcf": "Gesendet",
     "i18n:govoplan-scheduling.skipped.5a000ad7": "Übersprungen",
     "i18n:govoplan-scheduling.start.952f3754": "Beginn",
+    "i18n:govoplan-scheduling.status.bae7d5be": "Status",
     "i18n:govoplan-scheduling.submit_response.a5f0c053": "Antwort senden",
     "i18n:govoplan-scheduling.tentative_holds_create_one_provisional_calendar_event_pe.ff3f1884": "Vorläufige Reservierungen erstellen je Terminvorschlag einen provisorischen Kalendereintrag.",
     "i18n:govoplan-scheduling.the_final_event_is_created_only_for_the_selected_slot.e3621252": "Der endgültige Kalendereintrag wird nur für den ausgewählten Termin erstellt.",
diff --git a/webui/src/styles/scheduling.css b/webui/src/styles/scheduling.css
index 3fdd80c..1de34d6 100644
--- a/webui/src/styles/scheduling.css
+++ b/webui/src/styles/scheduling.css
@@ -13,64 +13,61 @@
   box-sizing: border-box;
 }
 
-.scheduling-shell {
-  display: grid;
-  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-  border: var(--border-line);
-  background: var(--panel);
-}
-
-.scheduling-sidebar,
 .scheduling-workspace,
 .scheduling-full-editor {
+  width: 100%;
+  height: 100%;
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  border: var(--border-line);
+  background: var(--bg);
 }
 
-.scheduling-sidebar {
-  border-right: var(--border-line);
-  background: var(--panel-soft);
-}
-
-.scheduling-sidebar-bar,
-.scheduling-topbar,
 .scheduling-page-header {
   min-height: 58px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   padding: 10px 14px;
   border-bottom: var(--border-line);
   background: var(--panel-header);
 }
 
-.scheduling-sidebar-bar,
-.scheduling-topbar,
-.scheduling-page-header,
-.scheduling-section-heading,
-.scheduling-sidebar-actions,
+.scheduling-page-title,
 .scheduling-page-actions,
 .scheduling-card-actions,
 .scheduling-actions,
-.scheduling-title-line,
-.scheduling-page-title,
 .scheduling-status-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.scheduling-sidebar-bar,
-.scheduling-topbar,
-.scheduling-page-header,
-.scheduling-section-heading {
-  justify-content: space-between;
+.scheduling-page-title {
+  min-width: 0;
+}
+
+.scheduling-page-title > div {
+  min-width: 0;
+}
+
+.scheduling-page-title h1 {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 19px;
+}
+
+.scheduling-page-title p {
+  margin: 3px 0 0;
+  color: var(--muted);
+  font-size: 12px;
 }
 
-.scheduling-sidebar-actions,
 .scheduling-page-actions,
 .scheduling-card-actions,
 .scheduling-actions {
@@ -78,12 +75,14 @@
   justify-content: flex-end;
 }
 
-.scheduling-sidebar-actions .btn,
+.scheduling-page-actions {
+  margin-left: auto;
+}
+
 .scheduling-page-actions .btn,
 .scheduling-card-actions .btn,
 .scheduling-actions .btn,
-.scheduling-section-heading .btn,
-.scheduling-response-card .btn {
+.scheduling-response-card + .btn {
   min-height: 34px;
   display: inline-flex;
   align-items: center;
@@ -99,25 +98,51 @@
   justify-content: center;
 }
 
-.scheduling-list {
+.scheduling-alert,
+.scheduling-success {
+  margin: 10px 14px 0;
+  padding: 9px 11px;
+  border: var(--border-line);
+  border-radius: 7px;
+}
+
+.scheduling-alert {
+  border-color: var(--danger);
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.scheduling-success {
+  border-color: var(--success);
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, var(--panel));
+}
+
+.scheduling-detail,
+.scheduling-editor-scroll {
+  min-width: 0;
   min-height: 0;
   overflow: auto;
-  padding: 8px;
+  padding: 14px;
 }
 
-.scheduling-list-group + .scheduling-list-group {
-  margin-top: 14px;
-  padding-top: 12px;
-  border-top: var(--border-line);
+.scheduling-detail,
+.scheduling-editor-scroll {
+  display: grid;
+  align-content: start;
+  gap: 12px;
 }
 
-.scheduling-list-group h2 {
-  margin: 0 8px 6px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: .025em;
-  text-transform: uppercase;
+.scheduling-request-groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.scheduling-list-group {
+  min-height: 52px;
+  max-height: 270px;
+  overflow: auto;
 }
 
 .scheduling-list-item {
@@ -146,14 +171,8 @@
   background: color-mix(in srgb, var(--accent) 10%, var(--panel));
 }
 
-.scheduling-list-item > span,
-.scheduling-title-line > div,
-.scheduling-page-title > div,
-.scheduling-section-heading > div {
-  min-width: 0;
-}
-
 .scheduling-list-item > span {
+  min-width: 0;
   display: grid;
   gap: 3px;
 }
@@ -168,9 +187,6 @@
 }
 
 .scheduling-list-item small,
-.scheduling-title-line small,
-.scheduling-page-title p,
-.scheduling-section-heading p,
 .scheduling-note,
 .scheduling-list-empty,
 .scheduling-compact-row small {
@@ -179,95 +195,15 @@
 }
 
 .scheduling-list-status {
-  max-width: 110px;
+  max-width: 120px;
   padding: 3px 7px;
   border-radius: 999px;
-  background: var(--panel);
+  background: var(--panel-soft);
   font-weight: 700;
 }
 
 .scheduling-list-empty {
-  margin: 3px 8px 8px;
-}
-
-.scheduling-workspace {
-  overflow: hidden;
-}
-
-.scheduling-title-line {
-  min-width: 0;
-}
-
-.scheduling-title-line > div {
-  display: grid;
-  gap: 2px;
-}
-
-.scheduling-alert,
-.scheduling-success {
-  margin: 10px 14px 0;
-  padding: 9px 11px;
-  border: var(--border-line);
-  border-radius: 7px;
-}
-
-.scheduling-alert {
-  border-color: var(--danger);
-  color: var(--danger);
-  background: var(--danger-soft);
-}
-
-.scheduling-success {
-  border-color: var(--success);
-  color: var(--success);
-  background: color-mix(in srgb, var(--success) 10%, var(--panel));
-}
-
-.scheduling-detail,
-.scheduling-editor-scroll {
-  min-height: 0;
-  overflow: auto;
-  padding: 14px;
-}
-
-.scheduling-detail {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-}
-
-.scheduling-card {
-  width: 100%;
-  min-width: 0;
-  padding: 14px;
-  border: var(--border-line);
-  border-radius: 8px;
-  background: var(--panel);
-}
-
-.scheduling-card h2,
-.scheduling-page-header h1,
-.scheduling-section-heading h2 {
-  margin: 0;
-  color: var(--text-strong);
-}
-
-.scheduling-card h2,
-.scheduling-section-heading h2 {
-  font-size: 15px;
-}
-
-.scheduling-page-header h1 {
-  font-size: 19px;
-}
-
-.scheduling-page-title p,
-.scheduling-section-heading p {
-  margin: 3px 0 0;
-}
-
-.scheduling-summary-card > p:last-child {
-  margin-bottom: 0;
+  margin: 3px 0 8px;
 }
 
 .scheduling-status-row {
@@ -288,65 +224,10 @@
   background: color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
-.scheduling-table-card {
-  padding: 0;
-  overflow: hidden;
-}
-
-.scheduling-table-card > .scheduling-section-heading {
-  min-height: 52px;
-  padding: 9px 14px;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-}
-
-.scheduling-table-scroll {
-  width: 100%;
-  overflow: auto;
-}
-
-.scheduling-table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: auto;
-}
-
-.scheduling-table th,
-.scheduling-table td {
-  padding: 9px 10px;
-  border-bottom: var(--border-line);
-  text-align: left;
-  vertical-align: middle;
-}
-
-.scheduling-table tr:last-child td {
-  border-bottom: 0;
-}
-
-.scheduling-table th {
-  color: var(--muted);
-  background: var(--panel-soft);
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-}
-
-.scheduling-table td {
-  font-size: 13px;
-}
-
-.scheduling-table td:first-child {
-  min-width: 190px;
-}
-
-.scheduling-table td > strong {
-  display: block;
-}
-
-.scheduling-table-actions {
-  width: 1%;
-  text-align: right !important;
-  white-space: nowrap;
+.scheduling-slot-title {
+  min-width: 0;
+  display: grid;
+  justify-items: start;
 }
 
 .scheduling-freebusy {
@@ -393,6 +274,10 @@
   gap: 12px;
 }
 
+.scheduling-response-card > p {
+  margin: 0;
+}
+
 .scheduling-response-grid {
   display: grid;
   gap: 6px;
@@ -425,7 +310,7 @@
 .scheduling-response-grid select,
 .scheduling-field input,
 .scheduling-field textarea,
-.scheduling-edit-table input:not([type="checkbox"]) {
+.scheduling-grid-input {
   width: 100%;
   min-height: 36px;
   padding: 7px 9px;
@@ -436,13 +321,8 @@
   font: inherit;
 }
 
-.scheduling-action-help summary {
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.scheduling-action-help ul {
-  margin-bottom: 0;
+.scheduling-action-help {
+  margin: 0;
 }
 
 .scheduling-empty {
@@ -455,26 +335,22 @@
   background: var(--panel);
 }
 
-.scheduling-full-editor {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border: var(--border-line);
-  background: var(--bg);
-}
-
-.scheduling-page-header {
-  flex: 0 0 auto;
-}
-
-.scheduling-page-actions {
-  margin-left: auto;
-}
-
-.scheduling-editor-scroll {
+.scheduling-editor-layout {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
   display: grid;
-  align-content: start;
-  gap: 12px;
+  grid-template-columns: 198px minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.scheduling-create-subnav {
+  min-height: 0;
+}
+
+.scheduling-create-section {
+  min-width: 0;
+  scroll-margin-top: 14px;
 }
 
 .scheduling-form-grid {
@@ -483,7 +359,6 @@
   gap: 12px;
 }
 
-.scheduling-form-grid h2,
 .scheduling-field-wide {
   grid-column: 1 / -1;
 }
@@ -499,35 +374,19 @@
   font-weight: 800;
 }
 
-.scheduling-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-weight: 700;
-}
-
 .scheduling-capability-note {
   margin: 10px 0 0;
   color: var(--muted);
   font-size: 12px;
 }
 
-.scheduling-edit-table input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
+.scheduling-selected-calendar {
+  max-width: 520px;
 }
 
-@media (max-width: 1050px) {
-  .scheduling-shell {
-    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
-  }
-
-  .scheduling-sidebar-bar {
-    align-items: flex-start;
-  }
-
-  .scheduling-sidebar-actions {
-    align-items: flex-end;
+@media (max-width: 900px) {
+  .scheduling-editor-layout {
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
@@ -538,25 +397,12 @@
     overflow: auto;
   }
 
-  .scheduling-shell {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    overflow: visible;
-  }
-
-  .scheduling-sidebar {
-    max-height: 46vh;
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
   .scheduling-workspace,
-  .scheduling-full-editor {
-    overflow: visible;
-  }
-
+  .scheduling-full-editor,
+  .scheduling-editor-layout,
   .scheduling-detail,
   .scheduling-editor-scroll {
+    height: auto;
     overflow: visible;
   }
 
@@ -565,9 +411,7 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .scheduling-page-header,
-  .scheduling-topbar,
-  .scheduling-section-heading {
+  .scheduling-page-header {
     align-items: flex-start;
     flex-wrap: wrap;
   }