Define semantic page archetypes

webui/conformance/ConformanceApp.tsx

@@ -33,29 +33,29 @@ import type { AuthInfo } from "../src/types";
 
 export default function ConformanceApp() {
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [editorDirty, setEditorDirty] = useState(true);
 
   return (
     <main className="conformance-root" data-conformance-id="shared-ui-lab">
       <PageLayout
+        archetype="overview"
         mode="embedded"
         title="Zentrale GovOPlaN-Oberflächen"
         description="Diese Prüfseite rendert reale gemeinsame Komponenten mit langen deutschen Beschriftungen, Zuständen und responsiven Zusammensetzungen."
-        actions={<Button variant="primary" data-testid="open-dialog" onClick={() => setDialogOpen(true)}>Prüfdialog öffnen</Button>}
+        actions={<PageActionBar variant="overview" primaryActions={<Button variant="primary" data-testid="open-dialog" onClick={() => setDialogOpen(true)}>Prüfdialog öffnen</Button>} />}
       >
         <section className="conformance-section" aria-labelledby="actions-heading">
           <h2 id="actions-heading">Aktionen, Filter und Status</h2>
           <PageActionBar
             variant="editor"
+            refreshable
+            dirty={editorDirty}
             label="Bearbeitungsaktionen"
             reloadAction={<Button variant="ghost">Neu laden</Button>}
-            contextActions={(
-              <>
-                <Button>Vorschau öffnen</Button>
-                <Button variant="danger" disabledReason="Nur die federführende Stelle darf diesen Vorgang endgültig löschen.">Löschen</Button>
-              </>
-            )}
-            discardAction={<Button variant="ghost">Verwerfen</Button>}
-            saveAction={<Button variant="primary">Änderungen speichern</Button>}
+            contextActions={<Button>Vorschau öffnen</Button>}
+            destructiveActions={<Button variant="danger" disabledReason="Nur die federführende Stelle darf diesen Vorgang endgültig löschen.">Löschen</Button>}
+            discardAction={{ label: "Verwerfen", onClick: () => setEditorDirty(false) }}
+            saveAction={{ label: "Änderungen speichern", onClick: () => setEditorDirty(false) }}
           />
           <FilterBar surface="control" aria-label="Vorgangsliste filtern">
             <label>Suche<input type="search" placeholder="Aktenzeichen oder verantwortliche Stelle" /></label>