@mdxui/zero 6.0.0

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

@@ -0,0 +1,334 @@
+import type {
+	Folder,
+	MailLabel as Label,
+	MailThread as Thread,
+} from "mdxui";
+import * as React from "react";
+import { MailShell } from "../dashboard/mail-shell";
+
+/**
+ * MailZeroPage - Complete email page with internal state management.
+ *
+ * This is a self-contained page component that manages all email interactions
+ * internally. In a real app, this would integrate with your email API/service.
+ *
+ * Features:
+ * - Thread navigation (previous/next)
+ * - Thread selection and active state
+ * - Folder navigation
+ * - Star, archive, delete, spam actions
+ * - Snooze with preset times
+ * - Internal state management
+ *
+ * @example
+ * ```tsx
+ * <MailZeroPage
+ *   initialThreads={threads}
+ *   initialFolders={folders}
+ *   user={{ name: 'John', email: 'john@example.com.ai' }}
+ * />
+ * ```
+ */
+
+export interface MailZeroPageProps {
+	/** Initial threads to display */
+	initialThreads: Thread[];
+	/** Folders for sidebar */
+	initialFolders: Folder[];
+	/** Optional labels */
+	initialLabels?: Label[];
+	/** Initial active folder */
+	initialFolderId?: string;
+	/** User info for sidebar */
+	user?: {
+		name: string;
+		email: string;
+		avatar?: string;
+	};
+	/** Additional className */
+	className?: string;
+}
+
+function MailZeroPage({
+	initialThreads,
+	initialFolders,
+	initialLabels = [],
+	initialFolderId,
+	user,
+	className,
+}: MailZeroPageProps) {
+	// Thread state
+	const [threads, setThreads] = React.useState<Thread[]>(initialThreads);
+	const [activeThread, setActiveThread] = React.useState<Thread | undefined>();
+	const [activeIndex, setActiveIndex] = React.useState<number>(-1);
+	const [selectedThreadIds, setSelectedThreadIds] = React.useState<string[]>(
+		[],
+	);
+
+	// Folder state
+	const [activeFolderId, setActiveFolderId] = React.useState<
+		string | undefined
+	>(initialFolderId ?? initialFolders[0]?.id);
+
+	// Sidebar state
+	const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+
+	// Update threads when initialThreads changes
+	React.useEffect(() => {
+		setThreads(initialThreads);
+	}, [initialThreads]);
+
+	// Navigation helpers
+	const hasPreviousThread = activeIndex > 0;
+	const hasNextThread = activeIndex >= 0 && activeIndex < threads.length - 1;
+
+	// =========================================================================
+	// Thread Navigation
+	// =========================================================================
+
+	const handleThreadClick = (thread: Thread) => {
+		const index = threads.findIndex((t) => t.id === thread.id);
+		setActiveThread(thread);
+		setActiveIndex(index);
+	};
+
+	const handlePrevious = () => {
+		if (hasPreviousThread) {
+			const newIndex = activeIndex - 1;
+			setActiveIndex(newIndex);
+			setActiveThread(threads[newIndex]);
+		}
+	};
+
+	const handleNext = () => {
+		if (hasNextThread) {
+			const newIndex = activeIndex + 1;
+			setActiveIndex(newIndex);
+			setActiveThread(threads[newIndex]);
+		}
+	};
+
+	const handleClose = () => {
+		setActiveThread(undefined);
+		setActiveIndex(-1);
+	};
+
+	// =========================================================================
+	// Folder Navigation
+	// =========================================================================
+
+	const handleFolderClick = (folderId: string) => {
+		setActiveFolderId(folderId);
+		setActiveThread(undefined);
+		setActiveIndex(-1);
+		// In a real app: fetch threads for this folder
+		console.log("📂 Folder changed to:", folderId);
+	};
+
+	const handleSelectionChange = (ids: string[]) => {
+		setSelectedThreadIds(ids);
+	};
+
+	// =========================================================================
+	// Compose Actions
+	// =========================================================================
+
+	const handleCompose = () => {
+		// In a real app: open compose modal/page
+		console.log("📝 Compose new email");
+	};
+
+	const handleReply = (messageId: string) => {
+		// In a real app: open reply composer with messageId context
+		console.log("↩️ Reply to message:", messageId);
+	};
+
+	const handleReplyAll = (messageId: string) => {
+		// In a real app: open reply-all composer
+		console.log("↩️↩️ Reply-all to message:", messageId);
+	};
+
+	const handleForward = (messageId: string) => {
+		// In a real app: open forward composer
+		console.log("➡️ Forward message:", messageId);
+	};
+
+	// =========================================================================
+	// Thread Actions
+	// =========================================================================
+
+	const handleStar = () => {
+		if (activeThread) {
+			const updated = { ...activeThread, isStarred: !activeThread.isStarred };
+			setThreads((prev) =>
+				prev.map((t) => (t.id === activeThread.id ? updated : t)),
+			);
+			setActiveThread(updated);
+			console.log("⭐ Toggle star:", activeThread.id);
+		}
+	};
+
+	const handleStarThread = (threadId: string) => {
+		setThreads((prev) =>
+			prev.map((t) =>
+				t.id === threadId ? { ...t, isStarred: !t.isStarred } : t,
+			),
+		);
+		console.log("⭐ Toggle star:", threadId);
+	};
+
+	const handleArchive = () => {
+		if (activeThread) {
+			const threadId = activeThread.id;
+			setThreads((prev) => prev.filter((t) => t.id !== threadId));
+			// Navigate to next or close
+			if (hasNextThread) {
+				const newIndex = activeIndex;
+				const remainingThreads = threads.filter((t) => t.id !== threadId);
+				setActiveIndex(Math.min(newIndex, remainingThreads.length - 1));
+				setActiveThread(remainingThreads[Math.min(newIndex, remainingThreads.length - 1)]);
+			} else if (hasPreviousThread) {
+				handlePrevious();
+			} else {
+				handleClose();
+			}
+			console.log("📦 Archive thread:", threadId);
+		}
+	};
+
+	const handleDelete = () => {
+		if (activeThread) {
+			const threadId = activeThread.id;
+			setThreads((prev) => prev.filter((t) => t.id !== threadId));
+			if (hasNextThread) {
+				const newIndex = activeIndex;
+				const remainingThreads = threads.filter((t) => t.id !== threadId);
+				setActiveIndex(Math.min(newIndex, remainingThreads.length - 1));
+				setActiveThread(remainingThreads[Math.min(newIndex, remainingThreads.length - 1)]);
+			} else if (hasPreviousThread) {
+				handlePrevious();
+			} else {
+				handleClose();
+			}
+			console.log("🗑️ Delete thread:", threadId);
+		}
+	};
+
+	const handleSpam = () => {
+		if (activeThread) {
+			const threadId = activeThread.id;
+			setThreads((prev) => prev.filter((t) => t.id !== threadId));
+			handleClose();
+			console.log("⚠️ Mark spam:", threadId);
+		}
+	};
+
+	const handleSnooze = (until: string) => {
+		if (activeThread) {
+			const threadId = activeThread.id;
+			setThreads((prev) => prev.filter((t) => t.id !== threadId));
+			handleClose();
+			console.log("⏰ Snooze thread:", threadId, "until:", until);
+		}
+	};
+
+	const handleMove = (folderId: string) => {
+		if (activeThread) {
+			const threadId = activeThread.id;
+			setThreads((prev) => prev.filter((t) => t.id !== threadId));
+			handleClose();
+			console.log("📁 Move thread:", threadId, "to:", folderId);
+		}
+	};
+
+	const handleLabel = (labelIds: string[]) => {
+		if (activeThread) {
+			console.log("🏷️ Label thread:", activeThread.id, "with:", labelIds);
+			// In a real app: update thread labels
+		}
+	};
+
+	const handlePrint = () => {
+		window.print();
+	};
+
+	// =========================================================================
+	// Label Actions
+	// =========================================================================
+
+	const handleLabelClick = (labelId: string) => {
+		console.log("🏷️ Filter by label:", labelId);
+		// In a real app: filter threads by label
+	};
+
+	const handleCreateLabel = () => {
+		console.log("➕ Create new label");
+		// In a real app: open create label dialog
+	};
+
+	// =========================================================================
+	// Render
+	// =========================================================================
+
+	return (
+		<MailShell
+			// Sidebar props
+			folders={initialFolders}
+			activeFolderId={activeFolderId}
+			onFolderClick={handleFolderClick}
+			onCompose={handleCompose}
+			labels={initialLabels}
+			onLabelClick={handleLabelClick}
+			onCreateLabel={handleCreateLabel}
+			sidebarCollapsed={sidebarCollapsed}
+			onToggleSidebar={() => setSidebarCollapsed((prev) => !prev)}
+			user={user}
+			showUpgrade={false}
+			// Mail list props
+			threads={threads}
+			selectedThreadIds={selectedThreadIds}
+			activeThreadId={activeThread?.id}
+			selectionMode="single"
+			displayMode="comfortable"
+			isLoadingThreads={false}
+			hasMoreThreads={false}
+			onThreadClick={handleThreadClick}
+			onThreadSelectionChange={handleSelectionChange}
+			onStarThread={handleStarThread}
+			enableKeyboardNav={true}
+			showAvatars={true}
+			showSnippets={true}
+			emptyMessage="No messages in this folder"
+			// Thread display props
+			activeThread={activeThread}
+			showNavigation={true}
+			showThreadPanel={true}
+			hasPreviousThread={hasPreviousThread}
+			hasNextThread={hasNextThread}
+			onPrevious={handlePrevious}
+			onNext={handleNext}
+			onClose={handleClose}
+			onReply={handleReply}
+			onReplyAll={handleReplyAll}
+			onForward={handleForward}
+			onStar={handleStar}
+			onArchive={handleArchive}
+			onDelete={handleDelete}
+			onSpam={handleSpam}
+			onSnooze={handleSnooze}
+			onMove={handleMove}
+			onLabel={handleLabel}
+			onPrint={handlePrint}
+			// Layout props
+			defaultSidebarWidth={20}
+			defaultListWidth={35}
+			minSidebarWidth={12}
+			maxSidebarWidth={25}
+			minListWidth={20}
+			maxListWidth={50}
+			className={className}
+		/>
+	);
+}
+
+export { MailZeroPage };