chore: seperated project components for CE (#5324)

* chore: seperated project components for CE

* chore: splitted the code for project creation form

* fix: code structure optimization

* fix: project page root moved

* fix: synced with preview

* fix: component splitting and refactoring

* fix: build error

web/app/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { ProjectsListHeader } from "@/plane-web/components/projects/header";
+import { ProjectsListMobileHeader } from "@/plane-web/components/projects/mobile-header";
+export default function ProjectListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectsListHeader />} mobileHeader={<ProjectsListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}

web/app/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx

@@ -0,0 +1,4 @@
+import ProjectPageRoot from "@/plane-web/components/projects/page";
+
+const ProjectsPage = () => <ProjectPageRoot />;
+export default ProjectsPage;

web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx

@@ -1,191 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { Search, Briefcase, X, ListFilter } from "lucide-react";
-// types
-import { TProjectFilters } from "@plane/types";
-// ui
-import { Breadcrumbs, Button } from "@plane/ui";
-// components
-import { BreadcrumbLink } from "@/components/common";
-import { FiltersDropdown } from "@/components/issues";
-import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
-// constants
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import { calculateTotalFilters } from "@/helpers/filter.helper";
-// hooks
-import { useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
-
-export const ProjectsListHeader = observer(() => {
-  // router
-  const { workspaceSlug } = useParams();
-  // states
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
-  // refs
-  const inputRef = useRef<HTMLInputElement>(null);
-  // store hooks
-  const { toggleCreateProjectModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const {
-    currentWorkspaceDisplayFilters: displayFilters,
-    currentWorkspaceFilters: filters,
-    updateFilters,
-    updateDisplayFilters,
-    searchQuery,
-    updateSearchQuery,
-  } = useProjectFilter();
-  const {
-    workspace: { workspaceMemberIds },
-  } = useMember();
-  // outside click detector hook
-  useOutsideClickDetector(inputRef, () => {
-    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
-  });
-  // auth
-  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
-
-  const handleFilters = useCallback(
-    (key: keyof TProjectFilters, value: string | string[]) => {
-      if (!workspaceSlug) return;
-      let newValues = filters?.[key] ?? [];
-      if (Array.isArray(value)) {
-        if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
-      } else {
-        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-        else {
-          if (key === "created_at") newValues = [value];
-          else newValues.push(value);
-        }
-      }
-
-      updateFilters(workspaceSlug.toString(), { [key]: newValues });
-    },
-    [filters, updateFilters, workspaceSlug]
-  );
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Escape") {
-      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
-      else setIsSearchOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (searchQuery.trim() !== "") setIsSearchOpen(true);
-  }, [searchQuery]);
-
-  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
-
-  return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
-            />
-          </Breadcrumbs>
-        </div>
-      </div>
-      <div className="w-full flex items-center justify-end gap-3">
-        <div className="flex items-center">
-          {!isSearchOpen && (
-            <button
-              type="button"
-              className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
-              onClick={() => {
-                setIsSearchOpen(true);
-                inputRef.current?.focus();
-              }}
-            >
-              <Search className="h-3.5 w-3.5" />
-            </button>
-          )}
-          <div
-            className={cn(
-              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
-              {
-                "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
-              }
-            )}
-          >
-            <Search className="h-3.5 w-3.5" />
-            <input
-              ref={inputRef}
-              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
-              placeholder="Search"
-              value={searchQuery}
-              onChange={(e) => updateSearchQuery(e.target.value)}
-              onKeyDown={handleInputKeyDown}
-            />
-            {isSearchOpen && (
-              <button
-                type="button"
-                className="grid place-items-center"
-                onClick={() => {
-                  updateSearchQuery("");
-                  setIsSearchOpen(false);
-                }}
-              >
-                <X className="h-3 w-3" />
-              </button>
-            )}
-          </div>
-        </div>
-        <div className="hidden md:flex gap-3">
-          <ProjectOrderByDropdown
-            value={displayFilters?.order_by}
-            onChange={(val) => {
-              if (!workspaceSlug || val === displayFilters?.order_by) return;
-              updateDisplayFilters(workspaceSlug.toString(), {
-                order_by: val,
-              });
-            }}
-          />
-          <FiltersDropdown
-            icon={<ListFilter className="h-3 w-3" />}
-            title="Filters"
-            placement="bottom-end"
-            isFiltersApplied={isFiltersApplied}
-          >
-            <ProjectFiltersSelection
-              displayFilters={displayFilters ?? {}}
-              filters={filters ?? {}}
-              handleFiltersUpdate={handleFilters}
-              handleDisplayFiltersUpdate={(val) => {
-                if (!workspaceSlug) return;
-                updateDisplayFilters(workspaceSlug.toString(), val);
-              }}
-              memberIds={workspaceMemberIds ?? undefined}
-            />
-          </FiltersDropdown>
-        </div>
-        {isAuthorizedUser && (
-          <Button
-            size="sm"
-            onClick={() => {
-              setTrackElement("Projects page");
-              toggleCreateProjectModal(true);
-            }}
-            className="items-center gap-1"
-          >
-            <span className="hidden sm:inline-block">Add</span> Project
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-});

web/app/[workspaceSlug]/(projects)/projects/(list)/layout.tsx

@@ -4,9 +4,8 @@ import { ReactNode } from "react";
 // components
 import { AppHeader, ContentWrapper } from "@/components/core";
 // local components
-import { ProjectsListHeader } from "./header";
-import { ProjectsListMobileHeader } from "./mobile-header";
-
+import { ProjectsListHeader } from "@/plane-web/components/projects/header";
+import { ProjectsListMobileHeader } from "@/plane-web/components/projects/mobile-header";
 export default function ProjectListLayout({ children }: { children: ReactNode }) {
   return (
     <>

web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx

@@ -1,91 +0,0 @@
-import { useCallback } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// icons
-import { ChevronDown, ListFilter } from "lucide-react";
-// types
-import { TProjectFilters } from "@plane/types";
-// hooks
-import { FiltersDropdown } from "@/components/issues/issue-layouts";
-import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project/dropdowns";
-// helpers
-import { calculateTotalFilters } from "@/helpers/filter.helper";
-// hooks
-import { useMember, useProjectFilter } from "@/hooks/store";
-
-export const ProjectsListMobileHeader = observer(() => {
-  // router
-  const { workspaceSlug } = useParams();
-  const {
-    currentWorkspaceDisplayFilters: displayFilters,
-    currentWorkspaceFilters: filters,
-    updateDisplayFilters,
-    updateFilters,
-  } = useProjectFilter();
-
-
-  const {
-    workspace: { workspaceMemberIds },
-  } = useMember();
-
-  const handleFilters = useCallback(
-    (key: keyof TProjectFilters, value: string | string[]) => {
-      if (!workspaceSlug) return;
-      const newValues = filters?.[key] ?? [];
-      if (Array.isArray(value))
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
-      else {
-        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-        else newValues.push(value);
-      }
-      updateFilters(workspaceSlug.toString(), { [key]: newValues });
-    },
-    [filters, updateFilters, workspaceSlug]
-  );
-
-  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
-
-  return (
-    <div className="flex py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100 w-full">
-      <ProjectOrderByDropdown
-        value={displayFilters?.order_by}
-        onChange={(val) => {
-          if (!workspaceSlug || val === displayFilters?.order_by) return;
-          updateDisplayFilters(workspaceSlug.toString(), {
-            order_by: val,
-          });
-        }}
-        isMobile
-      />
-      <div className="border-l border-custom-border-200 flex justify-around w-full">
-        <FiltersDropdown
-          icon={<ListFilter className="h-3 w-3" />}
-          title="Filters"
-          placement="bottom-end"
-          menuButton={
-            <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
-              <ListFilter className="h-3 w-3" />
-              Filters
-              <ChevronDown className="h-3 w-3" strokeWidth={2} />
-            </div>
-          }
-          isFiltersApplied={isFiltersApplied}
-        >
-          <ProjectFiltersSelection
-            displayFilters={displayFilters ?? {}}
-            filters={filters ?? {}}
-            handleFiltersUpdate={handleFilters}
-            handleDisplayFiltersUpdate={(val) => {
-              if (!workspaceSlug) return;
-              updateDisplayFilters(workspaceSlug.toString(), val);
-            }}
-            memberIds={workspaceMemberIds ?? undefined}
-          />
-        </FiltersDropdown>
-      </div>
-    </div>
-  );
-});

web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx

@@ -1,84 +1,4 @@
-"use client";
-
-import { useCallback } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// types
-import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
-// components
-import { PageHead } from "@/components/core";
-import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
-// helpers
-import { calculateTotalFilters } from "@/helpers/filter.helper";
-// hooks
-import { useProject, useProjectFilter, useWorkspace } from "@/hooks/store";
-
-const ProjectsPage = observer(() => {
-  // store
-  const { workspaceSlug } = useParams();
-  const { currentWorkspace } = useWorkspace();
-  const { totalProjectIds, filteredProjectIds } = useProject();
-  const {
-    currentWorkspaceFilters,
-    currentWorkspaceAppliedDisplayFilters,
-    clearAllFilters,
-    clearAllAppliedDisplayFilters,
-    updateFilters,
-    updateDisplayFilters,
-  } = useProjectFilter();
-  // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
-
-  const handleRemoveFilter = useCallback(
-    (key: keyof TProjectFilters, value: string | null) => {
-      if (!workspaceSlug) return;
-      let newValues = currentWorkspaceFilters?.[key] ?? [];
-
-      if (!value) newValues = [];
-      else newValues = newValues.filter((val) => val !== value);
-
-      updateFilters(workspaceSlug.toString(), { [key]: newValues });
-    },
-    [currentWorkspaceFilters, updateFilters, workspaceSlug]
-  );
-
-  const handleRemoveDisplayFilter = useCallback(
-    (key: TProjectAppliedDisplayFilterKeys) => {
-      if (!workspaceSlug) return;
-      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
-    },
-    [updateDisplayFilters, workspaceSlug]
-  );
-
-  const handleClearAllFilters = useCallback(() => {
-    if (!workspaceSlug) return;
-    clearAllFilters(workspaceSlug.toString());
-    clearAllAppliedDisplayFilters(workspaceSlug.toString());
-  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <div className="flex h-full w-full flex-col">
-        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
-          currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
-          <div className="border-b border-custom-border-200 px-5 py-3">
-            <ProjectAppliedFiltersList
-              appliedFilters={currentWorkspaceFilters ?? {}}
-              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
-              handleClearAllFilters={handleClearAllFilters}
-              handleRemoveFilter={handleRemoveFilter}
-              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
-              filteredProjects={filteredProjectIds?.length ?? 0}
-              totalProjects={totalProjectIds?.length ?? 0}
-              alwaysAllowEditing
-            />
-          </div>
-        )}
-        <ProjectCardList />
-      </div>
-    </>
-  );
-});
+import ProjectPageRoot from "@/plane-web/components/projects/page";
 
+const ProjectsPage = () => <ProjectPageRoot />;
 export default ProjectsPage;