Adopt shared WebUI structural primitives

webui/src/features/committee/CommitteePage.tsx

@@ -15,13 +15,16 @@ import { ActionToolbar,
   Button,
   DocumentationHelpLink,
   DismissibleAlert,
+  FilterBar,
   IconButton,
   LoadingIndicator,
   PageScrollViewport,
+  StatePanel,
   StatusBadge,
   hasScope,
   i18nMessage,
   usePlatformLanguage,
+  WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
 import {
@@ -182,12 +185,12 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
 
   return (
     <main className="committee-page">
-      <div className="committee-shell">
-        <ActionToolbar className="committee-toolbar">
-          <form onSubmit={(event) => { event.preventDefault(); void refresh(); }} className="committee-search">
+      <WorkspaceFrame className="committee-shell" label="Committee workspace" interfaceId="committee.workspace" helpContextId="committee.page.workspace" helpModuleId="committee">
+        <ActionToolbar surface="panel-header" className="committee-toolbar">
+          <FilterBar as="form" surface="control" wrap="never" width="compact" onSubmit={(event) => { event.preventDefault(); void refresh(); }} className="committee-search">
             <Search size={16} aria-hidden="true" />
             <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search bodies" aria-label="Search committee bodies" />
-          </form>
+          </FilterBar>
           <Button variant="ghost" onClick={() => void refresh()} disabled={loading} disabledReason={loading ? COMMITTEE_INTERFACE_I18N.loading : undefined}>
             <RefreshCw size={16} aria-hidden="true" />
             Refresh
@@ -262,7 +265,7 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
 
           <section className="committee-detail" aria-label="Meeting workspace">
             {!selectedMeeting ? (
-              <div className="committee-empty">Select or create a meeting.</div>
+              <StatePanel size="fill" title="Meetings" description="Select or create a meeting." />
             ) : (
               <>
                 <div className="committee-detail-heading">
@@ -310,7 +313,7 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
                           />
                         </div>
                       ))}
-                      {agendaItems.length === 0 ? <div className="committee-empty compact">No agenda items.</div> : null}
+                      {agendaItems.length === 0 ? <StatePanel size="inline" description="No agenda items." /> : null}
                     </div>
                   </WorkspaceSection>
 
@@ -373,7 +376,7 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
             )}
           </section>
         </div>
-      </div>
+      </WorkspaceFrame>
 
       {editor ? (
         <CommitteeRecordDialog
@@ -410,7 +413,7 @@ function RecordList({ records, selectedId, onSelect, secondary }: {
   onSelect: (id: string) => void;
   secondary?: (record: CommitteeRecord) => string;
 }) {
-  if (records.length === 0) return <div className="committee-empty compact">No records.</div>;
+  if (records.length === 0) return <StatePanel size="inline" description="No records." />;
   return <div className="committee-record-list">{records.map((record) => (
     <button key={record.object_id} type="button" className={record.object_id === selectedId ? "is-selected" : ""} onClick={() => onSelect(record.object_id)}>
       <strong>{record.title}</strong>
@@ -430,7 +433,7 @@ function RecordRows({ records, editDisabledReason, onEdit, detail, secondaryActi
   detail: (record: CommitteeRecord) => string;
   secondaryAction?: (record: CommitteeRecord) => ReactNode;
 }) {
-  if (records.length === 0) return <div className="committee-empty compact">No records.</div>;
+  if (records.length === 0) return <StatePanel size="inline" description="No records." />;
   return <div className="committee-record-rows">{records.map((record) => (
     <div key={record.object_id}>
       <span><strong>{record.title}</strong><small>{detail(record)}</small></span>