agent: TodosPanel/InboxPanel flyouts + header pills
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.
This commit is contained in:
parent
4a55a9a6e8
commit
190d810762
10 changed files with 505 additions and 3 deletions
26
frontend/packages/agent/src/components/HeaderPill.tsx
Normal file
26
frontend/packages/agent/src/components/HeaderPill.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// <HeaderPill> — the inbox/todos flyout triggers in the header's right
|
||||
// cluster. Reuses agent.css's existing `.hive-pill.header-pill…` rules
|
||||
// (loaded globally) — same "layout is a like-for-like port, the
|
||||
// component model is the change" approach as Header.tsx. Hidden
|
||||
// (renders nothing) at count 0, matching the old page's `pill.hidden =
|
||||
// count === 0`.
|
||||
export interface HeaderPillProps {
|
||||
kind: 'inbox' | 'todos';
|
||||
icon: string;
|
||||
label: string;
|
||||
count: number;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function HeaderPill({ kind, icon, label, count, onClick }: HeaderPillProps) {
|
||||
if (count === 0) return null;
|
||||
return (
|
||||
<button type="button" class={`hive-pill header-pill header-pill-${kind}`} onClick={onClick} title={`open ${label} flyout`}>
|
||||
<span class="header-pill-icon" aria-hidden="true">
|
||||
{icon}
|
||||
</span>
|
||||
<span class="header-pill-label">{label}</span>
|
||||
<span class="header-pill-count">{count}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue