Define semantic page archetypes

webui/src/features/settings/SettingsPage.tsx

@@ -8,6 +8,7 @@ import FormField from "../../components/FormField";
 import PasswordField from "../../components/PasswordField";
 import Button from "../../components/Button";
 import PageLayout from "../../components/PageLayout";
+import PageActionBar from "../../components/PageActionBar";
 import ToggleSwitch from "../../components/ToggleSwitch";
 import { apiFetch } from "../../api/client";
 import { fetchAuthProfile, fetchAuthRoles, updateProfile } from "../../api/auth";
@@ -306,6 +307,22 @@ export default function SettingsPage({
     }
   }
 
+  const editorSection = active === "profile" || active === "interface" || active === "workspace";
+  const editorDirty = active === "profile" ? profileDirty : editorSection ? uiDirty : false;
+  const editorSaving = active === "profile" ? profileBusy : editorSection ? uiBusy : false;
+  const discardEditor = () => {
+    if (active === "profile") {
+      setProfileName(auth.user.display_name || "");
+      setTenantProfileName(auth.user.tenant_display_name || "");
+    } else {
+      resetUiPreferences();
+    }
+  };
+  const saveEditor = () => {
+    if (active === "profile") void saveProfile();
+    else void saveUiPreferences();
+  };
+
   return (
     <WorkspaceLayout
       className="module-workspace"
@@ -314,9 +331,24 @@ export default function SettingsPage({
       contentLabel="i18n:govoplan-core.settings.c7f73bb5"
     >
       <PageLayout
+        archetype={editorSection ? "editor" : "workspace"}
         title="i18n:govoplan-core.settings.c7f73bb5"
         description="i18n:govoplan-core.your_profile_personal_webui_preferences_and_loca.beda6d56"
-        actions={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />}
+        actions={editorSection ? (
+          <PageActionBar
+            variant="editor"
+            dirty={editorDirty}
+            saving={editorSaving}
+            helpAction={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />}
+            discardAction={{ label: "i18n:govoplan-core.discard.36fff63c", onClick: discardEditor }}
+            saveAction={{
+              label: active === "profile" ? "i18n:govoplan-core.save_profile.f597c0e8" : "i18n:govoplan-core.save_preferences.0f1a7e44",
+              onClick: saveEditor
+            }}
+          />
+        ) : (
+          <PageActionBar variant="workspace" helpAction={<DocumentationHelpLink reference={SETTINGS_DOCUMENTATION} />} />
+        )}
         mode="workspace"
       >
 
@@ -333,16 +365,6 @@ export default function SettingsPage({
                   <FormField label="i18n:govoplan-core.email.84add5b2">
                     <input value={auth.user.email} disabled />
                   </FormField>
-                  <div className="button-row compact-actions">
-                    <Button
-                      variant="primary"
-                      onClick={() => void saveProfile()}
-                      disabled={profileBusy || !profileDirty}
-                      disabledReason={profileBusy ? "Profile changes are already being saved." : !profileDirty ? "There are no unsaved profile changes." : undefined}
-                    >
-                      {profileBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_profile.f597c0e8"}
-                    </Button>
-                  </div>
                   {profileResult && <DismissibleAlert tone={profileResultTone} resetKey={profileResult} floating>{profileResult}</DismissibleAlert>}
                 </FormGrid>
               </Card>
@@ -418,16 +440,6 @@ export default function SettingsPage({
                   checked={reduceMotion}
                   onChange={setReduceMotion} />
                 
-                  <div className="button-row compact-actions">
-                    <Button
-                      variant="primary"
-                      onClick={() => void saveUiPreferences()}
-                      disabled={uiBusy || !uiDirty}
-                      disabledReason={uiBusy ? "Interface preferences are already being saved." : !uiDirty ? "There are no unsaved interface changes." : undefined}
-                    >
-                      {uiBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_preferences.0f1a7e44"}
-                    </Button>
-                  </div>
                   {uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
                 </FormGrid>
               </Card>
@@ -481,16 +493,6 @@ export default function SettingsPage({
                   disabled
                   onChange={() => undefined} />
                 
-                  <div className="button-row compact-actions">
-                    <Button
-                      variant="primary"
-                      onClick={() => void saveUiPreferences()}
-                      disabled={uiBusy || !uiDirty}
-                      disabledReason={uiBusy ? "Workspace preferences are already being saved." : !uiDirty ? "There are no unsaved workspace changes." : undefined}
-                    >
-                      {uiBusy ? "i18n:govoplan-core.saving.56a2285c" : "i18n:govoplan-core.save_preferences.0f1a7e44"}
-                    </Button>
-                  </div>
                   {uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
                 </FormGrid>
               </Card>