From 89549c98573607b3250e75975c2fc013e49c9b58 Mon Sep 17 00:00:00 2001
From: Lucas Doell <lucas@lux.dev>
Date: Thu, 26 Feb 2026 23:13:57 -0500
Subject: [PATCH 1/4] Add FeatureFlagsProvider component for managing feature
 flags in the application

---
 src/components/feature-flags-provider.tsx | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/feature-flags-provider.tsx

diff --git a/src/components/feature-flags-provider.tsx b/src/components/feature-flags-provider.tsx
new file mode 100644
index 000000000..847b888bc
--- /dev/null
+++ b/src/components/feature-flags-provider.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { createContext, use, useMemo } from "react";
+
+type FeatureFlags = {
+  scoutingEnabled: boolean;
+};
+
+const FeatureFlagsContext = createContext<FeatureFlags>({
+  scoutingEnabled: false,
+});
+
+export function FeatureFlagsProvider({
+  children,
+  scoutingEnabled,
+}: {
+  children: React.ReactNode;
+  scoutingEnabled: boolean;
+}) {
+  const value = useMemo(() => ({ scoutingEnabled }), [scoutingEnabled]);
+
+  return <FeatureFlagsContext value={value}>{children}</FeatureFlagsContext>;
+}
+
+export function useFeatureFlags() {
+  return use(FeatureFlagsContext);
+}

From 2061b530add8e9935d72fa4bde2bd2732844e06b Mon Sep 17 00:00:00 2001
From: Lucas Doell <lucas@lux.dev>
Date: Thu, 26 Feb 2026 23:14:29 -0500
Subject: [PATCH 2/4] Wrap DashboardLayout component with FeatureFlagsProvider
 to manage feature flags and enhance conditional rendering

---
 src/components/dashboard-layout.tsx | 83 +++++++++++++++--------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/components/dashboard-layout.tsx b/src/components/dashboard-layout.tsx
index 0263fd93f..8946eabde 100644
--- a/src/components/dashboard-layout.tsx
+++ b/src/components/dashboard-layout.tsx
@@ -1,6 +1,7 @@
 import { MainNav } from "@/components/dashboard/main-nav";
 import { Search } from "@/components/dashboard/search";
 import { TeamSwitcher } from "@/components/dashboard/team-switcher";
+import { FeatureFlagsProvider } from "@/components/feature-flags-provider";
 import { Footer } from "@/components/footer";
 import { GuestNav } from "@/components/guest-nav";
 import { LocaleSwitcher } from "@/components/locale-switcher";
