snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/project-states/create-update/create.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { STATE_GROUPS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateForm } from "@/components/project-states";
+
+type TStateCreate = {
+  groupKey: TStateGroups;
+  createStateCallback: TStateOperationsCallbacks["createState"];
+  handleClose: () => void;
+};
+
+export const StateCreate = observer(function StateCreate(props: TStateCreate) {
+  const { groupKey, createStateCallback, handleClose } = props;
+
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const onCancel = () => {
+    setLoader(false);
+    handleClose();
+  };
+
+  const onSubmit = async (formData: Partial<IState>) => {
+    if (!groupKey) return { status: "error" };
+
+    try {
+      await createStateCallback({ ...formData, group: groupKey });
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State created successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as { status: number; data: { error: string } };
+      if (errorStatus?.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State with that name already exists. Please try again with another name.",
+        });
+        return { status: "already_exists" };
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: errorStatus.data.error ?? "State could not be created. Please try again.",
+        });
+        return { status: "error" };
+      }
+    }
+  };
+
+  return (
+    <StateForm
+      data={{ name: "", description: "", color: STATE_GROUPS[groupKey].color }}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      buttonDisabled={loader}
+      buttonTitle={loader ? `Creating` : `Create`}
+    />
+  );
+});

apps/web/core/components/project-states/create-update/form.tsx

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { TwitterPicker } from "react-color";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { Button } from "@plane/propel/button";
+import type { IState } from "@plane/types";
+import { Popover } from "@plane/ui";
+type TStateForm = {
+  data: Partial<IState>;
+  onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
+  onCancel: () => void;
+  buttonDisabled: boolean;
+  buttonTitle: string;
+};
+
+function PopoverButton({ color }: { color?: string }) {
+  return (
+    <div
+      className="group inline-flex h-5 w-5 items-center rounded-sm text-14 font-medium transition-all focus:outline-none"
+      style={{
+        backgroundColor: color ?? "black",
+      }}
+    />
+  );
+}
+
+export function StateForm(props: TStateForm) {
+  const { data, onSubmit, onCancel, buttonDisabled, buttonTitle } = props;
+  // states
+  const [formData, setFromData] = useState<Partial<IState> | undefined>(undefined);
+  const [errors, setErrors] = useState<Partial<Record<keyof IState, string>> | undefined>(undefined);
+
+  useEffect(() => {
+    if (data && !formData) setFromData(data);
+  }, [data, formData]);
+
+  const handleFormData = <T extends keyof IState>(key: T, value: IState[T]) => {
+    setFromData((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const formSubmit = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.preventDefault();
+
+    const name = formData?.name || undefined;
+    if (!formData || !name) {
+      let currentErrors: Partial<Record<keyof IState, string>> = {};
+      if (!name) currentErrors = { ...currentErrors, name: "Name is required" };
+      setErrors(currentErrors);
+      return;
+    }
+
+    try {
+      await onSubmit(formData);
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  return (
+    <div className="relative flex space-x-2 rounded-sm bg-surface-1 p-3">
+      {/* color */}
+      <div className="mt-2 h-full flex-shrink-0">
+        <Popover button={<PopoverButton color={formData?.color} />} panelClassName="mt-4 -ml-3">
+          <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
+        </Popover>
+      </div>
+
+      <div className="w-full space-y-2">
+        {/* title */}
+        <Field name="name" invalid={(errors && Boolean(errors.name)) || false}>
+          <InputGroup size="2xl">
+            <Input
+              size="2xl"
+              id="name"
+              type="text"
+              name="name"
+              placeholder="Name"
+              value={formData?.name}
+              onChange={(e) => handleFormData("name", e.target.value)}
+              maxLength={100}
+              autoFocus
+            />
+          </InputGroup>
+        </Field>
+
+        {/* description */}
+        <Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
+          <TextAreaGroup resize="none">
+            <TextArea
+              size="lg"
+              surface="field"
+              autoResize
+              maxRows={8}
+              id="description"
+              name="description"
+              placeholder="Describe this state for your members."
+              value={formData?.description ?? ""}
+              onChange={(e) => handleFormData("description", e.target.value)}
+            />
+          </TextAreaGroup>
+        </Field>
+
+        <div className="flex items-center space-x-2">
+          <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
+            {buttonTitle}
+          </Button>
+          <Button type="button" variant="secondary" size="lg" disabled={buttonDisabled} onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/core/components/project-states/create-update/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create";
+export * from "./update";
+export * from "./form";

apps/web/core/components/project-states/create-update/update.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateForm } from "@/components/project-states";
+
+type TStateUpdate = {
+  state: IState;
+  updateStateCallback: TStateOperationsCallbacks["updateState"];
+  handleClose: () => void;
+};
+
+export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
+  const { state, updateStateCallback, handleClose } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const onCancel = () => {
+    setLoader(false);
+    handleClose();
+  };
+
+  const onSubmit = async (formData: Partial<IState>) => {
+    if (!state.id) return { status: "error" };
+
+    try {
+      await updateStateCallback(state.id, formData);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State updated successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as { status: number };
+      if (errorStatus?.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Another state exists with the same name. Please try again with another name.",
+        });
+        return { status: "already_exists" };
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State could not be updated. Please try again.",
+        });
+        return { status: "error" };
+      }
+    }
+  };
+
+  return (
+    <StateForm
+      data={state}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      buttonDisabled={loader}
+      buttonTitle={loader ? `Updating` : `Update`}
+    />
+  );
+});

