feat: use group selector when user has more than 1 group

apps/hub/src/components/breadcrumbs/group-breadcrumb.tsx

@@ -1,7 +1,11 @@
-import { groupGamesQueryOptions } from "@/domains/game/queries";
+import {
+  groupGamesQueryOptions,
+  groupsCountQueryOptions,
+} from "@/domains/game/queries";
 import { GroupAvatar } from "@/domains/group/components/group-avatar";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
+import { GroupSelect } from "@/domains/group/components/group-select";
+import { useSuspenseQueries } from "@tanstack/react-query";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { Fragment, useContext } from "react";
 import { NavItem } from "../header/nav-item";
 import { MobileBreadcrumbsContext } from "./mobile-breadcrumbs";
@@ -11,26 +15,41 @@ interface GroupBreadcrumbProps {
 }
 
 export function GroupBreadcrumb({ groupId }: GroupBreadcrumbProps) {
-  const { data } = useSuspenseQuery(groupGamesQueryOptions(groupId));
+  const [{ data: groupsCount }, { data }] = useSuspenseQueries({
+    queries: [groupsCountQueryOptions(), groupGamesQueryOptions(groupId)],
+  });
+
+  const navigate = useNavigate();
+
+  const handleGroupChange = (groupId: string) => {
+    navigate({
+      to: "/teams/$groupId",
+      params: { groupId },
+    });
+  };
 
   const isMobile = useContext(MobileBreadcrumbsContext);
 
   const Element = isMobile ? NavItem : Fragment;
 
   return (
     <Element>
-      <Link
-        to="/teams/$groupId"
-        params={{ groupId }}
-        className="flex items-center gap-2"
-      >
-        <GroupAvatar
-          avatarUrl={data.avatarUrl}
-          displayName={data.displayName}
-          className={isMobile ? "size-4" : "size-5"}
-        />
-        {data.displayName}
-      </Link>
+      {groupsCount > 1 ? (
+        <GroupSelect value={groupId} onValueChange={handleGroupChange} />
+      ) : (
+        <Link
+          to="/teams/$groupId"
+          params={{ groupId }}
+          className="flex items-center gap-2"
+        >
+          <GroupAvatar
+            avatarUrl={data.avatarUrl}
+            displayName={data.displayName}
+            className={isMobile ? "size-4" : "size-5"}
+          />
+          {data.displayName}
+        </Link>
+      )}
     </Element>
   );
 }

apps/hub/src/domains/game/queries/query-options.tsx

@@ -26,6 +26,13 @@ export const gamesQueryOptions = () => {
   });
 };
 
+export const groupsCountQueryOptions = () => {
+  return queryOptions({
+    ...gamesQueryOptions(),
+    select: (data) => data.groups.length,
+  });
+};
+
 export const groupGamesQueryOptions = (groupId: string) => {
   return queryOptions({
     ...gamesQueryOptions(),