@@ -26,49 +27,51 @@ export async function DashboardLayout({
   const scoutingEnabled = await scoutingTool();
 
   return (
-    <TeamSwitcherProvider>
-      <div className="min-h-[90vh] flex-col md:flex">
-        <div className="border-b">
-          <div className="hidden h-16 items-center px-4 md:flex">
-            <TeamSwitcher session={session} />
-            <MainNav
-              scoutingEnabled={scoutingEnabled}
-              className="mx-6 hidden lg:block"
-            />
-            <MobileNav className="block pl-2 lg:hidden" session={session} />
-            <div className="ml-auto flex items-center space-x-4">
-              <Search user={user} />
-              <ModeToggle />
-              <LocaleSwitcher />
-              {session ? (
-                <>
-                  <Notifications />
-                  <UserNav />
-                </>
-              ) : (
-                <GuestNav guestMode={guestMode ?? false} />
-              )}
+    <FeatureFlagsProvider scoutingEnabled={scoutingEnabled}>
+      <TeamSwitcherProvider>
+        <div className="min-h-[90vh] flex-col md:flex">
+          <div className="border-b">
+            <div className="hidden h-16 items-center px-4 md:flex">
+              <TeamSwitcher session={session} />
+              <MainNav
+                scoutingEnabled={scoutingEnabled}
+                className="mx-6 hidden lg:block"
+              />
+              <MobileNav className="block pl-2 lg:hidden" session={session} />
+              <div className="ml-auto flex items-center space-x-4">
+                <Search user={user} />
+                <ModeToggle />
+                <LocaleSwitcher />
+                {session ? (
+                  <>
+                    <Notifications />
+                    <UserNav />
+                  </>
+                ) : (
+                  <GuestNav guestMode={guestMode ?? false} />
+                )}
+              </div>
             </div>
-          </div>
-          <div className="flex h-16 items-center px-4 md:hidden">
-            <MobileNav session={session} />
-            <div className="ml-auto flex items-center space-x-4">
-              <ModeToggle />
-              <LocaleSwitcher />
-              {session ? (
-                <>
-                  <Notifications />
-                  <UserNav />
-                </>
-              ) : (
-                <GuestNav guestMode={guestMode ?? false} />
-              )}
+            <div className="flex h-16 items-center px-4 md:hidden">
+              <MobileNav session={session} />
+              <div className="ml-auto flex items-center space-x-4">
+                <ModeToggle />
+                <LocaleSwitcher />
+                {session ? (
+                  <>
+                    <Notifications />
+                    <UserNav />
+                  </>
+                ) : (
+                  <GuestNav guestMode={guestMode ?? false} />
+                )}
+              </div>
             </div>
           </div>
+          {children}
         </div>
-        {children}
-      </div>
-      <Footer />
-    </TeamSwitcherProvider>
+        <Footer />
+      </TeamSwitcherProvider>
+    </FeatureFlagsProvider>
   );
 }

From 5cc007193951cd780a16e19ff679f2a95055edea Mon Sep 17 00:00:00 2001
From: Lucas Doell <lucas@lux.dev>
Date: Thu, 26 Feb 2026 23:18:46 -0500
Subject: [PATCH 3/4] Integrate feature flag for scouting in ScrimCreationForm
 to conditionally render components based on feature availability

---
 src/components/dashboard/scrim-creator.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/scrim-creator.tsx b/src/components/dashboard/scrim-creator.tsx
index af41c3241..afad92981 100644
--- a/src/components/dashboard/scrim-creator.tsx
+++ b/src/components/dashboard/scrim-creator.tsx
@@ -26,6 +26,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useFeatureFlags } from "@/components/feature-flags-provider";
 import { parseData } from "@/lib/parser";
 import { cn, detectFileCorruption } from "@/lib/utils";
 import { heroRoleMapping } from "@/types/heroes";
