Worked on commands, notifications

src/components/utilities/Modal.vue

@@ -42,6 +42,12 @@ const x = ref(0);
 const y = ref(0);
 const isDragging = ref(false);
 
+// set modal position center of the screen
+onMounted(() => {
+  x.value = (window.innerWidth / 2) - 150;
+  y.value = (window.innerHeight / 2) - 100;
+});
+
 const startDrag = (event: MouseEvent) => {
   isDragging.value = true;
   startX = event.clientX;

src/components/utilities/Notifications.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="notifications">
+    <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+      <template #modal-body>
+          <p>{{ notification.message }}</p>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from '@/stores/notifications'
+import { useSocketStore } from '@/stores/socket'
+import Modal from '@/components/utilities/Modal.vue'
+
+const notifications = useNotificationStore();
+const socket = useSocketStore();
+
+if (socket.getConnection) {
+  socket.getConnection.on('notification', (data: any) => {
+    notifications.addNotification(data);
+  });
+}
+
+function closeNotification(id: string) {
+  notifications.removeNotification(id);
+}
+</script>