Linus Rath
838de8e5da
Rename "List Density" to "Density" and apply spacing changes globally instead of only to email list item heights. - Replace hardcoded padding/gap values with CSS custom properties (--density-item-py, --density-item-gap, --density-header-py, --density-card-p, --density-sidebar-py) set via JS on :root - Apply density-responsive spacing to email list items, thread views, email viewer, sidebar, navigation rail, contacts, and calendar - Use inline styles instead of Tailwind arbitrary value classes to avoid Turbopack compilation hangs - Rename listDensity → density in store, types, and components - Add persist migration (v1 → v2) and onRehydrateStorage callback - Update all 8 locale files with broadened labels/descriptions
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
import type { ContactCard } from "@/lib/jmap/types";
|
|
import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
|
|
|
|
interface ContactListItemProps {
|
|
contact: ContactCard;
|
|
isSelected: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function ContactListItem({ contact, isSelected, onClick }: ContactListItemProps) {
|
|
const name = getContactDisplayName(contact);
|
|
const email = getContactPrimaryEmail(contact);
|
|
const org = contact.organizations
|
|
? Object.values(contact.organizations)[0]?.name
|
|
: undefined;
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
"w-full flex items-center px-4 text-left transition-colors",
|
|
"hover:bg-muted",
|
|
isSelected && "bg-accent text-accent-foreground"
|
|
)}
|
|
style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
|
|
>
|
|
<Avatar name={name} email={email} size="sm" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium truncate">
|
|
{name || email || "—"}
|
|
</div>
|
|
{email && name && (
|
|
<div className="text-xs text-muted-foreground truncate">{email}</div>
|
|
)}
|
|
{org && (
|
|
<div className="text-xs text-muted-foreground truncate">{org}</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|