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.
104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
// <TodosPanel> — content rendered inside <SidePanel> for the todos
|
|
// flyout. "mark done" POSTs to this agent's own backend
|
|
// (`api/todos/mark-done`, same-origin), unlike InboxPanel's cross-agent
|
|
// mark-all-read.
|
|
import { useState } from 'preact/hooks';
|
|
import type { TodoRow } from '../types.js';
|
|
|
|
export interface TodosPanelProps {
|
|
todos: TodoRow[];
|
|
onCleared: () => void;
|
|
}
|
|
|
|
function fmtAge(seconds: number): string {
|
|
if (seconds < 60) return `${seconds}s`;
|
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
|
|
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
|
|
return `${Math.floor(seconds / 86400)}d`;
|
|
}
|
|
|
|
export function TodosPanel({ todos, onCleared }: TodosPanelProps) {
|
|
const [checked, setChecked] = useState<Set<number>>(new Set());
|
|
const [status, setStatus] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
function toggle(id: number) {
|
|
setChecked((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
async function markDone() {
|
|
const ids = [...checked];
|
|
if (!ids.length) return;
|
|
setBusy(true);
|
|
setStatus('marking…');
|
|
try {
|
|
const resp = await fetch('api/todos/mark-done', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `ids=${encodeURIComponent(ids.join(','))}`,
|
|
});
|
|
if (resp.ok) {
|
|
setStatus('✓ marked done');
|
|
setChecked(new Set());
|
|
onCleared();
|
|
} else {
|
|
setStatus(`failed: ${await resp.text()}`);
|
|
}
|
|
} catch (err) {
|
|
setStatus(`failed: ${err instanceof Error ? err.message : String(err)}`);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
if (!todos.length) {
|
|
return <p class="side-panel-empty">no todos — all subsystem queues are clear.</p>;
|
|
}
|
|
|
|
const allChecked = todos.length > 0 && todos.every((t) => checked.has(t.id));
|
|
|
|
return (
|
|
<div class="agent-inbox">
|
|
<div class="inbox-mark-all-row">
|
|
<button
|
|
type="button"
|
|
class="inbox-mark-all-btn"
|
|
onClick={() => setChecked(allChecked ? new Set() : new Set(todos.map((t) => t.id)))}
|
|
>
|
|
{allChecked ? 'select none' : 'select all'}
|
|
</button>
|
|
<button type="button" class="inbox-mark-all-btn" onClick={markDone} disabled={busy || checked.size === 0}>
|
|
✓ mark done
|
|
</button>
|
|
<span class="inbox-mark-status">{status}</span>
|
|
</div>
|
|
<ul>
|
|
{todos.map((t) => {
|
|
const cbId = `todo-cb-${t.id}`;
|
|
const label = t.source ? `${t.subsystem} · ${t.source}` : t.subsystem;
|
|
return (
|
|
<li key={t.id}>
|
|
<input
|
|
type="checkbox"
|
|
id={cbId}
|
|
class="todo-cb"
|
|
checked={checked.has(t.id)}
|
|
onChange={() => toggle(t.id)}
|
|
/>{' '}
|
|
<label for={cbId} class="inbox-from">
|
|
{label}
|
|
</label>{' '}
|
|
<span class="inbox-ts">{fmtAge(t.age_seconds)} ago</span>
|
|
<div class="inbox-body">{t.summary}</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|