Emails Template

1"use client";
2 
3import { useEffect, useState, useRef } from "react";
4import { EmailsVerticalSidebar } from "@/components/emails/emails-vertical-sidebar";
5import { EmailsVerticalSidebarMobile } from "@/components/emails/emails-vertical-sidebar-mobile";
6import { EmailsHeader } from "@/components/emails/emails-header";
7import { EmailsHorizontalNav } from "@/components/emails/emails-horizontal-nav";
8import { EmailList } from "@/components/emails/email-list";
9import { EmailDetail } from "@/components/emails/email-detail";
10import { Drawer, DrawerContent } from "@/components/ui/drawer";
11import { Sheet, SheetContent } from "@/components/ui/sheet";
12import { TooltipProvider } from "@/components/ui/tooltip";
13import { useEmailsStore } from "@/store/emails-store";
14import { useIsMobile } from "@/hooks/use-mobile";
15 
16export default function EmailsPage() {
17  const { emails, selectedEmailId, selectEmail, clearSelectedEmail } =
18    useEmailsStore();
19  const isMobile = useIsMobile();
20  const [drawerOpen, setDrawerOpen] = useState(false);
21  const [sidebarOpen, setSidebarOpen] = useState(false);
22  const hasInitializedRef = useRef(false);
23 
24  useEffect(() => {
25    // Select first email on desktop only on initial load
26    // Wait for isMobile to be initialized (not undefined)
27    if (
28      isMobile !== undefined &&
29      !isMobile &&
30      emails.length > 0 &&
31      !selectedEmailId &&
32      !hasInitializedRef.current
33    ) {
34      selectEmail(emails[0].id);
35      hasInitializedRef.current = true;
36    }
37  }, [emails, selectedEmailId, selectEmail, isMobile]);
38 
39  const handleEmailClick = (emailId: string) => {
40    if (isMobile) {
41      selectEmail(emailId);
42      setDrawerOpen(true);
43    }
44  };
45 
46  const handleDrawerClose = (open: boolean) => {
47    setDrawerOpen(open);
48    if (!open) {
49      clearSelectedEmail();
50    }
51  };
52 
53  return (
54    <TooltipProvider>
55      <div className="flex h-screen overflow-hidden bg-background">
56        <div className="hidden md:block">
57          <EmailsVerticalSidebar />
58        </div>
59 
60        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
61          <SheetContent
62            side="left"
63            className="w-[240px] p-0 border-none [&>button]:hidden"
64          >
65            <EmailsVerticalSidebarMobile
66              onItemClick={() => setSidebarOpen(false)}
67            />
68          </SheetContent>
69        </Sheet>
70 
71        <div className="flex flex-1 flex-col overflow-hidden">
72// … truncated