added two apps, and better implementation

codeeditor-app/elements/notification-bubbles/notification-bubble.less

@@ -0,0 +1,38 @@
+notification-bubble {
+    margin: 10px;
+    padding: 10px;
+    color: black;
+    background-color: #a0ffa7;
+    border: 1px solid #8ddf92;
+    display: block;
+    position: relative;
+    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.19);
+    border-radius: 4px;
+}
+
+notification-bubble.log {
+    background-color: #ffffff;
+    border-color: #dfdfdf;
+}
+
+notification-bubble.info {
+    background-color: #e7e7b3;
+    border-color: #d4d4a9;
+}
+
+notification-bubble.warn {
+    background-color: #fff9a0;
+    border-color: #e6e094;
+}
+
+notification-bubble.error {
+    background-color: #ffa0a0;
+    border-color: #df8e8e;
+}
+
+notification-bubble.syntax-error {
+    background-color: #ff6262;
+    background-color: #d15353;
+    font-size: 22px;
+    padding: 30px;
+}

codeeditor-app/elements/notification-bubbles/notification-bubble.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from "../_base";
+import './notification-bubble.less';
+
+export class NotificationBubble extends BaseElement {
+    onInit(): void {
+
+        if (!this.classList.contains("syntax-error")) {
+            setTimeout(() => {
+                this.parentElement?.removeChild(this);
+            }, 4000);
+        }
+    }
+}

codeeditor-app/elements/notification-bubbles/notification-bubbles.less

@@ -0,0 +1,8 @@
+notification-bubbles {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+    width: 380px;
+}

codeeditor-app/elements/notification-bubbles/notification-bubbles.ts

@@ -0,0 +1,31 @@
+import { messageListener } from "../../../shared/message-listener";
+import { BaseElement } from "../_base";
+import { NotificationBubble } from "./notification-bubble";
+import './notification-bubbles.less';
+
+export class NotificationBubbles extends BaseElement {
+    add(text: string, type: 'log' | 'info' | 'warn' | 'error' | 'syntax-error' | 'script' | 'time' | 'response') {
+
+        if (text && type) {
+            var bubble = <NotificationBubble>document.createElement("notification-bubble");
+            bubble.innerText = text;
+            bubble.classList.add(type);
+            this.appendChild(bubble);
+
+            if (this.children.length > 50) {
+                this.removeChild(this.children[0]);
+            }
+        }
+    }
+
+    reset() {
+        this.innerHTML = "";
+    }
+
+    onInit(): void {
+        messageListener((type, value) => {
+            if (type != 'script' && type != 'response')
+                this.add(value, type);
+        });
+    }
+}