CUB-122: Scaffold Control Center React frontend

2026-05-07 20:15:30 -04:00
parent cce3e061a7
commit 8da593c450
116 changed files with 10724 additions and 6611 deletions
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, HostListener, signal, OnDestroy, OnInit } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { NAV_DESTINATIONS } from '../../models/nav.model';
+
+@Component({
+  selector: 'app-nav-rail',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, MatIconModule, MatBadgeModule],
+  templateUrl: './nav-rail.component.html',
+  styleUrl: './nav-rail.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavRailComponent implements OnInit, OnDestroy {
+  protected readonly destinations = NAV_DESTINATIONS;
+  protected readonly expanded = signal(false);
+  protected readonly isExpandedBreakpoint = signal(false);
+
+  private readonly EXPANDED_BP = 1024;
+
+  ngOnInit(): void {
+    this.updateBreakpoint();
+  }
+
+  @HostListener('window:resize')
+  onResize(): void {
+    this.updateBreakpoint();
+  }
+
+  @HostListener('mouseenter')
+  onHoverIn(): void {
+    if (this.isExpandedBreakpoint()) {
+      this.expanded.set(true);
+    }
+  }
+
+  @HostListener('mouseleave')
+  onHoverOut(): void {
+    if (this.isExpandedBreakpoint()) {
+      this.expanded.set(false);
+    }
+  }
+
+  toggleExpand(): void {
+    if (this.isExpandedBreakpoint()) {
+      this.expanded.update(v => !v);
+    }
+  }
+
+  private updateBreakpoint(): void {
+    const isExpanded = window.innerWidth >= this.EXPANDED_BP;
+    this.isExpandedBreakpoint.set(isExpanded);
+    // Collapse when leaving expanded breakpoint
+    if (!isExpanded) {
+      this.expanded.set(false);
+    }
+  }
+
+  ngOnDestroy(): void {
+    // Cleanup is handled by HostListener auto-unsubscribe
+  }
+}