Merge branch 'develop' of github.com:makeplane/plane into chore/instance

.github/workflows/build-branch.yml

@@ -15,7 +15,7 @@ env:
   TARGET_BRANCH: ${{ github.event.pull_request.base.ref }}
 
 jobs:
-  branch_build_and_push:
+  branch_build_setup:
     if: ${{ (github.event_name == 'pull_request' && github.event.action =='closed' && github.event.pull_request.merged == true) }}
     name: Build-Push Web/Space/API/Proxy Docker Image
     runs-on: ubuntu-20.04
@@ -59,18 +59,18 @@ jobs:
 
   branch_build_push_frontend:
     runs-on: ubuntu-20.04
-    needs: [branch_build_and_push]
+    needs: [branch_build_setup]
     env:
-      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
     steps:
       - name: Set Frontend Docker Tag 
         run: |
-          if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
+          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:latest"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:latest
-          elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
+          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:preview"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:preview
           else
-            TAG=${{ env.FRONTEND_TAG }}"
+            TAG=${{ env.FRONTEND_TAG }}
           fi
           echo "FRONTEND_TAG=${TAG}" >> $GITHUB_ENV
       - name: Set up Docker Buildx
@@ -101,18 +101,18 @@ jobs:
 
   branch_build_push_space:
     runs-on: ubuntu-20.04
-    needs: [branch_build_and_push]
+    needs: [branch_build_setup]
     env:
-      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
     steps:
       - name: Set Space Docker Tag 
         run: |
-          if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
+          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
-          elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
+          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:preview"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:preview
           else
-            TAG=${{ env.SPACE_TAG }}"
+            TAG=${{ env.SPACE_TAG }}
           fi
           echo "SPACE_TAG=${TAG}" >> $GITHUB_ENV
       - name: Set up Docker Buildx
@@ -143,16 +143,16 @@ jobs:
 
   branch_build_push_backend:
     runs-on: ubuntu-20.04
-    needs: [branch_build_and_push]
+    needs: [branch_build_setup]
     env:
-      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
     steps:
       - name: Set Backend Docker Tag 
         run: |
-          if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
+          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:latest"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:latest
-          elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
+          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:preview",${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:preview"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:preview
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
@@ -185,16 +185,16 @@ jobs:
 
   branch_build_push_proxy:
     runs-on: ubuntu-20.04
-    needs: [branch_build_and_push]
+    needs: [branch_build_setup]
     env:
-      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_setup.outputs.gh_branch_name }}
     steps:
       - name: Set Proxy Docker Tag 
         run: |
-          if [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "master" ]; then
+          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:latest"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:latest
-          elif [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "release" ] || [ "${{ needs.branch_build_and_push.outputs.gh_branch_name }}" = "preview" ]; then
+          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "release" ] || [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "preview" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:preview"
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:preview,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:preview
           else
             TAG=${{ env.PROXY_TAG }}
           fi

ENV_SETUP.md

@@ -76,7 +76,6 @@ NEXT_PUBLIC_ENABLE_OAUTH=0
 # Backend
 # Debug value for api server use it as 0 for production use
 DEBUG=0
-DJANGO_SETTINGS_MODULE="plane.settings.selfhosted" # deprecated
 ​
 # Error logs
 SENTRY_DSN=""

deploy/coolify/coolify-docker-compose.yml

@@ -35,7 +35,6 @@ services:
     command: ./bin/takeoff
     environment:
       - DEBUG=${DEBUG:-0}
-      - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
       - SENTRY_DSN=${SENTRY_DSN:-""}
       - PGUSER=${PGUSER:-plane}
       - PGPASSWORD=${PGPASSWORD:-plane}
@@ -84,7 +83,6 @@ services:
     command: ./bin/worker
     environment:
       - DEBUG=${DEBUG:-0}
-      - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
       - SENTRY_DSN=${SENTRY_DSN:-""}
       - PGUSER=${PGUSER:-plane}
       - PGPASSWORD=${PGPASSWORD:-plane}
@@ -131,7 +129,6 @@ services:
     command: ./bin/beat
     environment:
       - DEBUG=${DEBUG:-0}
-      - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
       - SENTRY_DSN=${SENTRY_DSN:-""}
       - PGUSER=${PGUSER:-plane}
       - PGPASSWORD=${PGPASSWORD:-plane}

deploy/selfhost/variables.env

@@ -7,7 +7,6 @@ API_REPLICAS=1
 NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
-DJANGO_SETTINGS_MODULE=plane.settings.selfhosted # deprecated
 NEXT_PUBLIC_ENABLE_OAUTH=0
 NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
 SENTRY_DSN=""

space/components/accounts/email-reset-password-form.tsx

@@ -1,11 +1,5 @@
 import React from "react";
-
-// react hook form
 import { useForm } from "react-hook-form";
-// services
-import userService from "services/user.service";
-// hooks
-// import useToast from "hooks/use-toast";
 // ui
 import { Input } from "components/ui";
 import { Button } from "@plane/ui";
@@ -30,10 +24,9 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   });
 
   const forgotPassword = async (formData: any) => {
-    const payload = {
+    // const payload = {
-      email: formData.email,
+    //   email: formData.email,
-    };
+    // };
-
     // await userService
     //   .forgotPassword(payload)
     //   .then(() =>
@@ -60,7 +53,7 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   };
 
   return (
-    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
+    <form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(forgotPassword)}>
       <div className="space-y-1">
         <Input
           id="email"
@@ -73,11 +66,11 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
               ) || "Email address is not valid",
           })}
           placeholder="Enter registered email address.."
