refactor(webui): adopt semantic workspace actions

webui/src/features/records/RecordsPage.tsx

@@ -3,7 +3,6 @@ import {
   FilePlus2,
   Pencil,
   Plus,
-  RefreshCw,
   Search,
   Settings2
 } from "lucide-react";
@@ -15,7 +14,7 @@ import {
   type FormEvent
 } from "react";
 import { useSearchParams } from "react-router";
-import { DialogForm, ActionToolbar,
+import { DialogForm,
   Button,
   DataGrid,
   Dialog,
@@ -29,6 +28,7 @@ import { DialogForm, ActionToolbar,
   StatePanel,
   StatusBadge,
   useTemporalDataContext,
+  WorkspaceActionBar,
   WorkspaceFrame,
   type DataGridColumn,
   type PlatformRouteContext
@@ -236,8 +236,13 @@ export default function RecordsPage({ settings, auth }: PlatformRouteContext) {
   return (
     <main className="records-page" data-help-context-id="records.workspace">
       <WorkspaceFrame className="records-shell" label="Records workspace" interfaceId="records.workspace" helpContextId="records.workspace" helpModuleId="records">
-        <ActionToolbar surface="panel-header" className="records-toolbar">
+        <WorkspaceActionBar
-          <Button
+          scope="workspace"
+          variant="collection"
+          refreshable
+          reloadAction={{ onReload: reload, loading, label: "Reload records" }}
+          className="records-toolbar"
+          createAction={<Button
             type="button"
             variant="primary"
             onClick={() => setCreateOpen(true)}
@@ -246,18 +251,15 @@ export default function RecordsPage({ settings, auth }: PlatformRouteContext) {
           >
             <Plus size={16} aria-hidden="true" />
             New record
-          </Button>
+          </Button>}
-          <Button type="button" variant="ghost" onClick={reload} disabledReason={loading ? "Records are already loading." : undefined}>
+          contextActions={<>
-            <RefreshCw size={16} aria-hidden="true" />
+            {canAdmin && (
-            Refresh
-          </Button>
-          {canAdmin && (
             <Button type="button" variant="ghost" onClick={() => setCatalogOpen(true)} helpContextId="records.catalog.admin">
               <Settings2 size={16} aria-hidden="true" />
               Catalog
             </Button>
-          )}
+            )}
-          <FilterBar as="form" surface="control" wrap="never" width="compact" className="records-search" onSubmit={submitSearch}>
+            <FilterBar as="form" surface="control" wrap="never" width="compact" className="records-search" onSubmit={submitSearch}>
             <Search size={17} aria-hidden="true" />
             <input
               value={query}
@@ -265,18 +267,19 @@ export default function RecordsPage({ settings, auth }: PlatformRouteContext) {
               aria-label="Search records"
               placeholder="Search records"
             />
-          </FilterBar>
+            </FilterBar>
-          <span className="records-result-count">
+            <span className="records-result-count">
             {i18nMessage("i18n:govoplan-records.record_count", { value0: total })}
-          </span>
+            </span>
-          {!temporalIsDefault && (
+            {!temporalIsDefault && (
             <StatusBadge
               status="warning"
               label={selection.validityMode === "all" ? "All valid-time data" : "Historical data"}
             />
-          )}
+            )}
-          <DocumentationHelpLink reference={RECORDS_DOCUMENTATION} />
+          </>}
-        </ActionToolbar>
+          helpAction={<DocumentationHelpLink reference={RECORDS_DOCUMENTATION} />}
+        />
 
         {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
         {filingPreset &&