Skip to content

Commit 06d71d6

Browse files
iamjr15iamjr15
committed
refactor(web): composer dedup, shared dismissal, query keys, file splits
1 parent 96e9219 commit 06d71d6

82 files changed

Lines changed: 1614 additions & 1666 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { Cheatcode101SectionView, Cheatcode101Toc } from "@/components/docs/cheatcode-101-sections";
2+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
23
import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
34
import { CHEATCODE_101_SECTIONS, CHEATCODE_101_TAGLINE } from "@/content/cheatcode-101";
45

56
export default function Cheatcode101Page() {
67
return (
7-
<section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background">
8-
<div className="mx-auto flex w-full max-w-3xl px-6">
9-
<aside className="hidden w-44 shrink-0 pt-12 pr-6 lg:block">
8+
<SettingsPageShell width="narrow">
9+
<div className="flex">
10+
<aside className="hidden w-44 shrink-0 pt-6 pr-6 md:pt-2 lg:block">
1011
<Cheatcode101Toc sections={CHEATCODE_101_SECTIONS} />
1112
</aside>
12-
<article className="min-w-0 flex-1 pt-12 pb-24">
13+
<article className="min-w-0 flex-1 pt-6 pb-8 md:pt-2">
1314
<header className="mb-16">
1415
<div className="mb-4 flex items-center gap-2.5 min-[350px]:gap-3">
1516
<CheatcodeMark
@@ -29,6 +30,6 @@ export default function Cheatcode101Page() {
2930
))}
3031
</article>
3132
</div>
32-
</section>
33+
</SettingsPageShell>
3334
);
3435
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { ModelsPanel } from "@/components/settings/models-panel";
2+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
23

