Add page header to experiments

packages/client/src/pages/admin/experiments.vue

@@ -1,23 +1,31 @@
 <template>
 	<MkStickyContainer>
-		<FormSuspense :p="init">
+		<template #header
-			<FormSwitch
+			><MkPageHeader
-				v-model="enableExperimentalPostEditing"
+				:actions="headerActions"
-				@update:modelValue="save"
+				:tabs="headerTabs"
-				class="_formBlock"
+				:display-back-button="true"
-			>
+		/></template>
-				<template #label
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-					><i class="ph-pencil-line ph-bold ph-lg"></i
+			<FormSuspense :p="init">
-					>{{ i18n.ts._experiments.enableExperimentalPostEditing
+				<FormSwitch
-					}}<span class="level alpha"
+					v-model="enableExperimentalPostEditing"
-						>({{ i18n.ts._experiments.alpha }})</span
+					@update:modelValue="save"
-					></template
+					class="_formBlock"
 				>
-				<template #caption>{{
+					<template #label>
-					i18n.ts._experiments.experimentalPostEditingCaption
+						<i class="ph-pencil-line ph-bold ph-lg"></i>
-				}}</template>
+						{{ i18n.ts._experiments.enableExperimentalPostEditing }}
-			</FormSwitch>
+						<span class="level alpha">
-		</FormSuspense>
+							({{ i18n.ts._experiments.alpha }})</span
+						>
+					</template>
+					<template #caption>{{
+						i18n.ts._experiments.experimentalPostEditingCaption
+					}}</template>
+				</FormSwitch>
+			</FormSuspense>
+		</MkSpacer>
 	</MkStickyContainer>
 </template>
 
@@ -59,6 +67,10 @@ function save() {
 	});
 }
 
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
 definePageMetadata({
 	title: i18n.ts._experiments.title,
 	icon: "ph-flask ph-bold ph-lg",