Search Functionality

The search functionality in Lawnicons allows users to quickly find specific icons within the app. This feature involves several UI components and interacts with the ViewModel and Repository layers to filter and display results.

How it works: User perspective

1. The user taps the search icon (on compact screens) or interacts with the search bar (on expanded screens or when search is active).
2. A search interface appears, allowing the user to type a query.
3. Filter chips allow the user to specify whether to search by icon Name (label), Component name, or Drawable resource name.
4. As the user types, the list of displayed icons updates in real-time to show matching results.
5. If only one icon matches precisely, it might be displayed in a more prominent list item format. If no icons match, a "no items found" message appears.

Key components and their roles

• UI Layer (ui/ package):
  • HomeTopBar.kt:
    • Contains the primary search input field (SearchBarInputField) and manages the overall search bar state (SearchBarState from Material 3).
    • On expanded screens, it directly hosts the search bar.
    • On compact screens, it's less visible initially but becomes active when search is triggered (often via HomeBottomToolbar).
  • search/SearchBar.kt:
    • SearchBarInputField: The Composable for the actual text input, placeholder, leading/trailing icons (back arrow, clear button).
    • ResponsiveSearchBarContents: Adapts the search bar display (ExpandedDockedSearchBar vs. ExpandedFullScreenSearchBar) based on screen size (isExpandedScreen).
  • search/SearchContents.kt:
    • Displays the filter chips for selecting search mode (Name, Component, Drawable).
    • Renders the LazyVerticalGrid of IconPreview Composables based on the filtered iconInfo list received from the ViewModel.
    • Handles the display for "no results" or a single result in a list item format.
  • home/Home.kt:
    • Integrates HomeTopBar into the main screen Scaffold.
    • Manages the expandSearch state which controls the visibility/expansion of the search bar.
• ViewModel Layer (viewmodel/ package):
  • LawniconsViewModelImpl.kt:
    • Holds the current search query in searchTermTextState (a androidx.compose.foundation.text.input.TextFieldState).
    • Manages the current searchMode (SearchMode.LABEL, SearchMode.COMPONENT, SearchMode.DRAWABLE).
    • Exposes the filtered search results as searchedIconInfoModel (StateFlow<IconInfoModel>).
    • The searchIcons(query: String) function is called whenever the search term or mode changes. It delegates the actual search operation to the IconRepository.
    • changeMode(mode: SearchMode) updates the search mode and triggers a new search.
• Data Layer (repository/ package):
  • IconRepositoryImpl.kt:
    • The search(mode: SearchMode, query: String) function performs the filtering logic.
    • It iterates over the full list of IconInfo (cached in iconInfoModel).
    • Based on the searchMode, it checks the query against the icon's label(s), component name(s), or drawable name.
    • It prioritizes matches at the start of words and then by the index of the match.
    • The filtered and sorted list is then emitted to _searchedIconInfoModel.
    • clearSearch() resets the searchedIconInfoModel to the full icon list.
• Model Layer (model/ package):
  • IconInfo.kt: The data class for individual icons.
  • IconInfoModel.kt: Holds the list of icons and their count.
  • SearchInfo.kt: A temporary data class used within IconRepository to hold an icon and its match relevance during sorting.
  • SearchMode.kt: An enum defining the different search criteria.

Data flow for a search operation

1. User types into SearchBarInputField (UI).
2. The TextFieldState (in LawniconsViewModel) is updated.
3. A LaunchedEffect observing searchTermTextState.text in Home.kt (or a similar mechanism in SearchBarInputField's onSearch callback) calls lawniconsViewModel.searchIcons(newQuery).
4. LawniconsViewModel.searchIcons() calls iconRepository.search(currentSearchMode, newQuery).
5. IconRepository filters its master list of icons based on the query and mode, then updates its _searchedIconInfoModel StateFlow.
6. SearchContents.kt (UI), observing lawniconsViewModel.searchedIconInfoModel, recomposes and displays the new list of filtered icons.

This setup ensures that the search is responsive and that concerns are well-separated across the different architectural layers.