-          className="border-custom-border-300 h-[46px]"
+          className="h-[46px] border-custom-border-300"
         />
         {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
       </div>
-      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+      <div className="mt-5 flex flex-col-reverse items-center gap-2 sm:flex-row">
         <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
           Go Back
         </Button>

space/components/issues/filters-render/state/filter-state-block.tsx

@@ -1,19 +1,10 @@
-import { useRouter } from "next/router";
-// mobx react lite
 import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
 import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
 
 export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
   const stateGroup = issueGroupFilter(state.group);
 
   const removeStateFromFilter = () => {
@@ -28,12 +19,12 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) =>
   if (stateGroup === null) return <></>;
   return (
     <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
-      <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
+      <div className="flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
         {/* <stateGroup.icon /> */}
       </div>
-      <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
+      <div className="whitespace-nowrap text-xs font-medium">{state?.name}</div>
       <div
-        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
+        className="flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
         onClick={removeStateFromFilter}
       >
         <span className="material-symbols-rounded text-xs">close</span>

space/components/issues/navbar/index.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 // mobx
 import { observer } from "mobx-react-lite";
 // components
-import { NavbarSearch } from "./search";
+// import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarTheme } from "./theme";
 // ui
@@ -83,45 +83,43 @@ const IssueNavbar = observer(() => {
   }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
 
   return (
-    <div className="px-5 relative w-full flex items-center gap-4">
+    <div className="relative flex w-full items-center gap-4 px-5">
       {/* project detail */}
-      <div className="flex-shrink-0 flex items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
-        <div className="w-4 h-4 flex justify-center items-center">
+        <div className="flex h-4 w-4 items-center justify-center">
           {projectStore?.project && projectStore?.project?.emoji ? (
             renderEmoji(projectStore?.project?.emoji)
           ) : (
-            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+            <Image src="/plane-logo.webp" alt="plane logo" className="h-[24px] w-[24px]" height="24" width="24" />
           )}
         </div>
-        <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
+        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
           {projectStore?.project?.name || `...`}
         </div>
       </div>
 
       {/* issue search bar */}
-      <div className="w-full">
+      <div className="w-full">{/* <NavbarSearch /> */}</div>
-        <NavbarSearch />
-      </div>
 
       {/* issue views */}
-      <div className="flex-shrink-0 relative flex items-center gap-1 transition-all ease-in-out delay-150">
+      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
         <NavbarIssueBoardView />
       </div>
 
       {/* theming */}
-      <div className="flex-shrink-0 relative">
+      <div className="relative flex-shrink-0">
         <NavbarTheme />
       </div>
 
       {user ? (
-        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
           {user.avatar && user.avatar !== "" ? (
             <div className="h-5 w-5 rounded-full">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
             </div>
           ) : (
-            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+            <div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
               {(user.display_name ?? "A")[0]}
             </div>
           )}

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

@@ -7,28 +7,30 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 export const NavbarIssueBoardView = observer(() => {
-  const { project: projectStore, issue: issueStore }: RootStore = useMobxStore();
+  const {
-
+    project: { viewOptions, setActiveBoard, activeBoard },
+  }: RootStore = useMobxStore();
+  // router
   const router = useRouter();
   const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
 
   const handleCurrentBoardView = (boardView: string) => {
-    projectStore.setActiveBoard(boardView);
+    setActiveBoard(boardView);
     router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
   };
 
   return (
     <>
-      {projectStore?.viewOptions &&
+      {viewOptions &&
-        Object.keys(projectStore?.viewOptions).map((viewKey: string) => {
+        Object.keys(viewOptions).map((viewKey: string) => {
-          if (projectStore?.viewOptions[viewKey]) {
+          if (viewOptions[viewKey]) {
             return (
               <div
                 key={viewKey}
-                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
+                className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
-                  viewKey === projectStore?.activeBoard
+                  viewKey === activeBoard
                     ? `bg-custom-background-80 text-custom-text-200`
-                    : `hover:bg-custom-background-80 text-custom-text-300`
+                    : `text-custom-text-300 hover:bg-custom-background-80`
                 }`}
                 onClick={() => handleCurrentBoardView(viewKey)}
                 title={viewKey}

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

@@ -1,13 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const NavbarIssueView = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return <div>View</div>;
-});

space/components/issues/navbar/search.tsx

@@ -1,13 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const NavbarSearch = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return <div> </div>;
-});

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

@@ -1,7 +1,4 @@
-import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
-// lib
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
   PeekOverviewHeader,
@@ -22,19 +19,19 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
   const { handleClose, issueDetails } = props;
 
   return (
-    <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
-      <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+      <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
         <div className="w-full p-5">
           <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
         </div>
         {issueDetails ? (
-          <div className="h-full w-full px-6 overflow-y-auto">
+          <div className="h-full w-full overflow-y-auto px-6">
             {/* issue title and description */}
             <div className="w-full">
               <PeekOverviewIssueDetails issueDetails={issueDetails} />
             </div>
             {/* divider */}
-            <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+            <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} />
@@ -43,7 +40,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
         ) : (
           <Loader className="px-6">
             <Loader.Item height="30px" />
-            <div className="space-y-2 mt-3">
+            <div className="mt-3 space-y-2">
               <Loader.Item height="20px" width="70%" />
               <Loader.Item height="20px" width="60%" />
               <Loader.Item height="20px" width="60%" />

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

@@ -18,16 +18,18 @@ type Props = {
   issueDetails: IIssue;
 };
 
-export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
+  // router
   const router = useRouter();
   const { workspace_slug } = router.query;
-
+  // store
-  const { issueDetails: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
+  const {
-
+    issueDetails: issueDetailStore,
+    project: projectStore,
+    user: { currentUser },
+  } = useMobxStore();
   const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
 
-  const user = userStore?.currentUser;
-
   return (
     <div className="pb-10">
       <h4 className="font-medium">Activity</h4>
@@ -38,17 +40,17 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
               <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
             ))}
           </div>
-          {user ? (
+          {currentUser ? (
             <>
               {projectStore.deploySettings?.comments && (
                 <div className="mt-4">
-                  <AddComment disabled={!userStore.currentUser} />
+                  <AddComment disabled={!currentUser} />
                 </div>
               )}
             </>
           ) : (
-            <div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded mt-4">
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
-              <p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment
               </p>

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

@@ -13,16 +13,15 @@ import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {};
 
-export const IssuePeekOverview: React.FC<Props> = observer((props) => {
+export const IssuePeekOverview: React.FC<Props> = observer(() => {
+  // states
   const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
   const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
-
   // router
   const router = useRouter();
   const { workspace_slug, project_slug, peekId, board } = router.query;
   // store
   const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
-
   const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
 
   useEffect(() => {
@@ -75,7 +74,7 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
+            <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} />
             </Dialog.Panel>
           </Transition.Child>
@@ -105,7 +104,7 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
           >
             <Dialog.Panel>
               <div
-                className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
                   issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
                 }`}
               >

space/components/ui/tooltip.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 // next-themes
 import { useTheme } from "next-themes";
 // tooltip2
@@ -50,9 +49,9 @@ export const Tooltip: React.FC<Props> = ({
       hoverCloseDelay={closeDelay}
       content={
         <div
-          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md border border-custom-border-200 ${
+          className={`relative z-50 max-w-xs gap-1 rounded-md border border-custom-border-200 p-2 text-xs shadow-md ${
             theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
-          } break-words overflow-hidden ${className}`}
+          } overflow-hidden break-words ${className}`}
         >
           {tooltipHeading && (
             <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>

space/components/views/login.tsx

@@ -10,7 +10,7 @@ export const LoginView = observer(() => {
   return (
     <>
       {userStore?.loader ? (
-        <div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
+        <div className="relative flex h-screen w-screen items-center justify-center">Loading</div> // TODO: Add spinner instead
       ) : (
         <>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
       )}

space/components/views/project-details.tsx

@@ -1,9 +1,6 @@
 import { useEffect } from "react";
-
 import Image from "next/image";
 import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListView } from "components/issues/board-views/list";
@@ -20,7 +17,7 @@ import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
 export const ProjectDetailsView = observer(() => {
   const router = useRouter();
-  const { workspace_slug, project_slug, states, labels, priorities, board, peekId } = router.query;
+  const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
 
   const {
     issue: issueStore,
@@ -53,22 +50,22 @@ export const ProjectDetailsView = observer(() => {
   }, [peekId, issueDetailStore, project_slug, workspace_slug]);
 
   return (
-    <div className="relative w-full h-full overflow-hidden">
+    <div className="relative h-full w-full overflow-hidden">
       {workspace_slug && <IssuePeekOverview />}
 
       {issueStore?.loader && !issueStore.issues ? (
-        <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
+        <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
       ) : (
         <>
           {issueStore?.error ? (
-            <div className="h-full w-full grid place-items-center p-6">
+            <div className="grid h-full w-full place-items-center p-6">
               <div className="text-center">
-                <div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
+                <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
-                  <div className="h-32 w-32 grid place-items-center">
+                  <div className="grid h-32 w-32 place-items-center">
                     <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
                   </div>
                 </div>
-                <h1 className="text-3xl font-semibold mt-12">Oops! Something went wrong.</h1>
+                <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
                 <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
               </div>
             </div>
@@ -76,12 +73,12 @@ export const ProjectDetailsView = observer(() => {
             projectStore?.activeBoard && (
               <>
                 {projectStore?.activeBoard === "list" && (
-                  <div className="relative w-full h-full overflow-y-auto">
+                  <div className="relative h-full w-full overflow-y-auto">
                     <IssueListView />
                   </div>
                 )}
                 {projectStore?.activeBoard === "kanban" && (
-                  <div className="relative w-full h-full mx-auto p-5">
+                  <div className="relative mx-auto h-full w-full p-5">
                     <IssueKanbanView />
                   </div>
                 )}

space/lib/mobx/store-init.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 // next imports
 import { useRouter } from "next/router";
@@ -15,12 +13,6 @@ const MobxStoreInit = () => {
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
 
-  // useEffect(() => {
-  //   store.issue.userSelectedLabels = labels || [];
-  //   store.issue.userSelectedPriorities = priorities || [];
-  //   store.issue.userSelectedStates = states || [];
-  // }, [store.issue]);
-
   useEffect(() => {
     const authToken = Cookie.get("accessToken") || null;
     if (authToken) userStore.fetchCurrentUser();

space/package.json

@@ -17,10 +17,10 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
     "@mui/material": "^5.14.1",
+    "@plane/document-editor": "*",
     "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
     "@plane/ui": "*",
-    "@plane/document-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "js-cookie": "^3.0.1",
@@ -28,7 +28,7 @@
     "lucide-react": "^0.293.0",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
-    "next": "12.3.2",
+    "next": "^14.0.3",
     "next-images": "^1.8.5",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",

space/pages/_app.tsx

@@ -5,7 +5,6 @@ import { ThemeProvider } from "next-themes";
 import "styles/globals.css";
 import "styles/editor.css";
 import "styles/table.css";
-
 // contexts
 import { ToastContextProvider } from "contexts/toast.context";
 // mobx store provider

space/pages/_document.tsx

@@ -5,7 +5,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body className="antialiased bg-custom-background-100 w-100">
+        <body className="w-100 bg-custom-background-100 antialiased">
           <Main />
           <NextScript />
         </body>

web/components/account/sign-in-forms/create-password.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { AuthService } from "services/auth.service";
@@ -74,7 +75,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
         Let{"'"}s get a new password
       </h1>
 
@@ -117,16 +118,23 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
                 hasError={Boolean(errors.password)}
                 placeholder="Create password"
                 className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
+                minLength={8}
               />
             )}
           />
-          <p className="text-xs text-onboarding-text-200 mt-3">
+          <p className="text-xs text-onboarding-text-200 mt-3 pb-2">
             Whatever you choose now will be your account{"'"}s password until you change it.
           </p>
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? "Submitting..." : "Go to workspace"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/email-form.tsx

@@ -83,10 +83,10 @@ export const EmailForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
         Get on your flight deck!
       </h1>
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
         Sign in with the email you used to sign up for Plane
       </p>
 

web/components/account/sign-in-forms/optional-set-password.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -37,12 +38,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">Set a password</h1>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
       <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        If you{"'"}d to do away with codes, set a password here.
+        If you{"'"}d to do away with codes, set a password here
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
         <Controller
           control={control}
           name="email"
@@ -65,7 +66,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
             />
           )}
         />
-        <div className="grid grid-cols-2 gap-2.5 mt-4">
+        <div className="grid grid-cols-2 gap-2.5">
           <Button
             type="button"
             variant="primary"
@@ -88,6 +89,12 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
             {isGoingToWorkspace ? "Going to app..." : "Go to workspace"}
           </Button>
         </div>
+        <p className="text-xs text-onboarding-text-200">
+          When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/password.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -184,17 +185,25 @@ export const PasswordForm: React.FC<Props> = (props) => {
               />
             )}
           />
+          <div className="w-full text-right">
             <button
               type="button"
               onClick={handleForgotPassword}
-            className="text-xs font-medium text-right w-full text-custom-primary-100"
+              className="text-xs font-medium text-custom-primary-100"
             >
               Forgot your password?
             </button>
           </div>
+        </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? "Signing in..." : "Go to workspace"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/root.tsx

@@ -23,6 +23,8 @@ type Props = {
   handleSignInRedirection: () => Promise<void>;
 };
 
+const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
+
 export const SignInRoot: React.FC<Props> = (props) => {
   const { handleSignInRedirection } = props;
   // states
@@ -72,7 +74,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
           />
         )}
       </div>
-      {signInStep !== ESignInSteps.OPTIONAL_SET_PASSWORD && (
+      {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions
           updateEmail={(newEmail) => setEmail(newEmail)}
           handleStepChange={(step: ESignInSteps) => setSignInStep(step)}

web/components/account/sign-in-forms/set-password-link.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -48,6 +49,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
 
     await authService
       .emailCheck(payload)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "We have sent a new link to your email.",
+        })
+      )
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -60,15 +68,15 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        Get on your flight deck!
+        Get on your flight deck
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        We have sent a link to <span className="font-medium text-custom-primary-100">{email},</span> so you can set a
+        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
         password
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto">
+      <form className="mt-5 sm:w-96 mx-auto space-y-4">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -103,7 +111,6 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
             )}
           />
         </div>
-        <div className="mt-4">
         <Button
           type="button"
           variant="primary"
@@ -115,7 +122,12 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
         >
           {isSendingNewLink ? "Sending new link..." : "Get link again"}
         </Button>
-        </div>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/unique-code.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { CornerDownLeft, XCircle } from "lucide-react";
 // services
@@ -44,7 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   // toast alert
   const { setToastAlert } = useToast();
   // timer
-  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer();
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
   // form info
   const {
     control,
@@ -131,11 +132,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Moving to the runway</h1>
-        Moving to the runway
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
-      </h1>
+        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below
-      <p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
-        Paste the code you got at <span className="font-medium text-custom-primary-100">{email}</span> below.
       </p>
 
       <form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
@@ -196,16 +195,19 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.token)}
-                placeholder="gets-sets-fays"
+                placeholder="gets-sets-flys"
                 className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
               />
             )}
           />
+          <div className="w-full text-right">
             <button
               type="button"
               onClick={handleRequestNewCode}
-            className={`text-xs text-right w-full text-onboarding-text-200 ${
+              className={`text-xs ${
-              isRequestNewCodeDisabled ? "" : "hover:text-custom-primary-100"
+                isRequestNewCodeDisabled
+                  ? "text-onboarding-text-300"
+                  : "text-onboarding-text-200 hover:text-custom-primary-100"
               }`}
               disabled={isRequestNewCodeDisabled}
             >
@@ -216,6 +218,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                 : "Request new code"}
             </button>
           </div>
+        </div>
         <Button
           type="submit"
           variant="primary"
@@ -226,6 +229,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
         >
           {isSubmitting ? "Signing in..." : "Confirm"}
         </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click Confirm above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
       </form>
     </>
   );

web/components/command-palette/command-pallette.tsx

@@ -55,22 +55,10 @@ export const CommandPalette: FC = observer(() => {
     toggleBulkDeleteIssueModal,
     isDeleteIssueModalOpen,
     toggleDeleteIssueModal,
-
+    isAnyModalOpen,
     createIssueStoreType,
   } = commandPalette;
 
-  const isAnyModalOpen = Boolean(
-    isCreateIssueModalOpen ||
-      isCreateCycleModalOpen ||
-      isCreatePageModalOpen ||
-      isCreateProjectModalOpen ||
-      isCreateModuleModalOpen ||
-      isCreateViewModalOpen ||
-      isShortcutModalOpen ||
-      isBulkDeleteIssueModalOpen ||
-      isDeleteIssueModalOpen
-  );
-
   const { setToastAlert } = useToast();
 
   const { data: issueDetails } = useSWR(

web/components/common/latest-feature-block.tsx

@@ -1,35 +1,36 @@
 import Image from "next/image";
+import Link from "next/link";
 import { useTheme } from "next-themes";
 // icons
 import { Lightbulb } from "lucide-react";
 // images
-import signInIssues from "public/onboarding/onboarding-issues.svg";
+import latestFeatures from "public/onboarding/onboarding-pages.svg";
 
 export const LatestFeatureBlock = () => {
   const { resolvedTheme } = useTheme();
 
   return (
     <>
-      <div
+      <div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
-        className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
-      >
         <Lightbulb className="h-7 w-7 mr-2 mx-3" />
-        <p className={`text-sm text-left text-onboarding-text-100`}>
+        <p className="text-sm text-left text-onboarding-text-100">
-          Try the latest features, like Tiptap editor, to write compelling responses.{" "}
+          Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
-          <span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
+          <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-            See new features
+            <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
-          </span>
+          </Link>
         </p>
       </div>
-      <div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
+      <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
+        <div className="h-[90%]">
           <Image
-          src={signInIssues}
+            src={latestFeatures}
             alt="Plane Issues"
-          className={`flex object-cover rounded-md ${
+            className={`rounded-md h-full ml-8 -mt-2 ${
               resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
             } `}
           />
         </div>
+      </div>
     </>
   );
 };

web/components/common/new-empty-state.tsx

@@ -46,7 +46,7 @@ export const NewEmptyState: React.FC<Props> = ({
         <h3 className="font-semibold text-2xl">{title}</h3>
         {description && <p className=" text-lg">{description}</p>}
         <div className="relative w-full max-w-6xl">
-          <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
+          <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
         </div>
 
         <div className="flex justify-center items-start relative">

web/components/cycles/cycles-board-card.tsx

@@ -33,7 +33,10 @@ export interface ICyclesBoardCard {
 export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const { cycle, workspaceSlug, projectId } = props;
   // store
-  const { cycle: cycleStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    cycle: cycleStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
   // states
@@ -152,7 +155,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       />
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+        <div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
               <span className="flex-shrink-0">
@@ -268,7 +271,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
               </div>
             </div>
           </div>
-        </span>
+        </div>
       </Link>
     </div>
   );

web/components/cycles/cycles-list-item.tsx

@@ -153,7 +153,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+        <div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
           <div className="flex items-center gap-3 w-full truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">
@@ -262,7 +262,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               </CustomMenu.MenuItem>
             </CustomMenu>
           </div>
-        </span>
+        </div>
       </Link>
     </>
   );

web/components/headers/global-issues.tsx

@@ -2,8 +2,6 @@ import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -17,6 +15,7 @@ import { List, PlusIcon, Sheet } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { EFilterType } from "store/issues/types";
 
 const GLOBAL_VIEW_LAYOUTS = [
   { key: "list", title: "List", link: "/workspace-views", icon: List },
@@ -27,73 +26,55 @@ type Props = {
   activeLayout: "list" | "spreadsheet";
 };
 
-const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
-
 export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   const { activeLayout } = props;
 
   const [createViewModal, setCreateViewModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
 
   const {
-    globalViewFilters: globalViewFiltersStore,
+    workspace: { workspaceLabels },
-    workspaceFilter: workspaceFilterStore,
-    workspace: workspaceStore,
     workspaceMember: { workspaceMembers },
-    project: projectStore,
+    project: { workspaceProjects },
-  } = useMobxStore();
 
-  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+    workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
+  } = useMobxStore();
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
-      if (!workspaceSlug || !globalViewId) return;
+      if (!workspaceSlug) return;
-
+      const newValues = issueFilters?.filters?.[key] ?? [];
-      const newValues = storedFilters?.[key] ?? [];
 
       if (Array.isArray(value)) {
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
         });
       } else {
-        if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
 
-      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
-        [key]: newValues,
-      });
     },
-    [globalViewId, globalViewFiltersStore, storedFilters, workspaceSlug]
+    [workspaceSlug, issueFilters, updateFilters]
   );
 
-  const handleDisplayFiltersUpdate = useCallback(
+  const handleDisplayFilters = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
       if (!workspaceSlug) return;
-
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
-      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
-        display_filters: updatedDisplayFilter,
-      });
     },
-    [workspaceFilterStore, workspaceSlug]
+    [workspaceSlug, updateFilters]
   );
 
-  const handleDisplayPropertiesUpdate = useCallback(
+  const handleDisplayProperties = useCallback(
     (property: Partial<IIssueDisplayProperties>) => {
       if (!workspaceSlug) return;
-
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_PROPERTIES, property);
-      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
-        display_properties: property,
-      });
     },
-    [workspaceFilterStore, workspaceSlug]
+    [workspaceSlug, updateFilters]
-  );
-
-  useSWR(
-    workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
-    workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
   );
 
   return (
@@ -137,32 +118,31 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
               </Link>
             ))}
           </div>
+
           {activeLayout === "spreadsheet" && (
             <>
-              {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
               <FiltersDropdown title="Filters" placement="bottom-end">
                 <FilterSelection
-                    filters={storedFilters ?? {}}
-                    handleFiltersUpdate={handleFiltersUpdate}
                   layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
-                    labels={workspaceStore.workspaceLabels ?? undefined}
+                  filters={issueFilters?.filters ?? {}}
-                    members={workspaceMembers?.map((m) => m.member) ?? undefined}
+                  handleFiltersUpdate={handleFiltersUpdate}
-                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  labels={workspaceLabels ?? undefined}
+                  members={workspaceMembers?.map((m) => m.member)}
+                  projects={workspaceProjects ?? undefined}
                 />
               </FiltersDropdown>
-              )}
-
               <FiltersDropdown title="Display" placement="bottom-end">
                 <DisplayFiltersSelection
-                  displayFilters={workspaceFilterStore.workspaceDisplayFilters}
-                  displayProperties={workspaceFilterStore.workspaceDisplayProperties}
-                  handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
-                  handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
                   layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  displayFilters={issueFilters?.displayFilters ?? {}}
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
+                  displayProperties={issueFilters?.displayProperties ?? {}}
+                  handleDisplayPropertiesUpdate={handleDisplayProperties}
                 />
               </FiltersDropdown>
             </>
           )}
+
           <Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
             New View
           </Button>

web/components/headers/project-views.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
@@ -15,18 +14,16 @@ export const ProjectViewsHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // states
-  const [createViewModal, setCreateViewModal] = useState(false);
 
-  const { project: projectStore } = useMobxStore();
+  const { project: projectStore, commandPalette } = useMobxStore();
   const { currentProjectDetails } = projectStore;
 
   return (
     <>
       {workspaceSlug && projectId && (
         <CreateUpdateProjectViewModal
-          isOpen={createViewModal}
+          isOpen={commandPalette.isCreateViewModalOpen}
-          onClose={() => setCreateViewModal(false)}
+          onClose={() => commandPalette.toggleCreateViewModal(false)}
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
         />
@@ -69,7 +66,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
               variant="primary"
               size="sm"
               prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
-              onClick={() => setCreateViewModal(true)}
+              onClick={() => commandPalette.toggleCreateViewModal(true)}
             >
               Create View
             </Button>

web/components/inbox/issue-card.tsx

@@ -27,7 +27,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
 
   return (
     <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
-      <span>
       <div
         id={issue.id}
         className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${
@@ -91,7 +90,6 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
           )}
         </div>
       </div>
-      </span>
     </Link>
   );
 };

web/components/instance/help-section.tsx

@@ -98,12 +98,12 @@ export const InstanceHelpSection: FC = () => {
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
-                      <span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
                         <div className="grid place-items-center flex-shrink-0">
                           <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
                         </div>
                         <span className="text-xs">{name}</span>
-                      </span>
+                      </div>
                     </Link>
                   );
                 else

web/components/instance/instance-admin-restriction.tsx

@@ -67,12 +67,10 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
     </div>
     <div className="flex items-center justify-center gap-2">
       <Link href={`/${redirectWorkspaceSlug}`}>
-        <span>
         <Button variant="primary" size="sm">
           <LayoutGrid width={16} height={16} />
           To the workspace
         </Button>
-        </span>
       </Link>
     </div>
   </div>

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

@@ -1,29 +1,29 @@
 import React from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-// image
+// images
 import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
 import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
-import PlaneDarkLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 
 export const InstanceNotReady = () => {
   const { resolvedTheme } = useTheme();
 
-  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo;
+  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
 
   return (
     <div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
-      <div className={`h-screen w-full pt-24`}>
+      <div className="h-full w-full pt-24">
-        <div className="h-auto bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 p-4 rounded-md mx-auto shadow-sm border border-custom-border-100 ">
+        <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-100">
-          <div className={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}>
+          <div className="relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md">
             <div className="flex items-center py-10 justify-center">
-              <Image src={planeLogo} className="h-44 w-full" alt="image" />
+              <Image src={planeLogo} className="h-44 w-full" alt="Plane logo" />
             </div>
             <div className="mt-20">
-              <Image src={instanceNotReady} className="h-46 w-full" alt="image" />
+              <Image src={instanceNotReady} className="h-56 w-full" alt="Instance not ready" />
             </div>
             <div className="flex flex-col gap-5 items-center py-12 pb-20 w-full">
-              <h3 className="text-2xl font-medium">Your Plane instance isn’t ready yet</h3>
+              <h3 className="text-2xl font-medium">Your Plane instance isn{"'"}t ready yet</h3>
               <p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
             </div>
           </div>

web/components/instance/setup-done-view.tsx

@@ -1,43 +1,66 @@
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
-
+import { useTheme } from "next-themes";
 // ui
 import { Button } from "@plane/ui";
 import { UserCog2 } from "lucide-react";
-// image
+// images
 import instanceSetupDone from "public/instance-setup-done.svg";
-import PlaneLogo from "public/plane-logos/blue-without-text.png";
+import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+import { useMobxStore } from "lib/mobx/store-provider";
 
-export const InstanceSetupDone = () => (
+export const InstanceSetupDone = () => {
-  <div className="h-screen w-full overflow-hidden">
+  // states
-    <div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}>
+  const [isRedirecting, setIsRedirecting] = useState(false);
-      <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
+  // next-themes
-        <div
+  const { resolvedTheme } = useTheme();
-          className={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`}
+  // mobx store
-        >
+  const {
-          <div className="flex items-center gap-5 py-10 justify-center">
+    instance: { fetchInstanceInfo },
-            <Image src={PlaneLogo} height={44} width={44} alt="image" />
+  } = useMobxStore();
-            <span className="text-4xl font-semibold">To the stratosphere now!</span>
+
+  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
+
+  const redirectToGodMode = async () => {
+    setIsRedirecting(true);
+
+    await fetchInstanceInfo().finally(() => setIsRedirecting(false));
+  };
+
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <div className="bg-onboarding-gradient-100 h-full w-full pt-12 overflow-hidden">
+        <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 overflow-hidden">
+          <div className="flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-y-auto pb-8">
+            <div className="flex py-10 justify-center">
+              <div className="h-[30px]">
+                <Image src={planeLogo} className="h-full w-full" alt="Plane logo" />
+              </div>
             </div>
 
-          <div className="flex items-center justify-center">
+            <div className="grid place-items-center my-8">
-            <Image src={instanceSetupDone} height={360} width={444} alt="image" />
+              <div className="w-[444px]">
+                <Image src={instanceSetupDone} className="h-full w-full" alt="image" />
+              </div>
             </div>
 
-          <div className="flex flex-col gap-8 items-center py-12 w-full">
+            <div className="flex flex-col gap-8 items-center w-full sm:px-4">
-            <span className="text-xl font-medium">
+              <div className="bg-purple-500/20 border border-purple-500 py-2.5 px-3 rounded text-center space-y-3">
+                <h6 className="text-base font-semibold">
                   Your instance is now ready for more security, more controls, and more intelligence.
-            </span>
+                </h6>
-            <Button size="lg" prependIcon={<UserCog2 />}>
+                <p className="text-xs font-medium">
-              Go to God Mode
+                  Use this wisely. Remember, with great power comes great responsibility.
+                </p>
+              </div>
+              <Button size="lg" prependIcon={<UserCog2 />} onClick={redirectToGodMode} loading={isRedirecting}>
+                {isRedirecting ? "Redirecting..." : "Go to God Mode"}
               </Button>
-
-            <div className="flex p-2.5 text-custom-primary-100 bg-custom-primary-10 border border-custom-primary-100 text-sm text-left mx-auto rounded">
-              Use this wisely. Remember, with great power comes great responsibility.🕷️
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  );
-);
+};

web/components/instance/setup-form/email-code-form.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 // ui
 import { Input, Button } from "@plane/ui";
@@ -24,6 +24,8 @@ export interface IInstanceSetupEmailCodeForm {
 
 export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
   const { handleNextStep, email, moveBack } = props;
+  // states
+  const [isResendingCode, setIsResendingCode] = useState(false);
   // form info
   const {
     control,
@@ -40,10 +42,10 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
   const { setToastAlert } = useToast();
   const { timer, setTimer } = useTimer(30);
   // computed
-  const isResendDisabled = timer > 0 || isSubmitting;
+  const isResendDisabled = timer > 0 || isResendingCode;
 
-  const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) =>
+  const handleEmailCodeFormSubmit = async (formValues: InstanceSetupEmailCodeFormValues) =>
-    authService
+    await authService
       .instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
       .then(() => {
         reset();
@@ -51,42 +53,40 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
       })
       .catch((err) => {
         setToastAlert({
-          title: "Oops!",
           type: "error",
-          message: err?.error,
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
         });
       });
 
-  const resendMagicCode = () => {
+  const resendMagicCode = async () => {
-    setTimer(30);
+    setIsResendingCode(true);
-    authService
+
+    await authService
       .instanceAdminEmailCode({ email })
-      .then(() => {
+      .then(() => setTimer(30))
-        // setCodeResending(false);
-        setTimer(30);
-      })
       .catch((err) => {
         setToastAlert({
-          title: "Oops!",
           type: "error",
-          message: err?.error,
+          title: "Error!",
-        });
+          message: err?.error ?? "Something went wrong. Please try again.",
         });
+      })
+      .finally(() => setIsResendingCode(false));
   };
 
   return (
     <form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
-      <div className="pb-2">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+        Let{"'"}s secure your instance
-          Let’s secure your instance
       </h1>
-        <div className="text-center text-sm text-onboarding-text-200 mt-3">
+      <p className="text-center text-sm text-onboarding-text-200 mt-3">
-          <p>Paste the code you got at </p>
+        Paste the code you got at
-          <span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span>
+        <br />
-          <span className="text-onboarding-text-200">below.</span>
+        <span className="text-custom-primary-100 font-semibold">{email}</span> below.
-        </div>
+      </p>
-
+      <div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
-        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
+        <div>
           <Controller
             name="email"
             control={control}
@@ -98,7 +98,7 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
                 ) || "Email address is not valid",
             }}
             render={({ field: { value, onChange } }) => (
-              <div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
+              <div className="flex items-center relative rounded-md bg-onboarding-background-200">
                 <Input
                   id="email"
                   name="email"
@@ -116,27 +116,22 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
               </div>
             )}
           />
-          <div
+          <div className="w-full text-right">
-            className={`flex w-full justify-end text-xs outline-none ${
-              isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
-            } `}
-          >
-            {timer > 0 ? (
-              <span className="text-right">Request new code in {timer}s</span>
-            ) : isSubmitting ? (
-              "Sending new code..."
-            ) : (
-              <div className="flex justify-end w-full">
             <button
               type="button"
-                  className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
               onClick={resendMagicCode}
+              className={`text-xs ${
+                isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
+              }`}
               disabled={isResendDisabled}
             >
-                  <span className="font-medium">Resend</span>
+              {timer > 0
+                ? `Request new code in ${timer}s`
+                : isSubmitting
+                ? "Requesting new code..."
+                : "Request new code"}
             </button>
           </div>
-            )}
         </div>
         <Controller
           name="token"
@@ -150,18 +145,16 @@ export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (prop
                 type="text"
                 value={value}
                 onChange={onChange}
-                  placeholder="gets-sets-flys"
+                placeholder="gets-sets-fays"
                 className="border-onboarding-border-100 h-[46px] w-full "
               />
             </div>
           )}
         />
-
+        <Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
-          <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Verifying..." : "Next step"}
         </Button>
       </div>
-      </div>
     </form>
   );
 };

web/components/instance/setup-form/email-form.tsx

@@ -44,23 +44,23 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
       })
       .catch((err) => {
         setToastAlert({
-          title: "Oops!",
           type: "error",
-          message: err?.error,
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
         });
       });
 
   return (
     <form onSubmit={handleSubmit(handleEmailFormSubmit)}>
-      <div className="pb-2">
+      <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+        Let{"'"}s secure your instance
-          Let’s secure your instance
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 mt-3">
-          Explore privacy options. Get AI features. Secure access. <br /> Takes 2 minutes.
+        Explore privacy options. Get AI features. Secure access.
+        <br />
+        Takes 2 minutes.
       </p>
-
+      <div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
-        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
         <Controller
           name="email"
           control={control}
@@ -91,15 +91,13 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
             </div>
           )}
         />
-          <p className="text-xs text-custom-text-400 mt-0 py-2">
+        <p className="text-xs text-custom-text-200 pb-2">
           Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
         </p>
-
+        <Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
-          <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Sending code..." : "Send unique code"}
         </Button>
       </div>
-      </div>
     </form>
   );
 };

web/components/instance/setup-form/password-form.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Link from "next/link";
 import { useForm, Controller } from "react-hook-form";
 // ui
 import { Input, Button } from "@plane/ui";
@@ -43,14 +44,14 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
   return (
     <form onSubmit={handleSubmit(handlePasswordSubmit)}>
       <div className="pb-2">
-        <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+        <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
           Moving to the runway
         </h1>
         <p className="text-center text-sm text-onboarding-text-200 mt-3">
-          {"Let's set a password so you can do away with codes."}
+          Let{"'"}s set a password so you can do away with codes.
         </p>
 
-        <div className="relative mt-10 w-full sm:w-[360px] mx-auto">
+        <div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
           <Controller
             control={control}
             name="email"
@@ -79,8 +80,7 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
               </div>
             )}
           />
-
+          <div>
-          <div className="mt-4">
             <Controller
               control={control}
               name="password"
@@ -106,13 +106,19 @@ export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (
                 </div>
               )}
             />
-          </div>
+            <p className="text-xs mt-3 text-onboarding-text-200 pb-2">
-          <p className="text-xs mt-2 text-onboarding-text-200">
+              Whatever you choose now will be your account{"'"}s password
-            {"Whatever you choose now will be your account's password"}
             </p>
+          </div>
           <Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Submitting..." : "Next Step"}
+            {isSubmitting ? "Submitting..." : "Next step"}
           </Button>
+          <p className="text-xs text-onboarding-text-200">
+            When you click the button above, you agree with our{" "}
+            <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+              <span className="font-semibold underline">terms and conditions of service.</span>
+            </Link>
+          </p>
         </div>
       </div>
     </form>

web/components/instance/setup-form/root.tsx

@@ -21,13 +21,11 @@ export const InstanceSetupFormRoot = () => {
   return (
     <>
       {setupStep === EInstanceSetupSteps.DONE ? (
-        <div>
         <InstanceSetupDone />
-        </div>
       ) : (
-        <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
+        <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200">
-          <div className={`px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto`}>
+          <div className="bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
-            <div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
+            <div className="mx-auto flex flex-col">
               {setupStep === EInstanceSetupSteps.EMAIL && (
                 <InstanceSetupEmailForm
                   handleNextStep={(email) => {

web/components/instance/setup-view.tsx

@@ -24,7 +24,7 @@ export const InstanceSetupView = observer(() => {
 
   return (
     <>
-      <div className={`bg-onboarding-gradient-100 h-full w-full`}>
+      <div className="bg-onboarding-gradient-100 h-full w-full flex flex-col">
         <div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
           <div className="flex gap-x-2 py-10 items-center">
             <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />

web/components/instance/sidebar-menu.tsx

@@ -54,7 +54,7 @@ export const InstanceAdminSidebarMenu = () => {
 
         return (
           <Link key={index} href={item.href}>
-            <span className="block w-full">
+            <div>
               <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                 <div
                   className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
@@ -84,7 +84,7 @@ export const InstanceAdminSidebarMenu = () => {
                   )}
                 </div>
               </Tooltip>
-            </span>
+            </div>
           </Link>
         );
       })}

web/components/issues/attachment/attachments.tsx

@@ -59,8 +59,7 @@ export const IssueAttachments = () => {
             key={file.id}
             className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
           >
-            <Link href={file.asset} target="_blank">
+            <Link href={file.asset} target="_blank" rel="noopener noreferrer">
-              <span>
               <div className="flex items-center gap-3">
                 <div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
                 <div className="flex flex-col gap-1">
@@ -85,7 +84,6 @@ export const IssueAttachments = () => {
                   </div>
                 </div>
               </div>
-              </span>
             </Link>
 
             <button

web/components/issues/form.tsx

@@ -226,9 +226,10 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
     reset({
       ...defaultValues,
+      project: projectId,
       ...initialData,
     });
-  }, [setFocus, reset]);
+  }, [setFocus, initialData, reset]);
 
   // update projectId in form when projectId changes
   useEffect(() => {

web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx

@@ -25,9 +25,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   const appliedFilters: IIssueFilterOptions = {};
   Object.entries(userFilters ?? {}).forEach(([key, value]) => {
     if (!value) return;
-
     if (Array.isArray(value) && value.length === 0) return;
-
     appliedFilters[key as keyof IIssueFilterOptions] = value;
   });
 

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -12,85 +12,73 @@ import { Button } from "@plane/ui";
 import { areFiltersDifferent } from "helpers/filter.helper";
 // types
 import { IIssueFilterOptions } from "types";
+import { EFilterType } from "store/issues/types";
 
 export const GlobalViewsAppliedFiltersRoot = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
 
   const {
     globalViews: globalViewsStore,
     globalViewFilters: globalViewFiltersStore,
-    project: projectStore,
+    project: { workspaceProjects },
-    workspace: workspaceStore,
+    workspace: { workspaceLabels },
     workspaceMember: { workspaceMembers },
+    workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
 
   const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
-  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array
   const appliedFilters: IIssueFilterOptions = {};
-  Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
+  Object.entries(userFilters ?? {}).forEach(([key, value]) => {
     if (!value) return;
-
     if (Array.isArray(value) && value.length === 0) return;
-
     appliedFilters[key as keyof IIssueFilterOptions] = value;
   });
 
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
-    if (!globalViewId) return;
-
-    // remove all values of the key if value is null
     if (!value) {
-      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: null });
-        [key]: null,
-      });
       return;
     }
 
-    // remove the passed value from the key
+    let newValues = userFilters?.[key] ?? [];
-    let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
     newValues = newValues.filter((val) => val !== value);
-
+    updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
-    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
-      [key]: newValues,
-    });
   };
 
   const handleClearAllFilters = () => {
-    if (!globalViewId || !storedFilters) return;
+    if (!workspaceSlug) return;
-
     const newFilters: IIssueFilterOptions = {};
-    Object.keys(storedFilters).forEach((key) => {
+    Object.keys(userFilters ?? {}).forEach((key) => {
       newFilters[key as keyof IIssueFilterOptions] = null;
     });
-
+    updateFilters(workspaceSlug, EFilterType.FILTERS, { ...newFilters });
-    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
-      ...newFilters,
-    });
   };
 
-  const handleUpdateView = () => {
+  // const handleUpdateView = () => {
-    if (!workspaceSlug || !globalViewId || !viewDetails) return;
+  //   if (!workspaceSlug || !globalViewId || !viewDetails) return;
 
-    globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
+  //   globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
-      query_data: {
+  //     query_data: {
-        ...viewDetails.query_data,
+  //       ...viewDetails.query_data,
-        filters: {
+  //       filters: {
-          ...(storedFilters ?? {}),
+  //         ...(storedFilters ?? {}),
-        },
+  //       },
-      },
+  //     },
-    });
+  //   });
-  };
+  // };
 
   // update stored filters when view details are fetched
-  useEffect(() => {
+  // useEffect(() => {
-    if (!globalViewId || !viewDetails) return;
+  //   if (!globalViewId || !viewDetails) return;
 
-    if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
+  //   if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
-      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
+  //     globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
-  }, [globalViewId, globalViewFiltersStore, viewDetails]);
+  // }, [globalViewId, globalViewFiltersStore, viewDetails]);
 
   // return if no filters are applied
   if (Object.keys(appliedFilters).length === 0) return null;
@@ -98,18 +86,19 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
   return (
     <div className="flex items-start justify-between gap-4 p-4">
       <AppliedFiltersList
-        appliedFilters={storedFilters ?? {}}
+        labels={workspaceLabels ?? undefined}
+        members={workspaceMembers?.map((m) => m.member)}
+        projects={workspaceProjects ?? undefined}
+        appliedFilters={appliedFilters ?? {}}
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
-        labels={workspaceStore.workspaceLabels ?? undefined}
-        members={workspaceMembers?.map((m) => m.member)}
-        projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
       />
-      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
+
+      {/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
         <Button variant="primary" onClick={handleUpdateView}>
           Update view
         </Button>
-      )}
+      )} */}
     </div>
   );
 });

web/components/issues/issue-layouts/index.ts

@@ -3,6 +3,9 @@ export * from "./filters";
 export * from "./empty-states";
 export * from "./quick-action-dropdowns";
 
+// roots
+export * from "./roots";
+
 // layouts
 export * from "./list";
 export * from "./calendar";
@@ -10,6 +13,5 @@ export * from "./gantt";
 export * from "./kanban";
 export * from "./spreadsheet";
 
+// properties
 export * from "./properties";
-
-export * from "./roots";

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -267,6 +267,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               enableQuickIssueCreate={enableQuickAdd}
               isReadOnly={!enableInlineEditing || !isEditingAllowed}
               currentStore={currentStore}
+              quickAddCallback={issueStore?.quickAddIssue}
               addIssuesToView={(issues) => {
                 console.log("kanban existingIds", issues);
 

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -89,6 +89,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyState
           projectId={issue?.project_detail?.id || null}
           value={issue?.state || null}
+          defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
           onChange={handleState}
           disabled={isReadOnly}
           hideDropdownArrow
@@ -110,6 +111,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyLabels
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
+          defaultOptions={issue?.label_details ? issue.label_details : []}
           onChange={handleLabel}
           disabled={isReadOnly}
           hideDropdownArrow
@@ -141,6 +143,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
         <IssuePropertyAssignee
           projectId={issue?.project_detail?.id || null}
           value={issue?.assignees || null}
+          defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
           hideDropdownArrow
           onChange={handleAssignee}
           disabled={isReadOnly}

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -91,6 +91,12 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   currentStore?: EProjectStore;
   enableQuickIssueCreate: boolean;
   isReadOnly: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssue,
+    viewId?: string
+  ) => Promise<IIssue | undefined>;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
   const {
@@ -118,6 +124,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     enableQuickIssueCreate,
     isReadOnly,
     addIssuesToView,
+    quickAddCallback,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -176,6 +183,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   isDragStarted={isDragStarted}
                   isReadOnly={isReadOnly}
                   addIssuesToView={addIssuesToView}
+                  quickAddCallback={quickAddCallback}
                 />
               </div>
             )}
@@ -208,6 +216,12 @@ export interface IKanBanSwimLanes {
   currentStore?: EProjectStore;
   addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
   enableQuickIssueCreate: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssue,
+    viewId?: string
+  ) => Promise<IIssue | undefined>;
   isReadOnly: boolean;
 }
 
