src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance contacts management with sidebar and selection features

Browse Source
This commit is contained in:
Linus Rath
2026-03-16 15:15:58 +01:00
parent ed4be96706
commit 1b35c9e3d6
7 changed files with 410 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/contacts/__tests__/contact-list-item.test.tsx
+37 -8
View File
@@ -23,33 +23,62 @@ const _emptyContact: ContactCard = {
};
describe('ContactListItem', () => {
const baseProps = {
isSelected: false,
isChecked: false,
hasSelection: false,
density: 'regular' as const,
onClick: vi.fn(),
onCheckboxClick: vi.fn(),
};
it('renders contact name and email', () => {
render(<ContactListItem contact={contact} isSelected={false} onClick={vi.fn()} />);
render(<ContactListItem contact={contact} {...baseProps} />);
expect(screen.getByText('Alice Smith')).toBeInTheDocument();
expect(screen.getByText('alice@example.com')).toBeInTheDocument();
});
it('renders organization', () => {
render(<ContactListItem contact={contact} isSelected={false} onClick={vi.fn()} />);
it('renders organization in comfortable density', () => {
render(<ContactListItem contact={contact} {...baseProps} density="comfortable" />);
expect(screen.getByText('Acme Corp')).toBeInTheDocument();
});
it('hides organization in regular density', () => {
render(<ContactListItem contact={contact} {...baseProps} density="regular" />);
expect(screen.queryByText('Acme Corp')).not.toBeInTheDocument();
});
it('applies selected styling', () => {
const { container } = render(<ContactListItem contact={contact} isSelected={true} onClick={vi.fn()} />);
const button = container.querySelector('button');
expect(button?.className).toContain('bg-accent');
const { container } = render(<ContactListItem contact={contact} {...baseProps} isSelected={true} />);
const div = container.firstElementChild;
expect(div?.className).toContain('bg-blue-200');
});
it('shows email as display name when no name exists', () => {
render(<ContactListItem contact={noNameContact} isSelected={false} onClick={vi.fn()} />);
render(<ContactListItem contact={noNameContact} {...baseProps} />);
const matches = screen.getAllByText('nobody@example.com');
expect(matches.length).toBeGreaterThanOrEqual(1);
});
it('calls onClick when clicked', () => {
const onClick = vi.fn();
render(<ContactListItem contact={contact} isSelected={false} onClick={onClick} />);
render(<ContactListItem contact={contact} {...baseProps} onClick={onClick} />);
fireEvent.click(screen.getByText('Alice Smith'));
expect(onClick).toHaveBeenCalledOnce();
});
it('does not show checkbox when hasSelection is false', () => {
const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={false} />);
expect(container.querySelector('button')).not.toBeInTheDocument();
});
it('shows checkbox when hasSelection is true', () => {
const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={true} />);
expect(container.querySelector('button')).toBeInTheDocument();
});
it('hides avatar in extra-compact density', () => {
const { container } = render(<ContactListItem contact={contact} {...baseProps} density="extra-compact" />);
expect(container.querySelector('[data-testid="avatar"]') || container.querySelector('.rounded-full')).toBeNull();
});
});
components/contacts/__tests__/contact-list.test.tsx
+5 -23
View File
@@ -36,15 +36,15 @@ const defaultProps = {
onSearchChange: vi.fn(),
onSelectContact: vi.fn(),
onCreateNew: vi.fn(),
supportsSync: true,
categoryLabel: 'All Contacts',
selectedContactIds: new Set<string>(),
onToggleSelection: vi.fn(),
onSelectRangeContacts: vi.fn(),
onSelectAll: vi.fn(),
onClearSelection: vi.fn(),
onBulkDelete: vi.fn(),
onBulkAddToGroup: vi.fn(),
onBulkExport: vi.fn(),
groups: [],
};
describe('ContactList', () => {
@@ -70,32 +70,14 @@ describe('ContactList', () => {
expect(screen.getByText('empty_search')).toBeInTheDocument();
});
it('shows local mode banner when supportsSync is false', () => {
render(<ContactList {...defaultProps} supportsSync={false} />);
expect(screen.getByText('local_mode')).toBeInTheDocument();
});
it('hides local mode banner when supportsSync is true', () => {
render(<ContactList {...defaultProps} supportsSync={true} />);
expect(screen.queryByText('local_mode')).not.toBeInTheDocument();
});
it('calls onCreateNew when create button is clicked', () => {
const onCreateNew = vi.fn();
render(<ContactList {...defaultProps} onCreateNew={onCreateNew} />);
fireEvent.click(screen.getByText('create_new'));
expect(onCreateNew).toHaveBeenCalledOnce();
});
it('shows bulk action bar when contacts are selected', () => {
render(<ContactList {...defaultProps} selectedContactIds={new Set(['1'])} />);
expect(screen.getByText('bulk.delete')).toBeInTheDocument();
expect(screen.getByText('bulk.export')).toBeInTheDocument();
});
it('excludes groups from the list', () => {
render(<ContactList {...defaultProps} contacts={[alice, bob, group]} />);
expect(screen.getByText('Alice Smith')).toBeInTheDocument();
expect(screen.queryByText('Team')).not.toBeInTheDocument();
it('shows category label with count', () => {
render(<ContactList {...defaultProps} />);
expect(screen.getByText('All Contacts (2)')).toBeInTheDocument();
});
});
components/contacts/contact-list-item.tsx
+41 -11
View File
@@ -4,14 +4,20 @@ 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";
import { CheckSquare, Square } from "lucide-react";
import type { Density } from "@/stores/settings-store";
interface ContactListItemProps {
contact: ContactCard;
isSelected: boolean;
onClick: () => void;
isChecked: boolean;
hasSelection: boolean;
density: Density;
onClick: (e: React.MouseEvent) => void;
onCheckboxClick: (e: React.MouseEvent) => void;
}
export function ContactListItem({ contact, isSelected, onClick }: ContactListItemProps) {
export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, onClick, onCheckboxClick }: ContactListItemProps) {
const name = getContactDisplayName(contact);
const email = getContactPrimaryEmail(contact);
const org = contact.organizations
@@ -19,27 +25,51 @@ export function ContactListItem({ contact, isSelected, onClick }: ContactListIte
: undefined;
return (
<button
<div
onClick={onClick}
className={cn(
"w-full flex items-center px-4 text-left transition-colors",
"hover:bg-muted",
isSelected && "bg-accent text-accent-foreground"
"w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
isSelected
? "bg-blue-200 dark:bg-blue-900/50 shadow-sm"
: "bg-background hover:bg-muted hover:shadow-sm",
isChecked && !isSelected && "ring-2 ring-primary/20 bg-blue-100 dark:bg-blue-900/30",
)}
style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
style={{ gap: 'var(--density-item-gap)', paddingInline: '16px', paddingBlock: 'var(--density-item-py)' }}
>
<Avatar name={name} email={email} size="sm" />
{hasSelection && (
<button
onClick={onCheckboxClick}
className={cn(
"p-1 rounded flex-shrink-0 transition-all duration-200",
"hover:bg-muted/50 hover:scale-110",
"active:scale-95",
"animate-in fade-in zoom-in-95 duration-150",
isChecked && "text-primary"
)}
>
{isChecked ? (
<CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
) : (
<Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
)}
</button>
)}
{density !== 'extra-compact' && (
<Avatar name={name} email={email} size="sm" className="flex-shrink-0" />
)}
<div className="flex-1 min-w-0">
<div className="text-sm font-medium truncate">
{name || email || "—"}
</div>
{email && name && (
{density !== 'extra-compact' && email && name && (
<div className="text-xs text-muted-foreground truncate">{email}</div>
)}
{org && (
{density === 'comfortable' && org && (
<div className="text-xs text-muted-foreground truncate">{org}</div>
)}
</div>
</button>
</div>
);
}
components/contacts/contact-list.tsx
+79 -85
View File
@@ -2,13 +2,14 @@
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import { Search, Plus, BookUser, Info, Check, Trash2, Users, Download, X, UserPlus } from "lucide-react";
import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ContactListItem } from "./contact-list-item";
import { cn } from "@/lib/utils";
import type { ContactCard } from "@/lib/jmap/types";
import { getContactDisplayName } from "@/stores/contact-store";
import { useSettingsStore } from "@/stores/settings-store";
interface ContactListProps {
contacts: ContactCard[];
@@ -17,10 +18,11 @@ interface ContactListProps {
onSearchChange: (query: string) => void;
onSelectContact: (id: string) => void;
onCreateNew: () => void;
supportsSync: boolean;
categoryLabel: string;
className?: string;
selectedContactIds: Set<string>;
onToggleSelection: (id: string) => void;
onSelectRangeContacts: (id: string, sortedIds: string[]) => void;
onSelectAll: (ids: string[]) => void;
onClearSelection: () => void;
onBulkDelete: () => void;
@@ -35,10 +37,11 @@ export function ContactList({
onSearchChange,
onSelectContact,
onCreateNew,
supportsSync,
categoryLabel,
className,
selectedContactIds,
onToggleSelection,
onSelectRangeContacts,
onSelectAll,
onClearSelection,
onBulkDelete,
@@ -46,18 +49,27 @@ export function ContactList({
onBulkExport,
}: ContactListProps) {
const t = useTranslations("contacts");
const density = useSettingsStore((state) => state.density);
const filtered = useMemo(() => {
const individuals = contacts.filter(c => c.kind !== "group");
if (!searchQuery) return individuals;
if (!searchQuery) return contacts;
const lower = searchQuery.toLowerCase();
return individuals.filter((c) => {
return contacts.filter((c) => {
const name = getContactDisplayName(c).toLowerCase();
const emails = c.emails
? Object.values(c.emails).map((e) => e.address.toLowerCase())
: [];
const phones = c.phones
? Object.values(c.phones).map((p) => p.number?.toLowerCase() || "")
: [];
const org = c.organizations
? Object.values(c.organizations).map((o) => o.name?.toLowerCase() || "")
: [];
return (
name.includes(lower) || emails.some((e) => e.includes(lower))
name.includes(lower) ||
emails.some((e) => e.includes(lower)) ||
phones.some((p) => p.includes(lower)) ||
org.some((o) => o.includes(lower))
);
});
}, [contacts, searchQuery]);
@@ -70,41 +82,51 @@ export function ContactList({
});
}, [filtered]);
const sortedIds = useMemo(() => sorted.map(c => c.id), [sorted]);
const hasSelection = selectedContactIds.size > 0;
const allSelected = sorted.length > 0 && sorted.every(c => selectedContactIds.has(c.id));
return (
<div className={cn("flex flex-col h-full", className)}>
<div className="px-4 py-3 border-b border-border space-y-3">
{/* Search header */}
<div className="px-3 border-b border-border space-y-1.5" style={{ paddingBlock: 'var(--density-header-py)' }}>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">{t("title")}</h2>
<Button size="sm" onClick={onCreateNew}>
<Plus className="w-4 h-4 mr-1" />
{t("create_new")}
</Button>
<span className="text-xs font-medium text-muted-foreground truncate">
{categoryLabel} ({contacts.length})
</span>
</div>
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
<Input
placeholder={t("search_placeholder")}
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
className="pl-9"
className="pl-8 h-8 text-sm"
/>
</div>
{!supportsSync && (
<div className="flex items-start gap-2 text-xs text-muted-foreground bg-muted rounded px-3 py-2">
<Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
<span>{t("local_mode")}</span>
</div>
)}
</div>
{/* Bulk action bar */}
{hasSelection && (
<div className="px-3 py-2 border-b border-border bg-muted/50 flex items-center gap-2 flex-wrap">
<span className="text-xs font-medium text-muted-foreground">
<div className="px-3 py-1.5 border-b border-border bg-accent/30 flex items-center gap-2 flex-wrap">
<button
onClick={() => {
if (allSelected) {
onClearSelection();
} else {
onSelectAll(sortedIds);
}
}}
className="p-1 rounded hover:bg-muted/50 transition-colors"
>
{allSelected ? (
<CheckSquare className="w-4 h-4 text-primary" />
) : (
<Square className="w-4 h-4 text-muted-foreground" />
)}
</button>
<span className="text-xs font-medium text-foreground">
{t("bulk.selected", { count: selectedContactIds.size })}
</span>
<div className="flex-1" />
@@ -131,43 +153,19 @@ export function ContactList({
</div>
)}
{sorted.length > 0 && (
<div className="px-4 py-1.5 border-b border-border flex items-center">
<button
onClick={() => {
if (allSelected) {
onClearSelection();
} else {
onSelectAll(sorted.map(c => c.id));
}
}}
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
>
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center transition-colors",
allSelected
? "bg-primary border-primary text-primary-foreground"
: "border-border"
)}>
{allSelected && <Check className="w-2.5 h-2.5" />}
</div>
{t("bulk.select_all")}
</button>
</div>
)}
{/* Contact list */}
<div className="flex-1 overflow-y-auto">
{sorted.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full px-6 text-center">
{searchQuery ? (
<>
<Search className="w-12 h-12 mb-3 text-muted-foreground/30" />
<Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
<p className="text-sm font-medium text-foreground">{t("empty_search")}</p>
<p className="text-xs text-muted-foreground mt-1">{t("empty_search_hint")}</p>
<Button
variant="outline"
size="sm"
className="mt-4"
className="mt-3"
onClick={() => onSearchChange("")}
>
{t("clear_search")}
@@ -175,47 +173,43 @@ export function ContactList({
</>
) : (
<>
<BookUser className="w-12 h-12 mb-3 text-muted-foreground/30" />
<BookUser className="w-10 h-10 mb-3 text-muted-foreground/30" />
<p className="text-sm font-medium text-foreground">{t("empty_state_title")}</p>
<p className="text-xs text-muted-foreground mt-1">{t("empty_state_subtitle")}</p>
<div className="flex gap-2 mt-4">
<Button size="sm" onClick={onCreateNew}>
<UserPlus className="w-4 h-4 mr-1.5" />
{t("create_new")}
</Button>
</div>
<Button size="sm" className="mt-3" onClick={onCreateNew}>
<UserPlus className="w-4 h-4 mr-1.5" />
{t("create_new")}
</Button>
</>
)}
</div>
) : (
<div className="divide-y divide-border">
<div>
{sorted.map((contact) => (
<div key={contact.id} className="flex items-center">
<button
onClick={(e) => {
e.stopPropagation();
<ContactListItem
key={contact.id}
contact={contact}
isSelected={contact.id === selectedContactId}
isChecked={selectedContactIds.has(contact.id)}
hasSelection={hasSelection}
density={density}
onClick={(e) => {
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
onToggleSelection(contact.id);
}}
className="pl-4 pr-1 flex-shrink-0"
style={{ paddingBlock: 'var(--density-item-py)' }}
>
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center transition-colors",
selectedContactIds.has(contact.id)
? "bg-primary border-primary text-primary-foreground"
: "border-border hover:border-muted-foreground"
)}>
{selectedContactIds.has(contact.id) && <Check className="w-2.5 h-2.5" />}
</div>
</button>
<div className="flex-1 min-w-0">
<ContactListItem
contact={contact}
isSelected={contact.id === selectedContactId}
onClick={() => onSelectContact(contact.id)}
/>
</div>
</div>
} else if (e.shiftKey) {
e.preventDefault();
onSelectRangeContacts(contact.id, sortedIds);
} else {
if (hasSelection) onClearSelection();
onSelectContact(contact.id);
}
}}
onCheckboxClick={(e) => {
e.stopPropagation();
onToggleSelection(contact.id);
}}
/>
))}
</div>
)}
components/contacts/contacts-sidebar.tsx
+134
View File
@@ -0,0 +1,134 @@
"use client";
import { useMemo } from "react";
import { useTranslations } from "next-intl";
import { BookUser, Users, Plus, UserPlus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { ContactCard } from "@/lib/jmap/types";
import { getContactDisplayName } from "@/stores/contact-store";
export type ContactCategory = "all" | { groupId: string };
interface ContactsSidebarProps {
groups: ContactCard[];
individuals: ContactCard[];
activeCategory: ContactCategory;
onSelectCategory: (category: ContactCategory) => void;
onCreateGroup: () => void;
onCreateContact: () => void;
className?: string;
}
export function ContactsSidebar({
groups,
individuals,
activeCategory,
onSelectCategory,
onCreateGroup,
onCreateContact,
className,
}: ContactsSidebarProps) {
const t = useTranslations("contacts");
const sortedGroups = useMemo(() => {
return [...groups].sort((a, b) =>
getContactDisplayName(a).localeCompare(getContactDisplayName(b))
);
}, [groups]);
const isAllActive = activeCategory === "all";
return (
<div className={cn("flex flex-col h-full bg-secondary", className)}>
{/* Header */}
<div className="px-3 border-b border-border flex items-center justify-between" style={{ paddingBlock: 'var(--density-header-py)' }}>
<span className="text-sm font-semibold truncate">{t("title")}</span>
<Button size="icon" variant="ghost" onClick={onCreateContact} className="h-7 w-7 flex-shrink-0">
<UserPlus className="w-4 h-4" />
</Button>
</div>
{/* Categories */}
<div className="flex-1 overflow-y-auto py-1">
{/* All contacts */}
<button
onClick={() => onSelectCategory("all")}
className={cn(
"w-full flex items-center gap-2 px-3 text-sm transition-colors",
isAllActive
? "bg-accent text-accent-foreground font-medium"
: "text-foreground/80 hover:bg-muted"
)}
style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
>
<BookUser className="w-4 h-4 flex-shrink-0" />
<span className="truncate">{t("tabs.all")}</span>
<span className="ml-auto text-xs text-muted-foreground tabular-nums">
{individuals.length}
</span>
</button>
{/* Groups section */}
{(sortedGroups.length > 0) && (
<div className="mt-2">
<div className="flex items-center justify-between px-3 py-1">
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{t("tabs.groups")}
</span>
<Button size="icon" variant="ghost" onClick={onCreateGroup} className="h-5 w-5">
<Plus className="w-3 h-3" />
</Button>
</div>
{sortedGroups.map((group) => {
const isActive = typeof activeCategory === "object" && activeCategory.groupId === group.id;
const memberCount = group.members
? Object.values(group.members).filter(Boolean).length
: 0;
return (
<button
key={group.id}
onClick={() => onSelectCategory({ groupId: group.id })}
className={cn(
"w-full flex items-center gap-2 px-3 text-sm transition-colors",
isActive
? "bg-accent text-accent-foreground font-medium"
: "text-foreground/80 hover:bg-muted"
)}
style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
>
<Users className="w-4 h-4 flex-shrink-0" />
<span className="truncate">{getContactDisplayName(group)}</span>
<span className="ml-auto text-xs text-muted-foreground tabular-nums">
{memberCount}
</span>
</button>
);
})}
</div>
)}
{sortedGroups.length === 0 && (
<div className="mt-2 px-3">
<div className="flex items-center justify-between py-1">
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{t("tabs.groups")}
</span>
</div>
<Button
size="sm"
variant="ghost"
onClick={onCreateGroup}
className="w-full justify-start text-xs text-muted-foreground h-7"
>
<Plus className="w-3 h-3 mr-1.5" />
{t("groups.create")}
</Button>
</div>
)}
</div>
</div>
);
}