Added "type" argument to flashNotification (to distinguish between error and info)

packages/plugos-silverbullet-syscall/editor.ts

@@ -41,8 +41,11 @@ export function openUrl(url: string): Promise<void> {
   return syscall("editor.openUrl", url);
 }
 
-export function flashNotification(message: string): Promise<void> {
-  return syscall("editor.flashNotification", message);
+export function flashNotification(
+  message: string,
+  type: "info" | "error" = "info"
+): Promise<void> {
+  return syscall("editor.flashNotification", message, type);
 }
 
 export function filterBox(

packages/web/components/top_bar.tsx

@@ -39,9 +39,14 @@ export function TopBar({
             {prettyName(pageName)}
           </span>
           {notifications.length > 0 && (
-            <div className="status">
+            <div className="notifications">
               {notifications.map((notification) => (
-                <div key={notification.id}>{notification.message}</div>
+                <div
+                  key={notification.id}
+                  className={`notification-${notification.type}`}
+                >
+                  {notification.message}
+                </div>
               ))}
             </div>
           )}

packages/web/editor.tsx

@@ -272,22 +272,26 @@ export class Editor {
     });
   }
 
-  flashNotification(message: string) {
+  flashNotification(message: string, type: "info" | "error" = "info") {
     let id = Math.floor(Math.random() * 1000000);
     this.viewDispatch({
       type: "show-notification",
       notification: {
-        id: id,
-        message: message,
+        id,
+        type,
+        message,
         date: new Date(),
       },
     });
-    setTimeout(() => {
-      this.viewDispatch({
-        type: "dismiss-notification",
-        id: id,
-      });
-    }, 2000);
+    setTimeout(
+      () => {
+        this.viewDispatch({
+          type: "dismiss-notification",
+          id: id,
+        });
+      },
+      type === "info" ? 2000 : 5000
+    );
   }
 
   filterBox(
@@ -334,7 +338,10 @@ export class Editor {
               .then(def.run)
               .catch((e: any) => {
                 console.error(e);
-                this.flashNotification(`Error running command: ${e.message}`);
+                this.flashNotification(
+                  `Error running command: ${e.message}`,
+                  "error"
+                );
               });
             return true;
           },

packages/web/styles/main.scss

@@ -76,18 +76,28 @@ body {
       display: flex;
       flex-direction: row;
 
-      .status {
+      .notifications {
         position: absolute;
         font-family: "iA-Mono";
         bottom: 45px;
         left: 5px;
         right: 5px;
-        background-color: rgb(187, 221, 247);
-        border: rgb(41, 41, 41) 1px solid;
-        border-radius: 5px;
-        padding: 3px;
         font-size: 15px;
         z-index: 100;
+
+        > div {
+          padding: 3px;
+          margin-bottom: 3px;
+          border-radius: 5px;
+          border: rgb(41, 41, 41) 1px solid;
+        }
+
+        .notification-info {
+          background-color: rgb(187, 221, 247);
+        }
+        .notification-error {
+          background-color: rgb(255, 84, 84);
+        }
       }
 
       .current-page {

packages/web/syscalls/editor.ts

@@ -55,8 +55,12 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
         win.focus();
       }
     },
-    "editor.flashNotification": (ctx, message: string) => {
-      editor.flashNotification(message);
+    "editor.flashNotification": (
+      ctx,
+      message: string,
+      type: "error" | "info" = "info"
+    ) => {
+      editor.flashNotification(message, type);
     },
     "editor.filterBox": (
       ctx,

packages/web/types.ts

@@ -6,6 +6,7 @@ export const slashCommandRegexp = /\/[\w\-]*/;
 export type Notification = {
   id: number;
   message: string;
+  type: "info" | "error";
   date: Date;
 };