34
export default function ModelsPage() {
45
return (
5-
<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">
6-
<div className="mx-auto w-full max-w-[740px]">
7-
<ModelsPanel />
8-
</div>
9-
</section>
6+
<SettingsPageShell width="narrow">
7+
<ModelsPanel />
8+
</SettingsPageShell>
109
);
1110
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { PersonalizationPanel } from "@/components/settings/personalization-panel";
2+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
23

34
export default function PersonalizationPage() {
45
return (
5-
<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">
6-
<div className="mx-auto w-full max-w-[740px]">
7-
<PersonalizationPanel />
8-
</div>
9-
</section>
6+
<SettingsPageShell width="narrow">
7+
<PersonalizationPanel />
8+
</SettingsPageShell>
109
);
1110
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { PricingPanel } from "@/components/settings/pricing-panel";
2+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
23

34
export default function PricingPage() {
45
return (
5-
<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">
6-
<div className="mx-auto w-full max-w-5xl">
7-
<PricingPanel />
8-
</div>
9-
</section>
6+
<SettingsPageShell width="wide">
7+
<PricingPanel />
8+
</SettingsPageShell>
109
);
1110
}

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { Suspense } from "react";
2+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
23
import { IntegrationSkillsCatalog } from "@/components/skills/integration-skills-catalog";
34
import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
45

56
export default function SkillsPage() {
67
return (
7-
<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">
8-
<div className="mx-auto w-full max-w-[740px]">
9-
<Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
10-
<IntegrationSkillsCatalog />
11-
</Suspense>
12-
</div>
13-
</section>
8+
<SettingsPageShell width="narrow">
9+
<Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
10+
<IntegrationSkillsCatalog />
11+
</Suspense>
12+
</SettingsPageShell>
1413
);
1514
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1+
import { SettingsPageShell } from "@/components/settings/settings-page-shell";
12
import { UsagePanel } from "@/components/settings/usage-panel";
23

34
export default function UsagePage() {
45
return (
5-
<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">
6-
<div className="mx-auto w-full max-w-5xl">
7-
<UsagePanel />
8-
</div>
9-
</section>
6+
<SettingsPageShell width="wide">
7+
<UsagePanel />
8+
</SettingsPageShell>
109
);
1110
}

‎apps/web/src/app/layout.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { env } from "@cheatcode/env/web";
22
import { PRODUCTION_APP_ORIGIN } from "@cheatcode/env/web-config";
33
import { ClerkProvider } from "@clerk/nextjs";
4+
import { auth } from "@clerk/nextjs/server";
45
import { ui } from "@clerk/ui";
56
import { GeistMono } from "geist/font/mono";
67
import { GeistSans } from "geist/font/sans";
78
import type { Metadata } from "next";
8-
import type { ReactNode } from "react";
9+
import { type ReactNode, Suspense } from "react";
910
import "./globals.css";
1011
import "./effects.css";
1112
import { ClientObservability } from "@/components/observability/client-observability";
@@ -31,8 +32,9 @@ export const metadata: Metadata = {
3132
},
3233
};
3334

34-
export default async function RootLayout({ children }: { children: ReactNode }) {
35+
export default function RootLayout({ children }: { children: ReactNode }) {
3536
const clerkPublishableKey = env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
37+
const sessionPromise = auth().then(({ orgId, userId }) => ({ orgId: orgId ?? null, userId }));
3638

3739
return (
3840
<html
@@ -54,10 +56,12 @@ export default async function RootLayout({ children }: { children: ReactNode })
5456
signUpUrl="/sign-up"
5557
ui={ui}
5658
>
57-
<Providers>
58-
<ClientObservability />
59-
{children}
60-
</Providers>
59+
<Suspense>
60+
<Providers sessionPromise={sessionPromise}>
61+
<ClientObservability />
62+
{children}
63+
</Providers>
64+
</Suspense>
6165
</ClerkProvider>
6266
</body>
6367
</html>

‎apps/web/src/app/providers.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
"use client";
22

3-
import { useAuth } from "@clerk/nextjs";
43
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
54
import dynamic from "next/dynamic";
65
import { ThemeProvider } from "next-themes";
76
import { NuqsAdapter } from "nuqs/adapters/next/app";
87
import type { ReactNode } from "react";
9-
import { useEffect, useLayoutEffect, useState } from "react";
8+
import { use, useEffect, useLayoutEffect, useState } from "react";
109
import { Toaster } from "sonner";
1110
import { useAppStore } from "@/lib/store/app-store";
1211
import { useChatTabsStore } from "@/lib/store/chat-tabs-store";
@@ -17,22 +16,39 @@ const CommandPalette = dynamic(
1716
{ ssr: false },
1817
);
1918

20-
export function Providers({ children }: { children: ReactNode }) {
19+
interface RootSession {
20+
orgId: null | string;
21+
userId: null | string;
22+
}
23+
24+
export function Providers({
25+
children,
26+
sessionPromise,
27+
}: {
28+
children: ReactNode;
29+
sessionPromise: Promise<RootSession>;
30+
}) {
2131
return (
2232
<NuqsAdapter>
2333
<ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange enableSystem>
24-
<IdentityQueryProvider>{children}</IdentityQueryProvider>
34+
<IdentityQueryProvider sessionPromise={sessionPromise}>{children}</IdentityQueryProvider>
2535
</ThemeProvider>
2636
</NuqsAdapter>
2737
);
2838
}
2939

30-
function IdentityQueryProvider({ children }: { children: ReactNode }) {
31-
const { isLoaded, orgId, userId } = useAuth();
32-
const identity = isLoaded ? `${userId ?? "anonymous"}:${orgId ?? "personal"}` : "loading";
40+
function IdentityQueryProvider({
41+
children,
42+
sessionPromise,
43+
}: {
44+
children: ReactNode;
45+
sessionPromise: Promise<RootSession>;
46+
}) {
47+
const { orgId, userId } = use(sessionPromise);
48+
const identity = `${userId ?? "anonymous"}:${orgId ?? "personal"}`;
3349

3450
return (
35-
<IdentityQueryBoundary key={identity} showCommandPalette={Boolean(isLoaded && userId)}>
51+
<IdentityQueryBoundary key={identity} showCommandPalette={Boolean(userId)}>
3652
{children}
3753
</IdentityQueryBoundary>
3854
);

0 commit comments

Comments
 (0)