feat: converting space app to use nextjs app dir (#4451)

* feat: changemod space

* fix: space app dir fixes

* fix: build errors

packages/eslint-config-custom/index.js

@@ -13,7 +13,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint", "import"],
   settings: {
     next: {
-      rootDir: ["web/", "space/", "packages/*/"],
+      rootDir: ["web/", "space/", "admin/", "packages/*/"],
     },
   },
   rules: {

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

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ProjectError() {
+  return <>Project Error</>;
+}

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

@@ -0,0 +1,36 @@
+import Image from "next/image";
+// components
+import IssueNavbar from "@/components/issues/navbar";
+// services
+import ProjectService from "@/services/project.service";
+// assets
+import planeLogo from "public/plane-logo.svg";
+
+const projectService = new ProjectService();
+
+export default async function ProjectLayout({ children, params }: { children: React.ReactNode; params: any }) {
+  const { workspace_slug, project_id } = params;
+  const projectSettings = await projectService.getProjectSettings(workspace_slug, project_id);
+
+  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 projectSettings={projectSettings} 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>
+  );
+}

space/app/[workspace_slug]/[project_id]/not-found.tsx

@@ -0,0 +1,3 @@
+export default function ProjectSettingsNotFound() {
+  return <>Project Settings not found</>;
+}

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

@@ -0,0 +1,8 @@
+// components
+import { ProjectDetailsView } from "@/components/views";
+
+export default async function WorkspaceProjectPage({ params }: { params: any }) {
+  const { workspace_slug, project_id, peekId } = params;
+
+  return <ProjectDetailsView workspaceSlug={workspace_slug} projectId={project_id} peekId={peekId} />;
+}

space/app/error.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Button } from "@plane/ui";
+// assets
+import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
+import InstanceFailureImage from "@/public/instance/instance-failure.svg";
+
+export default function InstanceError() {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+        <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 Logo" />
+            <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.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="md" onClick={handleRetry}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

space/app/layout.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from "next";
+// styles
+import "@/styles/globals.css";
+// helpers
+import { ASSET_PREFIX } from "@/helpers/common.helper";
+
+export const metadata: Metadata = {
+  title: "Plane Deploy | Make your Plane boards public with one-click",
+  description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
+  openGraph: {
+    title: "Plane Deploy | Make your Plane boards public with one-click",
+    description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
+    url: "https://sites.plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${ASSET_PREFIX}site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${ASSET_PREFIX}favicon/favicon.ico`} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

space/app/not-found.tsx

@@ -0,0 +1,39 @@
+"use client";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Button } from "@plane/ui";
+// assets
+import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
+import InstanceFailureImage from "@/public/instance/instance-failure.svg";
+
+export default function InstanceNotFound() {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div>
+      <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+        <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 Logo" />
+            <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.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="md" onClick={handleRetry}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

space/app/page.tsx

@@ -0,0 +1,43 @@
+// components
+import { UserLoggedIn } from "@/components/accounts";
+import { InstanceNotReady, InstanceFailureView } from "@/components/instance";
+import { AuthView } from "@/components/views";
+// helpers
+// import { EPageTypes } from "@/helpers/authentication.helper";
+// import { useInstance, useUser } from "@/hooks/store";
+// wrapper
+// import { AuthWrapper } from "@/lib/wrappers";
+// lib
+import { AppProvider } from "@/lib/app-providers";
+// services
+import { InstanceService } from "@/services/instance.service";
+import { UserService } from "@/services/user.service";
+
+const userServices = new UserService();
+const instanceService = new InstanceService();
+
+export default async function HomePage() {
+  const instanceDetails = await instanceService.getInstanceInfo().catch(() => undefined);
+  const user = await userServices
+    .currentUser()
+    .then((user) => ({ ...user, isAuthenticated: true }))
+    .catch(() => ({ isAuthenticated: false }));
+
+  if (!instanceDetails) {
+    return <InstanceFailureView />;
+  }
+
+  if (!instanceDetails?.instance?.is_setup_done) {
+    <InstanceNotReady />;
+  }
+
+  if (user.isAuthenticated) {
+    return <UserLoggedIn />;
+  }
+
+  return (
+    <AppProvider initialState={{ instance: instanceDetails.instance }}>
+      <AuthView />
+    </AppProvider>
+  );
+}

space/components/accounts/auth-forms/email.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 // icons

space/components/accounts/auth-forms/forgot-password-popover.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { X } from "lucide-react";

space/components/accounts/auth-forms/password.tsx

@@ -1,7 +1,9 @@
+"use client";
+
 import React, { useEffect, useMemo, useState } from "react";
 // icons
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // ui
 import { Button, Input, Spinner } from "@plane/ui";
@@ -12,7 +14,7 @@ import { API_BASE_URL } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
-import { AuthService } from "@/services/authentication.service";
+import { AuthService } from "@/services/auth.service";
 
 type Props = {
   email: string;
@@ -43,12 +45,11 @@ export const PasswordForm: React.FC<Props> = (props) => {
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   // hooks
-  const { instance } = useInstance();
+  const { data: instance, config: instanceConfig } = useInstance();
   // router
-  const router = useRouter();
+  const { next_path } = useParams<any>();
-  const { next_path } = router.query;
   // derived values
-  const isSmtpConfigured = instance?.config?.is_smtp_configured;
+  const isSmtpConfigured = instanceConfig?.is_smtp_configured;
 
   const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
     setPasswordFormData((prev) => ({ ...prev, [key]: value }));

space/components/accounts/auth-forms/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // components
@@ -7,7 +9,7 @@ import { EmailForm, UniqueCodeForm, PasswordForm, OAuthOptions, TermsAndConditio
 import { useInstance } from "@/hooks/store";
 import useToast from "@/hooks/use-toast";
 // services
-import { AuthService } from "@/services/authentication.service";
+import { AuthService } from "@/services/auth.service";
 
 export enum EAuthSteps {
   EMAIL = "EMAIL",
@@ -60,9 +62,9 @@ export const AuthRoot = observer(() => {
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
   const [email, setEmail] = useState("");
   // hooks
-  const { instance } = useInstance();
+  const { config: instanceConfig } = useInstance();
   // derived values
-  const isSmtpConfigured = instance?.config?.is_smtp_configured;
+  const isSmtpConfigured = instanceConfig?.is_smtp_configured;
 
   const { header, subHeader } = getHeaderSubHeader(authMode);
 
@@ -112,8 +114,8 @@ export const AuthRoot = observer(() => {
       );
   };
 
-  const isOAuthEnabled =
+  const isOAuthEnabled = instanceConfig && (instanceConfig?.is_google_enabled || instanceConfig?.is_github_enabled);
-    instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
+
   return (
     <div className="relative flex flex-col space-y-6">
       <div className="space-y-1 text-center">
@@ -149,7 +151,7 @@ export const AuthRoot = observer(() => {
           )}
         </>
       )}
-      {isOAuthEnabled && <OAuthOptions />}
+      {isOAuthEnabled !== undefined && <OAuthOptions />}
       <TermsAndConditions mode={authMode} />
     </div>
   );

space/components/accounts/auth-forms/unique-code.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 // icons
 import { CircleCheck, XCircle } from "lucide-react";
 // ui
@@ -10,7 +12,7 @@ import { API_BASE_URL } from "@/helpers/common.helper";
 import useTimer from "@/hooks/use-timer";
 import useToast from "@/hooks/use-toast";
 // services
-import { AuthService } from "@/services/authentication.service";
+import { AuthService } from "@/services/auth.service";
 // types
 import { IEmailCheckData } from "@/types/auth";
 import { EAuthModes } from "./root";
@@ -43,8 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isSubmitting, setIsSubmitting] = useState(false);
   // router
-  const router = useRouter();
+  const { next_path } = useParams<any>();
-  const { next_path } = router.query;
   // toast alert
   const { setToastAlert } = useToast();
   // timer

space/components/accounts/oauth/github-button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";

space/components/accounts/oauth/google-button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";

space/components/accounts/oauth/oauth-options.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 // components
 import { GithubOAuthButton, GoogleOAuthButton } from "@/components/accounts";
@@ -6,7 +8,7 @@ import { useInstance } from "@/hooks/store";
 
 export const OAuthOptions: React.FC = observer(() => {
   // hooks
-  const { instance } = useInstance();
+  const { config: instanceConfig } = useInstance();
 
   return (
     <>
@@ -16,12 +18,12 @@ export const OAuthOptions: React.FC = observer(() => {
         <hr className="w-full border-onboarding-border-100" />
       </div>
       <div className={`mx-auto mt-7 grid gap-4 overflow-hidden sm:w-96`}>
-        {instance?.config?.is_google_enabled && (
+        {instanceConfig?.is_google_enabled && (
           <div className="flex h-[42px] items-center !overflow-hidden">
             <GoogleOAuthButton text="SignIn with Google" />
           </div>
         )}
-        {instance?.config?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
+        {instanceConfig?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
       </div>
     </>
   );

space/components/accounts/onboarding-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
@@ -8,7 +10,7 @@ import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { UserImageUploadModal } from "@/components/accounts";
 // hooks
-import { useMobxStore } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 // services
 import fileService from "@/services/file.service";
 
@@ -35,9 +37,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   // store hooks
-  const {
+  const { updateCurrentUser } = useUser();
-    user: { updateCurrentUser },
-  } = useMobxStore();
   // form info
   const {
     getValues,

space/components/accounts/password-strength-meter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // icons
 import { CircleCheck } from "lucide-react";
 // helpers

space/components/accounts/terms-and-conditions.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import Link from "next/link";
 import { EAuthModes } from "./auth-forms";

space/components/accounts/user-image-upload-modal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
@@ -27,7 +28,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
   // store hooks
-  const { instance } = useInstance();
+  const { config: instanceConfig } = useInstance();
 
   const onDrop = (acceptedFiles: File[]) => setImage(acceptedFiles[0]);
 
@@ -36,7 +37,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
     accept: {
       "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
     },
-    maxSize: instance?.config?.file_size_limit ?? MAX_FILE_SIZE,
+    maxSize: (instanceConfig?.file_size_limit as number) ?? MAX_FILE_SIZE,
     multiple: false,
   });
 

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

@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 // hooks
 import { useUser } from "@/hooks/store";

space/components/instance/instance-failure-view.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
@@ -7,15 +8,18 @@ import InstanceFailureDarkImage from "public/instance/instance-failure-dark.svg"
 import InstanceFailureImage from "public/instance/instance-failure.svg";
 
 type InstanceFailureViewProps = {
-  mutate: () => void;
+  // mutate: () => void;
 };
 
-export const InstanceFailureView: FC<InstanceFailureViewProps> = (props) => {
+export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
-  const { mutate } = props;
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
 
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
   return (
     <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
@@ -28,7 +32,7 @@ export const InstanceFailureView: FC<InstanceFailureViewProps> = (props) => {
           </p>
         </div>
         <div className="flex justify-center">
-          <Button size="md" onClick={mutate}>
+          <Button size="md" onClick={handleRetry}>
             Retry
           </Button>
         </div>

space/components/instance/not-ready-view.tsx

@@ -1,18 +1,19 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
-import Link from "next/link";
 // ui
 import { Button } from "@plane/ui";
-// helpers
+// helper
 import { ADMIN_BASE_URL, ADMIN_BASE_PATH } from "@/helpers/common.helper";
 // images
 import PlaneTakeOffImage from "@/public/instance/plane-takeoff.png";
 
 export const InstanceNotReady: FC = () => {
-  const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH + "/setup/?auth_enabled=0");
+  const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH);
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center pt-12">
       <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">
           <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
@@ -21,13 +22,12 @@ export const InstanceNotReady: FC = () => {
             Get started by setting up your instance and workspace
           </p>
         </div>
-
         <div>
-          <Link href={GOD_MODE_URL}>
+          <a href={GOD_MODE_URL}>
             <Button size="lg" className="w-full">
               Get started
             </Button>
-          </Link>
+          </a>
         </div>
       </div>
     </div>

space/components/issues/board-views/kanban/block.tsx

@@ -1,53 +1,48 @@
 "use client";
 
-// mobx react lite
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
+// components
 import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
 import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
 import { IssueBlockState } from "@/components/issues/board-views/block-state";
-import { useMobxStore } from "@/hooks/store";
+// hooks
-
+import { useIssueDetails, useProject } from "@/hooks/store";
-// components
 // interfaces
-import { RootStore } from "@/store/root.store";
+import { IIssue } from "@/types/issue";
-import { IIssue } from "types/issue";
 
-export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
+type IssueKanBanBlockProps = {
-  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  issue: IIssue;
+  workspaceSlug: string;
+  projectId: string;
+  params: any;
+};
 
+export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
+  const { workspaceSlug, projectId, params, issue } = props;
+  const { board, priorities, states, labels } = params;
+  // store
+  const { project } = useProject();
+  const { setPeekId } = useIssueDetails();
   // router
   const router = useRouter();
-  const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
+  const searchParams = useSearchParams();
-    workspace_slug: string;
-    project_slug: string;
-    board: string;
-    priorities: string;
-    states: string;
-    labels: string;
-  };
 
   const handleBlockClick = () => {
-    issueDetailStore.setPeekId(issue.id);
+    setPeekId(issue.id);
     const params: any = { board: board, peekId: issue.id };
     if (states && states.length > 0) params.states = states;
     if (priorities && priorities.length > 0) params.priorities = priorities;
     if (labels && labels.length > 0) params.labels = labels;
-    router.push(
+    router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
-      {
-        pathname: `/${workspace_slug}/${project_slug}`,
-        query: { ...params },
-      },
-      undefined,
-      { shallow: true }
-    );
   };
 
   return (
     <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
       <div className="break-words text-xs text-custom-text-300">
-        {projectStore?.project?.identifier}-{issue?.sequence_id}
+        {project?.identifier}-{issue?.sequence_id}
       </div>
 
       {/* name */}

space/components/issues/board-views/kanban/header.tsx

@@ -1,18 +1,16 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// interfaces
-// constants
-import { StateGroupIcon } from "@plane/ui";
-import { issueGroupFilter } from "@/constants/data";
 // ui
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { issueGroupFilter } from "@/constants/data";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssue } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
+// interfaces
-import { IIssueState } from "types/issue";
+import { IIssueState } from "@/types/issue";
 
 export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
+  const { getCountOfIssuesByState } = useIssue();
-
   const stateGroup = issueGroupFilter(state.group);
 
   if (stateGroup === null) return <></>;
@@ -23,9 +21,7 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
       <div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
-      <span className="flex-shrink-0 rounded-full text-custom-text-300">
+      <span className="flex-shrink-0 rounded-full text-custom-text-300">{getCountOfIssuesByState(state.id)}</span>
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </span>
     </div>
   );
 });

space/components/issues/board-views/kanban/index.tsx

@@ -1,36 +1,47 @@
 "use client";
 
-// mobx react lite
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueKanBanBlock } from "@/components/issues/board-views/kanban/block";
 import { IssueKanBanHeader } from "@/components/issues/board-views/kanban/header";
 // ui
 import { Icon } from "@/components/ui";
-// interfaces
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssue } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
+// interfaces
-import { IIssueState, IIssue } from "types/issue";
+import { IIssueState, IIssue } from "@/types/issue";
 
-export const IssueKanbanView = observer(() => {
+type IssueKanbanViewProps = {
-  const store: RootStore = useMobxStore();
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { states, getFilteredIssuesByState } = useIssue();
 
   return (
     <div className="relative flex h-full w-full gap-3 overflow-hidden overflow-x-auto">
-      {store?.issue?.states &&
+      {states &&
-        store?.issue?.states.length > 0 &&
+        states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
+        states.map((_state: IIssueState) => (
           <div key={_state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
             <div className="flex-shrink-0">
               <IssueKanBanHeader state={_state} />
             </div>
             <div className="hide-vertical-scrollbar h-full w-full overflow-hidden overflow-y-auto">
-              {store.issue.getFilteredIssuesByState(_state.id) &&
+              {getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
-              store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
                 <div className="space-y-3 px-2 pb-2">
-                  {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                  {getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueKanBanBlock key={_issue.id} issue={_issue} />
+                    <IssueKanBanBlock
+                      key={_issue.id}
+                      issue={_issue}
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      params={{}}
+                    />
                   ))}
                 </div>
               ) : (

space/components/issues/board-views/list/block.tsx

@@ -1,47 +1,40 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 // components
 import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
 import { IssueBlockLabels } from "@/components/issues/board-views/block-labels";
 import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
 import { IssueBlockState } from "@/components/issues/board-views/block-state";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssueDetails, useProject } from "@/hooks/store";
 // interfaces
-import { RootStore } from "@/store/root.store";
+import { IIssue } from "@/types/issue";
-import { IIssue } from "types/issue";
 // store
 
-export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
+type IssueListBlockProps = {
-  const { issue } = props;
+  issue: IIssue;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
+  const { workspaceSlug, projectId, issue } = props;
+  const { board, states, priorities, labels } = useParams<any>();
+  const searchParams = useSearchParams();
   // store
-  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  const { project } = useProject();
+  const { setPeekId } = useIssueDetails();
   // router
   const router = useRouter();
-  const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
-    workspace_slug: string;
-    project_slug: string;
-    board: string;
-    priorities: string;
-    states: string;
-    labels: string;
-  };
 
   const handleBlockClick = () => {
-    issueDetailStore.setPeekId(issue.id);
+    setPeekId(issue.id);
     const params: any = { board: board, peekId: issue.id };
     if (states && states.length > 0) params.states = states;
     if (priorities && priorities.length > 0) params.priorities = priorities;
     if (labels && labels.length > 0) params.labels = labels;
-    router.push(
+    router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
-      {
-        pathname: `/${workspace_slug}/${project_slug}`,
-        query: { ...params },
-      },
-      undefined,
-      { shallow: true }
-    );
     // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
   };
 
@@ -50,7 +43,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
       <div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
         {/* id */}
         <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-          {projectStore?.project?.identifier}-{issue?.sequence_id}
+          {project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
         <div onClick={handleBlockClick} className="flex-grow cursor-pointer truncate text-sm font-medium">

space/components/issues/board-views/list/header.tsx

@@ -1,18 +1,15 @@
-// mobx react lite
 import { observer } from "mobx-react-lite";
-// interfaces
 // ui
 import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "@/constants/data";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssue } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
+// types
-import { IIssueState } from "types/issue";
+import { IIssueState } from "@/types/issue";
 
 export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
+  const { getCountOfIssuesByState } = useIssue();
-
   const stateGroup = issueGroupFilter(state.group);
 
   if (stateGroup === null) return <></>;
@@ -23,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
       <div className="mr-1 font-medium capitalize">{state?.name}</div>
-      <div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="text-sm font-medium text-custom-text-200">{getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });

space/components/issues/board-views/list/index.tsx

@@ -1,29 +1,34 @@
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListBlock } from "@/components/issues/board-views/list/block";
 import { IssueListHeader } from "@/components/issues/board-views/list/header";
-// interfaces
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssue } from "@/hooks/store";
-// store
+// types
-import { RootStore } from "@/store/root.store";
+import { IIssueState, IIssue } from "@/types/issue";
-import { IIssueState, IIssue } from "types/issue";
 
-export const IssueListView = observer(() => {
+type IssueListViewProps = {
-  const { issue: issueStore }: RootStore = useMobxStore();
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueListView: FC<IssueListViewProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { states, getFilteredIssuesByState } = useIssue();
 
   return (
     <>
-      {issueStore?.states &&
+      {states &&
-        issueStore?.states.length > 0 &&
+        states.length > 0 &&
-        issueStore?.states.map((_state: IIssueState) => (
+        states.map((_state: IIssueState) => (
           <div key={_state.id} className="relative w-full">
             <IssueListHeader state={_state} />
-            {issueStore.getFilteredIssuesByState(_state.id) &&
+            {getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
-            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
               <div className="divide-y divide-custom-border-200">
-                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                {getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock key={_issue.id} issue={_issue} />
+                  <IssueListBlock key={_issue.id} issue={_issue} workspaceSlug={workspaceSlug} projectId={projectId} />
                 ))}
               </div>
             ) : (

space/components/issues/filters/applied-filters/filters-list.tsx

@@ -1,12 +1,10 @@
-// components
 // icons
 import { X } from "lucide-react";
-// helpers
+// types
-import { IIssueFilterOptions } from "@/store/issues/types";
+import { IIssueLabel, IIssueState, IIssueFilterOptions } from "@/types/issue";
-import { IIssueLabel, IIssueState } from "types/issue";
+// components
 import { AppliedPriorityFilters } from "./priority";
 import { AppliedStateFilters } from "./state";
-// types
 
 type Props = {
   appliedFilters: IIssueFilterOptions;

space/components/issues/filters/applied-filters/root.tsx

@@ -1,33 +1,31 @@
+"use client";
+
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
-// components
+// hooks
+import { useIssue, useProject, useIssueFilter } from "@/hooks/store";
 // store
-import { useMobxStore } from "@/hooks/store";
+import { IIssueFilterOptions } from "@/types/issue";
-import { IIssueFilterOptions } from "@/store/issues/types";
+// components
-import { RootStore } from "@/store/root.store";
 import { AppliedFiltersList } from "./filters-list";
 
-export const IssueAppliedFilters: FC = observer(() => {
+// TODO: fix component types
+export const IssueAppliedFilters: FC = observer((props: any) => {
   const router = useRouter();
-  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+  const { workspaceSlug, projectId } = props;
-    workspace_slug: string;
+  const { states, labels } = useIssue();
-    project_slug: string;
+  const { activeLayout } = useProject();
-  };
+  const { issueFilters, updateFilters } = useIssueFilter();
-
-  const {
-    issuesFilter: { issueFilters, updateFilters },
-    issue: { states, labels },
-    project: { activeBoard },
-  }: RootStore = useMobxStore();
 
   const userFilters = issueFilters?.filters || {};
 
-  const appliedFilters: IIssueFilterOptions = {};
+  const appliedFilters: any = {};
+
   Object.entries(userFilters).forEach(([key, value]) => {
     if (!value) return;
     if (Array.isArray(value) && value.length === 0) return;
-    appliedFilters[key as keyof IIssueFilterOptions] = value;
+    appliedFilters[key] = value;
   });
 
   const updateRouteParams = useCallback(
@@ -36,16 +34,17 @@ export const IssueAppliedFilters: FC = observer(() => {
       const priority = key === "priority" ? value || [] : issueFilters?.filters?.priority ?? [];
       const labels = key === "labels" ? value || [] : issueFilters?.filters?.labels ?? [];
 
-      let params: any = { board: activeBoard || "list" };
+      let params: any = { board: activeLayout || "list" };
       if (!clearFields) {
         if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
         if (state.length > 0) params = { ...params, states: state.join(",") };
         if (labels.length > 0) params = { ...params, labels: labels.join(",") };
       }
-
+      console.log("params", params);
-      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+      // TODO: fix this redirection
+      // router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
     },
-    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+    [workspaceSlug, projectId, activeLayout, issueFilters, router]
   );
 
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
@@ -80,7 +79,7 @@ export const IssueAppliedFilters: FC = observer(() => {
     <div className="border-b border-custom-border-200 p-5 py-3">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
-        handleRemoveFilter={handleRemoveFilter}
+        handleRemoveFilter={handleRemoveFilter as any}
         handleRemoveAllFilters={handleRemoveAllFilters}
         labels={labels ?? []}
         states={states ?? []}

space/components/issues/filters/root.tsx

@@ -1,29 +1,29 @@
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+// hooks
+import { useIssue, useIssueFilter, useProject } from "@/hooks/store";
+// types
+import { IIssueFilterOptions } from "@/types/issue";
 // components
-import { useMobxStore } from "@/hooks/store";
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/store/issues/helpers";
-import { IIssueFilterOptions } from "@/store/issues/types";
-import { RootStore } from "@/store/root.store";
 import { FiltersDropdown } from "./helpers/dropdown";
 import { FilterSelection } from "./selection";
-// types
-// helpers
-// store
 
-export const IssueFiltersDropdown: FC = observer(() => {
+type IssueFiltersDropdownProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueFiltersDropdown: FC<IssueFiltersDropdownProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  const searchParams = useSearchParams();
   const router = useRouter();
-  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+  // store hooks
-    workspace_slug: string;
+  const { activeLayout } = useProject();
-    project_slug: string;
+  const { states, labels } = useIssue();
-  };
+  const { issueFilters, updateFilters } = useIssueFilter();
-
-  const {
-    project: { activeBoard },
-    issue: { states, labels },
-    issuesFilter: { issueFilters, updateFilters },
-  }: RootStore = useMobxStore();
 
   const updateRouteParams = useCallback(
     (key: keyof IIssueFilterOptions, value: string[]) => {
@@ -31,14 +31,14 @@ export const IssueFiltersDropdown: FC = observer(() => {
       const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
       const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
 
-      let params: any = { board: activeBoard || "list" };
+      let params: any = { board: activeLayout || "list" };
       if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
       if (state.length > 0) params = { ...params, states: state.join(",") };
       if (labels.length > 0) params = { ...params, labels: labels.join(",") };
-
+      console.log("params", params);
-      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+      router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
     },
-    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+    [workspaceSlug, projectId, activeLayout, issueFilters, router]
   );
 
   const handleFilters = useCallback(
@@ -66,8 +66,8 @@ export const IssueFiltersDropdown: FC = observer(() => {
       <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={issueFilters?.filters ?? {}}
-          handleFilters={handleFilters}
+          handleFilters={handleFilters as any}
-          layoutDisplayFiltersOptions={activeBoard ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeBoard] : undefined}
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
           states={states ?? undefined}
           labels={labels ?? undefined}
         />

space/components/issues/filters/selection.tsx

@@ -1,13 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
-// components
 // types
-
+import { IIssueState, IIssueLabel, IIssueFilterOptions } from "@/types/issue";
-// filter helpers
+import { ILayoutDisplayFiltersOptions } from "@/types/issue-filters";
-import { ILayoutDisplayFiltersOptions } from "@/store/issues/helpers";
+// components
-import { IIssueFilterOptions } from "@/store/issues/types";
-import { IIssueState, IIssueLabel } from "types/issue";
 import { FilterPriority, FilterState } from "./";
 
 type Props = {

space/components/issues/navbar/index.tsx

@@ -1,54 +1,52 @@
-import { useEffect } from "react";
+"use client";
+
+import { useEffect, FC } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
-// components
 import { Briefcase } from "lucide-react";
 import { Avatar, Button } from "@plane/ui";
+// components
 import { ProjectLogo } from "@/components/common";
 import { IssueFiltersDropdown } from "@/components/issues/filters";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useProject, useUser, useIssueFilter } from "@/hooks/store";
-// store
+// types
-import { RootStore } from "@/store/root.store";
 import { TIssueBoardKeys } from "@/types/issue";
+// components
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarTheme } from "./theme";
 
-const IssueNavbar = observer(() => {
+type IssueNavbarProps = {
-  const {
+  projectSettings: any;
-    project: projectStore,
+  workspaceSlug: string;
-    issuesFilter: { updateFilters },
+  projectId: string;
-  }: RootStore = useMobxStore();
+};
-  const { data: user } = useUser();
+
-  // router
+const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
+  const { projectSettings, workspaceSlug, projectId } = props;
+  const { project_details, views } = projectSettings;
+  const { board, labels, states, priorities, peekId } = useParams<any>();
+  const searchParams = useSearchParams();
+  const pathName = usePathname();
+  // hooks
   const router = useRouter();
-  const { workspace_slug, project_slug, board, peekId, states, priorities, labels } = router.query as {
+  // store
-    workspace_slug: string;
+  const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
-    project_slug: string;
+  const { data: user } = useUser();
-    peekId: string;
+  const { updateFilters } = useIssueFilter();
-    board: string;
+  hydrate(projectSettings);
-    states: string;
-    priorities: string;
-    labels: string;
-  };
 
   useEffect(() => {
-    if (workspace_slug && project_slug) {
+    if (workspaceSlug && projectId && settings) {
-      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
-    }
-  }, [projectStore, workspace_slug, project_slug]);
-
-  useEffect(() => {
-    if (workspace_slug && project_slug && projectStore?.deploySettings) {
       const viewsAcceptable: string[] = [];
       let currentBoard: TIssueBoardKeys | null = null;
 
-      if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
+      if (settings?.views?.list) viewsAcceptable.push("list");
-      if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
+      if (settings?.views?.kanban) viewsAcceptable.push("kanban");
-      if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
+      if (settings?.views?.calendar) viewsAcceptable.push("calendar");
-      if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
+      if (settings?.views?.gantt) viewsAcceptable.push("gantt");
-      if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
+      if (settings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
 
       if (board) {
         if (viewsAcceptable.includes(board.toString())) {
@@ -65,49 +63,47 @@ const IssueNavbar = observer(() => {
       }
 
       if (currentBoard) {
-        if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
+        if (activeLayout === null || activeLayout !== currentBoard) {
           let params: any = { board: currentBoard };
           if (peekId && peekId.length > 0) params = { ...params, peekId: peekId };
           if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
           if (states && states.length > 0) params = { ...params, states: states };
           if (labels && labels.length > 0) params = { ...params, labels: labels };
-
+          console.log("params", params);
           let storeParams: any = {};
           if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
           if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
           if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
 
-          if (storeParams) updateFilters(project_slug, storeParams);
+          if (storeParams) updateFilters(projectId, storeParams);
-
+          setActiveLayout(currentBoard);
-          projectStore.setActiveBoard(currentBoard);
+          router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
-          router.push({
-            pathname: `/${workspace_slug}/${project_slug}`,
-            query: { ...params },
-          });
         }
       }
     }
   }, [
     board,
-    workspace_slug,
+    workspaceSlug,
-    project_slug,
+    projectId,
     router,
-    projectStore,
-    projectStore?.deploySettings,
     updateFilters,
     labels,
     states,
     priorities,
     peekId,
+    settings,
+    activeLayout,
+    setActiveLayout,
+    searchParams,
   ]);
 
   return (
     <div className="relative flex w-full items-center gap-4 px-5">
       {/* project detail */}
       <div className="flex flex-shrink-0 items-center gap-2">
-        {projectStore.project ? (
+        {project_details ? (
           <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
-            <ProjectLogo logo={projectStore.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">
@@ -115,21 +111,18 @@ const IssueNavbar = observer(() => {
           </span>
         )}
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
-          {projectStore?.project?.name || `...`}
+          {project_details?.name || `...`}
         </div>
       </div>
 
-      {/* issue search bar */}
-      <div className="w-full">{/* <NavbarSearch /> */}</div>
-
       {/* issue views */}
       <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
-        <NavbarIssueBoardView />
+        <NavbarIssueBoardView layouts={views} />
       </div>
 
       {/* issue filters */}
       <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
-        <IssueFiltersDropdown />
+        <IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
       </div>
 
       {/* theming */}
@@ -137,14 +130,14 @@ const IssueNavbar = observer(() => {
         <NavbarTheme />
       </div>
 
-      {user ? (
+      {user?.id ? (
         <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
           <Avatar name={user?.display_name} src={user?.avatar ?? undefined} shape="square" size="sm" />
           <h6 className="text-xs font-medium">{user.display_name}</h6>
         </div>
       ) : (
         <div className="flex-shrink-0">
-          <Link href={`/?next_path=${router.asPath}`}>
+          <Link href={`/?next_path=${pathName}`}>
             <Button variant="outline-primary">Sign in</Button>
           </Link>
         </div>

space/components/issues/navbar/issue-board-view.tsx

@@ -1,47 +1,49 @@
+"use client";
+
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 // constants
 import { issueViews } from "@/constants/data";
+// hooks
+import { useProject } from "@/hooks/store";
 // mobx
-import { useMobxStore } from "@/hooks/store";
+import { TIssueBoardKeys } from "@/types/issue";
-import { RootStore } from "@/store/root.store";
-import { TIssueBoardKeys } from "types/issue";
 
-export const NavbarIssueBoardView = observer(() => {
+type NavbarIssueBoardViewProps = {
-  const {
+  layouts: Record<TIssueBoardKeys, boolean>;
-    project: { viewOptions, setActiveBoard, activeBoard },
+};
-  }: RootStore = useMobxStore();
+
-  // router
+export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((props) => {
-  const router = useRouter();
+  const { layouts } = props;
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const { activeLayout, setActiveLayout } = useProject();
 
   const handleCurrentBoardView = (boardView: string) => {
-    setActiveBoard(boardView as TIssueBoardKeys);
+    setActiveLayout(boardView as TIssueBoardKeys);
-    router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
   };
 
   return (
     <>
-      {viewOptions &&
+      {layouts &&
-        Object.keys(viewOptions).map((viewKey: string) => {
+        Object.keys(layouts).map((layoutKey: string) => {
-          if (viewOptions[viewKey]) {
+          if (layouts[layoutKey as TIssueBoardKeys]) {
             return (
               <div
-                key={viewKey}
+                key={layoutKey}
                 className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
-                  viewKey === activeBoard
+                  layoutKey === activeLayout
                     ? `bg-custom-background-80 text-custom-text-200`
                     : `text-custom-text-300 hover:bg-custom-background-80`
                 }`}
-                onClick={() => handleCurrentBoardView(viewKey)}
+                onClick={() => handleCurrentBoardView(layoutKey)}
-                title={viewKey}
+                title={layoutKey}
               >
                 <span
                   className={`material-symbols-rounded text-[18px] ${
-                    issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
+                    issueViews[layoutKey]?.className ? issueViews[layoutKey]?.className : ``
                   }`}
                 >
-                  {issueViews[viewKey]?.icon}
+                  {issueViews[layoutKey]?.icon}
                 </span>
               </div>
             );

space/components/issues/navbar/theme.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // next theme
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
@@ -16,7 +18,6 @@ export const NavbarTheme = observer(() => {
 
   useEffect(() => {
     if (!theme) return;
-
     setAppTheme(theme);
   }, [theme]);
 

space/components/issues/peek-overview/comment/add-comment.tsx

@@ -1,12 +1,11 @@
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
 // components
 import { EditorRefApi } from "@plane/lite-text-editor";
 import { LiteTextEditor } from "@/components/editor/lite-text-editor";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useProject, useUser } from "@/hooks/store";
 import useToast from "@/hooks/use-toast";
 // types
 import { Comment } from "@/types/issue";
@@ -17,22 +16,21 @@ const defaultValues: Partial<Comment> = {
 
 type Props = {
   disabled?: boolean;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const AddComment: React.FC<Props> = observer(() => {
+export const AddComment: React.FC<Props> = observer((props) => {
   // const { disabled = false } = props;
+  const { workspaceSlug, projectId } = props;
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  // router
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query;
   // store hooks
-  const { project } = useMobxStore();
+  const { workspace } = useProject();
-  const { issueDetails: issueDetailStore } = useMobxStore();
+  const { peekId: issueId, addIssueComment } = useIssueDetails();
   const { data: currentUser } = useUser();
   // derived values
-  const workspaceId = project.workspace?.id;
+  const workspaceId = workspace?.id;
-  const issueId = issueDetailStore.peekId;
   // form info
   const {
     handleSubmit,
@@ -45,10 +43,9 @@ export const AddComment: React.FC<Props> = observer(() => {
   const { setToastAlert } = useToast();
 
   const onSubmit = async (formData: Comment) => {
-    if (!workspace_slug || !project_slug || !issueId || isSubmitting || !formData.comment_html) return;
+    if (!workspaceSlug || !projectId || !issueId || isSubmitting || !formData.comment_html) return;
 
-    await issueDetailStore
+    await addIssueComment(workspaceSlug, projectId, issueId, formData)
-      .addIssueComment(workspace_slug.toString(), project_slug.toString(), issueId, formData)
       .then(() => {
         reset(defaultValues);
         editorRef.current?.clearEditor();
@@ -75,7 +72,7 @@ export const AddComment: React.FC<Props> = observer(() => {
                 if (currentUser) handleSubmit(onSubmit)(e);
               }}
               workspaceId={workspaceId as string}
-              workspaceSlug={workspace_slug as string}
+              workspaceSlug={workspaceSlug}
               ref={editorRef}
               initialValue={
                 !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)

space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -10,9 +10,7 @@ import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
 import { timeAgo } from "@/helpers/date-time.helper";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useProject, useUser } from "@/hooks/store";
-// store
-import { RootStore } from "@/store/root.store";
 // types
 import { Comment } from "@/types/issue";
 
@@ -23,12 +21,13 @@ type Props = {
 
 export const CommentCard: React.FC<Props> = observer((props) => {
   const { comment, workspaceSlug } = props;
-  const { project }: RootStore = useMobxStore();
+  // store hooks
-  const workspaceId = project.workspace?.id;
+  const { workspace } = useProject();
-
+  const { peekId, deleteIssueComment, updateIssueComment } = useIssueDetails();
-  // store
-  const { issueDetails: issueDetailStore } = useMobxStore();
   const { data: currentUser } = useUser();
+  // derived values
+  const workspaceId = workspace?.id;
+
   // states
   const [isEditing, setIsEditing] = useState(false);
   // refs
@@ -44,15 +43,14 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   });
 
   const handleDelete = () => {
-    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    if (!workspaceSlug || !peekId) return;
-    issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
+    deleteIssueComment(workspaceSlug, comment.project, peekId, comment.id);
   };
 
   const handleCommentUpdate = async (formData: Comment) => {
-    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    if (!workspaceSlug || !peekId) return;
-    issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
+    updateIssueComment(workspaceSlug, comment.project, peekId, comment.id, formData);
     setIsEditing(false);
-
     editorRef.current?.setEditorValue(formData.comment_html);
     showEditorRef.current?.setEditorValue(formData.comment_html);
   };
@@ -135,7 +133,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
             <LiteTextReadOnlyEditor ref={showEditorRef} initialValue={comment.comment_html} />
-            <CommentReactions commentId={comment.id} projectId={comment.project} />
+            <CommentReactions commentId={comment.id} projectId={comment.project} workspaceSlug={workspaceSlug} />
           </div>
         </div>
       </div>

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -1,58 +1,38 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 import { Tooltip } from "@plane/ui";
 // ui
 import { ReactionSelector } from "@/components/ui";
 // helpers
 import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useUser } from "@/hooks/store";
 
 type Props = {
   commentId: string;
   projectId: string;
+  workspaceSlug: string;
 };
 
 export const CommentReactions: React.FC<Props> = observer((props) => {
-  const { commentId, projectId } = props;
+  const { commentId, projectId, workspaceSlug } = props;
-
-  const router = useRouter();
-  const { workspace_slug } = router.query;
   // hooks
-  const { issueDetails: issueDetailsStore } = useMobxStore();
+  const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
   const { data: user } = useUser();
 
-  const peekId = issueDetailsStore.peekId;
+  const commentReactions = peekId ? details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions : [];
-  const commentReactions = peekId
-    ? issueDetailsStore.details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions
-    : [];
   const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
 
   const userReactions = commentReactions?.filter((r) => r.actor_detail.id === user?.id);
 
   const handleAddReaction = (reactionHex: string) => {
-    if (!workspace_slug || !projectId || !peekId) return;
+    if (!workspaceSlug || !projectId || !peekId) return;
-
+    addCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
-    issueDetailsStore.addCommentReaction(
-      workspace_slug.toString(),
-      projectId.toString(),
-      peekId,
-      commentId,
-      reactionHex
-    );
   };
 
   const handleRemoveReaction = (reactionHex: string) => {
-    if (!workspace_slug || !projectId || !peekId) return;
+    if (!workspaceSlug || !projectId || !peekId) return;
-
+    removeCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
-    issueDetailsStore.removeCommentReaction(
-      workspace_slug.toString(),
-      projectId.toString(),
-      peekId,
-      commentId,
-      reactionHex
-    );
   };
 
   const handleReactionClick = (reactionHex: string) => {

space/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -13,11 +13,12 @@ import { IIssue } from "@/types/issue";
 type Props = {
   handleClose: () => void;
   issueDetails: IIssue | undefined;
-  workspace_slug: string;
+  workspaceSlug: string;
+  projectId: string;
 };
 
 export const FullScreenPeekView: React.FC<Props> = observer((props) => {
-  const { handleClose, issueDetails } = props;
+  const { handleClose, issueDetails, workspaceSlug, projectId } = props;
 
   return (
     <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
@@ -35,7 +36,11 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
             <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
             {/* issue activity/comments */}
             <div className="w-full pb-5">
-              <PeekOverviewIssueActivity issueDetails={issueDetails} />
+              <PeekOverviewIssueActivity
+                issueDetails={issueDetails}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+              />
             </div>
           </div>
         ) : (

space/components/issues/peek-overview/header.tsx

@@ -2,19 +2,17 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { MoveRight } from "lucide-react";
 import { Listbox, Transition } from "@headlessui/react";
-// hooks
 // ui
 import { Icon } from "@/components/ui";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useIssueDetails } from "@/hooks/store";
+import useToast from "@/hooks/use-toast";
 // store
-import { useMobxStore } from "@/hooks/store";
+import { IPeekMode } from "@/store/issue-detail.store";
-import { IPeekMode } from "@/store/issue_details";
-import { RootStore } from "@/store/root.store";
-// lib
-import useToast from "hooks/use-toast";
 // types
-import { IIssue } from "types/issue";
+import { IIssue } from "@/types/issue";
 
 type Props = {
   handleClose: () => void;
@@ -42,7 +40,7 @@ const peekModes: {
 export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
   const { handleClose } = props;
 
-  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  const { peekMode, setPeekMode } = useIssueDetails();
 
   const { setToastAlert } = useToast();
 
@@ -62,21 +60,19 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
     <>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          {issueDetailStore.peekMode === "side" && (
+          {peekMode === "side" && (
             <button type="button" onClick={handleClose}>
               <MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
             </button>
           )}
           <Listbox
             as="div"
-            value={issueDetailStore.peekMode}
+            value={peekMode}
-            onChange={(val) => issueDetailStore.setPeekMode(val)}
+            onChange={(val) => setPeekMode(val)}
             className="relative flex-shrink-0 text-left"
           >
-            <Listbox.Button
+            <Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
-              className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
+              <Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
-            >
-              <Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
             </Listbox.Button>
 
             <Transition
@@ -121,7 +117,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
             </Transition>
           </Listbox>
         </div>
-        {(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
+        {(peekMode === "side" || peekMode === "modal") && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
               <Icon iconName="link" />

space/components/issues/peek-overview/issue-activity.tsx

@@ -1,44 +1,48 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import { Button } from "@plane/ui";
 // components
 import { CommentCard, AddComment } from "@/components/issues/peek-overview";
 import { Icon } from "@/components/ui";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useProject, useUser } from "@/hooks/store";
 // types
 import { IIssue } from "@/types/issue";
 
 type Props = {
   issueDetails: IIssue;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
   // router
-  const router = useRouter();
+  const pathname = usePathname();
-  const { workspace_slug } = router.query;
   // store
-  const { issueDetails: issueDetailStore, project: projectStore } = useMobxStore();
+  const { canComment } = useProject();
+  const { details, peekId } = useIssueDetails();
   const { data: currentUser } = useUser();
-  const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
+
+  const comments = details[peekId || ""]?.comments || [];
 
   return (
     <div className="pb-10">
       <h4 className="font-medium">Activity</h4>
-      {workspace_slug && (
+      {workspaceSlug && (
         <div className="mt-4">
           <div className="space-y-4">
             {comments.map((comment: any) => (
-              <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
+              <CommentCard key={comment.id} comment={comment} workspaceSlug={workspaceSlug?.toString()} />
             ))}
           </div>
           {currentUser ? (
             <>
-              {projectStore.deploySettings?.comments && (
+              {canComment && (
                 <div className="mt-4">
-                  <AddComment disabled={!currentUser} />
+                  <AddComment disabled={!currentUser} workspaceSlug={workspaceSlug} projectId={projectId} />
                 </div>
               )}
             </>
@@ -48,7 +52,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment
               </p>
-              <Link href={`/?next_path=${router.asPath}`}>
+              <Link href={`/?next_path=${pathname}`}>
                 <Button variant="primary">Sign in</Button>
               </Link>
             </div>

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

@@ -1,20 +1,22 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 // lib
 import { Tooltip } from "@plane/ui";
 import { ReactionSelector } from "@/components/ui";
 // helpers
 import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useUser } from "@/hooks/store";
 
-export const IssueEmojiReactions: React.FC = observer(() => {
+type IssueEmojiReactionsProps = {
-  // router
+  workspaceSlug: string;
-  const router = useRouter();
+  projectId: string;
-  const { workspace_slug, project_slug } = router.query;
+};
+
+export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
   // store
-  const { issueDetails: issueDetailsStore } = useMobxStore();
+  const issueDetailsStore = useIssueDetails();
   const { data: user, fetchCurrentUser } = useUser();
 
   const issueId = issueDetailsStore.peekId;
@@ -24,20 +26,17 @@ export const IssueEmojiReactions: React.FC = observer(() => {
   const userReactions = reactions?.filter((r) => r.actor_detail.id === user?.id);
 
   const handleAddReaction = (reactionHex: string) => {
-    if (!workspace_slug || !project_slug || !issueId) return;
+    if (!workspaceSlug || !projectId || !issueId) return;
-
+    issueDetailsStore.addIssueReaction(workspaceSlug.toString(), projectId.toString(), issueId, reactionHex);
-    issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
   };
 
   const handleRemoveReaction = (reactionHex: string) => {
-    if (!workspace_slug || !project_slug || !issueId) return;
+    if (!workspaceSlug || !projectId || !issueId) return;
-
+    issueDetailsStore.removeIssueReaction(workspaceSlug.toString(), projectId.toString(), issueId, reactionHex);
-    issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
   };
 
   const handleReactionClick = (reactionHex: string) => {
     const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
-
     if (userReaction) handleRemoveReaction(reactionHex);
     else handleAddReaction(reactionHex);
   };

space/components/issues/peek-overview/issue-properties.tsx

@@ -8,7 +8,7 @@ import { issueGroupFilter, issuePriorityFilter } from "@/constants/data";
 import { renderFullDate } from "@/helpers/date-time.helper";
 import { copyTextToClipboard, addSpaceIfCamelCase } from "@/helpers/string.helper";
 // types
-import { IPeekMode } from "@/store/issue_details";
+import { IPeekMode } from "@/store/issue-detail.store";
 // constants
 import useToast from "hooks/use-toast";
 import { IIssue } from "types/issue";

space/components/issues/peek-overview/issue-reaction.tsx

@@ -1,12 +1,20 @@
+import { useParams } from "next/navigation";
 import { IssueEmojiReactions, IssueVotes } from "@/components/issues/peek-overview";
-import { useMobxStore } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
+
+// type IssueReactionsProps = {
+//   workspaceSlug: string;
+//   projectId: string;
+// };
 
 export const IssueReactions: React.FC = () => {
-  const { project: projectStore } = useMobxStore();
+  const { workspace_slug: workspaceSlug, project_id: projectId } = useParams<any>();
+
+  const { canVote, canReact } = useProject();
 
   return (
     <div className="mt-4 flex items-center gap-3">
-      {projectStore?.deploySettings?.votes && (
+      {canVote && (
         <>
           <div className="flex items-center gap-2">
             <IssueVotes />
@@ -14,9 +22,9 @@ export const IssueReactions: React.FC = () => {
           <div className="h-8 w-0.5 bg-custom-background-200" />
         </>
       )}
-      {projectStore?.deploySettings?.reactions && (
+      {canReact && (
         <div className="flex items-center gap-2">
-          <IssueEmojiReactions />
+          <IssueEmojiReactions workspaceSlug={workspaceSlug} projectId={projectId} />
         </div>
       )}
     </div>

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

@@ -1,18 +1,17 @@
+"use client";
+
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 import { Tooltip } from "@plane/ui";
 // hooks
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssueDetails, useUser } from "@/hooks/store";
 
-export const IssueVotes: React.FC = observer(() => {
+export const IssueVotes: React.FC = observer((props: any) => {
+  const { workspaceSlug, projectId } = props;
+  // states
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const router = useRouter();
+  const issueDetailsStore = useIssueDetails();
-
-  const { workspace_slug, project_slug } = router.query;
-
-  const { issueDetails: issueDetailsStore } = useMobxStore();
   const { data: user, fetchCurrentUser } = useUser();
 
   const issueId = issueDetailsStore.peekId;
@@ -26,16 +25,16 @@ export const IssueVotes: React.FC = observer(() => {
   const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
 
   const handleVote = async (e: any, voteValue: 1 | -1) => {
-    if (!workspace_slug || !project_slug || !issueId) return;
+    if (!workspaceSlug || !projectId || !issueId) return;
 
     setIsSubmitting(true);
 
     const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
 
     if (actionPerformed)
-      await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
+      await issueDetailsStore.removeIssueVote(workspaceSlug.toString(), projectId.toString(), issueId);
     else
-      await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
+      await issueDetailsStore.addIssueVote(workspaceSlug.toString(), projectId.toString(), issueId, {
         vote: voteValue,
       });
 

space/components/issues/peek-overview/layout.tsx

@@ -1,42 +1,32 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
-
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
-
-// mobx
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // components
 import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overview";
-// lib
+// store
-import { useMobxStore } from "@/hooks/store";
+import { useIssue, useIssueDetails } from "@/hooks/store";
 
-export const IssuePeekOverview: React.FC = observer(() => {
+export const IssuePeekOverview: React.FC = observer((props: any) => {
+  const { workspaceSlug, projectId, peekId, board, priorities, states, labels } = props;
   // states
   const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
   const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
-  // router
-  const router = useRouter();
-  const { workspace_slug, project_slug, peekId, board, priorities, states, labels } = router.query as {
-    workspace_slug: string;
-    project_slug: string;
-    peekId: string;
-    board: string;
-    priorities: string;
-    states: string;
-    labels: string;
-  };
   // store
-  const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
+  const issueDetailStore = useIssueDetails();
+  const issueStore = useIssue();
+
   const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
 
   useEffect(() => {
-    if (workspace_slug && project_slug && peekId && issueStore.issues && issueStore.issues.length > 0) {
+    if (workspaceSlug && projectId && peekId && issueStore.issues && issueStore.issues.length > 0) {
       if (!issueDetails) {
-        issueDetailStore.fetchIssueDetails(workspace_slug.toString(), project_slug.toString(), peekId.toString());
+        issueDetailStore.fetchIssueDetails(workspaceSlug.toString(), projectId.toString(), peekId.toString());
       }
     }
-  }, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]);
+  }, [workspaceSlug, projectId, issueDetailStore, issueDetails, peekId, issueStore.issues]);
 
   const handleClose = () => {
     issueDetailStore.setPeekId(null);
@@ -45,10 +35,8 @@ export const IssuePeekOverview: React.FC = observer(() => {
     if (states && states.length > 0) params.states = states;
     if (priorities && priorities.length > 0) params.priorities = priorities;
     if (labels && labels.length > 0) params.labels = labels;
-
+    // TODO: fix this redirection
-    router.replace({ pathname: `/${workspace_slug?.toString()}/${project_slug}`, query: { ...params } }, undefined, {
+    // router.push( encodeURI(`/${workspaceSlug?.toString()}/${projectId}`, )  { pathname: `/${workspaceSlug?.toString()}/${projectId}`, query: { ...params } });
-      shallow: true,
-    });
   };
 
   useEffect(() => {
@@ -80,7 +68,12 @@ export const IssuePeekOverview: React.FC = observer(() => {
             leaveTo="translate-x-full"
           >
             <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
-              <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+              <SidePeekView
+                handleClose={handleClose}
+                issueDetails={issueDetails}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+              />
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>
@@ -114,13 +107,19 @@ export const IssuePeekOverview: React.FC = observer(() => {
                 }`}
               >
                 {issueDetailStore.peekMode === "modal" && (
-                  <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+                  <SidePeekView
+                    handleClose={handleClose}
+                    issueDetails={issueDetails}
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                  />
                 )}
                 {issueDetailStore.peekMode === "full" && (
                   <FullScreenPeekView
-                    workspace_slug={workspace_slug}
                     handleClose={handleClose}
                     issueDetails={issueDetails}
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
                   />
                 )}
               </div>

space/components/issues/peek-overview/side-peek-view.tsx

@@ -7,16 +7,18 @@ import {
   PeekOverviewIssueDetails,
   PeekOverviewIssueProperties,
 } from "@/components/issues/peek-overview";
-
+// types
-import { IIssue } from "types/issue";
+import { IIssue } from "@/types/issue";
 
 type Props = {
   handleClose: () => void;
   issueDetails: IIssue | undefined;
+  workspaceSlug: string;
+  projectId: string;
 };
 
 export const SidePeekView: React.FC<Props> = observer((props) => {
-  const { handleClose, issueDetails } = props;
+  const { handleClose, issueDetails, workspaceSlug, projectId } = props;
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
@@ -37,7 +39,11 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
           <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
           {/* issue activity/comments */}
           <div className="w-full pb-5">
-            <PeekOverviewIssueActivity issueDetails={issueDetails} />
+            <PeekOverviewIssueActivity
+              issueDetails={issueDetails}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+            />
           </div>
         </div>
       ) : (

space/components/views/auth.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 // ui
@@ -5,7 +7,7 @@ import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { Spinner } from "@plane/ui";
 // components
-import { AuthRoot, UserLoggedIn } from "@/components/accounts";
+import { AuthRoot } from "@/components/accounts";
 // hooks
 import { useUser } from "@/hooks/store";
 // images
@@ -17,12 +19,15 @@ export const AuthView = observer(() => {
   // hooks
   const { resolvedTheme } = useTheme();
   // store
-  const { data: currentUser, fetchCurrentUser, isLoading } = useUser();
+  const { fetchCurrentUser, isLoading } = useUser();
 
   // fetching user information
   const { isLoading: isSWRLoading } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
     shouldRetryOnError: false,
     revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: true,
+    errorRetryCount: 1,
   });
 
   return (
@@ -33,30 +38,26 @@ export const AuthView = observer(() => {
         </div>
       ) : (
         <>
-          {currentUser ? (
+          <div className="relative w-screen h-screen overflow-hidden">
-            <UserLoggedIn />
+            <div className="absolute inset-0 z-0">
-          ) : (
+              <Image
-            <div className="relative w-screen h-screen overflow-hidden">
+                src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-              <div className="absolute inset-0 z-0">
+                className="w-full h-full object-cover"
-                <Image
+                alt="Plane background pattern"
-                  src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+              />
-                  className="w-full h-full object-cover"
+            </div>
-                  alt="Plane background pattern"
+            <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
-                />
+              <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
+                <div className="flex items-center gap-x-2 py-10">
+                  <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
+                  <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+                </div>
               </div>
-              <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
+              <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
-                <div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
+                <AuthRoot />
-                  <div className="flex items-center gap-x-2 py-10">
-                    <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
-                    <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-                  </div>
-                </div>
-                <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
-                  <AuthRoot />
-                </div>
               </div>
             </div>
-          )}
+          </div>
         </>
       )}
     </>

space/components/views/project-details.tsx

@@ -1,7 +1,10 @@
-import { useEffect } from "react";
+"use client";
+
+import { FC, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
 // components
 import { IssueCalendarView } from "@/components/issues/board-views/calendar";
 import { IssueGanttView } from "@/components/issues/board-views/gantt";
@@ -11,16 +14,31 @@ import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadshee
 import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
 // mobx store
-import { useMobxStore, useUser } from "@/hooks/store";
+import { useIssue, useUser, useProject, useIssueDetails } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
 // assets
 import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
-export const ProjectDetailsView = observer(() => {
+type ProjectDetailsViewProps = {
-  const router = useRouter();
+  workspaceSlug: string;
-  const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
+  projectId: string;
+  peekId: string;
+};
 
-  const { issue: issueStore, project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
+  const { workspaceSlug, projectId, peekId } = props;
+  // router
+  const params = useParams();
+  // store hooks
+  const { fetchPublicIssues } = useIssue();
+  const { activeLayout } = useProject();
+  // fetching public issues
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_PUBLIC_ISSUES" : null,
+    workspaceSlug && projectId ? () => fetchPublicIssues(workspaceSlug, projectId, params) : null
+  );
+  // store hooks
+  const issueStore = useIssue();
+  const issueDetailStore = useIssueDetails();
   const { data: currentUser, fetchCurrentUser } = useUser();
 
   useEffect(() => {
@@ -30,25 +48,14 @@ export const ProjectDetailsView = observer(() => {
   }, [currentUser, fetchCurrentUser]);
 
   useEffect(() => {
-    if (workspace_slug && project_slug) {
+    if (peekId && workspaceSlug && projectId) {
-      const params = {
-        state: states || null,
-        labels: labels || null,
-        priority: priorities || null,
-      };
-      issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
-    }
-  }, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
-
-  useEffect(() => {
-    if (peekId && workspace_slug && project_slug) {
       issueDetailStore.setPeekId(peekId.toString());
     }
-  }, [peekId, issueDetailStore, project_slug, workspace_slug]);
+  }, [peekId, issueDetailStore, projectId, workspaceSlug]);
 
   return (
     <div className="relative h-full w-full overflow-hidden">
-      {workspace_slug && <IssuePeekOverview />}
+      {workspaceSlug && <IssuePeekOverview />}
 
       {issueStore?.loader && !issueStore.issues ? (
         <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
@@ -67,24 +74,24 @@ export const ProjectDetailsView = observer(() => {
               </div>
             </div>
           ) : (
-            projectStore?.activeBoard && (
+            activeLayout && (
               <div className="relative flex h-full w-full flex-col overflow-hidden">
                 {/* applied filters */}
                 <IssueAppliedFilters />
 
-                {projectStore?.activeBoard === "list" && (
+                {activeLayout === "list" && (
                   <div className="relative h-full w-full overflow-y-auto">
-                    <IssueListView />
+                    <IssueListView workspaceSlug={workspaceSlug} projectId={projectId} />
                   </div>
                 )}
-                {projectStore?.activeBoard === "kanban" && (
+                {activeLayout === "kanban" && (
                   <div className="relative mx-auto h-full w-full p-5">
-                    <IssueKanbanView />
+                    <IssueKanbanView workspaceSlug={workspaceSlug} projectId={projectId} />
                   </div>
                 )}
-                {projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
+                {activeLayout === "calendar" && <IssueCalendarView />}
-                {projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
+                {activeLayout === "spreadsheet" && <IssueSpreadsheetView />}
-                {projectStore?.activeBoard === "gantt" && <IssueGanttView />}
+                {activeLayout === "gantt" && <IssueGanttView />}
               </div>
             )
           )}

space/constants/issue.ts

@@ -0,0 +1,20 @@
+import { ILayoutDisplayFiltersOptions } from "@/types/issue-filters";
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
+} = {
+  issues: {
+    list: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+    kanban: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+  },
+};

space/hooks/store/index.ts

@@ -1,4 +1,7 @@
-export * from "./user-mobx-provider";
-
 export * from "./use-instance";
-export * from "./user";
+export * from "./use-project";
+export * from "./use-issue";
+export * from "./use-user";
+export * from "./use-user-profile";
+export * from "./use-issue-details";
+export * from "./use-issue-filter";

space/hooks/store/use-instance.ts

@@ -1,10 +1,11 @@
 import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
 // store
-import { StoreContext } from "@/lib/store-context";
 import { IInstanceStore } from "@/store/instance.store";
 
 export const useInstance = (): IInstanceStore => {
   const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
   return context.instance;
 };

space/hooks/store/use-issue-details.tsx

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueDetailStore } from "@/store/issue-detail.store";
+
+export const useIssueDetails = (): IIssueDetailStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.issueDetail;
+};

space/hooks/store/use-issue-filter.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueFilterStore } from "@/store/issue-filters.store";
+
+export const useIssueFilter = (): IIssueFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.issueFilter;
+};

space/hooks/store/use-issue.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueStore } from "@/store/issue.store";
+
+export const useIssue = (): IIssueStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.issue;
+};

space/hooks/store/use-project.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IProjectStore } from "@/store/project.store";
+
+export const useProject = (): IProjectStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.project;
+};

space/hooks/store/use-user-profile.ts

@@ -1,10 +1,11 @@
 import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
 // store
-import { StoreContext } from "@/lib/store-context";
+import { IProfileStore } from "@/store/profile.store";
-import { IProfileStore } from "@/store/user/profile.store";
 
 export const useUserProfile = (): IProfileStore => {
   const context = useContext(StoreContext);
   if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
-  return context.user.userProfile;
+  return context.user.profile;
 };

space/hooks/store/use-user.ts

@@ -1,7 +1,8 @@
 import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
 // store
-import { StoreContext } from "@/lib/store-context";
+import { IUserStore } from "@/store/user.store";
-import { IUserStore } from "@/store/user";
 
 export const useUser = (): IUserStore => {
   const context = useContext(StoreContext);

space/hooks/store/user-mobx-provider.ts

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-context";
-import { RootStore } from "@/store/root.store";
-
-export const useMobxStore = (): RootStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useMobxStore must be used within StoreProvider");
-  return context;
-};

space/hooks/store/user/index.ts

@@ -1,2 +0,0 @@
-export * from "./use-user";
-export * from "./use-user-profile";

space/hooks/use-editor-suggestions.tsx

@@ -1,13 +0,0 @@
-import { useMobxStore } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
-
-const useEditorSuggestions = () => {
-  const { mentionsStore }: RootStore = useMobxStore();
-
-  return {
-    // mentionSuggestions: mentionsStore.mentionSuggestions,
-    mentionHighlights: mentionsStore.mentionHighlights,
-  };
-};
-
-export default useEditorSuggestions;

space/layouts/project-layout.tsx

@@ -1,30 +0,0 @@
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-// components
-import IssueNavbar from "@/components/issues/navbar";
-// logo
-import planeLogo from "public/plane-logo.svg";
-
-const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
-  <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 />
-    </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 observer(ProjectLayout);

space/lib/app-providers.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ReactNode, createContext } from "react";
+import { ThemeProvider } from "next-themes";
+// store
+import { RootStore } from "@/store/root.store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext(rootStore);
+
+function initializeStore(initialData = {}) {
+  const singletonRootStore = rootStore ?? new RootStore();
+  // If your page has Next.js data fetching methods that use a Mobx store, it will
+  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+  if (initialData) {
+    singletonRootStore.hydrate(initialData);
+  }
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return singletonRootStore;
+  // Create the store once in the client
+  if (!rootStore) rootStore = singletonRootStore;
+  return singletonRootStore;
+}
+
+export type AppProviderProps = {
+  children: ReactNode;
+  initialState: any;
+};
+
+export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
+  const store = initializeStore(initialState);
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+    </ThemeProvider>
+  );
+};

space/lib/index.ts

@@ -1 +0,0 @@
-export const init = {};

space/lib/store-context.tsx

@@ -1,19 +0,0 @@
-import { ReactElement, createContext } from "react";
-// mobx store
-import { RootStore } from "@/store/root.store";
-
-export let rootStore = new RootStore();
-
-export const StoreContext = createContext<RootStore>(rootStore);
-
-const initializeStore = () => {
-  const singletonRootStore = rootStore ?? new RootStore();
-  if (typeof window === "undefined") return singletonRootStore;
-  if (!rootStore) rootStore = singletonRootStore;
-  return singletonRootStore;
-};
-
-export const StoreProvider = ({ children }: { children: ReactElement }) => {
-  const store = initializeStore();
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};

space/lib/wrappers/auth-wrapper.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import useSWR from "swr";
 import { Spinner } from "@plane/ui";
 // helpers

space/lib/wrappers/index.ts

@@ -1,2 +1 @@
-export * from "./instance-wrapper";
 export * from "./auth-wrapper";

space/lib/wrappers/instance-wrapper.tsx

@@ -1,39 +0,0 @@
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// ui
-import { Spinner } from "@plane/ui";
-// components
-import { InstanceNotReady, InstanceFailureView } from "@/components/instance";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type TInstanceWrapper = {
-  children: ReactNode;
-};
-
-export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
-  const { children } = props;
-  // hooks
-  const { isLoading, instance, fetchInstanceInfo } = useInstance();
-
-  const { isLoading: isSWRLoading, mutate } = useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    revalidateOnReconnect: false,
-    errorRetryCount: 0,
-  });
-
-  if (isSWRLoading || isLoading)
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-
-  if (!instance) return <InstanceFailureView mutate={mutate} />;
-
-  if (instance?.instance?.is_setup_done === false) return <InstanceNotReady />;
-
-  return <>{children}</>;
-});

space/pages/404.tsx

@@ -1,42 +0,0 @@
-// next imports
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-// hooks
-import { useInstance } from "@/hooks/store";
-// images
-import notFoundImage from "public/404.svg";
-
-const Custom404Error = observer(() => {
-  // hooks
-  const { instance } = useInstance();
-
-  const redirectionUrl = instance?.config?.app_base_url || "/";
-
-  return (
-    <div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
-      <div className="max-w-[700px] space-y-5">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <div className="relative h-[240px] w-[240px]">
-            <Image src={notFoundImage} layout="fill" alt="404- Page not found" />
-          </div>
-          <div className="text-xl font-medium">Oops! Something went wrong.</div>
-          <div className="text-sm text-custom-text-200">
-            Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
-            temporarily unavailable.
-          </div>
-        </div>
-
-        <div className="flex items-center justify-center text-center">
-          <a
-            href={redirectionUrl}
-            className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
-          >
-            Go to your Workspace
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default Custom404Error;

space/pages/[workspace_slug]/[project_slug]/index.tsx

@@ -1,47 +0,0 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// components
-import { ProjectDetailsView } from "@/components/views";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-// hooks
-import { useMobxStore } from "@/hooks/store";
-// layouts
-import ProjectLayout from "@/layouts/project-layout";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-
-const WorkspaceProjectPage = (props: any) => {
-  const SITE_TITLE = props?.project_settings?.project_details?.name || "Plane | Deploy";
-
-  const router = useRouter();
-  const { workspace_slug, project_slug, states, labels, priorities } = router.query;
-
-  const { project: projectStore, issue: issueStore } = useMobxStore();
-
-  useSWR("REVALIDATE_ALL", () => {
-    if (workspace_slug && project_slug) {
-      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
-      const params = {
-        state: states || null,
-        labels: labels || null,
-        priority: priorities || null,
-      };
-      issueStore.fetchPublicIssues(workspace_slug.toString(), project_slug.toString(), params);
-    }
-  });
-
-  return (
-    <AuthWrapper pageType={EPageTypes.AUTHENTICATED}>
-      <ProjectLayout>
-        <Head>
-          <title>{SITE_TITLE}</title>
-        </Head>
-        <ProjectDetailsView />
-      </ProjectLayout>
-    </AuthWrapper>
-  );
-};
-
-export default WorkspaceProjectPage;

space/pages/[workspace_slug]/index.tsx

@@ -1,5 +0,0 @@
-const WorkspaceProjectPage = () => (
-  <div className="relative flex h-screen w-screen items-center justify-center text-5xl">Plane Workspace Space</div>
-);
-
-export default WorkspaceProjectPage;

space/pages/_app.tsx

@@ -1,47 +0,0 @@
-import type { AppProps } from "next/app";
-import Head from "next/head";
-import { ThemeProvider } from "next-themes";
-// styles
-import "@/styles/globals.css";
-// contexts
-import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
-import { ToastContextProvider } from "@/contexts/toast.context";
-// mobx store provider
-import { StoreProvider } from "@/lib/store-context";
-// wrappers
-import { InstanceWrapper } from "@/lib/wrappers";
-
-const prefix = "/spaces/";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <>
-      <Head>
-        <title>{SITE_TITLE}</title>
-        <meta property="og:site_name" content={SITE_NAME} />
-        <meta property="og:title" content={SITE_TITLE} />
-        <meta property="og:url" content={SITE_URL} />
-        <meta name="description" content={SITE_DESCRIPTION} />
-        <meta property="og:description" content={SITE_DESCRIPTION} />
-        <meta name="keywords" content={SITE_KEYWORDS} />
-        <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
-        <link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${prefix}site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
-      </Head>
-      <StoreProvider>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <ToastContextProvider>
-            <InstanceWrapper>
-              <Component {...pageProps} />
-            </InstanceWrapper>
-          </ToastContextProvider>
-        </ThemeProvider>
-      </StoreProvider>
-    </>
-  );
-}
-
-export default MyApp;

space/pages/_document.tsx

@@ -1,18 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body className="w-100 bg-custom-background-100 antialiased">
-          <div id="context-menu-portal" />
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;

space/pages/accounts/forgot-password.tsx

@@ -1,166 +0,0 @@
-import { NextPage } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-import { Controller, useForm } from "react-hook-form";
-// icons
-import { CircleCheck } from "lucide-react";
-// ui
-import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-import { cn } from "@/helpers/common.helper";
-import { checkEmailValidity } from "@/helpers/string.helper";
-// hooks
-import useTimer from "@/hooks/use-timer";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-// services
-import { AuthService } from "@/services/authentication.service";
-// images
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-
-type TForgotPasswordFormValues = {
-  email: string;
-};
-
-const defaultValues: TForgotPasswordFormValues = {
-  email: "",
-};
-
-// services
-const authService = new AuthService();
-
-const ForgotPasswordPage: NextPage = () => {
-  // router
-  const router = useRouter();
-  const { email } = router.query;
-  // hooks
-  const { resolvedTheme } = useTheme();
-  // timer
-  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
-
-  // form info
-  const {
-    control,
-    formState: { errors, isSubmitting, isValid },
-    handleSubmit,
-  } = useForm<TForgotPasswordFormValues>({
-    defaultValues: {
-      ...defaultValues,
-      email: email?.toString() ?? "",
-    },
-  });
-
-  const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
-    await authService
-      .sendResetPasswordLink({
-        email: formData.email,
-      })
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Email sent",
-          message:
-            "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
-        });
-        setResendCodeTimer(30);
-      })
-      .catch((err: any) => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error ?? "Something went wrong. Please try again.",
-        });
-      });
-  };
-
-  return (
-    <AuthWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <div className="relative h-screen w-full overflow-hidden">
-        <div className="absolute inset-0 z-0">
-          <Image
-            src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-            className="w-full h-full object-cover"
-            alt="Plane background pattern"
-          />
-        </div>
-        <div className="relative z-10">
-          <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
-            <div className="flex items-center gap-x-2 py-10">
-              <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
-              <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-            </div>
-          </div>
-          <div className="mx-auto h-full">
-            <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-              <div className="mx-auto flex flex-col">
-                <div className="text-center space-y-1 py-4 mx-auto sm:w-96">
-                  <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-                    Reset your password
-                  </h3>
-                  <p className="font-medium text-onboarding-text-400">
-                    Enter your user account{"'"}s verified email address and we will send you a password reset link.
-                  </p>
-                </div>
-                <form onSubmit={handleSubmit(handleForgotPassword)} className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96">
-                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-                      Email
-                    </label>
-                    <Controller
-                      control={control}
-                      name="email"
-                      rules={{
-                        required: "Email is required",
-                        validate: (value) => checkEmailValidity(value) || "Email is invalid",
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="email"
-                          name="email"
-                          type="email"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.email)}
-                          placeholder="name@company.com"
-                          className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                          disabled={resendTimerCode > 0}
-                        />
-                      )}
-                    />
-                    {resendTimerCode > 0 && (
-                      <p className="flex w-full items-start px-1 gap-1 text-xs font-medium text-green-700">
-                        <CircleCheck height={12} width={12} className="mt-0.5" />
-                        We sent the reset link to your email address
-                      </p>
-                    )}
-                  </div>
-                  <Button
-                    type="submit"
-                    variant="primary"
-                    className="w-full"
-                    size="lg"
-                    disabled={!isValid}
-                    loading={isSubmitting || resendTimerCode > 0}
-                  >
-                    {resendTimerCode > 0 ? `Resend in ${resendTimerCode} seconds` : "Send reset link"}
-                  </Button>
-                  <Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
-                    Back to sign in
-                  </Link>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </AuthWrapper>
-  );
-};
-
-export default ForgotPasswordPage;

space/pages/accounts/reset-password.tsx

@@ -1,205 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { NextPage } from "next";
-import Image from "next/image";
-import { useRouter } from "next/router";
-// icons
-import { useTheme } from "next-themes";
-import { Eye, EyeOff } from "lucide-react";
-// ui
-import { Button, Input } from "@plane/ui";
-// components
-import { PasswordStrengthMeter } from "@/components/accounts";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { getPasswordStrength } from "@/helpers/password.helper";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-// services
-import { AuthService } from "@/services/authentication.service";
-// images
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-
-type TResetPasswordFormValues = {
-  email: string;
-  password: string;
-  confirm_password?: string;
-};
-
-const defaultValues: TResetPasswordFormValues = {
-  email: "",
-  password: "",
-};
-
-// services
-const authService = new AuthService();
-
-const ResetPasswordPage: NextPage = () => {
-  // router
-  const router = useRouter();
-  const { uidb64, token, email } = router.query;
-  // states
-  const [showPassword, setShowPassword] = useState(false);
-  const [resetFormData, setResetFormData] = useState<TResetPasswordFormValues>({
-    ...defaultValues,
-    email: email ? email.toString() : "",
-  });
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
-  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  useEffect(() => {
-    if (email && !resetFormData.email) {
-      setResetFormData((prev) => ({ ...prev, email: email.toString() }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [email]);
-
-  const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
-    setResetFormData((prev) => ({ ...prev, [key]: value }));
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
-  const isButtonDisabled = useMemo(
-    () =>
-      !!resetFormData.password &&
-      getPasswordStrength(resetFormData.password) >= 3 &&
-      resetFormData.password === resetFormData.confirm_password
-        ? false
-        : true,
-    [resetFormData]
-  );
-
-  return (
-    <AuthWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <div className="relative h-screen w-full overflow-hidden">
-        <div className="absolute inset-0 z-0">
-          <Image
-            src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-            className="w-full h-full object-cover"
-            alt="Plane background pattern"
-          />
-        </div>
-        <div className="relative z-10">
-          <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
-            <div className="flex items-center gap-x-2 py-10">
-              <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
-              <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-            </div>
-          </div>
-          <div className="mx-auto h-full">
-            <div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
-              <div className="mx-auto flex flex-col">
-                <div className="text-center space-y-1 py-4 mx-auto sm:w-96">
-                  <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-                    Set new password
-                  </h3>
-                  <p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
-                </div>
-                <form
-                  className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
-                  method="POST"
-                  action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
-                >
-                  <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-                      Email
-                    </label>
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                      <Input
-                        id="email"
-                        name="email"
-                        type="email"
-                        value={resetFormData.email}
-                        //hasError={Boolean(errors.email)}
-                        placeholder="name@company.com"
-                        className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
-                        disabled
-                      />
-                    </div>
-                  </div>
-                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-                      Password
-                    </label>
-                    <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                      <Input
-                        type={showPassword ? "text" : "password"}
-                        name="password"
-                        value={resetFormData.password}
-                        onChange={(e) => handleFormChange("password", e.target.value)}
-                        //hasError={Boolean(errors.password)}
-                        placeholder="Enter password"
-                        className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                        minLength={8}
-                        onFocus={() => setIsPasswordInputFocused(true)}
-                        onBlur={() => setIsPasswordInputFocused(false)}
-                        autoFocus
-                      />
-                      {showPassword ? (
-                        <EyeOff
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(false)}
-                        />
-                      ) : (
-                        <Eye
-                          className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                          onClick={() => setShowPassword(true)}
-                        />
-                      )}
-                    </div>
-                    {isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />}
-                  </div>
-                  {getPasswordStrength(resetFormData.password) >= 3 && (
-                    <div className="space-y-1">
-                      <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                        Confirm password
-                      </label>
-                      <div className="relative flex items-center rounded-md bg-onboarding-background-200">
-                        <Input
-                          type={showPassword ? "text" : "password"}
-                          name="confirm_password"
-                          value={resetFormData.confirm_password}
-                          onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                          placeholder="Confirm password"
-                          className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                        />
-                        {showPassword ? (
-                          <EyeOff
-                            className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                            onClick={() => setShowPassword(false)}
-                          />
-                        ) : (
-                          <Eye
-                            className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                            onClick={() => setShowPassword(true)}
-                          />
-                        )}
-                      </div>
-                      {!!resetFormData.confirm_password &&
-                        resetFormData.password !== resetFormData.confirm_password && (
-                          <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
-                        )}
-                    </div>
-                  )}
-                  <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-                    Set password
-                  </Button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </AuthWrapper>
-  );
-};
-
-export default ResetPasswordPage;

space/pages/index.tsx

@@ -1,16 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { NextPage } from "next";
-// components
-import { AuthView } from "@/components/views";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-// wrapper
-import { AuthWrapper } from "@/lib/wrappers";
-
-const Index: NextPage = observer(() => (
-  <AuthWrapper pageType={EPageTypes.INIT}>
-    <AuthView />
-  </AuthWrapper>
-));
-
-export default Index;

space/pages/onboarding/index.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-// ui
-import { Avatar } from "@plane/ui";
-// components
-import { OnBoardingForm } from "@/components/accounts/onboarding-form";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-import { ASSET_PREFIX } from "@/helpers/common.helper";
-// hooks
-import { useUser, useUserProfile } from "@/hooks/store";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-// assets
-import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
-import ProfileSetup from "public/onboarding/profile-setup-light.svg";
-
-const OnBoardingPage = observer(() => {
-  // router
-  const router = useRouter();
-  const { next_path } = router.query;
-
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  const { data: user } = useUser();
-  const { data: currentUserProfile, updateUserProfile } = useUserProfile();
-
-  if (!user) {
-    router.push("/");
-    return <></>;
-  }
-
-  // complete onboarding
-  const finishOnboarding = async () => {
-    if (!user) return;
-
-    await updateUserProfile({
-      onboarding_step: {
-        ...currentUserProfile?.onboarding_step,
-        profile_complete: true,
-      },
-    }).catch(() => {
-      console.log("Failed to update onboarding status");
-    });
-
-    if (next_path) router.push(next_path.toString());
-    router.push("/");
-  };
-
-  return (
-    <AuthWrapper pageType={EPageTypes.ONBOARDING}>
-      <div className="flex h-full w-full">
-        <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-          <div className="flex items-center justify-between">
-            <div className="flex w-full items-center justify-between font-semibold ">
-              <div className="flex items-center gap-x-2">
-                <Image
-                  src={`${ASSET_PREFIX}/plane-logos/blue-without-text.png`}
-                  height={30}
-                  width={30}
-                  alt="Plane Logo"
-                />
-              </div>
-            </div>
-            <div className="shrink-0 lg:hidden">
-              <div className="flex w-full shrink-0 justify-end">
-                <div className="flex items-center gap-x-2 pr-4">
-                  {user?.avatar && (
-                    <Avatar
-                      name={user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-                      src={user?.avatar}
-                      size={24}
-                      shape="square"
-                      fallbackBackgroundColor="#FCBE1D"
-                      className="!text-base capitalize"
-                    />
-                  )}
-                  <span className="text-sm font-medium text-custom-text-200">
-                    {user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col w-full items-center justify-center p-8 mt-14">
-            <div className="text-center space-y-1 py-4 mx-auto">
-              <h3 className="text-3xl font-bold text-onboarding-text-100">Welcome to Plane!</h3>
-              <p className="font-medium text-onboarding-text-400">
-                Let’s setup your profile, tell us a bit about yourself.
-              </p>
-            </div>
-            <OnBoardingForm user={user} finishOnboarding={finishOnboarding} />
-          </div>
-        </div>
-        <div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
-          <div className="flex w-full shrink-0 justify-end">
-            <div className="flex items-center gap-x-2 pr-4 z-10">
-              {user?.avatar && (
-                <Avatar
-                  name={user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-                  src={user?.avatar}
-                  size={24}
-                  shape="square"
-                  fallbackBackgroundColor="#FCBE1D"
-                  className="!text-base capitalize"
-                />
-              )}
-              <span className="text-sm font-medium text-custom-text-200">
-                {user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-              </span>
-            </div>
-          </div>
-          <div className="absolute inset-0 z-0">
-            <Image
-              src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetup}
-              className="h-screen w-auto float-end object-cover"
-              alt="Profile setup"
-            />
-          </div>
-        </div>
-      </div>
-    </AuthWrapper>
-  );
-});
-
-export default OnBoardingPage;

space/pages/project-not-published/index.tsx

@@ -1,49 +0,0 @@
-// next imports
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-// hooks
-import { useInstance } from "@/hooks/store";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-// images
-import projectNotPublishedImage from "@/public/project-not-published.svg";
-
-const CustomProjectNotPublishedError = observer(() => {
-  // hooks
-  const { instance } = useInstance();
-
-  const redirectionUrl = instance?.config?.app_base_url || "/";
-
-  return (
-    <AuthWrapper pageType={EPageTypes.PUBLIC}>
-      <div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
-        <div className="max-w-[700px] space-y-5">
-          <div className="flex flex-col items-center gap-3 text-center">
-            <div className="relative h-[240px] w-[240px]">
-              <Image src={projectNotPublishedImage} layout="fill" alt="404- Page not found" />
-            </div>
-            <div className="text-xl font-medium">
-              Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
-            </div>
-            <div className="text-sm text-custom-text-200">
-              If this is your project, login to your workspace to adjust its visibility settings and make it public.
-            </div>
-          </div>
-
-          <div className="flex items-center justify-center text-center">
-            <a
-              href={redirectionUrl}
-              className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
-            >
-              Go to your Workspace
-            </a>
-          </div>
-        </div>
-      </div>
-    </AuthWrapper>
-  );
-});
-
-export default CustomProjectNotPublishedError;

space/services/api.service.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import axios, { AxiosInstance } from "axios";
 // store
-import { rootStore } from "@/lib/store-context";
+// import { rootStore } from "@/lib/store-context";
 
 abstract class APIService {
   protected baseURL: string;
@@ -18,14 +18,14 @@ abstract class APIService {
   }
 
   private setupInterceptors() {
-    this.axiosInstance.interceptors.response.use(
+    // this.axiosInstance.interceptors.response.use(
-      (response) => response,
+    //   (response) => response,
-      (error) => {
+    //   (error) => {
-        const store = rootStore;
+    //     const store = rootStore;
-        if (error.response && error.response.status === 401 && store.user.data) store.user.reset();
+    //     if (error.response && error.response.status === 401 && store.user.data) store.user.reset();
-        return Promise.reject(error);
+    //     return Promise.reject(error);
-      }
+    //   }
-    );
+    // );
   }
 
   get(url: string, params = {}) {

space/services/issue.service.ts

@@ -1,6 +1,6 @@
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import APIService from "@/services/api.service";
-import { API_BASE_URL } from "@/helpers/common.helper";
 
 class IssueService extends APIService {
   constructor() {

space/services/project.service.ts

@@ -1,6 +1,6 @@
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import APIService from "@/services/api.service";
-import { API_BASE_URL } from "@/helpers/common.helper";
 
 class ProjectService extends APIService {
   constructor() {

space/store/instance.store.ts

@@ -18,15 +18,18 @@ type TError = {
 export interface IInstanceStore {
   // issues
   isLoading: boolean;
-  instance: IInstance | undefined;
+  data: IInstance | NonNullable<unknown>;
+  config: Record<string, any>;
   error: TError | undefined;
   // action
   fetchInstanceInfo: () => Promise<void>;
+  hydrate: (data: Record<string, unknown>, config: Record<string, unknown>) => void;
 }
 
 export class InstanceStore implements IInstanceStore {
   isLoading: boolean = true;
-  instance: IInstance | undefined = undefined;
+  data: IInstance | Record<string, any> = {};
+  config: Record<string, unknown> = {};
   error: TError | undefined = undefined;
   // services
   instanceService;
@@ -35,15 +38,22 @@ export class InstanceStore implements IInstanceStore {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,
-      instance: observable,
+      data: observable,
+      config: observable,
       error: observable,
       // actions
       fetchInstanceInfo: action,
+      hydrate: action,
     });
     // services
     this.instanceService = new InstanceService();
   }
 
+  hydrate = (data: Record<string, unknown>, config: Record<string, unknown>) => {
+    this.data = { ...this.data, ...data };
+    this.config = { ...this.config, ...config };
+  };
+
   /**
    * @description fetching instance information
    */
@@ -51,10 +61,11 @@ export class InstanceStore implements IInstanceStore {
     try {
       this.isLoading = true;
       this.error = undefined;
-      const instance = await this.instanceService.getInstanceInfo();
+      const instanceDetails = await this.instanceService.getInstanceInfo();
       runInAction(() => {
         this.isLoading = false;
-        this.instance = instance;
+        this.data = instanceDetails.instance;
+        this.config = instanceDetails.config;
       });
     } catch (error) {
       runInAction(() => {

space/store/issue-detail.store.ts

@@ -55,7 +55,7 @@ export interface IIssueDetailStore {
   removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
 }
 
-class IssueDetailStore implements IIssueDetailStore {
+export class IssueDetailStore implements IIssueDetailStore {
   loader: boolean = false;
   error: any = null;
   peekId: string | null = null;
@@ -431,5 +431,3 @@ class IssueDetailStore implements IIssueDetailStore {
     }
   };
 }
-
-export default IssueDetailStore;

space/store/issue-filters.store.ts

@@ -1,15 +1,16 @@
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
-// types
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+// store
 import { RootStore } from "@/store/root.store";
-import { IIssueFilterOptions, TIssueParams } from "./types";
+// types
-import { handleIssueQueryParamsByLayout } from "./helpers";
+import { TIssueBoardKeys, IIssueFilterOptions, TIssueParams } from "@/types/issue";
-import { IssueFilterBaseStore } from "./base-issue-filter.store";
 
 interface IFiltersOptions {
   filters: IIssueFilterOptions;
 }
 
-export interface IIssuesFilterStore {
+export interface IIssueFilterStore {
   // observables
   projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined;
   // computed
@@ -21,15 +22,13 @@ export interface IIssuesFilterStore {
   updateFilters: (projectId: string, filters: IIssueFilterOptions) => Promise<IFiltersOptions>;
 }
 
-export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFilterStore {
+export class IssueFilterStore implements IIssueFilterStore {
   // observables
   projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined = undefined;
   // root store
   rootStore;
 
   constructor(_rootStore: RootStore) {
-    super(_rootStore);
-
     makeObservable(this, {
       // observables
       projectIssueFilters: observable.ref,
@@ -43,35 +42,61 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
     this.rootStore = _rootStore;
   }
 
+  // helper methods
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
   // helpers
   issueDisplayFilters = (projectId: string) => {
     if (!projectId) return undefined;
     return this.projectIssueFilters?.[projectId] || undefined;
   };
 
-  // actions
+  handleIssueQueryParamsByLayout = (layout: TIssueBoardKeys | undefined, viewType: "issues"): TIssueParams[] | null => {
+    const queryParams: TIssueParams[] = [];
 
+    if (!layout) return null;
+
+    const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+
+    // add filters query params
+    layoutOptions.filters.forEach((option: any) => {
+      queryParams.push(option);
+    });
+
+    return queryParams;
+  };
+
+  // actions
   updateFilters = async (projectId: string, filters: IIssueFilterOptions) => {
     try {
-      let _projectIssueFilters = { ...this.projectIssueFilters };
+      let issueFilters = { ...this.projectIssueFilters };
-      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!issueFilters) issueFilters = {};
-      if (!_projectIssueFilters[projectId]) _projectIssueFilters[projectId] = { filters: {} };
+      if (!issueFilters[projectId]) issueFilters[projectId] = { filters: {} };
 
-      const _filters = {
+      const newFilters = {
-        filters: { ..._projectIssueFilters[projectId].filters },
+        filters: { ...issueFilters[projectId].filters },
       };
 
-      _filters.filters = { ..._filters.filters, ...filters };
+      newFilters.filters = { ...newFilters.filters, ...filters };
 
-      _projectIssueFilters[projectId] = {
+      issueFilters[projectId] = {
-        filters: _filters.filters,
+        filters: newFilters.filters,
       };
 
       runInAction(() => {
-        this.projectIssueFilters = _projectIssueFilters;
+        this.projectIssueFilters = issueFilters;
       });
 
-      return _filters;
+      return newFilters;
     } catch (error) {
       throw error;
     }
@@ -89,7 +114,7 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
 
   get appliedFilters() {
     const userFilters = this.issueFilters;
-    const layout = this.rootStore.project?.activeBoard;
+    const layout = this.rootStore.project?.activeLayout;
     if (!userFilters || !layout) return undefined;
 
     let filteredRouteParams: any = {
@@ -98,7 +123,7 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
       labels: userFilters?.filters?.labels || undefined,
     };
 
-    const filteredParams = handleIssueQueryParamsByLayout(layout, "issues");
+    const filteredParams = this.handleIssueQueryParamsByLayout(layout, "issues");
     if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
 
     return filteredRouteParams;

space/store/issue.store.ts

@@ -1,11 +1,11 @@
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { observable, action, makeObservable, runInAction } from "mobx";
 // services
 import IssueService from "@/services/issue.service";
+// types
+import { IIssue, IIssueState, IIssueLabel } from "@/types/issue";
 // store
 import { RootStore } from "./root.store";
-// types
 // import { IssueDetailType, TIssueBoardKeys } from "types/issue";
-import { IIssue, IIssueState, IIssueLabel } from "types/issue";
 
 export interface IIssueStore {
   loader: boolean;
@@ -26,7 +26,7 @@ export interface IIssueStore {
   getFilteredIssuesByState: (state: string) => IIssue[];
 }
 
-class IssueStore implements IIssueStore {
+export class IssueStore implements IIssueStore {
   loader: boolean = false;
   error: any | null = null;
 
@@ -75,13 +75,13 @@ class IssueStore implements IIssueStore {
       const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
 
       if (response) {
-        const _states: IIssueState[] = [...response?.states];
+        const states: IIssueState[] = [...response?.states];
-        const _labels: IIssueLabel[] = [...response?.labels];
+        const labels: IIssueLabel[] = [...response?.labels];
-        const _issues: IIssue[] = [...response?.issues];
+        const issues: IIssue[] = [...response?.issues];
         runInAction(() => {
-          this.states = _states;
+          this.states = states;
-          this.labels = _labels;
+          this.labels = labels;
-          this.issues = _issues;
+          this.issues = issues;
           this.loader = false;
         });
       }
@@ -99,5 +99,3 @@ class IssueStore implements IIssueStore {
   getFilteredIssuesByState = (state_id: string): IIssue[] | [] =>
     this.issues?.filter((issue) => issue.state == state_id) || [];
 }
-
-export default IssueStore;

space/store/issues/base-issue-filter.store.ts

@@ -1,29 +0,0 @@
-// types
-import { RootStore } from "@/store/root.store";
-
-export interface IIssueFilterBaseStore {
-  // helper methods
-  computedFilter(filters: any, filteredParams: any): any;
-}
-
-export class IssueFilterBaseStore implements IIssueFilterBaseStore {
-  // root store
-  rootStore;
-
-  constructor(_rootStore: RootStore) {
-    // root store
-    this.rootStore = _rootStore;
-  }
-
-  // helper methods
-  computedFilter = (filters: any, filteredParams: any) => {
-    const computedFilters: any = {};
-    Object.keys(filters).map((key) => {
-      if (filters[key] != undefined && filteredParams.includes(key))
-        computedFilters[key] =
-          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
-    });
-
-    return computedFilters;
-  };
-}

space/store/issues/helpers.ts

@@ -1,52 +0,0 @@
-import { TIssueBoardKeys } from "types/issue";
-import { IIssueFilterOptions, TIssueParams } from "./types";
-
-export const isNil = (value: any) => {
-  if (value === undefined || value === null) return true;
-
-  return false;
-};
-
-export interface ILayoutDisplayFiltersOptions {
-  filters: (keyof IIssueFilterOptions)[];
-  display_properties: boolean | null;
-  display_filters: null;
-  extra_options: null;
-}
-
-export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
-  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
-} = {
-  issues: {
-    list: {
-      filters: ["priority", "state", "labels"],
-      display_properties: null,
-      display_filters: null,
-      extra_options: null,
-    },
-    kanban: {
-      filters: ["priority", "state", "labels"],
-      display_properties: null,
-      display_filters: null,
-      extra_options: null,
-    },
-  },
-};
-
-export const handleIssueQueryParamsByLayout = (
-  layout: TIssueBoardKeys | undefined,
-  viewType: "issues"
-): TIssueParams[] | null => {
-  const queryParams: TIssueParams[] = [];
-
-  if (!layout) return null;
-
-  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
-
-  // add filters query params
-  layoutOptions.filters.forEach((option) => {
-    queryParams.push(option);
-  });
-
-  return queryParams;
-};

space/store/issues/types.ts

@@ -1,36 +0,0 @@
-import { IIssue } from "types/issue";
-
-export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
-
-export type TIssueParams = "priority" | "state" | "labels";
-
-export interface IIssueFilterOptions {
-  state?: string[] | null;
-  labels?: string[] | null;
-  priority?: string[] | null;
-}
-
-// issues
-export interface IGroupedIssues {
-  [group_id: string]: string[];
-}
-
-export interface ISubGroupedIssues {
-  [sub_grouped_id: string]: {
-    [group_id: string]: string[];
-  };
-}
-
-export type TUnGroupedIssues = string[];
-
-export interface IIssueResponse {
-  [issue_id: string]: IIssue;
-}
-
-export type TLoader = "init-loader" | "mutation" | undefined;
-
-export interface ViewFlags {
-  enableQuickAdd: boolean;
-  enableIssueCreation: boolean;
-  enableInlineEditing: boolean;
-}

space/store/project.store.ts

@@ -11,11 +11,15 @@ export interface IProjectStore {
   error: any | null;
   workspace: IWorkspace | null;
   project: IProject | null;
-  deploySettings: IProjectSettings | null;
+  settings: IProjectSettings | null;
-  viewOptions: any;
+  activeLayout: TIssueBoardKeys;
-  activeBoard: TIssueBoardKeys | null;
+  layoutOptions: Record<TIssueBoardKeys, boolean>;
+  canReact: boolean;
+  canComment: boolean;
+  canVote: boolean;
   fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
-  setActiveBoard: (value: TIssueBoardKeys) => void;
+  setActiveLayout: (value: TIssueBoardKeys) => void;
+  hydrate: (projectSettings: any) => void;
 }
 
 export class ProjectStore implements IProjectStore {
@@ -24,9 +28,18 @@ export class ProjectStore implements IProjectStore {
   // data
   workspace: IWorkspace | null = null;
   project: IProject | null = null;
-  deploySettings: IProjectSettings | null = null;
+  settings: IProjectSettings | null = null;
-  viewOptions: any = null;
+  activeLayout: TIssueBoardKeys = "list";
-  activeBoard: TIssueBoardKeys | null = null;
+  layoutOptions: Record<TIssueBoardKeys, boolean> = {
+    list: true,
+    kanban: true,
+    calendar: false,
+    gantt: false,
+    spreadsheet: false,
+  };
+  canReact: boolean = false;
+  canComment: boolean = false;
+  canVote: boolean = false;
   // root store
   rootStore;
   // service
@@ -38,14 +51,18 @@ export class ProjectStore implements IProjectStore {
       loader: observable,
       error: observable.ref,
       // observable
-      workspace: observable.ref,
+      workspace: observable,
-      project: observable.ref,
+      project: observable,
-      deploySettings: observable.ref,
+      settings: observable,
-      viewOptions: observable.ref,
+      layoutOptions: observable,
-      activeBoard: observable.ref,
+      activeLayout: observable.ref,
+      canReact: observable.ref,
+      canComment: observable.ref,
+      canVote: observable.ref,
       // actions
       fetchProjectSettings: action,
-      setActiveBoard: action,
+      setActiveLayout: action,
+      hydrate: action,
       // computed
     });
 
@@ -53,6 +70,20 @@ export class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
   }
 
+  hydrate = (projectSettings: any) => {
+    const { workspace_detail, project_details, views, votes, comments, reactions } = projectSettings;
+    this.workspace = workspace_detail;
+    this.project = project_details;
+    this.layoutOptions = views;
+    this.canComment = comments;
+    this.canVote = votes;
+    this.canReact = reactions;
+  };
+
+  setActiveLayout = (boardValue: TIssueBoardKeys) => {
+    this.activeLayout = boardValue;
+  };
+
   fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
     try {
       this.loader = true;
@@ -68,8 +99,8 @@ export class ProjectStore implements IProjectStore {
         runInAction(() => {
           this.project = currentProject;
           this.workspace = currentWorkspace;
-          this.viewOptions = currentViewOptions;
+          this.layoutOptions = currentViewOptions;
-          this.deploySettings = currentDeploySettings;
+          this.settings = currentDeploySettings;
           this.loader = false;
         });
       }
@@ -80,8 +111,4 @@ export class ProjectStore implements IProjectStore {
       return error;
     }
   };
-
-  setActiveBoard = (boardValue: TIssueBoardKeys) => {
-    this.activeBoard = boardValue;
-  };
 }

space/store/root.store.ts

@@ -1,13 +1,11 @@
-// mobx lite
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import { IInstanceStore, InstanceStore } from "@/store/instance.store";
-import { IProjectStore, ProjectStore } from "@/store/project";
+import { IssueDetailStore, IIssueDetailStore } from "@/store/issue-detail.store";
-import { IUserStore, UserStore } from "@/store/user";
+import { IssueStore, IIssueStore } from "@/store/issue.store";
-
+import { IProjectStore, ProjectStore } from "@/store/project.store";
-import IssueStore, { IIssueStore } from "./issue";
+import { IUserStore, UserStore } from "@/store/user.store";
-import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
+import { IssueFilterStore, IIssueFilterStore } from "./issue-filters.store";
-import { IIssuesFilterStore, IssuesFilterStore } from "./issues/issue-filters.store";
 import { IMentionsStore, MentionsStore } from "./mentions.store";
 
 enableStaticRendering(typeof window === "undefined");
@@ -16,33 +14,36 @@ export class RootStore {
   instance: IInstanceStore;
   user: IUserStore;
   project: IProjectStore;
-
   issue: IIssueStore;
-  issueDetails: IIssueDetailStore;
+  issueDetail: IIssueDetailStore;
-  mentionsStore: IMentionsStore;
+  mentionStore: IMentionsStore;
-  issuesFilter: IIssuesFilterStore;
+  issueFilter: IIssueFilterStore;
 
   constructor() {
     this.instance = new InstanceStore(this);
     this.user = new UserStore(this);
-
     this.project = new ProjectStore(this);
     this.issue = new IssueStore(this);
-    this.issueDetails = new IssueDetailStore(this);
+    this.issueDetail = new IssueDetailStore(this);
-    this.mentionsStore = new MentionsStore(this);
+    this.mentionStore = new MentionsStore(this);
-    this.issuesFilter = new IssuesFilterStore(this);
+    this.issueFilter = new IssueFilterStore(this);
   }
 
-  resetOnSignOut = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    localStorage.setItem("theme", "system");
+  hydrate = (data: any) => {
+    if (!data) return;
+    this.instance.hydrate(data?.instance || {}, data?.config || {});
+    this.user.hydrate(data?.user || {});
+  };
 
+  reset = () => {
+    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.issueDetails = new IssueDetailStore(this);
+    this.issueDetail = new IssueDetailStore(this);
-    this.mentionsStore = new MentionsStore(this);
+    this.mentionStore = new MentionsStore(this);
-    this.issuesFilter = new IssuesFilterStore(this);
+    this.issueFilter = new IssueFilterStore(this);
   };
 }

space/store/user.store.ts

@@ -3,11 +3,11 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 // types
 import { IUser } from "@plane/types";
 // services
-import { AuthService } from "@/services/authentication.service";
+import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
 // stores
 import { RootStore } from "@/store/root.store";
-import { ProfileStore, IProfileStore } from "@/store/user/profile.store";
+import { ProfileStore, IProfileStore } from "@/store/profile.store";
 import { ActorDetail } from "@/types/issue";
 
 type TUserErrorStatus = {
@@ -22,12 +22,13 @@ export interface IUserStore {
   error: TUserErrorStatus | undefined;
   data: IUser | undefined;
   // store observables
-  userProfile: IProfileStore;
+  profile: IProfileStore;
   // computed
   currentActor: ActorDetail;
   // actions
   fetchCurrentUser: () => Promise<IUser | undefined>;
   updateCurrentUser: (data: Partial<IUser>) => Promise<IUser | undefined>;
+  hydrate: (data: IUser) => void;
   reset: () => void;
   signOut: () => Promise<void>;
 }
@@ -39,14 +40,14 @@ export class UserStore implements IUserStore {
   error: TUserErrorStatus | undefined = undefined;
   data: IUser | undefined = undefined;
   // store observables
-  userProfile: IProfileStore;
+  profile: IProfileStore;
   // service
   userService: UserService;
   authService: AuthService;
 
   constructor(private store: RootStore) {
     // stores
-    this.userProfile = new ProfileStore(store);
+    this.profile = new ProfileStore(store);
     // service
     this.userService = new UserService();
     this.authService = new AuthService();
@@ -58,7 +59,7 @@ export class UserStore implements IUserStore {
       error: observable,
       // model observables
       data: observable,
-      userProfile: observable,
+      profile: observable,
       // computed
       currentActor: computed,
       // actions
@@ -94,7 +95,7 @@ export class UserStore implements IUserStore {
       });
       const user = await this.userService.currentUser();
       if (user && user?.id) {
-        await this.userProfile.fetchUserProfile();
+        await this.profile.fetchUserProfile();
         runInAction(() => {
           this.data = user;
           this.isLoading = false;
@@ -153,6 +154,10 @@ export class UserStore implements IUserStore {
     }
   };
 
+  hydrate = (data: IUser): void => {
+    this.data = { ...this.data, ...data };
+  };
+
   /**
    * @description resets the user store
    * @returns {void}
@@ -163,7 +168,7 @@ export class UserStore implements IUserStore {
       this.isLoading = false;
       this.error = undefined;
       this.data = undefined;
-      this.userProfile = new ProfileStore(this.store);
+      this.profile = new ProfileStore(this.store);
     });
   };
 

space/tsconfig.json

@@ -1,12 +1,23 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
+  "plugins": [
+    {
+      "name": "next"
+    }
+  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "baseUrl": ".",
     "jsx": "preserve",
     "paths": {
       "@/*": ["*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   }
 }

space/types/issue-filters.d.ts

@@ -0,0 +1,6 @@
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  display_properties: boolean | null;
+  display_filters: null;
+  extra_options: null;
+}

space/types/issue.d.ts

@@ -170,3 +170,38 @@ export interface IssueDetailType {
     votes: any[];
   };
 }
+
+export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
+
+export type TIssueParams = "priority" | "state" | "labels";
+
+export interface IIssueFilterOptions {
+  state?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+}
+
+// issues
+export interface IGroupedIssues {
+  [group_id: string]: string[];
+}
+
+export interface ISubGroupedIssues {
+  [sub_grouped_id: string]: {
+    [group_id: string]: string[];
+  };
+}
+
+export type TUnGroupedIssues = string[];
+
+export interface IIssueResponse {
+  [issue_id: string]: IIssue;
+}
+
+export type TLoader = "init-loader" | "mutation" | undefined;
+
+export interface ViewFlags {
+  enableQuickAdd: boolean;
+  enableIssueCreation: boolean;
+  enableInlineEditing: boolean;
+}