CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-51: Implement Quick-Jump Drawer Component

Browse Source
This commit is contained in:
cubecraft-agents[bot]
2026-04-26 13:06:24 +00:00
parent 8d0adeb2e9
commit b4e110f4c3
9 changed files with 698 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/layout/header-bar/header-bar.component.html
View File

@@ -2,6 +2,16 @@
<h1 class="header-bar__title">Command Hub</h1>
<div class="header-bar__actions">
<!-- Quick-Jump trigger -->
<button
class="header-bar__action-btn"
mat-icon-button
aria-label="Jump to agent"
(click)="openQuickJump.emit()"
>
<mat-icon>keyboard_command_key</mat-icon>
</button>
<!-- Live indicator -->
<button
class="header-bar__action-btn header-bar__live-btn"

5
frontend/src/app/layout/header-bar/header-bar.component.ts
View File

@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Output, signal } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
@@ -17,6 +17,9 @@ import { MatBadgeModule } from '@angular/material/badge';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderBarComponent {
/** Emits when the user requests the Quick-Jump drawer. */
@Output() readonly openQuickJump = new EventEmitter<void>();
protected readonly notificationCount = signal(3);
protected readonly isConnected = signal(true);

7
frontend/src/app/layout/layout-shell/layout-shell.component.html
View File

@@ -4,7 +4,7 @@
<div class="layout-shell__main">
<!-- Header bar at top of content area -->
<app-header-bar class="layout-shell__header" />
<app-header-bar class="layout-shell__header" (openQuickJump)="openQuickJump()" />
<!-- Scrollable content area -->
<main class="layout-shell__content">
@@ -14,4 +14,7 @@
<!-- Mobile: Bottom Navigation Bar -->
<app-bottom-nav class="layout-shell__bottom-nav" />
</div>
</div>
<!-- Quick-Jump Drawer (global overlay) -->
<app-quick-jump-drawer />

23
frontend/src/app/layout/layout-shell/layout-shell.component.ts
View File

@@ -1,8 +1,9 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
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';
/**
* Layout Shell — wraps the main content area with adaptive navigation.
@@ -13,9 +14,25 @@ import { HeaderBarComponent } from '../header-bar/header-bar.component';
@Component({
selector: 'app-layout-shell',
standalone: true,
imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent],
imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
templateUrl: './layout-shell.component.html',
styleUrl: './layout-shell.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutShellComponent {}
export class LayoutShellComponent {
@ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
/** Open the quick-jump drawer from anywhere in the layout. */
openQuickJump(): void {
this.quickJumpDrawer?.open();
}
/** 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();
}
}
}