Add new levels of notification for dev toolbar apps

.changeset/hungry-needles-cough.md

@@ -0,0 +1,17 @@
+---
+"astro": minor
+---
+
+Adds support for emitting warning and info notifications from dev toolbar apps.
+
+When using the `toggle-notification` event, the severity can be specified through `detail.level`:
+
+```ts
+eventTarget.dispatchEvent(
+ new CustomEvent("toggle-notification", {
+ detail: {
+ level: "warning",
+ },
+ })
+);
+```

packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts

@@ -64,28 +64,33 @@ document.addEventListener('DOMContentLoaded', async () => {
 
  const prepareApp = (appDefinition: DevToolbarAppDefinition, builtIn: boolean): DevToolbarApp => {
  const eventTarget = new EventTarget();
- const app = {
+ const app: DevToolbarApp = {
  ...appDefinition,
  builtIn: builtIn,
  active: false,
- status: 'loading' as const,
- notification: { state: false },
+ status: 'loading',
+ notification: { state: false, level: undefined },
  eventTarget: eventTarget,
  };
 
  // Events apps can send to the overlay to update their status
  eventTarget.addEventListener('toggle-notification', (evt) => {
+ if (!(evt instanceof CustomEvent)) return;
+
  const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`);
- if (!target) return;
+ const notificationElement = target?.querySelector('.notification');
+ if (!target || !notificationElement) return;
 
- let newState = true;
- if (evt instanceof CustomEvent) {
- newState = evt.detail.state ?? true;
- }
+ let newState = evt.detail.state ?? true;
+ let level = evt.detail.level ?? 'error';
 
  app.notification.state = newState;
+ if (newState) app.notification.level = level;
 
- target.querySelector('.notification')?.toggleAttribute('data-active', newState);
+ notificationElement.toggleAttribute('data-active', newState);
+ if (newState) {
+ notificationElement.setAttribute('data-level', level);
+ }
  });
 
  const onToggleApp = async (evt: Event) => {
@@ -142,9 +147,20 @@ document.addEventListener('DOMContentLoaded', async () => {
  height: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(19, 21, 26, 1);
+ }
+
+ .notification[data-level="error"] {
  background: #B33E66;
  }
 
+ .notification[data-level="warning"] {
+ background: #d9a536;
+ }
+
+ .notification[data-level="info"] {
+ background: #9198ad;
+ }
+
  #dropdown:not([data-no-notification]) .notification[data-active] {
  display: block;
  }
@@ -222,12 +238,30 @@ document.addEventListener('DOMContentLoaded', async () => {
  app.eventTarget.addEventListener('toggle-notification', (evt) => {
  if (!(evt instanceof CustomEvent)) return;
 
- notification.toggleAttribute('data-active', evt.detail.state ?? true);
+ let newState = evt.detail.state ?? true;
+ let level = evt.detail.level ?? 'error';
+
+ notification.toggleAttribute('data-active', newState);
+
+ if (newState) {
+ notification.setAttribute('data-level', level);
+ }
+
+ app.notification.state = newState;
+ if (newState) app.notification.level = level;
 
  eventTarget.dispatchEvent(
  new CustomEvent('toggle-notification', {
  detail: {
  state: hiddenApps.some((p) => p.notification.state === true),
+ level:
+ ['error', 'warning', 'info'].find((notificationLevel) =>
+ hiddenApps.some(
+ (p) =>
+ p.notification.state === true &&
+ p.notification.level === notificationLevel
+ )
+ ) ?? 'error',
  },
  })
  );

packages/astro/src/runtime/client/dev-toolbar/toolbar.ts

@@ -9,6 +9,7 @@ export type DevToolbarApp = DevToolbarAppDefinition & {
  status: 'ready' | 'loading' | 'error';
  notification: {
  state: boolean;
+ level?: 'error' | 'warning' | 'info';
  };
  eventTarget: EventTarget;
 };
@@ -220,9 +221,20 @@ export class AstroDevToolbar extends HTMLElement {
  height: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(19, 21, 26, 1);
+ }
+
+ #dev-bar .item .notification[data-level="error"] {
  background: #B33E66;
  }
 
+ #dev-bar .item .notification[data-level="warning"] {
+ background: #b58a2d;
+ }
+
+ #dev-bar .item .notification[data-level="info"] {
+ background: #9198ad;
+ }
+
  #dev-toolbar-root:not([data-no-notification]) #dev-bar .item .notification[data-active] {
  display: block;
  }