@mdxui/zero 6.0.0

package/src/dashboard/mail-sidebar.tsx

@@ -0,0 +1,388 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@mdxui/primitives/avatar";
+import { Badge } from "@mdxui/primitives/badge";
+import { Button } from "@mdxui/primitives/button";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@mdxui/primitives/collapsible";
+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,
+	Calendar,
+	ChevronRight,
+	Clock,
+	File,
+	Inbox,
+	PenSquare,
+	Plus,
+	Send,
+	Settings,
+	Sparkles,
+	Star,
+	Tag,
+	Trash2,
+} from "lucide-react";
+import type { Folder, MailLabel as Label, MailSidebarProps } from "mdxui";
+import * as React from "react";
+
+// Default folder icons
+const FOLDER_ICONS: Record<
+	string,
+	React.ComponentType<{ className?: string }>
+> = {
+	inbox: Inbox,
+	sent: Send,
+	drafts: File,
+	spam: AlertOctagon,
+	trash: Trash2,
+	archive: Archive,
+	starred: Star,
+	important: Star,
+	snoozed: Clock,
+	scheduled: Calendar,
+	all: Inbox,
+	custom: Tag,
+};
+
+/**
+ * FolderItem - Individual folder in the sidebar.
+ */
+function FolderItem({
+	folder,
+	isActive,
+	isCollapsed,
+	onClick,
+}: {
+	folder: Folder;
+	isActive: boolean;
+	isCollapsed: boolean;
+	onClick?: () => void;
+}) {
+	const Icon = FOLDER_ICONS[folder.type] || FOLDER_ICONS.custom;
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={onClick}
+						className={cn(
+							"flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+							isActive
+								? "bg-accent text-accent-foreground"
+								: "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+						)}
+					>
+						<Icon className="size-4 shrink-0" />
+						{!isCollapsed && (
+							<>
+								<span className="flex-1 truncate text-left">{folder.name}</span>
+								{folder.unreadCount > 0 && (
+									<Badge
+										variant="secondary"
+										className="ml-auto shrink-0 text-xs"
+									>
+										{folder.unreadCount > 99 ? "99+" : folder.unreadCount}
+									</Badge>
+								)}
+							</>
+						)}
+					</button>
+				</TooltipTrigger>
+				{isCollapsed && (
+					<TooltipContent side="right">
+						{folder.name}
+						{folder.unreadCount > 0 && ` (${folder.unreadCount})`}
+					</TooltipContent>
+				)}
+			</Tooltip>
+		</TooltipProvider>
+	);
+}
+
+/**
+ * LabelItem - Individual label in the sidebar.
+ */
+function LabelItem({
+	label,
+	isCollapsed,
+	onClick,
+}: {
+	label: Label;
+	isCollapsed: boolean;
+	onClick?: () => void;
+}) {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={onClick}
+						className="text-muted-foreground hover:bg-accent/50 hover:text-foreground flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors"
+					>
+						<div
+							className="size-3 shrink-0 rounded-full"
+							style={{ backgroundColor: label.color || "#6b7280" }}
+						/>
+						{!isCollapsed && (
+							<span className="flex-1 truncate text-left">{label.name}</span>
+						)}
+					</button>
+				</TooltipTrigger>
+				{isCollapsed && (
+					<TooltipContent side="right">{label.name}</TooltipContent>
+				)}
+			</Tooltip>
+		</TooltipProvider>
+	);
+}
+
+/**
+ * MailSidebar - Email app sidebar with folder navigation.
+ *
+ * Features:
+ * - Folder navigation with unread counts
+ * - Compose button
+ * - Labels section
+ * - User info
+ * - Collapsible state
+ * - Upgrade CTA
+ */
+function MailSidebar({
+	folders,
+	activeFolderId,
+	onFolderClick,
+	onCompose,
+	labels,
+	onLabelClick,
+	onCreateLabel,
+	isCollapsed = false,
+	onToggleCollapse,
+	user,
+	showUpgrade = false,
+	onUpgradeClick,
+	className,
+}: MailSidebarProps) {
+	const [labelsExpanded, setLabelsExpanded] = React.useState(true);
+
+	// Group folders by type
+	const primaryFolders = folders.filter((f) =>
+		["inbox", "starred", "snoozed", "sent", "drafts"].includes(f.type),
+	);
+	const secondaryFolders = folders.filter((f) =>
+		["spam", "trash", "archive", "all"].includes(f.type),
+	);
+	const customFolders = folders.filter((f) => f.type === "custom");
+
+	return (
+		<div
+			data-slot="mail-sidebar"
+			className={cn(
+				"bg-background flex h-full flex-col border-r transition-all duration-200",
+				isCollapsed ? "w-16" : "w-64",
+				className,
+			)}
+		>
+			{/* Header */}
+			<div className="flex items-center justify-between p-4">
+				{!isCollapsed && (
+					<div className="flex items-center gap-2">
+						<Sparkles className="text-primary size-5" />
+						<span className="font-semibold">Zero Mail</span>
+					</div>
+				)}
+				{onToggleCollapse && (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="size-8 shrink-0"
+						onClick={onToggleCollapse}
+					>
+						<ChevronRight
+							className={cn(
+								"size-4 transition-transform",
+								!isCollapsed && "rotate-180",
+							)}
+						/>
+					</Button>
+				)}
+			</div>
+
+			{/* Compose Button */}
+			<div className="px-3 pb-4">
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								onClick={onCompose}
+								className={cn("w-full", isCollapsed && "px-0")}
+							>
+								<PenSquare className="size-4" />
+								{!isCollapsed && <span className="ml-2">Compose</span>}
+							</Button>
+						</TooltipTrigger>
+						{isCollapsed && (
+							<TooltipContent side="right">Compose</TooltipContent>
+						)}
+					</Tooltip>
+				</TooltipProvider>
+			</div>
+
+			{/* Folders */}
+			<ScrollArea className="flex-1">
+				<div className="space-y-1 px-3">
+					{/* Primary Folders */}
+					{primaryFolders.map((folder) => (
+						<FolderItem
+							key={folder.id}
+							folder={folder}
+							isActive={activeFolderId === folder.id}
+							isCollapsed={isCollapsed}
+							onClick={() => onFolderClick?.(folder.id)}
+						/>
+					))}
+
+					{secondaryFolders.length > 0 && (
+						<>
+							<Separator className="my-3" />
+							{secondaryFolders.map((folder) => (
+								<FolderItem
+									key={folder.id}
+									folder={folder}
+									isActive={activeFolderId === folder.id}
+									isCollapsed={isCollapsed}
+									onClick={() => onFolderClick?.(folder.id)}
+								/>
+							))}
+						</>
+					)}
+
+					{customFolders.length > 0 && (
+						<>
+							<Separator className="my-3" />
+							{customFolders.map((folder) => (
+								<FolderItem
+									key={folder.id}
+									folder={folder}
+									isActive={activeFolderId === folder.id}
+									isCollapsed={isCollapsed}
+									onClick={() => onFolderClick?.(folder.id)}
+								/>
+							))}
+						</>
+					)}
+
+					{/* Labels Section */}
+					{labels && labels.length > 0 && (
+						<>
+							<Separator className="my-3" />
+							<Collapsible
+								open={labelsExpanded}
+								onOpenChange={setLabelsExpanded}
+							>
+								<CollapsibleTrigger asChild>
+									<button
+										type="button"
+										className="text-muted-foreground hover:text-foreground flex w-full items-center justify-between px-3 py-2 text-xs font-medium uppercase tracking-wider"
+									>
+										{!isCollapsed && "Labels"}
+										<ChevronRight
+											className={cn(
+												"size-4 transition-transform",
+												labelsExpanded && "rotate-90",
+											)}
+										/>
+									</button>
+								</CollapsibleTrigger>
+								<CollapsibleContent className="space-y-1">
+									{labels.map((label) => (
+										<LabelItem
+											key={label.id}
+											label={label}
+											isCollapsed={isCollapsed}
+											onClick={() => onLabelClick?.(label.id)}
+										/>
+									))}
+									{onCreateLabel && !isCollapsed && (
+										<button
+											type="button"
+											onClick={onCreateLabel}
+											className="text-muted-foreground hover:text-foreground flex w-full items-center gap-3 px-3 py-2 text-sm"
+										>
+											<Plus className="size-4" />
+											Create label
+										</button>
+									)}
+								</CollapsibleContent>
+							</Collapsible>
+						</>
+					)}
+				</div>
+			</ScrollArea>
+
+			{/* Footer */}
+			<div className="border-t p-3">
+				{/* Upgrade Card */}
+				{showUpgrade && !isCollapsed && (
+					<button
+						type="button"
+						onClick={onUpgradeClick}
+						className="bg-gradient-to-r from-primary/10 to-primary/5 hover:from-primary/20 hover:to-primary/10 mb-3 w-full rounded-lg p-3 text-left transition-colors"
+					>
+						<div className="flex items-center gap-2">
+							<Sparkles className="text-primary size-4" />
+							<span className="text-sm font-medium">Upgrade to Pro</span>
+						</div>
+						<p className="text-muted-foreground mt-1 text-xs">
+							Get AI features and more storage
+						</p>
+					</button>
+				)}
+
+				{/* User Info */}
+				{user && (
+					<div className="flex items-center gap-3">
+						<Avatar className="size-8">
+							<AvatarImage src={user.avatar} alt={user.name} />
+							<AvatarFallback>
+								{user.name
+									.split(" ")
+									.map((n) => n[0])
+									.join("")
+									.toUpperCase()
+									.slice(0, 2)}
+							</AvatarFallback>
+						</Avatar>
+						{!isCollapsed && (
+							<div className="min-w-0 flex-1">
+								<div className="truncate text-sm font-medium">{user.name}</div>
+								<div className="text-muted-foreground truncate text-xs">
+									{user.email}
+								</div>
+							</div>
+						)}
+						{!isCollapsed && (
+							<Button variant="ghost" size="icon" className="size-8 shrink-0">
+								<Settings className="size-4" />
+							</Button>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export { MailSidebar };

package/src/index.ts

@@ -0,0 +1,24 @@
+/**
+ * @mdxui/zero - Zero Email Components
+ *
+ * AI-powered email client components for mdxui, ported from github.com/Mail-0/Zero.
+ * Provides a complete email client UI including:
+ * - Mail list and thread display
+ * - Email composition with AI assistance
+ * - Landing page components
+ * - Dashboard/app shell
+ */
+
+// Shared UI components
+export * from "./components";
+
+// Compose components
+export * from "./compose";
+// Dashboard/shell components
+export * from "./dashboard";
+// Landing page components
+export * from "./landing";
+// Mail components
+export * from "./mail";
+// Page compositions (complete examples with state management)
+export * from "./pages";

package/src/landing/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Landing Page Components
+ *
+ * Marketing and landing page components from 0.email:
+ * - ZeroHero: AI-powered email hero section
+ * - FeatureTabs: Tab-based feature showcase
+ * - SpeedShowcase: Speed/efficiency demo
+ * - FeatureCards: Three-column feature grid
+ * - ChatDemo: AI chat interface demo
+ * - ZeroNavigation: Header navigation
+ * - ZeroFooter: Footer component
+ */
+
+// Components will be added as they are ported from Zero
+// export { ZeroHero } from './zero-hero'
+// export { FeatureTabs } from './feature-tabs'
+// export { SpeedShowcase } from './speed-showcase'
+// export { FeatureCards } from './feature-cards'
+// export { ChatDemo } from './chat-demo'
+// export { ZeroNavigation } from './zero-navigation'
+// export { ZeroFooter } from './zero-footer'
+
+// Placeholder export to make this a valid module
+export {};

package/src/mail/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Mail Components
+ *
+ * Core email viewing and management components:
+ * - MailList: Virtualized thread list with selection
+ * - MailItem: Individual thread item in list
+ * - ThreadDisplay: Email thread viewer with actions
+ * - MessageView: Individual message rendering
+ * - MailSkeleton: Loading states
+ */
+
+export { MailItem } from "./mail-item";
+export { MailList, MailSkeleton } from "./mail-list";
+export { MessageHeader, MessageView } from "./message-view";
+export { ThreadDisplay } from "./thread-display";