Add contacts, reply/forward, pagination, HTML toggle, Docker Compose for VPS

Co-authored-by: Junie <junie@jetbrains.com>

frontend/src/app/components/compose/compose.component.ts

@@ -2,12 +2,13 @@ import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { MailService } from '../../services/mail.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-compose',
   standalone: true,
   imports: [RouterLink, FormsModule],
+  providers: [MailService],
   template: `
     <div class="glass-panel p-6">
       <h2 class="text-lg font-orbitron font-bold text-synth-cyan mb-6 flex items-center gap-2">
@@ -36,10 +37,24 @@ import { Router } from '@angular/router';
         </div>
 
         <div>
-          <label for="body" class="block text-xs font-mono text-synth-cyan mb-1">BODY</label>
+          <div class="flex items-center justify-between mb-1">
+            <label for="body" class="text-xs font-mono text-synth-cyan">BODY</label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <span class="text-xs font-mono text-slate-400">HTML</span>
+              <input type="checkbox" [(ngModel)]="isHtml" name="isHtml" class="sr-only">
+              <span class="w-10 h-5 rounded-full bg-synth-dark/50 border border-synth-cyan/30 relative transition-all"
+                [class.bg-synth-cyan/30]="isHtml" [class.border-synth-cyan]="isHtml">
+                <span class="absolute top-0.5 left-0.5 w-3.5 h-3.5 rounded-full bg-synth-cyan transition-all"
+                  [class.translate-x-5]="isHtml"></span>
+              </span>
+            </label>
+          </div>
           <textarea id="body" [(ngModel)]="body" name="body" rows="10" required
             class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all resize-none"
-            placeholder="Write your message..."></textarea>
+            [placeholder]="isHtml ? 'Write HTML or Markdown...' : 'Write your message...'"></textarea>
+          @if (isHtml) {
+            <p class="text-xs text-slate-500 font-mono mt-1">💡 Supports Markdown: **bold**, *italic*, - lists, \`\`\`code\`\`\`</p>
+          }
         </div>
 
         <div class="flex gap-3 pt-4">
@@ -59,22 +74,43 @@ import { Router } from '@angular/router';
 export default class ComposeComponent {
   private mailService = inject(MailService);
   private router = inject(Router);
+  private route = inject(ActivatedRoute);
 
   to = '';
   subject = '';
   body = '';
+  isHtml = false;
   sending = false;
   success = false;
 
+  constructor() {
+    // Поддержка Reply и Forward через queryParams
+    this.route.queryParams.subscribe(params => {
+      if (params['replyTo']) {
+        this.to = params['replyTo'];
+      }
+      if (params['subject']) {
+        this.subject = params['subject'];
+      }
+      if (params['forwardSubject']) {
+        this.subject = params['forwardSubject'];
+      }
+      if (params['forwardBody']) {
+        this.body = '\n\n--- Forwarded message ---\n' + params['forwardBody'];
+      }
+    });
+  }
+
   onSend(): void {
     this.sending = true;
-    this.mailService.send({ to: this.to, subject: this.subject, body: this.body }).subscribe({
+    this.mailService.send({ to: this.to, subject: this.subject, body: this.body, html: this.isHtml }).subscribe({
       next: () => {
         this.success = true;
         this.sending = false;
         this.to = '';
         this.subject = '';
         this.body = '';
+        this.isHtml = false;
         setTimeout(() => this.router.navigate(['/inbox']), 1500);
       },
       error: () => {