refactor(webui): adopt semantic workspace actions

webui/src/features/forms/FormInstancePage.tsx

@@ -1,8 +1,7 @@
 import { Archive, ArrowLeft, BadgeCheck, ClipboardCheck, ExternalLink, RefreshCw, Save, Send, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router";
-import { ActionToolbar,
+import { ActionBlockerHint,
-  ActionBlockerHint,
   Button,
   ConfirmDialog,
   DescriptionItem,
@@ -23,6 +22,7 @@ import { ActionToolbar,
   usePlatformModuleInstalled,
   usePlatformLanguage,
   useUnsavedDraftGuard,
+  WorkspaceActionBar,
   WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
@@ -379,21 +379,28 @@ export default function FormInstancePage({ settings, auth }: PlatformRouteContex
   return (
     <main className="forms-runtime-page">
       <WorkspaceFrame className="form-instance-shell" label="Form instance" interfaceId="forms-runtime.instance" helpContextId="forms-runtime.page.instance" helpModuleId="forms-runtime">
-        <ActionToolbar surface="panel-header" className="form-instance-toolbar">
+        <WorkspaceActionBar
+          scope="workspace"
+          variant="detail"
+          refreshable
+          reloadAction={{ onReload: () => void load(), loading }}
+          className="form-instance-toolbar"
+          contextActions={<>
             <Button onClick={() => navigate("/forms-runtime")}>
             <ArrowLeft size={16} aria-hidden="true" />
             Forms
             </Button>
             {definition && <strong>{localized.title}</strong>}
             {instance && <StatusBadge status={editableLifecycle ? "active" : "inactive"} label={stateLabel(instance.status)} />}
-          {instance && recordsAvailable && !editableLifecycle &&
+          </>}
+          primaryActions={instance && recordsAvailable && !editableLifecycle ?
             <Button onClick={() => navigate(recordFilingPath(instance))}>
               <Archive size={16} aria-hidden="true" />
               File in eAkte
             </Button>
-          }
+          : undefined}
-          <DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
+          helpAction={<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />}
-        </ActionToolbar>
+        />
         <PageScrollViewport className="form-instance-viewport">
           {error &&
             <DismissibleAlert tone="danger" resetKey={error}>

webui/src/features/forms/FormsRuntimePage.tsx

@@ -1,7 +1,6 @@
-import { Link2, RefreshCw, ShieldCheck, UserRoundPlus } from "lucide-react";
+import { Link2, ShieldCheck, UserRoundPlus } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { ActionToolbar,
+import { Button,
-  Button,
   DocumentationHelpLink,
   DismissibleAlert,
   LoadingIndicator,
@@ -15,6 +14,7 @@ import { ActionToolbar,
   i18nMessage,
   useGuardedNavigate,
   usePlatformLanguage,
+  WorkspaceActionBar,
   WorkspaceFrame,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
@@ -69,11 +69,13 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
   return (
     <main className="forms-runtime-page">
       <WorkspaceFrame className="forms-runtime-shell" label="Forms runtime" interfaceId="forms-runtime.workspace" helpContextId="forms-runtime.page.workspace" helpModuleId="forms-runtime">
-        <ActionToolbar surface="panel-header" className="forms-runtime-toolbar">
+        <WorkspaceActionBar
-          <Button onClick={() => void load()} disabled={loading} disabledReason={loading ? FORMS_RUNTIME_I18N.loading : undefined}>
+          scope="workspace"
-            <RefreshCw size={16} aria-hidden="true" />
+          variant="collection"
-            Refresh
+          refreshable
-          </Button>
+          reloadAction={{ onReload: () => void load(), loading }}
+          className="forms-runtime-toolbar"
+          contextActions={<>
             {canAdmin &&
             <Button onClick={() => setIntakeOpen(true)}>
               <Link2 size={16} aria-hidden="true" />
@@ -86,12 +88,6 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
               Status access
             </Button>
             }
-          {canAssist &&
-            <Button onClick={() => setAssistedOpen(true)}>
-              <UserRoundPlus size={16} aria-hidden="true" />
-              Assisted intake
-            </Button>
-          }
             <label>
               <span>Status</span>
               <select value={status} onChange={(event) => setStatus(event.target.value)}>
@@ -107,8 +103,15 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
               </select>
             </label>
             <span className="forms-runtime-count">{i18nMessage("i18n:govoplan-forms-runtime.form_count", { total })}</span>
-          <DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
+          </>}
-        </ActionToolbar>
+          createAction={canAssist ?
+            <Button onClick={() => setAssistedOpen(true)}>
+              <UserRoundPlus size={16} aria-hidden="true" />
+              Assisted intake
+            </Button>
+          : undefined}
+          helpAction={<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />}
+        />
         <PageScrollViewport className="forms-runtime-list-viewport">
           {error &&
             <DismissibleAlert tone="danger" resetKey={error}>