Added actor stash.

renderer/+config.h.js

@@ -1,3 +1,10 @@
 export default {
-	passToClient: ['pageProps', 'urlPathname', 'routeParams', 'urlParsed', 'env', 'user'],
+	passToClient: [
+		'pageProps',
+		'urlPathname',
+		'routeParams',
+		'urlParsed',
+		'env',
+		'user',
+	],
 };

renderer/container.vue

@@ -23,11 +23,23 @@
 			class="nav"
 			@sidebar="showSidebar = true"
 		/>
+
+		<div
+			ref="feedbackContainer"
+			class="feedback-container"
+		>
+			<div
+				v-if="feedback"
+				ref="feedbackBubble"
+				class="feedback"
+				:class="{ [feedback.type]: true }"
+			>{{ feedback.message }}</div>
+		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 
 import events from '#/src/events.js';
 
@@ -36,6 +48,9 @@ import Sidebar from '#/components/sidebar/sidebar.vue';
 import BottomNavigation from '#/components/footer/navigation.vue';
 
 const content = ref(null);
+const feedback = ref(null);
+const feedbackContainer = ref(null);
+const feedbackBubble = ref(null);
 const showSidebar = ref(false);
 
 function blur() {
@@ -44,6 +59,38 @@ function blur() {
 
 onMounted(() => {
 	events.on('scrollUp', () => { content.value.scrollTop = 0; });
+
+	events.on('feedback', async (event) => {
+		console.log(event);
+
+		feedback.value = event;
+
+		await nextTick();
+
+		feedbackBubble.value.animate([
+			{
+				visibility: 'visible',
+				transform: 'scaleY(0)',
+				opacity: 1,
+			},
+			{
+				transform: 'scaleY(1)',
+				opacity: 1,
+				offset: 0.002,
+			},
+			{
+				transform: 'scaleY(1)',
+				opacity: 1,
+				offset: 0.5,
+			},
+			{
+				opacity: 0,
+			},
+		], {
+			duration: 3000,
+			easing: 'ease-in-out',
+		});
+	});
 });
 </script>
 
@@ -102,9 +149,47 @@ onMounted(() => {
 	display: none;
 }
 
+.feedback-container {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	position: fixed;
+	bottom: 1rem;;
+	z-index: 1000;
+	pointer-events: none;
+}
+
+.feedback {
+	padding: .5rem 1rem;
+	margin: 0 .5rem;
+	border-radius: 1rem;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+	background: var(--grey-dark-40);
+	color: var(--text-light);
+	font-size: .9rem;
+	visibility: hidden;
+	line-height: 1.5;
+
+	&.success {
+		background: var(--success);
+	}
+
+	&.error {
+		background: var(--error);
+	}
+
+	&.remove {
+		background: var(--warn);
+	}
+}
+
 @media(--small-10) {
 	.nav {
 		display: flex;
 	}
+
+	.feedback-container {
+		bottom: 4rem;
+	}
 }
 </style>

renderer/usePageContext.js

@@ -1,18 +1,15 @@
 // `usePageContext` allows us to access `pageContext` in any Vue component.
 // See https://vike.dev/pageContext-anywhere
 
-import { inject } from 'vue'
+import { inject } from 'vue';
 
-export { usePageContext }
-export { setPageContext }
+const key = Symbol(); // eslint-disable-line symbol-description
 
-const key = Symbol()
-
-function usePageContext() {
-  const pageContext = inject(key)
-  return pageContext
+export function usePageContext() {
+	const pageContext = inject(key);
+	return pageContext;
 }
 
-function setPageContext(app, pageContext) {
-  app.provide(key, pageContext)
+export function setPageContext(app, pageContext) {
+	app.provide(key, pageContext);
 }