WIP

2026-06-20 17:51:33 -07:00
parent f55807fa7d
commit 3558c67fd7
55 changed files with 3140 additions and 85 deletions
@@ -0,0 +1,64 @@
+.toast-stack {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 11000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 420px;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 10px 14px;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  color: #ffffff;
+  font-size: 0.875rem;
+  line-height: 1.35;
+  cursor: pointer;
+  animation: toast-in 0.18s ease-out;
+}
+
+.toast-message {
+  flex: 1;
+  word-break: break-word;
+}
+
+.toast-close {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.85;
+}
+
+.toast-error {
+  background-color: #dc2626;
+}
+
+.toast-success {
+  background-color: #16a34a;
+}
+
+.toast-info {
+  background-color: #2563eb;
+}
+
+@keyframes toast-in {
+  from {
+    transform: translateY(-6px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToastService } from '../../services/toast.service';
+
+@Component({
+  selector: 'app-toast-container',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="toast-stack">
+      <div *ngFor="let toast of toastService.toasts()"
+           class="toast"
+           [class.toast-error]="toast.type === 'error'"
+           [class.toast-success]="toast.type === 'success'"
+           [class.toast-info]="toast.type === 'info'"
+           (click)="toastService.dismiss(toast.id)">
+        <span class="toast-message">{{ toast.message }}</span>
+        <button type="button" class="toast-close" aria-label="Dismiss"
+                (click)="toastService.dismiss(toast.id); $event.stopPropagation()">×</button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./toast-container.component.scss'],
+})
+export class ToastContainerComponent {
+  constructor(public toastService: ToastService) {}
+}