10760/add global book filter

[BearSunny]

Closes #10760

This PR aims to create a global filter with the following flow: UI change -> Save to localStorage for persistence across page loads
-> Data are sent to backend -> Backend sets cookies -> On success, trigger carousels reload -> Carousels read preferences from localStorage -> Carousels use preferences to fetch filtered data from Solr.

Technical

This implementation already confirms that UI interaction and cookies work correctly. However, since I haven't tested it on carousels with loaded books yet, I cannot confirm that carousels are able to load properly.

P/S: I sincerely apologize for my inactivity over the past month since I was away for military service. If you could kindly share the instructions on how to load books for testing, I’d really appreciate it. Thank you so much!

[Copilot]

Pull Request Overview

This PR implements a global book filter system that allows users to filter books by type (readable/preview/all), language, and publication date range. The filter preferences persist across page loads using localStorage and are synchronized with backend cookies to maintain consistency.

• Added client-side preference management with localStorage persistence and cookie synchronization
• Created a slide-out filter panel UI integrated into the top navigation bar
• Modified carousel components to respect global filter preferences when loading book data

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
static/js/preferences.js	Core preference management functions for getting/setting filters and cookie synchronization
static/js/preferences-handler.js	DOM event handlers for the filter panel UI interactions
openlibrary/templates/site/alert.html	Added filter panel UI with styling and removed language dropdown from top bar
openlibrary/plugins/upstream/account.py	Backend endpoint to handle preference updates and set cookies
openlibrary/plugins/openlibrary/js/carousel/Carousel.js	Modified carousel to use global preferences for filtering book data
openlibrary/i18n/messages.pot	Updated translation references after removing language dropdown

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[mekarpeles]

Looking at the javascript CI:

[lint:js]   1:32  error  'getGlobalPreferences' is defined but never used       no-unused-vars
[lint:js]   1:54  error  'onGlobalPreferencesChange' is defined but never used  no-unused-vars
[lint:js]   1:81  error  'mapPreferencesToBackend' is defined but never used    no-unused-vars
[lint:js]   3:7   error  'selectedLang' is assigned a value but never used      no-unused-vars
[lint:js] 
[lint:js] /home/runner/work/openlibrary/openlibrary/static/js/preferences.js
[lint:js]    6:9  error  Unexpected console statement  no-console
[lint:js]   22:9  error  Unexpected console statement  no-console
[lint:js]   43:9  error  Unexpected console statement  no-console
[lint:js]   60:9  error  Unexpected console statement  no-console
[lint:js]   71:9  error  Unexpected console statement  no-console

[BearSunny]

Hi @mekarpeles, I’ve implemented the suggested fixes from my last PR. While testing by loading some books, it looks like they aren’t reflecting the updated preference logic. Could you please let me know if there are additional steps I should take, or if there might be a conflict between the new implementation and the existing codebase?

[BearSunny]

Hey @mekarpeles, I have migrated this <style> to the proper CSS files and here's the result for now:

Could you please review the modified files and specifically focus on the carousel loading after user has selected their preferences in the Filter modal since I'm not sure if the Solr queries are correct?

1. In Carousel.js:

const handleGlobalFilterChange = (backendParams) => {
              loadMore.extraParams = backendParams;
              if (loadMore.pageMode === 'page') {
                  loadMore.page = 1;
              } else {
                  loadMore.page = 0;
              }
              loadMore.allDone = false;
              this.clearCarousel();
              this.fetchPartials();
          };

          document.addEventListener('global-preferences-changed', (ev) => {
              const backendParams = mapPreferencesToBackend(ev.detail);
              handleGlobalFilterChange(backendParams);
          });

          // On initial load, fetch with global preferences
          const initialPrefs = getGlobalPreferences();
          const initialBackendParams = mapPreferencesToBackend(initialPrefs);
          handleGlobalFilterChange(initialBackendParams);
}

2. Frontend mapping in preferences.js:

export function mapPreferencesToBackend(prefs) {
    const params = {
        formats: prefs.mode === 'fulltext' ? 'has_fulltext' 
                 : prefs.mode === 'preview' ? 'ebook_access' 
                 : null,
        first_publish_year: prefs.date
    };
    
    if (prefs.language && prefs.language !== 'all') {
        params.languages = [prefs.language];
    }
    
    return params;
}

