Added PSA.

renderer/container.vue

@@ -16,6 +16,13 @@
 			ref="content"
 			class="content"
 		>
+			<p
+				v-if="psa.enabled"
+				class="psa"
+				:class="{ [psa.type]: true }"
+				v-html="psa.text"
+			/>
+
 			<slot @scroll="scroll" />
 		</div>
 
@@ -39,7 +46,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import {
+	ref,
+	onMounted,
+	nextTick,
+	inject,
+} from 'vue';
 
 import events from '#/src/events.js';
 
@@ -47,6 +59,9 @@ import Header from '#/components/header/header.vue';
 import Sidebar from '#/components/sidebar/sidebar.vue';
 import BottomNavigation from '#/components/footer/navigation.vue';
 
+const pageContext = inject('pageContext');
+const { psa } = pageContext.env;
+
 const content = ref(null);
 const feedback = ref(null);
 const feedbackContainer = ref(null);
@@ -114,6 +129,24 @@ onMounted(() => {
 		transform: translate(100%, 0);
 	}
 }
+
+.psa {
+	padding: .5rem 1rem;
+	margin: 0;
+	box-shadow: inset 0 0 3px var(--shadow-weak-20);
+	background: var(--notice);
+	color: var(--text-light);
+	text-align: center;
+	font-weight: bold;
+
+	&.alert {
+		background: var(--warn);
+	}
+
+	a {
+		color: inherit;
+	}
+}
 </style>
 
 <style scoped>