Web/bugfix/language picker mobile

[christiansaavedra]

This PR implements conditional validation for displaying the language selector in the navigation bar. The language picker is shown on desktop and on mobile for unauthenticated users, but hidden on mobile for authenticated users to streamline the interface and reduce clutter. Jest uni tests added.

The solution uses a useMemo hook in the [Navigation.tsx] component to compute shouldShowLanguagePickerSelect boolean based on isMobile and authState.authenticated.

On mobile devices, the selector is only displayed when the user is not authenticated, improving the user experience by avoiding unnecessary UI elements for logged-in users who likely have their language preferences set elsewhere.

Testing
Jest files added. I tested this by running the web app locally using yarn start. I verified the language selector visibility on desktop (always shown), mobile unauthenticated (shown), and mobile authenticated (hidden). Used browser dev tools to simulate mobile viewports and authentication states. No console warnings were observed during testing.

Reference issues
"closes #8097"

Backend checklist

• Added tests for any new code or added a regression test if fixing a bug
• Run the backend locally and it works
• Added migrations if there are any database changes, rebased onto develop if necessary for linear migration history

Web frontend checklist

• [x ] There are no console warnings when running the app
• [x ] Added tests where relevant
• [x ] Clicked around my changes running locally and it works
• [x ] Checked Desktop, Mobile and Tablet screen sizes

For maintainers

• Maintainers can push commits to my branch
• Maintainers can merge this PR for me

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
couchers	Ready	Preview	Jun 2, 2026 10:02pm

[nabramow]

So the theory behind this is sound, the only issue is on Login and Signup page, we end up with double language picker and the navigation bar gets very cluttered:

Maybe the solution is add it to this menu at the bottom when isMobile is true and the user is logged out:

And then remove it from the bottom of the Login and Signup forms?

I am open to other suggestions though!

[christiansaavedra]

So the theory behind this is sound, the only issue is on Login and Signup page, we end up with double language picker and the navigation bar gets very cluttered:

Maybe the solution is add it to this menu at the bottom when isMobile is true and the user is logged out: And then remove it from the bottom of the Login and Signup forms?

I am open to other suggestions though!

That's a very interesting observation, thanks for bringing it up.

I totally agree! My input to add is, on mobile, to move the Language Selector to the place you suggested (the bottom of the hamburger menu) but on all pages, instead of conditionally rendering according to the page. This way, we keep it on a definitive place and help users to learn where the language selector is located.

What do you think?

[nabramow]

That's a very interesting observation, thanks for bringing it up.

I totally agree! My input to add is, on mobile, to move the Language Selector to the place you suggested (the bottom of the hamburger menu) but on all pages, instead of conditionally rendering according to the page. This way, we keep it on a definitive place and help users to learn where the language selector is located.

What do you think?

When the user is logged in, the LanguagePickerSelect is always in the LoggedInMenu like this:

It's only logged out that's the problem, which is why it was originally manually added to the Login and Signup pages.

That's why I think it makes sense to remove those login and signup ones and instead add it to the bottom of the LoggedOutMenu when they are logged out.

[christiansaavedra]

That's a very interesting observation, thanks for bringing it up.
I totally agree! My input to add is, on mobile, to move the Language Selector to the place you suggested (the bottom of the hamburger menu) but on all pages, instead of conditionally rendering according to the page. This way, we keep it on a definitive place and help users to learn where the language selector is located.
What do you think?

When the user is logged in, the LanguagePickerSelect is always in the LoggedInMenu like this:

It's only logged out that's the problem, which is why it was originally manually added to the Login and Signup pages.

That's why I think it makes sense to remove those login and signup ones and instead add it to the bottom of the LoggedOutMenu when they are logged out.

I like that! I've pushed the change to this PR.

[nabramow]

Getting there, but I think some logic needs to be adjusted. It should not show in the NavigationBar when the user is logged in like this:

When logged in, it's already in the LoggedInMenu like this:

We don't want to change any of the logged in logic, just the logged out logic.

[nabramow]

Maybe put the select below the options so it matches more the LoggedInMenu style?

Also we probably don't want the menu to automatically close when they select something in case they still want to go to something in the menu.

