Web: add sub-community drill-down dropdown to community breadcrumbs

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>

Author: kevinortiz43

app/web/features/communities/CommunityPage/CommunityPageSubHeader.tsx

@@ -3,15 +3,17 @@ import { Breadcrumbs, styled, Typography } from "@mui/material";
 import BetaFlag from "components/BetaFlag";
 import StyledLink from "components/StyledLink";
 import TabBar from "components/TabBar";
+import { useListSubCommunities } from "features/communities/hooks";
 import { useTranslation } from "i18n";
 import { COMMUNITIES, PUBLIC_TRIPS } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import { Community } from "proto/communities_pb";
 import { CommunityParent } from "proto/groups_pb";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { CommunityTab, routeToCommunity } from "routes";
 
 import JoinCommunityButton from "./JoinCommunityButton";
+import SubCommunitiesDropdown from "./SubCommunitiesDropdown";
 
 const StyledBreadcrumbsContainer = styled("div")(() => ({
   display: "flex",
@@ -36,6 +38,26 @@ export default function CommunityPageSubHeader({
   const isPublicTripsEnabled = process.env.NODE_ENV !== "production";
 
   const router = useRouter();
+
+  // MUI's Breadcrumbs inserts a separator per child element regardless of what that child
+  // renders to, so a leaf `SubCommunitiesDropdown` (which itself returns null) would still leave
+  // a dangling separator. Read the same (cached, deduped) query here to omit the element
+  // entirely when there's nothing to drill into.
+  const {
+    data: subCommunitiesData,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useListSubCommunities(community.communityId);
+  // Fetch every page so the dropdown's client-side search sees all children, not just page one.
+  // Child counts are bounded (tens), so this is cheap.
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+  const subCommunities =
+    subCommunitiesData?.pages.flatMap((page) => page.communitiesList) ?? [];
   const communityTabBarLabels: Partial<
     Record<CommunityTab, string | ReactNode>
   > = {
@@ -89,6 +111,9 @@ export default function CommunityPageSubHeader({
                 </StyledLink>
               ),
             )}
+          {subCommunities.length > 0 && (
+            <SubCommunitiesDropdown subCommunities={subCommunities} />
+          )}
         </StyledBreadcrumbs>
         <JoinCommunityButton community={community} />
       </StyledBreadcrumbsContainer>

app/web/features/communities/CommunityPage/SubCommunitiesDropdown.test.tsx

@@ -0,0 +1,191 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Community, NodeType } from "proto/communities_pb";
+import { routeToCommunity } from "routes";
+import wrapper from "test/hookWrapper";
+import i18n from "test/i18n";
+
+import SubCommunitiesDropdown from "./SubCommunitiesDropdown";
+
+const { t } = i18n;
+
+const mockPush = jest.fn();
+jest.mock("next/router", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+// jest.mock("next/router") above replaces the whole module, which drops the `Router.events`
+// emitter @sentry/nextjs reads at import time - stub Sentry out the same way CommunitySearch's
+// test does so the import doesn't crash.
+jest.mock("platform/sentry", () => {
+  const mockCaptureException = jest.fn();
+  return {
+    captureException: mockCaptureException,
+    default: {
+      captureException: mockCaptureException,
+    },
+  };
+});
+
+const mockChildCommunity = (
+  overrides: Partial<Community.AsObject>,
+): Community.AsObject => ({
+  communityId: 100,
+  name: "Amsterdam",
+  slug: "amsterdam",
+  description: "",
+  parentsList: [],
+  member: false,
+  admin: false,
+  memberCount: 1,
+  adminCount: 1,
+  nearbyUserCount: 0,
+  canModerate: false,
+  smallCommunityFeaturesEnabled: false,
+  nodeType: NodeType.NODE_TYPE_LOCALITY,
+  ...overrides,
+});
+
+const openMenu = async (user: ReturnType<typeof userEvent.setup>) => {
+  await user.click(
+    await screen.findByRole("button", {
+      name: t("communities:sub_community_dropdown_a11y"),
+    }),
+  );
+};
+
+describe("SubCommunitiesDropdown", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("labels the trigger button for the children's node type", async () => {
+    render(
+      <SubCommunitiesDropdown subCommunities={[mockChildCommunity({})]} />,
+      {
+        wrapper,
+      },
+    );
+
+    expect(
+      await screen.findByRole("button", {
+        name: t("communities:sub_community_dropdown_a11y"),
+      }),
+    ).toHaveTextContent(t("communities:select_locality"));
+  });
+
+  it("filters the menu as the user types without losing keystrokes to the menu", async () => {
+    const user = userEvent.setup();
+    render(
+      <SubCommunitiesDropdown
+        subCommunities={[
+          mockChildCommunity({ communityId: 100, name: "Amsterdam" }),
+          mockChildCommunity({
+            communityId: 101,
+            name: "Berlin",
+            slug: "berlin",
+          }),
+        ]}
+      />,
+      { wrapper },
+    );
+
+    await openMenu(user);
+
+    expect(await screen.findByRole("menuitem", { name: "Amsterdam" }));
+    expect(screen.getByRole("menuitem", { name: "Berlin" }));
+
+    const searchInput = screen.getByPlaceholderText(
+      t("communities:sub_community_search_placeholder"),
+    );
+    await user.type(searchInput, "ams");
+
+    expect(searchInput).toHaveValue("ams");
+    expect(screen.getByRole("menuitem", { name: "Amsterdam" }));
+    expect(
+      screen.queryByRole("menuitem", { name: "Berlin" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes the menu when Escape is pressed from the search input", async () => {
+    const user = userEvent.setup();
+    render(
+      <SubCommunitiesDropdown subCommunities={[mockChildCommunity({})]} />,
+      {
+        wrapper,
+      },
+    );
+
+    await openMenu(user);
+
+    const searchInput = screen.getByPlaceholderText(
+      t("communities:sub_community_search_placeholder"),
+    );
+    // stopPropagation on the search input must NOT swallow Escape, or the menu can't close.
+    searchInput.focus();
+    await user.keyboard("{Escape}");
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("menuitem", { name: "Amsterdam" }),
+      ).not.toBeInTheDocument(),
+    );
+  });
+
+  it("navigates to the selected child community", async () => {
+    const amsterdam = mockChildCommunity({
+      communityId: 100,
+      name: "Amsterdam",
+      slug: "amsterdam",
+    });
+    const user = userEvent.setup();
+    render(
+      <SubCommunitiesDropdown
+        subCommunities={[
+          amsterdam,
+          mockChildCommunity({
+            communityId: 101,
+            name: "Berlin",
+            slug: "berlin",
+          }),
+        ]}
+      />,
+      { wrapper },
+    );
+
+    await openMenu(user);
+
+    await user.click(
+      await screen.findByRole("menuitem", { name: "Amsterdam" }),
+    );
+
+    expect(mockPush).toHaveBeenCalledWith(
+      routeToCommunity(amsterdam.communityId, amsterdam.slug),
+    );
+  });
+
+  it("shows a request-community link when the search has no matches", async () => {
+    const user = userEvent.setup();
+    render(
+      <SubCommunitiesDropdown subCommunities={[mockChildCommunity({})]} />,
+      {
+        wrapper,
+      },
+    );
+
+    await openMenu(user);
+
+    await user.type(
+      screen.getByPlaceholderText(
+        t("communities:sub_community_search_placeholder"),
+      ),
+      "NonExistentCity",
+    );
+
+    expect(
+      await screen.findByRole("link", { name: "Request this community!" }),
+    ).toBeInTheDocument();
+  });
+});