@@ -236,6 +250,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     isReadOnly,
     currentStore,
     addIssuesToView,
+    quickAddCallback,
   } = props;
 
   return (
@@ -378,6 +393,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -406,6 +422,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -434,6 +451,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -462,6 +480,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -490,6 +509,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -518,6 +538,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -546,6 +567,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
 
@@ -574,6 +596,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           enableQuickIssueCreate={enableQuickIssueCreate}
           isReadOnly={isReadOnly}
+          quickAddCallback={quickAddCallback}
         />
       )}
     </div>

web/components/issues/issue-layouts/list/properties.tsx

@@ -60,6 +60,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
         <IssuePropertyState
           projectId={issue?.project_detail?.id || null}
           value={issue?.state || null}
+          defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
           hideDropdownArrow
           onChange={handleState}
           disabled={isReadonly}
@@ -81,6 +82,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
         <IssuePropertyLabels
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
+          defaultOptions={issue?.label_details ? issue.label_details : []}
           onChange={handleLabel}
           disabled={isReadonly}
           hideDropdownArrow
@@ -92,6 +94,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
         <IssuePropertyAssignee
           projectId={issue?.project_detail?.id || null}
           value={issue?.assignees || null}
+          defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
           hideDropdownArrow
           onChange={handleAssignee}
           disabled={isReadonly}

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -8,10 +8,12 @@ import { Check, ChevronDown, Search, User2 } from "lucide-react";
 import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
 import { Placement } from "@popperjs/core";
