diff --git a/packages/plugos-silverbullet-syscall/editor.ts b/packages/plugos-silverbullet-syscall/editor.ts index 264efbab..d944ad2c 100644 --- a/packages/plugos-silverbullet-syscall/editor.ts +++ b/packages/plugos-silverbullet-syscall/editor.ts @@ -41,8 +41,11 @@ export function openUrl(url: string): Promise { return syscall("editor.openUrl", url); } -export function flashNotification(message: string): Promise { - return syscall("editor.flashNotification", message); +export function flashNotification( + message: string, + type: "info" | "error" = "info" +): Promise { + return syscall("editor.flashNotification", message, type); } export function filterBox( diff --git a/packages/web/components/top_bar.tsx b/packages/web/components/top_bar.tsx index e0d80225..578e7c46 100644 --- a/packages/web/components/top_bar.tsx +++ b/packages/web/components/top_bar.tsx @@ -39,9 +39,14 @@ export function TopBar({ {prettyName(pageName)} {notifications.length > 0 && ( -
+
{notifications.map((notification) => ( -
{notification.message}
+
+ {notification.message} +
))}
)} diff --git a/packages/web/editor.tsx b/packages/web/editor.tsx index 3aa4cd25..c1748130 100644 --- a/packages/web/editor.tsx +++ b/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; }, diff --git a/packages/web/styles/main.scss b/packages/web/styles/main.scss index 1f8ef80c..10749661 100644 --- a/packages/web/styles/main.scss +++ b/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 { diff --git a/packages/web/syscalls/editor.ts b/packages/web/syscalls/editor.ts index f82a2a4e..0008a10c 100644 --- a/packages/web/syscalls/editor.ts +++ b/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, diff --git a/packages/web/types.ts b/packages/web/types.ts index 4f039673..94035d0a 100644 --- a/packages/web/types.ts +++ b/packages/web/types.ts @@ -6,6 +6,7 @@ export const slashCommandRegexp = /\/[\w\-]*/; export type Notification = { id: number; message: string; + type: "info" | "error"; date: Date; };