190d810762
New Preact `SidePanel` drawer — deliberately not the shared
`<hive-side-panel>` shadow-DOM custom element, same rationale as
StatusChips' Badge/Dropdown. Drops that element's drag-to-resize +
localStorage width persistence for this first slice (fixed width via
CSS); reuses agent.css's existing `.agent-inbox`/`.inbox-*`/
`.side-panel-empty` content classes verbatim, only the drawer chrome
itself is new (SidePanel.css). Kept mounted regardless of open/closed
state (toggles the `open` prop) rather than conditionally rendered, so
the slide/fade CSS transitions actually fire on both open and close.
- InboxPanel: renders `state.inbox` (already polled by useAgentState)
+ a "mark all read" action — plain `fetch()` to the dashboard's
`/api/agent/{name}/mark-all-read` (JSON response, same as app.js;
unlike pause/resume this one doesn't need a form-submit workaround).
- TodosPanel: new `useTodos` hook (same 4s poll cadence as app.js's
`refreshTodos`) + bulk select/mark-done via `api/todos/mark-done`.
- Both destructive-but-recoverable actions use a new `useConfirmClick`
two-click-arm hook instead of the old shadow-DOM `themedConfirm`
modal — lighter weight, no backdrop/dialog machinery needed for a
"did you mean to click that" nudge.
- HeaderPill: the inbox/todos count triggers in the header's right
cluster; Header.tsx gained a `pills` slot for them (mirrors the old
markup's `.agent-header-pills` third column).
- types.ts: added `InboxRow`/`TodoRow`, mirroring
`hive_sh4re::inbox::{InboxRow, LooseEnd}` (todo variant only —
`/api/todos` never returns the others).
Screenshot-verified against a mock server exercising both panels.
37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
// <Header> — the agent page's identity strip: icon, glyphic title, the
|
|
// "swarm / hive" label row, and a slot for the status row
|
|
// (`<StatusChips>` — ../status-chips/, kept separate so this component
|
|
// has no opinion on what badges exist). Structurally the same
|
|
// three-row shape as the old `#agent-header` markup in index.html
|
|
// (icon · main · pills) — see `docs/web-ui.md::Per-agent page` — this
|
|
// is a like-for-like layout port, the redesign work is in the children.
|
|
// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
|
|
// (loaded globally by index.html) rather than a component-scoped
|
|
// stylesheet — no new visual language needed for the chrome itself.
|
|
import type { ComponentChildren } from 'preact';
|
|
|
|
export interface HeaderProps {
|
|
label: string;
|
|
hiveLabel?: string | null;
|
|
children?: ComponentChildren;
|
|
/** Right-cluster flyout triggers (inbox/todos pills today, the
|
|
* overflow menu button lands here in a later commit) — mirrors the
|
|
* old markup's `.agent-header-pills` third column. */
|
|
pills?: ComponentChildren;
|
|
}
|
|
|
|
export function Header({ label, hiveLabel, children, pills }: HeaderProps) {
|
|
return (
|
|
<header class="agent-header">
|
|
<img class="agent-icon" src="icon" alt="" />
|
|
<div class="agent-header-main">
|
|
<div class="agent-header-row agent-header-title-row">
|
|
<h2 class="agent-header-title">◆ {label} ◆</h2>
|
|
</div>
|
|
{hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
|
|
<div class="agent-header-row">{children}</div>
|
|
</div>
|
|
{pills ? <div class="agent-header-pills">{pills}</div> : null}
|
|
</header>
|
|
);
|
|
}
|