Adopt shared WebUI structural primitives

webui/src/features/cases/CasesPage.tsx

@@ -4,11 +4,17 @@ import { ActionToolbar,
   Button,
   DocumentationHelpLink,
   DismissibleAlert,
+  FilterBar,
   LoadingIndicator,
   PageScrollViewport,
+  SelectionList,
+  SelectionListItem,
+  SelectionListItemContent,
+  StatePanel,
   StatusBadge,
   i18nMessage,
   useGuardedNavigate,
+  WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
 import {
@@ -73,9 +79,9 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
 
   return (
     <main className="cases-page">
-      <div className="cases-shell">
-        <ActionToolbar className="cases-toolbar">
-          <form className="cases-search" onSubmit={submit}>
+      <WorkspaceFrame className="cases-shell" label="Cases" interfaceId="cases.catalogue" helpContextId="cases.page.catalogue" helpModuleId="cases">
+        <ActionToolbar surface="panel-header" className="cases-toolbar">
+          <FilterBar as="form" surface="control" wrap="never" width="default" className="cases-search" onSubmit={submit}>
             <Search size={17} aria-hidden="true" />
             <input
               value={query}
@@ -90,7 +96,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
             >
               Search
             </Button>
-          </form>
+          </FilterBar>
           <label className="cases-status-filter">
             <span>Status</span>
             <select value={status} onChange={(event) => setStatus(event.target.value)}>
@@ -111,36 +117,29 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
           }
           {loading && <LoadingIndicator label="Loading cases" />}
           {!loading && !error && cases.length === 0 &&
-            <div className="cases-empty">No matching cases.</div>
+            <StatePanel size="compact" description="No matching cases." />
           }
           {!loading && cases.length > 0 &&
-            <div className="cases-list" role="list">
+            <SelectionList variant="navigation" label="Cases">
               {cases.map((item) => {
                 const statusDefinition = statusLabels.get(item.status_key);
                 return (
-                  <button
-                    type="button"
-                    className="case-list-row"
-                    role="listitem"
+                  <SelectionListItem
+                    selected={false}
                     key={item.reference.object_id}
                     onClick={() => navigate(`/cases/${encodeURIComponent(item.reference.object_id)}`)}>
-                    <div className="case-list-primary">
-                      <strong>{item.title}</strong>
-                      <span>{item.case_number}</span>
-                    </div>
-                    <span>{typeLabels.get(item.case_type_key) ?? humanize(item.case_type_key)}</span>
-                    <span>{formatDate(item.deadline_at)}</span>
+                    <SelectionListItemContent title={item.title} description={`${item.case_number} · ${typeLabels.get(item.case_type_key) ?? humanize(item.case_type_key)} · ${formatDate(item.deadline_at)}`} />
                     <StatusBadge
                       status={statusDefinition?.terminal ? "inactive" : "active"}
                       label={statusDefinition?.label ?? humanize(item.status_key)}
                     />
-                  </button>
+                  </SelectionListItem>
                 );
               })}
-            </div>
+            </SelectionList>
           }
         </PageScrollViewport>
-      </div>
+      </WorkspaceFrame>
     </main>
   );
 }