[nabramow]

@christiansaavedra Are you still planning on finishing this? Just checking so it doesn't stay blocked a long time.

[christiansaavedra]

@christiansaavedra Are you still planning on finishing this? Just checking so it doesn't stay blocked a long time.

Hey Nicole, can you confirm me if this is the expected behaviour? Im a bit confused but my understanding is that this should be the expected behavior:

a) Logged in case:

• Render Language selector inside the hamburger menu, at the bottom.
• Dont render the Language selector in the Navbar

b) Logged out case:

• Dont render Language Selector inside the hamburger menu
• Render the language page in the navbar

Please let me know, thanks

[nabramow]

@christiansaavedra Are you still planning on finishing this? Just checking so it doesn't stay blocked a long time.

Hey Nicole, can you confirm me if this is the expected behaviour? Im a bit confused but my understanding is that this should be the expected behavior:

a) Logged in case:

• Render Language selector inside the hamburger menu, at the bottom.
• Dont render the Language selector in the Navbar

b) Logged out case:

• Dont render Language Selector inside the hamburger menu
• Render the language page in the navbar

Please let me know, thanks

Here are the four views we want:

Desktop

• Logged Out: LanguagePicker is already in the nav bar - all good as is
• LoggedIn: LanguagePicker already in the nav bar - all good as is

Mobile View

• Logged Out: Add LanguagePicker to the left side hamburger LoggedOutMenu:

This shows on landing page, sign up, login so should cover everything. Also remove LanguagePicker from the bottom of the Signup and Login pages

• LoggedIn - This is already good the way it is (it shows in the right side hamburger LoggedInMenu

Let me know if that makes sense!

[CouchersBot]

Preview builds

Mobile Dev Tool preview

Scan the QR with your phone camera, or tap Open in Dev Tool on the device, to open this branch in the installed Dev Tool dev client.

ios — Open in Dev Tool

Deep link

couchers-devtool://expo-development-client/?url=https%3A%2F%2F1d28ff96--ota.preview.couchershq.org%2Fios%2Fmanifest

android — Open in Dev Tool

Deep link

couchers-devtool://expo-development-client/?url=https%3A%2F%2F1d28ff96--ota.preview.couchershq.org%2Fandroid%2Fmanifest

---

_{commit 1d28ff96 · pipeline}

[christiansaavedra]

@christiansaavedra Are you still planning on finishing this? Just checking so it doesn't stay blocked a long time.

Hey Nicole, can you confirm me if this is the expected behaviour? Im a bit confused but my understanding is that this should be the expected behavior:
a) Logged in case:

• Render Language selector inside the hamburger menu, at the bottom.
• Dont render the Language selector in the Navbar

b) Logged out case:

• Dont render Language Selector inside the hamburger menu
• Render the language page in the navbar

Please let me know, thanks

Here are the four views we want:

Desktop

• Logged Out: LanguagePicker is already in the nav bar - all good as is
• LoggedIn: LanguagePicker already in the nav bar - all good as is

Mobile View

• Logged Out: Add LanguagePicker to the left side hamburger LoggedOutMenu:

This shows on landing page, sign up, login so should cover everything. Also remove LanguagePicker from the bottom of the Signup and Login pages

• LoggedIn - This is already good the way it is (it shows in the right side hamburger LoggedInMenu

Let me know if that makes sense!

Pushed, let me know! Thank you

[nabramow]

@christiansaavedra Put in one small suggestion then this is ready to go!

[christiansaavedra]

@christiansaavedra Put in one small suggestion then this is ready to go!

Awesome, I accepted it. LFG!

[nabramow]

LGTM now!

[github-actions]

📝 Release Notes

This PR should be included in the release notes.

Suggested release note:

Fixed the mobile web language picker so logged-out users can change their language more easily on landing, login, and signup pages

🤖 Bot Debug Information

Model: couchers.openai.gpt-5.4
Decision: include
Reasoning: This fixes a noticeable mobile web bug that prevented logged-out users from accessing the language picker, especially on landing, login, and signup flows. Language selection is user-facing and important for accessibility and usability.