Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, signal, ViewChild } from '@angular/core';
|
|
import { Router, RouterOutlet } from '@angular/router';
|
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
import { Subscription } from 'rxjs';
|
|
import { NavRailComponent } from '../nav-rail/nav-rail.component';
|
|
import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
|
|
import { HeaderBarComponent } from '../header-bar/header-bar.component';
|
|
import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';
|
|
import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
|
|
import { AgentCardData } from '../../models/agent.model';
|
|
|
|
/**
|
|
* Layout Shell — wraps the main content area with adaptive navigation.
|
|
* Desktop/Kiosk: Nav Rail (left) + Header + Content
|
|
* Mobile: Header + Content + Bottom Nav
|
|
* Per spec Section 3.1 (kiosk) and 3.2 (mobile).
|
|
* CUB-26: Hosts the Agent Session Drawer for quick-jump navigation.
|
|
*/
|
|
@Component({
|
|
selector: 'app-layout-shell',
|
|
standalone: true,
|
|
imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent, AgentSessionDrawerComponent],
|
|
templateUrl: './layout-shell.component.html',
|
|
styleUrl: './layout-shell.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class LayoutShellComponent implements OnDestroy {
|
|
@ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
|
|
@ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
|
|
|
|
/** Whether the viewport is mobile-sized. */
|
|
readonly isMobile = signal(false);
|
|
|
|
private readonly breakpointSub: Subscription;
|
|
|
|
constructor(
|
|
private readonly breakpointObserver: BreakpointObserver,
|
|
private readonly router: Router,
|
|
) {
|
|
this.breakpointSub = this.breakpointObserver
|
|
.observe([Breakpoints.Handset, Breakpoints.Small])
|
|
.subscribe((result) => {
|
|
this.isMobile.set(result.matches);
|
|
});
|
|
}
|
|
|
|
/** Open the quick-jump drawer from anywhere in the layout. */
|
|
openQuickJump(): void {
|
|
this.quickJumpDrawer?.open();
|
|
}
|
|
|
|
/** Open the session drawer for a specific agent. */
|
|
openSessionDrawer(agent: AgentCardData): void {
|
|
this.sessionDrawer?.open(agent);
|
|
}
|
|
|
|
/** Open the session log page directly (long-press bypass). */
|
|
openSessionLog(sessionKey: string): void {
|
|
this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
|
|
}
|
|
|
|
/** Handle "Open Full Session" action from session drawer. */
|
|
onOpenSession(sessionKey: string): void {
|
|
this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
|
|
}
|
|
|
|
/** Handle "Pin to Dashboard" action from session drawer. */
|
|
onPinToDashboard(sessionKey: string): void {
|
|
// TODO: Implement pin-to-dashboard logic
|
|
console.log('[LayoutShell] Pin to dashboard:', sessionKey);
|
|
}
|
|
|
|
/** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
|
|
@HostListener('document:keydown', ['$event'])
|
|
onGlobalKeydown(event: KeyboardEvent): void {
|
|
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
|
|
event.preventDefault();
|
|
this.quickJumpDrawer?.toggle();
|
|
}
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.breakpointSub.unsubscribe();
|
|
}
|
|
} |