[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/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx

@@ -1,17 +1,20 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core";
-import { ProjectSettingStateList } from "@/components/states";
+import { ProjectStateRoot } from "@/components/project-states";
 // hook
 import { useProject } from "@/hooks/store";
 
 const StatesSettingsPage = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
   // store
   const { currentProjectDetails } = useProject();
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
+
   return (
     <>
       <PageHead title={pageTitle} />
@@ -19,7 +22,9 @@ const StatesSettingsPage = observer(() => {
         <div className="flex items-center border-b border-custom-border-100 py-3.5">
           <h3 className="text-xl font-medium">States</h3>
         </div>
-        <ProjectSettingStateList />
+        {workspaceSlug && projectId && (
+          <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        )}
       </div>
     </>
   );