[TOOL-3768] Dashboard: Move Nebula from team to project layout (#6608)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the `Nebula` components in the dashboard application by improving layout styles, adding project ID handling in analytics, and adjusting waitlist checks.

### Detailed summary
- Updated class names for better styling in `nebula-analytics-filter.tsx` and `nebula-waitlist-page.tsx`.
- Added `projectId` parameter to `fetchNebulaAnalytics`.
- Modified `NebulaWaitListPageUI` layout.
- Integrated `showNebula` prop in `ProjectSidebarLayout`.
- Adjusted project layout and waitlist checks in `layout.tsx`.
- Enhanced `NebulaAnalyticsPage` to pass `projectId`.
- Updated page handling in `page.tsx` to include project fetching and redirects.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -1,5 +1,5 @@
 import { getProjects } from "@/api/projects";
-import { getTeamNebulaWaitList, getTeams } from "@/api/team";
+import { getTeams } from "@/api/team";
 import { AppFooter } from "@/components/blocks/app-footer";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
@@ -39,9 +39,6 @@ export default async function TeamLayout(props: {
     })),
   );
 
-  const isOnNebulaWaitList = (await getTeamNebulaWaitList(team.slug))
-    ?.onWaitlist;
-
   return (
     <div className="flex h-full grow flex-col">
       <AnnouncementBanner />
@@ -74,14 +71,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",
             },
