feat: group detail view modal

[kevinrutledge]

What needs to be built?

A dialog modal that displays a contact group's details in read-only mode. Opens when a user clicks a group card on the groups list page. Shows the group name, description, and a row of member avatars with overflow count. An "Edit" button in the top-right allows the owner or admin to switch to the edit modal.

Design reference

Figma — Paso Food Co-Op

Documentation

Existing patterns:

• src/components/ui/dialog.tsx — shadcn Dialog (Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose)
• src/components/ui/avatar.tsx — shadcn Avatar with AvatarFallback
• src/components/ui/button.tsx — shadcn Button
• src/utils/avatar.ts — getInitials() and getAvatarColor()
• src/services/contact-group.ts — GroupWithEnrichedMembers type (has members with ownername)

Official docs:

• shadcn Dialog
• Lucide Icons

Technical notes

Create the component at src/components/groups/group-detail-view-modal.tsx.

Modal layout:

• Header: Group name as title
• Top-right: "Edit" text button — calls onEdit callback
• Body fields (read-only, not editable):
  • "Group Name" label + value text
  • "Description (Optional)" label + value text (or "No description" if null)
• Members section:
  • "Add Members" label + "View All" button (calls onViewAllMembers)
  • Avatar row: up to 8 circular avatars showing member initials with colored backgrounds
  • If more than 8 members, show a "+ N" overflow indicator after the 8th avatar
• Close: X button (top-right, from DialogClose)

interface GroupDetailViewModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  group: {
    id: number;
    name: string;
    description: string | null;
    members: Array<{ memberId: number; ownername: string }>;
    memberCount: number;
  };
  onEdit: () => void;
  onViewAllMembers: () => void;
}

The member avatar row is a visual pattern used in both the view and edit modals. Build it as an inline sub-component or extract a small MemberAvatarRow helper within the same file.

Acceptance criteria

• Component created at src/components/groups/group-detail-view-modal.tsx
• Uses shadcn Dialog for modal overlay and content
• Displays group name as modal title
• "Edit" text button renders in the top-right area
• onEdit callback fires when "Edit" is clicked
• Group Name field displays as read-only text with label
• Description field displays as read-only text with label (shows fallback text if null)
• Member avatar row shows up to 8 avatars using getInitials() + getAvatarColor()
• "+N" overflow count displays when member count exceeds 8
• "View All" button renders next to "Add Members" label
• onViewAllMembers callback fires when "View All" is clicked
• X close button dismisses the modal
• onOpenChange controls open/close state
• Exported as named export
• npm run build passes