Allow me to swipe left or right in card view to go to the next result #1

Open
opened 2026-06-23 20:20:59 +00:00 by elvis · 2 comments
Owner
No description provided.
elvis added this to the pokedex project 2026-06-23 20:20:59 +00:00
Author
Owner

This is a test

This is a test
Author
Owner

Plan: Swipe Navigation in Card Detail View

To allow users to swipe left or right in the card detail screen to navigate through the search results or binder cards:

1. **Active Session Manager (`CardSessionManager`):**
   * Implement a singleton `@Singleton class CardSessionManager` that holds the current list of card IDs (e.g. `val activeCardIds =

MutableStateFlow<List>(emptyList())). * Add a function setCardIds(ids: List)` to update this list.

2. **Populate Active Session:**
   * When tapping a card in `CardSearchScreen` or `BinderDetailScreen`, populate the active card session using `CardSessionManager.setCardIds(listOfCardIds)` with

the currently displayed results.
* Navigate to Screen.CardDetail as normal, passing the clicked card ID.

3. **HorizontalPager Integration:**
   * Update `CardDetailScreen.kt` and `CardDetailViewModel.kt` to retrieve the active card ID list.
   * Locate the index of the clicked card ID within the list to serve as the initial page.
   * Use Jetpack Compose’s `HorizontalPager` with `rememberPagerState`:
     ```kotlin
     val pagerState = rememberPagerState(
         initialPage = initialIndex,
         pageCount = { activeCardIds.size }
     )
     ```
   * Wrap the detail contents inside a `HorizontalPager(state = pagerState)`.
   * Render the layout for the active card dynamically on each page by passing the corresponding card ID to a page sub-component (e.g. `CardDetailContent(cardId =

activeCardIds[page])`).

### Plan: Swipe Navigation in Card Detail View To allow users to swipe left or right in the card detail screen to navigate through the search results or binder cards: 1. **Active Session Manager (`CardSessionManager`):** * Implement a singleton `@Singleton class CardSessionManager` that holds the current list of card IDs (e.g. `val activeCardIds = MutableStateFlow<List<String>>(emptyList())`). * Add a function `setCardIds(ids: List<String>)` to update this list. 2. **Populate Active Session:** * When tapping a card in `CardSearchScreen` or `BinderDetailScreen`, populate the active card session using `CardSessionManager.setCardIds(listOfCardIds)` with the currently displayed results. * Navigate to `Screen.CardDetail` as normal, passing the clicked card ID. 3. **HorizontalPager Integration:** * Update `CardDetailScreen.kt` and `CardDetailViewModel.kt` to retrieve the active card ID list. * Locate the index of the clicked card ID within the list to serve as the initial page. * Use Jetpack Compose’s `HorizontalPager` with `rememberPagerState`: ```kotlin val pagerState = rememberPagerState( initialPage = initialIndex, pageCount = { activeCardIds.size } ) ``` * Wrap the detail contents inside a `HorizontalPager(state = pagerState)`. * Render the layout for the active card dynamically on each page by passing the corresponding card ID to a page sub-component (e.g. `CardDetailContent(cardId = activeCardIds[page])`).
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
elvis/pokebox#1
No description provided.