apps/web/core/components/project-states/group-item.tsx

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+
+// plane imports
+import { EIconSize } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { AddOutline, ChevronDownOutline } from "@makeplane/propel/icons";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { StateList, StateCreate } from "@/components/project-states";
+
+type TGroupItem = {
+  groupKey: TStateGroups;
+  groupsExpanded: Partial<TStateGroups>[];
+  groupedStates: Record<string, IState[]>;
+  states: IState[];
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  isEditable: boolean;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+  handleGroupCollapse: (groupKey: TStateGroups) => void;
+  handleExpand: (groupKey: TStateGroups) => void;
+};
+
+export const GroupItem = observer(function GroupItem(props: TGroupItem) {
+  const {
+    groupKey,
+    groupedStates,
+    states,
+    groupsExpanded,
+    isEditable,
+    stateOperationsCallbacks,
+    groupItemClassName,
+    stateItemClassName,
+    handleExpand,
+    handleGroupCollapse,
+  } = props;
+  // refs
+  const dropElementRef = useRef<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // state
+  const [createState, setCreateState] = useState(false);
+  // derived values
+  const currentStateExpanded = groupsExpanded.includes(groupKey);
+  const shouldShowEmptyState = states.length === 0 && currentStateExpanded && !createState;
+
+  return (
+    <div
+      className={cn("space-y-1 rounded-sm border border-subtle bg-surface-2 p-2 transition-all", groupItemClassName)}
+      ref={dropElementRef}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div
+          className="flex w-full cursor-pointer items-center py-1"
+          onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
+        >
+          <div
+            className={cn(
+              "flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all",
+              {
+                "rotate-0": currentStateExpanded,
+                "-rotate-90": !currentStateExpanded,
+              }
+            )}
+          >
+            <ChevronDownOutline className="h-4 w-4" />
+          </div>
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+            <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
+          </div>
+          <div className="px-1 text-14 font-medium text-secondary capitalize">{groupKey}</div>
+        </div>
+        <button
+          type="button"
+          className={cn(
+            "flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-accent-primary/80 transition-colors hover:bg-layer-1 hover:text-accent-primary",
+            (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
+          )}
+          onClick={() => {
+            if (!createState) {
+              handleExpand(groupKey);
+              setCreateState(true);
+            }
+          }}
+          disabled={!isEditable || createState}
+        >
+          <AddOutline className="h-4 w-4" />
+        </button>
+      </div>
+
+      {shouldShowEmptyState && (
+        <div className="flex h-full flex-col items-center justify-center py-4 text-13 text-tertiary">
+          <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
+          {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
+        </div>
+      )}
+
+      {currentStateExpanded && (
+        <div id="group-droppable-container">
+          <StateList
+            groupKey={groupKey}
+            groupedStates={groupedStates}
+            states={states}
+            disabled={!isEditable}
+            stateOperationsCallbacks={stateOperationsCallbacks}
+            stateItemClassName={stateItemClassName}
+          />
+        </div>
+      )}
+
+      {isEditable && createState && (
+        <div className="">
+          <StateCreate
+            groupKey={groupKey}
+            handleClose={() => setCreateState(false)}
+            createStateCallback={stateOperationsCallbacks.createState}
+          />
+        </div>
+      )}
+    </div>
+  );
+});

apps/web/core/components/project-states/group-list.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { GroupItem } from "@/components/project-states";
+
+type TGroupList = {
+  groupedStates: Record<string, IState[]>;
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  isEditable: boolean;
+  groupListClassName?: string;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+};
+
+export const GroupList = observer(function GroupList(props: TGroupList) {
+  const {
+    groupedStates,
+    stateOperationsCallbacks,
+    isEditable,
+    groupListClassName,
+    groupItemClassName,
+    stateItemClassName,
+  } = props;
+  // states
+  const [groupsExpanded, setGroupsExpanded] = useState<Partial<TStateGroups>[]>([
+    "backlog",
+    "unstarted",
+    "started",
+    "completed",
+    "cancelled",
+  ]);
+
+  const handleGroupCollapse = (groupKey: TStateGroups) => {
+    setGroupsExpanded((prev) => {
+      if (prev.includes(groupKey)) {
+        return prev.filter((key) => key !== groupKey);
+      }
+      return prev;
+    });
+  };
+
+  const handleExpand = (groupKey: TStateGroups) => {
+    setGroupsExpanded((prev) => {
+      if (prev.includes(groupKey)) {
+        return prev;
+      }
+      return [...prev, groupKey];
+    });
+  };
+  return (
+    <div className={cn("space-y-5", groupListClassName)}>
+      {Object.entries(groupedStates).map(([key, value]) => {
+        const groupKey = key as TStateGroups;
+        const groupStates = value;
+        return (
+          <GroupItem
+            key={groupKey}
+            groupKey={groupKey}
+            states={groupStates}
+            groupedStates={groupedStates}
+            groupsExpanded={groupsExpanded}
+            stateOperationsCallbacks={stateOperationsCallbacks}
+            isEditable={isEditable}
+            handleGroupCollapse={handleGroupCollapse}
+            handleExpand={handleExpand}
+            groupItemClassName={groupItemClassName}
+            stateItemClassName={stateItemClassName}
+          />
+        );
+      })}
+    </div>
+  );
+});

apps/web/core/components/project-states/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./group-list";
+export * from "./group-item";
+
+export * from "./state-list";
+export * from "./state-item";
+export * from "./options";
+
+export * from "./loader";
+export * from "./create-update";
+export * from "./state-delete-modal";
+export * from "./state-item-title";

apps/web/core/components/project-states/loader.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Loader } from "@plane/ui";
+
+export function ProjectStateLoader() {
+  return (
+    <Loader className="space-y-5 md:w-2/3">
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+    </Loader>
+  );
+}

apps/web/core/components/project-states/options/delete.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, LoadingOutline } from "@makeplane/propel/icons";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { AlertModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TStateDelete = {
+  totalStates: number;
+  state: IState;
+  deleteStateCallback: TStateOperationsCallbacks["deleteState"];
+};
+
+export const StateDelete = observer(function StateDelete(props: TStateDelete) {
+  const { totalStates, state, deleteStateCallback } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // states
+  const [isDeleteModal, setIsDeleteModal] = useState(false);
+  const [isDelete, setIsDelete] = useState(false);
+  // derived values
+  const isDeleteDisabled = state.default ? true : totalStates === 1 ? true : false;
+
+  const handleDeleteState = async () => {
+    if (isDeleteDisabled) return;
+
+    setIsDelete(true);
+
+    try {
+      await deleteStateCallback(state.id);
+      setIsDelete(false);
+    } catch (error) {
+      const errorStatus = error as { status: number; data: { error: string } };
+      if (errorStatus.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message:
+            "This state contains some work items within it, please move them to some other state to delete this state.",
+        });
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State could not be deleted. Please try again.",
+        });
+      }
+      setIsDelete(false);
+    }
+  };
+
+  return (
+    <>
+      <AlertModalCore
+        handleClose={() => setIsDeleteModal(false)}
+        handleSubmit={handleDeleteState}
+        isSubmitting={isDelete}
+        isOpen={isDeleteModal}
+        title="Delete State"
+        content={
+          <>
+            Are you sure you want to delete state- <span className="font-medium text-primary">{state?.name}</span>? All
+            of the data related to the state will be permanently removed. This action cannot be undone.
+          </>
+        }
+      />
+
+      <button
+        type="button"
+        className={cn(
+          "flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors focus:outline-none",
+          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-danger-primary hover:bg-layer-1"
+        )}
+        disabled={isDeleteDisabled}
+        onClick={() => setIsDeleteModal(true)}
+      >
+        <Tooltip
+          label={
+            state.default ? "Cannot delete the default state." : totalStates === 1 ? `Cannot have an empty group.` : ``
+          }
+          layout="stacked"
+          disabled={!isDeleteDisabled || isMobile}
+        >
+          {isDelete ? (
+            <LoadingOutline className="h-3.5 w-3.5 text-secondary" />
+          ) : (
+            <CloseOutline className="h-3.5 w-3.5" />
+          )}
+        </Tooltip>
+      </button>
+    </>
+  );
+});

