Sync saved settings to ReaderApp without page refresh

[YishaiGlasner]

Summary

When saving account settings, the changes were persisted to the database and cookies but ReaderApp (mounted as a header overlay with headerMode: True) retained stale state until a page refresh. This PR syncs saved settings to the React app in real-time using a custom DOM event, following the existing sefaria:bootstrap-url pattern.

Changes

Event dispatch from account settings (account_settings.html)

• After a successful save, dispatches a sefaria:settings-updated custom event with the new settings as payload
• Only checks for change on textual_custom since it's the only setting that triggers an expensive operation (calendars API re-fetch); all other settings are always included as their updates are cheap
• For interface language changes, refresh will redirect to the right domain.
• For experiments changes, reloads the page since chatbot_user_token is generated server-side and requires fresh props

Event handler in ReaderApp (ReaderApp.jsx)

• Listens for the sefaria:settings-updated event and updates:
  • translationLanguagePreference → setState (passed as prop to Header → InterfaceLanguageMenu)
  • readingHistory → Sefaria.is_history_enabled (checked by saveUserHistory and UserHistoryPanel)
  • textualCustom → calls Sefaria.updateCalendars() to re-fetch calendar data with the new Ashkenazi/Sephardi preference

New updateCalendars utility (sefaria.js)

• Added Sefaria.updateCalendars(custom, diaspora) near the existing calendarRef function
• Uses Sefaria._ApiPromise to fetch /api/calendars and update Sefaria.calendars

Diaspora context (views.py)

• Passes request.diaspora to the account settings template context so the calendars API call can use the correct diaspora value

Note

I'm open to the claim that we shouldn't do all of this, but only refresh page after any click on save, or any click on save that changed setting (except email frequency).

[Copilot]

Pull request overview

This PR enables real-time syncing of saved account settings to the React-based ReaderApp (running in headerMode) without requiring a page refresh. It follows the existing sefaria:bootstrap-url custom DOM event pattern to communicate between the jQuery-based account settings page and the React component tree.

Changes:

• Dispatches a sefaria:settings-updated custom DOM event after saving account settings, with special handling for interface language (redirect) and experiments (reload)
• Adds a handler in ReaderApp that updates translation language preference state, reading history flag, and calendar data in response to the new event
• Introduces Sefaria.updateCalendars() utility to re-fetch calendar data when the textual custom (Ashkenazi/Sephardi) preference changes

Reviewed changes

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

File	Description
templates/account_settings.html	Dispatches sefaria:settings-updated event after successful save; adds early returns for language redirect and experiments reload
static/js/ReaderApp.jsx	Adds event listener/handler for sefaria:settings-updated to update React state and global Sefaria state
static/js/sefaria/sefaria.js	Adds updateCalendars() method to fetch fresh calendar data from the API
reader/views.py	Passes request.diaspora to account settings template context for calendar API calls

---

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

[mergify]

🧪 CI Insights

Here's what we observed from your CI run for d8790d1.

✅ Passed Jobs With Interesting Signals

Pipeline	Job	Signal	Health on master	Retries	🔍 CI Insights	📄 Logs
Continuous	Continuous Testing: PyTest	Base branch is broken, but the job passed. Looks like this might be a real fix 💪		0	View	View

[stevekaplan123]

I'm confused why we need a custom event. Why can't this function be called when the user clicks save?

[YishaiGlasner]

I'm confused why we need a custom event. Why can't this function be called when the user clicks save?

because it's reactive. you can't change ReaderApp state from django template.