refactor(webui): adopt semantic workspace actions

webui/src/features/cases/CasesPage.tsx

@@ -1,7 +1,6 @@
 import { Search } from "lucide-react";
 import { useEffect, useMemo, useState, type FormEvent } from "react";
-import { ActionToolbar,
-  Button,
+import { Button,
   DocumentationHelpLink,
   DismissibleAlert,
   FilterBar,
@@ -14,6 +13,7 @@ import { ActionToolbar,
   StatusBadge,
   i18nMessage,
   useGuardedNavigate,
+  WorkspaceActionBar,
   WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
@@ -36,6 +36,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
+  const [reloadKey, setReloadKey] = useState(0);
 
   useEffect(() => {
     const controller = new AbortController();
@@ -61,7 +62,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
       }).
       finally(() => setLoading(false));
     return () => controller.abort();
-  }, [settings, status, submittedQuery]);
+  }, [reloadKey, settings, status, submittedQuery]);
 
   const statusLabels = useMemo(
     () => new Map(catalog.statuses.map((item) => [item.status_key, item])),
@@ -80,8 +81,14 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
   return (
     <main className="cases-page">
       <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}>
+        <WorkspaceActionBar
+          scope="collection-pane"
+          variant="collection"
+          refreshable
+          reloadAction={{ onReload: () => setReloadKey((value) => value + 1), loading }}
+          className="cases-toolbar"
+          contextActions={<>
+            <FilterBar as="form" surface="control" wrap="never" width="default" className="cases-search" onSubmit={submit}>
             <Search size={17} aria-hidden="true" />
             <input
               value={query}
@@ -96,8 +103,8 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
             >
               Search
             </Button>
-          </FilterBar>
-          <label className="cases-status-filter">
+            </FilterBar>
+            <label className="cases-status-filter">
             <span>Status</span>
             <select value={status} onChange={(event) => setStatus(event.target.value)}>
               <option value="">All statuses</option>
@@ -105,10 +112,11 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
                 <option key={item.status_key} value={item.status_key}>{item.label}</option>
               )}
             </select>
-          </label>
-          <span className="cases-count">{i18nMessage("i18n:govoplan-cases.case_count", { value0: total })}</span>
-          <DocumentationHelpLink reference={CASES_DOCUMENTATION} />
-        </ActionToolbar>
+            </label>
+            <span className="cases-count">{i18nMessage("i18n:govoplan-cases.case_count", { value0: total })}</span>
+          </>}
+          helpAction={<DocumentationHelpLink reference={CASES_DOCUMENTATION} />}
+        />
         <PageScrollViewport className="cases-list-viewport">
           {error &&
             <DismissibleAlert tone="error" onDismiss={() => setError("")}>