@mdxui/zero 6.0.0

package/src/dashboard/mail-shell.stories.tsx

@@ -0,0 +1,272 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Folder, MailLabel as Label, MailThread as Thread } from "mdxui";
+import { MailShell } from "./mail-shell";
+
+// Sample data matching Zero email client
+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: 3 },
+	{ id: "sent", name: "Sent", type: "sent", unreadCount: 0 },
+	{ id: "drafts", name: "Drafts", type: "drafts", unreadCount: 2 },
+	{ id: "spam", name: "Spam", type: "spam", unreadCount: 5 },
+	{ id: "trash", name: "Trash", type: "trash", unreadCount: 0 },
+];
+
+const sampleLabels: Label[] = [
+	{ id: "work", name: "Work", color: "#3b82f6", type: "user" },
+	{ id: "personal", name: "Personal", color: "#10b981", type: "user" },
+	{ id: "finance", name: "Finance", color: "#f59e0b", type: "user" },
+];
+
+const sampleUser = {
+	name: "John Doe",
+	email: "john@example.com.ai",
+	avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=John",
+};
+
+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...",
+				textBody:
+					"Hey team,\n\nLet's discuss our Q4 roadmap priorities. I've prepared a deck with the key initiatives.\n\nTopics:\n1. Customer feedback review\n2. Technical debt allocation\n3. New feature priorities\n\nSee you all at 2pm!\n\nSarah",
+				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: "work", 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...",
+				textBody:
+					"I've updated the mockups based on your feedback. The new hero section looks much cleaner now.\n\nPlease review the attached files and let me know if we're good to proceed to development.",
+				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" }],
+		unreadCount: 0,
+		labels: [],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: true,
+		snippet: "I've updated the mockups based on your feedback...",
+	},
+	{
+		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.",
+				textBody:
+					"Your payment of $299.00 has been successfully processed. Thank you for your business!",
+				isRead: true,
+				isStarred: false,
+				isImportant: false,
+				isDraft: false,
+				attachments: [],
+				labels: [],
+			},
+		],
+		latestDate: new Date(Date.now() - 86400000).toISOString(),
+		participants: [{ address: "billing@stripe.com", name: "Stripe" }],
+		unreadCount: 0,
+		labels: [
+			{ id: "finance", name: "Finance", color: "#f59e0b", type: "user" },
+		],
+		isStarred: false,
+		isImportant: false,
+		hasAttachments: false,
+		snippet: "Your payment of $299.00 has been successfully processed.",
+	},
+];
+
+const meta: Meta<typeof MailShell> = {
+	title: "Zero/Dashboard/MailShell",
+	component: MailShell,
+	parameters: {
+		layout: "fullscreen",
+	},
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div className="h-screen w-full">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Complete mail shell layout.
+ * Matches the original Zero dashboard with sidebar, list, and thread display.
+ */
+export const Default: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: sampleThreads,
+		activeThread: sampleThreads[0],
+		activeThreadId: "1",
+		showUpgrade: true,
+		showNavigation: true,
+		hasPreviousThread: false,
+		hasNextThread: true,
+	},
+};
+
+/**
+ * No thread selected - two panel view.
+ */
+export const NoThreadSelected: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: sampleThreads,
+		showUpgrade: false,
+		showThreadPanel: false,
+	},
+};
+
+/**
+ * Collapsed sidebar.
+ */
+export const CollapsedSidebar: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: sampleThreads,
+		activeThread: sampleThreads[0],
+		activeThreadId: "1",
+		sidebarCollapsed: true,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Empty inbox state.
+ */
+export const EmptyInbox: Story = {
+	args: {
+		folders: [
+			{ id: "inbox", name: "Inbox", type: "inbox", unreadCount: 0 },
+			...sampleFolders.slice(1),
+		],
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: [],
+		emptyMessage: "Your inbox is empty",
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Multiple selection mode.
+ */
+export const MultiSelect: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: sampleThreads,
+		selectionMode: "multiple",
+		selectedThreadIds: ["1", "3"],
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Loading threads.
+ */
+export const Loading: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: [],
+		isLoadingThreads: true,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Compact display mode.
+ */
+export const CompactMode: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		threads: sampleThreads,
+		displayMode: "compact",
+		activeThread: sampleThreads[0],
+		activeThreadId: "1",
+		showUpgrade: false,
+	},
+};

package/src/dashboard/mail-shell.tsx

