refactor: move side effect components to bottom

Author: pan93412

app/(app)/layout.tsx

@@ -8,14 +8,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <ProtectedRoute>
       <AuthorizedApolloWrapper>
-        <PostHogIdentifier />
         <AppShell>
           <div className="mx-auto w-full max-w-7xl flex-1 p-3">
             <ViewTransition name="app-content">
               <div suppressHydrationWarning>{children}</div>
             </ViewTransition>
           </div>
         </AppShell>
+        <PostHogIdentifier />
       </AuthorizedApolloWrapper>
     </ProtectedRoute>
   );

app/login/page.tsx

@@ -22,9 +22,6 @@ export default async function LoginPage() {
         lg:px-14 lg:py-8
       `}
     >
-      {/* Reset the session on the login page */}
-      <PostHogResetter />
-
       <div className="flex max-w-sm flex-1 flex-col justify-center gap-6">
         <Link
           href="/"
@@ -66,6 +63,9 @@ export default async function LoginPage() {
           </div>
         </div>
       </div>
+
+      {/* Reset the session on the login page */}
+      <PostHogResetter />
     </div>
   );
 }

instrumentation-client.ts

@@ -2,7 +2,7 @@ import posthog from "posthog-js";
 
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
   api_host: "/ingest",
-  ui_host: "https://us.posthog.com",
+  ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
   defaults: "2025-05-24",
   capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
   debug: process.env.NODE_ENV === "development",