From ee5c907a727dfae96a63eae85bf4719fa58d31df Mon Sep 17 00:00:00 2001
From: Kaity A <kaity@theallans.com.au>
Date: Sun, 14 May 2023 00:04:24 +1000
Subject: [PATCH] Add page header to experiments

---
 .../client/src/pages/admin/experiments.vue    | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/pages/admin/experiments.vue b/packages/client/src/pages/admin/experiments.vue
index 2f04b88ab8..52ea4d8c38 100644
--- a/packages/client/src/pages/admin/experiments.vue
+++ b/packages/client/src/pages/admin/experiments.vue
@@ -1,23 +1,31 @@
 <template>
 	<MkStickyContainer>
-		<FormSuspense :p="init">
-			<FormSwitch
-				v-model="enableExperimentalPostEditing"
-				@update:modelValue="save"
-				class="_formBlock"
-			>
-				<template #label
-					><i class="ph-pencil-line ph-bold ph-lg"></i
-					>{{ i18n.ts._experiments.enableExperimentalPostEditing
-					}}<span class="level alpha"
-						>({{ i18n.ts._experiments.alpha }})</span
-					></template
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormSwitch
+					v-model="enableExperimentalPostEditing"
+					@update:modelValue="save"
+					class="_formBlock"
 				>
-				<template #caption>{{
-					i18n.ts._experiments.experimentalPostEditingCaption
-				}}</template>
-			</FormSwitch>
-		</FormSuspense>
+					<template #label>
+						<i class="ph-pencil-line ph-bold ph-lg"></i>
+						{{ i18n.ts._experiments.enableExperimentalPostEditing }}
+						<span class="level alpha">
+							({{ 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",