Keep attention card menu pinned

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
DottaandPaperclip committed 2026-07-10 20:08:18 +00:00
1 parent 31e71ccd0a
commit fdeb952610
2 files changed
+51 -39

No files matched your search

+9 -1
View File
@@ -229,7 +229,15 @@ describe("AttentionQueueRow", () => {
expect(decisionActions?.textContent).toContain("Reject");
const actionArea = decisionActions?.closest('[data-attention-actions="true"]');
expect(actionArea?.getAttribute("class")).toContain("self-end");
expect(actionArea?.getAttribute("class")).toContain("mt-auto");
const controls = decisionActions?.closest('[data-attention-controls="true"]');
expect(controls?.getAttribute("class")).toContain("self-stretch");
expect(controls?.getAttribute("class")).toContain("justify-between");
const rowMenu = container?.querySelector('[aria-label="Row actions"]');
expect(rowMenu?.closest('[data-attention-menu="true"]')).toBeTruthy();
expect(rowMenu?.closest('[data-attention-actions="true"]')).toBeNull();
const buttons = Array.from(decisionActions?.querySelectorAll("button") ?? []);
expect(buttons.find((button) => button.textContent === "Approve")?.getAttribute("data-variant")).toBe(
+42 -38
View File
@@ -225,44 +225,9 @@ export function AttentionQueueRow({
{/* Controls: kept as siblings (not inside the clickable header) so they
never toggle expand and stay valid interactive targets. */}
<div className="flex shrink-0 flex-col items-end self-end gap-1" data-attention-actions="true">
{expandable && !expanded && verbs.length > 0 && (
<div className="flex flex-wrap justify-end gap-1" aria-label="Decision actions">
{verbs.map((verb) => (
<Button
key={verb.id}
type="button"
variant={decisionVerbVariant(verb)}
size="xs"
onClick={(e) => {
e.stopPropagation();
onToggleExpand();
}}
>
{verb.label}
</Button>
))}
</div>
)}
<div className="flex items-start justify-end gap-1">
{!inline && href && (
<Button asChild variant="outline" size="xs">
<Link to={href}>
Open
<ExternalLink className="h-3 w-3" />
</Link>
</Button>
)}
{isHidden ? (
onRestore && (
<Button type="button" variant="outline" size="xs" onClick={() => onRestore(item)}>
<RotateCcw className="h-3 w-3" />
Restore
</Button>
)
) : (
<div className="flex shrink-0 self-stretch flex-col items-end justify-between gap-2" data-attention-controls="true">
<div className="flex justify-end" data-attention-menu="true">
{!isHidden && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -292,6 +257,45 @@ export function AttentionQueueRow({
</DropdownMenu>
)}
</div>
<div className="mt-auto flex flex-col items-end gap-1" data-attention-actions="true">
{expandable && !expanded && verbs.length > 0 && (
<div className="flex flex-wrap justify-end gap-1" aria-label="Decision actions">
{verbs.map((verb) => (
<Button
key={verb.id}
type="button"
variant={decisionVerbVariant(verb)}
size="xs"
onClick={(e) => {
e.stopPropagation();
onToggleExpand();
}}
>
{verb.label}
</Button>
))}
</div>
)}
<div className="flex items-start justify-end gap-1">
{!inline && href && (
<Button asChild variant="outline" size="xs">
<Link to={href}>
Open
<ExternalLink className="h-3 w-3" />
</Link>
</Button>
)}
{isHidden && onRestore && (
<Button type="button" variant="outline" size="xs" onClick={() => onRestore(item)}>
<RotateCcw className="h-3 w-3" />
Restore
</Button>
)}
</div>
</div>
</div>
</div>