@@ -0,0 +1,199 @@
+import { cn } from "@mdxui/primitives/lib/utils";
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@mdxui/primitives/resizable";
+import type { MailShellProps, MailThread as Thread } from "mdxui";
+import { MailList } from "../mail/mail-list";
+import { ThreadDisplay } from "../mail/thread-display";
+import { MailSidebar } from "./mail-sidebar";
+
+/**
+ * MailShell - Complete email app shell layout.
+ *
+ * Combines:
+ * - Sidebar: Folder navigation, labels, compose button
+ * - Mail List: Thread list with selection
+ * - Thread Display: Email thread viewer
+ *
+ * Features:
+ * - Three-panel resizable layout
+ * - Responsive collapse behavior
+ * - Panel visibility toggles
+ * - Keyboard navigation
+ */
+function MailShell({
+	// Sidebar props
+	folders,
+	activeFolderId,
+	onFolderClick,
+	onCompose,
+	labels,
+	onLabelClick,
+	onCreateLabel,
+	sidebarCollapsed = false,
+	onToggleSidebar,
+	user,
+	showUpgrade = false,
+	onUpgradeClick,
+
+	// Mail list props
+	threads,
+	selectedThreadIds = [],
+	activeThreadId,
+	selectionMode = "single",
+	displayMode = "comfortable",
+	isLoadingThreads = false,
+	hasMoreThreads = false,
+	onThreadClick,
+	onThreadSelectionChange,
+	onLoadMoreThreads,
+	onStarThread,
+	enableKeyboardNav = true,
+	showAvatars = true,
+	showSnippets = true,
+	highlightTerms,
+	emptyMessage = "No messages",
+
+	// Thread display props
+	activeThread,
+	showNavigation = true,
+	onPrevious,
+	onNext,
+	onClose,
+	onReply,
+	onReplyAll,
+	onForward,
+	onStar,
+	onArchive,
+	onDelete,
+	onSpam,
+	onSnooze,
+	onMove,
+	onLabel,
+	onPrint,
+	hasPreviousThread = false,
+	hasNextThread = false,
+
+	// Layout props
+	showThreadPanel = true,
+	defaultSidebarWidth = 20,
+	defaultListWidth = 35,
+	minSidebarWidth = 12,
+	maxSidebarWidth = 25,
+	minListWidth = 20,
+	maxListWidth = 50,
+	className,
+}: MailShellProps) {
+	// Handle thread navigation
+	const handleThreadSelect = (thread: Thread) => {
+		onThreadClick?.(thread);
+	};
+
+	// Determine if thread panel should be visible
+	const showThread = showThreadPanel && activeThread !== undefined;
+
+	return (
+		<div
+			data-slot="mail-shell"
+			className={cn("bg-background flex h-full", className)}
+		>
+			<ResizablePanelGroup direction="horizontal" className="h-full">
+				{/* Sidebar Panel */}
+				<ResizablePanel
+					defaultSize={sidebarCollapsed ? 4 : defaultSidebarWidth}
+					minSize={sidebarCollapsed ? 4 : minSidebarWidth}
+					maxSize={sidebarCollapsed ? 4 : maxSidebarWidth}
+					collapsible
+					collapsedSize={4}
+					onCollapse={() => onToggleSidebar?.()}
+					onExpand={() => onToggleSidebar?.()}
+				>
+					<MailSidebar
+						folders={folders}
+						activeFolderId={activeFolderId}
+						onFolderClick={onFolderClick}
+						onCompose={onCompose}
+						labels={labels}
+						onLabelClick={onLabelClick}
+						onCreateLabel={onCreateLabel}
+						isCollapsed={sidebarCollapsed}
+						onToggleCollapse={onToggleSidebar}
+						user={user}
+						showUpgrade={showUpgrade}
+						onUpgradeClick={onUpgradeClick}
+						className="h-full"
+					/>
+				</ResizablePanel>
+
+				<ResizableHandle withHandle />
+
+				{/* Mail List Panel */}
+				<ResizablePanel
+					defaultSize={
+						showThread ? defaultListWidth : 100 - defaultSidebarWidth
+					}
+					minSize={minListWidth}
+					maxSize={showThread ? maxListWidth : 100 - minSidebarWidth}
+				>
+					<MailList
+						threads={threads}
+						selectedIds={selectedThreadIds}
+						activeId={activeThreadId}
+						selectionMode={selectionMode}
+						displayMode={displayMode}
+						isLoading={isLoadingThreads}
+						hasMore={hasMoreThreads}
+						onThreadClick={handleThreadSelect as () => unknown}
+						onSelectionChange={onThreadSelectionChange}
+						onLoadMore={onLoadMoreThreads}
+						onStar={onStarThread}
+						enableKeyboardNav={enableKeyboardNav}
+						showAvatars={showAvatars}
+						showSnippets={showSnippets}
+						highlightTerms={highlightTerms}
+						emptyMessage={emptyMessage}
+						virtualized={false}
+						className="h-full"
+					/>
+				</ResizablePanel>
+
+				{/* Thread Display Panel */}
+				{showThread && (
+					<>
+						<ResizableHandle withHandle />
+						<ResizablePanel
+							defaultSize={100 - defaultSidebarWidth - defaultListWidth}
+						>
+							<ThreadDisplay
+								thread={activeThread}
+								showNavigation={showNavigation}
+								enableAnimations
+								onPrevious={onPrevious}
+								onNext={onNext}
+								onClose={onClose}
+								onReply={onReply}
+								onReplyAll={onReplyAll}
+								onForward={onForward}
+								onStar={onStar}
+								onArchive={onArchive}
+								onDelete={onDelete}
+								onSpam={onSpam}
+								onSnooze={onSnooze}
+								onMove={onMove}
+								onLabel={onLabel}
+								onPrint={onPrint}
+								hasPrevious={hasPreviousThread}
+								hasNext={hasNextThread}
+								className="h-full"
+							/>
+						</ResizablePanel>
+					</>
+				)}
+			</ResizablePanelGroup>
+		</div>
+	);
+}
+
+export { MailShell };

