dev: change layout

space/app/[workspace_slug]/[project_id]/layout.tsx

@@ -1,40 +1,15 @@
-import Image from "next/image";
-import { notFound } from "next/navigation";
-// components
-import IssueNavbar from "@/components/issues/navbar";
-// assets
-import planeLogo from "public/plane-logo.svg";
-
-export default async function ProjectLayout({
-  children,
-  params,
-}: {
+type Props = {
   children: React.ReactNode;
-  params: { workspace_slug: string; project_id: string };
-}) {
-  const { workspace_slug, project_id } = params;
+  params: {
+    workspace_slug: string;
+    project_id: string;
+  };
+};
 
-  if (!workspace_slug || !project_id) notFound();
+const ProjectIssuesLayout = async (props: Props) => {
+  const { children } = props;
 
-  return (
-    <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-      <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
-        <IssueNavbar workspaceSlug={workspace_slug} projectId={project_id} />
-      </div>
-      <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
-      <a
-        href="https://plane.so"
-        className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div className="relative grid h-6 w-6 place-items-center">
-          <Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
-        </div>
-        <div className="text-xs">
-          Powered by <span className="font-semibold">Plane Deploy</span>
-        </div>
-      </a>
-    </div>
-  );
-}
+  return <>{children}</>;
+};
+
+export default ProjectIssuesLayout;

space/app/[workspace_slug]/[project_id]/page.tsx

@@ -1,16 +1,50 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { notFound, useSearchParams } from "next/navigation";
 // components
-import { ProjectDetailsView } from "@/components/views";
+import { LogoSpinner } from "@/components/common";
+// helpers
+import { navigate } from "@/helpers/actions";
+// services
+import PublishService from "@/services/publish.service";
+const publishService = new PublishService();
 
-export default function WorkspaceProjectPage({ params }: { params: { workspace_slug: any; project_id: any } }) {
+type Props = {
+  params: {
+    workspace_slug: string;
+    project_id: string;
+  };
+};
+
+const ProjectIssuesPage = (props: Props) => {
+  const { params } = props;
   const { workspace_slug, project_id } = params;
-
+  // states
+  const [error, setError] = useState(false);
+  // params
   const searchParams = useSearchParams();
+  const board = searchParams.get("board") || undefined;
   const peekId = searchParams.get("peekId") || undefined;
 
-  if (!workspace_slug || !project_id) return <></>;
+  useEffect(() => {
+    if (!workspace_slug || !project_id) return;
+    publishService
+      .fetchAnchorFromOldDetails(workspace_slug, project_id)
+      .then((res) => {
+        let url = `/${res.anchor}`;
+        const params = new URLSearchParams();
+        if (board) params.append("board", board);
+        if (peekId) params.append("peekId", peekId);
+        if (params.toString()) url += `?${params.toString()}`;
+        navigate(url);
+      })
+      .catch(() => setError(true));
+  }, [board, peekId, project_id, workspace_slug]);
 
-  return <ProjectDetailsView workspaceSlug={workspace_slug} projectId={project_id} peekId={peekId} />;
-}
+  if (error) notFound();
+
+  return <LogoSpinner />;
+};
+
+export default ProjectIssuesPage;

space/app/error.tsx

