Почтовый кабинет: регистрация, папки, черновики, вложения, грид @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/background.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/** Synthwave sun, mountains and the moving grid floor (the showcase background). */
+@Component({
+  selector: 'app-background',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="synth-stage" aria-hidden="true">
+      <div class="synth-sun"></div>
+      <div class="synth-mountains"></div>
+      <div class="grid-container"><div class="grid-plane"></div></div>
+    </div>
+  `
+})
+export class BackgroundComponent {}

frontend/src/app/ui/dialog.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, signal } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export interface DialogRequest {
+  title: string;
+  message?: string;
+  confirmLabel?: string;
+  danger?: boolean;
+  /** Set — the dialog asks for a text (prompt); the value is the initial text. */
+  input?: string;
+  inputLabel?: string;
+  required?: boolean;
+}
+
+interface OpenDialog extends DialogRequest { resolve: (value: string | null) => void; }
+
+/** One glass dialog at a time: confirm (resolves '' or null) and prompt (the text or null). */
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+  readonly current = signal<OpenDialog | null>(null);
+
+  ask(request: DialogRequest): Observable<string | null> {
+    return new Observable<string | null>(subscriber => {
+      this.current()?.resolve(null);
+      this.current.set({
+        ...request,
+        resolve: value => {
+          this.current.set(null);
+          subscriber.next(value);
+          subscriber.complete();
+        }
+      });
+    });
+  }
+
+  confirm(title: string, message: string, confirmLabel = 'Confirm', danger = false): Observable<string | null> {
+    return this.ask({ title, message, confirmLabel, danger });
+  }
+
+  prompt(title: string, inputLabel: string, value = '', confirmLabel = 'Save'): Observable<string | null> {
+    return this.ask({ title, inputLabel, input: value, confirmLabel, required: true });
+  }
+}

frontend/src/app/ui/grid.ts

@@ -0,0 +1,26 @@
+import { Provider, inject } from '@angular/core';
+import { JT_GRID_BULK_UI, JtGridBulkUi } from '@jambotron/aria-grid';
+import { DialogService } from './dialog.service';
+import { ToastService } from './toast.service';
+
+/** The grid's bulk actions ask through our glass dialog and report through our toasts. */
+export function provideMailGrid(): Provider[] {
+  return [{
+    provide: JT_GRID_BULK_UI,
+    useFactory: (): JtGridBulkUi => {
+      const dialogs = inject(DialogService);
+      const toasts = inject(ToastService);
+      return {
+        ask: request => dialogs.ask({
+          title: request.title,
+          message: request.message,
+          confirmLabel: request.confirmLabel,
+          danger: request.danger,
+          ...(request.reason ? { input: '', inputLabel: 'Reason', required: true } : {})
+        }),
+        success: message => toasts.ok(message),
+        error: message => toasts.error(message)
+      };
+    }
+  }];
+}

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); }
+}

frontend/src/app/ui/theme.service.ts

@@ -0,0 +1,36 @@
+import { Injectable, effect, signal } from '@angular/core';
+
+export const THEMES = [
+  { value: 'theme-cyber-magenta', label: 'Cyber Magenta' },
+  { value: 'theme-neon-cyan', label: 'Neon Cyan' },
+  { value: 'theme-sunset-orange', label: 'Sunset Orange' },
+  { value: 'theme-matrix-green', label: 'Matrix Green' }
+];
+
+/** Palette, high contrast and background motion — on <html>, remembered in this browser. */
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  readonly theme = signal(load('theme', THEMES[0].value));
+  readonly highContrast = signal(load('contrast', 'off') === 'on');
+  readonly animation = signal(load('animation', 'on') === 'on');
+
+  constructor() {
+    effect(() => {
+      const root = document.documentElement;
+      THEMES.forEach(t => root.classList.toggle(t.value, t.value === this.theme()));
+      root.classList.toggle('high-contrast', this.highContrast());
+      root.classList.toggle('no-anim', !this.animation());
+      save('theme', this.theme());
+      save('contrast', this.highContrast() ? 'on' : 'off');
+      save('animation', this.animation() ? 'on' : 'off');
+    });
+  }
+}
+
+function load(key: string, fallback: string): string {
+  try { return localStorage.getItem('ui.' + key) ?? fallback; } catch { return fallback; }
+}
+
+function save(key: string, value: string): void {
+  try { localStorage.setItem('ui.' + key, value); } catch { /* storage blocked */ }
+}

frontend/src/app/ui/toast.service.ts

@@ -0,0 +1,24 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+
+export interface Toast { id: number; text: string; kind: 'ok' | 'error'; }
+
+/** Short messages in the corner; also read out by screen readers. */
+@Injectable({ providedIn: 'root' })
+export class ToastService {
+  private announcer = inject(LiveAnnouncer);
+  private next = 1;
+  readonly toasts = signal<Toast[]>([]);
+
+  ok(text: string): void { this.show(text, 'ok', 4000); }
+  error(text: string): void { this.show(text, 'error', 8000); }
+
+  dismiss(id: number): void { this.toasts.update(list => list.filter(t => t.id !== id)); }
+
+  private show(text: string, kind: Toast['kind'], ms: number): void {
+    const id = this.next++;
+    this.toasts.update(list => [...list.slice(-3), { id, text, kind }]);
+    this.announcer.announce(text, kind === 'error' ? 'assertive' : 'polite');
+    setTimeout(() => this.dismiss(id), ms);
+  }
+}