From 468a8bdf7aa37a475ddffc22769a3674097cab92 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 23 Jan 2026 19:33:29 +0000
Subject: [PATCH] feat(fakemui): add email navigation components

---
 .../email/navigation/AccountTabs.tsx          | 54 ++++++++++++++++++
 .../email/navigation/FolderNavigation.tsx     | 56 +++++++++++++++++++
 .../components/email/navigation/index.ts      |  2 +
 3 files changed, 112 insertions(+)
 create mode 100644 fakemui/react/components/email/navigation/AccountTabs.tsx
 create mode 100644 fakemui/react/components/email/navigation/FolderNavigation.tsx
 create mode 100644 fakemui/react/components/email/navigation/index.ts

diff --git a/fakemui/react/components/email/navigation/AccountTabs.tsx b/fakemui/react/components/email/navigation/AccountTabs.tsx
new file mode 100644
index 000000000..f584370a2
--- /dev/null
+++ b/fakemui/react/components/email/navigation/AccountTabs.tsx
@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react'
+import { Tabs, Tab, TabsProps } from '../..'
+import { useAccessible } from '@metabuilder/fakemui/hooks'
+
+export interface EmailAccount {
+  id: string
+  accountName: string
+  emailAddress: string
+  unreadCount?: number
+}
+
+export interface AccountTabsProps extends Omit<TabsProps, 'onChange'> {
+  accounts: EmailAccount[]
+  selectedAccountId?: string
+  onSelectAccount?: (accountId: string) => void
+  testId?: string
+}
+
+export const AccountTabs = forwardRef<HTMLDivElement, AccountTabsProps>(
+  ({ accounts, selectedAccountId, onSelectAccount, testId: customTestId, ...props }, ref) => {
+    const accessible = useAccessible({
+      feature: 'email',
+      component: 'account-tabs',
+      identifier: customTestId || 'accounts'
+    })
+
+    return (
+      <Tabs
+        ref={ref}
+        value={selectedAccountId || (accounts[0]?.id ?? '')}
+        onChange={(_, value) => onSelectAccount?.(value as string)}
+        {...accessible}
+        {...props}
+      >
+        {accounts.map((account) => (
+          <Tab
+            key={account.id}
+            label={
+              <span className="account-tab">
+                <span className="account-name">{account.accountName}</span>
+                {account.unreadCount ? (
+                  <span className="unread-badge">{account.unreadCount}</span>
+                ) : null}
+              </span>
+            }
+            value={account.id}
+          />
+        ))}
+      </Tabs>
+    )
+  }
+)
+
+AccountTabs.displayName = 'AccountTabs'
diff --git a/fakemui/react/components/email/navigation/FolderNavigation.tsx b/fakemui/react/components/email/navigation/FolderNavigation.tsx
new file mode 100644
index 000000000..896762dff
--- /dev/null
+++ b/fakemui/react/components/email/navigation/FolderNavigation.tsx
@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps, Button } from '../..'
+import { useAccessible } from '@metabuilder/fakemui/hooks'
+
+export interface FolderNavigationItem {
+  id: string
+  label: string
+  icon?: string
+  unreadCount?: number
+  isActive?: boolean
+}
+
+export interface FolderNavigationProps extends BoxProps {
+  items: FolderNavigationItem[]
+  onNavigate?: (itemId: string) => void
+  testId?: string
+}
+
+export const FolderNavigation = forwardRef<HTMLDivElement, FolderNavigationProps>(
+  ({ items, onNavigate, testId: customTestId, ...props }, ref) => {
+    const accessible = useAccessible({
+      feature: 'email',
+      component: 'folder-nav',
+      identifier: customTestId || 'folders'
+    })
+
+    return (
+      <Box
+        ref={ref}
+        className="folder-navigation"
+        {...accessible}
+        {...props}
+      >
+        <nav className="folder-nav-list">
+          {items.map((item) => (
+            <Button
+              key={item.id}
+              variant={item.isActive ? 'primary' : 'ghost'}
+              fullWidth
+              className="folder-nav-item"
+              onClick={() => onNavigate?.(item.id)}
+            >
+              {item.icon && <span className="folder-icon">{item.icon}</span>}
+              <span className="folder-label">{item.label}</span>
+              {item.unreadCount ? (
+                <span className="unread-count">{item.unreadCount}</span>
+              ) : null}
+            </Button>
+          ))}
+        </nav>
+      </Box>
+    )
+  }
+)
+
+FolderNavigation.displayName = 'FolderNavigation'
diff --git a/fakemui/react/components/email/navigation/index.ts b/fakemui/react/components/email/navigation/index.ts
new file mode 100644
index 000000000..4832b3037
--- /dev/null
+++ b/fakemui/react/components/email/navigation/index.ts
@@ -0,0 +1,2 @@
+export { AccountTabs, type AccountTabsProps, type EmailAccount } from './AccountTabs'
+export { FolderNavigation, type FolderNavigationProps, type FolderNavigationItem } from './FolderNavigation'