Web: sub-community drill-down dropdown on community breadcrumbs by kevinortiz43 · Pull Request #9229 · Couchers-org/couchers

kevinortiz43 · 2026-07-03T14:47:35Z

Adds a searchable dropdown as the last item inside the community-page breadcrumbs. It lists the current community's direct sub-communities and navigates to the selected one.

Fixes #5545

New SubCommunitiesDropdown — a MUI Button + Menu with a search field and a filterable item list.
Reuses the existing useListSubCommunities / listCommunities query and its pages are drained via fetchNextPage so all children load, then the count gates rendering.
Responsive: on mobile the breadcrumb row stacks above a centered Join/Leave button

Testing

Verified against online staging (next.couchershq.org) with Playwright, logged in:

Added SubCommunitiesDropdown.test.tsx (5 tests). Added a listCommunities mock to DiscussionPage.test.tsx since it renders the shared sub-header

Web frontend checklist

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

For maintainers

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

This PR was created with the Couchers PR skill.

Adds a searchable MUI dropdown next to the community-page breadcrumbs that lists the current community's direct sub-communities and navigates to the selected one, letting users move down the geographic tree (not just up via the existing breadcrumb links). The dropdown is hidden on leaf communities, its label is derived from the children's node type, and it reuses the existing ListCommunities query. Also mocks that query in DiscussionPage's test since it renders the shared community sub-header. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CouchersBot · 2026-07-03T14:48:17Z

Mobile

Install the Dev Tool (iOS via TestFlight, iOS Simulator, or Android .apk) here.

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	Android

Open in Dev Tool	Open in Dev Tool

Deep links

iOS

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

Android

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

Web (Vercel)

View the Vercel web preview for this branch.

Backend

Schema	Schema diff	Sample emails

Other

Protos	Backend coverage	Web coverage

nabramow · 2026-07-06T09:35:56Z

When I have my language set to a longer language like German, and go in mobile view, the breadcrumbsa re overlapping with the button, we need to come up with a design solution for this:

nabramow · 2026-07-06T09:38:38Z

Two things here:

As I type in this search, the width of the menu increases. It should stay the same width the whole time.
On mobile view, the placeholder text is cut off initially. Maybe it needs to be something shorter? Just "Location" perhaps?

nabramow · 2026-07-06T09:40:37Z

This also looks a little weird on mobile. Maybe we do conditional design for mobile and make the breadcrumbs the first row and the button the second row. I think there's not enough space for both on the same screen. So can do some kinda 'display: flex, flex-direction: row' for mobile only.

Open to other ideas I just feel something needs to be a bit different here for mobile view.

jesseallhands

I really like how this is looking! Great job!

I agree with the points Nicole made. I would suggest that the "leave community"/"join community" button not only appears in a separate row below the breadcrumbs on mobile, but also is a button with a single line of text rather than a button with 2 rows of text since two rows result in it taking up more real estate.

kevinortiz43 · 2026-07-06T20:47:13Z

I think when I checked the android version I didn't think to check the other languages. let me fix or see what I can do @nabramow

- Mobile: stack the join/leave button onto its own row below the breadcrumbs so long translated labels (e.g. German) no longer overlap the dropdown trigger. - Keep the join/leave button label on a single line. - Give the search menu a fixed width so it no longer reflows while typing. - Shorten the mobile search placeholder to "Location". Addresses review feedback on #9229. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

kevinortiz43 · 2026-07-09T01:50:26Z

@nabramow I have fixed the mobile width for German, and other languages. Can you double check.

nabramow · 2026-07-09T09:45:04Z

@kevinortiz43 I fear this still looks a bit awkward on mobile. For example with the "select area" having a gap in space on the left, and the way it's going on 3 lines. What if we:

Also make the fontSize slightly smaller on mobile view only so the text fits more
Center the "Leave community" button
Do something so that if it wraps to the next line, there's not a space to the left?

Also wondering if @jesseallhands has any better ideas. I think a slightly smaller font will help it wrap a bit though.

kevinortiz43 · 2026-07-09T16:45:56Z

@nabramow I think decreasing the font size should help but I am wondering if for mobile would it be worth calling the countries by their abbreviations. Such as EU for Europe, AFR for Africa, etc.

Address review feedback on the sub-community dropdown: on mobile the breadcrumb chain now stays on a single line and scrolls horizontally instead of wrapping (the "Select area" dropdown no longer drops to its own line), the breadcrumb font is slightly smaller, and the join/leave button sits on its own centered row below. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Let the community breadcrumb wrap whole crumbs onto the next line on mobile rather than horizontally scrolling, so a long current-community name is never truncated and the "Select area" dropdown stays visible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

kevinortiz43 · 2026-07-09T21:07:30Z

@nabramow I think the issue is specifically europa africa and middle east is way too long. I tried setting it up in one line but it looks bad.

This is the fix I did.

kevinortiz43 · 2026-07-09T21:10:32Z

@nabramow this is the other recommendation we can do for 320px

nabramow · 2026-07-14T20:58:44Z

@kevinortiz43 I think the smaller font where it goes 2 rows instead of 3 is okay and left-aligns.

The "Join/Leave Community" button centered looks fine enough, but don't center the tabs, leave that as it is.

kevinortiz43 requested a review from nabramow as a code owner July 3, 2026 14:47

kevinortiz43 requested a review from jesseallhands July 3, 2026 14:48

vercel Bot deployed to Preview July 3, 2026 14:51 View deployment

jesseallhands reviewed Jul 6, 2026

View reviewed changes

vercel Bot deployed to Preview July 7, 2026 04:24 View deployment

Merge branch 'develop' into web/feature/community-subcommunity-dropdown

6ac8088

vercel Bot deployed to Preview July 8, 2026 10:37 View deployment

vercel Bot deployed to Preview July 9, 2026 19:02 View deployment

vercel Bot deployed to Preview July 9, 2026 20:55 View deployment

web/communities: remove explanatory comments from sub-community dropdown

679c217

vercel Bot deployed to Preview July 22, 2026 15:35 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Web: sub-community drill-down dropdown on community breadcrumbs#9229

Web: sub-community drill-down dropdown on community breadcrumbs#9229
kevinortiz43 wants to merge 6 commits into
developfrom
web/feature/community-subcommunity-dropdown

kevinortiz43 commented Jul 3, 2026 •

edited

Loading

Uh oh!

CouchersBot commented Jul 3, 2026 •

edited

Loading

Uh oh!

nabramow commented Jul 6, 2026

Uh oh!

nabramow commented Jul 6, 2026 •

edited

Loading

Uh oh!

nabramow commented Jul 6, 2026 •

edited

Loading

Uh oh!

jesseallhands left a comment

Uh oh!

kevinortiz43 commented Jul 6, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

nabramow commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026 •

edited

Loading

Uh oh!

nabramow commented Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

kevinortiz43 commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

For maintainers

Uh oh!

CouchersBot commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Mobile

Web (Vercel)

Backend

Other

Uh oh!

nabramow commented Jul 6, 2026

Uh oh!

nabramow commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nabramow commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jesseallhands left a comment

Choose a reason for hiding this comment

Uh oh!

kevinortiz43 commented Jul 6, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

nabramow commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026

Uh oh!

kevinortiz43 commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nabramow commented Jul 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kevinortiz43 commented Jul 3, 2026 •

edited

Loading

CouchersBot commented Jul 3, 2026 •

edited

Loading

nabramow commented Jul 6, 2026 •

edited

Loading

nabramow commented Jul 6, 2026 •

edited

Loading

kevinortiz43 commented Jul 9, 2026 •

edited

Loading