fix: handled no project

web/app/[workspaceSlug]/(settings)/settings/project/layout.tsx

@@ -1,32 +1,46 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
+import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 // components
 import { CommandPalette } from "@/components/command-palette";
 import { SettingsContentWrapper } from "@/components/settings";
 import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
+import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 
 type Props = {
   children: ReactNode;
 };
 
-export default function ProjectSettingsLayout(props: Props) {
+const ProjectSettingsLayout = observer((props: Props) => {
   const { children } = props;
   // router
+  const router = useAppRouter();
   const pathname = usePathname();
   const { workspaceSlug, projectId } = useParams();
+  const { joinedProjectIds } = useProject();
+
+  useEffect(() => {
+    if (projectId) return;
+    if (joinedProjectIds.length > 0) {
+      router.push(`/${workspaceSlug}/settings/project/${joinedProjectIds[0]}`);
+    }
+  }, [joinedProjectIds, router, workspaceSlug, projectId]);
 
   return (
     <>
       <CommandPalette />
       <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
         <div className="relative flex h-full w-full">
-          <ProjectSettingsSidebar workspaceSlug={workspaceSlug.toString()} pathname={pathname} />
+          {projectId && <ProjectSettingsSidebar workspaceSlug={workspaceSlug.toString()} pathname={pathname} />}
           <SettingsContentWrapper>{children}</SettingsContentWrapper>
         </div>
       </ProjectAuthWrapper>
     </>
   );
-}
+});
+
+export default ProjectSettingsLayout;

web/app/[workspaceSlug]/(settings)/settings/project/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { Button, getButtonStyling } from "@plane/ui";
+import { cn } from "@plane/utils";
+import { useCommandPalette } from "@/hooks/store";
+
+const ProjectSettingsPage = () => {
+  // store hooks
+  const { resolvedTheme } = useTheme();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  // derived values
+  const resolvedPath =
+    resolvedTheme === "dark"
+      ? "/empty-state/project-settings/no-projects-dark.png"
+      : "/empty-state/project-settings/no-projects-light.png";
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
+      <Image src={resolvedPath} alt="No projects yet" width={384} height={250} />
+      <div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
+      <div className="text-sm text-custom-text-350 text-center">
+        Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
+        need to get things done.
+      </div>
+      <div className="flex gap-2">
+        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("neutral-primary", "sm"))}>
+          Learn more about projects
+        </Link>
+        <Button size="sm" onClick={() => toggleCreateProjectModal(true)}>
+          Start your first project
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectSettingsPage;