refactor(web): use posthog-js/react useFeatureFlagEnabled for flag gating

apps/web/app/(app)/onboarding/page.tsx

@@ -15,7 +15,7 @@ import {
 	type SourcesValues,
 } from "@/components/onboarding-brain/step-sources"
 import { StepIngest } from "@/components/onboarding-brain/step-ingest"
-import { useFeatureFlag } from "@/hooks/use-feature-flag"
+import { useFeatureFlagEnabled } from "posthog-js/react"
 import {
 	StepTeam,
 	type TeamValues,
@@ -66,7 +66,7 @@ export default function BrainOnboardingPage() {
 	)
 
 	// Team (Company Brain) onboarding is gated behind a private-beta flag.
-	const allowTeam = useFeatureFlag("company-brain-beta")
+	const allowTeam = useFeatureFlagEnabled("company-brain-beta") ?? false
 	const [mode, setMode] = useState<BrainMode>(detectedMode)
 	const [about, setAbout] = useState<AboutValues>({
 		name: user?.name ?? "",

apps/web/hooks/use-feature-flag.ts

@@ -1,14 +0,0 @@
-import posthog from "posthog-js"
-import { useEffect, useState } from "react"
-
-// Reactive PostHog boolean flag via the global singleton (the app uses a custom
-// provider, so posthog-js/react hooks have no context). Unloaded/undefined = false.
-export function useFeatureFlag(key: string): boolean {
-	const [enabled, setEnabled] = useState(false)
-	useEffect(() => {
-		const sync = () => setEnabled(posthog.isFeatureEnabled?.(key) === true)
-		sync()
-		return posthog.onFeatureFlags(() => sync())
-	}, [key])
-	return enabled
-}

packages/lib/posthog.tsx

@@ -2,6 +2,7 @@
 
 import { usePathname, useSearchParams } from "next/navigation"
 import posthog from "posthog-js"
+import { PostHogProvider as PHProvider } from "posthog-js/react"
 import { Suspense, useEffect } from "react"
 import { useSession } from "./auth"
 
@@ -65,12 +66,12 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
 	}, [session?.user])
 
 	return (
-		<>
+		<PHProvider client={posthog}>
 			<Suspense fallback={null}>
 				{process.env.NODE_ENV === "production" && <PostHogPageTracking />}
 			</Suspense>
 			{children}
-		</>
+		</PHProvider>
 	)
 }