Skip to content

refactor: split layout into (app) and (funnels) route groups #1598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sidneyswift wants to merge 1 commit into
base: test
Choose a base branch
from
Open

refactor: split layout into (app) and (funnels) route groups #1598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 app/access/page.tsx → app/(app)/access/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/agents/page.tsx → app/(app)/agents/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/artists/page.tsx → app/(app)/artists/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/catalogs/[catalogId]/page.tsx → app/(app)/catalogs/[catalogId]/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/catalogs/page.tsx → app/(app)/catalogs/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/chat/[roomId]/page.tsx → app/(app)/chat/[roomId]/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/chat/page.tsx → app/(app)/chat/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/docs/account/constants.ts → app/(app)/docs/account/constants.ts
View file
Open in desktop
File renamed without changes.
0 app/docs/account/page.tsx → app/(app)/docs/account/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/docs/base/constants.ts → app/(app)/docs/base/constants.ts
View file
Open in desktop
File renamed without changes.
0 app/docs/base/page.tsx → app/(app)/docs/base/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/docs/fans/constants.ts → app/(app)/docs/fans/constants.ts
View file
Open in desktop
File renamed without changes.
0 app/docs/fans/page.tsx → app/(app)/docs/fans/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/docs/posts/constants.ts → app/(app)/docs/posts/constants.ts
View file
Open in desktop
File renamed without changes.
0 app/docs/posts/page.tsx → app/(app)/docs/posts/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/docs/segment_report/constants.ts → app/(app)/docs/segment_report/constants.ts
View file
Open in desktop
File renamed without changes.
0 app/docs/segment_report/page.tsx → app/(app)/docs/segment_report/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/fans/page.tsx → app/(app)/fans/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/files/page.tsx → app/(app)/files/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/keys/page.tsx → app/(app)/keys/page.tsx
View file
Open in desktop
File renamed without changes.
38 changes: 38 additions & 0 deletions app/(app)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Providers from "@/providers/Providers";
import Sidebar from "@/components/Sidebar";
import Header from "@/components/Header";
import { Suspense } from "react";
import ArtistSettingModal from "@/components/ArtistSettingModal";
import MobileDownloadModal from "@/components/ModalDownloadModal";
import ArtistsSidebar from "@/components/Artists/ArtistsSidebar";
import { ToastContainer } from "react-toastify";
import { Toaster } from "sonner";

export default function AppLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<Suspense>
<Providers>
<div className="flex flex-col md:flex-row">
<Sidebar />
<Header />
<ArtistSettingModal />
<div className="grow flex h-[100dvh] pt-16 md:pt-0 md:h-screen overflow-hidden bg-sidebar">
<div className="size-full md:py-4 md:pl-4">
<div className="size-full bg-card overflow-y-auto md:rounded-xl flex flex-col md:shadow-md md:border md:border-border">
{children}
</div>
</div>
<ArtistsSidebar />
</div>
<MobileDownloadModal />
</div>
<ToastContainer />
<Toaster />
</Providers>
</Suspense>
);
}
0 app/offline/page.tsx → app/(app)/offline/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/page.tsx → app/(app)/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/posts/page.tsx → app/(app)/posts/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/privacy/page.tsx → app/(app)/privacy/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/sandboxes/layout.tsx → app/(app)/sandboxes/layout.tsx
View file
Open in desktop
File renamed without changes.
0 app/sandboxes/page.tsx → app/(app)/sandboxes/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/segment/[segmentId]/page.tsx → app/(app)/segment/[segmentId]/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/segments/page.tsx → app/(app)/segments/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/settings/connectors/page.tsx → app/(app)/settings/connectors/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/signin/page.tsx → app/(app)/signin/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/sms/page.tsx → app/(app)/sms/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/tasks/[runId]/page.tsx → app/(app)/tasks/[runId]/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/tasks/page.tsx → app/(app)/tasks/page.tsx
View file
Open in desktop
File renamed without changes.
0 app/terms/page.tsx → app/(app)/terms/page.tsx
View file
Open in desktop
File renamed without changes.
7 changes: 7 additions & 0 deletions app/(funnels)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function FunnelsLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return <div className="min-h-dvh">{children}</div>;
}
14 changes: 14 additions & 0 deletions app/(funnels)/song-drop/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export default function SongDropPage() {
return (
<div className="flex items-center justify-center min-h-dvh">
<div className="text-center space-y-4">
<h1 className="text-4xl font-bold tracking-tight">
Drop your song.
</h1>
<p className="text-lg text-muted-foreground">
We&apos;ll do the rest.
</p>
</div>
</div>
);
}
36 changes: 4 additions & 32 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import type { Metadata, Viewport } from "next";
import "./globals.css";
import "react-toastify/dist/ReactToastify.css";
import Providers from "@/providers/Providers";
import { META_DESCRIPTION, TITLE } from "@/lib/consts";
import Sidebar from "@/components/Sidebar";
import Header from "@/components/Header";
import { Suspense } from "react";
import ArtistSettingModal from "@/components/ArtistSettingModal";
import MobileDownloadModal from "@/components/ModalDownloadModal";
import ArtistsSidebar from "@/components/Artists/ArtistsSidebar";
import { ToastContainer } from "react-toastify";
import { Toaster } from "sonner";
import { Geist, Geist_Mono } from "next/font/google";
import DeferredAnalytics from "@/components/DeferredAnalytics";