package/src/dashboard/mail-sidebar.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Folder, MailLabel as Label } from "mdxui";
+import { MailSidebar } from "./mail-sidebar";
+
+// Sample folders matching Zero email client
+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: 3 },
+	{ id: "sent", name: "Sent", type: "sent", unreadCount: 0 },
+	{ id: "drafts", name: "Drafts", type: "drafts", unreadCount: 2 },
+	{ id: "spam", name: "Spam", type: "spam", unreadCount: 5 },
+	{ id: "trash", name: "Trash", type: "trash", unreadCount: 0 },
+	{ id: "archive", name: "All Mail", type: "archive", unreadCount: 0 },
+];
+
+const sampleLabels: Label[] = [
+	{ id: "work", name: "Work", color: "#3b82f6", type: "user" },
+	{ id: "personal", name: "Personal", color: "#10b981", type: "user" },
+	{ id: "finance", name: "Finance", color: "#f59e0b", type: "user" },
+	{ id: "travel", name: "Travel", color: "#8b5cf6", type: "user" },
+];
+
+const sampleUser = {
+	name: "John Doe",
+	email: "john@example.com.ai",
+	avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=John",
+};
+
+const meta: Meta<typeof MailSidebar> = {
+	title: "Zero/Dashboard/MailSidebar",
+	component: MailSidebar,
+	parameters: {
+		layout: "fullscreen",
+	},
+	tags: ["autodocs"],
+	decorators: [
+		(Story) => (
+			<div className="h-screen w-80 bg-background">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Full sidebar with all features.
+ * Matches the original Zero mail sidebar.
+ */
+export const Default: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		isCollapsed: false,
+		showUpgrade: true,
+	},
+};
+
+/**
+ * Collapsed state showing only icons.
+ */
+export const Collapsed: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		isCollapsed: true,
+		showUpgrade: false,
+	},
+	decorators: [
+		(Story) => (
+			<div className="h-screen w-20 bg-background">
+				<Story />
+			</div>
+		),
+	],
+};
+
+/**
+ * Without upgrade CTA.
+ */
+export const NoUpgrade: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		isCollapsed: false,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Without labels section.
+ */
+export const NoLabels: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		user: sampleUser,
+		isCollapsed: false,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Minimal - no user info or extras.
+ */
+export const Minimal: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "inbox",
+		isCollapsed: false,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * Sent folder active.
+ */
+export const SentActive: Story = {
+	args: {
+		folders: sampleFolders,
+		activeFolderId: "sent",
+		labels: sampleLabels,
+		user: sampleUser,
+		isCollapsed: false,
+		showUpgrade: false,
+	},
+};
+
+/**
+ * With many unread messages.
+ */
+export const ManyUnread: Story = {
+	args: {
+		folders: [
+			{ id: "inbox", name: "Inbox", type: "inbox", unreadCount: 150 },
+			{ id: "starred", name: "Starred", type: "starred", unreadCount: 0 },
+			{ id: "snoozed", name: "Snoozed", type: "snoozed", unreadCount: 25 },
+			{ id: "sent", name: "Sent", type: "sent", unreadCount: 0 },
+			{ id: "drafts", name: "Drafts", type: "drafts", unreadCount: 8 },
+			{ id: "spam", name: "Spam", type: "spam", unreadCount: 47 },
+			{ id: "trash", name: "Trash", type: "trash", unreadCount: 0 },
+		],
+		activeFolderId: "inbox",
+		labels: sampleLabels,
+		user: sampleUser,
+		isCollapsed: false,
+		showUpgrade: true,
+	},
+};