feat: implement account switcher component and state management

- Add AccountSwitcher component for managing user accounts with UI for switching, adding, and logging out.
- Create account state manager to handle snapshots of account-specific states for efficient switching.
- Introduce utility functions for account management, including ID generation and avatar color assignment.
- Implement Zustand store for account management, supporting addition, removal, and state retrieval of accounts.

components/layout/sidebar.tsx

@@ -39,6 +39,7 @@ import { toast } from "@/stores/toast-store";
 import { debug } from "@/lib/debug";
 import { useConfig } from "@/hooks/use-config";
 import { useThemeStore } from "@/stores/theme-store";
+import { AccountSwitcher } from "./account-switcher";
 
 interface SidebarProps {
   mailboxes: Mailbox[];
@@ -485,15 +486,8 @@ export function Sidebar({
           {isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
         </Button>
 
-        {!isCollapsed && primaryIdentity && (
-          <div className="min-w-0">
-            <p className="text-sm font-medium text-foreground truncate" title={primaryIdentity.name}>
-              {primaryIdentity.name}
-            </p>
-            <p className="text-xs text-muted-foreground truncate" title={primaryIdentity.email}>
-              {primaryIdentity.email}
-            </p>
-          </div>
+        {!isCollapsed && (
+          <AccountSwitcher variant="expanded" className="flex-1" />
         )}
       </div>