@mdxui/zero 6.0.0

package/src/mail/thread-display.tsx

@@ -0,0 +1,392 @@
+import { Button } from "@mdxui/primitives/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@mdxui/primitives/dropdown-menu";
+import { cn } from "@mdxui/primitives/lib/utils";
+import { ScrollArea } from "@mdxui/primitives/scroll-area";
+import { Separator } from "@mdxui/primitives/separator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@mdxui/primitives/tooltip";
+import {
+	AlertOctagon,
+	Archive,
+	ArrowLeft,
+	ChevronLeft,
+	ChevronRight,
+	Clock,
+	MoreHorizontal,
+	Printer,
+	Reply,
+	Star,
+	Tag,
+	Trash2,
+} from "lucide-react";
+import type { ThreadDisplayProps } from "mdxui";
+import * as React from "react";
+import { MessageView } from "./message-view";
+
+/**
+ * ThreadDisplay - Displays an email thread with all messages.
+ *
+ * Features:
+ * - Thread navigation (prev/next)
+ * - Message list with expand/collapse
+ * - Actions (reply, archive, delete, star, etc.)
+ * - Print functionality
+ * - Animations
+ */
+function ThreadDisplay({
+	thread,
+	activeMessageId: _activeMessageId,
+	showNavigation = true,
+	onPrevious,
+	onNext,
+	onClose,
+	onReply,
+	onReplyAll,
+	onForward,
+	onStar,
+	onArchive,
+	onDelete,
+	onSpam,
+	onSnooze,
+	onMove,
+	onLabel,
+	onPrint,
+	enableAnimations = true,
+	hasPrevious = false,
+	hasNext = false,
+	className,
+}: ThreadDisplayProps) {
+	const [expandedMessages, setExpandedMessages] = React.useState<Set<string>>(
+		() => {
+			// By default, expand the last message
+			if (thread.messages.length > 0) {
+				return new Set([thread.messages[thread.messages.length - 1].id]);
+			}
+			return new Set();
+		},
+	);
+
+	// Toggle message expansion
+	const toggleMessage = (messageId: string) => {
+		setExpandedMessages((prev) => {
+			const next = new Set(prev);
+			if (next.has(messageId)) {
+				next.delete(messageId);
+			} else {
+				next.add(messageId);
+			}
+			return next;
+		});
+	};
+
+	// Expand all messages
+	const expandAll = () => {
+		setExpandedMessages(new Set(thread.messages.map((m) => m.id)));
+	};
+
+	// Collapse all except latest
+	const collapseAll = () => {
+		if (thread.messages.length > 0) {
+			setExpandedMessages(
+				new Set([thread.messages[thread.messages.length - 1].id]),
+			);
+		}
+	};
+
+	// Handle print
+	const handlePrint = () => {
+		if (onPrint) {
+			onPrint();
+		} else {
+			window.print();
+		}
+	};
+
+	return (
+		<div
+			data-slot="thread-display"
+			className={cn("flex h-full flex-col", className)}
+		>
+			{/* Header */}
+			<div className="flex items-center justify-between gap-4 border-b px-4 py-2">
+				<div className="flex items-center gap-2">
+					{/* Back Button */}
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-8"
+									onClick={() => onClose?.()}
+								>
+									<ArrowLeft className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Back to inbox</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+
+					{/* Thread Navigation */}
+					{showNavigation && (
+						<>
+							<Separator orientation="vertical" className="h-6" />
+							<div className="flex items-center gap-1">
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="size-8"
+												disabled={!hasPrevious}
+												onClick={() => onPrevious?.()}
+											>
+												<ChevronLeft className="size-4" />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>Newer</TooltipContent>
+									</Tooltip>
+
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="size-8"
+												disabled={!hasNext}
+												onClick={() => onNext?.()}
+											>
+												<ChevronRight className="size-4" />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>Older</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</div>
+						</>
+					)}
+				</div>
+
+				{/* Actions */}
+				<div className="flex items-center gap-1">
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-8"
+									onClick={() => onArchive?.()}
+								>
+									<Archive className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Archive</TooltipContent>
+						</Tooltip>
+
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-8"
+									onClick={() => onDelete?.()}
+								>
+									<Trash2 className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Delete</TooltipContent>
+						</Tooltip>
+
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className={cn(
+										"size-8",
+										thread.isStarred && "text-yellow-500",
+									)}
+									onClick={() => onStar?.()}
+								>
+									<Star
+										className="size-4"
+										fill={thread.isStarred ? "currentColor" : "none"}
+									/>
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>
+								{thread.isStarred ? "Unstar" : "Star"}
+							</TooltipContent>
+						</Tooltip>
+
+						{/* Snooze dropdown with preset options */}
+						<DropdownMenu>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<DropdownMenuTrigger asChild>
+										<Button variant="ghost" size="icon" className="size-8">
+											<Clock className="size-4" />
+										</Button>
+									</DropdownMenuTrigger>
+								</TooltipTrigger>
+								<TooltipContent>Snooze</TooltipContent>
+							</Tooltip>
+							<DropdownMenuContent align="end">
+								<DropdownMenuItem
+									onClick={() => {
+										const tomorrow = new Date();
+										tomorrow.setDate(tomorrow.getDate() + 1);
+										tomorrow.setHours(9, 0, 0, 0);
+										onSnooze?.(tomorrow.toISOString());
+									}}
+								>
+									Tomorrow morning
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => {
+										const nextWeek = new Date();
+										nextWeek.setDate(nextWeek.getDate() + 7);
+										nextWeek.setHours(9, 0, 0, 0);
+										onSnooze?.(nextWeek.toISOString());
+									}}
+								>
+									Next week
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => {
+										const nextMonth = new Date();
+										nextMonth.setMonth(nextMonth.getMonth() + 1);
+										nextMonth.setHours(9, 0, 0, 0);
+										onSnooze?.(nextMonth.toISOString());
+									}}
+								>
+									Next month
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="ghost" size="icon" className="size-8">
+									<MoreHorizontal className="size-4" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
+								{/* TODO: Label selection requires available labels prop */}
+								<DropdownMenuItem
+									disabled={!onLabel}
+									onClick={() => onLabel?.([])}
+								>
+									<Tag className="mr-2 size-4" />
+									Add label
+								</DropdownMenuItem>
+								{/* TODO: Move requires available folders prop */}
+								<DropdownMenuItem
+									disabled={!onMove}
+									onClick={() => onMove?.("inbox")}
+								>
+									<Archive className="mr-2 size-4" />
+									Move to folder
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem onClick={() => onSpam?.()}>
+									<AlertOctagon className="mr-2 size-4" />
+									Report spam
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem onClick={handlePrint}>
+									<Printer className="mr-2 size-4" />
+									Print
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</TooltipProvider>
+				</div>
+			</div>
+
+			{/* Subject */}
+			<div className="border-b px-4 py-3">
+				<h1 className="text-lg font-semibold">{thread.subject}</h1>
+				<div className="text-muted-foreground mt-1 flex items-center gap-2 text-sm">
+					<span>
+						{thread.messages.length} message
+						{thread.messages.length > 1 ? "s" : ""}
+					</span>
+					{thread.messages.length > 1 && (
+						<>
+							<span>·</span>
+							<button
+								type="button"
+								onClick={expandAll}
+								className="hover:underline"
+							>
+								Expand all
+							</button>
+							<span>·</span>
+							<button
+								type="button"
+								onClick={collapseAll}
+								className="hover:underline"
+							>
+								Collapse
+							</button>
+						</>
+					)}
+				</div>
+			</div>
+
+			{/* Messages */}
+			<ScrollArea className="flex-1">
+				<div
+					className={cn(
+						"divide-y",
+						enableAnimations && "transition-all duration-200",
+					)}
+				>
+					{thread.messages.map((message) => (
+						<MessageView
+							key={message.id}
+							message={message}
+							isExpanded={expandedMessages.has(message.id)}
+							showHeaders={false}
+							showReplyComposer={false}
+							onToggleExpand={() => toggleMessage(message.id)}
+							onReply={() => onReply?.(message.id)}
+							onReplyAll={() => onReplyAll?.(message.id)}
+							onForward={() => onForward?.(message.id)}
+							onStar={() => onStar?.()}
+						/>
+					))}
+				</div>
+			</ScrollArea>
+
+			{/* Reply Footer */}
+			<div className="border-t p-4">
+				<Button
+					onClick={() => {
+						const lastMessage = thread.messages[thread.messages.length - 1];
+						if (lastMessage) onReply?.(lastMessage.id);
+					}}
+					className="w-full sm:w-auto"
+				>
+					<Reply className="mr-2 size-4" />
+					Reply
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export { ThreadDisplay };

