GappHub search behavior alignment

Move search onto one grid model

The current implementation fixed the empty-search bug by separating normal pagination from typed search results. The next improvement is to make search filtering, empty search, page dots, and horizontal swipes all use the same paginated grid model.

Current

Split layout behavior

  • Normal mode uses paginated horizontal pages.
  • Empty search keeps the current paginated page visible.
  • Typed search switches into a separate scrollable results pane.
  • Horizontal page swaps are disabled while search is active.
  • Page dots are hidden while search is active.

Proposed

Single grid behavior

  • Normal mode and search mode both use paginated horizontal pages.
  • Empty search shows all apps, chunked into pages.
  • Typed search filters the app list, then chunks filtered results into pages.
  • Horizontal page swaps continue while search is active.
  • Page dots remain visible and reflect the current filtered result set.

Interaction Flow

1. Browse Users swipe across product pages in the normal icon grid.
2. Pull down Search input appears, but the grid model does not change.
3. Type query The same grid receives a filtered product list and re-pages it.
4. Navigate results Horizontal swipes and page dots work on the filtered pages.

Compare And Contrast

Concern Current split model Proposed single grid model
Empty search Shows the current page only, with search overlay active. Shows all apps as the same paginated grid users already know.
Typed search Switches to a vertical scroll results pane. Filters products, then keeps horizontal pagination.
Horizontal swipes Disabled when search is open. Enabled whenever the visible result set has multiple pages.
Page dots Hidden in search mode. Visible in search mode, matching filtered page count.
Vertical gestures Swipe up dismisses search; typed results can scroll. Swipe up dismisses search; no search-results scroll area needed.
Implementation shape Two rendering branches: paginated grid and search results list. One rendering branch driven by visibleProducts.

Wireframe Options

Option A

Split mode

Search apps...

Search becomes a separate vertical results surface. This is easiest to scan for long results, but it stops feeling like app-page browsing.

Option B

Single paged grid

Search apps...
Page 1 of 3

Search filters the same horizontal app grid. Swipes and page dots keep working, so this is the most consistent option.

Option C

Hybrid threshold

Search apps...
Grid

Use paged grid for short result sets, then switch to a list for broad matches. Flexible, but introduces a mode switch users have to infer.

Implementation scope

Code changes I would make

  1. Compute visibleProducts from products, showSearch, and searchTerm.
  2. Chunk visibleProducts into pages instead of chunking only the original products.
  3. Remove the separate scrollable search-results branch.
  4. Clamp or reset page when the filtered page count changes.
  5. Allow swipe/page-dot navigation in search mode.
  6. Keep swipe-up-to-dismiss search for vertical gestures.

Risks to verify

  • Filtered results with more than one page must not hide matches offscreen without page dots.
  • Changing the query while on a later page must not land on an empty page.
  • Search input focus should not be disrupted by page changes.
  • Vertical swipe-to-dismiss must not accidentally fire during horizontal page swipes.

Recommended decision

Adopt the single grid model. It preserves the iOS-style page mechanic, removes the special typed-search layout, and makes search behave like filtering the same home screen rather than entering a separate mode.

The user-facing rule becomes simple: search changes which apps are in the grid, not how the grid works.