+import { IProjectMember } from "types";
 
 export interface IIssuePropertyAssignee {
   projectId: string | null;
   value: string[] | string;
+  defaultOptions?: any;
   onChange: (data: string[]) => void;
   disabled?: boolean;
   hideDropdownArrow?: boolean;
@@ -27,6 +29,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   const {
     projectId,
     value,
+    defaultOptions = [],
     onChange,
     disabled = false,
     hideDropdownArrow = false,
@@ -40,8 +43,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   // store
   const {
     workspace: workspaceStore,
-    project: projectStore,
+    projectMember: { projectMembers: _projectMembers, fetchProjectMembers },
-    workspaceMember: { workspaceMembers, fetchWorkspaceMembers },
   } = useMobxStore();
   const workspaceSlug = workspaceStore?.workspaceSlug;
   // states
@@ -50,20 +52,16 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [isLoading, setIsLoading] = useState<Boolean>(false);
 
-  // const fetchProjectMembers = () => {
-  //   setIsLoading(true);
-  //   if (workspaceSlug && projectId)
-  //     workspaceSlug &&
-  //       projectId &&
-  //       projectStore.fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
-  // };
-
   const getWorkspaceMembers = () => {
     setIsLoading(true);
-    if (workspaceSlug) workspaceSlug && fetchWorkspaceMembers(workspaceSlug).then(() => setIsLoading(false));
+    if (workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
   };
 
-  const options = (workspaceMembers ?? [])?.map((member) => ({
+  const updatedDefaultOptions: IProjectMember[] =
+    defaultOptions.map((member: any) => ({ member: { ...member } })) ?? [];
+  const projectMembers = _projectMembers ?? updatedDefaultOptions;
+
+  const options = projectMembers?.map((member) => ({
     value: member.member.id,
     query: member.member.display_name,
     content: (
@@ -82,7 +80,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
 
     // if multiple assignees
     if (Array.isArray(value)) {
-      const assignees = workspaceMembers?.filter((m) => value.includes(m.member.id));
+      const assignees = projectMembers?.filter((m) => value.includes(m.member.id));
 
       if (!assignees || assignees.length === 0) return "No Assignee";
 
@@ -93,7 +91,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
     }
 
     // if single assignee
-    const assignee = workspaceMembers?.find((m) => m.member.id === value)?.member;
+    const assignee = projectMembers?.find((m) => m.member.id === value)?.member;
 
     if (!assignee) return "No Assignee";
 
@@ -107,7 +105,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
         {value && value.length > 0 && Array.isArray(value) ? (
           <AvatarGroup showTooltip={false}>
             {value.map((assigneeId) => {
-              const member = workspaceMembers?.find((m) => m.member.id === assigneeId)?.member;
+              const member = projectMembers?.find((m) => m.member.id === assigneeId)?.member;
               if (!member) return null;
               return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
             })}
@@ -149,7 +147,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           className={`flex items-center justify-between gap-1 w-full text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
-          onClick={() => !workspaceMembers && getWorkspaceMembers()}
+          onClick={() => !projectMembers && getWorkspaceMembers()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

web/components/issues/issue-layouts/properties/labels.tsx

@@ -10,10 +10,12 @@ import { Check, ChevronDown, Search } from "lucide-react";
 // types
 import { Placement } from "@popperjs/core";
 import { RootStore } from "store/root";
+import { IIssueLabel } from "types";
 
 export interface IIssuePropertyLabels {
   projectId: string | null;
   value: string[];
+  defaultOptions?: any;
   onChange: (data: string[]) => void;
   disabled?: boolean;
   hideDropdownArrow?: boolean;
@@ -29,6 +31,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   const {
     projectId,
     value,
+    defaultOptions = [],
     onChange,
     disabled,
     hideDropdownArrow = false,
@@ -42,7 +45,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
   const {
     workspace: workspaceStore,
-    projectLabel: { fetchProjectLabels, projectLabels },
+    projectLabel: { fetchProjectLabels, labels },
   }: RootStore = useMobxStore();
   const workspaceSlug = workspaceStore?.workspaceSlug;
 
@@ -59,7 +62,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
   if (!value) return null;
 
-  const options = (projectLabels ? projectLabels : []).map((label) => ({
+  let projectLabels: IIssueLabel[] = defaultOptions;
+  const storeLabels = projectId && labels ? labels[projectId] : [];
+  if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
+
+  const options = projectLabels.map((label) => ({
     value: label.id,
     query: label.name,
     content: (
@@ -95,7 +102,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
-            {(projectLabels ? projectLabels : [])
+            {projectLabels
               ?.filter((l) => value.includes(l.id))
               .map((label) => (
                 <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
@@ -123,7 +130,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             <Tooltip
               position="top"
               tooltipHeading="Labels"
-              tooltipContent={(projectLabels ? projectLabels : [])
+              tooltipContent={projectLabels
                 ?.filter((l) => value.includes(l.id))
                 .map((l) => l.name)
                 .join(", ")}
@@ -167,7 +174,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={() => !projectLabels && fetchLabels()}
+          onClick={() => !storeLabels && fetchLabels()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -200,8 +207,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                   key={option.value}
                   value={option.value}
                   className={({ selected }) =>
-                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                     ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      selected ? "text-custom-text-100" : "text-custom-text-200"
+                    }`
                   }
                 >
                   {({ selected }) => (

web/components/issues/issue-layouts/properties/state.tsx

@@ -17,6 +17,7 @@ import { RootStore } from "store/root";
 export interface IIssuePropertyState {
   projectId: string | null;
   value: any | string | null;
+  defaultOptions?: any;
   onChange: (state: IState) => void;
   disabled?: boolean;
   hideDropdownArrow?: boolean;
@@ -30,6 +31,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
   const {
     projectId,
     value,
+    defaultOptions = [],
     onChange,
     disabled,
     hideDropdownArrow = false,
@@ -47,10 +49,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [isLoading, setIsLoading] = useState<Boolean>(false);
 
-  const projectStates: IState[] = [];
+  let projectStates: IState[] = defaultOptions;
-  const projectStatesByGroup = projectStateStore.groupedProjectStates;
+  const storeStates = projectId ? projectStateStore.states[projectId] : [];
-  if (projectStatesByGroup)
+  if (storeStates && storeStates.length > 0) projectStates = storeStates;
-    for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);
 
   const fetchProjectStates = () => {
     setIsLoading(true);
@@ -120,7 +121,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
               className={`flex items-center justify-between h-5 gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${buttonClassName}`}
-              onClick={() => !projectStatesByGroup && fetchProjectStates()}
+              onClick={() => !storeStates && fetchProjectStates()}
             >
               {label}
               {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+import { IQuickActionProps } from "../list/list-view-types";
+import { EProjectStore } from "store/command-palette.store";
+
+export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
+  const { issue, handleDelete, handleUpdate } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
+        }}
+        currentStore={EProjectStore.PROJECT}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};

web/components/issues/issue-layouts/quick-action-dropdowns/index.ts

@@ -2,3 +2,4 @@ export * from "./cycle-issue";
 export * from "./module-issue";
 export * from "./project-issue";
 export * from "./archived-issue";
+export * from "./all-issue";

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot } from "components/issues";
+import { SpreadsheetView } from "components/issues/issue-layouts";
+import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+import { EIssueActions } from "../types";
+
+import { EFilterType, TUnGroupedIssues } from "store/issues/types";
+
+type Props = {
+  type?: TStaticViewTypes | null;
+};
+
+export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
+  const { type = null } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
+
+  const currentIssueView = type ?? globalViewId;
+
+  const {
+    workspaceMember: { workspaceMembers },
+    workspace: { workspaceLabels },
+    globalViews: { fetchAllGlobalViews },
+    workspaceGlobalIssues: { loader, getIssues, getIssuesIds, fetchIssues, updateIssue, removeIssue },
+    workspaceGlobalIssuesFilter: { currentView, issueFilters, fetchFilters, updateFilters, setCurrentView },
+  } = useMobxStore();
+
+  useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
+    if (workspaceSlug) {
+      await fetchAllGlobalViews(workspaceSlug);
+    }
+  });
+
+  useSWR(
+    workspaceSlug && currentIssueView ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${currentIssueView}` : null,
+    async () => {
+      if (workspaceSlug && currentIssueView) {
+        setCurrentView(currentIssueView);
+        await fetchAllGlobalViews(workspaceSlug);
+        await fetchFilters(workspaceSlug, currentIssueView);
+        await fetchIssues(workspaceSlug, currentIssueView, getIssues ? "mutation" : "init-loader");
+      }
+    }
+  );
+
+  const isEditingAllowed = false;
+
+  const issuesResponse = getIssues;
+  const issueIds = (getIssuesIds ?? []) as TUnGroupedIssues;
+  const issues = issueIds?.filter((id) => id && issuesResponse?.[id]).map((id) => issuesResponse?.[id]);
+
+  const issueActions = {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
+      const projectId = issue.project;
+      if (!workspaceSlug || !projectId) return;
+
+      await updateIssue(workspaceSlug, projectId, issue.id, issue, currentIssueView);
+    },
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
+      const projectId = issue.project;
+      if (!workspaceSlug || !projectId) return;
+
+      await removeIssue(workspaceSlug, projectId, issue.id, currentIssueView);
+    },
+  };
+
+  const handleIssues = useCallback(
+    async (issue: IIssue, action: EIssueActions) => {
+      if (action === EIssueActions.UPDATE) await issueActions[action]!(issue);
+      if (action === EIssueActions.DELETE) await issueActions[action]!(issue);
+    },
+    [getIssues]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
+    },
+    [updateFilters, workspaceSlug]
+  );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      {currentView != currentIssueView && loader === "init-loader" ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <GlobalViewsAppliedFiltersRoot />
+
+          {Object.keys(getIssues ?? {}).length == 0 && !loader ? (
+            <>{/* <GlobalViewEmptyState /> */}</>
+          ) : (
+            <div className="w-full h-full relative overflow-auto">
+              <SpreadsheetView
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+                issues={issues as IIssueUnGroupedStructure}
+                quickActions={(issue) => (
+                  <AllIssueQuickActions
+                    issue={issue}
+                    handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
+                    handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
+                  />
+                )}
+                members={workspaceMembers?.map((m) => m.member)}
+                labels={workspaceLabels || undefined}
+                handleIssues={handleIssues}
+                disableUserActions={isEditingAllowed}
+                viewId={currentIssueView}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/roots/global-view-layout-root.tsx

@@ -1,118 +0,0 @@
-import React, { useCallback } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
-// ui
-import { Spinner } from "@plane/ui";
-// types
-import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
-
-type Props = {
-  type?: TStaticViewTypes;
-};
-
-export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
-  const { type } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const {
-    globalViews: globalViewsStore,
-    globalViewIssues: globalViewIssuesStore,
-    globalViewFilters: globalViewFiltersStore,
-    workspaceFilter: workspaceFilterStore,
-    workspace: workspaceStore,
-    workspaceMember: { workspaceMembers },
-    issueDetail: issueDetailStore,
-    project: projectStore,
-  } = useMobxStore();
-
-  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
-
-  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
-
-  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
-
-  useSWR(
-    workspaceSlug && globalViewId && viewDetails ? `GLOBAL_VIEW_ISSUES_${globalViewId.toString()}` : null,
-    workspaceSlug && globalViewId && viewDetails
-      ? () => {
-          globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
-        }
-      : null
-  );
-
-  useSWR(
-    workspaceSlug && type ? `GLOBAL_VIEW_ISSUES_${type.toString()}` : null,
-    workspaceSlug && type
-      ? () => {
-          globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
-        }
-      : null
-  );
-
-  const handleDisplayFiltersUpdate = useCallback(
-    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug) return;
-
-      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
-        display_filters: updatedDisplayFilter,
-      });
-    },
-    [workspaceFilterStore, workspaceSlug]
-  );
-
-  const handleUpdateIssue = useCallback(
-    (issue: IIssue, data: Partial<IIssue>) => {
-      if (!workspaceSlug) return;
-
-      const payload = {
-        ...issue,
-        ...data,
-      };
-
-      globalViewIssuesStore.updateIssueStructure(type ?? globalViewId!.toString(), payload);
-      // issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, data);
-    },
-    [globalViewId, globalViewIssuesStore, workspaceSlug, issueDetailStore]
-  );
-
-  const issues = type
-    ? globalViewIssuesStore.viewIssues?.[type]
-    : globalViewId
-    ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
-    : undefined;
-
-  if (!issues)
-    return (
-      <div className="h-full w-full grid place-items-center">
-        <Spinner />
-      </div>
-    );
-
-  return (
-    <div className="relative w-full h-full flex flex-col overflow-hidden">
-      <GlobalViewsAppliedFiltersRoot />
-      {issues?.length === 0 || !projects || projects?.length === 0 ? (
-        <GlobalViewEmptyState />
-      ) : (
-        <div className="h-full w-full overflow-auto">
-          {/* <SpreadsheetView
-            displayProperties={workspaceFilterStore.workspaceDisplayProperties}
-            displayFilters={workspaceFilterStore.workspaceDisplayFilters}
-            handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
-            issues={issues}
-            members={workspaceMembers?.map((m) => m.member)}
-            labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
-            disableUserActions={false}
-          /> */}
-        </div>
-      )}
-    </div>
-  );
-});

web/components/issues/issue-layouts/roots/index.ts

@@ -1,5 +1,5 @@
 export * from "./cycle-layout-root";
-export * from "./global-view-layout-root";
+export * from "./all-issue-layout-root";
 export * from "./module-layout-root";
 export * from "./project-layout-root";
 export * from "./project-view-layout-root";

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -26,20 +26,12 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
     projectIssuesFilter: { issueFilters, fetchFilters },
   } = useMobxStore();
 
-  useSWR(
+  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
-    workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
-    async () => {
     if (workspaceSlug && projectId) {
       await fetchFilters(workspaceSlug, projectId);
       await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
     }
-    },
+  });
-    {
-      onErrorRetry: (error) => {
-        if (error.status === 404) return;
-      },
-    }
-  );
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 

web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx

@@ -25,6 +25,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
       <IssuePropertyAssignee
         projectId={issue.project_detail?.id ?? null}
         value={issue.assignees}
+        defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
         onChange={(data) => onChange({ assignees: data })}
         className="h-full w-full"
         buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "

web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -27,6 +27,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
       <IssuePropertyLabels
         projectId={issue.project_detail?.id ?? null}
         value={issue.labels}
+        defaultOptions={issue?.label_details ? issue.label_details : []}
         onChange={(data) => onChange({ labels: data })}
         className="h-full w-full"
         buttonClassName="px-2.5 h-full"

web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx

@@ -27,6 +27,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
       <IssuePropertyState
         projectId={issue.project_detail?.id ?? null}
         value={issue.state_detail.id}
+        defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
         className="h-full w-full"
         buttonClassName="!shadow-none !border-0 h-full w-full"

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -77,8 +77,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     };
   }, []);
 
-  console.log("spreadsheet issues", issues);
-
   return (
     <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
       <div className="h-full w-full flex flex-col">

web/components/issues/main-content.tsx

@@ -108,7 +108,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
             <Link
               href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
             >
-              <a className="flex items-center gap-3">
+              <div className="flex items-center gap-3">
                 <div className="flex items-center gap-2.5">
                   <span
                     className="block h-2 w-2 rounded-full"
@@ -123,7 +123,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
                 <span className="truncate text-custom-text-100">
                   {issueDetails.parent_detail?.name.substring(0, 50)}
                 </span>
-              </a>
+              </div>
             </Link>
 
             <CustomMenu ellipsis optionsClassName="px-1.5">

web/components/issues/select/cycle.tsx

@@ -104,7 +104,8 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
+                <>
+                  {filteredOptions.map((option) => (
                     <Combobox.Option
                       key={option.value}
                       value={option.value}
@@ -121,7 +122,21 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
                         </>
                       )}
                     </Combobox.Option>
-                ))
+                  ))}
+                  <Combobox.Option
+                    key="none"
+                    value=""
+                    className={({ active }) =>
+                      `flex items-center justify-between gap-2 ${
+                        active ? "bg-custom-background-80" : ""
+                      }  cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
+                    }
+                  >
+                    <div className="flex items-center gap-1.5 truncate">
+                      <span className="truncate flex-grow">None</span>
+                    </div>
+                  </Combobox.Option>
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>

web/components/issues/select/module.tsx

@@ -98,7 +98,8 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
+                <>
+                  {filteredOptions.map((option) => (
                     <Combobox.Option
                       key={option.value}
                       value={option.value}
@@ -115,7 +116,21 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
                         </>
                       )}
                     </Combobox.Option>
-                ))
+                  ))}
+                  <Combobox.Option
+                    key="none"
+                    value=""
+                    className={({ active }) =>
+                      `flex items-center justify-between gap-2 ${
+                        active ? "bg-custom-background-80" : ""
+                      }  cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
+                    }
+                  >
+                    <div className="flex items-center gap-1.5 truncate">
+                      <span className="truncate flex-grow">None</span>
+                    </div>
+                  </Combobox.Option>
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>

web/components/modules/module-card-item.tsx

@@ -139,7 +139,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <span className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+        <div className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
           <div>
             <div className="flex items-center justify-between gap-2">
               <Tooltip tooltipContent={module.name} position="top">
@@ -249,7 +249,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               </div>
             </div>
           </div>
-        </span>
+        </div>
       </Link>
     </>
   );

web/components/modules/module-list-item.tsx

@@ -128,7 +128,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <span className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+        <div className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
           <div className="flex items-center gap-3 w-full truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">
@@ -225,7 +225,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </CustomMenu.MenuItem>
             </CustomMenu>
           </div>
-        </span>
+        </div>
       </Link>
     </>
   );

web/components/onboarding/join-workspaces.tsx

@@ -24,7 +24,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount
   } = useForm<IWorkspace>({
     defaultValues: {
       name: "",
-      slug: `${window.location.host}/`,
+      slug: "",
     },
     mode: "onChange",
   });

web/components/onboarding/onboarding-sidebar.tsx

@@ -229,9 +229,7 @@ export const OnboardingSidebar: React.FC<Props> = (props) => {
       <div className={`space-y-1 p-4`}>
         <div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
           <div
-            className={`relative flex items-center justify-between w-full rounded gap-1 group
+            className={`relative flex items-center justify-between w-full rounded gap-1 group px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border`}
-             px-3 shadow-custom-shadow-2xs border-onboarding-border-100 border 
-          `}
           >
             <div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none`}>
               <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />

web/components/onboarding/workspace.tsx

@@ -40,8 +40,6 @@ export const Workspace: React.FC<Props> = (props) => {
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     if (isSubmitting) return;
-    const slug = formData.slug.split("/");
-    formData.slug = slug[slug.length - 1];
 
     await workspaceService
       .workspaceSlugCheck(formData.slug)
@@ -118,11 +116,7 @@ export const Workspace: React.FC<Props> = (props) => {
                 onChange={(event) => {
                   onChange(event.target.value);
                   setValue("name", event.target.value);
-                  if (window && window.location.host) {
+                  setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
-                    const host = window.location.host;
-                    const slug = event.currentTarget.value.split("/");
-                    setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
-                  }
                 }}
                 placeholder="Enter workspace name..."
                 ref={ref}
@@ -137,26 +131,25 @@ export const Workspace: React.FC<Props> = (props) => {
         <Controller
           control={control}
           name="slug"
-          render={({ field: { value, ref } }) => (
+          render={({ field: { value, ref, onChange } }) => (
-            <div className="flex items-center relative rounded-md bg-onboarding-background-200">
+            <div
+              className={`flex items-center px-3 relative rounded-md bg-onboarding-background-200 border ${
+                invalidSlug ? "border-red-500" : "border-onboarding-border-100"
+              } `}
+            >
+              <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
               <Input
                 id="slug"
                 name="slug"
                 type="text"
                 value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                 onChange={(e) => {
-                  const host = window.location.host;
+                  /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true);
-                  const slug = e.currentTarget.value.split("/");
+                  onChange(e.target.value.toLowerCase());
-                  if (slug.length > 1) {
-                    /^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
-                    setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
-                  } else {
-                    setValue("slug", `${host}/`);
-                  }
                 }}
                 ref={ref}
                 hasError={Boolean(errors.slug)}
-                className="w-full h-[46px] border-onboarding-border-100"
+                className="w-full h-[46px] !px-0 border-none"
               />
             </div>
           )}

web/components/page-views/signin.tsx

@@ -13,7 +13,7 @@ import { SignInRoot } from "components/account";
 import { Loader, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-import signInIssues from "public/onboarding/onboarding-issues.svg";
+import latestFeatures from "public/onboarding/onboarding-pages.svg";
 // types
 import { IUser, IUserSettings } from "types";
 
@@ -108,26 +108,22 @@ export const SignInView = observer(() => {
                     <Lightbulb className="h-7 w-7 mr-2 mx-3" />
                     <p className="text-sm text-left text-onboarding-text-100">
                       Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
-                      <Link href="https://plane.so/changelog">
+                      <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-                        <a
+                        <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="font-medium text-sm underline hover:cursor-pointer"
-                        >
-                          Learn more
-                        </a>
                       </Link>
                     </p>
                   </div>
-                  <div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
+                  <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
+                    <div className="h-[90%]">
                       <Image
-                      src={signInIssues}
+                        src={latestFeatures}
                         alt="Plane Issues"
-                      className={`flex object-cover rounded-md ${
+                        className={`rounded-md h-full ml-8 -mt-2 ${
                           resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
                         } `}
                       />
                     </div>
+                  </div>
                 </>
               )}
             </div>

web/components/pages/pages-list/list-item.tsx

@@ -157,7 +157,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
       <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} data={page} />
       <li>
         <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
-          <span>
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex overflow-hidden items-center gap-2">
@@ -295,7 +294,6 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
               </div>
             </div>
           </div>
-          </span>
         </Link>
       </li>
     </>

web/components/pages/pages-list/list-view.tsx

@@ -5,12 +5,12 @@ import { Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { EmptyState } from "components/common";
 import { PagesListItem } from "./list-item";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Loader } from "@plane/ui";
 // images
-import emptyPage from "public/empty-state/page.svg";
+import emptyPage from "public/empty-state/empty_page.webp";
 // types
 import { IPage } from "types";
 
@@ -41,13 +41,19 @@ export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
               ))}
             </ul>
           ) : (
-            <EmptyState
+            <NewEmptyState
-              title="Have your thoughts in place"
+              title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
-              description="You can think of Pages as an AI-powered notepad."
+              description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
               image={emptyPage}
+              comicBox={{
+                title: "A page can be a doc or a doc of docs.",
+                description:
+                  "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
+                direction: "right",
+              }}
               primaryButton={{
                 icon: <Plus className="h-4 w-4" />,
-                text: "New Page",
+                text: "Create your first page",
                 onClick: () => commandPaletteStore.toggleCreatePageModal(true),
               }}
             />

web/components/pages/pages-list/recent-pages-list.tsx

@@ -5,11 +5,11 @@ import { Plus } from "lucide-react";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { PagesListView } from "components/pages/pages-list";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Loader } from "@plane/ui";
 // assets
-import emptyPage from "public/empty-state/page.svg";
+import emptyPage from "public/empty-state/empty_page.webp";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 
@@ -51,13 +51,19 @@ export const RecentPagesList: FC = observer(() => {
         </>
       ) : (
         <>
-          <EmptyState
+          <NewEmptyState
-            title="Have your thoughts in place"
+            title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
-            description="You can think of Pages as an AI-powered notepad."
+            description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
             image={emptyPage}
+            comicBox={{
+              title: "A page can be a doc or a doc of docs.",
+              description:
+                "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
+              direction: "right",
+            }}
             primaryButton={{
               icon: <Plus className="h-4 w-4" />,
-              text: "New Page",
+              text: "Create your first page",
               onClick: () => commandPaletteStore.toggleCreatePageModal(true),
             }}
           />

web/components/views/modal.tsx

@@ -8,6 +8,7 @@ import useToast from "hooks/use-toast";
 import { ProjectViewForm } from "components/views";
 // types
 import { IProjectView } from "types";
+import { debounce } from "lodash";
 
 type Props = {
   data?: IProjectView | null;
@@ -33,7 +34,9 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     await projectViewsStore
       .createView(workspaceSlug, projectId, payload)
       .then(() => {
+        console.log("after calling store");
         handleClose();
+        console.log("after closing");
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -67,6 +70,8 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     else await updateView(formData);
   };
 
+  const debouncedFormSubmit = debounce(handleFormSubmit, 10, { leading: false, trailing: true });
+
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -97,7 +102,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
                 <ProjectViewForm
                   data={data}
                   handleClose={handleClose}
-                  handleFormSubmit={handleFormSubmit}
+                  handleFormSubmit={debouncedFormSubmit as (formData: IProjectView) => Promise<void>}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>

web/components/views/view-list-item.tsx

@@ -57,7 +57,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
         <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
-          <span className="flex items-center justify-between relative rounded p-4 w-full">
+          <div className="flex items-center justify-between relative rounded p-4 w-full">
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center gap-4 overflow-hidden">
                 <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@@ -128,7 +128,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                 </div>
               </div>
             </div>
-          </span>
+          </div>
         </Link>
       </div>
     </>

web/components/views/views-list.tsx

@@ -6,11 +6,11 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectViewListItem } from "components/views";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Input, Loader } from "@plane/ui";
 // assets
-import emptyView from "public/empty-state/view.svg";
+import emptyView from "public/empty-state/empty_view.webp";
 // icons
 import { Plus, Search } from "lucide-react";
 
@@ -59,13 +59,18 @@ export const ProjectViewsList = observer(() => {
           )}
         </div>
       ) : (
-        <EmptyState
+        <NewEmptyState
-          title="Get focused with views"
+          title="Save filtered views for your project. Create as many as you need."
-          description="Views aid in saving your issues by applying various filters and grouping options."
+          description="Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best."
           image={emptyView}
+          comicBox={{
+            title: "Views work atop Issue properties.",
+            description: "You can create a view from here with as many properties as filters as you see fit.",
+            direction: "right",
+          }}
           primaryButton={{
             icon: <Plus size={14} strokeWidth={2} />,
-            text: "New View",
+            text: "Build your first view",
             onClick: () => commandPaletteStore.toggleCreateViewModal(true),
           }}
         />

web/components/workspace/views/default-view-list-item.tsx

@@ -18,7 +18,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
   return (
     <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
       <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
-        <span className="flex items-center justify-between relative rounded px-5 py-4 w-full">
+        <div className="flex items-center justify-between relative rounded px-5 py-4 w-full">
           <div className="flex items-center justify-between w-full">
             <div className="flex items-center gap-4">
               <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@@ -29,7 +29,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
               </div>
             </div>
           </div>
-        </span>
+        </div>
       </Link>
     </div>
   );

web/components/workspace/views/header.tsx

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -21,11 +19,6 @@ export const GlobalViewsHeader: React.FC = observer(() => {
 
   const { globalViews: globalViewsStore } = useMobxStore();
 
-  useSWR(
-    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
-    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
-  );
-
   // bring the active view to the centre of the header
   useEffect(() => {
     if (!globalViewId) return;

web/components/workspace/views/view-list-item.tsx

@@ -32,7 +32,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
       <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
         <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
-          <span className="flex items-center justify-between relative rounded p-4 w-full">
+          <div className="flex items-center justify-between relative rounded p-4 w-full">
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center gap-4">
                 <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
@@ -77,7 +77,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                 </div>
               </div>
             </div>
-          </span>
+          </div>
         </Link>
       </div>
     </>

web/constants/issue.ts

@@ -113,7 +113,7 @@ export const ISSUE_EXTRA_OPTIONS: {
   title: string;
 }[] = [
   { key: "sub_issue", title: "Show sub-issues" }, // in spreadsheet its always false
-  { key: "show_empty_groups", title: "Show empty states" }, // filter on front-end
+  { key: "show_empty_groups", title: "Show empty groups" }, // filter on front-end
 ];
 
 export const ISSUE_LAYOUTS: {
@@ -297,7 +297,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {

web/layouts/admin-layout/layout.tsx

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { observer } from "mobx-react-lite";
 // layouts
 import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
 // components
@@ -12,20 +13,14 @@ export interface IInstanceAdminLayout {
   children: ReactNode;
 }
 
-export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
+export const InstanceAdminLayout: FC<IInstanceAdminLayout> = observer((props) => {
   const { children } = props;
   // store
   const {
     instance: { instance },
-    user: { currentUser },
   } = useMobxStore();
-  // fetch
 
-  console.log("instance", instance);
+  if (instance?.is_setup_done === false) return <InstanceSetupView />;
-
-  if (instance?.is_setup_done === false) {
-    return <InstanceSetupView />;
-  }
 
   return (
     <>
@@ -46,4 +41,4 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
       </UserAuthWrapper>
     </>
   );
-};
+});

web/layouts/auth-layout/user-wrapper.tsx

@@ -21,7 +21,6 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
       fetchCurrentUser,
       fetchCurrentUserInstanceAdminStatus,
       fetchCurrentUserSettings,
-      
     },
     workspace: { fetchWorkspaces },
   } = useMobxStore();

web/layouts/instance-layout/index.tsx

@@ -24,7 +24,9 @@ const InstanceLayout: FC<Props> = observer(({ children }) => {
   const router = useRouter();
   const isGodMode = router.pathname.includes("god-mode");
 
-  useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+  });
 
   useEffect(() => {
     if (instance?.is_activated === false) {

web/layouts/settings-layout/profile/sidebar.tsx

@@ -103,7 +103,7 @@ export const ProfileLayoutSidebar = observer(() => {
     >
       <div className="h-full w-full flex flex-col gap-y-4">
         <Link href={`/${redirectWorkspaceSlug}`}>
-          <a
+          <div
             className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
               sidebarCollapsed ? "justify-center" : ""
             }`}
@@ -114,7 +114,7 @@ export const ProfileLayoutSidebar = observer(() => {
             {!sidebarCollapsed && (
               <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
             )}
-          </a>
+          </div>
         </Link>
         <div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
@@ -125,8 +125,7 @@ export const ProfileLayoutSidebar = observer(() => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
               return (
-                <Link key={link.key} href={link.href}>
+                <Link key={link.key} href={link.href} className="block w-full">
-                  <a className="block w-full">
                   <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                     <div
                       className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
@@ -139,7 +138,6 @@ export const ProfileLayoutSidebar = observer(() => {
                       {!sidebarCollapsed && link.label}
                     </div>
                   </Tooltip>
-                  </a>
                 </Link>
               );
             })}
@@ -189,8 +187,7 @@ export const ProfileLayoutSidebar = observer(() => {
           )}
           <div className="mt-1.5">
             {WORKSPACE_ACTION_LINKS.map((link) => (
-              <Link key={link.key} href={link.href}>
+              <Link className="block w-full" key={link.key} href={link.href}>
-                <a className="block w-full">
                 <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                   <div
                     className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
@@ -201,7 +198,6 @@ export const ProfileLayoutSidebar = observer(() => {
                     {!sidebarCollapsed && link.label}
                   </div>
                 </Tooltip>
-                </a>
               </Link>
             ))}
           </div>

web/layouts/settings-layout/project/sidebar.tsx

@@ -50,7 +50,6 @@ export const ProjectSettingsSidebar = () => {
         <div className="flex flex-col gap-1 w-full">
           {projectLinks.map((link) => (
             <Link key={link.href} href={link.href}>
-              <span>
               <div
                 className={`px-4 py-2 text-sm font-medium rounded-md ${
                   (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
@@ -60,7 +59,6 @@ export const ProjectSettingsSidebar = () => {
               >
                 {link.label}
               </div>
-              </span>
             </Link>
           ))}
         </div>

web/pages/[workspaceSlug]/analytics.tsx

@@ -8,11 +8,11 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 import { WorkspaceAnalyticsHeader } from "components/headers";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // icons
 import { Plus } from "lucide-react";
 // assets
-import emptyAnalytics from "public/empty-state/analytics.svg";
+import emptyAnalytics from "public/empty-state/empty_analytics.webp";
 // constants
 import { ANALYTICS_TABS } from "constants/analytics";
 // type
@@ -58,13 +58,20 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
         </div>
       ) : (
         <>
-          <EmptyState
+          <NewEmptyState
-            title="You can see your all projects' analytics here"
+            title="Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster."
-            description="Let's create your first project and analyze the stats with various graphs."
+            description="See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time."
             image={emptyAnalytics}
+            comicBox={{
+              title: "Analytics works best with Cycles + Modules",
+              description:
+                "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
+              direction: "right",
+              extraPadding: true,
+            }}
             primaryButton={{
               icon: <Plus className="h-4 w-4" />,
-              text: "New Project",
+              text: "Create Cycles and Modules first",
               onClick: () => {
                 setTrackElement("ANALYTICS_EMPTY_STATE");
                 toggleCreateProjectModal(true);

web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx

@@ -1,41 +1,21 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
 import { GlobalViewsHeader } from "components/workspace";
-import { GlobalViewLayoutRoot } from "components/issues";
+import { AllIssueLayoutRoot } from "components/issues";
 import { GlobalIssuesHeader } from "components/headers";
 // types
 import { NextPageWithLayout } from "types/app";
 
-const GlobalViewIssuesPage: NextPageWithLayout = () => {
+const GlobalViewIssuesPage: NextPageWithLayout = () => (
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const {
-    globalViews: { fetchGlobalViewDetails },
-  } = useMobxStore();
-
-  useSWR(
-    workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
-    workspaceSlug && globalViewId
-      ? () => fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
-      : null
-  );
-
-  return (
   <div className="h-full overflow-hidden bg-custom-background-100">
     <div className="h-full w-full flex flex-col border-b border-custom-border-300">
       <GlobalViewsHeader />
-        <GlobalViewLayoutRoot />
+      <AllIssueLayoutRoot />
     </div>
   </div>
-  );
+);
-};
 
 GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;

web/pages/[workspaceSlug]/workspace-views/all-issues.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 // components
 import { GlobalViewsHeader } from "components/workspace";
 import { GlobalIssuesHeader } from "components/headers";
-import { GlobalViewLayoutRoot } from "components/issues";
+import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // types
@@ -12,7 +12,7 @@ const GlobalViewAllIssuesPage: NextPageWithLayout = () => (
   <div className="h-full overflow-hidden bg-custom-background-100">
     <div className="h-full w-full flex flex-col border-b border-custom-border-300">
       <GlobalViewsHeader />
-      <GlobalViewLayoutRoot type="all-issues" />
+      <AllIssueLayoutRoot type="all-issues" />
     </div>
   </div>
 );

web/pages/[workspaceSlug]/workspace-views/assigned.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 // components
 import { GlobalViewsHeader } from "components/workspace";
 import { GlobalIssuesHeader } from "components/headers";
-import { GlobalViewLayoutRoot } from "components/issues";
+import { AllIssueLayoutRoot } from "components/issues/issue-layouts";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // types
@@ -12,7 +12,7 @@ const GlobalViewAssignedIssuesPage: NextPageWithLayout = () => (
   <div className="h-full overflow-hidden bg-custom-background-100">
     <div className="h-full w-full flex flex-col border-b border-custom-border-300">
       <GlobalViewsHeader />
-      <GlobalViewLayoutRoot type="assigned" />
+      <AllIssueLayoutRoot type="assigned" />
     </div>
   </div>
 );

web/pages/[workspaceSlug]/workspace-views/created.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 // components
 import { GlobalViewsHeader } from "components/workspace";
 import { GlobalIssuesHeader } from "components/headers";
-import { GlobalViewLayoutRoot } from "components/issues";
+import { AllIssueLayoutRoot } from "components/issues";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // types
@@ -12,7 +12,7 @@ const GlobalViewCreatedIssuesPage: NextPageWithLayout = () => (
   <div className="h-full overflow-hidden bg-custom-background-100">
     <div className="h-full w-full flex flex-col border-b border-custom-border-300">
       <GlobalViewsHeader />
-      <GlobalViewLayoutRoot type="created" />
+      <AllIssueLayoutRoot type="created" />
     </div>
   </div>
 );

web/pages/[workspaceSlug]/workspace-views/subscribed.tsx

@@ -4,7 +4,7 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { GlobalViewsHeader } from "components/workspace";
 import { GlobalIssuesHeader } from "components/headers";
-import { GlobalViewLayoutRoot } from "components/issues";
+import { AllIssueLayoutRoot } from "components/issues";
 // types
 import { NextPageWithLayout } from "types/app";
 
@@ -12,7 +12,7 @@ const GlobalViewSubscribedIssuesPage: NextPageWithLayout = () => (
   <div className="h-full overflow-hidden bg-custom-background-100">
     <div className="h-full w-full flex flex-col border-b border-custom-border-300">
       <GlobalViewsHeader />
-      <GlobalViewLayoutRoot type="subscribed" />
+      <AllIssueLayoutRoot type="subscribed" />
     </div>
   </div>
 );

web/pages/accounts/password.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, useCallback } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -15,11 +15,14 @@ import DefaultLayout from "layouts/default-layout";
 import { Button, Input } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-import signInIssues from "public/onboarding/onboarding-issues.svg";
+import latestFeatures from "public/onboarding/onboarding-pages.svg";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // type
 import { NextPageWithLayout } from "types/app";
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IUser, IUserSettings } from "types";
 
 type TResetPasswordFormValues = {
   email: string;
@@ -42,6 +45,10 @@ const HomePage: NextPageWithLayout = () => {
   const { resolvedTheme } = useTheme();
   // toast
   const { setToastAlert } = useToast();
+  // mobx store
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+  } = useMobxStore();
   // form info
   const {
     control,
@@ -54,6 +61,31 @@ const HomePage: NextPageWithLayout = () => {
     },
   });
 
+  const handleSignInRedirection = useCallback(
+    async (user: IUser) => {
+      // if the user is not onboarded, redirect them to the onboarding page
+      if (!user.is_onboarded) {
+        router.push("/onboarding");
+        return;
+      }
+
+      // if the user is onboarded, fetch their last workspace details
+      await fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
+        const workspaceSlug =
+          userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+        if (workspaceSlug) router.push(`/${workspaceSlug}`);
+        else router.push("/profile");
+      });
+    },
+    [fetchCurrentUserSettings, router]
+  );
+
+  const mutateUserInfo = useCallback(async () => {
+    await fetchCurrentUser().then(async (user) => {
+      await handleSignInRedirection(user);
+    });
+  }, [fetchCurrentUser, handleSignInRedirection]);
+
   const handleResetPassword = async (formData: TResetPasswordFormValues) => {
     if (!uidb64 || !token || !email) return;
 
@@ -61,7 +93,10 @@ const HomePage: NextPageWithLayout = () => {
       new_password: formData.password,
     };
 
-    await authService.resetPassword(uidb64.toString(), token.toString(), payload).catch((err) =>
+    await authService
+      .resetPassword(uidb64.toString(), token.toString(), payload)
+      .then(() => mutateUserInfo())
+      .catch((err) =>
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -82,7 +117,7 @@ const HomePage: NextPageWithLayout = () => {
       <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
         <div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
           <div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
-            <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
+            <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
               Let{"'"}s get a new password
             </h1>
             <form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
@@ -123,6 +158,7 @@ const HomePage: NextPageWithLayout = () => {
                       hasError={Boolean(errors.password)}
                       placeholder="Choose password"
                       className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
+                      minLength={8}
                     />
                   )}
                 />
@@ -143,7 +179,7 @@ const HomePage: NextPageWithLayout = () => {
               <p className="text-xs text-onboarding-text-200">
                 When you click the button above, you agree with our{" "}
                 <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-                  <a className="font-semibold underline">terms and conditions of service.</a>
+                  <span className="font-semibold underline">terms and conditions of service.</span>
                 </Link>
               </p>
             </form>
@@ -152,22 +188,17 @@ const HomePage: NextPageWithLayout = () => {
             <Lightbulb className="h-7 w-7 mr-2 mx-3" />
             <p className="text-sm text-left text-onboarding-text-100">
               Try the latest features, like Tiptap editor, to write compelling responses.{" "}
-              <Link href="https://plane.so/changelog">
+              <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-                <a
+                <span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="font-medium text-sm underline hover:cursor-pointer"
-                >
-                  See new features
-                </a>
               </Link>
             </p>
           </div>
-          <div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
+          <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
+            <div className="h-[90%]">
               <Image
-              src={signInIssues}
+                src={latestFeatures}
                 alt="Plane Issues"
-              className={`flex object-cover rounded-md ${
+                className={`rounded-md h-full ml-8 -mt-2 ${
                   resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
                 } `}
               />
@@ -175,6 +206,7 @@ const HomePage: NextPageWithLayout = () => {
           </div>
         </div>
       </div>
+    </div>
   );
 };