feat: init

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

@@ -0,0 +1,88 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { STATE_TRACKER_EVENTS, 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";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+
+type TStateCreate = {
+  groupKey: TStateGroups;
+  shouldTrackEvents: boolean;
+  createStateCallback: TStateOperationsCallbacks["createState"];
+  handleClose: () => void;
+};
+
+export const StateCreate: FC<TStateCreate> = observer((props) => {
+  const { groupKey, shouldTrackEvents, 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 {
+      const response = await createStateCallback({ ...formData, group: groupKey });
+      if (shouldTrackEvents)
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.create,
+          payload: {
+            state_group: groupKey,
+            id: response.id,
+          },
+        });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State created successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as unknown as { status: number; data: { error: string } };
+      if (shouldTrackEvents)
+        captureError({
+          eventName: STATE_TRACKER_EVENTS.create,
+          payload: {
+            state_group: groupKey,
+          },
+        });
+      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,109 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect, useState, useMemo } from "react";
+import { TwitterPicker } from "react-color";
+import { Button } from "@plane/propel/button";
+import type { IState } from "@plane/types";
+import { Popover, Input, TextArea } from "@plane/ui";
+
+type TStateForm = {
+  data: Partial<IState>;
+  onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
+  onCancel: () => void;
+  buttonDisabled: boolean;
+  buttonTitle: string;
+};
+
+export const StateForm: FC<TStateForm> = (props) => {
+  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);
+    }
+  };
+
+  const PopoverButton = useMemo(
+    () => (
+      <div
+        className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
+        style={{
+          backgroundColor: formData?.color ?? "black",
+        }}
+      />
+    ),
+    [formData?.color]
+  );
+
+  return (
+    <div className="relative flex space-x-2 bg-custom-background-100 p-3 rounded">
+      {/* color */}
+      <div className="flex-shrink-0 h-full mt-2">
+        <Popover button={PopoverButton} 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 */}
+        <Input
+          id="name"
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={formData?.name}
+          onChange={(e) => handleFormData("name", e.target.value)}
+          hasError={(errors && Boolean(errors.name)) || false}
+          className="w-full"
+          maxLength={100}
+          autoFocus
+        />
+
+        {/* description */}
+        <TextArea
+          id="description"
+          name="description"
+          placeholder="Describe this state for your members."
+          value={formData?.description}
+          onChange={(e) => handleFormData("description", e.target.value)}
+          hasError={(errors && Boolean(errors.description)) || false}
+          className="w-full text-sm min-h-14 resize-none"
+        />
+
+        <div className="flex space-x-2 items-center">
+          <Button onClick={formSubmit} variant="primary" size="sm" disabled={buttonDisabled}>
+            {buttonTitle}
+          </Button>
+          <Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./update";
+export * from "./form";

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

@@ -0,0 +1,90 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { STATE_TRACKER_EVENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateForm } from "@/components/project-states";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+
+type TStateUpdate = {
+  state: IState;
+  updateStateCallback: TStateOperationsCallbacks["updateState"];
+  shouldTrackEvents: boolean;
+  handleClose: () => void;
+};
+
+export const StateUpdate: FC<TStateUpdate> = observer((props) => {
+  const { state, updateStateCallback, shouldTrackEvents, 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);
+      if (shouldTrackEvents) {
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.update,
+          payload: {
+            state_group: state.group,
+            id: state.id,
+          },
+        });
+      }
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State updated successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as unknown 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.",
+        });
+        if (shouldTrackEvents) {
+          captureError({
+            eventName: STATE_TRACKER_EVENTS.update,
+            payload: {
+              state_group: state.group,
+              id: state.id,
+            },
+          });
+        }
+        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,135 @@
+"use client";
+
+import type { FC } from "react";
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+import { ChevronDown, Plus } from "lucide-react";
+// plane imports
+import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/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;
+  shouldTrackEvents: boolean;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+  handleGroupCollapse: (groupKey: TStateGroups) => void;
+  handleExpand: (groupKey: TStateGroups) => void;
+};
+
+export const GroupItem: FC<TGroupItem> = observer((props) => {
+  const {
+    groupKey,
+    groupedStates,
+    states,
+    groupsExpanded,
+    isEditable,
+    stateOperationsCallbacks,
+    shouldTrackEvents,
+    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 border border-custom-border-200 rounded bg-custom-background-90 transition-all p-2",
+        groupItemClassName
+      )}
+      ref={dropElementRef}
+    >
+      <div className="flex justify-between items-center gap-2">
+        <div
+          className="w-full flex items-center cursor-pointer py-1"
+          onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
+        >
+          <div
+            className={cn(
+              "flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-all",
+              {
+                "rotate-0": currentStateExpanded,
+                "-rotate-90": !currentStateExpanded,
+              }
+            )}
+          >
+            <ChevronDown className="w-4 h-4" />
+          </div>
+          <div className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden">
+            <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
+          </div>
+          <div className="text-base font-medium text-custom-text-200 capitalize px-1">{groupKey}</div>
+        </div>
+        <button
+          type="button"
+          data-ph-element={STATE_TRACKER_ELEMENTS.STATE_GROUP_ADD_BUTTON}
+          className={cn(
+            "flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
+            (!isEditable || createState) && "cursor-not-allowed text-custom-text-400 hover:text-custom-text-400"
+          )}
+          onClick={() => {
+            if (!createState) {
+              handleExpand(groupKey);
+              setCreateState(true);
+            }
+          }}
+          disabled={!isEditable || createState}
+        >
+          <Plus className="w-4 h-4" />
+        </button>
+      </div>
+
+      {shouldShowEmptyState && (
+        <div className="flex flex-col justify-center items-center h-full py-4 text-sm text-custom-text-300">
+          <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}
+            shouldTrackEvents={shouldTrackEvents}
+            stateItemClassName={stateItemClassName}
+          />
+        </div>
+      )}
+
+      {isEditable && createState && (
+        <div className="">
+          <StateCreate
+            groupKey={groupKey}
+            handleClose={() => setCreateState(false)}
+            createStateCallback={stateOperationsCallbacks.createState}
+            shouldTrackEvents={shouldTrackEvents}
+          />
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,82 @@
+"use client";
+
+import type { FC } from "react";
+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;
+  shouldTrackEvents: boolean;
+  groupListClassName?: string;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+};
+
+export const GroupList: FC<TGroupList> = observer((props) => {
+  const {
+    groupedStates,
+    stateOperationsCallbacks,
+    isEditable,
+    shouldTrackEvents,
+    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}
+            shouldTrackEvents={shouldTrackEvents}
+            handleGroupCollapse={handleGroupCollapse}
+            handleExpand={handleExpand}
+            groupItemClassName={groupItemClassName}
+            stateItemClassName={stateItemClassName}
+          />
+        );
+      })}
+    </div>
+  );
+});

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

@@ -0,0 +1,13 @@
+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,12 @@
+"use client";
+
+import { Loader } from "@plane/ui";
+
+export const ProjectStateLoader = () => (
+  <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,122 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Loader, X } from "lucide-react";
+// plane imports
+import { STATE_TRACKER_EVENTS, STATE_TRACKER_ELEMENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { AlertModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TStateDelete = {
+  totalStates: number;
+  state: IState;
+  deleteStateCallback: TStateOperationsCallbacks["deleteState"];
+  shouldTrackEvents: boolean;
+};
+
+export const StateDelete: FC<TStateDelete> = observer((props) => {
+  const { totalStates, state, deleteStateCallback, shouldTrackEvents } = 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);
+      if (shouldTrackEvents) {
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: state.id,
+          },
+        });
+      }
+
+      setIsDelete(false);
+    } catch (error) {
+      const errorStatus = error as unknown as { status: number; data: { error: string } };
+      if (shouldTrackEvents) {
+        captureError({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: state.id,
+          },
+        });
+      }
+      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-custom-text-100">{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-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
+          isDeleteDisabled
+            ? "bg-custom-background-90 text-custom-text-200"
+            : "text-red-500 hover:bg-custom-background-80"
+        )}
+        disabled={isDeleteDisabled}
+        onClick={() => setIsDeleteModal(true)}
+        data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_DELETE_BUTTON}
+      >
+        <Tooltip
+          tooltipContent={
+            state.default ? "Cannot delete the default state." : totalStates === 1 ? `Cannot have an empty group.` : ``
+          }
+          isMobile={isMobile}
+          disabled={!isDeleteDisabled}
+          className="focus:outline-none"
+        >
+          {isDelete ? <Loader className="w-3.5 h-3.5 text-custom-text-200" /> : <X className="w-3.5 h-3.5" />}
+        </Tooltip>
+      </button>
+    </>
+  );
+});

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

