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.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
// Lightweight two-click confirm for a destructive-but-recoverable button
|
|
// ("mark all read", "mark done") — deliberately NOT the old modal system
|
|
// (@hive/shared/modal.js's `themedConfirm`, itself built on the
|
|
// shadow-DOM `<hive-dialog>` custom element): a full backdrop+dialog is
|
|
// more machinery than a "did you mean to click that" nudge needs, and
|
|
// mara's ask for this rewrite was real Preact components, not a port of
|
|
// the old widget family. First click arms the button (caller renders a
|
|
// distinct "sure? click again" label off `armed`); a second click within
|
|
// `resetMs` fires `onConfirm`; anything else (timeout, blur) disarms.
|
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
|
|
|
export function useConfirmClick(onConfirm: () => void, resetMs = 2500) {
|
|
const [armed, setArmed] = useState(false);
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
},
|
|
[],
|
|
);
|
|
|
|
function trigger() {
|
|
if (armed) {
|
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
setArmed(false);
|
|
onConfirm();
|
|
return;
|
|
}
|
|
setArmed(true);
|
|
timerRef.current = setTimeout(() => setArmed(false), resetMs);
|
|
}
|
|
|
|
return { armed, trigger };
|
|
}
|