@mdxui/zero 6.0.0

package/src/mail/message-view.tsx

@@ -0,0 +1,378 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@mdxui/primitives/avatar";
+import { Button } from "@mdxui/primitives/button";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@mdxui/primitives/collapsible";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@mdxui/primitives/dropdown-menu";
+import { cn } from "@mdxui/primitives/lib/utils";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@mdxui/primitives/tooltip";
+import {
+	ChevronDown,
+	ChevronUp,
+	Download,
+	Forward,
+	MoreHorizontal,
+	Paperclip,
+	Reply,
+	ReplyAll,
+	Star,
+} from "lucide-react";
+import type { Message, MessageHeaderProps, MessageViewProps } from "mdxui";
+import * as React from "react";
+
+/**
+ * MessageHeader - Displays message metadata (from, to, date).
+ */
+function MessageHeader({
+	message,
+	expanded = false,
+	onToggle,
+	className,
+}: MessageHeaderProps) {
+	const formatDate = (dateStr: string) => {
+		const date = new Date(dateStr);
+		return date.toLocaleString([], {
+			weekday: "short",
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+		});
+	};
+
+	const getInitials = (name?: string, email?: string) => {
+		if (name) {
+			return name
+				.split(" ")
+				.map((n) => n[0])
+				.join("")
+				.toUpperCase()
+				.slice(0, 2);
+		}
+		return email?.charAt(0).toUpperCase() || "?";
+	};
+
+	return (
+		<div
+			data-slot="message-header"
+			className={cn("flex items-start gap-3", className)}
+		>
+			<Avatar className="size-10 shrink-0">
+				<AvatarImage
+					src={undefined}
+					alt={message.from.name || message.from.address}
+				/>
+				<AvatarFallback>
+					{getInitials(message.from.name, message.from.address)}
+				</AvatarFallback>
+			</Avatar>
+
+			<div className="min-w-0 flex-1">
+				<div className="flex items-center justify-between gap-2">
+					<div className="flex items-center gap-2">
+						<span className="font-medium">
+							{message.from.name || message.from.address}
+						</span>
+						{message.isStarred && (
+							<Star className="size-4 fill-yellow-500 text-yellow-500" />
+						)}
+					</div>
+					<span className="text-muted-foreground shrink-0 text-sm">
+						{formatDate(message.date)}
+					</span>
+				</div>
+
+				<Collapsible open={expanded} onOpenChange={onToggle}>
+					<CollapsibleTrigger asChild>
+						<button
+							type="button"
+							className="text-muted-foreground flex items-center gap-1 text-sm hover:underline"
+						>
+							to {message.to[0]?.name || message.to[0]?.address}
+							{message.to.length > 1 && ` and ${message.to.length - 1} others`}
+							{expanded ? (
+								<ChevronUp className="size-3" />
+							) : (
+								<ChevronDown className="size-3" />
+							)}
+						</button>
+					</CollapsibleTrigger>
+					<CollapsibleContent className="mt-2 space-y-1 text-sm">
+						<div className="text-muted-foreground">
+							<span className="font-medium">From:</span>{" "}
+							{message.from.name ? (
+								<>
+									{message.from.name} &lt;{message.from.address}&gt;
+								</>
+							) : (
+								message.from.address
+							)}
+						</div>
+						<div className="text-muted-foreground">
+							<span className="font-medium">To:</span>{" "}
+							{message.to
+								.map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+								.join(", ")}
+						</div>
+						{message.cc && message.cc.length > 0 && (
+							<div className="text-muted-foreground">
+								<span className="font-medium">Cc:</span>{" "}
+								{message.cc
+									.map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+									.join(", ")}
+							</div>
+						)}
+						{message.replyTo && (
+							<div className="text-muted-foreground">
+								<span className="font-medium">Reply-To:</span>{" "}
+								{message.replyTo.name
+									? `${message.replyTo.name} <${message.replyTo.address}>`
+									: message.replyTo.address}
+							</div>
+						)}
+					</CollapsibleContent>
+				</Collapsible>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * AttachmentItem - Displays a single attachment.
+ */
+function AttachmentItem({
+	attachment,
+	onDownload,
+	onClick,
+}: {
+	attachment: Message["attachments"][number];
+	onDownload?: () => void;
+	onClick?: () => void;
+}) {
+	const formatSize = (bytes: number) => {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	};
+
+	const isImage = attachment.mimeType.startsWith("image/");
+
+	return (
+		<button
+			type="button"
+			className="bg-muted/50 hover:bg-muted flex items-center gap-2 rounded-lg border p-2 transition-colors"
+			tabIndex={0}
+			onClick={onClick}
+			onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => e.key === "Enter" && onClick?.()}
+		>
+			{isImage && attachment.thumbnailUrl ? (
+				<img
+					src={attachment.thumbnailUrl}
+					alt={attachment.filename}
+					className="size-10 rounded object-cover"
+				/>
+			) : (
+				<div className="bg-background flex size-10 items-center justify-center rounded">
+					<Paperclip className="text-muted-foreground size-5" />
+				</div>
+			)}
+			<div className="min-w-0 flex-1">
+				<div className="truncate text-sm font-medium">
+					{attachment.filename}
+				</div>
+				<div className="text-muted-foreground text-xs">
+					{formatSize(attachment.size)}
+				</div>
+			</div>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="size-8 shrink-0"
+							onClick={(e) => {
+								e.stopPropagation();
+								onDownload?.();
+							}}
+						>
+							<Download className="size-4" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Download</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</button>
+	);
+}
+
+/**
+ * MessageView - Displays a single email message.
+ */
+function MessageView({
+	message,
+	showHeaders = false,
+	isExpanded = true,
+	onToggleExpand,
+	onReply,
+	onReplyAll,
+	onForward,
+	onStar,
+	onAttachmentClick,
+	showReplyComposer: _showReplyComposer = false,
+	className,
+}: MessageViewProps) {
+	const [headersExpanded, setHeadersExpanded] = React.useState(showHeaders);
+
+	return (
+		<div
+			data-slot="message-view"
+			className={cn("border-b last:border-b-0", className)}
+		>
+			{/* Collapsed State */}
+			{!isExpanded ? (
+				<button
+					type="button"
+					onClick={() => onToggleExpand?.()}
+					className="hover:bg-muted/50 flex w-full items-center gap-3 px-4 py-3 text-left transition-colors"
+				>
+					<Avatar className="size-8 shrink-0">
+						<AvatarFallback className="text-xs">
+							{message.from.name?.charAt(0) || message.from.address.charAt(0)}
+						</AvatarFallback>
+					</Avatar>
+					<span className="text-muted-foreground flex-1 truncate text-sm">
+						{message.snippet || message.textBody?.slice(0, 100)}
+					</span>
+				</button>
+			) : (
+				<div className="space-y-4 px-4 py-4">
+					{/* Header */}
+					<div className="flex items-start justify-between gap-4">
+						<MessageHeader
+							message={message}
+							expanded={headersExpanded}
+							onToggle={() => setHeadersExpanded(!headersExpanded)}
+						/>
+
+						{/* Actions */}
+						<div className="flex shrink-0 items-center gap-1">
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="icon"
+											className="size-8"
+											onClick={() => onReply?.()}
+										>
+											<Reply className="size-4" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Reply</TooltipContent>
+								</Tooltip>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="icon"
+											className="size-8"
+											onClick={() => onReplyAll?.()}
+										>
+											<ReplyAll className="size-4" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Reply All</TooltipContent>
+								</Tooltip>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="icon"
+											className="size-8"
+											onClick={() => onForward?.()}
+										>
+											<Forward className="size-4" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Forward</TooltipContent>
+								</Tooltip>
+
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<Button variant="ghost" size="icon" className="size-8">
+											<MoreHorizontal className="size-4" />
+										</Button>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="end">
+										<DropdownMenuItem onClick={() => onStar?.()}>
+											<Star className="mr-2 size-4" />
+											{message.isStarred ? "Unstar" : "Star"}
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</TooltipProvider>
+						</div>
+					</div>
+
+					{/* Body */}
+					<div className="prose prose-sm dark:prose-invert max-w-none">
+						{message.htmlBody ? (
+							<div
+								// biome-ignore lint/security/noDangerouslySetInnerHtml: MessageView is a trusted component
+								dangerouslySetInnerHTML={{ __html: message.htmlBody }}
+								className="overflow-hidden"
+							/>
+						) : (
+							<pre className="whitespace-pre-wrap font-sans">
+								{message.textBody}
+							</pre>
+						)}
+					</div>
+
+					{/* Attachments */}
+					{message.attachments.length > 0 && (
+						<div className="space-y-2">
+							<div className="text-muted-foreground flex items-center gap-2 text-sm">
+								<Paperclip className="size-4" />
+								{message.attachments.length} attachment
+								{message.attachments.length > 1 ? "s" : ""}
+							</div>
+							<div className="grid gap-2 sm:grid-cols-2">
+								{message.attachments.map((attachment) => (
+									<AttachmentItem
+										key={attachment.id}
+										attachment={attachment}
+										onClick={() => onAttachmentClick?.(attachment)}
+										onDownload={() => {
+											if (attachment.url) {
+												window.open(attachment.url, "_blank");
+											}
+										}}
+									/>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export { MessageView, MessageHeader };

package/src/mail/thread-display.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Message, MailThread as Thread } from "mdxui";
+import { MessageHeader, MessageView } from "./message-view";
+import { ThreadDisplay } from "./thread-display";
+
+// Sample message with full content
+const sampleMessage: Message = {
+	id: "m1",
+	threadId: "t1",
+	subject: "Re: Product Launch Strategy - Q1 2025",
+	from: { address: "alex@startup.io", name: "Alex Rivera" },
+	to: [{ address: "me@company.com", name: "Me" }],
+	cc: [
+		{ address: "marketing@startup.io", name: "Marketing Team" },
+		{ address: "sales@startup.io", name: "Sales Team" },
+	],
+	date: new Date(Date.now() - 3600000).toISOString(),
+	snippet:
+		"Great ideas! I think we should focus on the enterprise segment first...",
+	textBody: `Hi there,
+
+Thanks for sharing the product launch strategy. I've reviewed the document and have some thoughts:
+
+1. **Enterprise Focus**: I strongly agree we should target enterprise customers first. They have the budget and the pain points our product solves.
+
+2. **Timeline**: Q1 might be aggressive given the holiday freeze. Consider a soft launch in late January with full GA in February.
+
+3. **Marketing Channels**:
+   - LinkedIn ads for B2B reach
+   - Content marketing with case studies
+   - Webinar series with industry experts
+
+Let me know what you think about these suggestions. Happy to hop on a call to discuss further.
+
+Best,
+Alex`,
+	htmlBody: `<div>
+    <p>Hi there,</p>
+    <p>Thanks for sharing the product launch strategy. I've reviewed the document and have some thoughts:</p>
+    <ol>
+      <li><strong>Enterprise Focus</strong>: I strongly agree we should target enterprise customers first. They have the budget and the pain points our product solves.</li>
+      <li><strong>Timeline</strong>: Q1 might be aggressive given the holiday freeze. Consider a soft launch in late January with full GA in February.</li>
+      <li><strong>Marketing Channels</strong>:
+        <ul>
+          <li>LinkedIn ads for B2B reach</li>
+          <li>Content marketing with case studies</li>
+          <li>Webinar series with industry experts</li>
+        </ul>
+      </li>
+    </ol>
+    <p>Let me know what you think about these suggestions. Happy to hop on a call to discuss further.</p>
+    <p>Best,<br/>Alex</p>
+  </div>`,
+	attachments: [
+		{
+			id: "a1",
+			filename: "launch-timeline.pdf",
+			mimeType: "application/pdf",
+			size: 245000,
+			url: "#",
+			inline: false,
+		},
+		{
+			id: "a2",
+			filename: "market-research.xlsx",
+			mimeType:
+				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+			size: 89000,
+			url: "#",
+			inline: false,
+		},
+	],
+	labels: [{ id: "l1", name: "Important", color: "#ef4444", type: "user" }],
+	isRead: true,
+	isStarred: true,
+	isImportant: true,
+	isDraft: false,
+};
+
+// Sample thread with multiple messages
+const sampleThread: Thread = {
+	id: "t1",
+	subject: "Product Launch Strategy - Q1 2025",
+	messages: [
+		{
+			id: "m0",
+			threadId: "t1",
+			subject: "Product Launch Strategy - Q1 2025",
+			from: { address: "me@company.com", name: "Me" },
+			to: [
+				{ address: "alex@startup.io", name: "Alex Rivera" },
+				{ address: "marketing@startup.io", name: "Marketing Team" },
+			],
+			date: new Date(Date.now() - 86400000).toISOString(),
+			snippet: "Team, I wanted to share our product launch strategy for Q1...",
+			textBody: `Team,
+
+I wanted to share our product launch strategy for Q1 2025. Please review the attached document and share your thoughts.
+
+Key points:
+- Target audience: Mid-market to enterprise
+- Launch date: February 15, 2025
+- Key features to highlight: AI automation, integrations, analytics
+
+Looking forward to your feedback!
+
+Best,
+Me`,
+			attachments: [
+				{
+					id: "a0",
+					filename: "launch-strategy-v1.docx",
+					mimeType:
+						"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+					size: 156000,
+					url: "#",
+					inline: false,
+				},
+			],
+			labels: [],
+			isRead: true,
+			isStarred: false,
+			isImportant: false,
+			isDraft: false,
+		},
+		sampleMessage,
+		{
+			id: "m2",
+			threadId: "t1",
+			subject: "Re: Product Launch Strategy - Q1 2025",
+			from: { address: "marketing@startup.io", name: "Marketing Team" },
+			to: [
+				{ address: "me@company.com", name: "Me" },
+				{ address: "alex@startup.io", name: "Alex Rivera" },
+			],
+			date: new Date(Date.now() - 1800000).toISOString(),
+			snippet: "Adding to Alex's points, we should also consider...",
+			textBody: `Adding to Alex's points, we should also consider:
+
+- Pre-launch email campaign to existing leads
+- Partner co-marketing opportunities
+- Press release timing
+
+I've updated the timeline doc with these additions.`,
+			attachments: [],
+			labels: [],
+			isRead: false,
+			isStarred: false,
+			isImportant: false,
+			isDraft: false,
+		},
+	],
+	latestDate: new Date(Date.now() - 1800000).toISOString(),
+	participants: [
+		{ address: "me@company.com", name: "Me" },
+		{ address: "alex@startup.io", name: "Alex Rivera" },
+		{ address: "marketing@startup.io", name: "Marketing Team" },
+	],
+	unreadCount: 1,
+	labels: [{ id: "l1", name: "Important", color: "#ef4444", type: "user" }],
+	isStarred: true,
+	isImportant: true,
+	hasAttachments: true,
+	snippet: "Adding to Alex's points, we should also consider...",
+};
+
+const meta: Meta<typeof ThreadDisplay> = {
+	title: "Zero/Mail/ThreadDisplay",
+	component: ThreadDisplay,
+	parameters: {
+		layout: "fullscreen",
+	},
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div className="h-screen w-full bg-background">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Full thread view with navigation and actions.
+ * Matches the original Zero thread display panel.
+ */
+export const Default: Story = {
+	args: {
+		thread: sampleThread,
+		showNavigation: true,
+		hasPrevious: true,
+		hasNext: true,
+		enableAnimations: true,
+	},
+};
+
+/**
+ * Without navigation controls.
+ */
+export const NoNavigation: Story = {
+	args: {
+		thread: sampleThread,
+		showNavigation: false,
+	},
+};
+
+/**
+ * Single message thread.
+ */
+export const SingleMessage: Story = {
+	args: {
+		thread: {
+			...sampleThread,
+			messages: [sampleMessage],
+		},
+		showNavigation: true,
+		hasPrevious: false,
+		hasNext: true,
+	},
+};
+
+// MessageView story
+export const SingleMessageView: StoryObj<typeof MessageView> = {
+	render: () => (
+		<div className="max-w-4xl p-4 bg-background">
+			<MessageView
+				message={sampleMessage}
+				isExpanded={true}
+				showHeaders={false}
+				showReplyComposer={false}
+			/>
+		</div>
+	),
+};
+
+// MessageView collapsed
+export const CollapsedMessageView: StoryObj<typeof MessageView> = {
+	render: () => (
+		<div className="max-w-4xl p-4 bg-background">
+			<MessageView
+				message={sampleMessage}
+				isExpanded={false}
+				showHeaders={false}
+				showReplyComposer={false}
+			/>
+		</div>
+	),
+};
+
+// MessageHeader story
+export const MessageHeaderExpanded: StoryObj<typeof MessageHeader> = {
+	render: () => (
+		<div className="max-w-4xl p-4 bg-background border rounded-lg">
+			<MessageHeader message={sampleMessage} expanded={true} />
+		</div>
+	),
+};