68 lines
1.9 KiB
TypeScript
Executable File
68 lines
1.9 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { apiFetch } from "@/lib/api-client";
|
|
import { useUndoMutation } from "@/hooks/useUndoMutation";
|
|
|
|
export function ActionHistoryPanel() {
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ["action-history"],
|
|
queryFn: () =>
|
|
apiFetch<{
|
|
actions: {
|
|
id: string;
|
|
summary: string;
|
|
actionType: string;
|
|
createdAt: string;
|
|
undoable: boolean;
|
|
}[];
|
|
}>("/api/actions/recent"),
|
|
});
|
|
|
|
const undo = useUndoMutation({
|
|
onSuccess: () => {
|
|
/* query invalidation handled in hook */
|
|
},
|
|
});
|
|
|
|
const actions = data?.actions ?? [];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<h2 className="font-bold">Action History</h2>
|
|
<p className="text-xs text-[var(--color-text-muted)]">
|
|
Recent actions you can undo. Actions older than 90 days are automatically pruned.
|
|
</p>
|
|
|
|
{isLoading ? (
|
|
<p className="text-sm">Loading...</p>
|
|
) : actions.length === 0 ? (
|
|
<p className="text-sm text-[var(--color-text-muted)]">No recent actions.</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{actions.map((a) => (
|
|
<li key={a.id} className="retro-window-inset p-2 flex items-center gap-2 text-sm">
|
|
<div className="flex-1">
|
|
<p>{a.summary}</p>
|
|
<p className="text-xs text-[var(--color-text-muted)]">
|
|
{new Date(a.createdAt).toLocaleString()} · {a.actionType}
|
|
</p>
|
|
</div>
|
|
{a.undoable && (
|
|
<button
|
|
className="retro-btn text-xs"
|
|
onClick={() => undo.mutate(a.id)}
|
|
disabled={undo.isPending}
|
|
>
|
|
Undo
|
|
</button>
|
|
)}
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|