Fix client bugs

1. PostHog can only be used client-side
2. Can't nest <a> tags in the ProjectMenu

app/src/components/nav/ProjectMenu.tsx

@@ -197,26 +197,6 @@ const ProjectOption = ({
       spacing={4}
     >
       <Text>{proj.name}</Text>
-      <IconButton
-        as={Link}
-        href="/project/settings"
-        aria-label={`Open ${proj.name} settings`}
-        icon={
-          <Icon
-            as={BsGear}
-            boxSize={5}
-            strokeWidth={0.5}
-            color={isActive ? "blue.400" : "gray.500"}
-          />
-        }
-        variant="ghost"
-        size="xs"
-        p={0}
-        onMouseEnter={() => setGearHovered(true)}
-        onMouseLeave={() => setGearHovered(false)}
-        _hover={{ bgColor: isActive ? "gray.300" : "gray.100", transitionDelay: 0 }}
-        borderRadius={4}
-      />
     </HStack>
   );
 };

app/src/pages/_app.tsx

@@ -8,7 +8,7 @@ import { ChakraThemeProvider } from "~/theme/ChakraThemeProvider";
 import { SyncAppStore } from "~/state/sync";
 import NextAdapterApp from "next-query-params/app";
 import { QueryParamProvider } from "use-query-params";
-import { SessionIdentifier } from "~/utils/analytics/clientAnalytics";
+import { PosthogAppProvider } from "~/utils/analytics/posthog";
 
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
@@ -34,14 +34,15 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <meta name="twitter:image" content="/og.png" />
       </Head>
       <SessionProvider session={session}>
-        <SyncAppStore />
-        <Favicon />
-        <SessionIdentifier />
-        <ChakraThemeProvider>
-          <QueryParamProvider adapter={NextAdapterApp}>
-            <Component {...pageProps} />
-          </QueryParamProvider>
-        </ChakraThemeProvider>
+        <PosthogAppProvider>
+          <SyncAppStore />
+          <Favicon />
+          <ChakraThemeProvider>
+            <QueryParamProvider adapter={NextAdapterApp}>
+              <Component {...pageProps} />
+            </QueryParamProvider>
+          </ChakraThemeProvider>
+        </PosthogAppProvider>
       </SessionProvider>
     </>
   );

app/src/utils/analytics/clientAnalytics.ts

@@ -1,31 +0,0 @@
-import { type Session } from "next-auth";
-import { useSession } from "next-auth/react";
-import { useEffect } from "react";
-
-import posthog from "posthog-js";
-import { env } from "~/env.mjs";
-
-// Make sure we're in the browser
-const enableBrowserAnalytics = typeof window !== "undefined";
-
-if (env.NEXT_PUBLIC_POSTHOG_KEY && enableBrowserAnalytics) {
-  posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: `${env.NEXT_PUBLIC_HOST}/ingest`,
-  });
-}
-
-export const identifySession = (session: Session) => {
-  if (!session.user) return;
-  posthog.identify(session.user.id, {
-    name: session.user.name,
-    email: session.user.email,
-  });
-};
-
-export const SessionIdentifier = () => {
-  const session = useSession().data;
-  useEffect(() => {
-    if (session && enableBrowserAnalytics) identifySession(session);
-  }, [session]);
-  return null;
-};

app/src/utils/analytics/posthog.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { type Session } from "next-auth";
+import { useSession } from "next-auth/react";
+import React, { ReactNode, useEffect } from "react";
+import { PostHogProvider } from "posthog-js/react";
+
+import posthog from "posthog-js";
+import { env } from "~/env.mjs";
+import { useRouter } from "next/router";
+
+// Make sure we're in the browser
+const inBrowser = typeof window !== "undefined";
+
+export const PosthogAppProvider = ({ children }: { children: ReactNode }) => {
+  const session = useSession().data;
+  const router = useRouter();
+
+  useEffect(() => {
+    // Track page views
+    const handleRouteChange = () => posthog?.capture("$pageview");
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
+
+  useEffect(() => {
+    if (env.NEXT_PUBLIC_POSTHOG_KEY && inBrowser && session && session.user) {
+      posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: `${env.NEXT_PUBLIC_HOST}/ingest`,
+      });
+
+      posthog.identify(session.user.id, {
+        name: session.user.name,
+        email: session.user.email,
+      });
+    }
+  }, [session]);
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+};