refactor: wave d web consolidation

apps/web/src/app/(app)/101/page.tsx

@@ -1,15 +1,16 @@
 import { Cheatcode101SectionView, Cheatcode101Toc } from "@/components/docs/cheatcode-101-sections";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 import { CHEATCODE_101_SECTIONS, CHEATCODE_101_TAGLINE } from "@/content/cheatcode-101";
 
 export default function Cheatcode101Page() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background">
-      <div className="mx-auto flex w-full max-w-3xl px-6">
-        <aside className="hidden w-44 shrink-0 pt-12 pr-6 lg:block">
+    <SettingsPageShell width="narrow">
+      <div className="flex">
+        <aside className="hidden w-44 shrink-0 pt-6 pr-6 md:pt-2 lg:block">
           <Cheatcode101Toc sections={CHEATCODE_101_SECTIONS} />
         </aside>
-        <article className="min-w-0 flex-1 pt-12 pb-24">
+        <article className="min-w-0 flex-1 pt-6 pb-8 md:pt-2">
           <header className="mb-16">
             <div className="mb-4 flex items-center gap-2.5 min-[350px]:gap-3">
               <CheatcodeMark
@@ -29,6 +30,6 @@ export default function Cheatcode101Page() {
           ))}
         </article>
       </div>
-    </section>
+    </SettingsPageShell>
   );
 }

apps/web/src/app/(app)/models/page.tsx

@@ -1,11 +1,10 @@
 import { ModelsPanel } from "@/components/settings/models-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function ModelsPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <ModelsPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <ModelsPanel />
+    </SettingsPageShell>
   );
 }

apps/web/src/app/(app)/personalization/page.tsx

@@ -1,11 +1,10 @@
 import { PersonalizationPanel } from "@/components/settings/personalization-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function PersonalizationPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <PersonalizationPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <PersonalizationPanel />
+    </SettingsPageShell>
   );
 }

apps/web/src/app/(app)/pricing/page.tsx

@@ -1,11 +1,10 @@
 import { PricingPanel } from "@/components/settings/pricing-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function PricingPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground md:pt-10">
-      <div className="mx-auto w-full max-w-5xl">
-        <PricingPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="wide">
+      <PricingPanel />
+    </SettingsPageShell>
   );
 }

apps/web/src/app/(app)/skills/page.tsx

@@ -1,15 +1,14 @@
 import { Suspense } from "react";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { IntegrationSkillsCatalog } from "@/components/skills/integration-skills-catalog";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 
 export default function SkillsPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
-          <IntegrationSkillsCatalog />
-        </Suspense>
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
+        <IntegrationSkillsCatalog />
+      </Suspense>
+    </SettingsPageShell>
   );
 }

apps/web/src/app/(app)/usage/page.tsx

@@ -1,11 +1,10 @@
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { UsagePanel } from "@/components/settings/usage-panel";
 
 export default function UsagePage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground md:pt-10">
-      <div className="mx-auto w-full max-w-5xl">
-        <UsagePanel />
-      </div>
-    </section>
+    <SettingsPageShell width="wide">
+      <UsagePanel />
+    </SettingsPageShell>
   );
 }

apps/web/src/app/layout.tsx

@@ -1,11 +1,12 @@
 import { env } from "@cheatcode/env/web";
 import { PRODUCTION_APP_ORIGIN } from "@cheatcode/env/web-config";
 import { ClerkProvider } from "@clerk/nextjs";
+import { auth } from "@clerk/nextjs/server";
 import { ui } from "@clerk/ui";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
-import type { ReactNode } from "react";
+import { type ReactNode, Suspense } from "react";
 import "./globals.css";
 import "./effects.css";
 import { ClientObservability } from "@/components/observability/client-observability";
@@ -31,8 +32,9 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   const clerkPublishableKey = env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  const sessionPromise = auth().then(({ orgId, userId }) => ({ orgId: orgId ?? null, userId }));
 
   return (
     <html
@@ -54,10 +56,12 @@ export default async function RootLayout({ children }: { children: ReactNode })
           signUpUrl="/sign-up"
           ui={ui}
         >
-          <Providers>
-            <ClientObservability />
-            {children}
-          </Providers>
+          <Suspense>
+            <Providers sessionPromise={sessionPromise}>
+              <ClientObservability />
+              {children}
+            </Providers>
+          </Suspense>
         </ClerkProvider>
       </body>
     </html>

apps/web/src/app/providers.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useAuth } from "@clerk/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import dynamic from "next/dynamic";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { use, useEffect, useLayoutEffect, useState } from "react";
 import { Toaster } from "sonner";
 import { useAppStore } from "@/lib/store/app-store";
 import { useChatTabsStore } from "@/lib/store/chat-tabs-store";
@@ -17,22 +16,39 @@ const CommandPalette = dynamic(
   { ssr: false },
 );
 
-export function Providers({ children }: { children: ReactNode }) {
+interface RootSession {
+  orgId: null | string;
+  userId: null | string;
+}
+
+export function Providers({
+  children,
+  sessionPromise,
+}: {
+  children: ReactNode;
+  sessionPromise: Promise<RootSession>;
+}) {
   return (
     <NuqsAdapter>
       <ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange enableSystem>
-        <IdentityQueryProvider>{children}</IdentityQueryProvider>
+        <IdentityQueryProvider sessionPromise={sessionPromise}>{children}</IdentityQueryProvider>
       </ThemeProvider>
     </NuqsAdapter>
   );
 }
 
-function IdentityQueryProvider({ children }: { children: ReactNode }) {
-  const { isLoaded, orgId, userId } = useAuth();
-  const identity = isLoaded ? `${userId ?? "anonymous"}:${orgId ?? "personal"}` : "loading";
+function IdentityQueryProvider({
+  children,
+  sessionPromise,
+}: {
+  children: ReactNode;
+  sessionPromise: Promise<RootSession>;
+}) {
+  const { orgId, userId } = use(sessionPromise);
+  const identity = `${userId ?? "anonymous"}:${orgId ?? "personal"}`;
 
   return (
-    <IdentityQueryBoundary key={identity} showCommandPalette={Boolean(isLoaded && userId)}>
+    <IdentityQueryBoundary key={identity} showCommandPalette={Boolean(userId)}>
       {children}
     </IdentityQueryBoundary>
   );