-            ...(isOnNebulaWaitList
-              ? [
-                  {
-                    path: `/team/${params.team_slug}/~/nebula`,
-                    name: "Nebula",
-                  },
-                ]
-              : []),
             {
               path: `/team/${params.team_slug}/~/usage`,
               name: "Usage",

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -12,12 +12,14 @@ import { ContractIcon } from "../../../../(dashboard)/(chain)/components/server/
 import { InsightIcon } from "../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
 import { PayIcon } from "../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
+import { NebulaIcon } from "../../../../nebula-app/(app)/icons/NebulaIcon";
 
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
   children: React.ReactNode;
+  showNebula: boolean;
 }) {
-  const { layoutPath, children } = props;
+  const { layoutPath, children, showNebula } = props;
 
   const tracking = (label: string) => ({
     category: "project-sidebar",
@@ -60,6 +62,16 @@ export function ProjectSidebarLayout(props: {
           icon: ContractIcon,
           tracking: tracking("contracts"),
         },
+        ...(showNebula
+          ? [
+              {
+                href: `${layoutPath}/nebula`,
+                label: "Nebula",
+                icon: NebulaIcon,
+                tracking: tracking("nebula"),
+              },
+            ]
+          : []),
         {
           href: `${layoutPath}/insight`,
           label: "Insight",

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -1,5 +1,5 @@
 import { getProjects } from "@/api/projects";
-import { getTeams } from "@/api/team";
+import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { redirect } from "next/navigation";
 import { AnnouncementBanner } from "../../../../components/notices/AnnouncementBanner";
@@ -9,7 +9,7 @@ import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logg
 import { ProjectSidebarLayout } from "./components/ProjectSidebarLayout";
 import { SaveLastUsedProject } from "./components/SaveLastUsedProject";
 
-export default async function TeamLayout(props: {
+export default async function ProjectLayout(props: {
   children: React.ReactNode;
   breadcrumbNav: React.ReactNode;
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -49,6 +49,9 @@ export default async function TeamLayout(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
+  const isOnNebulaWaitList = (await getTeamNebulaWaitList(team.slug))
+    ?.onWaitlist;
+
   const layoutPath = `/team/${params.team_slug}/${params.project_slug}`;
 
   return (
@@ -64,7 +67,10 @@ export default async function TeamLayout(props: {
             accountAddress={accountAddress}
           />
         </div>
-        <ProjectSidebarLayout layoutPath={layoutPath}>
+        <ProjectSidebarLayout
+          layoutPath={layoutPath}
+          showNebula={!!isOnNebulaWaitList}
+        >
           {props.children}
         </ProjectSidebarLayout>
       </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/fetch-nebula-analytics.tsx

@@ -12,6 +12,7 @@ export type NebulaAnalyticsDataItem = {
 export const fetchNebulaAnalytics = unstable_cache(
   async (params: {
     teamId: string;
+    projectId: string;
     authToken: string;
     from: string;
     to: string;
@@ -20,6 +21,7 @@ export const fetchNebulaAnalytics = unstable_cache(
     const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
     const url = new URL(`${analyticsEndpoint}/v2/nebula/usage`);
     url.searchParams.set("teamId", params.teamId);
+    url.searchParams.set("projectId", params.projectId);
     url.searchParams.set("from", params.from);
     url.searchParams.set("to", params.to);
     url.searchParams.set("period", params.period);

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-filter.tsx

@@ -22,7 +22,7 @@ export function NebulaAnalyticsFilter() {
   });
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="no-scrollbar flex items-center gap-3 overflow-auto">
       <DateRangeSelector
         range={range}
         popoverAlign="end"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx

@@ -19,11 +19,12 @@ export function NebulaAnalyticsPage(props: {
   };
   teamId: string;
   authToken: string;
+  projectId: string;
 }) {
   return (
     <ResponsiveSearchParamsProvider value={props.searchParams}>
       <header className="border-b">
-        <div className="container flex flex-col items-start gap-4 py-10 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col items-start gap-4 pt-2 pb-6 md:flex-row md:items-center md:justify-between lg:pt-4 lg:pb-10">
           <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
 
           <div className="flex gap-3">
@@ -44,7 +45,7 @@ export function NebulaAnalyticsPage(props: {
         </div>
       </header>
 
-      <div className="container pt-8 pb-20">
+      <div className="pt-8">
         <div className="mb-4 flex flex-col justify-between gap-3 md:flex-row md:items-end">
           <h2 className="font-semibold text-2xl tracking-tight">Analytics</h2>
           <NebulaAnalyticsFilter />
@@ -56,6 +57,7 @@ export function NebulaAnalyticsPage(props: {
           <NebulaAnalyticDashboard
             searchParams={props.searchParams}
             teamId={props.teamId}
+            projectId={props.projectId}
             authToken={props.authToken}
           />
         </ResponsiveSuspense>
@@ -67,6 +69,7 @@ export function NebulaAnalyticsPage(props: {
 async function NebulaAnalyticDashboard(props: {
   teamId: string;
   authToken: string;
+  projectId: string;
   searchParams: {
     from: string | undefined | string[];
     to: string | undefined | string[];
@@ -80,6 +83,7 @@ async function NebulaAnalyticDashboard(props: {
   const res = await fetchNebulaAnalytics({
     teamId: props.teamId,
     authToken: props.authToken,
+    projectId: props.projectId,
     from: normalizeTimeISOString(range.from),
     to: normalizeTimeISOString(range.to),
     // internally renamed

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx

@@ -13,8 +13,8 @@ export function NebulaWaitListPageUI(props: {
     <div className={cn("flex grow flex-col", props.className)}>
       {/* Header */}
       {!props.hideHeader && (
-        <div className="border-b py-10">
-          <div className="container flex items-center justify-between">
+        <div className="border-b pt-4 pb-10">
+          <div className="flex items-center justify-between">
             <h1 className="font-semibold text-3xl tracking-tight"> Nebula </h1>
             <Button asChild variant="outline">
               <Link href="/contact-us" target="_blank">
@@ -25,7 +25,7 @@ export function NebulaWaitListPageUI(props: {
         </div>
       )}
 
-      <div className="container flex grow flex-col overflow-hidden py-32">
+      <div className="flex grow flex-col overflow-hidden py-32">
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx

@@ -46,7 +46,7 @@ function UnexpectedErrorPage(props: {
   message: string;
 }) {
   return (
-    <div className="container flex grow flex-col py-10">
+    <div className="flex grow flex-col py-10">
       <div className="flex min-h-[300px] grow flex-col items-center justify-center rounded-lg border">
         <div className="flex flex-col items-center gap-4">
           <span className="text-destructive-text">{props.message}</span>

apps/dashboard/src/app/team/[team_slug]/(team)/~/nebula/page.tsx renamed to apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx

@@ -1,12 +1,15 @@
+import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../login/loginRedirect";
-import { NebulaAnalyticsPage } from "../../../[project_slug]/nebula/components/analytics/nebula-analytics-page";
-import { NebulaWaitListPage } from "../../../[project_slug]/nebula/components/nebula-waitlist-page";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../login/loginRedirect";
+import { NebulaAnalyticsPage } from "./components/analytics/nebula-analytics-page";
+import { NebulaWaitListPage } from "./components/nebula-waitlist-page";
 
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
+    project_slug: string;
   }>;
   searchParams: Promise<{
     from: string | undefined | string[];
@@ -19,13 +22,22 @@ export default async function Page(props: {
     props.searchParams,
   ]);
 
-  const [authToken, team] = await Promise.all([
+  const [authToken, team, project] = await Promise.all([
     getAuthToken(),
     getTeamBySlug(params.team_slug),
+    getProject(params.team_slug, params.project_slug),
   ]);
 
-  if (!team || !authToken) {
-    loginRedirect(`/team/${params.team_slug}/~/nebula`);
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/nebula`);
   }
 
   const hasNebulaAccess = team.enabledScopes.includes("nebula");
@@ -36,6 +48,7 @@ export default async function Page(props: {
         teamId={team.id}
         authToken={authToken}
         searchParams={searchParams}
+        projectId={project.id}
       />
     );
   }