Adding the discussion architectures and creating new discussions

frontend/src/Apps/Msg.vue

@@ -7,9 +7,9 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { getDiscussions, currentDiscussion, fetchDiscussion } from '@/rest/msg.js'
+	import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js'
 
-	const discussionsList = reactive(await getDiscussions());
+	const discussionsList = ref(await getDiscussions());
 
 </script>
 
@@ -17,6 +17,7 @@
 	<div id="msg">
 		<div id="discList">
 			<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
+			<button id="createDiscussion" @click="createDiscussion('New Discussion'); getDiscussions().then(e => { discussionsList = e; })">+</button>
 		</div>
 		<div id="discussion">
 			<h1 id=msgName >{{currentDiscussion.name}}</h1>
@@ -50,6 +51,8 @@ div#discList{
 	border-radius: 10px;
 	overflow: hidden;
 	padding: 10px;
+	display: flex;
+	flex-direction: column;
 
 }
 
@@ -66,6 +69,17 @@ div#discList{
 	border: 1px solid darkorange;
 }
 
+#createDiscussion{
+	height: 4vh;
+	margin: 5px;
+	color: white;
+	background-color: green;
+	border-radius: 0 30px 30px 0;
+	border: none;
+	font-weight: 900;
+	font-size: 2em;
+}
+
 div#discussion{
 	display: flex;
 	flex-direction: column;