feat: Added projects list in the workspace details page

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

@@ -0,0 +1,21 @@
+// next imports
+import { Metadata } from "next";
+
+type LayoutProps = {
+  params: { workspace_slug: string };
+};
+
+export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
+  // read route params
+  const { workspace_slug } = params;
+
+  return {
+    title: `${workspace_slug} | Plane`,
+    description: `${workspace_slug} | Plane`,
+    icons: `/plane-logo.webp`,
+  };
+}
+
+const Layout = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+
+export default Layout;

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

@@ -1,7 +1,95 @@
 "use client";
 
-const WorkspaceProjectPage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Workspace Space</div>
-);
+import { useEffect } from "react";
+// next imports
+import { useParams } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+// components
+import { ProjectCard } from "components/project-card";
+// mobx store
+import { observer } from "mobx-react-lite";
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const WorkspaceProjectPage = observer(() => {
+  const store: RootStore = useMobxStore();
+  const { project: projectStore } = store;
+
+  const routerParams = useParams();
+  const { workspace_slug } = routerParams as { workspace_slug: string };
+
+  useEffect(() => {
+    if (workspace_slug) {
+      store?.project?.getWorkspaceProjectsListAsync(workspace_slug);
+    }
+  }, [workspace_slug, store?.project, store?.issue]);
+
+  return (
+    <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
+      <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
+        <div className="px-5 relative w-full flex items-center gap-2">
+          <div className="flex-shrink-0 w-[28px] h-[28px] overflow-hidden">
+            <Image src="/plane-logo.webp" alt="plane logo" className="w-[28px] h-[28px]" height="24" width="24" />
+          </div>
+          <div className="font-medium">Plane Deploy</div>
+        </div>
+      </div>
+      <div className="w-full h-full relative bg-white overflow-hidden">
+        <div className="relative w-full h-full overflow-hidden">
+          {projectStore?.loader ? (
+            <div className="text-sm text-center py-10 text-gray-500">Loading...</div>
+          ) : (
+            <>
+              {projectStore?.error ? (
+                <div className="text-sm text-center py-10 text-gray-500">Something went wrong.</div>
+              ) : (
+                <div className="relative w-full h-full overflow-y-auto">
+                  <div className="container mx-auto px-5 py-3">
+                    {projectStore?.projectsList && projectStore?.projectsList.length > 0 ? (
+                      <div className="space-y-4">
+                        <div className="text-xl font-medium capitalize">{workspace_slug} Projects</div>
+                        <div className="space-y-2">
+                          {projectStore?.projectsList.map((_project) => (
+                            <div key={_project?.id}>
+                              <ProjectCard project={_project} workspace_slug={workspace_slug} />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="py-10 gap-4 flex flex-col justify-center items-center">
+                        <div className="text-sm text-center text-gray-500">
+                          No projects are published under this workspace.
+                        </div>
+                        <a
+                          href={`https://app.plane.so/`}
+                          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
+                        >
+                          Go to your Workspace
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
+        <Link href="https://plane.so" className="p-1 px-2 flex items-center gap-1" target="_blank">
+          <div className="w-[24px] h-[24px] relative flex justify-center items-center">
+            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+          </div>
+          <div className="text-xs">
+            Powered by <b>Plane Deploy</b>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+});
 
 export default WorkspaceProjectPage;

apps/space/components/project-card.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+// next imports
+import Link from "next/link";
+import Image from "next/image";
+// types
+import { IProject } from "store/types";
+
+interface ProjectCardProps {
+  project: IProject;
+  workspace_slug: string;
+}
+
+const renderEmoji = (emoji: string | { name: string; color: string }) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+export const ProjectCard = ({ project, workspace_slug }: ProjectCardProps) => (
+  <Link href={`/${workspace_slug}/${project.id}`}>
+    <div className="p-3 relative flex gap-4 items-center cursor-pointer bg-white group hover:bg-gray-50 transition-all border border-gray-200 rounded">
+      <div className="flex-shrink-0 w-[30px] h-[30px] rounded flex justify-center items-center overflow-hidden bg-gray-100">
+        {project?.emoji ? (
+          renderEmoji(project?.emoji)
+        ) : (
+          <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+        )}
+      </div>
+      <div className="text-sm font-medium text-gray-700 group-hover:text-black line-clamp-1">{project?.name || ""}</div>
+    </div>
+  </Link>
+);

apps/space/next.config.js

@@ -9,6 +9,15 @@ const nextConfig = {
     appDir: true,
   },
   output: "standalone",
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "https://plane.so",
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

apps/space/services/project.service.ts

@@ -6,6 +6,14 @@ class ProjectService extends APIService {
     super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
+  async getWorkspaceProjectsListAsync(workspace_slug: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
   async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise<any> {
     return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
       .then((response) => response?.data)

apps/space/store/project.ts

@@ -9,6 +9,7 @@ class ProjectStore implements IProjectStore {
   loader: boolean = false;
   error: any | null = null;
 
+  projectsList: IProject[] | null = null;
   workspace: IWorkspace | null = null;
   project: IProject | null = null;
   workspaceProjectSettings: IProjectSettings | null = null;
@@ -20,12 +21,14 @@ class ProjectStore implements IProjectStore {
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
       // observable
+      projectsList: observable.ref,
       workspace: observable.ref,
       project: observable.ref,
       workspaceProjectSettings: observable.ref,
       loader: observable,
       error: observable.ref,
       // action
+      getWorkspaceProjectsListAsync: action,
       getProjectSettingsAsync: action,
       // computed
     });
@@ -34,6 +37,43 @@ class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
   }
 
+  getWorkspaceProjectsListAsync = async (workspace_slug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.getWorkspaceProjectsListAsync(workspace_slug);
+
+      if (response && response.length > 0) {
+        const _projectsList: IProject[] = response.map((_project: IProject) => {
+          const _p = { ..._project };
+          return {
+            id: _p?.id,
+            identifier: _p?.identifier,
+            name: _p?.name,
+            description: _p?.description,
+            cover_image: _p?.cover_image,
+            icon_prop: _p?.icon_prop,
+            emoji: _p?.emoji,
+          };
+        });
+
+        runInAction(() => {
+          this.projectsList = [..._projectsList];
+          this.loader = false;
+        });
+      } else {
+        this.loader = false;
+      }
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
   getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
     try {
       this.loader = true;
@@ -61,7 +101,7 @@ class ProjectStore implements IProjectStore {
     } catch (error) {
       this.loader = false;
       this.error = error;
-      return error;
+      throw error;
     }
   };
 }

apps/space/store/types/project.ts

@@ -9,7 +9,6 @@ export interface IProject {
   identifier: string;
   name: string;
   description: string;
-  icon: string;
   cover_image: string | null;
   icon_prop: string | null;
   emoji: string | null;
@@ -32,9 +31,11 @@ export interface IProjectStore {
   loader: boolean;
   error: any | null;
 
+  projectsList: IProject[] | null;
   workspace: IWorkspace | null;
   project: IProject | null;
   workspaceProjectSettings: IProjectSettings | null;
 
+  getWorkspaceProjectsListAsync: (workspace_slug: string) => Promise<void>;
   getProjectSettingsAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
 }