package/src/pages/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Page Components - Complete page compositions with state management.
+ *
+ * These are reference implementations showing how to wire up
+ * shell components with proper state management.
+ */
+
+export { MailZeroPage } from "./mail-zero-page";
+export type { MailZeroPageProps } from "./mail-zero-page";

package/src/pages/mail-zero-page.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Folder, MailLabel as Label, MailThread as Thread } from "mdxui";
+import { MailZeroPage } from "./mail-zero-page";
+
+const meta: Meta<typeof MailZeroPage> = {
+	title: "Zero/Pages/MailZeroPage",
+	component: MailZeroPage,
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof MailZeroPage>;
+
+// Sample data
+const sampleFolders: Folder[] = [
+	{ id: "inbox", name: "Inbox", type: "inbox", unreadCount: 12 },
+	{ id: "starred", name: "Starred", type: "starred", unreadCount: 0 },
+	{ id: "snoozed", name: "Snoozed", type: "snoozed", unreadCount: 2 },
+	{ id: "sent", name: "Sent", type: "sent", unreadCount: 0 },
+	{ id: "drafts", name: "Drafts", type: "drafts", unreadCount: 3 },
+	{ id: "spam", name: "Spam", type: "spam", unreadCount: 5 },
+	{ id: "trash", name: "Trash", type: "trash", unreadCount: 0 },
+	{ id: "archive", name: "Archive", type: "archive", unreadCount: 0 },
+];
+
+const sampleLabels: Label[] = [
+	{ id: "work", name: "Work", color: "#3b82f6", type: "user" },
+	{ id: "personal", name: "Personal", color: "#10b981", type: "user" },
+	{ id: "urgent", name: "Urgent", color: "#ef4444", type: "user" },
+];
+
+const sampleThreads: Thread[] = [
+	{
+		id: "thread-1",
+		subject: "Q4 Planning Meeting Notes",
+		messages: [
+			{
+				id: "msg-1a",
+				threadId: "thread-1",
+				subject: "Q4 Planning Meeting Notes",
+				from: { address: "sarah@company.com", name: "Sarah Chen" },
+				to: [{ address: "team@company.com", name: "Team" }],
+				date: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
+				snippet:
+					"Hi team, here are the notes from today's Q4 planning session...",
+				textBody:
+					"Hi team,\n\nHere are the notes from today's Q4 planning session.\n\nKey decisions:\n1. Launch new product line in October\n2. Increase marketing budget by 20%\n3. Hire 5 new engineers\n\nAction items attached.\n\nBest,\nSarah",
+				isRead: false,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+			{
+				id: "msg-1b",
+				threadId: "thread-1",
+				subject: "Re: Q4 Planning Meeting Notes",
+				from: { address: "mike@company.com", name: "Mike Johnson" },
+				to: [{ address: "team@company.com", name: "Team" }],
+				date: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
+				snippet: "Thanks Sarah! I have a question about the timeline...",
+				textBody:
+					"Thanks Sarah!\n\nI have a question about the timeline for the product launch. Can we discuss tomorrow?\n\nMike",
+				isRead: false,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+				inReplyTo: "msg-1a",
+			},
+		],
+		latestDate: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
+		participants: [
+			{ address: "sarah@company.com", name: "Sarah Chen" },
+			{ address: "mike@company.com", name: "Mike Johnson" },
+		],
+		unreadCount: 2,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet: "Thanks Sarah! I have a question about the timeline...",
+	},
+	{
+		id: "thread-2",
+		subject: "Invoice #2024-156 - Payment Confirmation",
+		messages: [
+			{
+				id: "msg-2a",
+				threadId: "thread-2",
+				subject: "Invoice #2024-156 - Payment Confirmation",
+				from: { address: "billing@vendor.com", name: "Vendor Billing" },
+				to: [{ address: "you@company.com", name: "You" }],
+				date: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+				snippet:
+					"Your payment of $4,500.00 has been received and processed...",
+				textBody:
+					"Dear Customer,\n\nYour payment of $4,500.00 has been received and processed.\n\nInvoice: #2024-156\nAmount: $4,500.00\nStatus: Paid\n\nThank you for your business.\n\nVendor Billing Team",
+				isRead: true,
+				isStarred: true,
+				isImportant: false,
+				isDraft: false,
+				attachments: [
+					{
+						id: "att-1",
+						filename: "invoice-2024-156.pdf",
+						mimeType: "application/pdf",
+						size: 245000,
+						inline: false,
+					},
+				],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+		participants: [{ address: "billing@vendor.com", name: "Vendor Billing" }],
+		unreadCount: 0,
+		labels: [],
+		isStarred: true,
+		isImportant: false,
+		hasAttachments: true,
+		snippet: "Your payment of $4,500.00 has been received and processed...",
+	},
+	{
+		id: "thread-3",
+		subject: "Weekend hiking trip?",
+		messages: [
+			{
+				id: "msg-3a",
+				threadId: "thread-3",
+				subject: "Weekend hiking trip?",
+				from: { address: "alex@personal.com", name: "Alex Rivera" },
+				to: [{ address: "you@personal.com", name: "You" }],
+				date: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(),
+				snippet:
+					"Hey! Want to go hiking this Saturday? I found this great trail...",
+				textBody:
+					"Hey!\n\nWant to go hiking this Saturday? I found this great trail in the mountains - about 8 miles round trip with amazing views.\n\nLet me know if you're interested!\n\nAlex",
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(),
+		participants: [{ address: "alex@personal.com", name: "Alex Rivera" }],
+		unreadCount: 0,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet:
+			"Hey! Want to go hiking this Saturday? I found this great trail...",
+	},
+	{
+		id: "thread-4",
+		subject: "Your weekly digest",
+		messages: [
+			{
+				id: "msg-4a",
+				threadId: "thread-4",
+				subject: "Your weekly digest",
+				from: { address: "digest@news.com", name: "Weekly News" },
+				to: [{ address: "you@company.com", name: "You" }],
+				date: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+				snippet: "Here's what happened this week in tech...",
+				textBody:
+					"Your Weekly Tech Digest\n\n1. AI breakthrough in natural language processing\n2. New smartphone launches next month\n3. Startup raises $50M in Series B\n\nRead more at our website.",
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+		participants: [{ address: "digest@news.com", name: "Weekly News" }],
+		unreadCount: 0,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet: "Here's what happened this week in tech...",
+	},
+	{
+		id: "thread-5",
+		subject: "Project deadline reminder",
+		messages: [
+			{
+				id: "msg-5a",
+				threadId: "thread-5",
+				subject: "Project deadline reminder",
+				from: { address: "pm@company.com", name: "Project Manager" },
+				to: [{ address: "team@company.com", name: "Team" }],
+				date: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+				snippet:
+					"Reminder: The project milestone is due this Friday. Please ensure...",
+				textBody:
+					"Team,\n\nReminder: The project milestone is due this Friday.\n\nPlease ensure all deliverables are ready for review by Thursday EOD.\n\nThanks,\nPM",
+				isRead: false,
+				isStarred: false,
+				isImportant: true,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+		participants: [{ address: "pm@company.com", name: "Project Manager" }],
+		unreadCount: 1,
+		labels: [],
+		isStarred: false,
+		isImportant: true,
+		hasAttachments: false,
+		snippet:
+			"Reminder: The project milestone is due this Friday. Please ensure...",
+	},
+];
+
+const sampleUser = {
+	name: "John Doe",
+	email: "john@company.com",
+	avatar: "https://i.pravatar.cc/150?u=john",
+};
+
+/**
+ * Complete email page with internal state management.
+ * Click threads to view them, use navigation buttons, try actions.
+ * All actions are handled internally - check console for logs.
+ */
+export const Default: Story = {
+	args: {
+		initialThreads: sampleThreads,
+		initialFolders: sampleFolders,
+		initialLabels: sampleLabels,
+		initialFolderId: "inbox",
+		user: sampleUser,
+	},
+	render: (args) => (
+		<div className="h-screen">
+			<MailZeroPage {...args} />
+		</div>
+	),
+};