docs: update groups architecture

docs/groups-architecture.md

@@ -314,9 +314,23 @@ lib/
 - Display group name and description
 - List all members in group
 - Link to member detail pages
+- Add members to group (via modal with search/autocomplete)
+- Remove members from group (via remove button per member)
 - Edit group button (navigates to `/groups/:slug/edit`)
 - Delete group button (with confirmation modal)
 
+**Add Member Functionality:**
+- "Add Member" button displayed above member table (only for users with `:update` permission)
+- Opens modal with member search/autocomplete
+- Search filters out members already in the group
+- Selecting a member adds them to the group immediately
+- Success/error flash messages provide feedback
+
+**Remove Member Functionality:**
+- "Remove" button (icon button) for each member in table (only for users with `:update` permission)
+- Clicking remove immediately removes member from group (no confirmation dialog)
+- Success/error flash messages provide feedback
+
 **Note:** Uses slug for routing to provide URL-friendly, readable group URLs (e.g., `/groups/board-members`).
 
 ### Group Form Pages
@@ -752,6 +766,7 @@ Each functional unit can be implemented as a **separate issue**:
 - **Issue 4:** Groups in Member Detail (Unit 5)
 - **Issue 5:** Groups in Member Search (Unit 6)
 - **Issue 6:** Permissions (Unit 7)
+- **Issue 7:** Add/Remove Members in Group Detail View
 
 **Alternative:** Issues 3 and 4 can be combined, as they both concern the display of groups.
 
@@ -797,6 +812,27 @@ Each functional unit can be implemented as a **separate issue**:
 
 **Estimation:** 3-4h
 
+### Phase 2a: Add/Remove Members in Group Detail View
+
+**Goal:** Enable adding and removing members from groups via UI
+
+**Tasks:**
+1. Add "Add Member" button above member table in Group Detail View
+2. Implement modal with member search/autocomplete
+3. Add "Remove" button for each member in table
+4. Implement add/remove functionality with flash messages
+5. Ensure proper authorization checks
+
+**Deliverables:**
+- Members can be added to groups via UI
+- Members can be removed from groups via UI
+- Proper feedback via flash messages
+- Authorization enforced
+
+**Estimation:** 2-3h
+
+**Note:** This phase extends Phase 2 and can be implemented as Issue 7 after Issue 2 is complete.
+
 ### Phase 3: Member Overview Integration
 
 **Goal:** Display and filter groups in member overview
@@ -863,9 +899,9 @@ Each functional unit can be implemented as a **separate issue**:
 
 **Estimation:** 1-2h
 
-### Total Estimation: 13-18h
+### Total Estimation: 15-21h
 
-**Note:** This aligns with the issue estimation of 15h.
+**Note:** This includes all 7 issues. The original MVP estimation was 13-15h, with Issue 7 adding 2-3h for the add/remove members functionality in the Group Detail View.
 
 ---
 
@@ -958,6 +994,55 @@ Each functional unit can be implemented as a **separate issue**:
 - Only admins can manage groups
 - All users can view groups (if they can view members)
 
+### Issue 7: Add/Remove Members in Group Detail View
+**Type:** Frontend  
+**Estimation:** 2-3h  
+**Dependencies:** Issue 1 (Backend must be functional), Issue 2 (Group Detail View must exist)
+
+**Tasks:**
+- Add "Add Member" button above member table in Group Detail View (`/groups/:slug`)
+- Implement modal for member selection with search/autocomplete
+- Add "Remove" button for each member in the member table
+- Implement add member functionality (create MemberGroup association)
+- Implement remove member functionality (destroy MemberGroup association)
+- Add flash messages for success/error feedback
+- Ensure proper authorization checks (only users with `:update` permission on Group can add/remove)
+- Filter out members already in the group from search results
+- Reload group data after add/remove operations
+
+**Acceptance Criteria:**
+- "Add Member" button is visible above member table (only for users with `:update` permission)
+- Clicking "Add Member" opens a modal with member search/autocomplete
+- Search filters members and excludes those already in the group
+- Selecting a member from search adds them to the group
+- Success flash message is displayed when member is added
+- Error flash message is displayed if member is already in group or other error occurs
+- Each member row in the table has a "Remove" button (only visible for users with `:update` permission)
+- Clicking "Remove" immediately removes the member from the group (no confirmation dialog)
+- Success flash message is displayed when member is removed
+- Group member list and member count update automatically after add/remove
+- Modal closes after successful member addition
+- Authorization is enforced server-side in event handlers
+- UI respects permission checks (buttons hidden for unauthorized users)
+
+**Technical Notes:**
+- Reuse member search pattern from `UserLive.Form` (ComboBox hook with autocomplete)
+- Use `Membership.create_member_group/1` for adding members
+- Use `Membership.destroy_member_group/1` for removing members
+- Filter search results to exclude members already in the group (check `group.members`)
+- Reload group with `:members` and `:member_count` after operations
+- Follow existing modal patterns (similar to delete confirmation modal)
+- Ensure accessibility: proper ARIA labels, keyboard navigation, focus management
+
+**UI/UX Details:**
+- Modal title: "Add Member to Group"
+- Search input placeholder: "Search for a member..."
+- Search results show member name and email
+- "Add" button in modal (disabled until member selected)
+- "Cancel" button to close modal
+- Remove button can be an icon button (trash icon) with tooltip
+- Flash messages: "Member added successfully" / "Member removed successfully" / error messages
+
 ---
 
 ## Testing Strategy