refactor(webui): centralize scheduling selection

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\}>/);

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) => (
+        {requests.length ? (
-          <button
+          <SelectionList label={title} className="scheduling-request-list">
+            {requests.map((request) => (
+              <SelectionListItem
                 key={request.id}
-            className={`scheduling-list-item ${selectedId === request.id ? "is-selected" : ""}`}
+                selected={selectedId === request.id}
-            type="button"
+                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>
-          </button>
+              </SelectionListItem>
-        )) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
+            ))}
+          </SelectionList>
+        ) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
       </div>
     </Card>
   );

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 {