Add Create Group modal functionality to Groups page

[Copilot]

This PR implements the ability to create new user groups from the Groups page as requested in the issue. When users click the "New group" button on the Groups table, a modal now appears allowing them to create a new group with proper validation and API integration.

Implementation Details

Modal Component: Created a new CreateGroupModal component that follows the existing modal patterns in the codebase, using Radix UI components and consistent styling.

Form Validation: Implemented Zod schema validation (CreateGroupModalSchema) to ensure the group name is required before submission.

API Integration: Added useCreateGroupQuery hook that:

• Posts to /group endpoint with the required payload: {type: 'group', nickname: 'groupName'}
• Follows the existing mutation patterns with React Query
• Automatically invalidates group queries on success for immediate UI refresh

User Experience: The modal includes:

• Required group name field with placeholder text
• Loading state during form submission
• Cancel and Create buttons with proper event handling
• Error handling for failed submissions

Integration: Updated GroupList.tsx to replace the placeholder console.log('Add group') with proper modal state management.

Testing

Added comprehensive unit tests covering:

• Modal rendering when open/closed
• Form field validation and interactions
• Button click handlers and callbacks
• Proper accessibility with role-based queries

The implementation maintains consistency with existing code patterns and follows the same architectural decisions used throughout the application.

Fixes #12.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• download.cypress.io
  • Triggering command: node index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.