Adopt shared WebUI structural primitives

webui/src/features/forms/FormsPage.tsx

@@ -8,12 +8,15 @@ import { ActionToolbar,
   DismissibleAlert,
   IconButton,
   FormField,
+  FilterBar,
   LoadingIndicator,
   PageScrollViewport,
+  StatePanel,
   StatusBadge,
   hasScope,
   useUnsavedChanges,
   useUnsavedDraftGuard,
+  WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
 import {
@@ -144,13 +147,13 @@ export default function FormsPage({ settings, auth }: PlatformRouteContext) {
 
   return (
     <main className="forms-page">
-      <div className="forms-shell">
-        <ActionToolbar className="forms-toolbar">
-          <form onSubmit={search} className="forms-search">
+      <WorkspaceFrame className="forms-shell" label="Form definitions" interfaceId="forms.catalogue" helpContextId="forms.page.catalogue" helpModuleId="forms">
+        <ActionToolbar surface="panel-header" className="forms-toolbar">
+          <FilterBar as="form" surface="control" wrap="never" width="default" onSubmit={search} className="forms-search">
             <Search size={17} aria-hidden="true" />
             <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search definitions" aria-label="Search Form definitions" />
             <Button type="submit">Search</Button>
-          </form>
+          </FilterBar>
           <label>
             <span>State</span>
             <select value={state} onChange={(event) => setState(event.target.value)}>
@@ -171,7 +174,7 @@ export default function FormsPage({ settings, auth }: PlatformRouteContext) {
           {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
           {!canWrite && <ActionBlockerHint tone="info" reason={{ summary: "No Form management permission", details: FORMS_I18N.writeReason, requiredAction: FORMS_I18N.permissionAction, actor: FORMS_I18N.permissionActor, target: FORMS_I18N.permissionDestination }} labels={{ requiredAction: FORMS_I18N.requiredAction, actor: FORMS_I18N.actor, target: FORMS_I18N.destination }} documentation={FORMS_DOCUMENTATION} />}
           {loading && <LoadingIndicator label="Loading Form definitions" />}
-          {!loading && !error && items.length === 0 && <div className="forms-empty">No matching definitions.</div>}
+          {!loading && !error && items.length === 0 && <StatePanel size="compact" description="No matching definitions." />}
           {!loading && items.length > 0 &&
             <div className="forms-list" role="list">
               {items.map((item) => {
@@ -192,7 +195,7 @@ export default function FormsPage({ settings, auth }: PlatformRouteContext) {
             </div>
           }
         </PageScrollViewport>
-      </div>
+      </WorkspaceFrame>
       {editing &&
         <FormDefinitionDialog
           open