Add new levels of notification

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

@@ -223,11 +223,27 @@ document.addEventListener('DOMContentLoaded', async () => {
  if (!(evt instanceof CustomEvent)) return;
 
  notification.toggleAttribute('data-active', evt.detail.state ?? true);
+ notification.toggleAttribute('data-level', evt.detail.level ?? 'error');
 
  eventTarget.dispatchEvent(
  new CustomEvent('toggle-notification', {
  detail: {
  state: hiddenApps.some((p) => p.notification.state === true),
+ // Find the highest level of notification
+ level: hiddenApps.reduce((acc, p) => {
+ if (p.notification.state) {
+ if (p.notification.level === 'error') {
+ return 'error';
+ }
+ if (p.notification.level === 'warning' && acc !== 'error') {
+ return 'warning';
+ }
+ if (p.notification.level === 'info' && acc !== 'error' && acc !== 'warning') {
+ return 'info';
+ }
+ }
+ return acc;
+ }),
  },
  })
  );

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' | 'warn' | 'info';
  };
  eventTarget: EventTarget;
 };
@@ -187,10 +188,18 @@ export class AstroDevToolbar extends HTMLElement {
  }
  }
 
- #dev-bar #bar-container .item.active .notification {
+ #dev-bar #bar-container .item.active .notification-error {
  border-color: rgba(71, 78, 94, 1);
  }
 
+ #dev-bar #bar-container .item.active .notification-warn {
+ border-color: #FFC107;
+ }
+
+ #dev-bar #bar-container .item.active .notification-info {
+ border-color: #007BFF;
+ }
+
  #dev-bar .item .icon {
  position: relative;
  max-width: 20px;