Skip to content

Add Availability and Language filters to top-level search #12752

@lokesh

Description

@lokesh

Note: Use the branch from this PR as starting point for this work: #12690

Summary

Today the only way to filter by ebook availability or language is to (a) submit a search, (b) scroll past the results, and (c) click through a "More" link in the facets sidebar. Both filters answer questions users have before they search ("show me books I can read right now", "show me books in English"). They belong in the top-level search affordance.

This issue introduces those two filters in the header search, alongside a small UX shift: the header search becomes a button styled like an input. Clicking it opens a focused, modal-style search experience that houses the existing search-type dropper plus the new Availability and Language filters.

Related: #11216 (mobile search bar UX redesign — the states defined there should apply here too).

Behavior

Header search affordance

  • On non-search pages, the header shows a search button styled to look like an input ("Search…" placeholder, search icon). (see example of this behavior in this prototype: https://lokesh.github.io/open-library-prototype/index.html
  • Clicking it opens a modal-style overlay with:
    • A focused text input
    • The existing search-type dropper (Books, Title, Author, Text, Subject, Lists, Advanced — per Improvements to mobile search bar UX #11216, "All" → "Books")
    • New: Availability filter
    • New: Language filter
  • Pressing Escape, clicking the backdrop, or submitting closes the overlay.
  • Any filter selections should be bubbled up to a row above the filters in ol-chip tags. See Mek's prototype for the behavior
Image

Availability filter

  • Options: All (default), Read now (free), Borrowable, Preview only
  • Maps to existing search params (e.g. has_fulltext, public_scan_b, lending availability).
  • Persisted per-session (sessionStorage), matching the dropper persistence model in Improvements to mobile search bar UX #11216.

Language filter

  • Default: user's interface language (or Any if unset).
  • Searchable list of languages with counts where possible.
  • Persisted per-session like Availability.
  • Maps to the existing language facet param.

Desktop

  • Hide the barcode scanner from the header, it isn't useful without a camera. Keep it on mobile.

Search results page (/search and related)

  • Hide the new header search button on results pages. The results page already has its own input + filters, so a second affordance is duplicative and was a known clutter problem in the current design.
  • The page-level search input should continue to drive the search; Availability and Language pre-applied from the modal arrive as URL params and pre-populate the results-page filter UI.

Out of scope

  • Genre / subject filters (separate issue, deferred per design discussion).
  • Redesign of the facets sidebar on the results page.
  • Changes to autocomplete ranking or HTML-entity handling (separate issues).

Open questions / to iterate

  1. Does the desktop modal open as an overlay, or expand inline in the header? (Mobile is clearly an overlay/sheet.)
  2. Should Availability default to All or Read now (free) for signed-out users? Defaulting to "free" would be opinionated but matches the user task we hear most.
  3. How does the modal's Availability map to the results page's existing Everything/Ebooks radio? Replace, or coexist?
  4. Should Language default to the UI locale (en for English UI), or be Any until the user sets it? Defaulting to UI locale fixes the "French dominates Dune" problem but risks hiding multilingual collections.

Stakeholders

@mekarpeles @cdrini @Armansiddiqui9

Metadata

Metadata

Labels

Affects: UIIssues with the web site's user interface. [managed]Lead: @lokeshIssues pertaining to front-end design system [css, js, components]Theme: SearchIssues related to search UI and backend. [managed]

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions