[WEB-1519] chore: update component structure in project state settings and implement DND (#5043)

* chore: updated project settings state

* chore: updated sorting on project state

* chore: updated grab handler in state item

* chore: Updated UI and added garb handler icon

* chore: handled top and bottom sequence in middle element swap

* chore: handled input state element char limit to 100

* chore: typos and code cleanup in create state

* chore: handled typos and comments wherever is required

* chore: handled sorting logic

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { FC, useState } from "react";
+import { observer } from "mobx-react";
+import { Plus } from "lucide-react";
+import { IState, TStateGroups } from "@plane/types";
+// components
+import { StateList, StateCreate } from "@/components/project-states";
+
+type TGroupItem = {
+  workspaceSlug: string;
+  projectId: string;
+  groupKey: TStateGroups;
+  groupedStates: Record<string, IState[]>;
+  states: IState[];
+};
+
+export const GroupItem: FC<TGroupItem> = observer((props) => {
+  const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
+  // state
+  const [createState, setCreateState] = useState(false);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-between items-center">
+        <div className="text-base font-medium text-custom-text-200 capitalize">{groupKey}</div>
+        <div
+          className="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"
+          onClick={() => !createState && setCreateState(true)}
+        >
+          <Plus className="w-4 h-4" />
+        </div>
+      </div>
+
+      {createState && (
+        <StateCreate
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          groupKey={groupKey}
+          handleClose={() => setCreateState(false)}
+        />
+      )}
+
+      <div id="group-droppable-container">
+        <StateList
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          groupKey={groupKey}
+          groupedStates={groupedStates}
+          states={states}
+        />
+      </div>
+    </div>
+  );
+});