From 0452100242e7e40b144c6e992b0306bce381186d Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 13:32:31 +0200
Subject: [PATCH] refactor(webui): centralize scheduling selection

---
 .../test-scheduling-page-structure.mjs        |  4 +++
 .../features/scheduling/SchedulingPage.tsx    | 26 ++++++++++++-------
 webui/src/styles/scheduling.css               | 22 +++-------------
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/webui/scripts/test-scheduling-page-structure.mjs b/webui/scripts/test-scheduling-page-structure.mjs
index ece9fd2..6a55a6d 100644
--- a/webui/scripts/test-scheduling-page-structure.mjs
+++ b/webui/scripts/test-scheduling-page-structure.mjs
@@ -12,6 +12,7 @@ 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.match(page, /SelectionList,[\s\S]*SelectionListItem,[\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"/);
@@ -36,6 +37,9 @@ 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, /<SelectionList label=\{title\} className="scheduling-request-list">/);
+assert.match(page, /<SelectionListItem[\s\S]*selected=\{selectedId === request\.id\}[\s\S]*className="scheduling-list-item"/);
+assert.doesNotMatch(page, /<button[\s\S]{0,160}scheduling-list-item/);
 assert.match(createBranch, /<Card title=\{I18N\.basicInformation\}>/);
 assert.match(createBranch, /<Card title=\{I18N\.calendarIntegration\}>/);
 assert.match(page, /<Card title=\{I18N\.candidateSlots\}>/);
diff --git a/webui/src/features/scheduling/SchedulingPage.tsx b/webui/src/features/scheduling/SchedulingPage.tsx
index bf475f5..26999cb 100644
--- a/webui/src/features/scheduling/SchedulingPage.tsx
+++ b/webui/src/features/scheduling/SchedulingPage.tsx
@@ -19,6 +19,8 @@ import {
   DataGridRowActions,
   DateTimeField,
   ModuleSubnav,
+  SelectionList,
+  SelectionListItem,
   TableActionGroup,
   ToggleSwitch,
   hasScope,
@@ -810,16 +812,20 @@ function RequestGroup({
   return (
     <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>}
+        {requests.length ? (
+          <SelectionList label={title} className="scheduling-request-list">
+            {requests.map((request) => (
+              <SelectionListItem
+                key={request.id}
+                selected={selectedId === request.id}
+                className="scheduling-list-item"
+                onClick={() => onSelect(request.id)}>
+                <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
+                <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
+              </SelectionListItem>
+            ))}
+          </SelectionList>
+        ) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
       </div>
     </Card>
   );
diff --git a/webui/src/styles/scheduling.css b/webui/src/styles/scheduling.css
index 4ac02c0..e720926 100644
--- a/webui/src/styles/scheduling.css
+++ b/webui/src/styles/scheduling.css
@@ -136,30 +136,16 @@
   overflow: auto;
 }
 
+.scheduling-request-list {
+  gap: 4px;
+}
+
 .scheduling-list-item {
-  width: 100%;
   min-height: 50px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
-  margin: 0 0 4px;
-  padding: 8px 10px;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  color: var(--text);
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-}
-
-.scheduling-list-item:hover {
-  background: var(--hover-tint-soft);
-}
-
-.scheduling-list-item.is-selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
-  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
 }
 
 .scheduling-list-item > span {