diff --git a/src/Web/StellaOps.Web/AGENTS.md b/src/Web/StellaOps.Web/AGENTS.md index adc2e90d5..3b91473ad 100644 --- a/src/Web/StellaOps.Web/AGENTS.md +++ b/src/Web/StellaOps.Web/AGENTS.md @@ -141,6 +141,31 @@ The Promote button on release detail pages must follow a three-state model: Use `showPromote` (computed, boolean) for visibility and `canPromote` (computed, boolean) for the enabled/disabled state. Use `promoteDisabledReason` (computed, string | null) for the disabled tooltip. +## Quick Links Convention (MANDATORY) + +All pages that include navigational quick links **must** follow these rules: + +1. Use the `` component — never raw ` + } @else { + + } `, styles: [` :host { @@ -152,6 +181,84 @@ export interface StellaQuickLink { font-size: 0.875rem; line-height: 1; } + + /* Aside layout — vertical list with descriptions */ + :host([layout=aside]) { + border-top: none; + padding-top: 0; + margin-top: 0; + } + + .sql-aside { + display: flex; + flex-direction: column; + gap: 0; + } + + .sql-aside-link { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.625rem 0.75rem; + text-decoration: none; + color: var(--color-text-secondary); + border-left: 2px solid transparent; + transition: background 120ms ease, border-color 120ms ease, color 120ms ease; + cursor: pointer; + } + + .sql-aside-link:hover { + background: var(--color-surface-secondary); + border-left-color: var(--color-brand-primary); + color: var(--color-text-primary); + } + + .sql-aside-link:focus-visible { + outline: 2px solid var(--color-focus-ring); + outline-offset: -2px; + border-radius: 2px; + } + + .sql-aside-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-top: 1px; + opacity: 0.5; + } + + .sql-aside-link:hover .sql-aside-icon { + opacity: 0.8; + } + + .sql-aside-content { + flex: 1; + min-width: 0; + } + + .sql-aside-title { + display: block; + font-size: 0.8125rem; + font-weight: 600; + line-height: 1.3; + } + + .sql-aside-desc { + display: block; + font-size: 0.6875rem; + line-height: 1.4; + color: var(--color-text-muted); + margin-top: 0.125rem; + } + + .sql-aside-link:hover .sql-aside-desc { + color: var(--color-text-secondary); + } + + .sql-aside-link .sql-arrow { + margin-top: 2px; + flex-shrink: 0; + } `], }) export class StellaQuickLinksComponent { @@ -160,4 +267,7 @@ export class StellaQuickLinksComponent { /** Optional heading label (e.g. "Related", "Shortcuts", "Jump to"). */ @Input() label?: string; + + /** Layout variant: 'inline' (horizontal dots) or 'aside' (vertical with descriptions). */ + @Input() layout: 'inline' | 'aside' = 'inline'; }