refactor(webui): centralize scheduling selection

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>
   );

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 {