Feature 2: Group Detail Screen #4

New Issue

amk · 2026-02-24T14:00:03Z

amk commented

2026-02-24 14:00:03 +00:00

Overview

Implement a Group Detail screen that shows the members of a group when the user taps on a group in the Groups list.

Requirements

Functional Requirements

Navigation
- Tapping a group in the Groups list navigates to the Group Detail screen
- A back button in the TopAppBar navigates back to the Groups list
Member List
- Display the group name in the TopAppBar title
- Show each group member as a contact item with: avatar, name, npub, and status badge
- Members should be sorted alphabetically by name
Remove from Group
- Each member item has a "Remove" action (icon button or swipe-to-dismiss — your choice)
- Removing a member sets their groupId to null (the contact is NOT deleted)
- The group's memberCount must be decremented to stay consistent
- The member list updates reactively after removal
Empty State
- When all members have been removed, show an empty state message (e.g., "No members in this group")

UI Mockup

┌─────────────────────────────────┐
│ ← Alice's group                 │  <- TopAppBar with back button
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 👤 Alice Johnson         ✕  │ │  <- Remove button
│ │    npub1alice...  Active    │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 👤 Bob Smith             ✕  │ │
│ │    npub1bob...    Pending   │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 👤 Charlie Brown         ✕  │ │
│ │    npub1charlie...  Active  │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

Empty state:

┌─────────────────────────────────┐
│ ← Alice's group                 │
├─────────────────────────────────┤
│                                 │
│                                 │
│      No members in this group   │
│                                 │
│                                 │
└─────────────────────────────────┘

Acceptance Criteria

Tapping a group navigates to the Group Detail screen
Back button returns to the Groups list
Group name is displayed in the TopAppBar
Members are displayed with avatar, name, npub, and status
Remove action removes the member from the group (not from the database)
Group memberCount is decremented after removal
Member list updates reactively (no manual refresh needed)
Empty state is shown when the group has no members
Code follows existing architecture patterns

### Overview Implement a Group Detail screen that shows the members of a group when the user taps on a group in the Groups list. ### Requirements #### Functional Requirements 1. **Navigation** - Tapping a group in the Groups list navigates to the Group Detail screen - A back button in the TopAppBar navigates back to the Groups list 2. **Member List** - Display the group name in the TopAppBar title - Show each group member as a contact item with: avatar, name, npub, and status badge - Members should be sorted alphabetically by name 3. **Remove from Group** - Each member item has a "Remove" action (icon button or swipe-to-dismiss — your choice) - Removing a member sets their `groupId` to `null` (the contact is NOT deleted) - The group's `memberCount` must be decremented to stay consistent - The member list updates reactively after removal 4. **Empty State** - When all members have been removed, show an empty state message (e.g., "No members in this group") ### UI Mockup ``` ┌─────────────────────────────────┐ │ ← Alice's group │ <- TopAppBar with back button ├─────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 👤 Alice Johnson ✕ │ │ <- Remove button │ │ npub1alice... Active │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 👤 Bob Smith ✕ │ │ │ │ npub1bob... Pending │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 👤 Charlie Brown ✕ │ │ │ │ npub1charlie... Active │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────┘ ``` **Empty state:** ``` ┌─────────────────────────────────┐ │ ← Alice's group │ ├─────────────────────────────────┤ │ │ │ │ │ No members in this group │ │ │ │ │ └─────────────────────────────────┘ ``` ### Acceptance Criteria - [ ] Tapping a group navigates to the Group Detail screen - [ ] Back button returns to the Groups list - [ ] Group name is displayed in the TopAppBar - [ ] Members are displayed with avatar, name, npub, and status - [ ] Remove action removes the member from the group (not from the database) - [ ] Group `memberCount` is decremented after removal - [ ] Member list updates reactively (no manual refresh needed) - [ ] Empty state is shown when the group has no members - [ ] Code follows existing architecture patterns

amk changed title from ~~# Feature 2: Group Detail Screen~~ to Feature 2: Group Detail Screen

2026-02-24 14:00:14 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: glok/kotlin-interview-robert-nagy#4