chore: added example modal that can be used as a template/base

frontend/src/components/ModalManager.vue

@@ -8,6 +8,7 @@ const { modals, activeModals } = storeToRefs(modalsStore);
 
 const modalComponents = shallowRef(
 	useModalComponents("components/modals", {
+		example: "Example.vue",
 		editUser: "EditUser.vue",
 		login: "Login.vue",
 		register: "Register.vue",

frontend/src/components/modals/Example.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// import Toast from "toasters";
+import {
+	defineAsyncComponent
+	// ref,
+	// computed,
+	// onMounted
+} from "vue";
+// import { useWebsocketsStore } from "@/stores/websockets";
+// import { useModalsStore } from "@/stores/modals";
+
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+// const SaveButton = defineAsyncComponent(
+// 	() => import("@/components/SaveButton.vue")
+// );
+
+defineProps({
+	modalUuid: { type: String, required: true }
+});
+
+// const { socket } = useWebsocketsStore();
+
+// const { closeCurrentModal, openModal } = useModalsStore();
+</script>
+
+<template>
+	<modal class="example-modal" title="Example" :size="'wide'" :split="true">
+		<template #body>
+			<div class="flex flex-column w-full"></div>
+		</template>
+		<template #footer>
+			<div>
+				<button class="button is-primary">Button</button>
+			</div>
+		</template>
+	</modal>
+</template>
+
+<style lang="less" scoped>
+.flex {
+	display: flex;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.flex-row {
+	flex-direction: row;
+}
+
+.w-full {
+	width: 100%;
+}
+</style>