From 0251b9f13c4a9f4e1928d595f178097fa3e9c046 Mon Sep 17 00:00:00 2001
From: Brian Holmes <120223836+briangregoryholmes@users.noreply.github.com>
Date: Fri, 10 May 2024 09:45:06 -0400
Subject: [PATCH] Feat/Refactor: EventBus and Notifications (#4869)

* initial commit

* import fix

* persist link notifications
---
 .../src/features/bookmarks/Bookmarks.svelte   |   6 +-
 .../bookmarks/CreateBookmarkDialog.svelte     |   6 +-
 .../bookmarks/EditBookmarkDialog.svelte       |   4 +-
 .../share/ShareDashboardButton.svelte         |   8 +-
 .../metadata/RunNowButton.svelte              |   4 +-
 .../timestamp-profile/TimestampBound.svelte   |   6 +-
 .../timestamp-profile/TimestampDetail.svelte  |   4 +-
 .../notifications/Notification.svelte         | 195 ++++++++----------
 .../notifications/NotificationCenter.svelte   |  43 ++--
 .../PersistedLinkNotification.svelte          |  37 ----
 .../PersistedNotification.svelte              |  31 ---
 .../src/components/notifications/index.ts     |   1 -
 .../notifications/notificationStore.ts        | 100 ---------
 .../virtualized-table/VirtualTable.svelte     |   5 +-
 .../virtualized-table/core/Cell.svelte        |   4 +-
 .../core/ColumnHeader.svelte                  |   4 +-
 .../features/alerts/CreateAlertDialog.svelte  |   7 +-
 .../features/alerts/EditAlertDialog.svelte    |   4 +-
 .../big-number/MeasureBigNumber.svelte        |   4 +-
 .../dimension-table/DimensionDisplay.svelte   |   6 +-
 .../leaderboard/LeaderboardListItem.svelte    |   4 +-
 .../TimeDimensionDisplay.svelte               |   6 +-
 .../src/features/entity-management/actions.ts |   8 +-
 .../features/entity-management/ui-actions.ts  |   6 +-
 .../file-explorer/FileExplorer.svelte         |   4 +-
 .../ai-generation/generateMetricsView.ts      |   6 +-
 .../CreateScheduledReportDialog.svelte        |   7 +-
 .../EditScheduledReportDialog.svelte          |   4 +-
 .../src/features/sources/createModel.ts       |   4 +-
 .../sources/modal/RequestConnectorForm.svelte |   4 +-
 .../src/features/sources/modal/file-upload.ts |   4 +-
 .../src/lib/actions/shift-click-action.ts     |   4 +-
 web-common/src/lib/event-bus/event-bus.ts     |  45 ++++
 web-common/src/lib/event-bus/events.ts        |  16 ++
 .../src/routes/(application)/+layout.svelte   |   2 -
 web-local/src/routes/+layout.svelte           |   3 +
 36 files changed, 238 insertions(+), 368 deletions(-)
 delete mode 100644 web-common/src/components/notifications/PersistedLinkNotification.svelte
 delete mode 100644 web-common/src/components/notifications/PersistedNotification.svelte
 delete mode 100644 web-common/src/components/notifications/index.ts
 delete mode 100644 web-common/src/components/notifications/notificationStore.ts
 create mode 100644 web-common/src/lib/event-bus/event-bus.ts
 create mode 100644 web-common/src/lib/event-bus/events.ts

diff --git a/web-admin/src/features/bookmarks/Bookmarks.svelte b/web-admin/src/features/bookmarks/Bookmarks.svelte
index 1c69bb34429..8a528cfff3d 100644
--- a/web-admin/src/features/bookmarks/Bookmarks.svelte
+++ b/web-admin/src/features/bookmarks/Bookmarks.svelte
@@ -17,12 +17,12 @@
   import EditBookmarkDialog from "@rilldata/web-admin/features/bookmarks/EditBookmarkDialog.svelte";
   import { getBookmarkDataForDashboard } from "@rilldata/web-admin/features/bookmarks/getBookmarkDataForDashboard";
   import type { BookmarkEntry } from "@rilldata/web-admin/features/bookmarks/selectors";
-  import { notifications } from "@rilldata/web-common/components/notifications";
   import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useQueryClient } from "@tanstack/svelte-query";
   import { BookmarkIcon } from "lucide-svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
   $: metricsViewName = $page.params.dashboard;
 
@@ -50,7 +50,7 @@
     await homeBookmarkModifier(
       getBookmarkDataForDashboard($dashboardStore, false, false),
     );
