Changed Global Messages to Modal

components/GlobalMessages.vue

@@ -11,7 +11,16 @@ const setup = async () => {
   data = data.filter((message) => message.profiles.length === 0)
 
   globalMessages.value = data
+
+  if(data.length > 0) {
+    messageToShow.value = data[0]
+    showMessageModal.value = true
   }
+
+
+}
+
+
 const showMessageModal = ref(false)
 const messageToShow = ref(null)
 
@@ -24,15 +33,32 @@ const markMessageAsRead = async () => {
     profile: profileStore.activeProfile.id,
     message: messageToShow.value.id,
   })
-  setup()
   showMessageModal.value = false
+  setup()
+
 }
 
+
+
+
 setup()
 </script>
 
 <template>
-  <UCard
+  <UModal v-model="showMessageModal" prevent-close>
+    <UCard>
+      <template #header>
+        <span class="font-bold">{{messageToShow.title}}</span>
+      </template>
+      <p class=" my-2" v-html="messageToShow.description"></p>
+      <UButton
+          variant="outline"
+          @click="markMessageAsRead"
+      >Gelesen</UButton>
+    </UCard>
+  </UModal>
+
+<!--  <UCard
       v-if="globalMessages.length >0"
       class="mt-3"
       style="border: .75px solid #69c350"
@@ -55,7 +81,7 @@ setup()
         >Gelesen</UButton>
       </UCard>
     </UModal>
-  </UCard>
+  </UCard>-->
 </template>
 
 <style scoped>