diff --git a/frontend/src/app/components/index.ts b/frontend/src/app/components/index.ts index 09c8fb9..71a2bdd 100644 --- a/frontend/src/app/components/index.ts +++ b/frontend/src/app/components/index.ts @@ -1 +1,2 @@ +export * from './quick-jump-button/quick-jump-button.component'; export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component'; \ No newline at end of file diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html new file mode 100644 index 0000000..3aa3c3c --- /dev/null +++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss new file mode 100644 index 0000000..718b441 --- /dev/null +++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss @@ -0,0 +1,68 @@ +// ============================================================================ +// Quick-Jump Button — M3 FilledTonalIconButton +// Per spec Section 7.3: Agent Card Quick-Jump action +// M3 spec: FilledTonalIconButton uses secondary container color +// with 8% state layer overlay for hover/focus. +// ============================================================================ + +.quick-jump-button { + // M3 FilledTonalIconButton: secondary-container background + // Angular Material mat-icon-button sets up the base shape (40x40, round). + // We override the color tokens to match FilledTonal style. + --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container); + background-color: var(--mat-sys-secondary-container); + border-radius: 50%; + transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); + + // M3 State Layer: 8% overlay on hover + &:hover { + background-color: var(--mat-sys-secondary-container); + // State layer overlay using a pseudo-element for precise 8% opacity + &::after { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background-color: var(--mat-sys-on-secondary-container); + opacity: 0.08; + pointer-events: none; + } + } + + // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility) + &:focus-visible { + background-color: var(--mat-sys-secondary-container); + outline: 3px solid var(--status-active); + outline-offset: 2px; + + &::after { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background-color: var(--mat-sys-on-secondary-container); + opacity: 0.12; + pointer-events: none; + } + } + + // M3 State Layer: 12% overlay on active/pressed + &:active { + background-color: var(--mat-sys-secondary-container); + + &::after { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background-color: var(--mat-sys-on-secondary-container); + opacity: 0.12; + pointer-events: none; + } + } + + // Icon color stays on-secondary-container across all states + .mat-icon { + color: var(--mat-sys-on-secondary-container); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts new file mode 100644 index 0000000..899fc1d --- /dev/null +++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts @@ -0,0 +1,32 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core'; +import { MatIconButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; + +/** + * Quick-Jump Button — M3 FilledTonalIconButton + * + * An icon button that emits a navigation event for jumping to an agent session. + * Uses the Material Design 3 FilledTonalIconButton style with 8% state layer + * overlay on hover and focus. + * + * Per spec Section 7.3: Agent Card Component Interface + */ +@Component({ + selector: 'app-quick-jump-button', + standalone: true, + imports: [MatIconButton, MatIcon], + templateUrl: './quick-jump-button.component.html', + styleUrl: './quick-jump-button.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class QuickJumpButtonComponent { + /** Emitted when the button is clicked, carrying the session key for navigation. */ + @Output() jumpClick = new EventEmitter(); + + /** The session key to navigate to. Set by the parent agent card. */ + sessionKey = ''; + + onJumpClick(): void { + this.jumpClick.emit(this.sessionKey); + } +} \ No newline at end of file