refactor(webui): adopt semantic workspace actions

webui/src/features/projects/ProjectsPage.tsx

@@ -13,8 +13,7 @@ import {
   useState,
   type FormEvent
 } from "react";
-import { ActionToolbar,
+import { Button,
-  Button,
   Dialog,
   DocumentationHelpLink,
   DismissibleAlert,
@@ -30,6 +29,7 @@ import { ActionToolbar,
   StatePanel,
   StatusBadge,
   hasScope,
+  WorkspaceActionBar,
   WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
@@ -213,8 +213,14 @@ export default function ProjectsPage({ settings, auth }: PlatformRouteContext) {
   return (
     <main className="projects-page">
       <WorkspaceFrame className="projects-shell" label="Projects workspace" interfaceId="projects.workspace" helpContextId="projects.page.workspace" helpModuleId="projects">
-        <ActionToolbar surface="panel-header" className="projects-toolbar">
+        <WorkspaceActionBar
-          <FilterBar as="form" surface="control" wrap="never" width="default" className="projects-search" onSubmit={submitSearch}>
+          scope="workspace"
+          variant="collection"
+          refreshable
+          reloadAction={{ onReload: () => void reload(), loading }}
+          className="projects-toolbar"
+          contextActions={<>
+            <FilterBar as="form" surface="control" wrap="never" width="default" className="projects-search" onSubmit={submitSearch}>
             <Search size={17} aria-hidden="true" />
             <input
               value={query}
@@ -223,8 +229,8 @@ export default function ProjectsPage({ settings, auth }: PlatformRouteContext) {
               placeholder="Search portfolios, projects, and milestones"
             />
             <Button type="submit" variant="primary">Search</Button>
-          </FilterBar>
+            </FilterBar>
-          <label className="projects-kind-filter">
+            <label className="projects-kind-filter">
             <span>Type</span>
             <select value={kind} onChange={(event) => setKind(event.target.value as ProjectObjectKind | "")}>
               <option value="">All planning objects</option>
@@ -232,18 +238,19 @@ export default function ProjectsPage({ settings, auth }: PlatformRouteContext) {
               <option value="project">Projects</option>
               <option value="milestone">Milestones</option>
             </select>
-          </label>
+            </label>
-          <span className="projects-count">{total} objects</span>
+            <span className="projects-count">{total} objects</span>
-          <DocumentationHelpLink
+          </>}
+          helpAction={<DocumentationHelpLink
             reference={{ topicId: "projects.module-boundary", documentationType: "user" }}
             label="Open Projects documentation"
-          />
+          />}
-          {canWrite &&
+          createAction={canWrite ?
             <Button type="button" variant="primary" onClick={openCreate}>
               <Plus size={16} aria-hidden="true" /> New
             </Button>
-          }
+          : undefined}
-        </ActionToolbar>
+        />
         {error &&
           <DismissibleAlert tone="error" onDismiss={() => setError("")}>
             {error}