feat: replace snackbar with persistent notification centre (#63)

* feat: replace snackbar with notification centre (closes #62)

- Add NotificationStore (NgRx Signal Store) with add/dismiss/markRead/
  markAllRead methods, unreadCount computed signal, and autoDismissMs
  support for transient notifications
- Add NotificationList component — shared panel content used by both
  CdkOverlay (desktop) and MatBottomSheet (mobile)
- Add NotificationBell component — bell icon with matBadge count badge,
  opens CdkOverlay dropdown on desktop and MatBottomSheet on mobile,
  marks all read on open
- Update SwUpdateStore to use NotificationStore instead of MatSnackBar;
  remove snackbar-specific state fields (message/action/snackbarConfig)
- Add lib-notification-bell to MainToolbar
- Provide NotificationStore alongside SwUpdateStore in app.ts

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* test(shared): add unit tests for NotificationBell and NotificationList

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-bell): anchor overlay to button element; add min-height to empty panel

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-bell): use click event target as overlay anchor

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(main-toolbar): move notification bell to far right, after nav links

Bell is now rightmost item (logged out) or second from right next to
logout (logged in), matching Facebook/LinkedIn pattern. This also
fixes overlay positioning since the bell is now at the viewport edge.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-bell): use global position strategy anchored to top-right

Drops the flexibleConnectedTo approach entirely. Panel is now fixed at
right:8px top:72px (below the toolbar), matching Facebook/LinkedIn style.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-bell): widen panel to 380px and fix overlay top offset for 56px toolbar

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-list): make host display:block so w-full fills overlay pane

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-bell): flush top to 56px toolbar, right to 16px to clear scrollbar

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(styles): add scrollbar-gutter:stable to prevent layout shift on scroll

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(styles): move scrollbar-gutter:stable to main scroll container, not html

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* chore: remove scrollbar-gutter:stable, causes unwanted gap on non-scrolling pages

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* feat(debug): add secret /debug page with notification test buttons

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-list): fix unread border and min-height

- Use [class.border-l-4] + [class.border-l-blue-500] so border fully
  disappears on mark-read (border-neutral-100 was overriding border-l-transparent)
- Move min-h off container onto empty state only

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(notification-list): restore unread dot indicator next to title

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(dx): add reload action to debug sw-update notification

Mirrors the real sw-update store action so the debug page accurately
represents the notification UX — shows the Reload button and triggers
window.location.reload() when clicked.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix: remove NavigationEnd polling from SwUpdateStore

Polling checkForUpdate() on every NavigationEnd risked adding a new
sw-update notification on each navigation while an update was pending.
The Angular SW checks for updates automatically on load and via its own
internal schedule — manual polling is unnecessary.

Removes: checkForUpdate rxMethod, Router dependency, related tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: chrisjwalk <8442112+chrisjwalk@users.noreply.github.com>

Author: 3 people

apps/web-app/src/app/app.routes.ts

@@ -18,5 +18,10 @@ export const routes: Route[] = [
     path: 'login',
     loadChildren: () => import('@myorg/login').then((m) => m.loginRoutes),
   },
+  {
+    path: 'debug',
+    loadChildren: () =>
+      import('./debug/debug.routes').then((m) => m.debugRoutes),
+  },
   { path: '**', redirectTo: '' },
 ];

apps/web-app/src/app/app.ts

@@ -6,6 +6,7 @@ import { AuthStore } from '@myorg/auth';
 import {
   LayoutStore,
   MainToolbar,
+  NotificationStore,
   Sidenav,
   SwUpdateStore,
 } from '@myorg/shared';
@@ -64,7 +65,7 @@ import { filter, pipe, tap } from 'rxjs';
     'data-testid': 'app-root',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [SwUpdateStore],
