44 lines
1.3 KiB
Markdown
44 lines
1.3 KiB
Markdown
# hiveops-aria frontend — CLAUDE.md
|
|
|
|
## Before writing ANY new component
|
|
|
|
Read an existing sibling component first. Mandatory. Use `IocManagement.svelte` or `DevicePosture.svelte` as the reference.
|
|
|
|
## Canonical patterns (copy exactly, no variations)
|
|
|
|
**Header** — text only, no buttons:
|
|
```svelte
|
|
<div class="header">
|
|
<div class="header-text">
|
|
<h1>Page Title</h1>
|
|
<p>Subtitle</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Toolbar** — all buttons go here, never in the header:
|
|
```svelte
|
|
<div class="form-card">
|
|
<div class="toolbar">
|
|
<div class="toolbar-left"><span class="count">N items</span></div>
|
|
<div class="toolbar-right">
|
|
<button class="btn btn-secondary btn-sm">Refresh</button>
|
|
<button class="btn btn-primary btn-sm">+ Add</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Buttons** — always global classes, never custom button CSS:
|
|
- `btn btn-primary` / `btn btn-primary btn-sm`
|
|
- `btn btn-secondary` / `btn btn-secondary btn-sm`
|
|
|
|
**Table** — inside `.table-wrapper > .table-container`:
|
|
- `thead` background: `#f9fafb`, sticky
|
|
- `th` color: `#374151`, uppercase, `font-size: 0.78rem`
|
|
- `td` color: `#1f2937`
|
|
- `tbody tr:hover` background: `#eff6ff`
|
|
|
|
## Auto-poll
|
|
- Poll the STATUS endpoint only — never trigger a refresh from setInterval
|
|
- Use `onDestroy(() => clearInterval(interval))` always
|