Notification stack

<div class="flex flex-col gap-2">
  @for (n of notices(); track n.id) {
    <div
      hlmAlert
      [variant]="n.variant === 'error' ? 'destructive' : 'default'"
      [class]="n.variant === 'warning' ? 'text-amber-700 dark:text-amber-500' : ''"
    >
      <ng-icon [name]="icons[n.variant]" />
      <p hlmAlertDescription class="text-current">{{ n.text }}</p>
      <div hlmAlertAction>
        <button hlmBtn variant="outline" size="xs" (click)="dismiss(n.id)">Dismiss</button>
      </div>
    </div>
  }
</div>

// Component
interface Notice {
  id: number;
  text: string;
  variant: 'action' | 'error' | 'warning';
}

protected readonly icons: Record<Notice['variant'], string> = {
  action: 'lucideInfo',
  warning: 'lucideTriangleAlert',
  error: 'lucideCircleAlert',
};
protected readonly notices = signal<Notice[]>([]);
private nextId = 1;

protected add(template: Omit<Notice, 'id'>): void {
  this.notices.update(list => [{ id: this.nextId++, ...template }, ...list]);
}

protected dismiss(id: number): void {
  this.notices.update(list => list.filter(n => n.id !== id));
}