refactor(webui): adopt semantic workspace actions

webui/src/features/scheduling/SchedulingPage.tsx

@@ -38,6 +38,7 @@ import { ContentGrid, FormGrid,
   ToggleSwitch,
   StatusBadge,
   StageRail,
+  WorkspaceActionBar,
   WorkspaceFrame,
   hasScope,
   i18nMessage,
@@ -899,19 +900,23 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
             <Card
               title={I18N.requests}
               actions={(
-                <div className="scheduling-sidebar-actions">
-                  <IconButton
-                    label={I18N.refresh}
-                    icon={<RefreshCw aria-hidden="true" size={16} />}
-                    onClick={() => requestNavigation(() => void loadRequests(selected?.id))}
-                    disabled={loading || saving}
-                    disabledReason={saving ? I18N.saving : undefined} />
-                  <DocumentationHelpLink
+                <WorkspaceActionBar
+                  scope="collection-pane"
+                  variant="collection"
+                  refreshable
+                  reloadAction={{
+                    onReload: () => void loadRequests(selected?.id),
+                    loading: loading || saving,
+                    disabledReason: saving ? I18N.saving : undefined,
+                    label: I18N.refresh
+                  }}
+                  className="scheduling-sidebar-actions"
+                  helpAction={<DocumentationHelpLink
                     reference={{
                       topicId: "scheduling.find-and-decide-meeting-time",
                       documentationType: "user"
-                    }} />
-                  {canCreateOrWrite ? (
+                    }} />}
+                  createAction={canCreateOrWrite ? (
                     <Button
                       type="button"
                       variant="primary"
@@ -920,8 +925,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
                       disabledReason={saving ? I18N.saving : undefined}>
                       <Plus aria-hidden="true" size={16} /> {I18N.add}
                     </Button>
-                  ) : null}
-                </div>
+                  ) : undefined}
+                />
               )}>
               {loading ? <p className="scheduling-note" role="status">{I18N.loading}</p> : null}
               <RequestGroup
@@ -956,37 +961,32 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
 
             {editorMode ? (
               <div className="scheduling-editor-surface">
-                <header className="scheduling-page-header">
-                  <div className="scheduling-page-title">
+                <WorkspaceActionBar
+                  scope="editor-pane"
+                  variant="editor"
+                  state={saving ? "saving" : draftDirty && !title.trim() ? "invalid" : draftDirty ? "dirty" : "clean"}
+                  className="scheduling-page-header"
+                  contextActions={<div className="scheduling-page-title">
                     <CalendarCheck aria-hidden="true" size={20} />
                     <div>
                       <PageTitle>{editorMode === "create" ? I18N.newRequest : I18N.edit}</PageTitle>
                       <p>{editorMode === "create" ? I18N.addRequest : title}</p>
                     </div>
-                  </div>
-                  <div className="scheduling-page-actions">
-                    <DocumentationHelpLink
+                  </div>}
+                  helpAction={<DocumentationHelpLink
                       reference={{
                         topicId: "scheduling.find-and-decide-meeting-time",
                         documentationType: "user"
-                      }} />
-                    <Button
-                      type="button"
-                      onClick={discardEditor}
-                      disabled={saving}
-                      disabledReason={saving ? I18N.saving : undefined}>
-                      {I18N.discard}
-                    </Button>
-                    <Button
-                      type="submit"
-                      form="scheduling-editor-form"
-                      variant="primary"
-                      disabled={saving || !canCreateOrWrite}
-                      disabledReason={saving ? I18N.saving : !canCreateOrWrite ? I18N.unavailable : undefined}>
-                      <Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}
-                    </Button>
-                  </div>
-                </header>
+                      }} />}
+                  discardAction={{ label: I18N.discard, type: "button", onClick: discardEditor }}
+                  saveAction={{
+                      label: <><Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}</>,
+                      type: "submit",
+                      form: "scheduling-editor-form",
+                      disabled: saving || !canCreateOrWrite,
+                      disabledReason: saving ? I18N.saving : !canCreateOrWrite ? I18N.unavailable : undefined
+                  }}
+                />
 
                 <form
                   id="scheduling-editor-form"