apps/web/core/components/project-states/options/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./mark-as-default";
+export * from "./delete";

apps/web/core/components/project-states/options/mark-as-default.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+
+type TStateMarksAsDefault = {
+  stateId: string;
+  isDefault: boolean;
+  markStateAsDefaultCallback: TStateOperationsCallbacks["markStateAsDefault"];
+};
+
+export const StateMarksAsDefault = observer(function StateMarksAsDefault(props: TStateMarksAsDefault) {
+  const { stateId, isDefault, markStateAsDefaultCallback } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleMarkAsDefault = async () => {
+    if (!stateId || isDefault) return;
+    setIsLoading(true);
+
+    try {
+      setIsLoading(false);
+      await markStateAsDefaultCallback(stateId);
+      setIsLoading(false);
+    } catch {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={cn(
+        "text-11 whitespace-nowrap transition-colors",
+        isDefault ? "text-tertiary" : "text-secondary hover:text-primary"
+      )}
+      disabled={isDefault || isLoading}
+      onClick={handleMarkAsDefault}
+    >
+      {isLoading ? "Marking as default" : isDefault ? `Default` : `Mark as default`}
+    </button>
+  );
+});

apps/web/core/components/project-states/root.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { EUserPermissionsLevel } from "@plane/constants";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+import { ProjectStateLoader, GroupList } from "@/components/project-states";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type TProjectState = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectStateRoot = observer(function ProjectStateRoot(props: TProjectState) {
+  const { workspaceSlug, projectId } = props;
+  // hooks
+  const {
+    groupedProjectStates,
+    fetchProjectStates,
+    createState,
+    moveStatePosition,
+    updateState,
+    deleteState,
+    markStateAsDefault,
+  } = useProjectState();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isEditable = allowPermissions(
+    [EUserProjectRoles.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  // Fetching all project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // State operations callbacks
+  const stateOperationsCallbacks: TStateOperationsCallbacks = useMemo(
+    () => ({
+      createState: async (data: Partial<IState>) => createState(workspaceSlug, projectId, data),
+      updateState: async (stateId: string, data: Partial<IState>) =>
+        updateState(workspaceSlug, projectId, stateId, data),
+      deleteState: async (stateId: string) => deleteState(workspaceSlug, projectId, stateId),
+      moveStatePosition: async (stateId: string, data: Partial<IState>) =>
+        moveStatePosition(workspaceSlug, projectId, stateId, data),
+      markStateAsDefault: async (stateId: string) => markStateAsDefault(workspaceSlug, projectId, stateId),
+    }),
+    [workspaceSlug, projectId, createState, moveStatePosition, updateState, deleteState, markStateAsDefault]
+  );
+
+  // Loader
+  if (!groupedProjectStates) return <ProjectStateLoader />;
+
+  return (
+    <GroupList
+      groupedStates={groupedProjectStates}
+      stateOperationsCallbacks={stateOperationsCallbacks}
+      isEditable={isEditable}
+    />
+  );
+});

apps/web/core/components/project-states/state-delete-modal.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// Plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type TStateDeleteModal = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IState | null;
+};
+
+export const StateDeleteModal = observer(function StateDeleteModal(props: TStateDeleteModal) {
+  const { isOpen, onClose, data } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  const { deleteState } = useProjectState();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !data) return;
+
+    setIsDeleteLoading(true);
+
+    await deleteState(workspaceSlug.toString(), data.project_id, data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message:
+              "This state contains some work items within it, please move them to some other state to delete this state.",
+          });
+        else
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "State could not be deleted. Please try again.",
+          });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete State"
+      content={
+        <>
+          Are you sure you want to delete state- <span className="font-medium text-primary">{data?.name}</span>? All of
+          the data related to the state will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});

