{
);
});
-AnalyticsPage.getLayout = function getLayout(page: ReactElement) {
- return
}>{page};
-};
-
-export default AnalyticsPage;
+export default AnalyticsPage;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/app-header-wrapper.tsx b/web/app/[workspaceSlug]/app-header-wrapper.tsx
new file mode 100644
index 000000000..2ae3b8166
--- /dev/null
+++ b/web/app/[workspaceSlug]/app-header-wrapper.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { SidebarHamburgerToggle } from "@/components/core";
+
+export interface IAppHeaderWrapper {
+ header: ReactNode;
+ mobileHeader?: ReactNode;
+}
+
+const AppHeaderWrapper = ({ header, mobileHeader }: IAppHeaderWrapper) => (
+ <>
+
+
+ {mobileHeader && mobileHeader}
+
+
+);
+
+export default AppHeaderWrapper;
diff --git a/web/app/[workspaceSlug]/layout.tsx b/web/app/[workspaceSlug]/layout.tsx
new file mode 100644
index 000000000..06fe6dd91
--- /dev/null
+++ b/web/app/[workspaceSlug]/layout.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { CommandPalette } from "@/components/command-palette";
+import { WorkspaceAuthWrapper } from "@/layouts/auth-layout";
+import { AuthenticationWrapper } from "@/lib/wrappers";
+import AppSidebar from "./sidebar";
+
+export default function WorkspaceLayout({ header, children }: { header: React.ReactNode; children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/app/[workspaceSlug]/page.tsx
similarity index 53%
rename from web/pages/[workspaceSlug]/index.tsx
rename to web/app/[workspaceSlug]/page.tsx
index 19b8b1b7e..5f8a4610a 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/app/[workspaceSlug]/page.tsx
@@ -1,17 +1,13 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-// layouts
// components
import { PageHead } from "@/components/core";
-import { WorkspaceDashboardHeader } from "@/components/headers/workspace-dashboard";
import { WorkspaceDashboardView } from "@/components/page-views";
-// types
// hooks
import { useWorkspace } from "@/hooks/store";
-import { AppLayout } from "@/layouts/app-layout";
-import { NextPageWithLayout } from "@/lib/types";
-const WorkspacePage: NextPageWithLayout = observer(() => {
+const WorkspacePage = observer(() => {
const { currentWorkspace } = useWorkspace();
// derived values
const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Home` : undefined;
@@ -24,8 +20,4 @@ const WorkspacePage: NextPageWithLayout = observer(() => {
);
});
-WorkspacePage.getLayout = function getLayout(page: ReactElement) {
- return
}>{page};
-};
-
export default WorkspacePage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/activity.tsx b/web/app/[workspaceSlug]/profile/[userId]/activity/page.tsx
similarity index 75%
rename from web/pages/[workspaceSlug]/profile/[userId]/activity.tsx
rename to web/app/[workspaceSlug]/profile/[userId]/activity/page.tsx
index 543ac48e8..8b5ba07e0 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/activity.tsx
+++ b/web/app/[workspaceSlug]/profile/[userId]/activity/page.tsx
@@ -1,31 +1,27 @@
-import { ReactElement, useState } from "react";
+"use client";
+
+import { useState } from "react";
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
-// hooks
-import { Button } from "@plane/ui";
-import { UserProfileHeader } from "@/components/headers";
-import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/profile";
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { useUser } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
+import { useParams } from "next/navigation";
// ui
-// types
-import { NextPageWithLayout } from "@/lib/types";
+import { Button } from "@plane/ui";
+// components
+import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/profile";
// constants
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser } from "@/hooks/store";
const PER_PAGE = 100;
-const ProfileActivityPage: NextPageWithLayout = observer(() => {
+const ProfileActivityPage = observer(() => {
// states
const [pageCount, setPageCount] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [resultsCount, setResultsCount] = useState(0);
// router
- const router = useRouter();
- const { userId } = router.query;
+
+ const { userId } = useParams();
// store hooks
const { data: currentUser } = useUser();
const {
@@ -73,12 +69,4 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
);
});
-ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
- return (
-
}>
-
{page}
-
- );
-};
-
export default ProfileActivityPage;
diff --git a/web/app/[workspaceSlug]/profile/[userId]/assigned/page.tsx b/web/app/[workspaceSlug]/profile/[userId]/assigned/page.tsx
new file mode 100644
index 000000000..0d64e8eec
--- /dev/null
+++ b/web/app/[workspaceSlug]/profile/[userId]/assigned/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+// components
+import { PageHead } from "@/components/core";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+
+const ProfileAssignedIssuesPage = () => (
+ <>
+
+
+
+);
+
+export default ProfileAssignedIssuesPage;
diff --git a/web/app/[workspaceSlug]/profile/[userId]/created/page.tsx b/web/app/[workspaceSlug]/profile/[userId]/created/page.tsx
new file mode 100644
index 000000000..c8dab5e77
--- /dev/null
+++ b/web/app/[workspaceSlug]/profile/[userId]/created/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+// store
+import { observer } from "mobx-react-lite";
+// components
+import { PageHead } from "@/components/core";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+
+const ProfileCreatedIssuesPage = () => (
+ <>
+
+
+
+);
+
+export default observer(ProfileCreatedIssuesPage);
diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/app/[workspaceSlug]/profile/[userId]/layout.tsx
similarity index 58%
rename from web/layouts/user-profile-layout/layout.tsx
rename to web/app/[workspaceSlug]/profile/[userId]/layout.tsx
index c1ef8d40e..5e92abf67 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/app/[workspaceSlug]/profile/[userId]/layout.tsx
@@ -1,45 +1,51 @@
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
// components
-import { ProfileNavbar, ProfileSidebar } from "@/components/profile";
+import { ProfileSidebar } from "@/components/profile";
// constants
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useUser } from "@/hooks/store";
+// local components
+import { ProfileNavbar } from "./navbar";
type Props = {
children: React.ReactNode;
- className?: string;
- showProfileIssuesFilter?: boolean;
};
const AUTHORIZED_ROLES = [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.VIEWER];
-export const ProfileAuthWrapper: React.FC
= observer((props) => {
- const { children, className, showProfileIssuesFilter } = props;
+const ProfileAuthWrapper: React.FC = observer((props) => {
+ const { children } = props;
// router
- const router = useRouter();
+ const pathname = usePathname();
// store hooks
const {
membership: { currentWorkspaceRole },
} = useUser();
// derived values
const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
- const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
+ const isAuthorizedPath =
+ pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
+ const isIssuesTab = pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
return (
-
+
{isAuthorized || !isAuthorizedPath ? (
-
{children}
+
{children}
) : (
You do not have the permission to access this page.
)}
-
+
);
});
+
+export default ProfileAuthWrapper;
diff --git a/web/components/profile/navbar.tsx b/web/app/[workspaceSlug]/profile/[userId]/navbar.tsx
similarity index 85%
rename from web/components/profile/navbar.tsx
rename to web/app/[workspaceSlug]/profile/[userId]/navbar.tsx
index 6aace8e35..25e9744fe 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/app/[workspaceSlug]/profile/[userId]/navbar.tsx
@@ -1,7 +1,7 @@
import React from "react";
import Link from "next/link";
-import { useRouter } from "next/router";
+import { useParams, usePathname } from "next/navigation";
// components
import { ProfileIssuesFilter } from "@/components/profile";
@@ -16,8 +16,8 @@ type Props = {
export const ProfileNavbar: React.FC = (props) => {
const { isAuthorized, showProfileIssuesFilter } = props;
- const router = useRouter();
- const { workspaceSlug, userId } = router.query;
+ const { workspaceSlug, userId } = useParams();
+ const pathname = usePathname();
const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
@@ -28,7 +28,7 @@ export const ProfileNavbar: React.FC = (props) => {
{
- const router = useRouter();
- const { workspaceSlug, userId } = router.query;
+const ProfileOverviewPage = () => {
+ const { workspaceSlug, userId } = useParams();
const { data: userProfile } = useSWR(
workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
@@ -58,12 +53,4 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
);
};
-ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
- return (
- }>
- {page}
-
- );
-};
-
-export default ProfileOverviewPage;
+export default ProfileOverviewPage;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/profile/[userId]/subscribed/page.tsx b/web/app/[workspaceSlug]/profile/[userId]/subscribed/page.tsx
new file mode 100644
index 000000000..1fe152298
--- /dev/null
+++ b/web/app/[workspaceSlug]/profile/[userId]/subscribed/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+// store
+import { observer } from "mobx-react-lite";
+// components
+import { PageHead } from "@/components/core";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+
+const ProfileSubscribedIssuesPage = () => (
+ <>
+
+
+
+);
+
+export default observer(ProfileSubscribedIssuesPage);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/archives/cycles/page.tsx
similarity index 52%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/archives/cycles/page.tsx
index bcc406fa0..7bc67af5b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/archives/cycles/page.tsx
@@ -1,21 +1,16 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// components
import { PageHead } from "@/components/core";
import { ArchivedCycleLayoutRoot, ArchivedCyclesHeader } from "@/components/cycles";
-import { ProjectArchivesHeader } from "@/components/headers";
// hooks
import { useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectArchivedCyclesPage: NextPageWithLayout = observer(() => {
+const ProjectArchivedCyclesPage = observer(() => {
// router
- const router = useRouter();
- const { projectId } = router.query;
+ const { projectId } = useParams();
// store hooks
const { getProjectById } = useProject();
// derived values
@@ -33,12 +28,4 @@ const ProjectArchivedCyclesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectArchivedCyclesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
-export default ProjectArchivedCyclesPage;
+export default ProjectArchivedCyclesPage;
\ No newline at end of file
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx b/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
similarity index 88%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
index 8abb90e28..a5bf78181 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
@@ -1,6 +1,8 @@
-import { useState, ReactElement } from "react";
+"use client";
+
+import { useState } from "react";
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import useSWR from "swr";
// icons
import { ArchiveRestoreIcon } from "lucide-react";
@@ -8,22 +10,17 @@ import { ArchiveRestoreIcon } from "lucide-react";
import { ArchiveIcon, Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { PageHead } from "@/components/core";
-import { ProjectArchivedIssueDetailsHeader } from "@/components/headers";
import { IssueDetailRoot } from "@/components/issues";
// constants
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useIssueDetail, useIssues, useProject, useUser } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
+const ArchivedIssueDetailsPage = observer(() => {
// router
const router = useRouter();
- const { workspaceSlug, projectId, archivedIssueId } = router.query;
+ const { workspaceSlug, projectId, archivedIssueId } = useParams();
// states
const [isRestoring, setIsRestoring] = useState(false);
// hooks
@@ -137,12 +134,4 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
);
});
-ArchivedIssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
-export default ArchivedIssueDetailsPage;
+export default ArchivedIssueDetailsPage;
\ No newline at end of file
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/page.tsx
similarity index 52%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/archives/issues/page.tsx
index b2c08e0a3..b2298d540 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/page.tsx
@@ -1,21 +1,16 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// components
import { PageHead } from "@/components/core";
-import { ProjectArchivesHeader } from "@/components/headers";
import { ArchivedIssueLayoutRoot, ArchivedIssuesHeader } from "@/components/issues";
// hooks
import { useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectArchivedIssuesPage: NextPageWithLayout = observer(() => {
+const ProjectArchivedIssuesPage = observer(() => {
// router
- const router = useRouter();
- const { projectId } = router.query;
+ const { projectId } = useParams();
// store hooks
const { getProjectById } = useProject();
// derived values
@@ -33,12 +28,4 @@ const ProjectArchivedIssuesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectArchivedIssuesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
-export default ProjectArchivedIssuesPage;
+export default ProjectArchivedIssuesPage;
\ No newline at end of file
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/archives/modules/page.tsx
similarity index 56%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/archives/modules/page.tsx
index 1e346098e..5c1d55d3e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/archives/modules/page.tsx
@@ -1,21 +1,16 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// components
import { PageHead } from "@/components/core";
-import { ProjectArchivesHeader } from "@/components/headers";
import { ArchivedModuleLayoutRoot, ArchivedModulesHeader } from "@/components/modules";
// hooks
import { useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectArchivedModulesPage: NextPageWithLayout = observer(() => {
+const ProjectArchivedModulesPage = observer(() => {
// router
- const router = useRouter();
- const { projectId } = router.query;
+ const { projectId } = useParams();
// store hooks
const { getProjectById } = useProject();
// derived values
@@ -33,12 +28,4 @@ const ProjectArchivedModulesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectArchivedModulesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default ProjectArchivedModulesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/app/[workspaceSlug]/projects/[projectId]/cycles/[cycleId]/page.tsx
similarity index 80%
rename from web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/cycles/[cycleId]/page.tsx
index 6bde8da41..d94d30ec5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/cycles/[cycleId]/page.tsx
@@ -1,29 +1,23 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import useSWR from "swr";
-// hooks
+// components
import { EmptyState } from "@/components/common";
import { PageHead } from "@/components/core";
import { CycleDetailsSidebar } from "@/components/cycles";
-import { CycleMobileHeader } from "@/components/cycles/cycle-mobile-header";
-import { CycleIssuesHeader } from "@/components/headers";
import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
+// hooks
import { useCycle, useProject } from "@/hooks/store";
import useLocalStorage from "@/hooks/use-local-storage";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// components
-// ui
// assets
-import { NextPageWithLayout } from "@/lib/types";
import emptyCycle from "public/empty-state/cycle.svg";
-// types
-const CycleDetailPage: NextPageWithLayout = observer(() => {
+const CycleDetailPage = observer(() => {
// router
const router = useRouter();
- const { workspaceSlug, projectId, cycleId } = router.query;
+ const { workspaceSlug, projectId, cycleId } = useParams();
// store hooks
const { fetchCycleDetails, getCycleById } = useCycle();
const { getProjectById } = useProject();
@@ -84,12 +78,4 @@ const CycleDetailPage: NextPageWithLayout = observer(() => {
);
});
-CycleDetailPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } mobileHeader={} withProjectWrapper>
- {page}
-
- );
-};
-
export default CycleDetailPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/cycles/page.tsx
similarity index 81%
rename from web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/cycles/page.tsx
index 5b7f313e7..9cebd29ce 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/cycles/page.tsx
@@ -1,14 +1,14 @@
-import { useState, ReactElement } from "react";
+"use client";
+
+import { useState } from "react";
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// types
import { TCycleFilters } from "@plane/types";
// components
import { PageHead } from "@/components/core";
import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
-import CyclesListMobileHeader from "@/components/cycles/cycles-list-mobile-header";
import { EmptyState } from "@/components/empty-state";
-import { CyclesHeader } from "@/components/headers";
import { CycleModuleListLayout } from "@/components/ui";
// constants
import { EmptyStateType } from "@/constants/empty-state";
@@ -16,12 +16,8 @@ import { EmptyStateType } from "@/constants/empty-state";
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useEventTracker, useCycle, useProject, useCycleFilter } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectCyclesPage: NextPageWithLayout = observer(() => {
+const ProjectCyclesPage = observer(() => {
// states
const [createModal, setCreateModal] = useState(false);
// store hooks
@@ -29,8 +25,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
const { currentProjectCycleIds, loader } = useCycle();
const { getProjectById, currentProjectDetails } = useProject();
// router
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ const { workspaceSlug, projectId } = useParams();
// cycle filters hook
const { clearAllFilters, currentProjectFilters, updateFilters } = useCycleFilter();
// derived values
@@ -103,12 +98,4 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } mobileHeader={} withProjectWrapper>
- {page}
-
- );
-};
-
-export default ProjectCyclesPage;
+export default ProjectCyclesPage;
\ No newline at end of file
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/draft-issues/page.tsx
similarity index 67%
rename from web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/draft-issues/page.tsx
index f6e0658d9..350a18a6b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/draft-issues/page.tsx
@@ -1,21 +1,17 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import { X, PenSquare } from "lucide-react";
-// layouts
// components
import { PageHead } from "@/components/core";
-import { ProjectDraftIssueHeader } from "@/components/headers";
import { DraftIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/draft-issue-layout-root";
-// types
// hooks
import { useProject } from "@/hooks/store";
-import { AppLayout } from "@/layouts/app-layout";
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectDraftIssuesPage: NextPageWithLayout = observer(() => {
+const ProjectDraftIssuesPage = observer(() => {
const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ const { workspaceSlug, projectId } = useParams();
// store
const { getProjectById } = useProject();
// derived values
@@ -43,12 +39,4 @@ const ProjectDraftIssuesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectDraftIssuesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
-export default ProjectDraftIssuesPage;
+export default ProjectDraftIssuesPage;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/inbox/page.tsx b/web/app/[workspaceSlug]/projects/[projectId]/inbox/page.tsx
new file mode 100644
index 000000000..596de85b2
--- /dev/null
+++ b/web/app/[workspaceSlug]/projects/[projectId]/inbox/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// components
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { InboxIssueRoot } from "@/components/inbox";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// helpers
+import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
+// hooks
+import { useProject } from "@/hooks/store";
+
+const ProjectInboxPage = observer(() => {
+ /// router
+ const { workspaceSlug, projectId } = useParams();
+ const searchParams = useSearchParams();
+ const navigationTab = searchParams.get("currentTab");
+ const inboxIssueId = searchParams.get("inboxIssueId");
+ // hooks
+ const { currentProjectDetails } = useProject();
+
+ // No access to inbox
+ if (currentProjectDetails?.inbox_view === false)
+ return (
+
+
+
+ );
+
+ // derived values
+ const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox";
+
+ const currentNavigationTab = navigationTab
+ ? navigationTab === "open"
+ ? EInboxIssueCurrentTab.OPEN
+ : EInboxIssueCurrentTab.CLOSED
+ : undefined;
+
+ if (!workspaceSlug || !projectId) return <>;
+
+ return (
+
+ );
+});
+
+export default ProjectInboxPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/app/[workspaceSlug]/projects/[projectId]/issues/[issueId]/page.tsx
similarity index 85%
rename from web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/issues/[issueId]/page.tsx
index cdd40a38e..0ff5757bd 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/issues/[issueId]/page.tsx
@@ -1,6 +1,8 @@
-import React, { ReactElement, useEffect } from "react";
+"use client";
+
+import React, { useEffect } from "react";
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import { useTheme } from "next-themes";
import useSWR from "swr";
// ui
@@ -8,22 +10,17 @@ import { Loader } from "@plane/ui";
// components
import { EmptyState } from "@/components/common";
import { PageHead } from "@/components/core";
-import { ProjectIssueDetailsHeader } from "@/components/headers";
import { IssueDetailRoot } from "@/components/issues";
// hooks
import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
// assets
import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
-const IssueDetailsPage: NextPageWithLayout = observer(() => {
+const IssueDetailsPage = observer(() => {
// router
const router = useRouter();
- const { workspaceSlug, projectId, issueId } = router.query;
+ const { workspaceSlug, projectId, issueId } = useParams();
// hooks
const { resolvedTheme } = useTheme();
// store hooks
@@ -108,12 +105,4 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
);
});
-IssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default IssueDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/issues/page.tsx
similarity index 52%
rename from web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/issues/page.tsx
index 381b16267..7ea73bb1c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/issues/page.tsx
@@ -1,22 +1,16 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
import Head from "next/head";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// components
import { PageHead } from "@/components/core";
-import { ProjectIssuesHeader } from "@/components/headers";
import { ProjectLayoutRoot } from "@/components/issues";
-// types
-import { IssuesMobileHeader } from "@/components/issues/issues-mobile-header";
-import { useProject } from "@/hooks/store";
-import { AppLayout } from "@/layouts/app-layout";
-import { NextPageWithLayout } from "@/lib/types";
-// layouts
// hooks
+import { useProject } from "@/hooks/store";
-const ProjectIssuesPage: NextPageWithLayout = observer(() => {
- const router = useRouter();
- const { projectId } = router.query;
+const ProjectIssuesPage = observer(() => {
+ const { projectId } = useParams();
// store
const { getProjectById } = useProject();
@@ -41,12 +35,4 @@ const ProjectIssuesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectIssuesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } mobileHeader={} withProjectWrapper>
- {page}
-
- );
-};
-
export default ProjectIssuesPage;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx b/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx
new file mode 100644
index 000000000..03f01ae38
--- /dev/null
+++ b/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { ReactNode } from "react"
+// layouts
+import { ProjectAuthWrapper } from "@/layouts/auth-layout"
+
+const ProjectLayout = ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+);
+
+export default ProjectLayout;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/app/[workspaceSlug]/projects/[projectId]/modules/[moduleId]/page.tsx
similarity index 80%
rename from web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/modules/[moduleId]/page.tsx
index d6a0c0342..c959cb2e6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/modules/[moduleId]/page.tsx
@@ -1,28 +1,23 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import useSWR from "swr";
-// hooks
+// components
import { EmptyState } from "@/components/common";
import { PageHead } from "@/components/core";
-import { ModuleIssuesHeader } from "@/components/headers";
import { ModuleLayoutRoot } from "@/components/issues";
import { ModuleDetailsSidebar } from "@/components/modules";
-import { ModuleMobileHeader } from "@/components/modules/module-mobile-header";
+// hooks
import { useModule, useProject } from "@/hooks/store";
import useLocalStorage from "@/hooks/use-local-storage";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// components
// assets
-import { NextPageWithLayout } from "@/lib/types";
import emptyModule from "public/empty-state/module.svg";
-// types
-const ModuleIssuesPage: NextPageWithLayout = observer(() => {
+const ModuleIssuesPage = observer(() => {
// router
const router = useRouter();
- const { workspaceSlug, projectId, moduleId } = router.query;
+ const { workspaceSlug, projectId, moduleId } = useParams();
// store hooks
const { fetchModuleDetails, getModuleById } = useModule();
const { getProjectById } = useProject();
@@ -82,12 +77,4 @@ const ModuleIssuesPage: NextPageWithLayout = observer(() => {
);
});
-ModuleIssuesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } mobileHeader={} withProjectWrapper>
- {page}
-
- );
-};
-
export default ModuleIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/modules/page.tsx
similarity index 78%
rename from web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/modules/page.tsx
index 08e621d0f..f8b474d94 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/modules/page.tsx
@@ -1,28 +1,23 @@
-import { ReactElement, useCallback } from "react";
+"use client";
+
+import { useCallback } from "react";
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// types
import { TModuleFilters } from "@plane/types";
// components
import { PageHead } from "@/components/core";
import { EmptyState } from "@/components/empty-state";
-import { ModulesListHeader } from "@/components/headers";
import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
-import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
// constants
import { EmptyStateType } from "@/constants/empty-state";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useModuleFilter, useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectModulesPage: NextPageWithLayout = observer(() => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+const ProjectModulesPage = observer(() => {
+ const { workspaceSlug, projectId } = useParams();
// store
const { getProjectById, currentProjectDetails } = useProject();
const { currentProjectFilters, currentProjectDisplayFilters, clearAllFilters, updateFilters, updateDisplayFilters } =
@@ -82,12 +77,4 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectModulesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } mobileHeader={} withProjectWrapper>
- {page}
-
- );
-};
-
export default ProjectModulesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/app/[workspaceSlug]/projects/[projectId]/pages/[pageId]/page.tsx
similarity index 88%
rename from web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/pages/[pageId]/page.tsx
index 4a1f523b9..c61c291cb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/pages/[pageId]/page.tsx
@@ -1,7 +1,9 @@
-import { ReactElement, useRef, useState } from "react";
+"use client";
+
+import { useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import Link from "next/link";
-import { useRouter } from "next/router";
+import { useParams, useRouter } from "next/navigation";
import useSWR from "swr";
// document-editor
import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
@@ -12,19 +14,14 @@ import { TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
// components
import { LogoSpinner } from "@/components/common";
import { PageHead } from "@/components/core";
-import { PageDetailsHeader } from "@/components/headers";
import { IssuePeekOverview } from "@/components/issues";
import { PageEditorBody, PageEditorHeaderRoot } from "@/components/pages";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { usePage, useProjectPages } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// lib
-import { NextPageWithLayout } from "@/lib/types";
-const PageDetailsPage: NextPageWithLayout = observer(() => {
+const PageDetailsPage = observer(() => {
// states
const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768 ? true : false);
const [editorReady, setEditorReady] = useState(false);
@@ -34,7 +31,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
const readOnlyEditorRef = useRef(null);
// router
const router = useRouter();
- const { workspaceSlug, projectId, pageId } = router.query;
+ const { workspaceSlug, projectId, pageId } = useParams();
// store hooks
const { createPage, getPageById } = useProjectPages();
const page = usePage(pageId?.toString() ?? "");
@@ -131,12 +128,4 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
);
});
-PageDetailsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default PageDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/app/[workspaceSlug]/projects/[projectId]/pages/page.tsx
similarity index 70%
rename from web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/pages/page.tsx
index 764c4a68a..5b536108e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/pages/page.tsx
@@ -1,23 +1,19 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
// types
import { TPageNavigationTabs } from "@plane/types";
// components
import { PageHead } from "@/components/core";
-import { PagesHeader } from "@/components/headers";
import { PagesListRoot, PagesListView } from "@/components/pages";
// hooks
import { useAppRouter, useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-// lib
-import { NextPageWithLayout } from "@/lib/types";
-const ProjectPagesPage: NextPageWithLayout = observer(() => {
+const ProjectPagesPage = observer(() => {
// router
- const router = useRouter();
- const { type } = router.query;
+ const searchParams = useSearchParams();
+ const type = searchParams.get("type");
// store hooks
const { workspaceSlug, projectId } = useAppRouter();
const { getProjectById } = useProject();
@@ -51,12 +47,4 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
);
});
-ProjectPagesPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default ProjectPagesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/automations/page.tsx
similarity index 68%
rename from web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/settings/automations/page.tsx
index 060520faf..1676b25aa 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/settings/automations/page.tsx
@@ -1,30 +1,22 @@
-import React, { ReactElement } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/router";
-import { IProject } from "@plane/types";
-// hooks
-import { TOAST_TYPE, setToast } from "@plane/ui";
-import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
-// layouts
-// ui
-// components
-import { PageHead } from "@/components/core";
-import { ProjectSettingHeader } from "@/components/headers";
-import { EUserProjectRoles } from "@/constants/project";
-import { useProject, useUser } from "@/hooks/store";
-import { AppLayout } from "@/layouts/app-layout";
-// layouts
-import { ProjectSettingLayout } from "@/layouts/settings-layout";
-// hooks
-// components
-// types
-import { NextPageWithLayout } from "@/lib/types";
-// constants
+"use client";
-const AutomationSettingsPage: NextPageWithLayout = observer(() => {
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { IProject } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
+import { PageHead } from "@/components/core";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { useProject, useUser } from "@/hooks/store";
+
+const AutomationSettingsPage = observer(() => {
// router
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ const { workspaceSlug, projectId } = useParams();
// store hooks
const {
membership: { currentProjectRole },
@@ -61,12 +53,4 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
);
});
-AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default AutomationSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/estimates/page.tsx
similarity index 58%
rename from web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/settings/estimates/page.tsx
index c3426ee94..f292bd6d9 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/settings/estimates/page.tsx
@@ -1,23 +1,17 @@
-import { ReactElement } from "react";
+"use client";
+
import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
// components
import { PageHead } from "@/components/core";
import { EstimateRoot } from "@/components/estimates";
-import { ProjectSettingHeader } from "@/components/headers";
// constants
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useUser, useProject } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-import { ProjectSettingLayout } from "@/layouts/settings-layout";
-// types
-import { NextPageWithLayout } from "@/lib/types";
-const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+const EstimatesSettingsPage = observer(() => {
+ const { workspaceSlug, projectId } = useParams();
const {
membership: { currentProjectRole },
} = useUser();
@@ -38,12 +32,4 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
);
});
-EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
export default EstimatesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/features/page.tsx
similarity index 66%
rename from web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/settings/features/page.tsx
index a55b58beb..9317003c7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/settings/features/page.tsx
@@ -1,24 +1,18 @@
-import { ReactElement } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// hooks
-import { PageHead } from "@/components/core";
-import { ProjectSettingHeader } from "@/components/headers";
-import { ProjectFeaturesList } from "@/components/project";
-import { EUserProjectRoles } from "@/constants/project";
-import { useProject, useUser } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-import { ProjectSettingLayout } from "@/layouts/settings-layout";
-// components
-// types
-import { NextPageWithLayout } from "@/lib/types";
-// constants
+"use client";
-const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { PageHead } from "@/components/core";
+import { ProjectFeaturesList } from "@/components/project";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { useProject, useUser } from "@/hooks/store";
+
+const FeaturesSettingsPage = observer(() => {
+ const { workspaceSlug, projectId } = useParams();
// store
const {
membership: { fetchUserProjectInfo },
@@ -52,12 +46,4 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
);
});
-FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- } withProjectWrapper>
- {page}
-
- );
-};
-
-export default FeaturesSettingsPage;
+export default FeaturesSettingsPage;
\ No newline at end of file
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/labels/page.tsx
similarity index 65%
rename from web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/settings/labels/page.tsx
index 5c2644305..192d7147f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/settings/labels/page.tsx
@@ -1,20 +1,16 @@
-import { ReactElement, useEffect, useRef } from "react";
+"use client";
+
+import { useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { observer } from "mobx-react";
-// layouts
-import { PageHead } from "@/components/core";
-import { ProjectSettingHeader } from "@/components/headers";
-import { ProjectSettingsLabelList } from "@/components/labels";
-import { useProject } from "@/hooks/store";
-import { AppLayout } from "@/layouts/app-layout";
-import { ProjectSettingLayout } from "@/layouts/settings-layout";
// components
-// types
-import { NextPageWithLayout } from "@/lib/types";
+import { PageHead } from "@/components/core";
+import { ProjectSettingsLabelList } from "@/components/labels";
// hooks
+import { useProject } from "@/hooks/store";
-const LabelsSettingsPage: NextPageWithLayout = observer(() => {
+const LabelsSettingsPage = observer(() => {
const { currentProjectDetails } = useProject();
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Labels` : undefined;
@@ -43,12 +39,4 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
);
});
-LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
- return (
- }>
- {page}
-
- );
-};
-
export default LabelsSettingsPage;
diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
similarity index 83%
rename from web/layouts/settings-layout/project/layout.tsx
rename to web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
index 8e5046d30..6645eb7d6 100644
--- a/web/layouts/settings-layout/project/layout.tsx
+++ b/web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
@@ -1,26 +1,28 @@
+"use client";
+
import { FC, ReactNode } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
-import { useRouter } from "next/router";
-// hooks
-// components
-import { Button, LayersIcon } from "@plane/ui";
-import { NotAuthorizedView } from "@/components/auth-screens";
+import { useParams } from "next/navigation";
// ui
+import { Button, LayersIcon } from "@plane/ui";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens";
// constants
import { EUserProjectRoles } from "@/constants/project";
+// hooks
import { useUser } from "@/hooks/store";
-import { ProjectSettingsSidebar } from "./sidebar";
+// local components
+import ProjectSettingsSidebar from "./sidebar";
export interface IProjectSettingLayout {
children: ReactNode;
}
-export const ProjectSettingLayout: FC = observer((props) => {
+const ProjectSettingLayout: FC = observer((props) => {
const { children } = props;
// router
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ const { workspaceSlug, projectId } = useParams();
// store hooks
const {
membership: { currentProjectRole },
@@ -51,3 +53,5 @@ export const ProjectSettingLayout: FC = observer((props)