98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Users, Plus } 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";
|
|
|
|
interface ContactGroupListProps {
|
|
groups: ContactCard[];
|
|
selectedGroupId: string | null;
|
|
onSelectGroup: (id: string) => void;
|
|
onCreateGroup: () => void;
|
|
searchQuery: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function ContactGroupList({
|
|
groups,
|
|
selectedGroupId,
|
|
onSelectGroup,
|
|
onCreateGroup,
|
|
searchQuery,
|
|
className,
|
|
}: ContactGroupListProps) {
|
|
const t = useTranslations("contacts");
|
|
|
|
const filtered = useMemo(() => {
|
|
if (!searchQuery) return groups;
|
|
const lower = searchQuery.toLowerCase();
|
|
return groups.filter((g) =>
|
|
getContactDisplayName(g).toLowerCase().includes(lower)
|
|
);
|
|
}, [groups, searchQuery]);
|
|
|
|
const sorted = useMemo(() => {
|
|
return [...filtered].sort((a, b) =>
|
|
getContactDisplayName(a).localeCompare(getContactDisplayName(b))
|
|
);
|
|
}, [filtered]);
|
|
|
|
return (
|
|
<div className={cn("flex flex-col", className)}>
|
|
<div className="px-4 py-2 border-b border-border">
|
|
<Button size="sm" variant="outline" onClick={onCreateGroup} className="w-full">
|
|
<Plus className="w-4 h-4 me-1" />
|
|
{t("groups.create")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{sorted.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground px-4">
|
|
<Users className="w-10 h-10 mb-3 opacity-30" />
|
|
<p className="text-sm">
|
|
{searchQuery ? t("empty_search") : t("groups.empty")}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border">
|
|
{sorted.map((group) => {
|
|
const memberCount = group.members
|
|
? Object.values(group.members).filter(Boolean).length
|
|
: 0;
|
|
return (
|
|
<button
|
|
key={group.id}
|
|
onClick={() => onSelectGroup(group.id)}
|
|
className={cn(
|
|
"w-full flex items-center px-4 text-start transition-colors",
|
|
"hover:bg-muted",
|
|
group.id === selectedGroupId && "bg-accent text-accent-foreground"
|
|
)}
|
|
style={{ gap: 'var(--density-item-gap)', paddingBlock: 'var(--density-item-py)' }}
|
|
>
|
|
<div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
|
|
<Users className="w-4 h-4 text-primary" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium truncate">
|
|
{getContactDisplayName(group)}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{t("groups.member_count", { count: memberCount })}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|