feat: group edit modal

[kevinrutledge]

What needs to be built?

A dialog modal for editing a contact group's name, description, and members. Same layout as the group detail view modal but with editable fields, a "Delete" link (top-right, Paso Red), a "+" button to add members, and a "Save Changes" button (bottom-right). This modal opens when the user clicks "Edit" from the detail view modal.

Design reference

Figma — Paso Food Co-Op

Design system: Paso Red #831002 for Delete link, Paso Brown #523019 for Save Changes button

Documentation

Existing patterns:

• src/components/ui/dialog.tsx — shadcn Dialog
• src/components/ui/input.tsx — shadcn Input
• src/components/ui/textarea.tsx — shadcn Textarea
• src/components/ui/avatar.tsx — shadcn Avatar
• src/components/ui/button.tsx — shadcn Button
• src/utils/avatar.ts — getInitials() and getAvatarColor()
• src/schema/contact-group.ts — UpdateContactGroupSchema (name, description partial validation)

Official docs:

• shadcn Dialog
• shadcn Input
• shadcn Textarea
• Lucide Icons — Plus

Technical notes

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

Modal layout:

• Header: Group name as title (matches detail view)
• Top-right: "Delete" text link in Paso Red (#831002) — calls onDelete callback
• Editable fields:
  • "Group Name" label + <Input> pre-filled with current name
  • "Description (Optional)" label + <Textarea> pre-filled with current description
• Members section:
  • "Add Members" label + "+" button (calls onAddMembers)
  • Avatar row: same pattern as detail view — up to 8 avatars + "+N" overflow
• Footer: "Save Changes" button (Paso Brown #523019 fill, white text) — calls onSave with the edited name and description
• Close: X button

interface GroupEditModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  group: {
    id: number;
    name: string;
    description: string | null;
    members: Array<{ memberId: number; ownername: string }>;
    memberCount: number;
  };
  onSave: (data: { name: string; description: string | null }) => void;
  onDelete: () => void;
  onAddMembers: () => void;
  isSubmitting?: boolean;
}

The component manages local form state (name and description input values). On "Save Changes", it calls onSave with the current values. The tech lead handles calling the updateContactGroup server action.

When isSubmitting is true, disable the Save Changes button and show a loading state.

Acceptance criteria

• Component created at src/components/groups/group-edit-modal.tsx
• Uses shadcn Dialog for modal overlay
• Group name displays as modal title
• "Delete" text link renders top-right in Paso Red (#831002)
• onDelete fires when "Delete" is clicked
• Group Name <Input> pre-filled with current name, editable
• Description <Textarea> pre-filled with current description, editable
• "+" button renders next to "Add Members" label
• onAddMembers fires when "+" is clicked
• Member avatar row shows up to 8 avatars with "+N" overflow (same pattern as detail view)
• "Save Changes" button renders bottom-right (Paso Brown #523019 fill)
• onSave fires with { name, description } when "Save Changes" is clicked
• Save button disabled and shows loading state when isSubmitting is true
• X close button dismisses the modal
• Exported as named export
• npm run build passes