Extend stella-quick-links with aside layout + descriptions, standardize usage

Component extension:
- Add 'description' field to StellaQuickLink interface
- Add 'layout' input: 'inline' (default, horizontal dots) or 'aside' (vertical
  with descriptions, border-left accent on hover)
- Aside layout shows label + description per link in a vertical list
- Full CSS for aside variant: hover states, focus ring, icon transitions

Dashboard page:
- Quick Links moved to aside panel with elevated background and border
- All 6 links now have descriptions (e.g., "Deployment timeline and run history")

Evidence Overview page:
- "Shortcuts" and "Related Domains" sections use layout="aside"
- All 10 links now have descriptions

AGENTS.md:
- New "Quick Links Convention (MANDATORY)" rule: must use stella-quick-links
  with layout="aside", descriptions, and right-aligned aside placement

Remaining pages (8+) to be updated in follow-up commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-28 12:39:27 +02:00
parent b7fc87893c
commit cc615f8e19
4 changed files with 192 additions and 50 deletions

View File

@@ -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 `<stella-quick-links>` component — never raw `<nav>` with dot separators
2. Pass `layout="aside"` for page-level quick links (use `inline` only for inline/contextual links)
3. Include a `description` for every link explaining what the user will find there
4. Place quick links in a right-aligned aside panel with a border and elevated background
5. Include a `label` (e.g., "Related", "Quick Links", "Shortcuts")
**Pattern:**
```html
<aside class="page-aside">
<stella-quick-links
[links]="quickLinks"
label="Quick Links"
layout="aside" />
</aside>
```
Each link must have `label`, `route`, and `description`:
```typescript
{ label: 'Security Posture', route: '/security', description: 'Risk posture and advisory freshness' }
```
## Metric / KPI Cards Convention (MANDATORY)
All metric badges, stat cards, KPI tiles, and summary indicators **must** use `<stella-metric-card>`.