+  providers: [NotificationStore, SwUpdateStore],
 })
 export class App {
   readonly swUpdateStore = inject(SwUpdateStore);

apps/web-app/src/app/debug/debug.routes.ts

@@ -0,0 +1,4 @@
+import { Route } from '@angular/router';
+import { Debug } from './debug';
+
+export const debugRoutes: Route[] = [{ path: '', component: Debug }];

apps/web-app/src/app/debug/debug.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/divider';
+import { NotificationStore } from '@myorg/shared';
+
+@Component({
+  imports: [MatButton, MatDivider],
+  template: `
+    <div class="p-8 max-w-lg flex flex-col gap-4">
+      <h1 class="text-2xl font-bold m-0">🛠 Debug Tools</h1>
+      <p class="text-sm text-neutral-500 m-0">
+        Not linked from the nav. Use to test features during development.
+      </p>
+
+      <mat-divider />
+
+      <h2 class="text-base font-semibold m-0">Notifications</h2>
+
+      <div class="flex flex-wrap gap-2">
+        <button mat-stroked-button (click)="addInfo()">Add info</button>
+        <button mat-stroked-button (click)="addError()">Add error</button>
+        <button mat-stroked-button (click)="addAuth()">Add auth</button>
+        <button mat-stroked-button (click)="addSwUpdate()">
+          Add sw-update
+        </button>
+        <button mat-stroked-button (click)="addWithAction()">
+          Add with action
+        </button>
+        <button mat-stroked-button (click)="addAutoDismiss()">
+          Add auto-dismiss (3s)
+        </button>
+      </div>
+
+      <div class="flex gap-2">
+        <button mat-stroked-button color="warn" (click)="store.markAllRead()">
+          Mark all read
+        </button>
+        <button mat-flat-button color="warn" (click)="clearAll()">
+          Clear all
+        </button>
+      </div>
+
+      <p class="text-sm text-neutral-500 m-0">
+        Unread: {{ store.unreadCount() }} / Total:
+        {{ store.notifications().length }}
+      </p>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Debug {
+  readonly store = inject(NotificationStore);
+
+  addInfo() {
+    this.store.add({
+      kind: 'info',
+      title: 'Info notification',
+      detail: 'This is a sample informational message.',
+    });
+  }
+
+  addError() {
+    this.store.add({
+      kind: 'error',
+      title: 'Something went wrong',
+      detail: 'An unexpected error occurred. Please try again.',
+    });
+  }
+
+  addAuth() {
+    this.store.add({
+      kind: 'auth',
+      title: 'Session expiring soon',
+      detail: 'You will be logged out in 5 minutes.',
+    });
+  }
+
+  addSwUpdate() {
+    this.store.add({
+      kind: 'sw-update',
+      title: 'App update available',
+      detail: 'A new version is ready. Reload to update.',
+      action: {
+        label: 'Reload',
+        handler: () => window.location.reload(),
+      },
+    });
+  }
+
+  addWithAction() {
+    this.store.add({
+      kind: 'info',
+      title: 'Action required',
+      detail: 'Click the button to perform an action.',
+      action: {
+        label: 'Do it',
+        handler: () => alert('Action triggered!'),
+      },
+    });
+  }
+
+  addAutoDismiss() {
+    this.store.add({
+      kind: 'info',
+      title: 'Auto-dismissing notification',
+      detail: 'This will disappear after 3 seconds.',
+      autoDismissMs: 3000,
+    });
+  }
+
+  clearAll() {
+    this.store.notifications().forEach((n) => this.store.dismiss(n.id));
+  }
+}

libs/shared/src/lib/components/index.ts

@@ -1,5 +1,7 @@
 export * from './main-toolbar';
 export * from './nav-links';
+export * from './notification-bell';
+export * from './notification-list';
 export * from './page-container';
 export * from './page-toolbar-button';
 export * from './page-toolbar';

libs/shared/src/lib/components/main-toolbar.spec.ts

@@ -1,12 +1,17 @@
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { render, screen } from '@testing-library/angular';
+import { NotificationStore } from '../state/notification.store';
 import { MainToolbar } from './main-toolbar';
 
 describe('MainToolbar', () => {
   it('should create', async () => {
     await render(MainToolbar, {
-      providers: [provideHttpClient(), provideHttpClientTesting()],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        NotificationStore,
+      ],
     });
 
     expect(screen.getByTestId('lib-main-toolbar')).toBeTruthy();

libs/shared/src/lib/components/main-toolbar.ts

@@ -11,9 +11,17 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
 
 import { NAV_LINKS } from './nav-links';
+import { NotificationBell } from './notification-bell';
 
 @Component({
-  imports: [MatIcon, MatToolbar, MatTooltip, RouterLink, MatIconButton],
+  imports: [
+    MatIcon,
+    MatToolbar,
+    MatTooltip,
+    RouterLink,
+    MatIconButton,
+    NotificationBell,
+  ],
   selector: 'lib-main-toolbar',
   template: `
     <mat-toolbar class="app-main-toolbar fixed top-0 w-full z-50 flex gap-2">
@@ -87,7 +95,7 @@ import { NAV_LINKS } from './nav-links';
         Demo App
       </a>
       <span class="flex-1"></span>
-      <div class="hidden md:flex gap-2">
+      <div class="hidden md:flex gap-2 items-center">
         @for (link of navLinks; track link.routerLink) {
           <button
             mat-icon-button
@@ -98,17 +106,19 @@ import { NAV_LINKS } from './nav-links';
             <mat-icon>{{ link.icon }}</mat-icon>
           </button>
         }
-        @if (loggedIn()) {
-          <button
-            mat-icon-button
-            (click)="logout.emit()"
-            matTooltip="Log out"
-            aria-label="Log out"
-          >
-            <mat-icon>logout</mat-icon>
-          </button>
-        }
       </div>
+      <lib-notification-bell />
+      @if (loggedIn()) {
+        <button
+          mat-icon-button
+          class="hidden md:inline-flex"
+          (click)="logout.emit()"
+          matTooltip="Log out"
+          aria-label="Log out"
+        >
+          <mat-icon>logout</mat-icon>
+        </button>
+      }
     </mat-toolbar>
   `,
   styles: [

libs/shared/src/lib/components/notification-bell.spec.ts

@@ -0,0 +1,51 @@
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { fireEvent, render, screen } from '@testing-library/angular';
+import { NotificationStore } from '../state/notification.store';
+import { NotificationBell } from './notification-bell';
+
+async function setup() {
+  const { fixture } = await render(NotificationBell, {
+    providers: [provideNoopAnimations(), NotificationStore],
+  });
+  const component = fixture.debugElement.componentInstance as NotificationBell;
+  return { fixture, component };
+}
+
+describe('NotificationBell', () => {
+  it('should render the bell button', async () => {
+    await setup();
+    expect(screen.getByRole('button')).toBeTruthy();
+  });
+
+  it('should hide badge when there are no unread notifications', async () => {
+    await setup();
+    const badgeHost = document.querySelector('.mat-badge-hidden');
+    expect(badgeHost).toBeTruthy();
+  });
+
+  it('should show badge count when there are unread notifications', async () => {
+    const { fixture } = await setup();
+    const store = fixture.debugElement.injector.get(NotificationStore);
+    store.add({ kind: 'info', title: 'Test' });
+    fixture.detectChanges();
+    const badge = document.querySelector('.mat-badge-content');
+    expect(badge?.textContent?.trim()).toBe('1');
+  });
+
+  it('should call open() when bell is clicked', async () => {
+    const { component } = await setup();
+    vi.spyOn(component, 'open');
+    await fireEvent.click(screen.getByRole('button'));
+    expect(component.open).toHaveBeenCalled();
+  });
+
+  it('should have aria-label describing unread count', async () => {
+    const { fixture } = await setup();
+    const store = fixture.debugElement.injector.get(NotificationStore);
+    store.add({ kind: 'info', title: 'A' });
+    store.add({ kind: 'info', title: 'B' });
+    fixture.detectChanges();
+    const button = screen.getByRole('button');
+    expect(button.getAttribute('aria-label')).toContain('2 unread');
+  });
+});

libs/shared/src/lib/components/notification-bell.ts

@@ -0,0 +1,99 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  DestroyRef,
+  Injector,
+  computed,
+  inject,
+} from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { NotificationStore } from '../state/notification.store';
+import { NotificationList } from './notification-list';
+
+@Component({
+  imports: [MatBadgeModule, MatIcon, MatIconButton],
+  selector: 'lib-notification-bell',
+  template: `
+    <button
+      mat-icon-button
+      [matBadge]="store.unreadCount()"
+      [matBadgeHidden]="store.unreadCount() === 0"
+      matBadgeColor="warn"
+      matBadgeSize="small"
+      [attr.aria-label]="ariaLabel()"
+      (click)="open()"
+    >
+      <mat-icon>notifications</mat-icon>
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationBell {
+  readonly store = inject(NotificationStore);
+
+  private readonly injector = inject(Injector);
+  private readonly overlay = inject(Overlay);
+  private readonly bottomSheet = inject(MatBottomSheet);
+  private readonly breakpointObserver = inject(BreakpointObserver);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private overlayRef: OverlayRef | null = null;
+  private panelRef: ComponentRef<NotificationList> | null = null;
+
+  readonly ariaLabel = computed(() => {
+    const count = this.store.unreadCount();
+    return count > 0
+      ? `${count} unread notification${count === 1 ? '' : 's'}`
+      : 'Notifications';
+  });
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
+  }
+
+  open(): void {
+    if (this.breakpointObserver.isMatched(Breakpoints.Handset)) {
+      this.bottomSheet.open(NotificationList, { injector: this.injector });
+    } else {
+      this.toggleOverlay();
+    }
+  }
+
+  private toggleOverlay(): void {
+    if (this.overlayRef?.hasAttached()) {
+      this.store.markAllRead();
+      this.overlayRef.detach();
+      return;
+    }
+
+    if (!this.overlayRef) {
+      this.overlayRef = this.overlay.create({
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        width: '380px',
+        positionStrategy: this.overlay
+          .position()
+          .global()
+          .right('16px')
+          .top('56px'),
+        scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      });
+
+      this.overlayRef.backdropClick().subscribe(() => {
+        this.store.markAllRead();
+        this.overlayRef?.detach();
+      });
+    }
+
+    this.panelRef = this.overlayRef.attach(
+      new ComponentPortal(NotificationList, null, this.injector),
+    );
+  }
+}