@@ -21,7 +21,7 @@ export default function InstanceError() {
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
           <Image src={instanceImage} alt="Plane instance failure image" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
+          <h3 className="font-medium text-2xl text-white">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />
             Fret not, it might just be a connectivity issue.

space/app/not-found.tsx

@@ -4,20 +4,18 @@ import Image from "next/image";
 // assets
 import UserLoggedInImage from "public/user-logged-in.svg";
 
-export default function NotFound() {
-  return (
-    <div className="flex h-screen w-screen flex-col">
-      <div className="grid h-full w-full place-items-center p-6">
-        <div className="text-center">
-          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
-            <div className="h-32 w-32">
-              <Image src={UserLoggedInImage} alt="User already logged in" />
-            </div>
-          </div>
-          <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
-          <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
+const NotFound = () => (
+  <div className="h-screen w-screen grid place-items-center">
+    <div className="text-center">
+      <div className="mx-auto size-52 grid place-items-center rounded-full bg-custom-background-80">
+        <div className="size-32">
+          <Image src={UserLoggedInImage} alt="User already logged in" />
         </div>
       </div>
+      <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
+      <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
     </div>
-  );
-}
+  </div>
+);
+
+export default NotFound;

space/app/page/layout.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import useSWR from "swr";
+// components
+import IssueNavbar from "@/components/issues/navbar";
+// hooks
+import { usePublish, usePublishList } from "@/hooks/store";
+// assets
+import planeLogo from "@/public/plane-logo.svg";
+
+type Props = { children: React.ReactNode; params: { anchor: string } };
+
+const PageDetailsLayout = (props: Props) => {
+  const { children, params } = props;
+  // params
+  const { anchor } = params;
+  // store hooks
+  const { fetchPublishSettings } = usePublishList();
+  const { id, workspace_detail, project } = usePublish(anchor);
+
+  useSWR(anchor ? `PUBLISH_SETTINGS_${anchor}` : null, anchor ? () => fetchPublishSettings(anchor) : null);
+
+  if (!workspace_detail || !project || !id) notFound();
+
+  return (
+    <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
+      <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+        <IssueNavbar workspaceSlug={workspace_detail.slug} projectId={project} />
+      </div>
+      <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+      <a
+        href="https://plane.so"
+        className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <div className="relative grid h-6 w-6 place-items-center">
+          <Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
+        </div>
+        <div className="text-xs">
+          Powered by <span className="font-semibold">Plane Deploy</span>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+export default PageDetailsLayout;

space/app/project-issues/[anchor]/layout.tsx

@@ -0,0 +1,46 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+// components
+import IssueNavbar from "@/components/issues/navbar";
+// hooks
+import { usePublish } from "@/hooks/store";
+// assets
+import planeLogo from "@/public/plane-logo.svg";
+
+type Props = { children: React.ReactNode; params: { anchor: string } };
+
+const ProjectIssuesLayout = (props: Props) => {
+  const { children, params } = props;
+  // params
+  const { anchor } = params;
+  // store hooks
+  const publishSettings = usePublish(anchor);
+  const { id, workspace_detail, project } = publishSettings;
+
+  if (!workspace_detail || !project || !id) notFound();
+
+  return (
+    <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
+      <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+        <IssueNavbar publishSettings={publishSettings} />
+      </div>
+      <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+      <a
+        href="https://plane.so"
+        className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <div className="relative grid h-6 w-6 place-items-center">
+          <Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
+        </div>
+        <div className="text-xs">
+          Powered by <span className="font-semibold">Plane Deploy</span>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+export default ProjectIssuesLayout;

space/app/project-issues/[anchor]/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { ProjectDetailsView } from "@/components/views";
+// hooks
+import { usePublish, usePublishList } from "@/hooks/store";
+
+type Props = {
+  params: {
+    anchor: string;
+  };
+};
+
+const ProjectIssuesPage = (props: Props) => {
+  const { params } = props;
+  const { anchor } = params;
+  // params
+  const searchParams = useSearchParams();
+  const peekId = searchParams.get("peekId") || undefined;
+  // store hooks
+  const { fetchPublishSettings } = usePublishList();
+  const publishSettings = usePublish(anchor);
+
+  useSWR(anchor ? `PUBLISH_SETTINGS_${anchor}` : null, anchor ? () => fetchPublishSettings(anchor) : null);
+
+  if (!publishSettings) return null;
+
+  return <ProjectDetailsView peekId={peekId} publishSettings={publishSettings} />;
+};
+
+export default ProjectIssuesPage;

space/components/account/user-logged-in.tsx

@@ -1,36 +1,44 @@
 "use client";
 
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 // components
 import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // hooks
 import { useUser } from "@/hooks/store";
 // assets
-import PlaneLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
+import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
+import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
 import UserLoggedInImage from "@/public/user-logged-in.svg";
 
-export const UserLoggedIn = () => {
+export const UserLoggedIn = observer(() => {
+  // store hooks
   const { data: user } = useUser();
+  // next-themes
+  const { resolvedTheme } = useTheme();
+
+  const logo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
 
   if (!user) return null;
 
   return (
-    <div className="flex h-screen w-screen flex-col">
+    <div className="flex flex-col h-screen w-screen">
       <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
         <div>
-          <Image src={PlaneLogo} alt="User already logged in" />
+          <Image src={logo} alt="Plane logo" />
         </div>
         <UserAvatar />
       </div>
 
-      <div className="grid h-full w-full place-items-center p-6">
+      <div className="size-full grid place-items-center p-6">
         <div className="text-center">
-          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
-            <div className="h-32 w-32">
+          <div className="mx-auto size-52 grid place-items-center rounded-full bg-custom-background-80">
+            <div className="size-32">
               <Image src={UserLoggedInImage} alt="User already logged in" />
             </div>
           </div>
-          <h1 className="mt-12 text-3xl font-semibold">Logged in Successfully!</h1>
+          <h1 className="mt-12 text-3xl font-semibold">Logged in successfully!</h1>
           <p className="mt-4">
             You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
           </p>
@@ -38,4 +46,4 @@ export const UserLoggedIn = () => {
       </div>
     </div>
   );
-};
+});

space/components/issues/navbar/controls.tsx

@@ -11,19 +11,20 @@ import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
-import { useProject, useIssueFilter, useIssueDetails } from "@/hooks/store";
+import { useIssueFilter, useIssueDetails } from "@/hooks/store";
 import useIsInIframe from "@/hooks/use-is-in-iframe";
+// store
+import { PublishStore } from "@/store/publish/publish.store";
 // types
 import { TIssueLayout } from "@/types/issue";
 
 export type NavbarControlsProps = {
-  workspaceSlug: string;
-  projectId: string;
+  publishSettings: PublishStore;
 };
 
 export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
   // props
-  const { workspaceSlug, projectId } = props;
+  const { publishSettings } = props;
   // router
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -35,23 +36,23 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
   const peekId = searchParams.get("peekId") || undefined;
   // hooks
   const { issueFilters, isIssueFiltersUpdated, initIssueFilters } = useIssueFilter();
-  const { settings } = useProject();
   const { setPeekId } = useIssueDetails();
   // derived values
   const activeLayout = issueFilters?.display_filters?.layout || undefined;
+  const { project, views, workspace_detail } = publishSettings;
 
   const isInIframe = useIsInIframe();
 
   useEffect(() => {
-    if (workspaceSlug && projectId && settings) {
+    if (project && workspace_detail) {
       const viewsAcceptable: string[] = [];
       let currentBoard: TIssueLayout | null = null;
 
-      if (settings?.views?.list) viewsAcceptable.push("list");
-      if (settings?.views?.kanban) viewsAcceptable.push("kanban");
-      if (settings?.views?.calendar) viewsAcceptable.push("calendar");
-      if (settings?.views?.gantt) viewsAcceptable.push("gantt");
-      if (settings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
+      if (views?.list) viewsAcceptable.push("list");
+      if (views?.kanban) viewsAcceptable.push("kanban");
+      if (views?.calendar) viewsAcceptable.push("calendar");
+      if (views?.gantt) viewsAcceptable.push("gantt");
+      if (views?.spreadsheet) viewsAcceptable.push("spreadsheet");
 
       if (board) {
         if (viewsAcceptable.includes(board.toString())) currentBoard = board.toString() as TIssueLayout;
@@ -75,38 +76,40 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
           };
 
           if (!isIssueFiltersUpdated(params)) {
-            initIssueFilters(projectId, params);
-            router.push(`/${workspaceSlug}/${projectId}?${queryParam}`);
+            initIssueFilters(project, params);
+            router.push(`/${workspace_detail.slug}/${project}?${queryParam}`);
           }
         }
       }
     }
   }, [
-    workspaceSlug,
-    projectId,
     board,
     labels,
     state,
     priority,
     peekId,
-    settings,
     activeLayout,
     router,
     initIssueFilters,
     setPeekId,
     isIssueFiltersUpdated,
+    views,
+    project,
+    workspace_detail,
   ]);
 
+  if (!workspace_detail || !project) return;
+
   return (
     <>
       {/* issue views */}
       <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
-        <NavbarIssueBoardView workspaceSlug={workspaceSlug} projectId={projectId} />
+        <NavbarIssueBoardView workspaceSlug={workspace_detail.slug} projectId={project} />
       </div>
 
       {/* issue filters */}
       <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
-        <IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
+        <IssueFiltersDropdown workspaceSlug={workspace_detail.slug} projectId={project} />
       </div>
 
       {/* theming */}

space/components/issues/navbar/index.tsx

@@ -5,37 +5,38 @@ import { Briefcase } from "lucide-react";
 // components
 import { ProjectLogo } from "@/components/common";
 import { NavbarControls } from "@/components/issues/navbar/controls";
-// hooks
-import { useProject } from "@/hooks/store";
+// store
+import { PublishStore } from "@/store/publish/publish.store";
 
 type IssueNavbarProps = {
-  workspaceSlug: string;
-  projectId: string;
+  publishSettings: PublishStore;
 };
 
 const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
-  const { workspaceSlug, projectId } = props;
+  const { publishSettings } = props;
   // hooks
-  const { project } = useProject();
+  const { project_details } = publishSettings;
 
   return (
     <div className="relative flex justify-between w-full gap-4 px-5">
       {/* project detail */}
       <div className="flex flex-shrink-0 items-center gap-2">
-        {project ? (
+        {project_details ? (
           <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
-            <ProjectLogo logo={project.logo_props} className="text-lg" />
+            <ProjectLogo logo={project_details.logo_props} className="text-lg" />
           </span>
         ) : (
           <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
             <Briefcase className="h-4 w-4" />
           </span>
         )}
-        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">{project?.name || `...`}</div>
+        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
+          {project_details?.name || `...`}
+        </div>
       </div>
 
       <div className="flex flex-shrink-0 items-center gap-2">
-        <NavbarControls workspaceSlug={workspaceSlug} projectId={projectId} />
+        <NavbarControls publishSettings={publishSettings} />
       </div>
     </div>
   );

space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // lib
@@ -29,7 +28,7 @@ export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer(
   const { workspaceSlug, projectId } = props;
   // store
   const issueDetailsStore = useIssueDetails();
-  const { data: user, fetchCurrentUser } = useUser();
+  const { data: user } = useUser();
 
   const issueId = issueDetailsStore.peekId;
   const reactions = issueId ? issueDetailsStore.details[issueId]?.reactions || [] : [];
@@ -53,11 +52,6 @@ export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer(
     else handleAddReaction(reactionHex);
   };
 
-  useEffect(() => {
-    if (user) return;
-    fetchCurrentUser();
-  }, [user, fetchCurrentUser]);
-
   // derived values
   const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
 

space/components/issues/peek-overview/issue-vote-reactions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Tooltip } from "@plane/ui";
@@ -32,7 +32,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const issueDetailsStore = useIssueDetails();
-  const { data: user, fetchCurrentUser } = useUser();
+  const { data: user } = useUser();
 
   const isInIframe = useIsInIframe();
 
@@ -63,12 +63,6 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
     setIsSubmitting(false);
   };
 
-  useEffect(() => {
-    if (user) return;
-
-    fetchCurrentUser();
-  }, [user, fetchCurrentUser]);
-
   const VOTES_LIMIT = 1000;
 
   // derived values

space/components/views/project-details.tsx

@@ -13,62 +13,52 @@ import { IssueListView } from "@/components/issues/board-views/list";
 import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadsheet";
 import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
-// mobx store
-import { useIssue, useUser, useIssueDetails, useIssueFilter, useProject } from "@/hooks/store";
+// hooks
+import { useIssue, useIssueDetails, useIssueFilter } from "@/hooks/store";
+// store
+import { PublishStore } from "@/store/publish/publish.store";
 // assets
 import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
 type ProjectDetailsViewProps = {
-  workspaceSlug: string;
-  projectId: string;
   peekId: string | undefined;
+  publishSettings: PublishStore;
 };
 
 export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
-  // router
-  const searchParams = useSearchParams();
+  const { peekId, publishSettings } = props;
   // query params
+  const searchParams = useSearchParams();
   const states = searchParams.get("states") || undefined;
   const priority = searchParams.get("priority") || undefined;
   const labels = searchParams.get("labels") || undefined;
-
-  const { workspaceSlug, projectId, peekId } = props;
-  // hooks
-  const { fetchProjectSettings } = useProject();
+  // store hooks
   const { issueFilters } = useIssueFilter();
   const { loader, issues, error, fetchPublicIssues } = useIssue();
   const issueDetailStore = useIssueDetails();
-  const { data: currentUser, fetchCurrentUser } = useUser();
+  // derived values
+  const { workspace_detail, project } = publishSettings;
+  const workspaceSlug = workspace_detail?.slug;
 
   useSWR(
-    workspaceSlug && projectId ? "WORKSPACE_PROJECT_SETTINGS" : null,
-    workspaceSlug && projectId ? () => fetchProjectSettings(workspaceSlug, projectId) : null
-  );
-  useSWR(
-    (workspaceSlug && projectId) || states || priority || labels ? "WORKSPACE_PROJECT_PUBLIC_ISSUES" : null,
-    (workspaceSlug && projectId) || states || priority || labels
-      ? () => fetchPublicIssues(workspaceSlug, projectId, { states, priority, labels })
-      : null
-  );
-  useSWR(
-    workspaceSlug && projectId && !currentUser ? "WORKSPACE_PROJECT_CURRENT_USER" : null,
-    workspaceSlug && projectId && !currentUser ? () => fetchCurrentUser() : null
+    workspaceSlug && project ? `WORKSPACE_PROJECT_PUBLIC_ISSUES_${workspaceSlug}_${project}` : null,
+    workspaceSlug && project ? () => fetchPublicIssues(workspaceSlug, project, { states, priority, labels }) : null
   );
 
   useEffect(() => {
-    if (peekId && workspaceSlug && projectId) {
+    if (peekId) {
       issueDetailStore.setPeekId(peekId.toString());
     }
-  }, [peekId, issueDetailStore, projectId, workspaceSlug]);
+  }, [peekId, issueDetailStore]);
 
   // derived values
   const activeLayout = issueFilters?.display_filters?.layout || undefined;
 
+  if (!workspaceSlug || !project) return null;
+
   return (
     <div className="relative h-full w-full overflow-hidden">
-      {workspaceSlug && projectId && peekId && (
-        <IssuePeekOverview workspaceSlug={workspaceSlug} projectId={projectId} peekId={peekId} />
-      )}
+      {peekId && <IssuePeekOverview workspaceSlug={workspaceSlug} projectId={project} peekId={peekId} />}
 
       {loader && !issues ? (
         <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
@@ -90,16 +80,16 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
             activeLayout && (
               <div className="relative flex h-full w-full flex-col overflow-hidden">
                 {/* applied filters */}
-                <IssueAppliedFilters workspaceSlug={workspaceSlug} projectId={projectId} />
+                <IssueAppliedFilters workspaceSlug={workspaceSlug} projectId={project} />
 
                 {activeLayout === "list" && (
                   <div className="relative h-full w-full overflow-y-auto">
-                    <IssueListView workspaceSlug={workspaceSlug} projectId={projectId} />
+                    <IssueListView workspaceSlug={workspaceSlug} projectId={project} />
                   </div>
                 )}
                 {activeLayout === "kanban" && (
                   <div className="relative mx-auto h-full w-full p-5">
-                    <IssueKanbanView workspaceSlug={workspaceSlug} projectId={projectId} />
+                    <IssueKanbanView workspaceSlug={workspaceSlug} projectId={project} />
                   </div>
                 )}
                 {activeLayout === "calendar" && <IssueCalendarView />}

space/helpers/actions.ts

@@ -0,0 +1,5 @@
+"use server";
+
+import { redirect } from "next/navigation";
+
+export const navigate = async (path: string) => redirect(path);

space/hooks/store/index.ts

@@ -1,5 +1,5 @@
+export * from "./publish";
 export * from "./use-instance";
-export * from "./use-project";
 export * from "./use-issue";
 export * from "./use-user";
 export * from "./use-user-profile";

space/hooks/store/publish/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-publish-list";
+export * from "./use-publish";

space/hooks/store/publish/use-publish-list.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import { IPublishListStore } from "@/store/publish/publish_list.store";
+
+export const usePublishList = (): IPublishListStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePublishList must be used within StoreProvider");
+  return context.publishList;
+};

space/hooks/store/publish/use-publish.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/store-provider";
+// store
+import { PublishStore } from "@/store/publish/publish.store";
+
+export const usePublish = (anchor: string): PublishStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePublish must be used within StoreProvider");
+  return context.publishList.publishMap?.[anchor] ?? {};
+};

space/lib/user-provider.tsx

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-import { useUser } from "@/hooks/store";
-
-export const UserProvider = observer(({ children }: { children: ReactNode }) => {
-  const { fetchCurrentUser } = useUser();
-
-  useSWR("CURRENT_USER", () => fetchCurrentUser());
-
-  return <>{children}</>;
-});

space/services/project.service.ts

@@ -1,19 +0,0 @@
-import { API_BASE_URL } from "@/helpers/common.helper";
-// services
-import { APIService } from "@/services/api.service";
-
-class ProjectService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getProjectSettings(workspace_slug: string, project_slug: string): Promise<any> {
-    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default ProjectService;

space/services/publish.service.ts

@@ -0,0 +1,37 @@
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+// types
+import { TPublishSettings } from "@/types/publish";
+
+class PublishService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchPublishSettings(anchor: string): Promise<TPublishSettings> {
+    return this.get(`/api/public/publish-settings/${anchor}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async fetchAnchorFromOldDetails(
+    workspaceSlug: string,
+    projectID: string
+  ): Promise<{
+    anchor: string;
+  }> {
+    return this.post(`/api/public/publish-anchor/`, {
+      workspaceSlug,
+      projectID,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default PublishService;

space/store/project.store.ts

@@ -13,7 +13,7 @@ export interface IProjectStore {
   error: any | undefined;
   settings: TProjectSettings | undefined;
   workspace: TWorkspaceDetails | undefined;
-  project: TProjectDetails | undefined;
+  projectMap: Record<string, TProjectDetails>; // { [projectID]: TProjectDetails }
   canReact: boolean;
   canComment: boolean;
   canVote: boolean;
@@ -28,7 +28,7 @@ export class ProjectStore implements IProjectStore {
   error: any | undefined = undefined;
   settings: TProjectSettings | undefined = undefined;
   workspace: TWorkspaceDetails | undefined = undefined;
-  project: TProjectDetails | undefined = undefined;
+  projectMap: Record<string, TProjectDetails> = {};
   // service
   projectService;
 
@@ -39,7 +39,7 @@ export class ProjectStore implements IProjectStore {
       error: observable.ref,
       // observable
       workspace: observable,
-      project: observable,
+      projectMap: observable,
       settings: observable,
       // computed
       canReact: computed,

space/store/publish/publish.store.ts

@@ -0,0 +1,67 @@
+import { observable, makeObservable } from "mobx";
+// store types
+import { RootStore } from "@/store/root.store";
+// types
+import { TProjectDetails, TViewDetails, TWorkspaceDetails } from "@/types/project";
+import { TPublishSettings } from "@/types/publish";
+
+export interface IPublishStore extends TPublishSettings {}
+
+export class PublishStore implements IPublishStore {
+  // observables
+  anchor: string | undefined;
+  comments: boolean;
+  created_at: string | undefined;
+  created_by: string | undefined;
+  id: string | undefined;
+  inbox: unknown;
+  project: string | undefined;
+  project_details: TProjectDetails | undefined;
+  reactions: boolean;
+  updated_at: string | undefined;
+  updated_by: string | undefined;
+  views: TViewDetails | undefined;
+  votes: boolean;
+  workspace: string | undefined;
+  workspace_detail: TWorkspaceDetails | undefined;
+
+  constructor(
+    private store: RootStore,
+    publishSettings: TPublishSettings
+  ) {
+    this.anchor = publishSettings.anchor;
+    this.comments = publishSettings.comments;
+    this.created_at = publishSettings.created_at;
+    this.created_by = publishSettings.created_by;
+    this.id = publishSettings.id;
+    this.inbox = publishSettings.inbox;
+    this.project = publishSettings.project;
+    this.project_details = publishSettings.project_details;
+    this.reactions = publishSettings.reactions;
+    this.updated_at = publishSettings.updated_at;
+    this.updated_by = publishSettings.updated_by;
+    this.views = publishSettings.views;
+    this.votes = publishSettings.votes;
+    this.workspace = publishSettings.workspace;
+    this.workspace_detail = publishSettings.workspace_detail;
+
+    makeObservable(this, {
+      // observables
+      anchor: observable.ref,
+      comments: observable.ref,
+      created_at: observable.ref,
+      created_by: observable.ref,
+      id: observable.ref,
+      inbox: observable,
+      project: observable.ref,
+      project_details: observable,
+      reactions: observable.ref,
+      updated_at: observable.ref,
+      updated_by: observable.ref,
+      views: observable,
+      votes: observable.ref,
+      workspace: observable.ref,
+      workspace_detail: observable,
+    });
+  }
+}

space/store/publish/publish_list.store.ts

@@ -0,0 +1,52 @@
+import set from "lodash/set";
+import { makeObservable, observable, runInAction, action } from "mobx";
+// services
+import PublishService from "@/services/publish.service";
+// store
+import { PublishStore } from "@/store/publish/publish.store";
+// store
+import { TPublishSettings } from "@/types/publish";
+import { RootStore } from "../root.store";
+
+export interface IPublishListStore {
+  // observables
+  publishMap: Record<string, PublishStore>; // anchor => PublishStore
+  // actions
+  fetchPublishSettings: (pageId: string) => Promise<TPublishSettings>;
+}
+
+export class PublishListStore implements IPublishListStore {
+  // observables
+  publishMap: Record<string, PublishStore> = {}; // anchor => PublishStore
+  // service
+  publishService;
+
+  constructor(private store: RootStore) {
+    makeObservable(this, {
+      // observables
+      publishMap: observable,
+      // actions
+      fetchPublishSettings: action,
+    });
+    // services
+    this.publishService = new PublishService();
+  }
+
+  /**
+   * @description fetch publish settings
+   * @param {string} anchor
+   */
+  fetchPublishSettings = async (anchor: string) => {
+    try {
+      const publishSettings = await this.publishService.fetchPublishSettings(anchor);
+      runInAction(() => {
+        if (publishSettings.anchor)
+          set(this.publishMap, [publishSettings.anchor], new PublishStore(this.store, publishSettings));
+      });
+
+      return publishSettings;
+    } catch (error) {
+      throw error;
+    }
+  };
+}

space/store/root.store.ts

@@ -3,30 +3,30 @@ import { enableStaticRendering } from "mobx-react-lite";
 import { IInstanceStore, InstanceStore } from "@/store/instance.store";
 import { IssueDetailStore, IIssueDetailStore } from "@/store/issue-detail.store";
 import { IssueStore, IIssueStore } from "@/store/issue.store";
-import { IProjectStore, ProjectStore } from "@/store/project.store";
 import { IUserStore, UserStore } from "@/store/user.store";
 import { IssueFilterStore, IIssueFilterStore } from "./issue-filters.store";
 import { IMentionsStore, MentionsStore } from "./mentions.store";
+import { IPublishListStore, PublishListStore } from "./publish/publish_list.store";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   instance: IInstanceStore;
   user: IUserStore;
-  project: IProjectStore;
   issue: IIssueStore;
   issueDetail: IIssueDetailStore;
   mentionStore: IMentionsStore;
   issueFilter: IIssueFilterStore;
+  publishList: IPublishListStore;
 
   constructor() {
     this.instance = new InstanceStore(this);
     this.user = new UserStore(this);
-    this.project = new ProjectStore(this);
     this.issue = new IssueStore(this);
     this.issueDetail = new IssueDetailStore(this);
     this.mentionStore = new MentionsStore(this);
     this.issueFilter = new IssueFilterStore(this);
+    this.publishList = new PublishListStore(this);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -40,10 +40,10 @@ export class RootStore {
     localStorage.setItem("theme", "system");
     this.instance = new InstanceStore(this);
     this.user = new UserStore(this);
-    this.project = new ProjectStore(this);
     this.issue = new IssueStore(this);
     this.issueDetail = new IssueDetailStore(this);
     this.mentionStore = new MentionsStore(this);
     this.issueFilter = new IssueFilterStore(this);
+    this.publishList = new PublishListStore(this);
   };
 }

space/types/publish.d.ts

@@ -0,0 +1,19 @@
+import { TProjectDetails, TViewDetails, TWorkspaceDetails } from "./project";
+
+export type TPublishSettings = {
+  anchor: string | undefined;
+  comments: boolean;
+  created_at: string | undefined;
+  created_by: string | undefined;
+  id: string | undefined;
+  inbox: unknown;
+  project: string | undefined;
+  project_details: TProjectDetails | undefined;
+  reactions: boolean;
+  updated_at: string | undefined;
+  updated_by: string | undefined;
+  views: TViewDetails | undefined;
+  votes: boolean;
+  workspace: string | undefined;
+  workspace_detail: TWorkspaceDetails | undefined;
+};