Email List

1"use client";
2 
3import { format } from "date-fns";
4import { useEmailsStore } from "@/store/emails-store";
5import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
6import { VerifiedIcon } from "@/components/ui/verified-icon";
7import { cn } from "@/lib/utils";
8 
9interface EmailListProps {
10  onEmailClick?: (emailId: string) => void;
11}
12 
13export function EmailList({ onEmailClick }: EmailListProps) {
14  const { emails, selectedEmailId, selectEmail } = useEmailsStore();
15 
16  const handleEmailClick = (emailId: string) => {
17    selectEmail(emailId);
18    onEmailClick?.(emailId);
19  };
20 
21  if (emails.length === 0) {
22    return (
23      <div className="flex h-full items-center justify-center bg-card">
24        <div className="text-center text-muted-foreground">
25          <p>No emails found</p>
26        </div>
27      </div>
28    );
29  }
30 
31  return (
32    <div className="flex h-full flex-col overflow-hidden bg-card">
33      <div className="flex items-center justify-between border-b border-border px-5 py-3">
34        <div className="flex items-center gap-2">
35          <div className="size-3.5 rounded border border-border" />
36          <p className="text-sm font-medium text-foreground">Inbox</p>
37        </div>
38      </div>
39 
40      <div className="flex-1 overflow-y-auto">
41        {emails.map((email, index) => {
42          const isSelected = selectedEmailId === email.id;
43          const isRead = email.read;
44 
45          return (
46            <button
47              key={email.id}
48              onClick={() => handleEmailClick(email.id)}
49              className={cn(
50                "flex w-full gap-2.5 border-b border-border p-4 text-left transition-colors hover:bg-muted/70",
51                isSelected && "bg-muted",
52                !isRead && "bg-muted/50"
53              )}
54            >
55              <div className={cn("flex w-full gap-2.5")}>
56                <Avatar className="mt-1.5 size-7 shrink-0">
57                  <AvatarImage src={email.from.avatar} alt={email.from.name} />
58                  <AvatarFallback>{email.from.name.charAt(0)}</AvatarFallback>
59                </Avatar>
60 
61                <div className="flex-1 overflow-hidden">
62                  <div className="flex items-start justify-between gap-2.5">
63                    <div className="flex-1 overflow-hidden">
64                      <div className="flex items-center gap-1">
65                        <p
66                          className={cn(
67                            "truncate text-[14px] tracking-tight",
68// … truncated