Merge pull request 'CUB-51: Quick-Jump Drawer Component (Slide-Out)' (#14) from agent/rex/CUB-51-quick-jump-drawer into dev
Reviewed-on: #14 Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com> Reviewed-by: Joshua <joshua@cnjmail.com>
This commit was merged in pull request #14.
This commit is contained in:
@@ -1,2 +1,3 @@
|
||||
export * from './quick-jump-button/quick-jump-button.component';
|
||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
||||
export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';
|
||||
1
frontend/src/app/components/quick-jump-drawer/index.ts
Normal file
1
frontend/src/app/components/quick-jump-drawer/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';
|
||||
@@ -0,0 +1,109 @@
|
||||
<!-- ============================================================================
|
||||
Quick-Jump Drawer — Slide-out panel for fast agent switching
|
||||
Per CUB-51: Slides from right, agent list with status badges,
|
||||
search/filter input, closes via ESC or outside click.
|
||||
============================================================================-->
|
||||
|
||||
<!-- Backdrop overlay -->
|
||||
@if (isOpen()) {
|
||||
<div
|
||||
class="quick-jump-backdrop"
|
||||
(click)="onBackdropClick($event)"
|
||||
[@backdropEnter]
|
||||
></div>
|
||||
}
|
||||
|
||||
<!-- Drawer panel -->
|
||||
<div
|
||||
class="quick-jump-drawer"
|
||||
[class.quick-jump-drawer--open]="isOpen()"
|
||||
(keydown)="onDrawerKeydown($event)"
|
||||
role="dialog"
|
||||
aria-label="Quick jump to agent"
|
||||
[attr.aria-hidden]="!isOpen()"
|
||||
>
|
||||
<!-- Drawer header -->
|
||||
<div class="quick-jump-drawer__header">
|
||||
<h2 class="quick-jump-drawer__title">Jump to Agent</h2>
|
||||
<button
|
||||
class="quick-jump-drawer__close-btn"
|
||||
type="button"
|
||||
aria-label="Close drawer"
|
||||
(click)="close()"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="quick-jump-drawer__search">
|
||||
<span class="quick-jump-drawer__search-icon">search</span>
|
||||
<input
|
||||
#searchInput
|
||||
type="text"
|
||||
class="quick-jump-drawer__search-input"
|
||||
placeholder="Search agents..."
|
||||
[formControl]="searchControl"
|
||||
autocomplete="off"
|
||||
aria-label="Search agents"
|
||||
/>
|
||||
@if (searchControl.value) {
|
||||
<button
|
||||
class="quick-jump-drawer__search-clear"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
(click)="searchControl.setValue('')"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Agent list -->
|
||||
<ul class="quick-jump-drawer__agent-list" role="listbox" aria-label="Agent list">
|
||||
@for (agent of filteredAgents(); track agent.id; let i = $index) {
|
||||
<li
|
||||
[id]="'quick-jump-agent-' + i"
|
||||
class="quick-jump-drawer__agent-item"
|
||||
[class.quick-jump-drawer__agent-item--highlighted]="highlightedIndex() === i"
|
||||
role="option"
|
||||
[attr.aria-selected]="highlightedIndex() === i"
|
||||
(click)="selectAgent(agent)"
|
||||
(mouseenter)="highlightedIndex.set(i)"
|
||||
(mouseleave)="highlightedIndex.set(-1)"
|
||||
>
|
||||
<!-- Status badge -->
|
||||
<span
|
||||
class="status-dot {{ getStatusClass(agent.status) }}"
|
||||
[attr.aria-label]="getStatusLabel(agent.status)"
|
||||
></span>
|
||||
|
||||
<!-- Agent info -->
|
||||
<div class="quick-jump-drawer__agent-info">
|
||||
<span class="quick-jump-drawer__agent-name">{{ agent.displayName }}</span>
|
||||
<span class="quick-jump-drawer__agent-role">{{ agent.role }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Status label -->
|
||||
<span class="quick-jump-drawer__agent-status-label" [class]="'status-label--' + agent.status">
|
||||
{{ getStatusLabel(agent.status) }}
|
||||
</span>
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="quick-jump-drawer__empty">
|
||||
@if (searchControl.value) {
|
||||
<span>No agents matching "{{ searchControl.value }}"</span>
|
||||
} @else {
|
||||
<span>No agents online</span>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<!-- Footer hint -->
|
||||
<div class="quick-jump-drawer__footer">
|
||||
<span class="quick-jump-drawer__footer-hint">
|
||||
<kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>Esc</kbd> Close
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,333 @@
|
||||
// ============================================================================
|
||||
// Quick-Jump Drawer — Slide-out panel for fast agent switching
|
||||
// Per CUB-51: slides from right, agent list with status badges,
|
||||
// search/filter input, closes via ESC or outside click.
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Backdrop
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-out;
|
||||
|
||||
&.backdrop-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drawer Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 380px;
|
||||
max-width: 90vw;
|
||||
background-color: var(--cc-surface-container);
|
||||
border-left: 1px solid var(--cc-outline);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 12px;
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.quick-jump-drawer__title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface);
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cc-surface-container-high);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Search
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16px 24px 8px;
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 12px;
|
||||
background-color: var(--cc-surface-container-high);
|
||||
transition: border-color 150ms ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--status-active);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 12px;
|
||||
font-family: 'Material Icons';
|
||||
font-size: 20px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
// Use a simple "search" text since icon font may not be loaded inside
|
||||
// the drawer — rely on Material icon font from the parent app
|
||||
&::before {
|
||||
content: 'search';
|
||||
font-family: 'Material Icons';
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 12px 8px;
|
||||
font-size: 15px;
|
||||
font-family: 'Inter', 'Roboto', sans-serif;
|
||||
color: var(--cc-on-surface);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--cc-on-surface-variant);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cc-surface-container);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Agent List
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__agent-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
|
||||
&:hover,
|
||||
&--highlighted {
|
||||
background-color: var(--cc-surface-container-high);
|
||||
}
|
||||
|
||||
&--highlighted {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0; // Allow text truncation
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-role {
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-status-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-label--active {
|
||||
color: var(--status-active);
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
|
||||
&.status-label--idle {
|
||||
color: var(--status-idle);
|
||||
background-color: var(--status-idle-bg);
|
||||
}
|
||||
|
||||
&.status-label--thinking {
|
||||
color: var(--status-thinking);
|
||||
background-color: var(--status-thinking-bg);
|
||||
}
|
||||
|
||||
&.status-label--error {
|
||||
color: var(--status-error);
|
||||
background-color: var(--status-error-bg);
|
||||
}
|
||||
|
||||
&.status-label--offline {
|
||||
color: var(--status-offline);
|
||||
background-color: rgba(100, 116, 139, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Empty State
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Footer
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__footer {
|
||||
padding: 12px 24px 16px;
|
||||
border-top: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.quick-jump-drawer__footer-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
opacity: 0.7;
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-family: var(--cc-font-mono);
|
||||
background-color: var(--cc-surface-container-high);
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 4px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile Adjustments
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
.quick-jump-drawer {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__header {
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search {
|
||||
margin: 12px 16px 8px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-list {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__footer {
|
||||
padding: 10px 16px 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
OnDestroy,
|
||||
Output,
|
||||
signal,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { AgentCardData } from '../../models/agent.model';
|
||||
import { AgentStatusService } from '../../services/agent-status.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-quick-jump-drawer',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule],
|
||||
templateUrl: './quick-jump-drawer.component.html',
|
||||
styleUrl: './quick-jump-drawer.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class QuickJumpDrawerComponent implements OnDestroy {
|
||||
/** Emits when the drawer should close (ESC, outside click, or item select). */
|
||||
@Output() readonly drawerClose = new EventEmitter<void>();
|
||||
|
||||
/** Whether the drawer is visible. */
|
||||
readonly isOpen = signal(false);
|
||||
|
||||
/** Search/filter input control. */
|
||||
readonly searchControl = new FormControl('', { nonNullable: true });
|
||||
|
||||
/** Filtered agent list based on search. */
|
||||
readonly filteredAgents = signal<AgentCardData[]>([]);
|
||||
|
||||
/** Track which agent row is highlighted via keyboard navigation. */
|
||||
readonly highlightedIndex = signal(-1);
|
||||
|
||||
@ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
|
||||
|
||||
private readonly destroy$ = new Subject<void>();
|
||||
|
||||
constructor(private readonly agentStatusService: AgentStatusService) {
|
||||
// Reactively filter agents as the search input changes
|
||||
this.searchControl.valueChanges
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((query) => this.filterAgents(query));
|
||||
|
||||
// Initial load
|
||||
this.filterAgents('');
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public API
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Open the drawer and focus the search input. */
|
||||
open(): void {
|
||||
this.isOpen.set(true);
|
||||
this.searchControl.setValue('', { emitEvent: false });
|
||||
this.highlightedIndex.set(-1);
|
||||
// Focus search input after animation frame (drawer needs to render first)
|
||||
requestAnimationFrame(() => {
|
||||
this.searchInput?.nativeElement?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
/** Close the drawer. */
|
||||
close(): void {
|
||||
this.isOpen.set(false);
|
||||
this.searchControl.setValue('', { emitEvent: false });
|
||||
this.highlightedIndex.set(-1);
|
||||
this.drawerClose.emit();
|
||||
}
|
||||
|
||||
/** Toggle the drawer open/close. */
|
||||
toggle(): void {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Keyboard Handling
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@HostListener('document:keydown.escape')
|
||||
onEscapeKey(): void {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** Handle keyboard navigation within the drawer panel. */
|
||||
onDrawerKeydown(event: KeyboardEvent): void {
|
||||
const agents = this.filteredAgents();
|
||||
if (!agents.length) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown': {
|
||||
event.preventDefault();
|
||||
this.highlightedIndex.update((i) =>
|
||||
i < agents.length - 1 ? i + 1 : 0
|
||||
);
|
||||
this.scrollIntoView();
|
||||
break;
|
||||
}
|
||||
case 'ArrowUp': {
|
||||
event.preventDefault();
|
||||
this.highlightedIndex.update((i) =>
|
||||
i > 0 ? i - 1 : agents.length - 1
|
||||
);
|
||||
this.scrollIntoView();
|
||||
break;
|
||||
}
|
||||
case 'Enter': {
|
||||
const idx = this.highlightedIndex();
|
||||
if (idx >= 0 && idx < agents.length) {
|
||||
this.selectAgent(agents[idx]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Outside Click
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Close when clicking on the backdrop (outside the panel). */
|
||||
onBackdropClick(event: MouseEvent): void {
|
||||
if (
|
||||
this.drawerPanel?.nativeElement &&
|
||||
!this.drawerPanel.nativeElement.contains(event.target as Node)
|
||||
) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Agent Selection
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Select an agent — navigates or focuses the agent card. */
|
||||
selectAgent(agent: AgentCardData): void {
|
||||
// TODO: Wire up navigation to the selected agent's detail view
|
||||
// For now, emit close after selection
|
||||
console.log('[QuickJump] Selected agent:', agent.id);
|
||||
this.close();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Get the CSS class for a given agent status. */
|
||||
getStatusClass(status: string): string {
|
||||
return `status-dot--${status}`;
|
||||
}
|
||||
|
||||
/** Get a human-readable label for an agent status. */
|
||||
getStatusLabel(status: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
active: 'Active',
|
||||
idle: 'Idle',
|
||||
thinking: 'Thinking',
|
||||
error: 'Error',
|
||||
offline: 'Offline',
|
||||
};
|
||||
return labels[status] ?? status;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Lifecycle
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Private
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
private filterAgents(query: string): void {
|
||||
const allAgents = this.agentStatusService.agents();
|
||||
const lowerQuery = query.toLowerCase().trim();
|
||||
|
||||
if (!lowerQuery) {
|
||||
this.filteredAgents.set(allAgents);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allAgents.filter(
|
||||
(agent) =>
|
||||
agent.displayName.toLowerCase().includes(lowerQuery) ||
|
||||
agent.id.toLowerCase().includes(lowerQuery) ||
|
||||
agent.role.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
this.filteredAgents.set(filtered);
|
||||
this.highlightedIndex.set(-1);
|
||||
}
|
||||
|
||||
private scrollIntoView(): void {
|
||||
const idx = this.highlightedIndex();
|
||||
const el = document.getElementById(`quick-jump-agent-${idx}`);
|
||||
el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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 />
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user