@mdxui/zero 6.0.0

package/src/mail/mail-list.stories.tsx

@@ -0,0 +1,320 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { MailThread as Thread } from "mdxui";
+import { MailItem } from "./mail-item";
+import { MailList, MailSkeleton } from "./mail-list";
+
+// Sample thread data matching the original Zero email client
+const sampleThreads: Thread[] = [
+	{
+		id: "1",
+		subject: "Weekly Team Sync - Q4 Planning",
+		messages: [
+			{
+				id: "m1",
+				threadId: "1",
+				subject: "Weekly Team Sync - Q4 Planning",
+				from: { address: "sarah@company.com", name: "Sarah Chen" },
+				to: [{ address: "team@company.com", name: "Engineering Team" }],
+				date: new Date(Date.now() - 3600000).toISOString(),
+				snippet: "Hey team, let's discuss our Q4 roadmap priorities...",
+				isRead: false,
+				isStarred: true,
+				isImportant: true,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 3600000).toISOString(),
+		participants: [
+			{ address: "sarah@company.com", name: "Sarah Chen" },
+			{ address: "team@company.com", name: "Engineering Team" },
+		],
+		unreadCount: 1,
+		labels: [{ id: "l1", name: "Work", color: "#3b82f6", type: "user" }],
+		isStarred: true,
+		isImportant: true,
+		hasAttachments: false,
+		snippet: "Hey team, let's discuss our Q4 roadmap priorities...",
+	},
+	{
+		id: "2",
+		subject: "Re: Design Review - Homepage Redesign",
+		messages: [
+			{
+				id: "m2",
+				threadId: "2",
+				subject: "Re: Design Review - Homepage Redesign",
+				from: { address: "mike@design.co", name: "Mike Johnson" },
+				to: [{ address: "me@company.com", name: "Me" }],
+				date: new Date(Date.now() - 7200000).toISOString(),
+				snippet:
+					"I've updated the mockups based on your feedback. The new hero section...",
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [
+					{
+						id: "a1",
+						filename: "homepage-v3.fig",
+						mimeType: "application/figma",
+						size: 2400000,
+						inline: false,
+					},
+				],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 7200000).toISOString(),
+		participants: [
+			{ address: "mike@design.co", name: "Mike Johnson" },
+			{ address: "me@company.com", name: "Me" },
+		],
+		unreadCount: 0,
+		labels: [{ id: "l2", name: "Design", color: "#10b981", type: "user" }],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: true,
+		snippet:
+			"I've updated the mockups based on your feedback. The new hero section...",
+	},
+	{
+		id: "3",
+		subject: "Invoice #12345 - Payment Confirmation",
+		messages: [
+			{
+				id: "m3",
+				threadId: "3",
+				subject: "Invoice #12345 - Payment Confirmation",
+				from: { address: "billing@stripe.com", name: "Stripe" },
+				to: [{ address: "me@company.com", name: "Me" }],
+				date: new Date(Date.now() - 86400000).toISOString(),
+				snippet: "Your payment of $299.00 has been successfully processed...",
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [
+					{
+						id: "a2",
+						filename: "invoice-12345.pdf",
+						mimeType: "application/pdf",
+						size: 45000,
+						inline: false,
+					},
+				],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 86400000).toISOString(),
+		participants: [{ address: "billing@stripe.com", name: "Stripe" }],
+		unreadCount: 0,
+		labels: [{ id: "l3", name: "Finance", color: "#f59e0b", type: "user" }],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: true,
+		snippet: "Your payment of $299.00 has been successfully processed...",
+	},
+	{
+		id: "4",
+		subject: "GitHub: [org/repo] Pull request #42 merged",
+		messages: [
+			{
+				id: "m4",
+				threadId: "4",
+				subject: "GitHub: [org/repo] Pull request #42 merged",
+				from: { address: "notifications@github.com", name: "GitHub" },
+				to: [{ address: "me@company.com", name: "Me" }],
+				date: new Date(Date.now() - 172800000).toISOString(),
+				snippet:
+					'Your pull request "Fix authentication flow" has been merged into main...',
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 172800000).toISOString(),
+		participants: [{ address: "notifications@github.com", name: "GitHub" }],
+		unreadCount: 0,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet:
+			'Your pull request "Fix authentication flow" has been merged into main...',
+	},
+	{
+		id: "5",
+		subject: "Welcome to Zero Mail - AI-Powered Email",
+		messages: [
+			{
+				id: "m5",
+				threadId: "5",
+				subject: "Welcome to Zero Mail - AI-Powered Email",
+				from: { address: "hello@0.email", name: "Zero Mail" },
+				to: [{ address: "me@company.com", name: "Me" }],
+				date: new Date(Date.now() - 259200000).toISOString(),
+				snippet: "Welcome! Get started with AI-powered email management...",
+				isRead: false,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 259200000).toISOString(),
+		participants: [{ address: "hello@0.email", name: "Zero Mail" }],
+		unreadCount: 1,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet: "Welcome! Get started with AI-powered email management...",
+	},
+];
+
+const meta: Meta<typeof MailList> = {
+	title: "Zero/Mail/MailList",
+	component: MailList,
+	parameters: {
+		layout: "fullscreen",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		selectionMode: {
+			control: "select",
+			options: ["none", "single", "multiple"],
+		},
+		displayMode: {
+			control: "select",
+			options: ["comfortable", "compact", "condensed"],
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div className="h-screen w-full max-w-2xl border-r bg-background">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default mail list with comfortable display mode.
+ * Matches the original Zero mail inbox view.
+ */
+export const Default: Story = {
+	args: {
+		threads: sampleThreads,
+		selectionMode: "single",
+		displayMode: "comfortable",
+		showAvatars: true,
+		showSnippets: true,
+		enableKeyboardNav: true,
+	},
+};
+
+/**
+ * Compact display mode for more messages on screen.
+ */
+export const Compact: Story = {
+	args: {
+		threads: sampleThreads,
+		selectionMode: "single",
+		displayMode: "compact",
+		showAvatars: true,
+		showSnippets: true,
+	},
+};
+
+/**
+ * Condensed display mode - minimal height.
+ */
+export const Condensed: Story = {
+	args: {
+		threads: sampleThreads,
+		selectionMode: "single",
+		displayMode: "condensed",
+		showAvatars: false,
+		showSnippets: false,
+	},
+};
+
+/**
+ * Multiple selection mode with checkboxes.
+ */
+export const MultiSelect: Story = {
+	args: {
+		threads: sampleThreads,
+		selectionMode: "multiple",
+		displayMode: "comfortable",
+		selectedIds: ["1", "3"],
+		showAvatars: true,
+		showSnippets: true,
+	},
+};
+
+/**
+ * Loading state with skeleton items.
+ */
+export const Loading: Story = {
+	args: {
+		threads: [],
+		isLoading: true,
+		displayMode: "comfortable",
+	},
+};
+
+/**
+ * Empty state when no messages.
+ */
+export const Empty: Story = {
+	args: {
+		threads: [],
+		emptyMessage: "Your inbox is empty",
+	},
+};
+
+/**
+ * With search term highlighting.
+ */
+export const WithHighlight: Story = {
+	args: {
+		threads: sampleThreads,
+		highlightTerms: ["Q4", "design"],
+		displayMode: "comfortable",
+	},
+};
+
+// MailItem story
+export const SingleItem: StoryObj<typeof MailItem> = {
+	render: () => (
+		<div className="w-full max-w-2xl border bg-background">
+			<MailItem
+				thread={sampleThreads[0]}
+				isSelected={false}
+				isFocused={false}
+				showCheckbox={true}
+				showAvatar={true}
+				compact={false}
+			/>
+		</div>
+	),
+};
+
+// MailSkeleton story
+export const Skeleton: StoryObj<typeof MailSkeleton> = {
+	render: () => (
+		<div className="w-full max-w-2xl border bg-background">
+			<MailSkeleton count={5} displayMode="comfortable" />
+		</div>
+	),
+};

package/src/mail/mail-list.tsx

@@ -0,0 +1,262 @@
+import { Checkbox } from "@mdxui/primitives/checkbox";
+import { cn } from "@mdxui/primitives/lib/utils";
+import { ScrollArea } from "@mdxui/primitives/scroll-area";
+import { Skeleton } from "@mdxui/primitives/skeleton";
+import { Inbox, Loader2 } from "lucide-react";
+import type {
+	MailListProps,
+	MailSkeletonProps,
+	MailThread as Thread,
+} from "mdxui";
+import * as React from "react";
+import { MailItem } from "./mail-item";
+
+/**
+ * MailList - Virtualized list of email threads.
+ *
+ * Features:
+ * - Multiple selection modes (none, single, multiple)
+ * - Keyboard navigation
+ * - Infinite scroll loading
+ * - Empty states
+ * - Loading skeletons
+ */
+function MailList({
+	threads,
+	selectedIds = [],
+	activeId: _activeId,
+	selectionMode = "single",
+	displayMode = "comfortable",
+	isLoading = false,
+	hasMore = false,
+	onThreadClick,
+	onSelectionChange,
+	onLoadMore,
+	onStar,
+	onArchive: _onArchive,
+	onDelete: _onDelete,
+	enableKeyboardNav = true,
+	showAvatars = true,
+	showSnippets: _showSnippets = true,
+	virtualized: _virtualized = true,
+	highlightTerms,
+	emptyMessage = "No messages",
+	emptyIcon: _emptyIcon,
+	className,
+}: MailListProps) {
+	const listRef = React.useRef<HTMLUListElement>(null);
+	const [focusedIndex, setFocusedIndex] = React.useState(-1);
+
+	const compact = displayMode === "compact" || displayMode === "condensed";
+
+	// Handle thread selection
+	const handleSelect = React.useCallback(
+		(thread: Thread) => {
+			if (selectionMode === "none") return;
+
+			let newSelected: string[];
+
+			if (selectionMode === "single") {
+				newSelected = selectedIds.includes(thread.id) ? [] : [thread.id];
+			} else {
+				newSelected = selectedIds.includes(thread.id)
+					? selectedIds.filter((id) => id !== thread.id)
+					: [...selectedIds, thread.id];
+			}
+
+			onSelectionChange?.(newSelected);
+		},
+		[selectionMode, selectedIds, onSelectionChange],
+	);
+
+	// Handle select all
+	const handleSelectAll = React.useCallback(() => {
+		if (selectionMode !== "multiple") return;
+
+		if (selectedIds.length === threads.length) {
+			onSelectionChange?.([]);
+		} else {
+			onSelectionChange?.(threads.map((t) => t.id));
+		}
+	}, [selectionMode, selectedIds, threads, onSelectionChange]);
+
+	const handleKeyDown = React.useCallback(
+		(e: KeyboardEvent) => {
+			if (!threads.length) return;
+
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					setFocusedIndex((prev) => Math.min(prev + 1, threads.length - 1));
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					setFocusedIndex((prev) => Math.max(prev - 1, 0));
+					break;
+				case "Enter":
+					if (focusedIndex >= 0 && focusedIndex < threads.length) {
+						onThreadClick?.(threads[focusedIndex]);
+					}
+					break;
+				case " ":
+					if (selectionMode === "multiple" && focusedIndex >= 0) {
+						e.preventDefault();
+						handleSelect(threads[focusedIndex]);
+					}
+					break;
+				case "Escape":
+					setFocusedIndex(-1);
+					break;
+			}
+		},
+		[threads, focusedIndex, selectionMode, onThreadClick, handleSelect],
+	);
+
+	// Handle keyboard navigation
+	React.useEffect(() => {
+		if (!enableKeyboardNav || !listRef.current) return;
+
+		const list = listRef.current;
+		list.addEventListener("keydown", handleKeyDown);
+		return () => list.removeEventListener("keydown", handleKeyDown);
+	}, [enableKeyboardNav, handleKeyDown]);
+
+	// Scroll to load more
+	const handleScroll = React.useCallback(
+		(e: React.UIEvent<HTMLDivElement>) => {
+			if (!hasMore || isLoading || !onLoadMore) return;
+
+			const target = e.target as HTMLDivElement;
+			const scrollBottom =
+				target.scrollHeight - target.scrollTop - target.clientHeight;
+
+			if (scrollBottom < 200) {
+				onLoadMore();
+			}
+		},
+		[hasMore, isLoading, onLoadMore],
+	);
+
+	// Check if all are selected
+	const allSelected =
+		threads.length > 0 && selectedIds.length === threads.length;
+	const someSelected = selectedIds.length > 0 && !allSelected;
+
+	// Empty state
+	if (!isLoading && threads.length === 0) {
+		return (
+			<div
+				data-slot="mail-list-empty"
+				className={cn(
+					"flex h-full flex-col items-center justify-center gap-4 p-8 text-center",
+					className,
+				)}
+			>
+				<div className="bg-muted rounded-full p-4">
+					<Inbox className="text-muted-foreground size-8" />
+				</div>
+				<p className="text-muted-foreground text-lg">{emptyMessage}</p>
+			</div>
+		);
+	}
+
+	return (
+		<ul
+			ref={listRef}
+			data-slot="mail-list"
+			tabIndex={enableKeyboardNav ? 0 : undefined}
+			className={cn("flex h-full flex-col", className)}
+		>
+			{/* Bulk Selection Header */}
+			{selectionMode === "multiple" && (
+				<div className="border-b bg-muted/30 flex items-center gap-3 px-4 py-2">
+					<Checkbox
+						checked={someSelected ? "indeterminate" : allSelected}
+						onCheckedChange={handleSelectAll}
+						aria-label="Select all"
+					/>
+					<span className="text-muted-foreground text-sm">
+						{selectedIds.length > 0
+							? `${selectedIds.length} selected`
+							: "Select all"}
+					</span>
+				</div>
+			)}
+
+			{/* Thread List */}
+			<ScrollArea className="flex-1" onScroll={handleScroll}>
+				<div className="divide-y">
+					{threads.map((thread, index) => (
+						<MailItem
+							key={thread.id}
+							thread={thread}
+							isSelected={selectedIds.includes(thread.id)}
+							isFocused={focusedIndex === index}
+							onClick={() => {
+								setFocusedIndex(index);
+								onThreadClick?.(thread);
+							}}
+							onSelect={() => handleSelect(thread)}
+							onStar={() => onStar?.(thread.id)}
+							compact={compact}
+							showCheckbox={selectionMode === "multiple"}
+							showAvatar={showAvatars}
+							highlightTerms={highlightTerms}
+						/>
+					))}
+
+					{/* Loading More Indicator */}
+					{isLoading && threads.length > 0 && (
+						<div className="flex items-center justify-center py-4">
+							<Loader2 className="text-muted-foreground size-5 animate-spin" />
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+
+			{/* Initial Loading State */}
+			{isLoading && threads.length === 0 && (
+				<MailSkeleton count={8} displayMode={displayMode} />
+			)}
+		</ul>
+	);
+}
+
+/**
+ * MailSkeleton - Loading skeleton for mail list.
+ */
+function MailSkeleton({
+	count = 5,
+	displayMode = "comfortable",
+	className,
+}: MailSkeletonProps) {
+	const compact = displayMode === "compact" || displayMode === "condensed";
+
+	return (
+		<div data-slot="mail-skeleton" className={cn("divide-y", className)}>
+			{Array.from({ length: count }).map((_, i) => (
+				<div
+					key={i.toString()}
+					className={cn(
+						"flex items-start gap-3 px-4",
+						compact ? "py-2" : "py-3",
+					)}
+				>
+					<Skeleton
+						className={cn("rounded-full", compact ? "size-8" : "size-10")}
+					/>
+					<div className="flex-1 space-y-2">
+						<div className="flex items-center justify-between">
+							<Skeleton className="h-4 w-32" />
+							<Skeleton className="h-3 w-16" />
+						</div>
+						<Skeleton className="h-4 w-48" />
+						{!compact && <Skeleton className="h-3 w-full" />}
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export { MailList, MailSkeleton };