apps/web/core/components/project-states/state-item-title.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SetStateAction } from "react";
+import { observer } from "mobx-react";
+import { DragDropOutline, EditOutline } from "@makeplane/propel/icons";
+import { EIconSize } from "@plane/constants";
+// plane imports
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+// local imports
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { StateDelete, StateMarksAsDefault } from "./options";
+
+type TBaseStateItemTitleProps = {
+  stateCount: number;
+  state: IState;
+  shouldShowDescription?: boolean;
+  setUpdateStateModal: (value: SetStateAction<boolean>) => void;
+};
+
+type TEnabledStateItemTitleProps = TBaseStateItemTitleProps & {
+  disabled: false;
+  stateOperationsCallbacks: Pick<TStateOperationsCallbacks, "markStateAsDefault" | "deleteState">;
+};
+
+type TDisabledStateItemTitleProps = TBaseStateItemTitleProps & {
+  disabled: true;
+};
+
+export type TStateItemTitleProps = TEnabledStateItemTitleProps | TDisabledStateItemTitleProps;
+
+export const StateItemTitle = observer(function StateItemTitle(props: TStateItemTitleProps) {
+  const { stateCount, setUpdateStateModal, disabled, state, shouldShowDescription = true } = props;
+  // store hooks
+  const { getStatePercentageInGroup } = useProjectState();
+  // derived values
+  const statePercentage = getStatePercentageInGroup(state.id);
+  const percentage = statePercentage ? statePercentage / 100 : undefined;
+
+  return (
+    <div className="flex w-full items-center justify-between gap-2">
+      <div className="flex items-center gap-1 px-1">
+        {/* draggable indicator */}
+        {!disabled && stateCount != 1 && (
+          <div className="absolute -left-1.5 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+            <DragDropOutline className="h-3 w-3" />
+          </div>
+        )}
+        {/* state icon */}
+        <div className="flex-shrink-0">
+          <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.XL} percentage={percentage} />
+        </div>
+        {/* state title and description */}
+        <div className="min-h-5 px-2 text-13">
+          <h6 className="text-13 font-medium">{state.name}</h6>
+          {shouldShowDescription && <p className="text-11 text-secondary">{state.description}</p>}
+        </div>
+      </div>
+      {!disabled && (
+        <div className="hidden items-center gap-2 group-hover:flex">
+          {/* state mark as default option */}
+          <div className="flex-shrink-0 text-11 transition-all">
+            <StateMarksAsDefault
+              stateId={state.id}
+              isDefault={state.default ? true : false}
+              markStateAsDefaultCallback={props.stateOperationsCallbacks.markStateAsDefault}
+            />
+          </div>
+          {/* state edit options */}
+          <div className="flex items-center gap-1 transition-all">
+            <button
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
+              onClick={() => setUpdateStateModal(true)}
+            >
+              <EditOutline className="h-3 w-3" />
+            </button>
+            <StateDelete
+              totalStates={stateCount}
+              state={state}
+              deleteStateCallback={props.stateOperationsCallbacks.deleteState}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

apps/web/core/components/project-states/state-item.tsx

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { observer } from "mobx-react";
+// Plane
+import type { TDraggableData } from "@plane/constants";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { DropIndicator } from "@plane/ui";
+import { cn, getCurrentStateSequence } from "@plane/utils";
+// components
+import { StateItemTitle, StateUpdate } from "@/components/project-states";
+// helpers
+type TStateItem = {
+  groupKey: TStateGroups;
+  groupedStates: Record<string, IState[]>;
+  totalStates: number;
+  state: IState;
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateItem = observer(function StateItem(props: TStateItem) {
+  const {
+    groupKey,
+    groupedStates,
+    totalStates,
+    state,
+    stateOperationsCallbacks,
+    disabled = false,
+    stateItemClassName,
+  } = props;
+  // ref
+  const draggableElementRef = useRef<HTMLDivElement | null>(null);
+  // states
+  const [updateStateModal, setUpdateStateModal] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  // derived values
+  const isDraggable = totalStates === 1 ? false : true;
+  const commonStateItemListProps = {
+    stateCount: totalStates,
+    state: state,
+    setUpdateStateModal: setUpdateStateModal,
+  };
+
+  const handleStateSequence = useCallback(
+    async (payload: Partial<IState>) => {
+      try {
+        if (!payload.id) return;
+        await stateOperationsCallbacks.moveStatePosition(payload.id, payload);
+      } catch (error) {
+        console.error("error", error);
+      }
+    },
+    [stateOperationsCallbacks]
+  );
+
+  useEffect(() => {
+    const elementRef = draggableElementRef.current;
+    const initialData: TDraggableData = { groupKey: groupKey, id: state.id };
+
+    if (elementRef && state) {
+      combine(
+        draggable({
+          element: elementRef,
+          getInitialData: () => initialData,
+          onDragStart: () => setIsDragging(true),
+          onDrop: () => setIsDragging(false),
+          canDrag: () => isDraggable && !disabled,
+        }),
+        dropTargetForElements({
+          element: elementRef,
+          getData: ({ input, element }) =>
+            attachClosestEdge(initialData, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
+          onDragLeave: () => {
+            setIsDraggedOver(false);
+            setClosestEdge(null);
+          },
+          onDrop: (data) => {
+            setIsDraggedOver(false);
+            const { self, source } = data;
+            const sourceData = source.data as TDraggableData;
+            const destinationData = self.data as TDraggableData;
+
+            if (sourceData && destinationData && sourceData.id) {
+              const destinationGroupKey = destinationData.groupKey;
+              const edge = extractClosestEdge(destinationData) || undefined;
+              const payload: Partial<IState> = {
+                id: sourceData.id,
+                group: destinationGroupKey,
+                sequence: getCurrentStateSequence(groupedStates[destinationGroupKey], destinationData, edge),
+              };
+              handleStateSequence(payload);
+            }
+          },
+        })
+      );
+    }
+  }, [draggableElementRef, state, groupKey, isDraggable, groupedStates, handleStateSequence, disabled]);
+  // DND ends
+
+  if (updateStateModal)
+    return (
+      <StateUpdate
+        state={state}
+        updateStateCallback={stateOperationsCallbacks.updateState}
+        handleClose={() => setUpdateStateModal(false)}
+      />
+    );
+
+  return (
+    <Fragment>
+      {/* draggable drop top indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />
+      <div
+        ref={draggableElementRef}
+        className={cn(
+          "group relative rounded-sm border border-subtle bg-surface-1 px-3.5 py-3",
+          isDragging ? `opacity-50` : `opacity-100`,
+          totalStates === 1 ? `cursor-auto` : `cursor-grab`,
+          stateItemClassName
+        )}
+      >
+        {disabled ? (
+          <StateItemTitle {...commonStateItemListProps} disabled />
+        ) : (
+          <StateItemTitle
+            {...commonStateItemListProps}
+            disabled={false}
+            stateOperationsCallbacks={{
+              markStateAsDefault: stateOperationsCallbacks.markStateAsDefault,
+              deleteState: stateOperationsCallbacks.deleteState,
+            }}
+          />
+        )}
+      </div>
+      {/* draggable drop bottom indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />
+    </Fragment>
+  );
+});

apps/web/core/components/project-states/state-list.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateItem } from "@/components/project-states";
+
+type TStateList = {
+  groupKey: TStateGroups;
+  groupedStates: Record<string, IState[]>;
+  states: IState[];
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateList = observer(function StateList(props: TStateList) {
+  const { groupKey, groupedStates, states, stateOperationsCallbacks, disabled = false, stateItemClassName } = props;
+
+  return (
+    <>
+      {states.map((state: IState) => (
+        <StateItem
+          key={state?.name}
+          groupKey={groupKey}
+          groupedStates={groupedStates}
+          totalStates={states.length || 0}
+          state={state}
+          disabled={disabled}
+          stateOperationsCallbacks={stateOperationsCallbacks}
+          stateItemClassName={stateItemClassName}
+        />
+      ))}
+    </>
+  );
+});