Expand Down Expand Up @@ -71,32 +62,13 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html
lang="en"
suppressHydrationWarning
<html
lang="en"
suppressHydrationWarning
className={`${geist.variable} ${geistMono.variable}`}
>
<body className={`${geist.variable} antialiased`}>
<Suspense>
<Providers>
<div className="flex flex-col md:flex-row">
<Sidebar />
<Header />
<ArtistSettingModal />
<div className="grow flex h-[100dvh] pt-16 md:pt-0 md:h-screen overflow-hidden bg-sidebar">
<div className="size-full md:py-4 md:pl-4">
<div className="size-full bg-card overflow-y-auto md:rounded-xl flex flex-col md:shadow-md md:border md:border-border">
{children}
</div>
</div>
<ArtistsSidebar />
</div>
<MobileDownloadModal />
</div>
<ToastContainer />
<Toaster />
</Providers>
</Suspense>
{children}
<DeferredAnalytics />
Comment on lines 70 to 72
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Keep shared providers above the route-group split.

Providers now only wraps the (app) branch (app/(app)/layout.tsx:17-35), but that tree owns ThemeProvider, PrivyProvider, QueryClientProvider, FunnelReportProvider, and PaymentProvider (providers/Providers.tsx:1-52). Every non-(app) route — including the new (funnels) branch — now renders without those contexts, which is a bigger behavior change than just removing the SaaS chrome.

♻️ Suggested direction 
+import Providers from "@/providers/Providers";
...
-      <body className={`${geist.variable} antialiased`}>
-        {children}
+      <body className={`${geist.variable} antialiased`}>
+        <Providers>{children}</Providers>
         <DeferredAnalytics />
       </body>
Then drop the nested `Providers` wrapper from `app/(app)/layout.tsx` so the tree is initialized once.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<body className={`${geist.variable} antialiased`}>
<Suspense>
<Providers>
<div className="flex flex-col md:flex-row">
<Sidebar />
<Header />
<ArtistSettingModal />
<div className="grow flex h-[100dvh] pt-16 md:pt-0 md:h-screen overflow-hidden bg-sidebar">
<div className="size-full md:py-4 md:pl-4">
<div className="size-full bg-card overflow-y-auto md:rounded-xl flex flex-col md:shadow-md md:border md:border-border">
{children}
</div>
</div>
<ArtistsSidebar />
</div>
<MobileDownloadModal />
</div>
<ToastContainer />
<Toaster />
</Providers>
</Suspense>
{children}
<DeferredAnalytics />
import Providers from "@/providers/Providers";
<body className={`${geist.variable} antialiased`}>
<Providers>{children}</Providers>
<DeferredAnalytics />
</body>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/layout.tsx` around lines 70 - 72, The Providers wrapper (which composes
ThemeProvider, PrivyProvider, QueryClientProvider, FunnelReportProvider,
PaymentProvider) was moved inside the (app) route and so non-(app) branches
(e.g., (funnels)) render without those contexts; move the Providers component up
in app/layout.tsx so it wraps the whole route-group split (wrap children and
DeferredAnalytics) and then remove the nested Providers wrapper from
app/(app)/layout.tsx so the provider tree is initialized once for all routes.

</body>
</html>
Expand Down
Loading