feat: app dir migration (#4743)

* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* fix: adding profile settings layout

* fix: errors on app dir.

* chore: remove pages routes.

* chore: add sign-in/ sign-up, invitations, onboarding pages.

* [WEB-1374] fix: clear changes made on modal close (#4555)

* [WEB-1480] fix: preserve page access when making a copy (#4568)

* [WEB-1465] fix: theme fluctuation on initial load. (#4638)

* [WEB-1445] fix: issue creation on sub groups when cycle/ module grouping is applied. (#4636)

* [WEB-1244] fix: add better image insertion and replacement logic in the editor (#4508)

* fix: add better image insertion and replacement logic

* refactor: image handling in editor

* chore: remove passing uploadKey around

* refactor: remove unused code

* fix: redundant files removed

* fix: add is editor ready to discard api to control behvaiours from our app

* fix: focus issues and image insertion position when not using slash command

* fix: import order fixed

* fix: notification mark all as read (#4643)

* chore: remove enter key extension (#4648)

* [WEB-1467] chore: run the API's required to bootstrap the application in parallel. (#4642)

* [WEB - 1482] fix: uploads when using block storages other than s3 and minio (#4647)

* fix: minio storage and redirection

* dev: disconnect web url and app base url configuration.

* fix: negate check while trying to discard (#4653)

* fix: email notification preferences (#4656)

* [WEB-1493] chore: product tour asset and app sidebar quick action hover (#4655)

* chore: product tour asset updated

* fix: app sidebar quick action hover

* fix: project state setting state name remove camel case logic (#4652)

* [WEB-1419] chore: enable module creation with dates older than today. (#4659)

* [WEB-1216] chore: increase module empty state for consistency. (#4658)

* fix: build errors

* [WEB-1235] chore: module and cycle sidebar graph improvement (#4650)

* chore: module and cycle sidebar graph improvement

* chore: code refactor

* [WEB-1424] chore: page and view logo implementation, and emoji/icon (#4662)

* [WEB-1424] chore: page and view logo implementation, and emoji/icon picker improvement (#4583)

* chore: added logo_props

* chore: logo props in cycles, views and modules

* chore: emoji icon picker types updated

* chore: info icon added to plane ui package

* chore: icon color adjust helper function added

* style: icon picker ui improvement and default color options updated

* chore: update page logo action added in store

* chore: emoji code to unicode helper function added

* chore: common logo renderer component added

* chore: app header project logo updated

* chore: project logo updated across platform

* chore: page logo picker added

* chore: control link component improvement

* chore: list item improvement

* chore: emoji picker component updated

* chore: space app and package logo prop type updated

* chore: migration

* chore: logo added to project view

* chore: page logo picker added in create modal and breadcrumbs

* chore: view logo picker added in create modal and updated breadcrumbs

* fix: build error

* chore: AIO docker images for preview deployments (#4605)

* fix: adding single docker base file

* action added

* fix action

* dockerfile.base modified

* action fix

* dockerfile

* fix: base aio dockerfile

* fix: dockerfile.base

* fix: dockerfile base

* fix: modified folder structure

* fix: action

* fix: dockerfile

* fix: dockerfile.base

* fix: supervisor file name changed

* fix: base dockerfile updated

* fix dockerfile base

* fix: base dockerfile

* fix: docker files

* fix: base dockerfile

* update base image

* modified docker aio base

* aio base modified to debian-12-slim

* fixes

* finalize the dockerfiles with volume exposure

* modified the aio build and dockerfile

* fix: codacy suggestions implemented

* fix: codacy fix

* update aio build action

---------

Co-authored-by: sriram veeraghanta <[email protected]>

* fix: merge conflict

* chore: lucide react added to planu ui package

* chore: new emoji picker component added with lucid icon and code refactor

* chore: logo component updated

* chore: emoji picker updated for pages and views

---------

Co-authored-by: NarayanBavisetti <[email protected]>
Co-authored-by: Manish Gupta <[email protected]>
Co-authored-by: sriram veeraghanta <[email protected]>

* fix: build error

---------

Co-authored-by: Anmol Singh Bhatia <[email protected]>
Co-authored-by: NarayanBavisetti <[email protected]>
Co-authored-by: Manish Gupta <[email protected]>
Co-authored-by: Anmol Singh Bhatia <[email protected]>

* refactor: drag handle component (#4663)

* refactor: checkbox ui component (#4665)

* [WEB-1325] chore: refactor inbox issue store to avoid data loss. (#4640)

* [WEB-1325] chore: refactor inbox issue store to avoid data loss.

* chore: inbox store improvement.

* chore: priority dropdown accepts undefined (#4666)

* chore: added buttonClassName prop to label dropdown (#4671)

* chore: created new constants for marketing website page links (#4670)

* chore: added a prop to render default state conditionally (#4669)

* [WEB-1501] dev: multiple select core components (#4667)

* dev: multiple select core components

* chore: added export statement

* chore: created a new constant for archivable state groups (#4668)

* chore: added primary variant to the alert modal (#4664)

* [WEB-1436] chore: pages improvement. (#4657)

* add empty state if no pages are available.
* set access to private in create page modal when the modal is open form private tab.

* [WEB-1440] chore: update cycle empty state to use project level access. (#4672)

* fix: checkbox ui component (#4675)

* fix: ai buttons overlapping issue (#4621)

* [WEB - 1500] chore: add extra fields on instance and create changelog table to store release change logs (#4673)

* chore: add extra fields on instance and create changelog table to store release change logs

* dev: rename new_version to latest_version

* [WEB - 1505] chore: alter instance id field (#4676)

* chore: instance id

* dev: update to max length

* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* fix: errors on app dir.

* chore: remove pages routes.

* chore: add sign-in/ sign-up, invitations, onboarding pages.

* fix: instance serializer

* fix: instance register script  (#4681)

* fix: instance register script

* dev: remove api key and add latest version and current version in types

* [WEB-1492] fix: resolved issue creation error in layouts while group_by and sub_group_by filters applied in quick add (#4682)

* fix: resolved issue creation error in layouts while group_by and sub_group_by filters applied in quick add

* fix: updated braces in conditions

* fix: inbox issue store update logic. (#4683)

* chore: update package version

* [WEB-1184] feat: issue bulk operations (#4674)

* feat: issue bulk operations

* style: bulk operations action bar

* chore: remove edition separation

* style: fix overlapping of response container in AI popover. (#4684)

* [WEB-1498] style: fix comments reaction alignment. (#4686)

* [WEB-1503] chore: add `autofocus` to name field in inline create/ update state component. (#4685)

* [WEB-1312] fix: trim file name before uploading (#4661)

* fix: trim file name before uploading

* fix: check the cursor position before inserting image

* dev: add trimming for file assets

* dev: add filename validation above if

* dev: make the validation to 50 to support user uploads

---------

Co-authored-by: pablohashescobar <[email protected]>

* [WEB-1481] fix: multiple API calls in inbox issues on closed issues tab. (#4691)

* fix: multiple API calls on scroll and closed issues tab.

* fix: pagination loader on initial load.

* feat: Add components required for estimates (#4690)

* Add sortable, radio and typography components

* Remove stray css classes

* Prevent drag of items from other draggable

* Minor cleanup

* Update yarn.lock

* Remove radio input component as it was build on
headless ui v2.0.0 and now we are using v1.7.0

* Fix build errors

* Update dependencies in use memo.

* [WEB-1521] chore: add configuration to enable/disable sign-ups. (#4697)

* fix: regenerating lock file

* fix: docker image build errors

* fix: remove `setupInterceptors` to avoid circular dependency.

* chore: migrate all `accounts` related routes.

* chore: migrate all `profiles` related routes.

* chore: workspace invitation and onboarding migration / fixes.

* chore: installation provider migrations.

* regression: focus changing issue with the peek overview editor (#4700)

* [WEB-1459] chore: save users all / favorite project list collapse state into localstorage. (#4701)

* [WEB-1501] chore: update selected entity details on entities list change (#4702)

* chore: update selected entity detials on entities list change

* chore: addd selectionHelpers as a prop

* [WEB-1517] chore: remove drag handle from list drag block (#4698)

* remove drag handle from list drag block

* align list group header with list item

* rearrange chevron for list subissues and rearrange spaces

* adding default draggable property to control link

* remove unnecessary dependencies for useEffect

* fix: email validation  (#4707)

* fix: email validation on complete login or sign up functionality

* dev: add try catch block

* dev: split up code

* dev: empty return

* fix: cache invalidation on new members invite (#4699)

* fix: build test pull request running on non draft PRs (#4708)

* fix: cache invalidation on new members invite (#4699)

* fix: add version max length (#4713)

* chore: migrations for `routing` hooks.

* [WEB-1533] chore: fix alignment issues in List and Spreadsheet view (#4714)

* fix alignment issues in List and Spreadsheet view

* fix spreadsheet indentation

* chore: migration for workspace dashboard/ views/ analytics/ settings and active-cycles.

* chore: handle undefined identifier case

* fix: Overflowing loader in issue edit modal (#4720)

* [WEB-1529] chore: workspace sidebar updates. (#4710)

* fix: temporary fix exiting lines with slashes (#4725)

* [WEB-1537] fix: inline code block size fixed for headers, etc (#4709)

* fix: inline code block size fixed for headers, etc

* feat: persisting focus accurately post converting the code block into text

* fix: typo in error handling

* [WEB-1526] feat: add auto merge behaviour to task lists and fix infinite backspace case (#4703)

* feat: add auto merge behaviour to task lists

* fix: unhandled cases for taskItem and taskList

* fix: css task list such that toggling task list doesn't shift things

* fix: task list jumps around while trying create/delete things in between two task lists

* fix: remove filtering for generic transactions i.e. transactions with some meta data while tying to join things

* chore: migration for profile activity along with headers refactor.

* [WEB-1201] dev: dropdowns (#4721)

* chore: lodash package added

* chore: dropdown key down hook added

* dev: dropdown component

* chore: build error and code refactor

* chore: readme file updated

* chore: added disabled prop to multiple select components (#4724)

* chore: added disabled prop to mutliple select group hoc

* style: fix empty space

* fix: don't add  as a sub-issue if parent has been removed (#4731)

* fix: member list item custom menu placement (#4729)

* [WEB-1535] chore: project logo picker improvement (#4718)

* chore: emoji icon picker improvement

* chore: emoji icon picker improvement

* fix: resolved border flicker on issue title (#4727)

* chore: profile activity empty state added (#4732)

* [WEB-1481] fix: inbox issue list update after changing issue status. (#4715)

* style: fix ux copy style on project feature preview page. (#4734)

* chore: remove clear seleciton logic on escape key press (#4735)

* chore: migrations for projects and project issues.

* chore: issue and properties filter dropdown improvement (#4733)

* save all filters and properties for views (#4728)

* chore: migrations for issue details route.

* chore: migration for cycle routes.

* chore: migration for module routes.

* chore: migrations for project views routes.

* chore: migrations for project pages routes.

* chore: migration for project inbox routes.

* chore: migration for project settings routes.

* chore: migrations for draft issues routes.

* chore: migrations for project archives routes.

* chore: remove unused headers.

* temp: comment out auth constant and use-reload-confirmation code to avoid errors.

---------

Co-authored-by: Prateek Shourya <[email protected]>
Co-authored-by: rahulramesha <[email protected]>
Co-authored-by: Aaryan Khandelwal <[email protected]>
Co-authored-by: M. Palanikannan <[email protected]>
Co-authored-by: Anmol Singh Bhatia <[email protected]>
Co-authored-by: Nikhil <[email protected]>
Co-authored-by: NarayanBavisetti <[email protected]>
Co-authored-by: Manish Gupta <[email protected]>
Co-authored-by: Anmol Singh Bhatia <[email protected]>
Co-authored-by: guru_sainath <[email protected]>
Co-authored-by: pablohashescobar <[email protected]>
Co-authored-by: Satish Gandham <[email protected]>
Co-authored-by: Henit Chobisa <[email protected]>
Co-authored-by: Aaryan Khandelwal <[email protected]>

packages/tailwind-config-custom/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
   content: {
     relative: true,
     files: [
+      "./app/**/*.{js,ts,jsx,tsx}",
       "./components/**/*.tsx",
       "./constants/**/*.{js,ts,jsx,tsx}",
       "./layouts/**/*.tsx",

packages/ui/src/sortable/sortable.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { Draggable } from "./draggable";
 import { Sortable } from "./sortable";
 
 const meta: Meta<typeof Sortable> = {
@@ -12,7 +13,7 @@ type Story = StoryObj<typeof Sortable>;
 
 const data = [
   { id: "1", name: "John Doe" },
-  { id: "2", name: "Satish" },
+  { id: "2", name: "Jane Doe 2" },
   { id: "3", name: "Alice" },
   { id: "4", name: "Bob" },
   { id: "5", name: "Charlie" },

space/types/project.d.ts

@@ -0,0 +1,42 @@
+import { TLogoProps } from "@plane/types";
+
+export type TWorkspaceDetails = {
+  name: string;
+  slug: string;
+  id: string;
+};
+
+export type TViewDetails = {
+  list: boolean;
+  gantt: boolean;
+  kanban: boolean;
+  calendar: boolean;
+  spreadsheet: boolean;
+};
+
+export type TProjectDetails = {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string | undefined;
+  logo_props: TLogoProps;
+  description: string;
+};
+
+export type TProjectSettings = {
+  id: string;
+  anchor: string;
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  inbox: unknown;
+  workspace: string;
+  workspace_detail: TWorkspaceDetails;
+  project: string;
+  project_details: TProjectDetails;
+  views: TViewDetails;
+  created_by: string;
+  updated_by: string;
+  created_at: string;
+  updated_at: string;
+};

web/components/headers/workspace-active-cycles.tsx → web/app/[workspaceSlug]/@header/active-cycles/header.tsx

@@ -1,11 +1,13 @@
+"use client";
+
 import { observer } from "mobx-react";
 // ui
 import { Crown } from "lucide-react";
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // icons
 
-export const WorkspaceActiveCycleHeader = observer(() => (
+const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div className="flex items-center gap-2">
@@ -25,3 +27,5 @@ export const WorkspaceActiveCycleHeader = observer(() => (
     </div>
   </div>
 ));
+
+export default WorkspaceActiveCycleHeader;

web/app/[workspaceSlug]/@header/active-cycles/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../../app-header-wrapper";
+import WorkspaceActiveCycleHeader from "./header";
+
+const WorkspaceActiveCycleHeaderPage = () => <AppHeaderWrapper header={<WorkspaceActiveCycleHeader />} />;
+
+export default WorkspaceActiveCycleHeaderPage;

web/components/headers/workspace-analytics.tsx → web/app/[workspaceSlug]/@header/analytics/header.tsx

@@ -1,17 +1,22 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+// icons
 import { BarChart2, PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
+// helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
 import { useAppTheme } from "@/hooks/store";
 
-export const WorkspaceAnalyticsHeader = observer(() => {
-  const router = useRouter();
-  const { analytics_tab } = router.query;
+const WorkspaceAnalyticsHeader = observer(() => {
+  const searchParams = useSearchParams();
+  const analytics_tab = searchParams.get("analytics_tab");
   // store hooks
   const { workspaceAnalyticsSidebarCollapsed, toggleWorkspaceAnalyticsSidebar } = useAppTheme();
 
@@ -66,3 +71,5 @@ export const WorkspaceAnalyticsHeader = observer(() => {
     </>
   );
 });
+
+export default WorkspaceAnalyticsHeader;

web/app/[workspaceSlug]/@header/analytics/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../../app-header-wrapper";
+import WorkspaceAnalyticsHeader from "./header";
+
+const WorkspaceAnalyticsHeaderPage = () => <AppHeaderWrapper header={<WorkspaceAnalyticsHeader />} />;
+
+export default WorkspaceAnalyticsHeaderPage;

web/components/headers/workspace-dashboard.tsx → web/app/[workspaceSlug]/@header/header.tsx

@@ -1,18 +1,21 @@
+"use client";
+
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Home, Zap } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
-// hooks
-// components
+// ui
 import { Breadcrumbs } from "@plane/ui";
+// components
 import { BreadcrumbLink } from "@/components/common";
 // constants
 import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-tracker";
+// hooks
 import { useEventTracker } from "@/hooks/store";
 
-export const WorkspaceDashboardHeader = () => {
+const WorkspaceDashboardHeader = () => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
@@ -69,3 +72,5 @@ export const WorkspaceDashboardHeader = () => {
     </>
   );
 };
+
+export default WorkspaceDashboardHeader;

web/app/[workspaceSlug]/@header/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "../app-header-wrapper";
+import WorkspaceDashboardHeader from "./header";
+
+const WorkspaceDashboardHeaderPage = () => <AppHeaderWrapper header={<WorkspaceDashboardHeader />} />;
+
+export default WorkspaceDashboardHeaderPage;

web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+
+const ProfileActivityHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Activity" />} />;
+
+export default ProfileActivityHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/assigned/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileAssignedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Assigned" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileAssignedHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/created/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileCreatedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Created" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileCreatedHeader;

web/components/headers/user-profile.tsx → web/app/[workspaceSlug]/@header/profile/[userId]/header.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 // ui
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
@@ -15,11 +17,10 @@ type TUserProfileHeader = {
   type?: string | undefined;
 };
 
-export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
   const { type = undefined } = props;
   // router
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
+  const { workspaceSlug, userId } = useParams();
   // store hooks
   const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
   const {
@@ -89,3 +90,5 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
     </div>
   );
 });
+
+export default UserProfileHeader;

web/components/profile/profile-issues-mobile-header.tsx → web/app/[workspaceSlug]/@header/profile/[userId]/mobile-header.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
@@ -18,8 +20,7 @@ import { useIssues, useLabel } from "@/hooks/store";
 
 const ProfileIssuesMobileHeader = observer(() => {
   // router
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
+  const { workspaceSlug, userId } = useParams();
   // store hook
   const {
     issuesFilter: { issueFilters, updateFilters },

web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "./header";
+
+const ProfileOverviewHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Summary" />} />;
+
+export default ProfileOverviewHeader;

web/app/[workspaceSlug]/@header/profile/[userId]/subscribed/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import UserProfileHeader from "../header";
+import ProfileIssuesMobileHeader from "../mobile-header";
+
+const ProfileSubscribedHeader = () => (
+  <AppHeaderWrapper header={<UserProfileHeader type="Subscribed" />} mobileHeader={<ProfileIssuesMobileHeader />} />
+);
+
+export default ProfileSubscribedHeader;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx

@@ -0,0 +1,2 @@
+import DefaultProjectArchivesHeader from "../page";
+export default DefaultProjectArchivesHeader;

web/components/headers/project-archives.tsx → web/app/[workspaceSlug]/@header/projects/[projectId]/archives/header.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useParams, usePathname, useRouter } from "next/navigation";
 // ui
 import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
 // components
@@ -12,11 +12,12 @@ import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export const ProjectArchivesHeader: FC = observer(() => {
+const ProjectArchivesHeader: FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  const activeTab = router.pathname.split("/").pop();
+  const { workspaceSlug, projectId } = useParams();
+  const pathname = usePathname();
+  const activeTab = pathname.split("/").pop();
   // store hooks
   const {
     issuesFilter: { issueFilters },
@@ -93,3 +94,5 @@ export const ProjectArchivesHeader: FC = observer(() => {
     </div>
   );
 });
+
+export default ProjectArchivesHeader;

web/components/headers/project-archived-issue-details.tsx → web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx

@@ -1,27 +1,23 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
-// hooks
+// ui
 import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
+// components
 import { BreadcrumbLink, Logo } from "@/components/common";
+// constants
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+// hooks
 import { useProject } from "@/hooks/store";
-// components
-// ui
-// types
-import { IssueArchiveService } from "@/services/issue";
-// constants
 // services
-// helpers
-// components
+import { IssueArchiveService } from "@/services/issue";
 
 const issueArchiveService = new IssueArchiveService();
 
-export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+  const { workspaceSlug, projectId, archivedIssueId } = useParams();
   // store hooks
   const { currentProjectDetails } = useProject();
 
@@ -96,3 +92,5 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
     </div>
   );
 });
+
+export default ProjectArchivedIssueDetailsHeader;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import ProjectArchivedIssueDetailsHeader from "./header";
+
+const ProjectArchivedIssueDetailsHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivedIssueDetailsHeader />} />;
+
+export default ProjectArchivedIssueDetailsHeaderPage;

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+// components
+import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
+import ProjectArchivesHeader from "./header";
+
+const ProjectArchivesHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivesHeader />} />;
+
+export default ProjectArchivesHeaderPage;