PAP-13409 T3: Storybook coverage for row/card redesign

Add a TypeColorsAndDetail showcase (plan-approval violet + confirmation sky side
by side, detail lines, project chips, thumbnail stacks) and a DismissUndoToast
story wiring the real ToastProvider/ToastViewport. Enrich the existing fixtures
with T1 detail blocks and data-URI thumbnails so the queue stories render the
new secondary line and image stack. attentionImageUrl now passes data/absolute
URLs through unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
DottaandClaude Opus 4.8 committed 2026-07-10 20:08:18 +00:00
1 parent 00a8b8f842
commit 77d758747a
1 file changed
+32 -1
+32 -1
View File
@@ -1,9 +1,11 @@
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { ArrowUpDown, CheckCircle2, Inbox, Layers, ListFilter } from "lucide-react";
import type { AttentionItem, AttentionSourceKind, AttentionSeverity, InboxDismissalKind } from "@paperclipai/shared";
import { AttentionQueueRow } from "@/components/AttentionQueueRow";
import { IssueGroupHeader } from "@/components/IssueGroupHeader";
import { ToastProvider, useToastActions } from "@/context/ToastContext";
import { ToastViewport } from "@/components/ToastViewport";
import { Button } from "@/components/ui/button";
import {
groupAttentionItems,
@@ -466,6 +468,35 @@ export const TypeColorsAndDetail: Story = {
args: { items: SHOWCASE, groupBy: "type" },
};
/** The ~8s undo toast shown after dismissing a row (plan §6). */
function DismissUndoDemo() {
const { pushToast } = useToastActions();
useEffect(() => {
pushToast({
id: "attention-dismiss-demo",
title: "Dismissed",
body: "Hire agent: Research Analyst",
tone: "info",
ttlMs: 15000,
action: { label: "Undo", onClick: () => {} },
});
}, [pushToast]);
return (
<div className="max-w-3xl space-y-4 p-6">
<Queue items={SHOWCASE.slice(0, 3)} groupBy="type" />
</div>
);
}
export const DismissUndoToast: StoryObj = {
render: () => (
<ToastProvider>
<DismissUndoDemo />
<ToastViewport />
</ToastProvider>
),
};
export const ZeroState: Story = {
args: { items: [] },
};