Почтовый кабинет: регистрация, папки, черновики, вложения, грид @jambotron/aria-grid, интерфейс по synthwave-шаблону

Бэкенд: регистрация со входом сразу и /api/config, профиль и смена пароля, свои папки, PATCH письма
(прочитано, флажок, перенос; Спам ставит отметку), корзина и очистка, черновики, несколько адресатов и копия,
вложения черновика уходят с письмом, вложения и заголовки To/Cc входящих сохраняются, письма заблокированных —
в Спам. Исправлено: загрузка файла (415), колонка content_id (500 на любых вложениях), SPA-маршрут с точкой.
Фронтенд переписан: все таблицы — грид, оформление — шаблон synthwave-design-showcase.html.

α
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/app/ui/overlays.component.ts

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, ElementRef, effect, inject, signal, viewChild } from '@angular/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { DialogService } from './dialog.service';
+import { ToastService } from './toast.service';
+
+/** Toasts and the dialog — placed once in the app root. */
+@Component({
+  selector: 'app-overlays',
+  imports: [A11yModule, FormsModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 w-[min(380px,calc(100vw-2rem))]">
+      @for (toast of toasts.toasts(); track toast.id) {
+        <div class="glass-panel static px-4 py-3 flex items-start gap-3 text-sm font-rajdhani"
+             [class.border-pink-500]="toast.kind === 'error'" role="status">
+          <mat-icon [class]="toast.kind === 'error' ? 'text-pink-400' : 'text-emerald-400'">
+            {{ toast.kind === 'error' ? 'error' : 'check_circle' }}
+          </mat-icon>
+          <span class="flex-grow text-slate-200">{{ toast.text }}</span>
+          <button type="button" class="text-slate-400 hover:text-pink-400" aria-label="Dismiss" (click)="toasts.dismiss(toast.id)">
+            <mat-icon class="!text-lg">close</mat-icon>
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (dialogs.current(); as d) {
+      <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md"
+           (click)="cancel()" (keydown.escape)="cancel()">
+        <div class="glass-panel static max-w-lg w-full p-6 relative border-2 !border-cyan-400 shadow-[0_0_50px_rgba(0,240,255,0.4)]"
+             role="dialog" aria-modal="true" aria-labelledby="dialog-title" cdkTrapFocus [cdkTrapFocusAutoCapture]="true"
+             (click)="$event.stopPropagation()">
+          <button type="button" (click)="cancel()" aria-label="Close dialog"
+                  class="absolute top-4 right-4 text-slate-400 hover:text-pink-400 rounded-lg p-1">
+            <mat-icon>close</mat-icon>
+          </button>
+          <div class="flex items-center gap-3 mb-4">
+            <div class="w-10 h-10 rounded-full flex items-center justify-center border"
+                 [class]="d.danger ? 'bg-pink-500/20 border-pink-500 text-pink-400' : 'bg-cyan-500/15 border-cyan-400 text-cyan-300'">
+              <mat-icon>{{ d.danger ? 'warning' : d.input !== undefined ? 'edit' : 'help' }}</mat-icon>
+            </div>
+            <h3 id="dialog-title" class="text-lg font-orbitron font-bold text-slate-100 pr-8">{{ d.title }}</h3>
+          </div>
+          @if (d.message) {
+            <p class="font-rajdhani text-slate-300 mb-4 whitespace-pre-line">{{ d.message }}</p>
+          }
+          <form (ngSubmit)="confirm()">
+            @if (d.input !== undefined) {
+              <label class="synth-label" for="dialog-input">{{ d.inputLabel }}</label>
+              <input #input id="dialog-input" name="value" class="synth-input mb-5" [(ngModel)]="value" autocomplete="off">
+            }
+            <div class="flex justify-end gap-3">
+              <button type="button" (click)="cancel()" class="px-4 py-2 rounded-lg text-xs font-mono text-slate-400 hover:text-slate-200">
+                CANCEL [ESC]
+              </button>
+              <button type="submit" class="cyber-btn px-5 py-2 rounded-lg text-xs font-bold"
+                      [class.!border-pink-500]="d.danger" [disabled]="d.required && !value().trim()">
+                {{ d.confirmLabel || 'Confirm' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    }
+  `
+})
+export class OverlaysComponent {
+  readonly toasts = inject(ToastService);
+  readonly dialogs = inject(DialogService);
+  readonly value = signal('');
+  private input = viewChild<ElementRef<HTMLInputElement>>('input');
+
+  constructor() {
+    effect(() => {
+      const d = this.dialogs.current();
+      this.value.set(d?.input ?? '');
+    });
+    effect(() => {
+      const el = this.input()?.nativeElement;
+      if (el) setTimeout(() => el.select());
+    });
+  }
+
+  confirm(): void {
+    const d = this.dialogs.current();
+    if (!d || (d.required && !this.value().trim())) return;
+    d.resolve(d.input !== undefined ? this.value().trim() : '');
+  }
+
+  cancel(): void { this.dialogs.current()?.resolve(null); }
+}