refactor: project details layout + params page

app/projects/[id]/[tab]/page.tsx

@@ -0,0 +1 @@
+export { ProjectParamsPage as default } from '~/projects/pages/project-params-page';

app/projects/[id]/layout.tsx

@@ -0,0 +1,11 @@
+import { ProjectDetailsLayout } from '~/projects/layouts/project-details-layout';
+
+interface Props {
+  params: { id: string };
+  children: React.ReactNode;
+}
+
+const Layout = ({ children, params: { id } }: Props) => {
+  return <ProjectDetailsLayout id={id}>{children}</ProjectDetailsLayout>;
+};
+export default Layout;

src/projects/components/init-project-details-syncer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 
 import { useAtom } from 'jotai';

src/projects/components/project-details-panel-header.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { DetailsPanelHeader } from '~/shared/components/details-panel/header';
+import { DetailsPanelHeaderSkeleton } from '~/shared/components/details-panel/header-skeleton';
+
+import { useProjectDetails } from '~/projects/hooks/use-project-details';
+
+interface Props {
+  id: string;
+}
+
+export const ProjectDetailsPanelHeader = ({ id }: Props) => {
+  const { data } = useProjectDetails(id);
+
+  if (!data) return <DetailsPanelHeaderSkeleton />;
+
+  return <DetailsPanelHeader org={data.organization} />;
+};

src/projects/components/project-tabs.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { HREFS, ROUTE_TABS } from '~/shared/core/constants';
+import { DetailsPanelTabs } from '~/shared/components/details-panel/tabs';
+
+interface Props {
+  id: string;
+}
+
+export const ProjectTabs = ({ id }: Props) => {
+  const prefix = `${HREFS.PROJECTS_PAGE}/${id}`;
+  const tabs = projectTabs.map((tab) => ({
+    ...tab,
+    href: `${prefix}${tab.href}`,
+  }));
+
+  return <DetailsPanelTabs tabs={tabs} />;
+};
+
+const projectTabs = [
+  { text: `Project Details`, href: `/${ROUTE_TABS.SHARED.DETAILS}` },
+  { text: `Organization`, href: `/${ROUTE_TABS.SHARED.ORG}` },
+];

src/projects/layouts/project-details-layout.tsx

@@ -0,0 +1,36 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+
+import { HREFS } from '~/shared/core/constants';
+import { getQueryClient } from '~/shared/utils/get-query-client';
+import { DetailsPanelLayout } from '~/shared/components/details-panel/layout';
+
+import { projectQueryKeys } from '~/projects/core/query-keys';
+import { getProjectDetails } from '~/projects/api/get-project-details';
+import { InitProjectDetailsSyncer } from '~/projects/components/init-project-details-syncer';
+import { ProjectDetailsPanelHeader } from '~/projects/components/project-details-panel-header';
+import { ProjectTabs } from '~/projects/components/project-tabs';
+
+interface Props {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const ProjectDetailsLayout = async ({ id, children }: Props) => {
+  const queryClient = getQueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: projectQueryKeys.details(id),
+    queryFn: () => getProjectDetails({ projectId: id }),
+  });
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <DetailsPanelLayout backHref={HREFS.PROJECTS_PAGE}>
+        <InitProjectDetailsSyncer id={id} />
+        <ProjectDetailsPanelHeader id={id} />
+        <ProjectTabs id={id} />
+        {children}
+      </DetailsPanelLayout>
+    </HydrationBoundary>
+  );
+};

src/projects/pages/project-params-page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { ROUTE_TABS } from '~/shared/core/constants';
+
+import { useProjectDetails } from '~/projects/hooks/use-project-details';
+
+interface Props {
+  params: {
+    id: string;
+    tab: string;
+  };
+}
+
+export const ProjectParamsPage = ({ params: { id, tab } }: Props) => {
+  const { data } = useProjectDetails(id);
+
+  if (!data) return null;
+
+  if (tab === ROUTE_TABS.SHARED.DETAILS) return <p>ProjectDetailsCard</p>;
+  if (tab === ROUTE_TABS.SHARED.ORG) return <p>ProjectOrgCard</p>;
+
+  return null;
+};