Левая панель: комбобокс ящиков; добавление ящиков — в Настройки; выделение в цвете темы

- MAILBOX: <select> со своими, общими и добавленными ящиками (непрочитанные в скобках), выбор — переключение; список и форма «добавить» из левой панели убраны. - Settings → MY MAILBOXES (у всех): список ящиков, «убрать» добавленный, «добавить» по паролю. - Выбранная папка, ссылка и палитра — nav-active в --primary-color темы (было фиксированное розовое — в Neon Cyan баклажановое). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-07 20:10:54 +01:00
parent 1076cd4f3f
commit 3d9fc77201
5 changed files with 132 additions and 84 deletions
@@ -81,43 +81,15 @@ import { ToastService } from '../../ui/toast.service';
      <div class="flex-grow max-w-[1500px] w-full mx-auto p-3 md:p-5 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-5">
        <nav class="glass-panel static p-4 md:pt-6 h-fit lg:sticky lg:top-20 lg:block" [class.hidden]="!menuOpen()"
             aria-label="Mail folders">
-          <div class="flex items-center justify-between mb-2 px-1">
-            <h2 class="text-[11px] font-orbitron font-bold text-cyan-300 tracking-widest">MAILBOXES</h2>
-            <button type="button" class="text-slate-400 hover:text-cyan-300" matTooltip="Add a mailbox you have the password of"
-                    aria-label="Add mailbox" [attr.aria-expanded]="attachOpen()" (click)="attachOpen.set(!attachOpen())">
-              <mat-icon class="!text-xl">add_circle_outline</mat-icon></button>
-          </div>
-          <ul class="space-y-1 mb-3" aria-label="Your mailboxes">
-            @for (b of boxes(); track b.email) {
-              <li class="flex items-center gap-1">
-                <button type="button" (click)="switchTo(b)" [attr.aria-current]="b.email === auth.email() ? 'true' : null"
-                        class="flex-grow flex items-center gap-2 px-3 py-1.5 rounded-lg border text-left font-rajdhani font-semibold min-w-0"
-                        [class.border-pink-500/40]="b.email === auth.email()" [class.bg-pink-500/15]="b.email === auth.email()"
-                        [class.text-pink-200]="b.email === auth.email()" [class.border-transparent]="b.email !== auth.email()"
-                        [class.text-slate-300]="b.email !== auth.email()"
-                        [matTooltip]="b.email + (b.shared ? ' — shared' : b.kind === 'ATTACHED' ? ' — attached' : '')">
-                  <mat-icon class="!text-lg shrink-0">{{ b.shared ? 'groups' : b.kind === 'OWN' ? 'person' : 'link' }}</mat-icon>
-                  <span class="flex-grow truncate text-sm">{{ b.email }}</span>
-                  @if (b.unread) {
-                    <span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300" [attr.aria-label]="b.unread + ' unread'">{{ b.unread }}</span>
-                  }
-                </button>
-                @if (b.kind !== 'OWN') {
-                  <button type="button" class="text-slate-500 hover:text-pink-400" [attr.aria-label]="'Remove ' + b.email + ' from my mailboxes'"
-                          matTooltip="Remove from my mailboxes" (click)="leave(b)"><mat-icon class="!text-base">close</mat-icon></button>
-                }
-              </li>
+          <label for="mailbox-pick" class="block text-[11px] font-orbitron font-bold text-cyan-300 tracking-widest mb-2 px-1">MAILBOX</label>
+          <select id="mailbox-pick" class="synth-input !py-1.5 !text-sm font-mono mb-4" [ngModel]="auth.email()"
+                  (ngModelChange)="pick($event)" [disabled]="state.boxes().length < 2">
+            @for (b of state.boxes(); track b.email) {
+              <option [value]="b.email">{{ b.email }}{{ b.shared ? ' · shared' : b.kind === 'ATTACHED' ? ' · attached' : '' }}{{ b.unread ? ' (' + b.unread + ')' : '' }}</option>
+            } @empty {
+              <option [value]="auth.email()">{{ auth.email() }}</option>
            }
-          </ul>
-          @if (attachOpen()) {
-            <form class="space-y-2 mb-4 p-2 rounded-lg border border-cyan-500/20" (ngSubmit)="attach()" aria-label="Add a mailbox">
-              <label class="synth-label" for="att-email">Mailbox</label>
-              <input id="att-email" name="attEmail" class="synth-input !py-1.5" [(ngModel)]="attachEmail" autocomplete="off" placeholder="name&#64;domain">
-              <label class="synth-label" for="att-pw">Its password</label>
-              <input id="att-pw" name="attPw" type="password" class="synth-input !py-1.5" [(ngModel)]="attachPassword" autocomplete="off">
-              <button type="submit" class="cyber-btn w-full py-1.5 rounded-lg text-xs font-bold"><mat-icon>link</mat-icon> ADD</button>
-            </form>
-          }
+          </select>

          <a routerLink="/compose" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-xs mb-4" (click)="menuOpen.set(false)">
            <mat-icon>edit</mat-icon> COMPOSE
@@ -126,7 +98,7 @@ import { ToastService } from '../../ui/toast.service';
          <ul class="space-y-1">
            @for (folder of systemFolders(); track folder.id) {
              <li>
-                <a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
+                <a [routerLink]="['/folder', folder.id]" routerLinkActive="nav-active"
                   class="flex items-center gap-3 px-3 py-2 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold"
                   (click)="menuOpen.set(false)">
                  <mat-icon class="!text-xl">{{ icon(folder) }}</mat-icon>
@@ -148,7 +120,7 @@ import { ToastService } from '../../ui/toast.service';
          <ul class="space-y-1">
            @for (folder of ownFolders(); track folder.id) {
              <li class="flex items-center gap-1">
-                <a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
+                <a [routerLink]="['/folder', folder.id]" routerLinkActive="nav-active"
                   class="flex-grow flex items-center gap-3 px-3 py-1.5 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold min-w-0"
                   (click)="menuOpen.set(false)">
                  <mat-icon class="!text-xl">folder</mat-icon>
@@ -166,7 +138,7 @@ import { ToastService } from '../../ui/toast.service';

          <div class="border-t border-cyan-500/20 mt-5 pt-3 space-y-1">
            @for (link of links; track link.path) {
-              <a [routerLink]="link.path" routerLinkActive="!text-pink-300"
+              <a [routerLink]="link.path" routerLinkActive="nav-active-text"
                 class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-slate-400 hover:text-cyan-300 font-rajdhani font-semibold"
                 (click)="menuOpen.set(false)">
                <mat-icon class="!text-xl">{{ link.icon }}</mat-icon>{{ link.label }}
@@ -203,11 +175,6 @@ export class ShellComponent {

  readonly themes = THEMES;
  readonly menuOpen = signal(false);
-  /** own, shared and attached mailboxes of the login (shown when there is more than the own one, or to add one) */
-  readonly boxes = signal<MailboxEntry[]>([]);
-  readonly attachOpen = signal(false);
-  attachEmail = '';
-  attachPassword = '';
  query = '';

  readonly links = [
@@ -238,8 +205,8 @@ export class ShellComponent {
  constructor() {
    this.state.refreshFolders();
    this.state.refreshProfile();
-    this.loadBoxes();
-    const timer = setInterval(() => { this.state.refreshFolders(); this.loadBoxes(); }, 30000);
+    this.state.refreshBoxes();
+    const timer = setInterval(() => { this.state.refreshFolders(); this.state.refreshBoxes(); }, 30000);
    inject(DestroyRef).onDestroy(() => clearInterval(timer));
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
      const q = this.router.parseUrl(this.router.url).queryParams['q'];
@@ -300,10 +267,6 @@ export class ShellComponent {
    }
  }

-  loadBoxes(): void {
-    this.api.myMailboxes().subscribe({ next: list => this.boxes.set(list), error: () => {} });
-  }
-
  /** Another mailbox of this login: its session, full reload — fresh folders and profile. */
  switchTo(b: MailboxEntry): void {
    if (b.email === this.auth.email()) { this.router.navigate(['/']); return; }
@@ -313,37 +276,9 @@ export class ShellComponent {
    });
  }

-  attach(): void {
-    const email = this.attachEmail.trim().toLowerCase();
-    if (!email || !this.attachPassword) { this.toasts.error('Mailbox and its password'); return; }
-    this.api.attachMailbox(email, this.attachPassword).subscribe({
-      next: b => {
-        this.attachEmail = this.attachPassword = '';
-        this.attachOpen.set(false);
-        this.toasts.ok(b.email + ' added to your mailboxes');
-        this.loadBoxes();
-      },
-      error: e => this.toasts.error(errorText(e))
-    });
-  }
-
-  leave(b: MailboxEntry): void {
-    this.dialogs.confirm(`Remove ${b.email}?`, b.shared
-      ? 'It disappears from your menu. An administrator can give it back.'
-      : 'It disappears from your menu. Add it again with its password.', 'Remove', true).subscribe(ok => {
-      if (ok === null) return;
-      this.api.leaveMailbox(b.email).subscribe({
-        next: () => {
-          this.toasts.ok(b.email + ' removed');
-          if (b.email === this.auth.email()) {
-            const own = this.boxes().find(x => x.kind === 'OWN');
-            if (own) { this.switchTo(own); return; }
-          }
-          this.loadBoxes();
-        },
-        error: e => this.toasts.error(errorText(e))
-      });
-    });
+  pick(email: string): void {
+    const b = this.state.boxes().find(x => x.email === email);
+    if (b) this.switchTo(b);
  }

  backToAdmin(): void {