Feature 1: Search Contacts by Name #3

New Issue

amk · 2026-02-24T13:59:19Z

amk commented

2026-02-24 13:59:19 +00:00

Overview

Implement a search feature that allows users to filter contacts by name on the Contacts screen.

Requirements

Functional Requirements

Search Text Field
- Add a search text field at the top of the Contacts screen
- Placeholder text: "Search contacts..."
- Clear button when text is present
Filtering Behavior
- Filter contacts by name (case-insensitive)
- Partial matches should be included (e.g., "ali" matches "Alice")
- Empty search shows all contacts
Add short timeout when user is typing
- Avoid unnecessary filtering on every keystroke
Empty State
- Show "No results found" message when search yields no matches
- Include the search query in the message

Non-Functional Requirements

Search should feel responsive (< 100ms after debounce)
Preserve search query on configuration changes

UI Mockup

┌─────────────────────────────────┐
│ Contacts                     ▼  │  <- TopAppBar
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🔍 Search contacts...       │ │  <- Search TextField
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 👤 Alice Johnson            │ │
│ │    alice@example.com  Active│ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 👤 Bob Smith                │ │
│ │    bob@example.com  Pending │ │
│ └─────────────────────────────┘ │
│              ...                │
└─────────────────────────────────┘

Acceptance Criteria

Search field is visible at top of Contacts screen
Typing filters contacts by name (case-insensitive)
debounce prevents excessive filtering
"No results" message shown for empty results
Pull-to-refresh still works
Search query preserved on screen rotation
Code follows existing architecture patterns

## Overview Implement a search feature that allows users to filter contacts by name on the Contacts screen. ## Requirements ### Functional Requirements 1. **Search Text Field** - Add a search text field at the top of the Contacts screen - Placeholder text: "Search contacts..." - Clear button when text is present 2. **Filtering Behavior** - Filter contacts by name (case-insensitive) - Partial matches should be included (e.g., "ali" matches "Alice") - Empty search shows all contacts 1. Add short timeout when user is typing - Avoid unnecessary filtering on every keystroke 4. **Empty State** - Show "No results found" message when search yields no matches - Include the search query in the message ### Non-Functional Requirements - Search should feel responsive (< 100ms after debounce) - Preserve search query on configuration changes ## UI Mockup ``` ┌─────────────────────────────────┐ │ Contacts ▼ │ <- TopAppBar ├─────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 🔍 Search contacts... │ │ <- Search TextField │ └─────────────────────────────┘ │ ├─────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 👤 Alice Johnson │ │ │ │ alice@example.com Active│ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 👤 Bob Smith │ │ │ │ bob@example.com Pending │ │ │ └─────────────────────────────┘ │ │ ... │ └─────────────────────────────────┘ ``` ## Acceptance Criteria - [ ] Search field is visible at top of Contacts screen - [ ] Typing filters contacts by name (case-insensitive) - [ ] debounce prevents excessive filtering - [ ] "No results" message shown for empty results - [ ] Pull-to-refresh still works - [ ] Search query preserved on screen rotation - [ ] Code follows existing architecture patterns

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#3