-    notifications.send({
+    eventBus.emit("notification", {
       message: "Home bookmark created",
     });
     return queryClient.refetchQueries(
@@ -67,7 +67,7 @@
     await $bookmarkDeleter.mutateAsync({
       bookmarkId: bookmark.resource.id,
     });
-    notifications.send({
+    eventBus.emit("notification", {
       message: `Bookmark ${bookmark.resource.displayName} deleted`,
     });
     return queryClient.refetchQueries(
diff --git a/web-admin/src/features/bookmarks/CreateBookmarkDialog.svelte b/web-admin/src/features/bookmarks/CreateBookmarkDialog.svelte
index 2c227e7f0f8..7103fd273aa 100644
--- a/web-admin/src/features/bookmarks/CreateBookmarkDialog.svelte
+++ b/web-admin/src/features/bookmarks/CreateBookmarkDialog.svelte
@@ -10,7 +10,7 @@
   } from "@rilldata/web-admin/client";
   import { Button } from "@rilldata/web-common/components/button";
   import { getBookmarkDataForDashboard } from "@rilldata/web-admin/features/bookmarks/getBookmarkDataForDashboard";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { useQueryClient } from "@tanstack/svelte-query";
@@ -57,14 +57,14 @@
         },
       });
       handleReset();
-      queryClient.refetchQueries(
+      await queryClient.refetchQueries(
         getAdminServiceListBookmarksQueryKey({
           projectId: $projectId.data ?? "",
           resourceKind: ResourceKind.MetricsView,
           resourceName: metricsViewName,
         }),
       );
-      notifications.send({
+      eventBus.emit("notification", {
         message: "Bookmark created",
       });
       handleClose();
diff --git a/web-admin/src/features/bookmarks/EditBookmarkDialog.svelte b/web-admin/src/features/bookmarks/EditBookmarkDialog.svelte
index 6907ed00770..15443655247 100644
--- a/web-admin/src/features/bookmarks/EditBookmarkDialog.svelte
+++ b/web-admin/src/features/bookmarks/EditBookmarkDialog.svelte
@@ -11,7 +11,7 @@
   import { Button } from "@rilldata/web-common/components/button";
   import { getBookmarkDataForDashboard } from "@rilldata/web-admin/features/bookmarks/getBookmarkDataForDashboard";
   import type { BookmarkEntry } from "@rilldata/web-admin/features/bookmarks/selectors";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { useQueryClient } from "@tanstack/svelte-query";
@@ -63,7 +63,7 @@
           resourceName: metricsViewName,
         }),
       );
-      notifications.send({
+      eventBus.emit("notification", {
         message: "Bookmark updated",
       });
       handleClose();
diff --git a/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte b/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte
index 986611ba37f..2770a67510b 100644
--- a/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte
+++ b/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte
@@ -2,13 +2,13 @@
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import Link from "@rilldata/web-common/components/icons/Link.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
-  function handleCopyLink() {
+  async function handleCopyLink() {
     // Copy the current URL to the clipboard
-    navigator.clipboard.writeText(window.location.href);
+    await navigator.clipboard.writeText(window.location.href);
 
-    notifications.send({
+    eventBus.emit("notification", {
       message: "Link copied to clipboard",
     });
   }
diff --git a/web-admin/src/features/scheduled-reports/metadata/RunNowButton.svelte b/web-admin/src/features/scheduled-reports/metadata/RunNowButton.svelte
index 03b694cf1b1..a311451e892 100644
--- a/web-admin/src/features/scheduled-reports/metadata/RunNowButton.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/RunNowButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createAdminServiceTriggerReport } from "@rilldata/web-admin/client";
   import { Button } from "@rilldata/web-common/components/button";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
@@ -28,7 +28,7 @@
       data: undefined,
     });
 
-    notifications.send({
+    eventBus.emit("notification", {
       message: "Triggered an ad-hoc run of this report.",
       type: "success",
     });
diff --git a/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampBound.svelte b/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampBound.svelte
index 560fdc0e572..38f08ea0364 100644
--- a/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampBound.svelte
+++ b/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampBound.svelte
@@ -5,7 +5,7 @@
    * This component will render the label bound on the TimestampDetail.svelte graph.
    * It also enables a shift + click to copy the bound as a query-ready timestamp.
    */
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Shortcut from "@rilldata/web-common/components/tooltip/Shortcut.svelte";
   import StackingWord from "@rilldata/web-common/components/tooltip/StackingWord.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
@@ -45,7 +45,9 @@
       if (valueWithoutOffset === undefined) return;
       const exportedValue = `TIMESTAMP '${valueWithoutOffset.toISOString()}'`;
       await navigator.clipboard.writeText(exportedValue);
-      notifications.send({ message: `copied ${exportedValue} to clipboard` });
+      eventBus.emit("notification", {
+        message: `copied ${exportedValue} to clipboard`,
+      });
       // update this to set the active animation in the tooltip text
     }}
   >
diff --git a/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampDetail.svelte b/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampDetail.svelte
index e88569a2939..63742b22bf8 100644
--- a/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampDetail.svelte
+++ b/web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampDetail.svelte
@@ -13,7 +13,7 @@
    * The graph will contain an unsmoothed series (showing noise * abnormalities) by default, and
    * a smoothed series (showing the trend) if the time series merits it.
    */
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import { createShiftClickAction } from "@rilldata/web-common/lib/actions/shift-click-action";
   import { guidGenerator } from "@rilldata/web-common/lib/guid";
@@ -316,7 +316,7 @@
         ).toISOString()}'`;
         await navigator.clipboard.writeText(exportedValue);
         setTimeout(() => {
-          notifications.send({
+          eventBus.emit("notification", {
             message: `copied ${exportedValue} to clipboard`,
           });
         }, 200);
diff --git a/web-common/src/components/notifications/Notification.svelte b/web-common/src/components/notifications/Notification.svelte
index eb6283195a9..fdea8e163b3 100644
--- a/web-common/src/components/notifications/Notification.svelte
+++ b/web-common/src/components/notifications/Notification.svelte
@@ -1,142 +1,125 @@
-<script>
+<script lang="ts">
   import { scale } from "svelte/transition";
-
-  export let width = undefined;
-  export let level = "info"; // info, error.
-
-  export let xOffset = undefined;
-  export let yOffset = undefined;
-
-  // positioning elements.
-  export let location;
-
-  // if specified, set the width variable.
-
-  function makeStyle({ width, xOffset, yOffset }) {
-    let styles = [
-      width ? `--width: ${width}` : undefined,
-      xOffset ? `--x-offset: ${xOffset}` : undefined,
-      yOffset ? `--y-offset: ${yOffset}` : undefined,
-    ];
-    return styles.filter((d) => d !== undefined).join("; ");
-  }
-
-  $: style = makeStyle({ width, xOffset, yOffset });
+  import { portal } from "@rilldata/web-common/lib/actions/portal";
+  import type { NotificationMessage } from "@rilldata/web-common/lib/event-bus/events";
+  import Close from "../icons/Close.svelte";
+  import Check from "../icons/Check.svelte";
+  import Button from "../button/Button.svelte";
+  import { onMount } from "svelte";
+  import WarningIcon from "../icons/WarningIcon.svelte";
+
+  const NOTIFICATION_TIMEOUT = 3500;
+
+  export let location: "top" | "bottom" | "middle" = "bottom";
+  export let justify: "left" | "right" | "center" = "center";
+  export let notification: NotificationMessage;
+  export let onClose: () => void;
+
+  $: ({ message, link, type, detail, options } = notification);
+
+  onMount(() => {
+    if (!options?.persisted || link) {
+      setTimeout(onClose, NOTIFICATION_TIMEOUT);
+    }
+  });
 </script>
 
 <aside
-  transition:scale|global={{ duration: 200, start: 0.98, opacity: 0 }}
-  {style}
-  class="whitespace-pre radius-sm notification-{level} 
-      {location !== undefined
-    ? `notification-floating notification-floating-${location}`
-    : ''}"
+  use:portal
+  transition:scale={{ duration: 200, start: 0.98, opacity: 0 }}
+  class="{location} {justify}"
 >
-  <div class="icon centered">
-    <slot name="icon" />
-  </div>
-  <div class="body centered">
-    <slot name="body" />
-    <slot />
-  </div>
-  <div class="cta centered">
-    <slot name="cta" />
+  <div class="main-section">
+    <div class="message-container" class:font-medium={detail}>
+      {#if type === "success"}
+        <Check size="18px" className="text-white" />
+      {:else if type == "error"}
+        <WarningIcon />
+      {/if}
+
+      {message}
+    </div>
+
+    {#if link}
+      <div class="link-container">
+        <a href={link.href} on:click={onClose}>{link.text}</a>
+      </div>
+    {/if}
+
+    {#if options?.persisted}
+      <div class="px-2 py-2 border-l">
+        <Button on:click={onClose} square>
+          <Close size="18px" color="#fff" />
+        </Button>
+      </div>
+    {/if}
   </div>
+
+  {#if detail}
+    <hr />
+    <div class="detail">
+      {detail}
+    </div>
+  {/if}
 </aside>
 
 <style lang="postcss">
+  * {
+    @apply border-gray-600;
+  }
+
   aside {
-    --width: max-content;
-    padding: 8px 14px;
-    width: var(--width);
-    box-shadow: var(--rally-box-shadow-sm);
-    font-style: normal;
-    /* font-weight: 600; */
-    font-size: 15px;
-    line-height: 22px;
-    display: grid;
-    grid-column-gap: 10px;
-    grid-template-columns: max-content auto max-content;
-    align-items: center;
-    align-content: center;
-    @apply shadow-lg rounded-md;
+    @apply absolute w-fit z-50 flex flex-col text-sm;
+    @apply bg-gray-900 text-gray-50 p-0 rounded-md shadow-lg;
   }
 
-  .notification-info,
-  .notification-info > * {
-    color: #0c0c0d;
-    @apply bg-slate-800 text-slate-100;
+  .main-section {
+    @apply flex;
   }
 
-  .notification-error,
-  .notification-error > * {
-    color: var(--color-white);
-    background-color: var(--color-red-60);
+  .detail {
+    @apply px-4 pt-2 pb-3;
   }
 
-  .icon {
-    font-size: 24px;
-    height: 24px;
+  .link-container {
+    @apply px-4 py-2 border-l items-center flex;
   }
 
-  .centered {
-    height: max-content;
-    display: grid;
-    align-self: center;
-    align-items: center;
-    align-content: center;
+  .message-container {
+    @apply flex items-center px-4 py-2 gap-x-2;
   }
 
-  .centered > * {
-    height: max-content;
-    display: grid;
-    align-self: center;
-    align-items: center;
-    align-content: center;
+  a {
+    @apply text-primary-300;
   }
 
-  .notification-floating {
-    position: fixed;
-    --pad: 20px;
-    /* stylelint-disable */
-    --x-offset: 0px;
-    --y-offset: 0px;
-    /* stylelint-enable */
-    --x-pad: calc(var(--pad) + var(--x-offset));
-    --y-pad: calc(var(--pad) + var(--y-offset));
+  a:hover {
+    @apply text-primary-200;
   }
 
-  .notification-floating-bottom,
-  .notification-floating-bottom-center {
-    bottom: var(--y-pad);
-    left: calc(50% + var(--x-offset));
-    transform: translateX(-50%);
+  .top {
+    @apply top-[30px];
   }
 
-  .notification-floating-bottom-right {
-    right: var(--x-pad);
-    bottom: var(--y-pad);
+  .bottom {
+    @apply bottom-[30px];
   }
 
-  .notification-floating-bottom-left {
-    left: var(--x-pad);
-    bottom: var(--y-pad);
+  .middle {
+    @apply top-1/2;
+    @apply -translate-y-1/2;
   }
 
-  .notification-floating-top,
-  .notification-floating-top-center {
-    top: var(--y-pad);
-    left: calc(50% + var(--x-offset));
-    transform: translateX(-50%);
+  .left {
+    @apply left-4;
   }
 
-  .notification-floating-top-left {
-    left: var(--x-pad);
-    top: var(--y-pad);
+  .right {
+    @apply right-4;
   }
 
-  .notification-floating-top-right {
-    right: var(--x-pad);
-    top: var(--y-pad);
+  .center {
+    @apply left-1/2;
+    @apply -translate-x-1/2;
   }
 </style>
diff --git a/web-common/src/components/notifications/NotificationCenter.svelte b/web-common/src/components/notifications/NotificationCenter.svelte
index b8611366a58..b9a70b92017 100644
--- a/web-common/src/components/notifications/NotificationCenter.svelte
+++ b/web-common/src/components/notifications/NotificationCenter.svelte
@@ -1,27 +1,24 @@
 <script lang="ts">
   import Notification from "./Notification.svelte";
-  import PersistedLinkNotification from "./PersistedLinkNotification.svelte";
-  import PersistedNotification from "./PersistedNotification.svelte";
-  import notificationStore from "./notificationStore";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { NotificationMessage } from "@rilldata/web-common/lib/event-bus/events";
+  import { onMount } from "svelte";
+
+  let notification: NotificationMessage | null = null;
+
+  onMount(() => {
+    const unsubscribe = eventBus.on("notification", (newNotification) => {
+      notification = newNotification;
+    });
+
+    return unsubscribe;
+  });
+
+  function clear() {
+    notification = null;
+  }
 </script>
 
-{#key $notificationStore.id}
-  {#if $notificationStore.id}
-    {#if $notificationStore?.options?.persisted}
-      <PersistedNotification on:clear={() => notificationStore.clear()}>
-        <div slot="title">{$notificationStore.message}</div>
-        <div slot="body">{$notificationStore.detail}</div>
-      </PersistedNotification>
-    {:else if $notificationStore?.options?.persistedLink && $notificationStore.link}
-      <PersistedLinkNotification
-        message={$notificationStore.message}
-        link={$notificationStore.link}
-        on:clear={() => notificationStore.clear()}
-      />
-    {:else}
-      <Notification location="bottom" {...$notificationStore.options}>
-        {$notificationStore.message}
-      </Notification>
-    {/if}
-  {/if}
-{/key}
+{#if notification}
+  <Notification {notification} onClose={clear} />
+{/if}
diff --git a/web-common/src/components/notifications/PersistedLinkNotification.svelte b/web-common/src/components/notifications/PersistedLinkNotification.svelte
deleted file mode 100644
index c7d97674ba4..00000000000
--- a/web-common/src/components/notifications/PersistedLinkNotification.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { scale } from "svelte/transition";
-  import { IconButton } from "../button";
-  import Check from "../icons/Check.svelte";
-  import Close from "../icons/Close.svelte";
-  import type { Link } from "./notificationStore";
-
-  export let message: string;
-  export let link: Link;
-
-  const dispatch = createEventDispatcher();
-</script>
-
-<div
-  transition:scale={{ duration: 200, start: 0.98, opacity: 0 }}
-  class="fixed bottom-10 left-1/2 -translate-x-1/2 py-0.5 bg-gray-800 rounded-sm shadow flex items-center"
->
-  <div class="flex items-center px-4 py-1.5 gap-x-1.5">
-    <Check size="18px" className="text-white" />
-    <span class="text-gray-50 text-sm">
-      {message}
-    </span>
-  </div>
-  <div class="px-4 py-1.5 border-l border-gray-600 text-sm">
-    <a
-      class="text-primary-300 hover:text-primary-200"
-      href={link.href}
-      on:click={() => dispatch("clear")}>{link.text}</a
-    >
-  </div>
-  <div class="px-2.5 py-1.5 border-l border-gray-600">
-    <IconButton on:click={() => dispatch("clear")} bgDark>
-      <Close size="18px" color="#fff" />
-    </IconButton>
-  </div>
-</div>
diff --git a/web-common/src/components/notifications/PersistedNotification.svelte b/web-common/src/components/notifications/PersistedNotification.svelte
deleted file mode 100644
index c0dae08c69e..00000000000
--- a/web-common/src/components/notifications/PersistedNotification.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { scale } from "svelte/transition";
-  import { IconButton } from "../button";
-  import Close from "../icons/Close.svelte";
-
-  const dispatch = createEventDispatcher();
-</script>
-
-<div
-  transition:scale|global={{ duration: 200, start: 0.98, opacity: 0 }}
-  class="fixed bottom-10 left-1/2 -translate-x-1/2 max-w-4xl py-5 text-sm whitespace-normal
-         text-slate-100 bg-slate-800 shadow-lg rounded-md flex flex-col gap-5"
->
-  <div class="flex flex-row items-center justify-between pl-6 pr-4">
-    <h1><slot name="title" /></h1>
-    <div>
-      <IconButton
-        marginClasses="ml-3"
-        on:click={() => dispatch("clear")}
-        bgDark
-      >
-        <Close size="16px" color="#fff" />
-      </IconButton>
-    </div>
-  </div>
-  <hr class="border-slate-200" />
-  <div class="font-normal px-7 py-3">
-    <slot name="body" />
-  </div>
-</div>
diff --git a/web-common/src/components/notifications/index.ts b/web-common/src/components/notifications/index.ts
deleted file mode 100644
index 3893d475026..00000000000
--- a/web-common/src/components/notifications/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as notifications } from "./notificationStore";
diff --git a/web-common/src/components/notifications/notificationStore.ts b/web-common/src/components/notifications/notificationStore.ts
deleted file mode 100644
index 78d48cc83f5..00000000000
--- a/web-common/src/components/notifications/notificationStore.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import type { Readable } from "svelte/store";
-import { derived, writable } from "svelte/store";
-
-const NOTIFICATION_TIMEOUT = 3500;
-
-interface NotificationStore extends Readable<NotificationMessage> {
-  timeoutID: ReturnType<typeof setTimeout>;
-  send: (args: NotificationMessageArguments) => void;
-  clear: () => void;
-}
-
-export interface Link {
-  text: string;
-  href: string;
-}
-
-interface NotificationMessageArguments {
-  message: string;
-  type?: string;
-  detail?: string;
-  link?: Link;
-  options?: NotificationOptions;
-}
-
-interface NotificationMessage {
-  id: string;
-  type?: string;
-  message: string;
-  detail?: string;
-  link?: Link;
-  options?: NotificationOptions;
-}
-
-interface NotificationOptions {
-  width?: number;
-  persisted?: boolean;
-  persistedLink?: boolean;
-}
-
-function createNotificationStore(): NotificationStore {
-  const _notification = writable({} as NotificationMessage);
-  let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
-
-  function send({
-    message,
-    type = "default",
-    detail,
-    link,
-    options = {},
-  }: NotificationMessageArguments): void {
-    const notificationMessage: NotificationMessage = {
-      id: id(),
-      message,
-      type,
-      detail,
-      link,
-      options,
-    };
-    _notification.set(notificationMessage);
-  }
-
-  function clear(): void {
-    _notification.set({} as NotificationMessage);
-  }
-
-  const notifications: Readable<object> = derived(
-    _notification,
-    ($notification, set) => {
-      // if there already was a notification, let's clear the timer
-      // and reset it here.
-      clearTimeout(timeout);
-      set($notification);
-      // if this is not the reset message, set the timer.
-      if (
-        $notification.id &&
-        !$notification.options?.persisted &&
-        !$notification.options?.persistedLink
-      ) {
-        timeout = setTimeout(clear, NOTIFICATION_TIMEOUT);
-      }
-    },
-  );
-  const { subscribe } = notifications;
-
-  return {
-    timeoutID: timeout,
-    subscribe,
-    send,
-    clear: () => {
-      clearTimeout(timeout);
-      clear();
-    },
-  };
-}
-
-function id(): string {
-  return "_" + Math.random().toString(36).substr(2, 9);
-}
-
-export default createNotificationStore();
diff --git a/web-common/src/components/virtualized-table/VirtualTable.svelte b/web-common/src/components/virtualized-table/VirtualTable.svelte
index 970b078fac6..6f9b1561025 100644
--- a/web-common/src/components/virtualized-table/VirtualTable.svelte
+++ b/web-common/src/components/virtualized-table/VirtualTable.svelte
@@ -21,7 +21,7 @@
   import StackingWord from "@rilldata/web-common/components/tooltip/StackingWord.svelte";
   import TooltipShortcutContainer from "@rilldata/web-common/components/tooltip/TooltipShortcutContainer.svelte";
   import { formatDataTypeAsDuckDbQueryString } from "@rilldata/web-common/lib/formatters";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import FormattedDataType from "@rilldata/web-common/components/data-types/FormattedDataType.svelte";
   import { isClipboardApiSupported } from "@rilldata/web-common/lib/actions/shift-click-action";
   import type {
@@ -224,9 +224,10 @@
         hovering.type,
       );
       await navigator.clipboard.writeText(exportedValue);
-      notifications.send({
+      eventBus.emit("notification", {
         message: `copied value "${exportedValue}" to clipboard`,
       });
+
       return;
     }
 
diff --git a/web-common/src/components/virtualized-table/core/Cell.svelte b/web-common/src/components/virtualized-table/core/Cell.svelte
index dee9bfad960..fb56771d16c 100644
--- a/web-common/src/components/virtualized-table/core/Cell.svelte
+++ b/web-common/src/components/virtualized-table/core/Cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { FormattedDataType } from "@rilldata/web-common/components/data-types";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Shortcut from "@rilldata/web-common/components/tooltip/Shortcut.svelte";
   import StackingWord from "@rilldata/web-common/components/tooltip/StackingWord.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
@@ -103,7 +103,7 @@
   const shiftClick = async () => {
     let exportedValue = formatDataTypeAsDuckDbQueryString(value, type);
     await navigator.clipboard.writeText(exportedValue);
-    notifications.send({
+    eventBus.emit("notification", {
       message: `copied value "${exportedValue}" to clipboard`,
     });
     // update this to set the active animation in the tooltip text
diff --git a/web-common/src/components/virtualized-table/core/ColumnHeader.svelte b/web-common/src/components/virtualized-table/core/ColumnHeader.svelte
index b57c9326de0..077ecf41c54 100644
--- a/web-common/src/components/virtualized-table/core/ColumnHeader.svelte
+++ b/web-common/src/components/virtualized-table/core/ColumnHeader.svelte
@@ -2,7 +2,7 @@
   import { DataTypeIcon } from "@rilldata/web-common/components/data-types";
   import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import Pin from "@rilldata/web-common/components/icons/Pin.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Shortcut from "@rilldata/web-common/components/tooltip/Shortcut.svelte";
   import StackingWord from "@rilldata/web-common/components/tooltip/StackingWord.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
@@ -83,7 +83,7 @@
     use:shiftClickAction
     on:shift-click={async () => {
       await navigator.clipboard.writeText(name);
-      notifications.send({
+      eventBus.emit("notification", {
         message: `copied column name "${name}" to clipboard`,
       });
     }}
diff --git a/web-common/src/features/alerts/CreateAlertDialog.svelte b/web-common/src/features/alerts/CreateAlertDialog.svelte
index 860e25bfb51..cd74d205efa 100644
--- a/web-common/src/features/alerts/CreateAlertDialog.svelte
+++ b/web-common/src/features/alerts/CreateAlertDialog.svelte
@@ -21,7 +21,7 @@
   import { createEventDispatcher } from "svelte";
   import { createForm } from "svelte-forms-lib";
   import { get } from "svelte/store";
-  import { notifications } from "../../components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { runtime } from "../../runtime-client/runtime-store";
   import BaseAlertForm from "./BaseAlertForm.svelte";
 
@@ -128,15 +128,12 @@
           getRuntimeServiceListResourcesQueryKey($runtime.instanceId),
         );
         dispatch("close");
-        notifications.send({
+        eventBus.emit("notification", {
           message: "Alert created",
           link: {
             href: `/${organization}/${project}/-/alerts`,
             text: "Go to alerts",
           },
-          options: {
-            persistedLink: true,
-          },
         });
       } catch (e) {
         // showing error below
diff --git a/web-common/src/features/alerts/EditAlertDialog.svelte b/web-common/src/features/alerts/EditAlertDialog.svelte
index 753d49229f4..d8a72f7f4b9 100644
--- a/web-common/src/features/alerts/EditAlertDialog.svelte
+++ b/web-common/src/features/alerts/EditAlertDialog.svelte
@@ -13,7 +13,7 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import { createEventDispatcher } from "svelte";
   import { createForm } from "svelte-forms-lib";
-  import { notifications } from "../../components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import {
     V1AlertSpec,
     V1MetricsViewAggregationRequest,
@@ -103,7 +103,7 @@
           getRuntimeServiceListResourcesQueryKey($runtime.instanceId),
         );
         dispatch("close");
-        notifications.send({
+        eventBus.emit("notification", {
           message: "Alert edited",
           type: "success",
         });
diff --git a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
index 4c4e99c77cf..1ce9be2d8c4 100644
--- a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
+++ b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
@@ -2,7 +2,7 @@
   import { WithTween } from "@rilldata/web-common/components/data-graphic/functional-components";
   import PercentageChange from "@rilldata/web-common/components/data-types/PercentageChange.svelte";
   import CrossIcon from "@rilldata/web-common/components/icons/CrossIcon.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { createShiftClickAction } from "@rilldata/web-common/lib/actions/shift-click-action";
@@ -84,7 +84,7 @@
   async function shiftClickHandler(number: string | undefined) {
     if (number === undefined) return;
     await navigator.clipboard.writeText(number);
-    notifications.send({
+    eventBus.emit("notification", {
       message: `copied dimension value "${number}" to clipboard`,
     });
   }
diff --git a/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte b/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte
index 292fe058fa5..4732ed76a12 100644
--- a/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte
+++ b/web-common/src/features/dashboards/dimension-table/DimensionDisplay.svelte
@@ -17,7 +17,7 @@
   import { getDimensionFilterWithSearch } from "./dimension-table-utils";
   import DimensionHeader from "./DimensionHeader.svelte";
   import DimensionTable from "./DimensionTable.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { metricsExplorerStore } from "../stores/dashboard-stores";
 
   const stateManagers = getStateManagers();
@@ -131,7 +131,7 @@
     if (areAllTableRowsSelected) {
       deselectItemsInFilter(dimensionName, labels);
 
-      notifications.send({
+      eventBus.emit("notification", {
         message: `Removed ${labels.length} items from filter`,
       });
       return;
@@ -141,7 +141,7 @@
         labels,
       );
       selectItemsInFilter(dimensionName, labels);
-      notifications.send({
+      eventBus.emit("notification", {
         message: `Added ${newValuesSelected.length} items to filter`,
       });
     }
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
index d38590290df..71cd197d2bf 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
@@ -8,7 +8,7 @@
 
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
 
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
   import { TOOLTIP_STRING_LIMIT } from "@rilldata/web-common/layout/config";
   import { createShiftClickAction } from "@rilldata/web-common/lib/actions/shift-click-action";
@@ -78,7 +78,7 @@
     if (truncatedLabel?.length > TOOLTIP_STRING_LIMIT) {
       truncatedLabel = `${truncatedLabel.slice(0, TOOLTIP_STRING_LIMIT)}...`;
     }
-    notifications.send({
+    eventBus.emit("notification", {
       message: `copied dimension value "${truncatedLabel}" to clipboard`,
     });
   }
diff --git a/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte b/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
index 0c7c81ad907..9caaf35afe9 100644
--- a/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
+++ b/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Compare from "@rilldata/web-common/components/icons/Compare.svelte";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
   import {
     SortDirection,
@@ -142,7 +142,7 @@
         rowHeaderLabels as (string | null)[],
       );
 
-      notifications.send({
+      eventBus.emit("notification", {
         message: `Removed ${rowHeaderLabels.length} items from filter`,
       });
       return;
@@ -152,7 +152,7 @@
         rowHeaderLabels,
       );
       selectItemsInFilter(dimensionName, rowHeaderLabels as (string | null)[]);
-      notifications.send({
+      eventBus.emit("notification", {
         message: `Added ${newValuesSelected.length} items to filter`,
       });
     }
diff --git a/web-common/src/features/entity-management/actions.ts b/web-common/src/features/entity-management/actions.ts
index 49f953f2bb1..f42af89ada8 100644
--- a/web-common/src/features/entity-management/actions.ts
+++ b/web-common/src/features/entity-management/actions.ts
@@ -1,4 +1,4 @@
-import { notifications } from "@rilldata/web-common/components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts";
 import { fileIsMainEntity } from "@rilldata/web-common/features/entity-management/file-selectors";
 import {
@@ -59,12 +59,12 @@ export async function renameFileArtifact(
         fromResName?.kind &&
       !toPath.endsWith(".sql")
     ) {
-      notifications.send({
+      eventBus.emit("notification", {
         message: `Moving ${fromName} out of its native folder. Make sure to specify the resource type with the "type" key.`,
       });
     }
   } catch (err) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: `Failed to rename ${fromName} to ${toName}: ${extractMessage(err.response?.data?.message ?? err.message)}`,
     });
   }
@@ -84,7 +84,7 @@ export async function deleteFileArtifact(
 
     httpRequestQueue.removeByName(name);
   } catch (err) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: `Failed to delete ${name}: ${extractMessage(err.response?.data?.message ?? err.message)}`,
     });
   }
diff --git a/web-common/src/features/entity-management/ui-actions.ts b/web-common/src/features/entity-management/ui-actions.ts
index fe4017bb358..3229280f503 100644
--- a/web-common/src/features/entity-management/ui-actions.ts
+++ b/web-common/src/features/entity-management/ui-actions.ts
@@ -1,4 +1,4 @@
-import { notifications } from "@rilldata/web-common/components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { renameFileArtifact } from "@rilldata/web-common/features/entity-management/actions";
 import { removeLeadingSlash } from "@rilldata/web-common/features/entity-management/entity-mappers";
 import {
@@ -18,7 +18,7 @@ export async function handleEntityRename(
   const [folder] = splitFolderAndName(existingPath);
 
   if (!target.value.match(VALID_NAME_PATTERN)) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: INVALID_NAME_MESSAGE,
     });
     target.value = existingName; // resets the input
@@ -26,7 +26,7 @@ export async function handleEntityRename(
   }
 
   if (isDuplicateName(target.value, existingName, allNames)) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: `Name ${target.value} is already in use`,
     });
     target.value = existingName; // resets the input
diff --git a/web-common/src/features/file-explorer/FileExplorer.svelte b/web-common/src/features/file-explorer/FileExplorer.svelte
index ab1f5676ab6..f1cf233a1f6 100644
--- a/web-common/src/features/file-explorer/FileExplorer.svelte
+++ b/web-common/src/features/file-explorer/FileExplorer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
-  import { notifications } from "@rilldata/web-common/components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import GenerateChartYAMLPrompt from "@rilldata/web-common/features/charts/prompt/GenerateChartYAMLPrompt.svelte";
   import RenameAssetModal from "@rilldata/web-common/features/entity-management/RenameAssetModal.svelte";
   import {
@@ -124,7 +124,7 @@
     if (fromPath !== newFilePath) {
       const newTopLevelPath = getTopLevelFolder(newFilePath);
       if (PROTECTED_DIRECTORIES.includes(newTopLevelPath)) {
-        notifications.send({
+        eventBus.emit("notification", {
           message: "cannot move to restricted directories",
         });
         return;
diff --git a/web-common/src/features/metrics-views/ai-generation/generateMetricsView.ts b/web-common/src/features/metrics-views/ai-generation/generateMetricsView.ts
index a00a4fb7a37..d3e6cb92aff 100644
--- a/web-common/src/features/metrics-views/ai-generation/generateMetricsView.ts
+++ b/web-common/src/features/metrics-views/ai-generation/generateMetricsView.ts
@@ -3,7 +3,7 @@ import { fileArtifacts } from "@rilldata/web-common/features/entity-management/f
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
 import { getScreenNameFromPage } from "@rilldata/web-common/features/file-explorer/telemetry";
 import { get } from "svelte/store";
-import { notifications } from "../../../components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { overlay } from "../../../layout/overlay-store";
 import { behaviourEvent } from "../../../metrics/initMetrics";
 import type { BehaviourEventMedium } from "../../../metrics/service/BehaviourEventTypes";
@@ -134,7 +134,7 @@ export function useCreateDashboardFromTableUIAction(
         MetricsEventScreenName.Dashboard,
       );
     } catch (err) {
-      notifications.send({
+      eventBus.emit("notification", {
         message: "Failed to create a dashboard for " + tableName,
         detail: err.response?.data?.message ?? err.message,
       });
@@ -212,7 +212,7 @@ export async function createDashboardFromTableInMetricsEditor(
       });
     }
   } catch (err) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: "Failed to create a dashboard for " + tableName,
       detail: err.response?.data?.message ?? err.message,
     });
diff --git a/web-common/src/features/scheduled-reports/CreateScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/CreateScheduledReportDialog.svelte
index 12e910a6d33..d0856158be0 100644
--- a/web-common/src/features/scheduled-reports/CreateScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/CreateScheduledReportDialog.svelte
@@ -10,7 +10,7 @@
   import { createForm } from "svelte-forms-lib";
   import * as yup from "yup";
   import { Button } from "../../components/button";
-  import { notifications } from "../../components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { getLocalIANA } from "../../lib/time/timezone";
   import {
     V1ExportFormat,
@@ -87,15 +87,12 @@
           getRuntimeServiceListResourcesQueryKey($runtime.instanceId),
         );
         dispatch("close");
-        notifications.send({
+        eventBus.emit("notification", {
           message: "Report created",
           link: {
             href: `/${organization}/${project}/-/reports`,
             text: "Go to scheduled reports",
           },
-          options: {
-            persistedLink: true,
-          },
         });
       } catch (e) {
         // showing error below
diff --git a/web-common/src/features/scheduled-reports/EditScheduledReportDialog.svelte b/web-common/src/features/scheduled-reports/EditScheduledReportDialog.svelte
index 35c2028292f..110f988c675 100644
--- a/web-common/src/features/scheduled-reports/EditScheduledReportDialog.svelte
+++ b/web-common/src/features/scheduled-reports/EditScheduledReportDialog.svelte
@@ -7,7 +7,7 @@
   import { createForm } from "svelte-forms-lib";
   import * as yup from "yup";
   import { Button } from "../../components/button";
-  import { notifications } from "../../components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import {
     getRuntimeServiceGetResourceQueryKey,
     getRuntimeServiceListResourcesQueryKey,
@@ -114,7 +114,7 @@
           getRuntimeServiceListResourcesQueryKey($runtime.instanceId),
         );
         dispatch("close");
-        notifications.send({
+        eventBus.emit("notification", {
           message: "Report edited",
           type: "success",
         });
diff --git a/web-common/src/features/sources/createModel.ts b/web-common/src/features/sources/createModel.ts
index 164262dfbd6..83561153744 100644
--- a/web-common/src/features/sources/createModel.ts
+++ b/web-common/src/features/sources/createModel.ts
@@ -3,7 +3,7 @@ import { fileArtifacts } from "@rilldata/web-common/features/entity-management/f
 import { getName } from "@rilldata/web-common/features/entity-management/name-utils";
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
 import { get } from "svelte/store";
-import { notifications } from "../../components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { runtimeServicePutFile } from "../../runtime-client";
 import { runtime } from "../../runtime-client/runtime-store";
 
@@ -36,7 +36,7 @@ select * from ${tableName}`,
   });
 
   if (notify) {
-    notifications.send({
+    eventBus.emit("notification", {
       message: `Queried ${tableName} in workspace`,
     });
   }
diff --git a/web-common/src/features/sources/modal/RequestConnectorForm.svelte b/web-common/src/features/sources/modal/RequestConnectorForm.svelte
index 634cfce70fb..7a9c0fa8aa1 100644
--- a/web-common/src/features/sources/modal/RequestConnectorForm.svelte
+++ b/web-common/src/features/sources/modal/RequestConnectorForm.svelte
@@ -4,7 +4,7 @@
   import { createEventDispatcher } from "svelte";
   import { createForm } from "svelte-forms-lib";
   import { object, string } from "yup";
-  import { notifications } from "../../../components/notifications";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 
   const dispatch = createEventDispatcher();
 
@@ -35,7 +35,7 @@
             },
           });
           dispatch("close");
-          notifications.send({
+          eventBus.emit("notification", {
             message: "Thanks for your request!",
           });
         } catch (e) {
diff --git a/web-common/src/features/sources/modal/file-upload.ts b/web-common/src/features/sources/modal/file-upload.ts
index 18fc9cc17b5..eb36864163e 100644
--- a/web-common/src/features/sources/modal/file-upload.ts
+++ b/web-common/src/features/sources/modal/file-upload.ts
@@ -1,5 +1,5 @@
 import { goto } from "$app/navigation";
-import { notifications } from "@rilldata/web-common/components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts";
 import { getName } from "@rilldata/web-common/features/entity-management/name-utils";
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
@@ -143,7 +143,7 @@ export async function uploadFile(
 }
 
 function reportFileErrors(invalidFiles: File[]) {
-  notifications.send({
+  eventBus.emit("notification", {
     message: `${invalidFiles.length} file${
       invalidFiles.length !== 1 ? "s are" : " is"
     } invalid: \n${invalidFiles.map((file) => file.name).join("\n")}`,
diff --git a/web-common/src/lib/actions/shift-click-action.ts b/web-common/src/lib/actions/shift-click-action.ts
index df1a9bb8947..86c3aff55cb 100644
--- a/web-common/src/lib/actions/shift-click-action.ts
+++ b/web-common/src/lib/actions/shift-click-action.ts
@@ -1,4 +1,4 @@
-import { notifications } from "@rilldata/web-common/components/notifications";
+import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
 import { setContext } from "svelte";
 import { get, writable } from "svelte/store";
 interface CreateShiftClick {
@@ -16,7 +16,7 @@ export function isClipboardApiSupported(): boolean {
 
 export async function copyToClipboard(value, message = "copied to clipboard") {
   await navigator.clipboard.writeText(value);
-  notifications.send({
+  eventBus.emit("notification", {
     message,
   });
 }
diff --git a/web-common/src/lib/event-bus/event-bus.ts b/web-common/src/lib/event-bus/event-bus.ts
new file mode 100644
index 00000000000..2b8600466f9
--- /dev/null
+++ b/web-common/src/lib/event-bus/event-bus.ts
@@ -0,0 +1,45 @@
+import { NotificationMessage } from "./events";
+
+class EventBus {
+  private listeners: EventMap = new Map();
+
+  on<Event extends T>(event: Event, callback: Listener<Event>) {
+    const key = crypto.randomUUID();
+    const eventMap = this.listeners.get(event);
+
+    if (!eventMap) {
+      this.listeners.set(
+        event,
+        new Map<string, Listener<T>>([[key, callback]]),
+      );
+    } else {
+      eventMap.set(key, callback);
+    }
+
+    const unsubscribe = () => this.listeners.get(event)?.delete(key);
+
+    return unsubscribe;
+  }
+
+  emit<Event extends T>(event: Event, payload: Events[Event]) {
+    const listeners = this.listeners.get(event);
+
+    listeners?.forEach((cb) => {
+      cb(payload);
+    });
+  }
+}
+
+export const eventBus = new EventBus();
+
+interface Events {
+  notification: NotificationMessage;
+}
+
+type T = keyof Events;
+
+type Listener<EventType extends T> = (e: Events[EventType]) => void;
+
+type EventMap = Map<T, Listeners>;
+
+type Listeners = Map<string, Listener<T>>;
diff --git a/web-common/src/lib/event-bus/events.ts b/web-common/src/lib/event-bus/events.ts
new file mode 100644
index 00000000000..6224e943b5c
--- /dev/null
+++ b/web-common/src/lib/event-bus/events.ts
@@ -0,0 +1,16 @@
+interface Link {
+  text: string;
+  href: string;
+}
+
+export interface NotificationMessage {
+  type?: "default" | "success" | "error";
+  message: string;
+  detail?: string;
+  link?: Link;
+  options?: NotificationOptions;
+}
+
+interface NotificationOptions {
+  persisted?: boolean;
+}
diff --git a/web-local/src/routes/(application)/+layout.svelte b/web-local/src/routes/(application)/+layout.svelte
index ac9a0442770..27b222d1b11 100644
--- a/web-local/src/routes/(application)/+layout.svelte
+++ b/web-local/src/routes/(application)/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import NotificationCenter from "@rilldata/web-common/components/notifications/NotificationCenter.svelte";
   import FileDrop from "@rilldata/web-common/features/sources/modal/FileDrop.svelte";
   import SourceImportedModal from "@rilldata/web-common/features/sources/modal/SourceImportedModal.svelte";
   import { sourceImportedPath } from "@rilldata/web-common/features/sources/sources-store";
@@ -68,4 +67,3 @@
 
 <AddSourceModal />
 <SourceImportedModal sourcePath={$sourceImportedPath} />
-<NotificationCenter />
diff --git a/web-local/src/routes/+layout.svelte b/web-local/src/routes/+layout.svelte
index 801330375c5..4d0ee1dea45 100644
--- a/web-local/src/routes/+layout.svelte
+++ b/web-local/src/routes/+layout.svelte
@@ -17,6 +17,7 @@
   import type { Writable } from "svelte/store";
   import ResourceWatcher from "@rilldata/web-common/features/entity-management/ResourceWatcher.svelte";
   import type { LayoutData } from "./$types";
+  import NotificationCenter from "@rilldata/web-common/components/notifications/NotificationCenter.svelte";
 
   /** This function will initialize the existing node stores and will connect them
    * to the Node server.
@@ -63,6 +64,8 @@
   </QueryClientProvider>
 </RillTheme>
 
+<NotificationCenter />
+
 <style>
   /* Prevent trackpad navigation (like other code editors, like vscode.dev). */
   :global(body) {