@@ -70,6 +71,7 @@ export function ScrimCreationForm({
 }: {
   setOpen: (open: boolean) => void;
 }) {
+  const { scoutingEnabled } = useFeatureFlags();
   const [mapData, setMapData] = useState<ParserData>();
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -362,7 +364,7 @@ export function ScrimCreationForm({
         />
 
         {/* Opponent (OWCS) + Map upload — side by side */}
-        {scoutingTeams.length > 0 && (
+        {scoutingEnabled && scoutingTeams.length > 0 && (
           <Controller
             control={form.control}
             name="opponentTeamAbbr"
@@ -389,7 +391,11 @@ export function ScrimCreationForm({
             <Field
               data-invalid={fieldState.invalid}
               id="docs-demo-step6"
-              className={scoutingTeams.length === 0 ? "col-span-2" : undefined}
+              className={
+                !scoutingEnabled || scoutingTeams.length === 0
+                  ? "col-span-2"
+                  : undefined
+              }
             >
               <FieldLabel htmlFor={field.name}>{t("mapName")}</FieldLabel>
               <Input

From b9b84d5db77e260546d20850957ddcc3b68ae8d5 Mon Sep 17 00:00:00 2001
From: Lucas Doell <lucas@lux.dev>
Date: Thu, 26 Feb 2026 23:21:47 -0500
Subject: [PATCH 4/4] Refactor MainNav component to replace NavigationMenu with
 a custom dropdown for stats, enhancing accessibility and styling

---
 src/components/dashboard/main-nav.tsx | 280 +++++++++++---------------
 1 file changed, 122 insertions(+), 158 deletions(-)

diff --git a/src/components/dashboard/main-nav.tsx b/src/components/dashboard/main-nav.tsx
index 5708cce9c..b2d905359 100644
--- a/src/components/dashboard/main-nav.tsx
+++ b/src/components/dashboard/main-nav.tsx
@@ -1,18 +1,17 @@
 "use client";
 
 import { Link } from "@/components/ui/link";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu";
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 
+const navLinkStyles =
+  "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors";
+
+const dropdownItemStyles =
+  "hover:bg-accent hover:text-accent-foreground flex w-full items-center rounded-sm px-2 py-1.5 text-sm transition-colors";
+
 export function MainNav({
   scoutingEnabled,
   className,
@@ -21,196 +20,161 @@ export function MainNav({
   const t = useTranslations("dashboard.mainNav");
 
   return (
-    <NavigationMenu
-      className={cn("flex items-center", className)}
-      viewport={false}
-    >
-      <NavigationMenuList className="flex-wrap space-x-2 lg:space-x-4">
-        <NavigationMenuItem asChild>
+    <nav className={cn("flex items-center", className)}>
+      <ul className="flex flex-wrap items-center space-x-2 lg:space-x-4">
+        <li>
           <Link
             href="/dashboard"
             className={cn(
-              "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-              pathname === "/dashboard"
-                ? "text-primary"
-                : "text-muted-foreground"
+              navLinkStyles,
+              pathname === "/dashboard" && "text-primary"
             )}
           >
             {t("dashboard")}
           </Link>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger
+        </li>
+        <li className="group relative">
+          <button
+            type="button"
             className={cn(
-              "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-              pathname.startsWith("/stats")
-                ? "text-primary"
-                : "text-muted-foreground"
+              navLinkStyles,
+              "inline-flex items-center gap-1",
+              pathname.startsWith("/stats") && "text-primary"
             )}
           >
             {t("stats")}
-          </NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <ul className="grid w-[200px]">
-              <li>
-                <NavigationMenuLink asChild>
-                  <Link
-                    href="/stats"
-                    className={cn(
-                      "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                      /^\/stats\/(?!hero$|team$|compare$)[^\/]+$/.test(
-                        pathname
-                      ) || pathname === "/stats"
-                        ? "text-primary"
-                        : "text-muted-foreground"
-                    )}
-                  >
-                    {t("playerStats")}
-                  </Link>
-                </NavigationMenuLink>
-                <NavigationMenuLink asChild>
-                  <Link
-                    href="/stats/hero"
-                    className={cn(
-                      "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                      pathname.startsWith("/stats/hero")
-                        ? "text-primary"
-                        : "text-muted-foreground"
-                    )}
-                  >
-                    {t("heroStats")}
-                  </Link>
-                </NavigationMenuLink>
-                <NavigationMenuLink asChild>
-                  <Link
-                    href="/stats/team"
-                    className={cn(
-                      "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                      pathname.startsWith("/stats/team")
-                        ? "text-primary"
-                        : "text-muted-foreground"
-                    )}
-                  >
-                    {t("teamStats")}
-                  </Link>
-                </NavigationMenuLink>
-                <NavigationMenuLink asChild>
-                  <Link
-                    href="/stats/compare"
-                    className={cn(
-                      "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                      pathname === "/stats/compare"
-                        ? "text-primary"
-                        : "text-muted-foreground"
-                    )}
-                  >
-                    {t("compareStats")}
-                  </Link>
-                </NavigationMenuLink>
-              </li>
-            </ul>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-        <NavigationMenuItem asChild>
+            <ChevronDownIcon
+              className="size-3 transition-transform duration-200 group-focus-within:rotate-180 group-hover:rotate-180"
+              aria-hidden="true"
+            />
+          </button>
+          <div className="invisible absolute top-full left-0 z-50 pt-1 opacity-0 transition-[opacity,visibility] duration-150 group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+            <div className="bg-popover text-popover-foreground ring-foreground/10 w-[200px] rounded-md p-1 shadow-md ring-1">
+              <Link
+                href="/stats"
+                className={cn(
+                  dropdownItemStyles,
+                  (/^\/stats\/(?!hero$|team$|compare$)[^\/]+$/.test(pathname) ||
+                    pathname === "/stats") &&
+                    "text-primary"
+                )}
+              >
+                {t("playerStats")}
+              </Link>
+              <Link
+                href="/stats/hero"
+                className={cn(
+                  dropdownItemStyles,
+                  pathname.startsWith("/stats/hero") && "text-primary"
+                )}
+              >
+                {t("heroStats")}
+              </Link>
+              <Link
+                href="/stats/team"
+                className={cn(
+                  dropdownItemStyles,
+                  pathname.startsWith("/stats/team") && "text-primary"
+                )}
+              >
+                {t("teamStats")}
+              </Link>
+              <Link
+                href="/stats/compare"
+                className={cn(
+                  dropdownItemStyles,
+                  pathname === "/stats/compare" && "text-primary"
+                )}
+              >
+                {t("compareStats")}
+              </Link>
+            </div>
+          </div>
+        </li>
+        <li>
           <Link
             href="/leaderboard"
             className={cn(
-              "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-              pathname === "/leaderboard"
-                ? "text-primary"
-                : "text-muted-foreground"
+              navLinkStyles,
+              pathname === "/leaderboard" && "text-primary"
             )}
           >
             {t("leaderboard")}
           </Link>
-        </NavigationMenuItem>
-        <NavigationMenuItem asChild>
+        </li>
+        <li>
           <Link
             href="/team"
             className={cn(
-              "hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-              pathname.split("/")[1] === "team"
-                ? "text-primary"
-                : "text-muted-foreground"
+              navLinkStyles,
+              pathname.split("/")[1] === "team" && "text-primary"
             )}
           >
             {t("teams")}
           </Link>
-        </NavigationMenuItem>
+        </li>
         {scoutingEnabled && (
-          <NavigationMenuItem>
-            <NavigationMenuTrigger
+          <li className="group relative">
+            <button
+              type="button"
               className={cn(
-                "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                pathname.startsWith("/scouting")
-                  ? "text-primary"
-                  : "text-muted-foreground"
+                navLinkStyles,
+                "inline-flex items-center gap-1",
+                pathname.startsWith("/scouting") && "text-primary"
               )}
             >
               {t("scouting")}
-            </NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[200px]">
-                <li>
-                  <NavigationMenuLink asChild>
-                    <Link
-                      href="/scouting"
-                      className={cn(
-                        "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                        /^\/scouting\/(?!player$|team$)[^\/]+$/.test(
-                          pathname
-                        ) || pathname === "/scouting"
-                          ? "text-primary"
-                          : "text-muted-foreground"
-                      )}
-                    >
-                      {t("scoutTeam")}
-                    </Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link
-                      href="/scouting/player"
-                      className={cn(
-                        "text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors",
-                        pathname.startsWith("/scouting/player")
-                          ? "text-primary"
-                          : "text-muted-foreground"
-                      )}
-                    >
-                      {t("scoutPlayer")}
-                    </Link>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
+              <ChevronDownIcon
+                className="size-3 transition-transform duration-200 group-focus-within:rotate-180 group-hover:rotate-180"
+                aria-hidden="true"
+              />
+            </button>
+            <div className="invisible absolute top-full left-0 z-50 pt-1 opacity-0 transition-[opacity,visibility] duration-150 group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+              <div className="bg-popover text-popover-foreground ring-foreground/10 w-[200px] rounded-md p-1 shadow-md ring-1">
+                <Link
+                  href="/scouting"
+                  className={cn(
+                    dropdownItemStyles,
+                    (/^\/scouting\/(?!player$|team$)[^\/]+$/.test(pathname) ||
+                      pathname === "/scouting") &&
+                      "text-primary"
+                  )}
+                >
+                  {t("scoutTeam")}
+                </Link>
+                <Link
+                  href="/scouting/player"
+                  className={cn(
+                    dropdownItemStyles,
+                    pathname.startsWith("/scouting/player") && "text-primary"
+                  )}
+                >
+                  {t("scoutPlayer")}
+                </Link>
+              </div>
+            </div>
+          </li>
         )}
-        <NavigationMenuItem asChild>
-          <Link
-            href="/settings"
-            className="text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors"
-          >
+        <li>
+          <Link href="/settings" className={navLinkStyles}>
             {t("settings")}
           </Link>
-        </NavigationMenuItem>
-        <NavigationMenuItem asChild>
-          <Link
-            href="/contact"
-            className="text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors"
-          >
+        </li>
+        <li>
+          <Link href="/contact" className={navLinkStyles}>
             {t("contact")}
           </Link>
-        </NavigationMenuItem>
-        <NavigationMenuItem asChild>
+        </li>
+        <li>
           <Link
             href="https://docs.parsertime.app"
             target="_blank"
-            className="text-muted-foreground hover:text-primary px-1 py-1 text-sm font-medium transition-colors"
+            className={navLinkStyles}
           >
             {t("docs")}
           </Link>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
+        </li>
+      </ul>
+    </nav>
   );
 }