3. Backend processing in account.py:

prefs = {
            'mode': d.get('mode', 'all'),
            'language': d.get('language', 'en'),
            'date': d.get('date', [1900, 2025]),
        }

# Transform to backend format
backend_prefs = {
    'formats': (
        'has_fulltext'
        if prefs['mode'] == 'fulltext'
        else 'ebook_access' if prefs['mode'] == 'preview' else None
    ),
    'first_publish_year': prefs['date'],
}
if prefs['language'] != 'all':
    backend_prefs['languages'] = [prefs['language']]

Thank you so much!

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 19 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[BearSunny]

Hi @mekarpeles,
I am so sorry for the long pause (again), but here's my update on code fixes. So far, I have implemented all 4 of your requested changes. I have also checked my implementation and noticed that my work right now mostly focuses on only the frontend. Specifically, alert.html displays the UI panel for users to select their preferences, which are then saved to localStorage and mapped to backend parameters. The key question here, though, is that I am not really clear how backend endpoints receive and apply these parameters. The crucial questions I need right now are:

1. Which file handles carousel data fetching? Where is the endpoint?
2. Is there an existing function that builds search queries for carousels that I should modify?
3. How do I format users' inputs for queries? What field names should I use?

Answering these 3 questions will allow me to continue updating the backend pipeline for our filtering system. For now, here's what we have so far:

Thank you so much for your response!

[BearSunny]

Hi @mekarpeles, this PR has been up for a while and I’d love your feedback before moving forward. Could you take a look when you get a chance? Thank you so much!

[RayBB]

@BearSunny there seem to be some merge conflicts now as we've moved code away from LESS and to plain CSS. Could you update your PR to address those so we can review?

[BearSunny]

Hi @RayBB,
I've resolved all Copilot feedback and added 2 new test files. I look forward to your review at your convenience.

[RayBB]

Please address the failing CI and then let us know

[BearSunny]

Hi @RayBB, I've read the logs for the javascript_tests and I actually have no idea how to fix these bundling problems. Any recommendations or docs I could read to continue working on this?
Thank you!

[RayBB]

You need to increase the allowed size in the config. You can find some examples in other PRs here. Read the logs closely to see which item needs to be increased. https://github.com/search?q=repo%3Ainternetarchive%2Fopenlibrary+bundlesize&type=pullrequests

…

On Fri, Apr 10, 2026, 3:35 AM Huynh Khanh Minh ***@***.***> wrote: *BearSunny* left a comment (internetarchive/openlibrary#11331) <#11331 (comment)> Hi @RayBB <https://github.com/RayBB>, I've read the logs for the javascript_tests and I actually have no idea how to fix these bundling problems. Any recommendations or docs I could read to continue working on this? Thank you! — Reply to this email directly, view it on GitHub <#11331 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHA5APXXHVMF7T6ZZ26END4VDE6FAVCNFSM6AAAAACIQTUIROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DEMRSHA4DQNZZGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[BearSunny]

Hi @RayBB, thank you so much for the guidance. Now that all tests have passed successfully, I look forward to your review of the global book filter. So these are my questions when I was implementing this feature:

1. Which file handles carousel data fetching? Where is the endpoint?
2. Is there an existing function that builds search queries for carousels that I should modify?
3. How do I format users' inputs for queries? What field names should I use?

And as I reviewed the existing codebase and explored these questions, I worked through each point and I really hope I’ve identified the correct answers and subsequently, implemented the feature accurately in my code.

[RayBB]

@BearSunny I'd really encourage you to ask AI on your machine (opencode has a generous free tier) to help you explore some of these questions and if you're not able to get answers then followup here.

[RayBB]

Please undo the vendor/infogami changes. Running make git should help with this.

Also, please upload a video showing how this feature works and how it handles any edge cases.

[RayBB]

Please undo all whitespace changes.

[BearSunny]

Hi @RayBB, let me make some necessary changes and verify again if I got these questions right before I show you the feature in a video. Oh and can I ask if there are any docs detailing how to load books to test carousel behaviour?

[RayBB]

You can find info on how to load data here: https://docs.openlibrary.org/developers/misc/loading-production-book-data.html#import-production-data-locally

Please let me know once you've tested and are ready for review