main

src/components/search/global-search.tsx

@@ -16,8 +16,10 @@ import { useSearchTeams } from "@/lib/api/leagues/use-hooks";
 import { useRouter } from "@/i18n/navigation";
 import { LuSearch, LuX } from "react-icons/lu";
 import type { TeamDto } from "@/lib/api/leagues/types";
+import { useSession } from "next-auth/react";
 
 export default function GlobalSearch() {
+  const { data: session } = useSession();
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [debouncedQuery, setDebouncedQuery] = useState("");
@@ -35,6 +37,7 @@ export default function GlobalSearch() {
   const borderColor = useColorModeValue("gray.200", "gray.700");
   const hoverBg = useColorModeValue("gray.50", "gray.800");
   const inputBg = useColorModeValue("gray.50", "gray.800");
+  const shortcutBg = useColorModeValue("gray.100", "gray.700");
 
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedQuery(query), 300);
@@ -85,6 +88,12 @@ export default function GlobalSearch() {
     [router],
   );
 
+  // If user is not logged in, don't show the team search,
+  // as it requires auth to view team detail pages.
+  if (!session) {
+    return null;
+  }
+
   return (
     <Box
       ref={containerRef}
@@ -142,7 +151,7 @@ export default function GlobalSearch() {
           fontSize="xs"
           color="fg.muted"
           flexShrink={0}
-          bg={useColorModeValue("gray.100", "gray.700")}
+          bg={shortcutBg}
           px={1.5}
           py={0.5}
           borderRadius="md"