@@ -0,0 +1,2 @@
+export * from "./mark-as-default";
+export * from "./delete";

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

@@ -0,0 +1,46 @@
+"use client";
+
+import type { FC } from "react";
+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: FC<TStateMarksAsDefault> = observer((props) => {
+  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-xs whitespace-nowrap transition-colors",
+        isDefault ? "text-custom-text-300" : "text-custom-text-200 hover:text-custom-text-100"
+      )}
+      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 @@
+"use client";
+
+import type { FC } from "react";
+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: FC<TProjectState> = observer((props) => {
+  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 (
+    <div className="py-3">
+      <GroupList
+        groupedStates={groupedProjectStates}
+        stateOperationsCallbacks={stateOperationsCallbacks}
+        isEditable={isEditable}
+        shouldTrackEvents
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { STATE_TRACKER_EVENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// constants
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type TStateDeleteModal = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IState | null;
+};
+
+export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) => {
+  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(() => {
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: data.id,
+          },
+        });
+        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.",
+          });
+        captureError({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: data.id,
+          },
+        });
+      })
+      .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-custom-text-100">{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,88 @@
+import type { SetStateAction } from "react";
+import { observer } from "mobx-react";
+import { GripVertical, Pencil } from "lucide-react";
+// plane imports
+import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
+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">;
+  shouldTrackEvents: boolean;
+};
+
+type TDisabledStateItemTitleProps = TBaseStateItemTitleProps & {
+  disabled: true;
+};
+
+export type TStateItemTitleProps = TEnabledStateItemTitleProps | TDisabledStateItemTitleProps;
+
+export const StateItemTitle = observer((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 items-center gap-2 w-full justify-between">
+      <div className="flex items-center gap-1 px-1">
+        {/* draggable indicator */}
+        {!disabled && stateCount != 1 && (
+          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
+            <GripVertical className="w-3 h-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="text-sm px-2 min-h-5">
+          <h6 className="text-sm font-medium">{state.name}</h6>
+          {shouldShowDescription && <p className="text-xs text-custom-text-200">{state.description}</p>}
+        </div>
+      </div>
+      {!disabled && (
+        <div className="hidden group-hover:flex items-center gap-2">
+          {/* state mark as default option */}
+          <div className="flex-shrink-0 text-xs 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-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
+              onClick={() => setUpdateStateModal(true)}
+              data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_EDIT_BUTTON}
+            >
+              <Pencil className="w-3 h-3" />
+            </button>
+            <StateDelete
+              totalStates={stateCount}
+              state={state}
+              deleteStateCallback={props.stateOperationsCallbacks.deleteState}
+              shouldTrackEvents={props.shouldTrackEvents}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,159 @@
+"use client";
+
+import type { FC } from "react";
+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;
+  shouldTrackEvents: boolean;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateItem: FC<TStateItem> = observer((props) => {
+  const {
+    groupKey,
+    groupedStates,
+    totalStates,
+    state,
+    stateOperationsCallbacks,
+    shouldTrackEvents,
+    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 as TStateGroups;
+              const edge = extractClosestEdge(destinationData) || undefined;
+              const payload: Partial<IState> = {
+                id: sourceData.id as string,
+                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}
+        shouldTrackEvents={shouldTrackEvents}
+        handleClose={() => setUpdateStateModal(false)}
+      />
+    );
+
+  return (
+    <Fragment>
+      {/* draggable drop top indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />
+      <div
+        ref={draggableElementRef}
+        className={cn(
+          "relative border border-custom-border-100 bg-custom-background-100 py-3 px-3.5 rounded group",
+          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,
+            }}
+            shouldTrackEvents={shouldTrackEvents}
+          />
+        )}
+      </div>
+      {/* draggable drop bottom indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />
+    </Fragment>
+  );
+});

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

@@ -0,0 +1,47 @@
+"use client";
+
+import type { FC } from "react";
+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;
+  shouldTrackEvents: boolean;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateList: FC<TStateList> = observer((props) => {
+  const {
+    groupKey,
+    groupedStates,
+    states,
+    stateOperationsCallbacks,
+    shouldTrackEvents,
+    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}
+          shouldTrackEvents={shouldTrackEvents}
+          stateItemClassName={stateItemClassName}
+        />
+      ))}
+    </>
+  );
+});