feat: notifications

client/src/app/components/toast-container/toast-container.html

@@ -0,0 +1,13 @@
+<div class="toast-container position-fixed top-0 end-0 p-3">
+  @for (notification of notifications.notifications(); track notification) {
+    <ngb-toast
+      [autohide]="true"
+      [delay]="notification.delay ?? 3000"
+      (hidden)="notifications.remove(notification)"
+    >
+      <div class="text-{{ notification.type }}">
+        {{ notification.message }}
+      </div>
+    </ngb-toast>
+  }
+</div>

client/src/app/components/toast-container/toast-container.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastContainer } from './toast-container';
+
+describe('ToastContainer', () => {
+  let component: ToastContainer;
+  let fixture: ComponentFixture<ToastContainer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToastContainer],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ToastContainer);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/components/toast-container/toast-container.ts

@@ -0,0 +1,13 @@
+import { Component, inject } from '@angular/core';
+import { NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
+import { NotificationService } from '../../services/notification';
+
+@Component({
+  selector: 'app-toast-container',
+  imports: [NgbToastModule],
+  templateUrl: './toast-container.html',
+  styleUrl: './toast-container.less',
+})
+export class ToastContainer {
+  notifications = inject(NotificationService);
+}