fix: merge conflicts resolved

.gitignore

@@ -16,7 +16,8 @@ node_modules
 
 # Production
 /build
-dist
+dist/
+out/
 
 # Misc
 .DS_Store

packages/editor/core/package.json

@@ -27,6 +27,7 @@
     "next-themes": "^0.2.1"
   },
   "dependencies": {
+    "react-moveable" : "^0.54.2",
     "@blueprintjs/popover2": "^2.0.10",
     "@tiptap/core": "^2.1.7",
     "@tiptap/extension-color": "^2.1.11",

packages/ui/package.json

@@ -16,6 +16,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
+    "@types/react-color" : "^3.0.9",
     "@types/node": "^20.5.2",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",

space/next.config.js

@@ -8,6 +8,9 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, "../"),
   },
+  images: {
+    unoptimized: true,
+  },
   output: "standalone",
 };
 

space/package.json

@@ -7,7 +7,8 @@
     "develop": "next dev -p 4000",
     "build": "next build",
     "start": "next start -p 4000",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
@@ -16,6 +17,8 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
     "@mui/material": "^5.14.1",
+    "@plane/ui": "*",
+    "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",

web/components/estimates/estimate-select.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+// types
+import { Tooltip } from "components/ui";
+import { Placement } from "@popperjs/core";
+// constants
+import { IEstimatePoint } from "types";
+
+type Props = {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  estimatePoints: IEstimatePoint[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const EstimateSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    estimatePoints,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options: { value: number | null; query: string; content: any }[] | undefined = estimatePoints?.map(
+    (estimate) => ({
+      value: estimate.key,
+      query: estimate.value,
+      content: (
+        <div className="flex items-center gap-2">
+          <Triangle className="h-3 w-3" strokeWidth={2} />
+          {estimate.value}
+        </div>
+      ),
+    })
+  );
+  options?.unshift({
+    value: null,
+    query: "none",
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        None
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = estimatePoints?.find((e) => e.key === value);
+  const label = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        <span className="truncate">{selectedEstimate?.value ?? "None"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={(val) => onChange(val as number | null)}
+      disabled={disabled}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};

web/components/estimates/index.ts

@@ -1,3 +1,4 @@
 export * from "./create-update-estimate-modal";
-export * from "./single-estimate";
 export * from "./delete-estimate-modal";
+export * from "./estimate-select";
+export * from "./single-estimate";

web/components/gantt-chart/chart/index.tsx

@@ -1,6 +1,4 @@
 import { FC, useEffect, useState } from "react";
-// next
-import { useRouter } from "next/router";
 // icons
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
@@ -13,7 +11,7 @@ import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
 // icons
-import { Expand, PlusIcon, Shrink } from "lucide-react";
+import { Expand, Shrink } from "lucide-react";
 // views
 import {
   // generateHourChart,
@@ -28,7 +26,6 @@ import {
   // getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
-// import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -65,15 +62,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   enableReorder,
   bottomSpacing,
 }) => {
-  // router
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
-  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
   // states
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null); // blocks state management starts
   // hooks
   const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = useChart();
@@ -297,44 +288,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
-          {chartBlocks && !(isCyclePage || isModulePage) && (
-            <div className="pl-2.5 py-3">
-              {/* <GanttInlineCreateIssueForm
-                isOpen={isCreateIssueFormOpen}
-                handleClose={() => setIsCreateIssueFormOpen(false)}
-                onSuccess={() => {
-                  const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
-
-                  const timeoutId = setTimeout(() => {
-                    if (ganttSidebar)
-                      ganttSidebar.scrollBy({
-                        top: ganttSidebar.scrollHeight,
-                        left: 0,
-                        behavior: "smooth",
-                      });
-                    clearTimeout(timeoutId);
-                  }, 10);
-                }}
-                prePopulatedData={{
-                  start_date: new Date(Date.now()).toISOString().split("T")[0],
-                  target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              /> */}
-
-              {!isCreateIssueFormOpen && (
-                <button
-                  type="button"
-                  onClick={() => setIsCreateIssueFormOpen(true)}
-                  className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pl-[1.875rem] py-1 rounded-md"
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-                </button>
-              )}
-            </div>
-          )}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"

web/components/gantt-chart/cycle-sidebar.tsx

@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};

web/components/gantt-chart/module-sidebar.tsx

@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};

web/components/gantt-chart/sidebar.tsx

@@ -6,6 +6,8 @@ import { MoreVertical } from "lucide-react";
 import { useChart } from "./hooks";
 // ui
 import { Loader } from "@plane/ui";
+// components
+import { GanttInlineCreateIssueForm } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -17,11 +19,12 @@ type Props = {
   blocks: IGanttBlock[] | null;
   SidebarBlockRender: React.FC<any>;
   enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const GanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder, enableQuickIssueCreate } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -150,6 +153,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
               )}
               {droppableProvided.placeholder}
             </>
+            <GanttInlineCreateIssueForm />
           </div>
         )}
       </StrictModeDroppable>

web/components/headers/index.ts

@@ -18,3 +18,4 @@ export * from "./project-draft-issues";
 export * from "./project-archived-issue-details";
 export * from "./project-archived-issues";
 export * from "./project-issue-details";
+export * from "./user-profile";

web/components/headers/user-profile.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
+// hooks
+import { observer } from "mobx-react-lite";
+
+export const UserProfileHeader: FC = observer(() => {
+  const router = useRouter();
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem title="User Profile" unshrinkTitle />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -44,12 +44,23 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
-                  <CalendarWeekDays key={weekIndex} week={week} issues={issues} quickActions={quickActions} />
+                  <CalendarWeekDays
+                    key={weekIndex}
+                    week={week}
+                    issues={issues}
+                    enableQuickIssueCreate
+                    quickActions={quickActions}
+                  />
                 ))}
             </div>
           )}
           {layout === "week" && (
-            <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} quickActions={quickActions} />
+            <CalendarWeekDays
+              week={calendarStore.allDaysOfActiveWeek}
+              issues={issues}
+              enableQuickIssueCreate
+              quickActions={quickActions}
+            />
           )}
         </div>
       </div>

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -4,7 +4,7 @@ import { Droppable } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
+import { CalendarIssueBlocks, ICalendarDate, CalendarInlineCreateIssueForm } from "components/issues";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 // types
@@ -17,10 +17,11 @@ type Props = {
   date: ICalendarDate;
   issues: IIssueGroupedStructure | null;
   quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
-  const { date, issues, quickActions } = props;
+  const { date, issues, quickActions, enableQuickIssueCreate } = props;
 
   const { issueFilter: issueFilterStore } = useMobxStore();
 
@@ -29,35 +30,56 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const issuesList = issues ? (issues as IIssueGroupedStructure)[renderDateFormat(date.date)] : null;
 
   return (
-    <Droppable droppableId={renderDateFormat(date.date)}>
-      {(provided, snapshot) => (
+    <>
+      <div className="group w-full h-full relative flex flex-col bg-custom-background-90">
+        {/* header */}
         <div
-          className={`flex-grow p-2 space-y-1 w-full flex flex-col overflow-hidden ${
-            snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
+          className={`text-xs text-right flex-shrink-0 py-1 px-2 ${
+            calendarLayout === "month" // if month layout, highlight current month days
+              ? date.is_current_month
+                ? "font-medium"
+                : "text-custom-text-300"
+              : "font-medium" // if week layout, highlight all days
+          } ${
+            date.date.getDay() === 0 || date.date.getDay() === 6
               ? "bg-custom-background-90"
               : "bg-custom-background-100"
-          } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
-          {...provided.droppableProps}
-          ref={provided.innerRef}
+          }`}
         >
-          <>
-            <div
-              className={`text-xs text-right ${
-                calendarLayout === "month" // if month layout, highlight current month days
-                  ? date.is_current_month
-                    ? "font-medium"
-                    : "text-custom-text-300"
-                  : "font-medium" // if week layout, highlight all days
-              }`}
-            >
-              {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
-              {date.date.getDate()}
-            </div>
-            <CalendarIssueBlocks issues={issuesList} quickActions={quickActions} />
-            {provided.placeholder}
-          </>
+          {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
+          {date.date.getDate()}
         </div>
-      )}
-    </Droppable>
+
+        {/* content */}
+        <div className="w-full h-full">
+          <Droppable droppableId={renderDateFormat(date.date)} isDropDisabled={false}>
+            {(provided, snapshot) => (
+              <div
+                className={`h-full w-full overflow-y-auto select-none ${
+                  snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
+                    ? "bg-custom-background-90"
+                    : "bg-custom-background-100"
+                } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                <CalendarIssueBlocks issues={issuesList} quickActions={quickActions} />
+                {enableQuickIssueCreate && (
+                  <div className="py-1 px-2">
+                    <CalendarInlineCreateIssueForm
+                      groupId={renderDateFormat(date.date)}
+                      prePopulatedData={{
+                        target_date: renderDateFormat(date.date),
+                      }}
+                    />
+                  </div>
+                )}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </div>
+      </div>
+    </>
   );
 });

web/components/issues/issue-layouts/calendar/index.ts

@@ -7,3 +7,4 @@ export * from "./header";
 export * from "./issue-blocks";
 export * from "./week-days";
 export * from "./week-header";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { Transition } from "@headlessui/react";
+import { useForm } from "react-hook-form";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// icons
+import { PlusIcon } from "lucide-react";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  dependencies?: any[];
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
+  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
+
+  const router = useRouter();
+  const { moduleId, cycleId, viewId } = router.query;
+
+  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const { right } = ref.current.getBoundingClientRect();
+
+    const width = right;
+
+    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
+
+    if (width > innerWidth) setIsThereSpaceOnRight(false);
+    else setIsThereSpaceOnRight(true);
+  }, [ref, deps, container]);
+
+  return isThereSpaceOnRight;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, dependencies = [], groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLDivElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          ref={ref}
+          className={`transition-all z-20 w-full ${
+            isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
+          }`}
+        >
+          <form
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      </Transition>
+
+      {!isOpen && (
+        <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
+          <button
+            type="button"
+            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-1 py-1.5 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-4 w-4" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -17,42 +17,44 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
 
   return (
-    <div className="space-y-2 h-full w-full overflow-y-auto p-0.5">
+    <>
       {issues?.map((issue, index) => (
         <Draggable key={issue.id} draggableId={issue.id} index={index}>
           {(provided, snapshot) => (
-            <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
-              <a
-                className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
-                  snapshot.isDragging
-                    ? "shadow-custom-shadow-rg bg-custom-background-90"
-                    : "bg-custom-background-100 hover:bg-custom-background-90"
-                }`}
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-              >
-                <span
-                  className="h-full w-0.5 rounded flex-shrink-0"
-                  style={{
-                    backgroundColor: issue.state_detail.color,
-                  }}
-                />
-                <div className="text-xs text-custom-text-300 flex-shrink-0">
-                  {issue.project_detail.identifier}-{issue.sequence_id}
-                </div>
-                <h6 className="text-xs flex-grow truncate">{issue.name}</h6>
-                <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                {/* <IssueQuickActions
-                    issue={issue}
-                    handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
-                    handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
-                  /> */}
-              </a>
-            </Link>
+            <div
+              className="p-1 px-2 relative"
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+              ref={provided.innerRef}
+            >
+              {issue?.tempId !== undefined && (
+                <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+              )}
+              <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
+                <a
+                  className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
+                    snapshot.isDragging
+                      ? "shadow-custom-shadow-rg bg-custom-background-90"
+                      : "bg-custom-background-100 hover:bg-custom-background-90"
+                  }`}
+                >
+                  <span
+                    className="h-full w-0.5 rounded flex-shrink-0"
+                    style={{
+                      backgroundColor: issue.state_detail.color,
+                    }}
+                  />
+                  <div className="text-xs text-custom-text-300 flex-shrink-0">
+                    {issue.project_detail.identifier}-{issue.sequence_id}
+                  </div>
+                  <h6 className="text-xs flex-grow truncate">{issue.name}</h6>
+                  <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
+                </a>
+              </Link>
+            </div>
           )}
         </Draggable>
       ))}
-    </div>
+    </>
   );
 });

web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx

@@ -11,12 +11,16 @@ import { IIssueGroupedStructure } from "store/issue";
 import { IIssue } from "types";
 
 export const CycleCalendarLayout: React.FC = observer(() => {
-  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore, issueDetail: issueDetailStore } = useMobxStore();
+  const {
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    cycleIssueCalendarView: cycleIssueCalendarViewStore,
+  } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query;
 
-  // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
     if (!result) return;
 
@@ -26,7 +30,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
     // return if dropped on the same date
     if (result.destination.droppableId === result.source.droppableId) return;
 
-    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+    cycleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
   };
 
   const issues = cycleIssueStore.getIssues;

web/components/issues/issue-layouts/calendar/roots/module-root.tsx

@@ -15,12 +15,12 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     moduleIssue: moduleIssueStore,
     issueFilter: issueFilterStore,
     issueDetail: issueDetailStore,
+    moduleIssueCalendarView: moduleIssueCalendarViewStore,
   } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query;
 
-  // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
     if (!result) return;
 
@@ -30,7 +30,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     // return if dropped on the same date
     if (result.destination.droppableId === result.source.droppableId) return;
 
-    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+    moduleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
   };
 
   const issues = moduleIssueStore.getIssues;

web/components/issues/issue-layouts/calendar/roots/project-root.tsx

@@ -11,12 +11,16 @@ import { IIssueGroupedStructure } from "store/issue";
 import { IIssue } from "types";
 
 export const CalendarLayout: React.FC = observer(() => {
-  const { issue: issueStore, issueFilter: issueFilterStore, issueDetail: issueDetailStore } = useMobxStore();
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    issueCalendarView: issueCalendarViewStore,
+  } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
     if (!result) return;
 
@@ -26,7 +30,7 @@ export const CalendarLayout: React.FC = observer(() => {
     // return if dropped on the same date
     if (result.destination.droppableId === result.source.droppableId) return;
 
-    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+    issueCalendarViewStore?.handleDragDrop(result.source, result.destination);
   };
 
   const issues = issueStore.getIssues;

web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx

@@ -15,12 +15,12 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     projectViewIssues: projectViewIssuesStore,
     issueFilter: issueFilterStore,
     issueDetail: issueDetailStore,
+    projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
   } = useMobxStore();
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
     if (!result) return;
 
@@ -30,7 +30,7 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     // return if dropped on the same date
     if (result.destination.droppableId === result.source.droppableId) return;
 
-    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+    projectViewIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
   };
 
   const issues = projectViewIssuesStore.getIssues;

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -15,10 +15,11 @@ type Props = {
   issues: IIssueGroupedStructure | null;
   week: ICalendarWeek | undefined;
   quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
-  const { issues, week, quickActions } = props;
+  const { issues, week, quickActions, enableQuickIssueCreate } = props;
 
   const { issueFilter: issueFilterStore } = useMobxStore();
 
@@ -37,7 +38,13 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
         if (!showWeekends && (date.date.getDay() === 0 || date.date.getDay() === 6)) return null;
 
         return (
-          <CalendarDayTile key={renderDateFormat(date.date)} date={date} issues={issues} quickActions={quickActions} />
+          <CalendarDayTile
+            key={renderDateFormat(date.date)}
+            date={date}
+            issues={issues}
+            quickActions={quickActions}
+            enableQuickIssueCreate={enableQuickIssueCreate}
+          />
         );
       })}
     </div>

web/components/issues/issue-layouts/gantt/index.ts

@@ -3,3 +3,4 @@ export * from "./cycle-root";
 export * from "./module-root";
 export * from "./project-view-root";
 export * from "./root";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+import { PlusIcon } from "lucide-react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// types
+import { IIssue } from "types";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <input
+      type="text"
+      autoComplete="off"
+      placeholder="Issue Title"
+      {...register("name", {
+        required: "Issue title is required.",
+      })}
+      className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+    />
+  );
+};
+
+export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      start_date: renderDateFormat(new Date()),
+      target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <form
+          ref={ref}
+          className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
+          onSubmit={handleSubmit(onSubmitHandler)}
+        >
+          <div className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" />
+          <h4 className="text-sm text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+          <Inputs register={register} setFocus={setFocus} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/kanban/block.tsx

@@ -2,7 +2,7 @@ import { Draggable } from "@hello-pangea/dnd";
 // components
 import { KanBanProperties } from "./properties";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface IssueBlockProps {
   sub_group_id: string;
@@ -18,10 +18,27 @@ interface IssueBlockProps {
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   displayProperties: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { sub_group_id, columnId, index, issue, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    index,
+    issue,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    states,
+    labels,
+    members,
+    estimates,
+  } = props;
 
   const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
     if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
@@ -37,6 +54,9 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {...provided.dragHandleProps}
             ref={provided.innerRef}
           >
+            {issue.tempId !== undefined && (
+              <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+            )}
             <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
               {quickActions(
                 !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
@@ -54,7 +74,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
-              <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
+              <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
               <div>
                 <KanBanProperties
                   sub_group_id={sub_group_id}
@@ -62,6 +82,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                   issue={issue}
                   handleIssues={updateIssue}
                   display_properties={displayProperties}
+                  states={states}
+                  labels={labels}
+                  members={members}
+                  estimates={estimates}
                 />
               </div>
             </div>

web/components/issues/issue-layouts/kanban/blocks-list.tsx

@@ -1,6 +1,6 @@
 // components
 import { KanbanIssueBlock } from "components/issues";
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface IssueBlocksListProps {
   sub_group_id: string;
@@ -15,10 +15,26 @@ interface IssueBlocksListProps {
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
-  const { sub_group_id, columnId, issues, isDragDisabled, handleIssues, quickActions, display_properties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    issues,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    display_properties,
+    states,
+    labels,
+    members,
+    estimates,
+  } = props;
 
   return (
     <>
@@ -35,6 +51,10 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
               columnId={columnId}
               sub_group_id={sub_group_id}
               isDragDisabled={isDragDisabled}
+              states={states}
+              labels={labels}
+              members={members}
+              estimates={estimates}
             />
           ))}
         </>

web/components/issues/issue-layouts/kanban/default.tsx

@@ -5,9 +5,9 @@ import { Droppable } from "@hello-pangea/dnd";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
-import { KanbanIssueBlocksList } from "components/issues";
+import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
 
@@ -29,6 +29,12 @@ export interface IGroupByKanBan {
   display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  enableQuickIssueCreate?: boolean;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  priorities: any;
+  estimates: IEstimatePoint[] | null;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -45,6 +51,12 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     display_properties,
     kanBanToggle,
     handleKanBanToggle,
+    states,
+    labels,
+    members,
+    priorities,
+    estimates,
+    enableQuickIssueCreate,
   } = props;
 
   const verticalAlignPosition = (_list: any) =>
@@ -93,6 +105,10 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                         handleIssues={handleIssues}
                         quickActions={quickActions}
                         display_properties={display_properties}
+                        states={states}
+                        labels={labels}
+                        members={members}
+                        estimates={estimates}
                       />
                     ) : (
                       isDragDisabled && (
@@ -106,6 +122,16 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                 )}
               </Droppable>
             </div>
+            {enableQuickIssueCreate && (
+              <BoardInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                subGroupId={sub_group_id}
+                prePopulatedData={{
+                  ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
+                  ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+                }}
+              />
+            )}
           </div>
         ))}
     </div>
@@ -128,14 +154,14 @@ export interface IKanBan {
   display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
-
-  states: any;
+  states: IState[] | null;
   stateGroups: any;
   priorities: any;
-  labels: any;
-  members: any;
-  projects: any;
-  estimates: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  estimates: IEstimatePoint[] | null;
+  enableQuickIssueCreate?: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -156,6 +182,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     members,
     projects,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   const { project: projectStore, issueKanBanView: issueKanBanViewStore } = useMobxStore();
@@ -176,6 +203,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -193,6 +226,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -210,6 +249,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -227,6 +272,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -244,6 +295,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -261,6 +318,12 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
     </div>

web/components/issues/issue-layouts/kanban/index.ts

@@ -1,5 +1,4 @@
 export * from "./block";
+export * from "./roots";
 export * from "./blocks-list";
-export * from "./cycle-root";
-export * from "./module-root";
-export * from "./root";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+import { PlusIcon } from "lucide-react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  subGroupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <div>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 pl-0 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </div>
+  );
+};
+
+export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId, subGroupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: subGroupId ?? null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -10,190 +10,196 @@ import { IssuePropertyAssignee } from "../properties/assignee";
 import { IssuePropertyEstimates } from "../properties/estimates";
 import { IssuePropertyDate } from "../properties/date";
 import { Tooltip } from "@plane/ui";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite, TIssuePriorities } from "types";
 
 export interface IKanBanProperties {
   sub_group_id: string;
   columnId: string;
-  issue: any;
-  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  issue: IIssue;
+  handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
   display_properties: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
-export const KanBanProperties: React.FC<IKanBanProperties> = observer(
-  ({ sub_group_id, columnId: group_id, issue, handleIssues, display_properties }) => {
-    const handleState = (id: string) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, state: id }
-        );
-    };
+export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
+  const {
+    sub_group_id,
+    columnId: group_id,
+    issue,
+    handleIssues,
+    display_properties,
+    states,
+    labels,
+    members,
+    estimates,
+  } = props;
 
-    const handlePriority = (id: string) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, priority: id }
-        );
-    };
-
-    const handleLabel = (ids: string[]) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, labels: ids }
-        );
-    };
-
-    const handleAssignee = (ids: string[]) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, assignees: ids }
-        );
-    };
-
-    const handleStartDate = (date: string) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, start_date: date }
-        );
-    };
-
-    const handleTargetDate = (date: string) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, target_date: date }
-        );
-    };
-
-    const handleEstimate = (id: string) => {
-      if (handleIssues)
-        handleIssues(
-          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-          !group_id && group_id === "null" ? null : group_id,
-          { ...issue, estimate_point: id }
-        );
-    };
-
-    return (
-      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
-        {/* basic properties */}
-        {/* state */}
-        {display_properties && display_properties?.state && (
-          <IssuePropertyState
-            value={issue?.state || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleState(id)}
-            disabled={false}
-          />
-        )}
-
-        {/* priority */}
-        {display_properties && display_properties?.priority && (
-          <IssuePropertyPriority
-            value={issue?.priority || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handlePriority(id)}
-            disabled={false}
-          />
-        )}
-
-        {/* label */}
-        {display_properties && display_properties?.labels && (
-          <IssuePropertyLabels
-            value={issue?.labels || null}
-            dropdownArrow={false}
-            onChange={(ids: string[]) => handleLabel(ids)}
-            disabled={false}
-          />
-        )}
-
-        {/* assignee */}
-        {display_properties && display_properties?.assignee && (
-          <IssuePropertyAssignee
-            value={issue?.assignees || null}
-            dropdownArrow={false}
-            onChange={(ids: string[]) => handleAssignee(ids)}
-            disabled={false}
-          />
-        )}
-
-        {/* start date */}
-        {display_properties && display_properties?.start_date && (
-          <IssuePropertyDate
-            value={issue?.start_date || null}
-            onChange={(date: string) => handleStartDate(date)}
-            disabled={false}
-          />
-        )}
-
-        {/* target/due date */}
-        {display_properties && display_properties?.due_date && (
-          <IssuePropertyDate
-            value={issue?.target_date || null}
-            onChange={(date: string) => handleTargetDate(date)}
-            disabled={false}
-          />
-        )}
-
-        {/* estimates */}
-        {display_properties && display_properties?.estimate && (
-          <IssuePropertyEstimates
-            value={issue?.estimate_point?.toString() || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleEstimate(id)}
-            disabled={false}
-            workspaceSlug={issue?.workspace_detail?.slug || null}
-            projectId={issue?.project_detail?.id || null}
-          />
-        )}
-
-        {/* extra render properties */}
-        {/* sub-issues */}
-        {display_properties && display_properties?.sub_issue_count && (
-          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-                <Layers width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
-            </div>
-          </Tooltip>
-        )}
-
-        {/* attachments */}
-        {display_properties && display_properties?.attachment_count && (
-          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                <Paperclip width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
-            </div>
-          </Tooltip>
-        )}
-
-        {/* link */}
-        {display_properties && display_properties?.link && (
-          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-                <Link width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
-            </div>
-          </Tooltip>
-        )}
-      </div>
+  const handleState = (state: IState) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, state: state.id }
     );
-  }
-);
+  };
+
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, priority: value }
+    );
+  };
+
+  const handleLabel = (ids: string[]) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, labels_list: ids }
+    );
+  };
+
+  const handleAssignee = (ids: string[]) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, assignees_list: ids }
+    );
+  };
+
+  const handleStartDate = (date: string) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, start_date: date }
+    );
+  };
+
+  const handleTargetDate = (date: string) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, target_date: date }
+    );
+  };
+
+  const handleEstimate = (value: number | null) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, estimate_point: value }
+    );
+  };
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {display_properties && display_properties?.state && (
+        <IssuePropertyState
+          value={issue?.state_detail || null}
+          onChange={handleState}
+          states={states}
+          disabled={false}
+          hideDropdownArrow={true}
+        />
+      )}
+
+      {/* priority */}
+      {display_properties && display_properties?.priority && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          onChange={handlePriority}
+          disabled={false}
+          hideDropdownArrow={true}
+        />
+      )}
+
+      {/* label */}
+      {display_properties && display_properties?.labels && (
+        <IssuePropertyLabels
+          value={issue?.labels || null}
+          onChange={handleLabel}
+          labels={labels}
+          disabled={false}
+          hideDropdownArrow={true}
+        />
+      )}
+
+      {/* assignee */}
+      {display_properties && display_properties?.assignee && (
+        <IssuePropertyAssignee
+          value={issue?.assignees || null}
+          hideDropdownArrow={true}
+          onChange={handleAssignee}
+          members={members}
+          disabled={false}
+        />
+      )}
+
+      {/* start date */}
+      {display_properties && display_properties?.start_date && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={false}
+          placeHolder="Start date"
+        />
+      )}
+
+      {/* target/due date */}
+      {display_properties && display_properties?.due_date && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={false}
+          placeHolder="Target date"
+        />
+      )}
+
+      {/* estimates */}
+      {display_properties && display_properties?.estimate && (
+        <IssuePropertyEstimates
+          value={issue?.estimate_point || null}
+          onChange={handleEstimate}
+          estimatePoints={estimates}
+          disabled={false}
+          hideDropdownArrow={true}
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {display_properties && display_properties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* attachments */}
+      {display_properties && display_properties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* link */}
+      {display_properties && display_properties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -5,9 +5,11 @@ import { DragDropContext } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanBanSwimLanes } from "./swimlanes";
-import { KanBan } from "./default";
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
 import { CycleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -25,7 +27,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, cycleId } = router.query;
+  const { workspaceSlug, projectId, cycleId } = router.query;
 
   const issues = cycleIssueStore?.getIssues;
 
@@ -60,12 +62,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       if (!workspaceSlug || !cycleId) return;
 
       if (action === "update") {
-        cycleIssueStore.updateIssueStructure(group_by, null, issue);
+        cycleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
         issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
       }
-      if (action === "delete") cycleIssueStore.deleteIssue(group_by, null, issue);
+      if (action === "delete") cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
       if (action === "remove" && issue.bridge_id) {
-        cycleIssueStore.deleteIssue(group_by, null, issue);
+        cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
         cycleIssueStore.removeIssueFromCycle(
           workspaceSlug.toString(),
           issue.project,
@@ -81,13 +83,18 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
   };
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@@ -113,9 +120,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         ) : (
           <KanBanSwimLanes
@@ -138,9 +145,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/index.ts

@@ -0,0 +1,5 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";

web/components/issues/issue-layouts/kanban/roots/module-root.tsx

@@ -5,9 +5,11 @@ import { DragDropContext } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanBanSwimLanes } from "./swimlanes";
-import { KanBan } from "./default";
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
 import { ModuleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -25,7 +27,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query;
+  const { workspaceSlug, projectId, moduleId } = router.query;
 
   const issues = moduleIssueStore?.getIssues;
 
@@ -81,13 +83,18 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
     moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
   };
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@@ -113,9 +120,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         ) : (
           <KanBanSwimLanes
@@ -138,9 +145,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx

@@ -5,8 +5,8 @@ import { DragDropContext } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanBanSwimLanes } from "./swimlanes";
-import { KanBan } from "./default";
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
 // constants
 import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
@@ -79,7 +79,6 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
   const projects = projectStore?.workspaceProjects || null;
-  const estimates = null;
 
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@@ -104,9 +103,9 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={null}
           />
         ) : (
           <KanBanSwimLanes
@@ -128,9 +127,9 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={null}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/project-root.tsx

@@ -1,13 +1,15 @@
-import { FC, useCallback } from "react";
+import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { DragDropContext } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanBanSwimLanes } from "./swimlanes";
-import { KanBan } from "./default";
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -15,9 +17,9 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IKanBanLayout {}
 
-export const KanBanLayout: FC = observer(() => {
+export const KanBanLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     project: projectStore,
@@ -72,13 +74,18 @@ export const KanBanLayout: FC = observer(() => {
     issueKanBanViewStore.handleKanBanToggle(toggle, value);
   };
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@@ -103,9 +110,10 @@ export const KanBanLayout: FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            enableQuickIssueCreate
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         ) : (
           <KanBanSwimLanes
@@ -127,9 +135,9 @@ export const KanBanLayout: FC = observer(() => {
             stateGroups={stateGroups}
             priorities={priorities}
             labels={labels}
-            members={members}
+            members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates}
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx

@@ -4,8 +4,8 @@ import { DragDropContext } from "@hello-pangea/dnd";
 // mobx
 import { observer } from "mobx-react-lite";
 // components
-import { KanBanSwimLanes } from "./swimlanes";
-import { KanBan } from "./default";
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -14,7 +14,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IViewKanBanLayout {}
 
-export const ViewKanBanLayout: React.FC = observer(() => {
+export const ProjectViewKanBanLayout: React.FC = observer(() => {
   const {
     project: projectStore,
     issue: issueStore,

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -7,7 +7,7 @@ import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
 import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
 import { KanBan } from "./default";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
 
@@ -19,6 +19,11 @@ interface ISubGroupSwimlaneHeader {
   listKey: string;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   issues,
@@ -71,13 +76,13 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
-  states: any;
+  states: IState[] | null;
   stateGroups: any;
   priorities: any;
-  labels: any;
-  members: any;
-  projects: any;
-  estimates: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
   const {
@@ -148,6 +153,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   members={members}
                   projects={projects}
                   estimates={estimates}
+                  enableQuickIssueCreate
                 />
               </div>
             )}
@@ -171,13 +177,13 @@ export interface IKanBanSwimLanes {
   display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
-  states: any;
+  states: IState[] | null;
   stateGroups: any;
   priorities: any;
-  labels: any;
-  members: any;
-  projects: any;
-  estimates: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -213,6 +219,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
 
@@ -225,6 +236,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
 
@@ -237,6 +253,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
 
@@ -249,6 +270,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
 
@@ -261,6 +287,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`member.id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
 
@@ -273,6 +304,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             listKey={`member.id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            labels={labels}
+            members={members}
+            projects={projects}
+            estimates={estimates}
           />
         )}
       </div>

web/components/issues/issue-layouts/list/block.tsx

@@ -4,7 +4,7 @@ import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface IssueBlockProps {
   columnId: string;
@@ -12,28 +12,30 @@ interface IssueBlockProps {
   handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
-  states: any;
-  labels: any;
-  members: any;
-  priorities: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { columnId, issue, handleIssues, quickActions, display_properties, states, labels, members, priorities } =
-    props;
+  const { columnId, issue, handleIssues, quickActions, display_properties, states, labels, members, estimates } = props;
 
   const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
-    if (issueToUpdate && handleIssues) handleIssues(group_by, issueToUpdate, "update");
+    handleIssues(group_by, issueToUpdate, "update");
   };
 
   return (
     <>
-      <div className="text-sm p-3 shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
+      <div className="text-sm p-3 relative shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
         {display_properties && display_properties?.key && (
           <div className="flex-shrink-0 text-xs text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
           </div>
         )}
+        {issue?.tempId !== undefined && (
+          <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+        )}
         <IssuePeekOverview
           workspaceSlug={issue?.workspace_detail?.slug}
           projectId={issue?.project_detail?.id}
@@ -55,7 +57,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
             states={states}
             labels={labels}
             members={members}
-            priorities={priorities}
+            estimates={estimates}
           />
           {quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
         </div>

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 // components
 import { IssueBlock } from "components/issues";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface Props {
   columnId: string;
@@ -10,14 +10,14 @@ interface Props {
   handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
-  states: any;
-  labels: any;
-  members: any;
-  priorities: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { columnId, issues, handleIssues, quickActions, display_properties, states, labels, members, priorities } =
+  const { columnId, issues, handleIssues, quickActions, display_properties, states, labels, members, estimates } =
     props;
 
   return (
@@ -35,7 +35,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
             states={states}
             labels={labels}
             members={members}
-            priorities={priorities}
+            estimates={estimates}
           />
         ))}
     </>

web/components/issues/issue-layouts/list/default.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { ListGroupByHeaderRoot } from "./headers/group-by-root";
-import { IssueBlock } from "./block";
+import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
+// types
+import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { getValueFromObject } from "constants/issue";
-import { IIssue } from "types";
-import { IssueBlocksList } from "./blocks-list";
 
 export interface IGroupByList {
   issues: any;
@@ -17,13 +17,14 @@ export interface IGroupByList {
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
   is_list?: boolean;
-  states: any;
-  labels: any;
-  members: any;
-  projects: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
   stateGroups: any;
   priorities: any;
-  estimates: any;
+  enableQuickIssueCreate?: boolean;
+  estimates: IEstimatePoint[] | null;
 }
 
 const GroupByList: React.FC<IGroupByList> = observer((props) => {
@@ -43,6 +44,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
     stateGroups,
     priorities,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   return (
@@ -72,10 +74,18 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                   states={states}
                   labels={labels}
                   members={members}
-                  priorities={priorities}
+                  estimates={estimates}
                 />
               )}
             </div>
+            {enableQuickIssueCreate && (
+              <ListInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                prePopulatedData={{
+                  [group_by!]: getValueFromObject(_list, listKey),
+                }}
+              />
+            )}
           </div>
         ))}
     </div>
@@ -90,13 +100,14 @@ export interface IList {
   handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
-  states: any;
-  labels: any;
-  members: any;
-  projects: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
   stateGroups: any;
   priorities: any;
-  estimates: any;
+  enableQuickIssueCreate?: boolean;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const List: React.FC<IList> = observer((props) => {
@@ -113,6 +124,7 @@ export const List: React.FC<IList> = observer((props) => {
     stateGroups,
     priorities,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   return (
@@ -134,6 +146,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -153,6 +166,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -172,6 +186,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -191,6 +206,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -210,6 +226,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -229,6 +246,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -248,6 +266,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -267,6 +286,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
     </div>

web/components/issues/issue-layouts/list/index.ts

@@ -1,5 +1,4 @@
+export * from "./roots";
 export * from "./block";
 export * from "./blocks-list";
-export * from "./cycle-root";
-export * from "./module-root";
-export * from "./root";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/list/inline-create-issue-form.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/list/properties.tsx

@@ -11,49 +11,48 @@ import { IssuePropertyDate } from "../properties/date";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
-import { IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite, TIssuePriorities } from "types";
 
 export interface IKanBanProperties {
   columnId: string;
-  issue: any;
-  handleIssues?: (group_by: string | null, issue: IIssue) => void;
+  issue: IIssue;
+  handleIssues: (group_by: string | null, issue: IIssue) => void;
   display_properties: any;
-  states: any;
-  labels: any;
-  members: any;
-  priorities: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
-  const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, priorities } = props;
+  const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, estimates } = props;
 
-  const handleState = (id: string) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
+  const handleState = (state: IState) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id });
   };
 
-  const handlePriority = (id: string) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: value });
   };
 
   const handleLabel = (ids: string[]) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels_list: ids });
   };
 
   const handleAssignee = (ids: string[]) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees_list: ids });
   };
 
   const handleStartDate = (date: string) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
   };
 
   const handleTargetDate = (date: string) => {
-    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
   };
 
-  const handleEstimate = (id: string) => {
-    if (handleIssues)
-      handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
+  const handleEstimate = (value: number | null) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: value });
   };
 
   return (
@@ -62,22 +61,21 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       {/* state */}
       {display_properties && display_properties?.state && states && (
         <IssuePropertyState
-          value={issue?.state || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handleState(id)}
+          value={issue?.state_detail || null}
+          hideDropdownArrow={true}
+          onChange={handleState}
           disabled={false}
-          list={states}
+          states={states}
         />
       )}
 
       {/* priority */}
-      {display_properties && display_properties?.priority && priorities && (
+      {display_properties && display_properties?.priority && (
         <IssuePropertyPriority
           value={issue?.priority || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handlePriority(id)}
+          onChange={handlePriority}
           disabled={false}
-          list={priorities}
+          hideDropdownArrow={true}
         />
       )}
 
@@ -85,10 +83,10 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       {display_properties && display_properties?.labels && labels && (
         <IssuePropertyLabels
           value={issue?.labels || null}
-          dropdownArrow={false}
-          onChange={(ids: string[]) => handleLabel(ids)}
+          onChange={handleLabel}
+          labels={labels}
           disabled={false}
-          list={labels}
+          hideDropdownArrow={true}
         />
       )}
 
@@ -96,10 +94,10 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       {display_properties && display_properties?.assignee && members && (
         <IssuePropertyAssignee
           value={issue?.assignees || null}
-          dropdownArrow={false}
-          onChange={(ids: string[]) => handleAssignee(ids)}
+          hideDropdownArrow={true}
+          onChange={handleAssignee}
           disabled={false}
-          list={members}
+          members={members}
         />
       )}
 
@@ -109,7 +107,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
           disabled={false}
-          placeHolder={`Start date`}
+          placeHolder="Start date"
         />
       )}
 
@@ -119,31 +117,28 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
           disabled={false}
-          placeHolder={`Target date`}
+          placeHolder="Target date"
         />
       )}
 
       {/* estimates */}
       {display_properties && display_properties?.estimate && (
         <IssuePropertyEstimates
-          value={issue?.estimate_point?.toString() || null}
-          dropdownArrow={false}
-          onChange={(id: string) => handleEstimate(id)}
+          value={issue?.estimate_point || null}
+          estimatePoints={estimates}
+          hideDropdownArrow={true}
+          onChange={handleEstimate}
           disabled={false}
-          workspaceSlug={issue?.workspace_detail?.slug || null}
-          projectId={issue?.project_detail?.id || null}
         />
       )}
 
       {/* extra render properties */}
       {/* sub-issues */}
       {display_properties && display_properties?.sub_issue_count && (
-        <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-              <Layers width={10} strokeWidth={2} />
-            </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>
       )}
@@ -151,11 +146,9 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       {/* attachments */}
       {display_properties && display_properties?.attachment_count && (
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-            <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-              <Paperclip width={10} strokeWidth={2} />
-            </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
           </div>
         </Tooltip>
       )}
@@ -163,11 +156,9 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       {/* link */}
       {display_properties && display_properties?.link && (
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-              <Link width={10} strokeWidth={2} />
-            </div>
-            <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
           </div>
         </Tooltip>
       )}

web/components/issues/issue-layouts/list/roots/cycle-root.tsx

@@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { List } from "./default";
+import { List } from "../default";
 import { CycleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -15,7 +17,7 @@ export interface ICycleListLayout {}
 
 export const CycleListLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, cycleId } = router.query;
+  const { workspaceSlug, projectId, cycleId } = router.query;
 
   const {
     project: projectStore,
@@ -52,13 +54,18 @@ export const CycleListLayout: React.FC = observer(() => {
     [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
   );
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
@@ -79,9 +86,9 @@ export const CycleListLayout: React.FC = observer(() => {
         stateGroups={stateGroups}
         priorities={priorities}
         labels={labels}
-        members={members}
+        members={members?.map((m) => m.member) ?? null}
         projects={projects}
-        estimates={estimates}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
       />
     </div>
   );

web/components/issues/issue-layouts/list/roots/index.ts

@@ -0,0 +1,5 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";

web/components/issues/issue-layouts/list/roots/module-root.tsx

@@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { List } from "./default";
+import { List } from "../default";
 import { ModuleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -15,7 +17,7 @@ export interface IModuleListLayout {}
 
 export const ModuleListLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query;
+  const { workspaceSlug, projectId, moduleId } = router.query;
 
   const {
     project: projectStore,
@@ -52,13 +54,18 @@ export const ModuleListLayout: React.FC = observer(() => {
     [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
   );
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
@@ -79,9 +86,9 @@ export const ModuleListLayout: React.FC = observer(() => {
         stateGroups={stateGroups}
         priorities={priorities}
         labels={labels}
-        members={members}
+        members={members?.map((m) => m.member) ?? null}
         projects={projects}
-        estimates={estimates}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
       />
     </div>
   );

web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { List } from "./default";
+import { List } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
 // types
 import { IIssue } from "types";
@@ -50,7 +50,6 @@ export const ProfileIssuesListLayout: FC = observer(() => {
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
   const projects = projectStore?.workspaceProjects || null;
-  const estimates = null;
 
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
@@ -70,9 +69,9 @@ export const ProfileIssuesListLayout: FC = observer(() => {
         stateGroups={stateGroups}
         priorities={priorities}
         labels={labels}
-        members={members}
+        members={members?.map((m) => m.member) ?? null}
         projects={projects}
-        estimates={estimates}
+        estimates={null}
       />
     </div>
   );

web/components/issues/issue-layouts/list/roots/project-root.tsx

@@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { List } from "./default";
+import { List } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -13,7 +15,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export const ListLayout: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     project: projectStore,
@@ -41,13 +43,18 @@ export const ListLayout: FC = observer(() => {
     [issueStore, issueDetailStore, workspaceSlug]
   );
 
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
   const states = projectStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
-  const estimates = null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
 
   return (
     <div className="relative w-full h-full bg-custom-background-90">
@@ -67,9 +74,10 @@ export const ListLayout: FC = observer(() => {
         stateGroups={stateGroups}
         priorities={priorities}
         labels={labels}
-        members={members}
+        members={members?.map((m) => m.member) ?? null}
         projects={projects}
-        estimates={estimates}
+        enableQuickIssueCreate
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
       />
     </div>
   );

web/components/issues/issue-layouts/list/roots/project-view-root.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { List } from "./default";
+import { List } from "../default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -10,7 +10,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IViewListLayout {}
 
-export const ViewListLayout: React.FC = observer(() => {
+export const ProjectViewListLayout: React.FC = observer(() => {
   const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
 
   const issues = issueStore?.getIssues;

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -1,252 +1,28 @@
-import { FC, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { ChevronDown, Search, X, Check } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-
-interface IFiltersOption {
-  id: string;
-  title: string;
-  avatar: string;
-}
+import { MembersSelect } from "components/project";
+// types
+import { IUserLite } from "types";
 
 export interface IIssuePropertyAssignee {
-  value?: any;
-  onChange?: (id: any, data: any) => void;
+  value: string[];
+  onChange: (data: string[]) => void;
+  members: IUserLite[] | null;
   disabled?: boolean;
-  list?: any;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
+  hideDropdownArrow?: boolean;
 }
 
-export const IssuePropertyAssignee: FC<IIssuePropertyAssignee> = observer((props) => {
-  const { value, onChange, disabled, list, className, buttonClassName, optionsClassName, dropdownArrow = true } = props;
-
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  const options: IFiltersOption[] | [] =
-    (list &&
-      list?.length > 0 &&
-      list.map((_member: any) => ({
-        id: _member?.member?.id,
-        title: _member?.member?.display_name,
-        avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
-      }))) ||
-    [];
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-  const selectedOption: IFiltersOption[] =
-    (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
-
-  const filteredOptions: IFiltersOption[] =
-    search === ""
-      ? options && options.length > 0
-        ? options
-        : []
-      : options && options.length > 0
-      ? options.filter((_member: IFiltersOption) =>
-          _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-        )
-      : [];
-
-  const assigneeRenderLength = 5;
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
+  const { value, onChange, members, disabled = false, hideDropdownArrow = false } = props;
 
   return (
-    <Combobox
-      multiple={true}
-      as="div"
-      className={`${className}`}
-      value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
-      onChange={(data: string[]) => {
-        if (onChange && selectedOption) onChange(data, selectedOption);
-      }}
+    <MembersSelect
+      value={value}
+      onChange={onChange}
+      members={members ?? undefined}
       disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {selectedOption && selectedOption?.length > 0 ? (
-                <>
-                  {selectedOption?.length > 1 ? (
-                    <Tooltip
-                      tooltipHeading={`Assignees`}
-                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-                    >
-                      <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
-                        {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
-                          <div
-                            key={_assignee?.id}
-                            className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
-                          >
-                            {_assignee && _assignee.avatar ? (
-                              <img
-                                src={_assignee.avatar}
-                                className="absolute top-0 left-0 h-full w-full object-cover"
-                                alt={_assignee.title}
-                              />
-                            ) : (
-                              _assignee.title[0]
-                            )}
-                          </div>
-                        ))}
-                        {selectedOption.length > assigneeRenderLength && (
-                          <div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
-                            +{selectedOption?.length - assigneeRenderLength}
-                          </div>
-                        )}
-                      </div>
-                    </Tooltip>
-                  ) : (
-                    <Tooltip
-                      tooltipHeading={`Assignees`}
-                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-                    >
-                      <div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
-                        <div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
-                          {selectedOption[0] && selectedOption[0].avatar ? (
-                            <img
-                              src={selectedOption[0].avatar}
-                              className="absolute top-0 left-0 h-full w-full object-cover"
-                              alt={selectedOption[0].title}
-                            />
-                          ) : (
-                            <div className="w-full h-full bg-gray-700 flex justify-center items-center">
-                              {selectedOption[0].title[0]}
-                            </div>
-                          )}
-                        </div>
-                        <div className="line-clamp-1">{selectedOption[0].title}</div>
-                      </div>
-                    </Tooltip>
-                  )}
-                </>
-              ) : (
-                <Tooltip tooltipHeading={`Assignees`} tooltipContent={``}>
-                  <div className="text-xs">Select Assignees</div>
-                </Tooltip>
-              )}
-
-              {dropdownArrow && !disabled && (
-                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                  <ChevronDown width={14} strokeWidth={2} />
-                </div>
-              )}
-            </Combobox.Button>
-
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-              >
-                {options && options.length > 0 ? (
-                  <>
-                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        <Search width={12} strokeWidth={2} />
-                      </div>
-
-                      <div>
-                        <Combobox.Input
-                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                          value={search}
-                          onChange={(e) => setSearch(e.target.value)}
-                          placeholder="Search"
-                          displayValue={(assigned: any) => assigned?.name}
-                        />
-                      </div>
-
-                      {search && search.length > 0 && (
-                        <div
-                          onClick={() => setSearch("")}
-                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                        >
-                          <X width={12} strokeWidth={2} />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                      {filteredOptions ? (
-                        filteredOptions.length > 0 ? (
-                          filteredOptions.map((option) => (
-                            <Combobox.Option
-                              key={option.id}
-                              value={option.id}
-                              className={({ active }) =>
-                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                  active || (value && value.length > 0 && value.includes(option?.id))
-                                    ? "bg-custom-background-80"
-                                    : ""
-                                } ${
-                                  value && value.length > 0 && value.includes(option?.id)
-                                    ? "text-custom-text-100"
-                                    : "text-custom-text-200"
-                                }`
-                              }
-                            >
-                              <div className="flex items-center gap-1 w-full px-1">
-                                <div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
-                                  {option && option.avatar ? (
-                                    <img
-                                      src={option.avatar}
-                                      className="absolute top-0 left-0 h-full w-full object-cover"
-                                      alt={option.title}
-                                    />
-                                  ) : (
-                                    <div className="w-full h-full bg-gray-700 flex justify-center items-center">
-                                      {option.title[0]}
-                                    </div>
-                                  )}
-                                </div>
-                                <div className="line-clamp-1">{option.title}</div>
-                                {value && value.length > 0 && value.includes(option?.id) && (
-                                  <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                    <Check width={13} strokeWidth={2} />
-                                  </div>
-                                )}
-                              </div>
-                            </Combobox.Option>
-                          ))
-                        ) : (
-                          <span className="flex items-center gap-2 p-1">
-                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                          </span>
-                        )
-                      ) : (
-                        <p className="text-center text-custom-text-200">Loading...</p>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <p className="text-center text-custom-text-200">No options available.</p>
-                )}
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+      hideDropdownArrow={hideDropdownArrow}
+      multiple
+    />
   );
 });

web/components/issues/issue-layouts/properties/date.tsx

@@ -15,85 +15,81 @@ import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 import { renderDateFormat } from "helpers/date-time.helper";
 
 export interface IIssuePropertyDate {
-  value?: any;
-  onChange?: (date: any) => void;
+  value: any;
+  onChange: (date: any) => void;
   disabled?: boolean;
   placeHolder?: string;
 }
 
-export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer(
-  ({ value, onChange, disabled, placeHolder }) => {
-    const dropdownBtn = React.useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
+export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
+  const { value, onChange, disabled, placeHolder } = props;
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
 
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-    return (
-      <Popover as="div" className="relative">
-        {({ open }) => {
-          if (open) {
-            if (!isOpen) setIsOpen(true);
-          } else if (isOpen) setIsOpen(false);
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
-          return (
-            <>
-              <Popover.Button
-                ref={dropdownBtn}
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                }`}
-              >
-                <Tooltip tooltipHeading={placeHolder ? placeHolder : `Select date`} tooltipContent={value}>
-                  <div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
-                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                      <Calendar width={10} strokeWidth={2} />
-                    </div>
-                    {value ? (
-                      <>
-                        <div className="px-1 text-xs">{value}</div>
-                        <div
-                          className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
-                          onClick={() => {
-                            if (onChange) onChange(null);
-                          }}
-                        >
-                          <X width={10} strokeWidth={2} />
-                        </div>
-                      </>
-                    ) : (
-                      <div className="text-xs">{placeHolder ? placeHolder : `Select date`}</div>
-                    )}
-                  </div>
-                </Tooltip>
-              </Popover.Button>
+  return (
+    <Popover as="div" className="relative">
+      {({ open }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
 
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                <Popover.Panel
-                  ref={dropdownOptions}
-                  className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
-                >
-                  {({ close }) => (
-                    <DatePicker
-                      selected={value ? new Date(value) : new Date()}
-                      onChange={(val: any) => {
-                        if (onChange && val) {
-                          onChange(renderDateFormat(val));
-                          close();
-                        }
-                      }}
-                      dateFormat="dd-MM-yyyy"
-                      calendarClassName="h-full"
-                      inline
-                    />
+        return (
+          <>
+            <Popover.Button
+              ref={dropdownBtn}
+              className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }`}
+            >
+              <Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
+                <div className="overflow-hidden flex justify-center items-center gap-2">
+                  <Calendar className="h-3 w-3" strokeWidth={2} />
+                  {value && (
+                    <>
+                      <div className="text-xs">{value}</div>
+                      <div
+                        className="flex-shrink-0 flex justify-center items-center"
+                        onClick={() => {
+                          if (onChange) onChange(null);
+                        }}
+                      >
+                        <X className="h-2.5 w-2.5" strokeWidth={2} />
+                      </div>
+                    </>
                   )}
-                </Popover.Panel>
-              </div>
-            </>
-          );
-        }}
-      </Popover>
-    );
-  }
-);
+                </div>
+              </Tooltip>
+            </Popover.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Popover.Panel
+                ref={dropdownOptions}
+                className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
+              >
+                {({ close }) => (
+                  <DatePicker
+                    selected={value ? new Date(value) : new Date()}
+                    onChange={(val: any) => {
+                      if (onChange && val) {
+                        onChange(renderDateFormat(val));
+                        close();
+                      }
+                    }}
+                    dateFormat="dd-MM-yyyy"
+                    calendarClassName="h-full"
+                    inline
+                  />
+                )}
+              </Popover.Panel>
+            </div>
+          </>
+        );
+      }}
+    </Popover>
+  );
+});

web/components/issues/issue-layouts/properties/estimates.tsx

@@ -1,217 +1,28 @@
-import React from "react";
-// headless ui
-import { Combobox } from "@headlessui/react";
-// lucide icons
-import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-interface IFiltersOption {
-  id: string;
-  title: string;
-  key: string;
-}
+import { EstimateSelect } from "components/estimates";
+// types
+import { IEstimatePoint } from "types";
 
 export interface IIssuePropertyEstimates {
-  value?: any;
-  onChange?: (id: any) => void;
+  value: number | null;
+  onChange: (value: number | null) => void;
+  estimatePoints: IEstimatePoint[] | null;
   disabled?: boolean;
-
-  workspaceSlug?: string;
-  projectId?: string;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
+  hideDropdownArrow?: boolean;
 }
 
-export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer(
-  ({
-    value,
-    onChange,
-    disabled,
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer((props) => {
+  const { value, onChange, estimatePoints, disabled, hideDropdownArrow = false } = props;
 
-    workspaceSlug,
-    projectId,
-
-    className,
-    buttonClassName,
-    optionsClassName,
-    dropdownArrow = true,
-  }) => {
-    const { project: projectStore }: RootStore = useMobxStore();
-
-    const dropdownBtn = React.useRef<any>(null);
-    const dropdownOptions = React.useRef<any>(null);
-
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const [search, setSearch] = React.useState<string>("");
-
-    const projectDetail =
-      (workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null;
-    const projectEstimateId = (projectDetail && projectDetail?.estimate) || null;
-    const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null;
-
-    const options: IFiltersOption[] | [] =
-      (estimates &&
-        estimates.points &&
-        estimates.points.length > 0 &&
-        estimates.points.map((_estimate) => ({
-          id: _estimate?.id,
-          title: _estimate?.value,
-          key: _estimate?.key.toString(),
-        }))) ||
-      [];
-
-    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-    const selectedOption: IFiltersOption | null | undefined =
-      (value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null;
-
-    const filteredOptions: IFiltersOption[] =
-      search === ""
-        ? options && options.length > 0
-          ? options
-          : []
-        : options && options.length > 0
-        ? options.filter((_estimate: IFiltersOption) =>
-            _estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-          )
-        : [];
-
-    return (
-      <Combobox
-        as="div"
-        className={`${className}`}
-        value={selectedOption && selectedOption.key}
-        onChange={(data: string) => {
-          if (onChange) onChange(data);
-        }}
-        disabled={disabled}
-      >
-        {({ open }: { open: boolean }) => {
-          if (open) {
-            if (!isOpen) setIsOpen(true);
-          } else if (isOpen) setIsOpen(false);
-
-          return (
-            <>
-              <Combobox.Button
-                ref={dropdownBtn}
-                type="button"
-                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {selectedOption ? (
-                  <Tooltip tooltipHeading={`Estimates`} tooltipContent={selectedOption?.title}>
-                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
-                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
-                        <Triangle width={14} strokeWidth={2} />
-                      </div>
-                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                    </div>
-                  </Tooltip>
-                ) : (
-                  <Tooltip tooltipHeading={`Estimates`} tooltipContent={``}>
-                    <div className="text-xs">Select Estimates</div>
-                  </Tooltip>
-                )}
-
-                {dropdownArrow && !disabled && (
-                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                    <ChevronDown width={14} strokeWidth={2} />
-                  </div>
-                )}
-              </Combobox.Button>
-
-              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-                <Combobox.Options
-                  ref={dropdownOptions}
-                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-                >
-                  {options && options.length > 0 ? (
-                    <>
-                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                          <Search width={12} strokeWidth={2} />
-                        </div>
-
-                        <div>
-                          <Combobox.Input
-                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                            placeholder="Search"
-                            displayValue={(assigned: any) => assigned?.name}
-                          />
-                        </div>
-
-                        {search && search.length > 0 && (
-                          <div
-                            onClick={() => setSearch("")}
-                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                          >
-                            <X width={12} strokeWidth={2} />
-                          </div>
-                        )}
-                      </div>
-
-                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                        {filteredOptions ? (
-                          filteredOptions.length > 0 ? (
-                            filteredOptions.map((option) => (
-                              <Combobox.Option
-                                key={option.key}
-                                value={option.key}
-                                className={({ active, selected }) =>
-                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                    active || selected ? "bg-custom-background-80" : ""
-                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                                }
-                              >
-                                {({ selected }) => (
-                                  <div className="flex items-center gap-1 w-full px-1">
-                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
-                                      <Triangle width={14} strokeWidth={2} />
-                                    </div>
-                                    <div className="line-clamp-1">{option.title}</div>
-                                    {selected && (
-                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                        <Check width={13} strokeWidth={2} />
-                                      </div>
-                                    )}
-                                  </div>
-                                )}
-                              </Combobox.Option>
-                            ))
-                          ) : (
-                            <span className="flex items-center gap-2 p-1">
-                              <p className="text-left text-custom-text-200 ">No matching results</p>
-                            </span>
-                          )
-                        ) : (
-                          <p className="text-center text-custom-text-200">Loading...</p>
-                        )}
-                      </div>
-                    </>
-                  ) : (
-                    <p className="text-center text-custom-text-200">No options available.</p>
-                  )}
-                </Combobox.Options>
-              </div>
-            </>
-          );
-        }}
-      </Combobox>
-    );
-  }
-);
+  return (
+    <EstimateSelect
+      value={value}
+      onChange={onChange}
+      estimatePoints={estimatePoints ?? undefined}
+      buttonClassName="h-5"
+      disabled={disabled}
+      hideDropdownArrow={hideDropdownArrow}
+    />
+  );
+});

web/components/issues/issue-layouts/properties/labels.tsx

@@ -1,230 +1,28 @@
-import { FC, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { ChevronDown, Search, X, Check } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-
-interface IFiltersOption {
-  id: string;
-  title: string;
-  color: string | null;
-}
+import { LabelSelect } from "components/project";
+// types
+import { IIssueLabels } from "types";
 
 export interface IIssuePropertyLabels {
-  value?: any;
-  onChange?: (id: any, data: any) => void;
+  value: string[];
+  onChange: (data: string[]) => void;
+  labels: IIssueLabels[] | null;
   disabled?: boolean;
-  list?: any;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
+  hideDropdownArrow?: boolean;
 }
 
-export const IssuePropertyLabels: FC<IIssuePropertyLabels> = observer((props) => {
-  const {
-    value,
-    onChange,
-    disabled,
-    list,
-
-    className,
-    buttonClassName,
-    optionsClassName,
-    dropdownArrow = true,
-  } = props;
-
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  const options: IFiltersOption[] | [] =
-    (list &&
-      list?.length > 0 &&
-      list.map((_label: any) => ({
-        id: _label?.id,
-        title: _label?.name,
-        color: _label?.color || null,
-      }))) ||
-    [];
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-  const selectedOption: IFiltersOption[] =
-    (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
-
-  const filteredOptions: IFiltersOption[] =
-    search === ""
-      ? options && options.length > 0
-        ? options
-        : []
-      : options && options.length > 0
-      ? options.filter((_label: IFiltersOption) =>
-          _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-        )
-      : [];
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
+  const { value, onChange, labels, disabled, hideDropdownArrow = false } = props;
 
   return (
-    <Combobox
-      multiple={true}
-      as="div"
-      className={`${className}`}
-      value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
-      onChange={(data: string[]) => {
-        if (onChange && selectedOption) onChange(data, selectedOption);
-      }}
+    <LabelSelect
+      value={value}
+      onChange={onChange}
+      labels={labels ?? undefined}
+      buttonClassName="h-5"
       disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {selectedOption && selectedOption?.length > 0 ? (
-                <>
-                  {selectedOption?.length === 1 ? (
-                    <Tooltip
-                      tooltipHeading={`Labels`}
-                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-                    >
-                      <div className="flex-shrink-0 flex justify-center items-center gap-1">
-                        <div
-                          className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
-                          style={{
-                            backgroundColor: selectedOption[0]?.color || "#444",
-                          }}
-                        />
-                        <div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
-                      </div>
-                    </Tooltip>
-                  ) : (
-                    <Tooltip
-                      tooltipHeading={`Labels`}
-                      tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
-                    >
-                      <div className="flex-shrink-0 flex justify-center items-center gap-1">
-                        <div
-                          className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
-                          style={{ backgroundColor: "#444" }}
-                        />
-                        <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
-                      </div>
-                    </Tooltip>
-                  )}
-                </>
-              ) : (
-                <Tooltip tooltipHeading={`Labels`} tooltipContent={``}>
-                  <div className="text-xs">Select Labels</div>
-                </Tooltip>
-              )}
-
-              {dropdownArrow && !disabled && (
-                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                  <ChevronDown width={14} strokeWidth={2} />
-                </div>
-              )}
-            </Combobox.Button>
-
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-              >
-                {options && options.length > 0 ? (
-                  <>
-                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        <Search width={12} strokeWidth={2} />
-                      </div>
-
-                      <div>
-                        <Combobox.Input
-                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                          value={search}
-                          onChange={(e) => setSearch(e.target.value)}
-                          placeholder="Search"
-                          displayValue={(assigned: any) => assigned?.name}
-                        />
-                      </div>
-
-                      {search && search.length > 0 && (
-                        <div
-                          onClick={() => setSearch("")}
-                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                        >
-                          <X width={12} strokeWidth={2} />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                      {filteredOptions ? (
-                        filteredOptions.length > 0 ? (
-                          filteredOptions.map((option) => (
-                            <Combobox.Option
-                              key={option.id}
-                              value={option.id}
-                              className={({ active }) =>
-                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                  active || (value && value.length > 0 && value.includes(option?.id))
-                                    ? "bg-custom-background-80"
-                                    : ""
-                                } ${
-                                  value && value.length > 0 && value.includes(option?.id)
-                                    ? "text-custom-text-100"
-                                    : "text-custom-text-200"
-                                }`
-                              }
-                            >
-                              <div className="flex items-center gap-1 w-full px-1">
-                                <div
-                                  className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
-                                  style={{
-                                    backgroundColor: option.color || "#444",
-                                  }}
-                                />
-                                <div className="line-clamp-1">{option.title}</div>
-                                {value && value.length > 0 && value.includes(option?.id) && (
-                                  <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                    <Check width={13} strokeWidth={2} />
-                                  </div>
-                                )}
-                              </div>
-                            </Combobox.Option>
-                          ))
-                        ) : (
-                          <span className="flex items-center gap-2 p-1">
-                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                          </span>
-                        )
-                      ) : (
-                        <p className="text-center text-custom-text-200">Loading...</p>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <p className="text-center text-custom-text-200">No options available.</p>
-                )}
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+      hideDropdownArrow={hideDropdownArrow}
+    />
   );
 });

web/components/issues/issue-layouts/properties/priority.tsx

@@ -1,223 +1,25 @@
-import { FC, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+import { PrioritySelect } from "components/project";
 import { observer } from "mobx-react-lite";
-// components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-
-interface IFiltersOption {
-  id: string;
-  title: string;
-}
+// types
+import { TIssuePriorities } from "types";
 
 export interface IIssuePropertyPriority {
-  value?: any;
-  onChange?: (id: any, data: IFiltersOption) => void;
+  value: TIssuePriorities;
+  onChange: (value: TIssuePriorities) => void;
   disabled?: boolean;
-  list?: any;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
+  hideDropdownArrow?: boolean;
 }
 
-const Icon = ({ priority }: any) => (
-  <div className="w-full h-full">
-    {priority === "urgent" ? (
-      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
-        <AlertCircle size={12} strokeWidth={2} />
-      </div>
-    ) : priority === "high" ? (
-      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
-        <SignalHigh size={12} strokeWidth={2} className="pl-[3px]" />
-      </div>
-    ) : priority === "medium" ? (
-      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
-        <SignalMedium size={12} strokeWidth={2} className="pl-[3px]" />
-      </div>
-    ) : priority === "low" ? (
-      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
-        <SignalLow size={12} strokeWidth={2} className="pl-[3px]" />
-      </div>
-    ) : (
-      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
-        <Ban size={12} strokeWidth={2} />
-      </div>
-    )}
-  </div>
-);
-
-export const IssuePropertyPriority: FC<IIssuePropertyPriority> = observer((props) => {
-  const {
-    value,
-    onChange,
-    disabled,
-    list,
-
-    className,
-    buttonClassName,
-    optionsClassName,
-    dropdownArrow = true,
-  } = props;
-
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  const options: IFiltersOption[] | [] =
-    (list &&
-      list?.length > 0 &&
-      list.map((_priority: any) => ({
-        id: _priority?.key,
-        title: _priority?.title,
-      }))) ||
-    [];
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-  const selectedOption: IFiltersOption | null | undefined =
-    (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
-
-  const filteredOptions: IFiltersOption[] =
-    search === ""
-      ? options && options.length > 0
-        ? options
-        : []
-      : options && options.length > 0
-      ? options.filter((_priority: IFiltersOption) =>
-          _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-        )
-      : [];
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer((props) => {
+  const { value, onChange, disabled, hideDropdownArrow = false } = props;
 
   return (
-    <Combobox
-      as="div"
-      className={`${className}`}
-      value={selectedOption && selectedOption.id}
-      onChange={(data: string) => {
-        if (onChange && selectedOption) onChange(data, selectedOption);
-      }}
+    <PrioritySelect
+      value={value}
+      onChange={onChange}
+      buttonClassName="!h-5 p-1.5"
       disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {selectedOption ? (
-                <Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
-                  <div className="flex-shrink-0 flex justify-center items-center gap-1">
-                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                      <Icon priority={selectedOption?.id} />
-                    </div>
-                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                  </div>
-                </Tooltip>
-              ) : (
-                <Tooltip tooltipHeading={`Priority`} tooltipContent={``}>
-                  <div className="text-xs">Select Priority</div>
-                </Tooltip>
-              )}
-
-              {dropdownArrow && !disabled && (
-                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                  <ChevronDown width={14} strokeWidth={2} />
-                </div>
-              )}
-            </Combobox.Button>
-
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-              >
-                {options && options.length > 0 ? (
-                  <>
-                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        <Search width={12} strokeWidth={2} />
-                      </div>
-
-                      <div>
-                        <Combobox.Input
-                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                          value={search}
-                          onChange={(e) => setSearch(e.target.value)}
-                          placeholder="Search"
-                          displayValue={(assigned: any) => assigned?.name}
-                        />
-                      </div>
-
-                      {search && search.length > 0 && (
-                        <div
-                          onClick={() => setSearch("")}
-                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                        >
-                          <X width={12} strokeWidth={2} />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                      {filteredOptions ? (
-                        filteredOptions.length > 0 ? (
-                          filteredOptions.map((option) => (
-                            <Combobox.Option
-                              key={option.id}
-                              value={option.id}
-                              className={({ active, selected }) =>
-                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                  active || selected ? "bg-custom-background-80" : ""
-                                } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                              }
-                            >
-                              {({ selected }) => (
-                                <div className="flex items-center gap-1 w-full px-1">
-                                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                                    <Icon priority={option?.id} />
-                                  </div>
-                                  <div className="line-clamp-1">{option.title}</div>
-                                  {selected && (
-                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                      <Check width={13} strokeWidth={2} />
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-                            </Combobox.Option>
-                          ))
-                        ) : (
-                          <span className="flex items-center gap-2 p-1">
-                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                          </span>
-                        )
-                      ) : (
-                        <p className="text-center text-custom-text-200">Loading...</p>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <p className="text-center text-custom-text-200">No options available.</p>
-                )}
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+      hideDropdownArrow={hideDropdownArrow}
+    />
   );
 });

web/components/issues/issue-layouts/properties/state.tsx

@@ -1,214 +1,28 @@
-import { FC, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { ChevronDown, Search, X, Check } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // components
-import { Tooltip, StateGroupIcon } from "@plane/ui";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-
+import { StateSelect } from "components/states";
 // types
 import { IState } from "types";
 
-interface IFiltersOption {
-  id: string;
-  title: string;
-  group: string;
-  color: string | null;
-}
-
 export interface IIssuePropertyState {
-  value?: any;
-  onChange?: (id: any, data: IFiltersOption) => void;
+  value: IState;
+  onChange: (state: IState) => void;
+  states: IState[] | null;
   disabled?: boolean;
-  list?: any;
-
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  dropdownArrow?: boolean;
+  hideDropdownArrow?: boolean;
 }
 
-export const IssuePropertyState: FC<IIssuePropertyState> = observer((props) => {
-  const {
-    value,
-    onChange,
-    disabled,
-    list,
-
-    className,
-    buttonClassName,
-    optionsClassName,
-    dropdownArrow = true,
-  } = props;
-
-  const dropdownBtn = useRef<any>(null);
-  const dropdownOptions = useRef<any>(null);
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  const options: IFiltersOption[] | [] =
-    (list &&
-      list?.length > 0 &&
-      list.map((_state: IState) => ({
-        id: _state?.id,
-        title: _state?.name,
-        group: _state?.group,
-        color: _state?.color || null,
-      }))) ||
-    [];
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
-
-  const selectedOption: IFiltersOption | null | undefined =
-    (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
-
-  const filteredOptions: IFiltersOption[] =
-    search === ""
-      ? options && options.length > 0
-        ? options
-        : []
-      : options && options.length > 0
-      ? options.filter((_state: IFiltersOption) =>
-          _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
-        )
-      : [];
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props) => {
+  const { value, onChange, states, disabled, hideDropdownArrow = false } = props;
 
   return (
-    <Combobox
-      as="div"
-      className={`${className}`}
-      value={selectedOption && selectedOption.id}
-      onChange={(data: string) => {
-        if (onChange && selectedOption) onChange(data, selectedOption);
-      }}
+    <StateSelect
+      value={value}
+      onChange={onChange}
+      states={states ?? undefined}
+      buttonClassName="h-5"
       disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {selectedOption ? (
-                <Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
-                  <div className="flex-shrink-0 flex justify-center items-center gap-1">
-                    <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
-                      <StateGroupIcon
-                        stateGroup={selectedOption?.group as any}
-                        color={(selectedOption?.color || null) as any}
-                        width="12"
-                        height="12"
-                      />
-                    </div>
-                    <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
-                  </div>
-                </Tooltip>
-              ) : (
-                <Tooltip tooltipHeading={`State`} tooltipContent={``}>
-                  <div className="text-xs">Select State</div>
-                </Tooltip>
-              )}
-
-              {dropdownArrow && !disabled && (
-                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
-                  <ChevronDown width={14} strokeWidth={2} />
-                </div>
-              )}
-            </Combobox.Button>
-
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
-              >
-                {options && options.length > 0 ? (
-                  <>
-                    <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
-                      <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
-                        <Search width={12} strokeWidth={2} />
-                      </div>
-
-                      <div>
-                        <Combobox.Input
-                          className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                          value={search}
-                          onChange={(e) => setSearch(e.target.value)}
-                          placeholder="Search"
-                          displayValue={(assigned: any) => assigned?.name}
-                        />
-                      </div>
-
-                      {search && search.length > 0 && (
-                        <div
-                          onClick={() => setSearch("")}
-                          className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
-                        >
-                          <X width={12} strokeWidth={2} />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
-                      {filteredOptions ? (
-                        filteredOptions.length > 0 ? (
-                          filteredOptions.map((option) => (
-                            <Combobox.Option
-                              key={option.id}
-                              value={option.id}
-                              className={({ active, selected }) =>
-                                `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                  active || selected ? "bg-custom-background-80" : ""
-                                } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                              }
-                            >
-                              {({ selected }) => (
-                                <div className="flex items-center gap-1 w-full px-1">
-                                  <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
-                                    <StateGroupIcon
-                                      stateGroup={option?.group as any}
-                                      color={(option?.color || null) as any}
-                                      width="13"
-                                      height="13"
-                                    />
-                                  </div>
-                                  <div className="line-clamp-1">{option.title}</div>
-                                  {selected && (
-                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
-                                      <Check width={13} strokeWidth={2} />
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-                            </Combobox.Option>
-                          ))
-                        ) : (
-                          <span className="flex items-center gap-2 p-1">
-                            <p className="text-left text-custom-text-200 ">No matching results</p>
-                          </span>
-                        )
-                      ) : (
-                        <p className="text-center text-custom-text-200">Loading...</p>
-                      )}
-                    </div>
-                  </>
-                ) : (
-                  <p className="text-center text-custom-text-200">No options available.</p>
-                )}
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+      hideDropdownArrow={hideDropdownArrow}
+    />
   );
 });

web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { StateSelect } from "components/states";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // types
 import { IIssue, IStateResponse } from "types";
 
@@ -22,12 +24,14 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
 
   const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
 
+  const statesList = getStatesList(states);
+
   return (
     <>
       <StateSelect
         value={issue.state_detail}
         onChange={(data) => onChange({ state: data.id, state_detail: data })}
-        stateGroups={states}
+        states={statesList}
         buttonClassName="!shadow-none !border-0"
         hideDropdownArrow
         disabled={disabled}

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -2,3 +2,4 @@ export * from "./columns";
 export * from "./roots";
 export * from "./spreadsheet-column";
 export * from "./spreadsheet-view";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div>
+          <form
+            ref={ref}
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx

@@ -66,6 +66,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
       handleIssueAction={() => {}}
       handleUpdateIssue={handleUpdateIssue}
       disableUserActions={false}
+      enableQuickCreateIssue
     />
   );
 });

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // components
-import {
-  SpreadsheetColumnsList,
-  // ListInlineCreateIssueForm,
-  SpreadsheetIssuesColumn,
-} from "components/issues";
+import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
 import { CustomMenu, Spinner } from "@plane/ui";
 // types
 import {
@@ -31,6 +27,7 @@ type Props = {
   handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
   openIssuesListModal?: (() => void) | null;
   disableUserActions: boolean;
+  enableQuickCreateIssue?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -46,6 +43,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     handleUpdateIssue,
     openIssuesListModal,
     disableUserActions,
+    enableQuickCreateIssue,
   } = props;
 
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
@@ -138,17 +136,10 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
         <div className="border-t border-custom-border-100">
           <div className="mb-3 z-50 sticky bottom-0 left-0">
-            {/* <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              /> */}
+            {enableQuickCreateIssue && <SpreadsheetInlineCreateIssueForm />}
           </div>
 
-          {!disableUserActions &&
+          {/* {!disableUserActions &&
             !isInlineCreateIssueFormOpen &&
             (type === "issue" ? (
               <button
@@ -180,7 +171,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
                 )}
               </CustomMenu>
-            ))}
+            ))} */}
         </div>
       </div>
     </div>

web/components/issues/issue-peek-overview/activity/card.tsx

@@ -12,6 +12,7 @@ import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/d
 interface IssueActivityCard {
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueComments: any;
   issueCommentUpdate: (comment: any) => void;
@@ -24,6 +25,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
   const {
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueComments,
     issueCommentUpdate,
@@ -118,6 +120,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
                 <IssueCommentCard
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  issueId={issueId}
                   user={user}
                   comment={activityItem}
                   onSubmit={issueCommentUpdate}

web/components/issues/issue-peek-overview/activity/comment-card.tsx

@@ -23,6 +23,7 @@ type IIssueCommentCard = {
   showAccessSpecifier?: boolean;
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueCommentReactionCreate: (commentId: string, reaction: string) => void;
   issueCommentReactionRemove: (commentId: string, reaction: string) => void;
@@ -36,6 +37,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
     showAccessSpecifier = false,
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueCommentReactionCreate,
     issueCommentReactionRemove,
@@ -157,6 +159,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
               <IssueCommentReaction
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
+                issueId={issueId}
                 user={user}
                 comment={comment}
                 issueCommentReactionCreate={issueCommentReactionCreate}

web/components/issues/issue-peek-overview/activity/comment-reaction.tsx

@@ -9,8 +9,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 interface IIssueCommentReaction {
-  workspaceSlug: any;
-  projectId: any;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
   user: any;
 
   comment: any;
@@ -19,7 +20,8 @@ interface IIssueCommentReaction {
 }
 
 export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props) => {
-  const { workspaceSlug, projectId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } = props;
+  const { workspaceSlug, projectId, issueId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } =
+    props;
 
   const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
 
@@ -32,15 +34,18 @@ export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props)
   };
 
   useSWR(
-    workspaceSlug && projectId && comment && comment?.id ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}` : null,
+    workspaceSlug && projectId && issueId && comment && comment?.id
+      ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}`
+      : null,
     () => {
-      if (workspaceSlug && projectId && comment && comment.id) {
-        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, comment?.id);
+      if (workspaceSlug && projectId && issueId && comment && comment.id) {
+        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, issueId, comment?.id);
       }
     }
   );
 
-  const issueReactions = issueDetailStore?.getIssueCommentReactionsByCommentId(comment.id) || [];
+  let issueReactions = issueDetailStore?.getIssueCommentReactions || null;
+  issueReactions = issueReactions && comment.id ? issueReactions?.[comment.id] : [];
 
   return (
     <div>

web/components/issues/issue-peek-overview/activity/view.tsx

@@ -6,6 +6,7 @@ import { IssueCommentEditor } from "./comment-editor";
 interface IIssueComment {
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueComments: any;
   issueCommentCreate: (comment: any) => void;
@@ -19,6 +20,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
   const {
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueComments,
     issueCommentCreate,
@@ -46,6 +48,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
         <IssueActivityCard
           workspaceSlug={workspaceSlug}
           projectId={projectId}
+          issueId={issueId}
           user={user}
           issueComments={issueComments}
           issueCommentUpdate={issueCommentUpdate}

web/components/issues/issue-peek-overview/properties.tsx

@@ -8,38 +8,37 @@ import { IssuePropertyPriority } from "components/issues/issue-layouts/propertie
 import { IssuePropertyAssignee } from "components/issues/issue-layouts/properties/assignee";
 import { IssuePropertyDate } from "components/issues/issue-layouts/properties/date";
 // types
-import { IIssue } from "types";
+import { IIssue, IState, IUserLite, TIssuePriorities } from "types";
 
 interface IPeekOverviewProperties {
   issue: IIssue;
   issueUpdate: (issue: Partial<IIssue>) => void;
-
-  states: any;
-  members: any;
+  states: IState[] | null;
+  members: IUserLite[] | null;
   priorities: any;
 }
 
 export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
   const { issue, issueUpdate, states, members, priorities } = props;
 
-  const handleState = (_state: string) => {
-    if (issueUpdate) issueUpdate({ ...issue, state: _state });
+  const handleState = (_state: IState) => {
+    issueUpdate({ ...issue, state: _state.id });
   };
 
-  const handlePriority = (_priority: any) => {
-    if (issueUpdate) issueUpdate({ ...issue, priority: _priority });
+  const handlePriority = (_priority: TIssuePriorities) => {
+    issueUpdate({ ...issue, priority: _priority });
   };
 
   const handleAssignee = (_assignees: string[]) => {
-    if (issueUpdate) issueUpdate({ ...issue, assignees: _assignees });
+    issueUpdate({ ...issue, assignees: _assignees });
   };
 
   const handleStartDate = (_startDate: string) => {
-    if (issueUpdate) issueUpdate({ ...issue, start_date: _startDate });
+    issueUpdate({ ...issue, start_date: _startDate });
   };
 
   const handleTargetDate = (_targetDate: string) => {
-    if (issueUpdate) issueUpdate({ ...issue, target_date: _targetDate });
+    issueUpdate({ ...issue, target_date: _targetDate });
   };
 
   return (
@@ -54,11 +53,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
         </div>
         <div className="w-full">
           <IssuePropertyState
-            value={issue?.state || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleState(id)}
+            value={issue?.state_detail || null}
+            onChange={handleState}
+            states={states}
             disabled={false}
-            list={states}
+            hideDropdownArrow={true}
           />
         </div>
       </div>
@@ -74,10 +73,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
         <div className="w-full">
           <IssuePropertyAssignee
             value={issue?.assignees || null}
-            dropdownArrow={false}
             onChange={(ids: string[]) => handleAssignee(ids)}
             disabled={false}
-            list={members}
+            hideDropdownArrow={true}
+            members={members}
           />
         </div>
       </div>
@@ -93,10 +92,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
         <div className="w-full">
           <IssuePropertyPriority
             value={issue?.priority || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handlePriority(id)}
+            onChange={handlePriority}
             disabled={false}
-            list={priorities}
+            hideDropdownArrow={true}
           />
         </div>
       </div>

web/components/issues/issue-peek-overview/reactions/root.tsx

@@ -15,7 +15,7 @@ export const IssueReaction: FC<IIssueReaction> = (props) => {
 
   const handleReaction = (reaction: string) => {
     const isReactionAvailable =
-      issueReactions[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
+      issueReactions?.[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
 
     if (isReactionAvailable) issueReactionRemove(reaction);
     else issueReactionCreate(reaction);

web/components/issues/issue-peek-overview/root.tsx

@@ -50,10 +50,10 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
 
   const issueCommentReactionCreate = (commentId: string, reaction: string) =>
-    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
   const issueCommentReactionRemove = (commentId: string, reaction: string) =>
-    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
   return (
     <IssueView

web/components/issues/issue-peek-overview/view.tsx

@@ -215,6 +215,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                       <IssueComment
                         workspaceSlug={workspaceSlug}
                         projectId={projectId}
+                        issueId={issueId}
                         user={user}
                         issueComments={issueComments}
                         issueCommentCreate={issueCommentCreate}
@@ -242,6 +243,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <IssueComment
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
+                          issueId={issueId}
                           user={user}
                           issueComments={issueComments}
                           issueCommentCreate={issueCommentCreate}

web/components/issues/sub-issues/properties.tsx

@@ -10,6 +10,8 @@ import { TrackEventService } from "services/track_event.service";
 import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
 import { MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // types
 import { IUser, IIssue, IState } from "types";
 // fetch-keys
@@ -115,6 +117,8 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
     );
   };
 
+  const statesList = getStatesList(projectStore.states?.[issue.project]);
+
   return (
     <div className="relative flex items-center gap-1">
       {displayProperties.priority && (
@@ -132,7 +136,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
         <div className="flex-shrink-0">
           <StateSelect
             value={issue.state_detail}
-            stateGroups={projectStore.states ? projectStore.states[issue.project] : undefined}
+            states={statesList}
             onChange={(data) => handleStateChange(data)}
             hideDropdownArrow
             disabled={!editable}

web/components/profile/navbar.tsx

@@ -5,11 +5,9 @@ import Link from "next/link";
 
 // components
 import { ProfileIssuesFilter } from "components/profile";
-// types
-import { UserAuth } from "types";
 
 type Props = {
-  memberRole: UserAuth;
+  isAuthorized: boolean;
 };
 
 const viewerTabs = [
@@ -38,12 +36,11 @@ const adminTabs = [
   },
 ];
 
-export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
+export const ProfileNavbar: React.FC<Props> = ({ isAuthorized }) => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const tabsList =
-    memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? [...viewerTabs, ...adminTabs] : viewerTabs;
+  const tabsList = isAuthorized ? [...viewerTabs, ...adminTabs] : viewerTabs;
 
   return (
     <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">

web/components/project/delete-project-modal.tsx

@@ -30,7 +30,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   const { project: projectStore } = useMobxStore();
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // toast
   const { setToastAlert } = useToast();
   // form info
@@ -59,6 +59,8 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
     await projectStore
       .deleteProject(workspaceSlug.toString(), project.id)
       .then(() => {
+        if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+
         handleClose();
       })
       .catch(() => {

web/components/project/index.ts

@@ -1,18 +1,18 @@
+export * from "./publish-project";
+export * from "./settings";
+export * from "./card-list";
+export * from "./card";
 export * from "./create-project-modal";
 export * from "./delete-project-modal";
-export * from "./sidebar-list";
-export * from "./settings-sidebar";
-export * from "./single-integration-card";
-export * from "./sidebar-list-item";
+export * from "./delete-project-section";
+export * from "./form-loader";
+export * from "./form";
+export * from "./join-project-modal";
+export * from "./label-select";
 export * from "./leave-project-modal";
 export * from "./member-select";
 export * from "./members-select";
-export * from "./label-select";
 export * from "./priority-select";
-export * from "./card-list";
-export * from "./card";
-export * from "./join-project-modal";
-export * from "./form";
-export * from "./form-loader";
-export * from "./delete-project-section";
-export * from "./publish-project";
+export * from "./sidebar-list-item";
+export * from "./sidebar-list";
+export * from "./single-integration-card";

web/components/project/label-select.tsx

@@ -3,9 +3,6 @@ import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, PlusIcon, Search } from "lucide-react";
-
-// components
-import { CreateLabelModal } from "components/labels";
 // ui
 import { Tooltip } from "components/ui";
 // types
@@ -14,7 +11,7 @@ import { IIssueLabels } from "types";
 type Props = {
   value: string[];
   onChange: (data: string[]) => void;
-  labels: IIssueLabels[];
+  labels: IIssueLabels[] | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -41,10 +38,16 @@ export const LabelSelect: React.FC<Props> = ({
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const [labelModal, setLabelModal] = useState(false);
-
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
   });
 
   const options = labels?.map((label) => ({
@@ -66,149 +69,126 @@ export const LabelSelect: React.FC<Props> = ({
   const filteredOptions =
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
-  const footerOption = (
-    <button
-      type="button"
-      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
-      onClick={() => setLabelModal(true)}
-    >
-      <span className="flex items-center justify-start gap-1 text-custom-text-200">
-        <PlusIcon className="h-4 w-4" aria-hidden="true" />
-        <span>Create New Label</span>
-      </span>
-    </button>
-  );
-
   return (
-    <>
-      {/* TODO: update this logic */}
-      {/* {projectId && (
-        <CreateLabelModal
-          isOpen={labelModal}
-          handleClose={() => setLabelModal(false)}
-          projectId={projectId}
-          user={user}
-        />
-      )} */}
-      <Combobox
-        as="div"
-        className={`flex-shrink-0 text-left ${className}`}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        multiple
-      >
-        <Combobox.Button as={React.Fragment}>
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={`flex items-center justify-between gap-1 w-full text-xs ${
-              disabled
-                ? "cursor-not-allowed text-custom-text-200"
-                : value.length <= maxRender
-                ? "cursor-pointer"
-                : "cursor-pointer hover:bg-custom-background-80"
-            }  ${buttonClassName}`}
-          >
-            <div className={`flex  items-center gap-2 text-custom-text-200`}>
-              {value.length > 0 ? (
-                value.length <= maxRender ? (
-                  <>
-                    {labels
-                      .filter((l) => value.includes(l.id))
-                      .map((label) => (
-                        <div
-                          key={label.id}
-                          className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
-                        >
-                          <div className="flex items-center gap-1.5 text-custom-text-200">
-                            <span
-                              className="h-2 w-2 flex-shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: label?.color ?? "#000000",
-                              }}
-                            />
-                            {label.name}
-                          </div>
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      multiple
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
+          }  ${buttonClassName}`}
+        >
+          <div className="flex items-center gap-2 text-custom-text-200 h-full">
+            {value.length > 0 ? (
+              value.length <= maxRender ? (
+                <>
+                  {labels
+                    ?.filter((l) => value.includes(l.id))
+                    .map((label) => (
+                      <div
+                        key={label.id}
+                        className="flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
+                      >
+                        <div className="flex items-center gap-1.5 text-custom-text-200">
+                          <span
+                            className="h-2 w-2 flex-shrink-0 rounded-full"
+                            style={{
+                              backgroundColor: label?.color ?? "#000000",
+                            }}
+                          />
+                          {label.name}
                         </div>
-                      ))}
-                  </>
-                ) : (
-                  <div className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
-                    <Tooltip
-                      position="top"
-                      tooltipHeading="Labels"
-                      tooltipContent={labels
-                        .filter((l) => value.includes(l.id))
-                        .map((l) => l.name)
-                        .join(", ")}
-                    >
-                      <div className="flex items-center gap-1.5 text-custom-text-200">
-                        <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-                        {`${value.length} Labels`}
                       </div>
-                    </Tooltip>
-                  </div>
-                )
+                    ))}
+                </>
               ) : (
-                ""
-              )}
-            </div>
-            {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
-          </button>
-        </Combobox.Button>
-
-        <Combobox.Options>
-          <div
-            className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-300" />
-              <Combobox.Input
-                className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-              {filteredOptions ? (
-                filteredOptions.length > 0 ? (
-                  filteredOptions.map((option) => (
-                    <Combobox.Option
-                      key={option.value}
-                      value={option.value}
-                      className={({ active, selected }) =>
-                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                          active && !selected ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
-                          {option.content}
-                          {selected && <Check className={`h-3.5 w-3.5`} />}
-                        </>
-                      )}
-                    </Combobox.Option>
-                  ))
-                ) : (
-                  <span className="flex items-center gap-2 p-1">
-                    <p className="text-left text-custom-text-200 ">No matching results</p>
-                  </span>
-                )
-              ) : (
-                <p className="text-center text-custom-text-200">Loading...</p>
-              )}
-            </div>
-            {footerOption}
+                <div className="h-full flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
+                  <Tooltip
+                    position="top"
+                    tooltipHeading="Labels"
+                    tooltipContent={labels
+                      ?.filter((l) => value.includes(l.id))
+                      .map((l) => l.name)
+                      .join(", ")}
+                  >
+                    <div className="h-full flex items-center gap-1.5 text-custom-text-200">
+                      <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+                      {`${value.length} Labels`}
+                    </div>
+                  </Tooltip>
+                </div>
+              )
+            ) : (
+              <div className="h-full flex items-center justify-center text-xs rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 hover:bg-custom-background-80">
+                Select labels
+              </div>
+            )}
           </div>
-        </Combobox.Options>
-      </Combobox>
-    </>
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className={`h-3.5 w-3.5`} />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )
+            ) : (
+              <p className="text-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
   );
 };

web/components/project/members-select.tsx

@@ -1,18 +1,15 @@
 import React, { useState } from "react";
 import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
-
-// headless ui
 import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
 // components
 import { AssigneesList, Avatar, Tooltip } from "components/ui";
-// icons
-import { Check, ChevronDown, Search, User2 } from "lucide-react";
 // types
 import { IUserLite } from "types";
 
 type Props = {
-  members: IUserLite[];
+  members: IUserLite[] | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -51,6 +48,14 @@ export const MembersSelect: React.FC<Props> = ({
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
   });
 
   const options = members?.map((member) => ({
@@ -73,22 +78,22 @@ export const MembersSelect: React.FC<Props> = ({
       tooltipContent={
         value && value.length > 0
           ? members
-              .filter((m) => value.includes(m.display_name))
+              ?.filter((m) => value.includes(m.display_name))
               .map((m) => m.display_name)
               .join(", ")
           : "No Assignee"
       }
       position="top"
     >
-      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
         {value && value.length > 0 && Array.isArray(value) ? (
           <AssigneesList userIds={value} length={3} showLength={true} />
         ) : (
           <span
-            className="flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none
+            className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
           "
           >
-            <User2 className="h-3.5 w-3.5" />
+            <User2 className="h-3 w-3" />
           </span>
         )}
       </div>
@@ -112,9 +117,9 @@ export const MembersSelect: React.FC<Props> = ({
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
-      <Combobox.Options>
+      <Combobox.Options className="fixed z-10">
         <div
-          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}

web/components/project/priority-select.tsx

@@ -1,23 +1,21 @@
 import React, { useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
-// headless ui
+import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
-// icons
 import { Check, ChevronDown, Search } from "lucide-react";
 import { PriorityIcon } from "@plane/ui";
 // components
 import { Tooltip } from "components/ui";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { TIssuePriorities } from "types";
-import { Placement } from "@popperjs/core";
 // constants
-import { PRIORITIES } from "constants/project";
+import { ISSUE_PRIORITIES } from "constants/issue";
 
 type Props = {
   value: TIssuePriorities;
-  onChange: (data: any) => void;
+  onChange: (data: TIssuePriorities) => void;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -43,15 +41,23 @@ export const PrioritySelect: React.FC<Props> = ({
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
   });
 
-  const options = PRIORITIES?.map((priority) => ({
-    value: priority,
-    query: priority,
+  const options = ISSUE_PRIORITIES?.map((priority) => ({
+    value: priority.key,
+    query: priority.key,
     content: (
       <div className="flex items-center gap-2">
-        <PriorityIcon priority={priority} className="h-3.5 w-3.5" />
-        {priority ?? "None"}
+        <PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />
+        {priority.title}
       </div>
     ),
   }));
@@ -59,32 +65,24 @@ export const PrioritySelect: React.FC<Props> = ({
   const filteredOptions =
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
-  const selectedOption = value ?? "None";
+  const selectedOption = value ? capitalizeFirstLetter(value) : "None";
 
   const label = (
     <Tooltip tooltipHeading="Priority" tooltipContent={selectedOption} position="top">
-      <div
-        className={`grid place-items-center rounded "h-6 w-6 border shadow-sm ${
-          value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300 bg-custom-background-100"
-        } items-center`}
-      >
-        <span className="flex gap-1 items-center text-custom-text-200 ">
-          <PriorityIcon
-            priority={value}
-            className={`w-3.5 ${
-              value === "urgent"
-                ? "text-white"
-                : value === "high"
-                ? "text-orange-500"
-                : value === "medium"
-                ? "text-yellow-500"
-                : value === "low"
-                ? "text-green-500"
-                : "text-custom-text-200"
-            }`}
-          />
-        </span>
-      </div>
+      <PriorityIcon
+        priority={value}
+        className={`h-3.5 w-3.5 ${
+          value === "urgent"
+            ? "text-white"
+            : value === "high"
+            ? "text-orange-500"
+            : value === "medium"
+            ? "text-yellow-500"
+            : value === "low"
+            ? "text-green-500"
+            : "text-custom-text-200"
+        }`}
+      />
     </Tooltip>
   );
 
@@ -100,17 +98,19 @@ export const PrioritySelect: React.FC<Props> = ({
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs ${
+          className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded border-[0.5px] ${
+            value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300"
+          } ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
         >
           {label}
-          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
         </button>
       </Combobox.Button>
-      <Combobox.Options>
+      <Combobox.Options className="fixed z-10">
         <div
-          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
@@ -134,7 +134,7 @@ export const PrioritySelect: React.FC<Props> = ({
                     value={option.value}
                     className={({ active, selected }) =>
                       `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
+                        active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
                   >

web/components/project/settings-sidebar.tsx

@@ -1,149 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-export const SettingsSidebar = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const projectLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    },
-    {
-      label: "Members",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
-    },
-    {
-      label: "Features",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
-    },
-    {
-      label: "States",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
-    },
-    {
-      label: "Labels",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
-    },
-    {
-      label: "Integrations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
-    },
-    {
-      label: "Estimates",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
-    },
-    {
-      label: "Automations",
-      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
-    },
-  ];
-
-  const workspaceLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "General",
-      href: `/${workspaceSlug}/settings`,
-    },
-    {
-      label: "Members",
-      href: `/${workspaceSlug}/settings/members`,
-    },
-    {
-      label: "Billing & Plans",
-      href: `/${workspaceSlug}/settings/billing`,
-    },
-    {
-      label: "Integrations",
-      href: `/${workspaceSlug}/settings/integrations`,
-    },
-    {
-      label: "Imports",
-      href: `/${workspaceSlug}/settings/imports`,
-    },
-    {
-      label: "Exports",
-      href: `/${workspaceSlug}/settings/exports`,
-    },
-  ];
-
-  const profileLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "Profile",
-      href: `/${workspaceSlug}/me/profile`,
-    },
-    {
-      label: "Activity",
-      href: `/${workspaceSlug}/me/profile/activity`,
-    },
-    {
-      label: "Preferences",
-      href: `/${workspaceSlug}/me/profile/preferences`,
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-80 px-5">
-      <div className="flex flex-col gap-2">
-        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
-        <div className="flex flex-col gap-1 w-full">
-          {(projectId ? projectLinks : workspaceLinks).map((link) => (
-            <Link key={link.href} href={link.href}>
-              <a>
-                <div
-                  className={`px-4 py-2 text-sm font-medium rounded-md ${
-                    (
-                      link.label === "Import"
-                        ? router.asPath.includes(link.href)
-                        : router.asPath === link.href
-                    )
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                  }`}
-                >
-                  {link.label}
-                </div>
-              </a>
-            </Link>
-          ))}
-        </div>
-      </div>
-      {!projectId && (
-        <div className="flex flex-col gap-2">
-          <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
-          <div className="flex flex-col gap-1 w-full">
-            {profileLinks.map((link) => (
-              <Link key={link.href} href={link.href}>
-                <a>
-                  <div
-                    className={`px-4 py-2 text-sm font-medium rounded-md ${
-                      (
-                        link.label === "Import"
-                          ? router.asPath.includes(link.href)
-                          : router.asPath === link.href
-                      )
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                    }`}
-                  >
-                    {link.label}
-                  </div>
-                </a>
-              </Link>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

web/components/project/settings/features-list.tsx

@@ -0,0 +1,135 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
+import { DiceIcon, ToggleSwitch } from "@plane/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { MiscellaneousEventType, TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IProject } from "types";
+
+type Props = {};
+
+const PROJECT_FEATURES_LIST = [
+  {
+    title: "Cycles",
+    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    icon: <ContrastIcon className="h-4 w-4 text-purple-500 flex-shrink-0 rotate-180" />,
+
+    property: "cycle_view",
+  },
+  {
+    title: "Modules",
+    description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <DiceIcon width={16} height={16} className="flex-shrink-0" />,
+    property: "module_view",
+  },
+  {
+    title: "Views",
+    description: "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <Layers className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
+    property: "issue_views_view",
+  },
+  {
+    title: "Pages",
+    description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <FileText className="h-4 w-4 text-red-400 flex-shrink-0" />,
+    property: "page_view",
+  },
+  {
+    title: "Inbox",
+    description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
+    icon: <Inbox className="h-4 w-4 text-fuchsia-500 flex-shrink-0" />,
+    property: "inbox_view",
+  },
+];
+
+const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
+  switch (feature) {
+    case "Cycles":
+      return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
+    case "Modules":
+      return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
+    case "Views":
+      return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
+    case "Pages":
+      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
+    case "Inbox":
+      return toggle ? "TOGGLE_INBOX_ON" : "TOGGLE_INBOX_OFF";
+    default:
+      throw new Error("Invalid feature");
+  }
+};
+
+// services
+const trackEventService = new TrackEventService();
+
+export const ProjectFeaturesList: React.FC<Props> = observer((props) => {
+  const {} = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { project: projectStore, user: userStore } = useMobxStore();
+
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
+  const user = userStore.currentUser ?? undefined;
+  const isAdmin = userStore.projectMemberInfo?.role === 20;
+
+  const { setToastAlert } = useToast();
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId || !projectDetails) return;
+
+    setToastAlert({
+      type: "success",
+      title: "Success!",
+      message: "Project feature updated successfully.",
+    });
+
+    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), formData);
+  };
+
+  return (
+    <div>
+      {PROJECT_FEATURES_LIST.map((feature) => (
+        <div
+          key={feature.property}
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">{feature.icon}</div>
+            <div className="">
+              <h4 className="text-sm font-medium">{feature.title}</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={projectDetails?.[feature.property as keyof IProject]}
+            onChange={() => {
+              trackEventService.trackMiscellaneousEvent(
+                {
+                  workspaceId: (projectDetails?.workspace as any)?.id,
+                  workspaceSlug,
+                  projectId,
+                  projectIdentifier: projectDetails?.identifier,
+                  projectName: projectDetails?.name,
+                },
+                getEventType(feature.title, !projectDetails?.[feature.property as keyof IProject]),
+                user
+              );
+              handleSubmit({
+                [feature.property]: !projectDetails?.[feature.property as keyof IProject],
+              });
+            }}
+            disabled={!isAdmin}
+            size="sm"
+          />
+        </div>
+      ))}
+    </div>
+  );
+});

web/components/project/settings/index.ts

@@ -0,0 +1 @@
+export * from "./features-list";

web/components/project/settings/single-label.tsx

@@ -1,151 +0,0 @@
-import React, { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { TwitterPicker } from "react-color";
-import { Popover, Transition } from "@headlessui/react";
-// ui
-import { Button, CustomMenu, Input } from "@plane/ui";
-// icons
-import { Component, Pencil } from "lucide-react";
-// types
-import { IIssueLabels } from "types";
-
-type Props = {
-  label: IIssueLabels;
-  issueLabels: IIssueLabels[];
-  editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
-};
-
-const defaultValues: Partial<IIssueLabels> = {
-  name: "",
-  color: "#ff0000",
-};
-
-const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
-  const [newLabelForm, setNewLabelForm] = useState(false);
-
-  const {
-    formState: { errors, isSubmitting },
-    watch,
-    control,
-  } = useForm<IIssueLabels>({ defaultValues });
-
-  const children = issueLabels?.filter((l) => l.parent === label.id);
-
-  return (
-    <>
-      {children && children.length === 0 ? (
-        <div className="gap-2 space-y-3 divide-y rounded-md border  border-custom-border-200 p-3 md:w-2/3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span
-                className="h-3 w-3 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: label.color,
-                }}
-              />
-              <h6 className="text-sm">{label.name}</h6>
-            </div>
-            <CustomMenu ellipsis>
-              {/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
-              <CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>Delete</CustomMenu.MenuItem>
-            </CustomMenu>
-          </div>
-          <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
-            <div className="h-8 w-8 flex-shrink-0">
-              <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-custom-background-80">
-                {({ open }) => (
-                  <>
-                    <Popover.Button
-                      className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                        open ? "text-custom-text-100" : "text-custom-text-200"
-                      }`}
-                    >
-                      {watch("color") && watch("color") !== "" && (
-                        <span
-                          className="h-4 w-4 rounded"
-                          style={{
-                            backgroundColor: watch("color") ?? "black",
-                          }}
-                        />
-                      )}
-                    </Popover.Button>
-
-                    <Transition
-                      as={React.Fragment}
-                      enter="transition ease-out duration-200"
-                      enterFrom="opacity-0 translate-y-1"
-                      enterTo="opacity-100 translate-y-0"
-                      leave="transition ease-in duration-150"
-                      leaveFrom="opacity-100 translate-y-0"
-                      leaveTo="opacity-0 translate-y-1"
-                    >
-                      <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-                        <Controller
-                          name="color"
-                          control={control}
-                          render={({ field: { value, onChange } }) => (
-                            <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
-                          )}
-                        />
-                      </Popover.Panel>
-                    </Transition>
-                  </>
-                )}
-              </Popover>
-            </div>
-            <div className="flex w-full flex-col justify-center">
-              <Controller
-                control={control}
-                name="name"
-                rules={{
-                  required: "Label title is required",
-                }}
-                render={({ field: { value, onChange, ref } }) => (
-                  <Input
-                    id="labelName"
-                    name="name"
-                    type="text"
-                    value={value}
-                    onChange={onChange}
-                    ref={ref}
-                    hasError={Boolean(errors.name)}
-                    placeholder="Label title"
-                    className="w-full"
-                  />
-                )}
-              />
-            </div>
-            <Button variant="neutral-primary" onClick={() => setNewLabelForm(false)}>
-              Cancel
-            </Button>
-            <Button variant="primary" loading={isSubmitting}>
-              {isSubmitting ? "Adding" : "Add"}
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div className="rounded-md bg-custom-background-80 p-4 text-custom-text-100">
-          <h3 className="flex items-center gap-2 font-medium leading-5">
-            <Component className="h-5 w-5" />
-            This is the label group title
-          </h3>
-          <div className="mt-4 pl-5">
-            <div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-custom-background-90">
-              <h5 className="flex items-center gap-2">
-                <div className="h-2 w-2 rounded-full bg-red-600" />
-                This is the label title
-              </h5>
-              <button type="button" className="hidden group-hover:block">
-                <Pencil className="h-3 w-3" />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default SingleLabel;

web/components/project/sidebar-list-item.tsx

@@ -207,14 +207,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   ellipsis
                   placement="bottom-start"
                 >
-                  {!shortContextMenu && isAdmin && (
-                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
-                      <span className="flex items-center justify-start gap-2 ">
-                        <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>Delete project</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
                   {!project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleAddToFavorites}>
                       <span className="flex items-center justify-start gap-2">
@@ -286,6 +278,15 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </div>
                     </CustomMenu.MenuItem>
                   )}
+
+                  {!shortContextMenu && isAdmin && (
+                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
+                      <span className="flex items-center justify-start gap-2 ">
+                        <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Delete project</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
                 </CustomMenu>
               )}
             </div>

web/components/project/sidebar-list.tsx

@@ -1,6 +1,5 @@
 import React, { useState, FC, useRef, useEffect } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
@@ -12,7 +11,7 @@ import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
 // icons
 import { ChevronDown, ChevronRight, Plus } from "lucide-react";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IProject } from "types";
@@ -24,11 +23,7 @@ export const ProjectSidebarList: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // swr
-  useSWR(
-    workspaceSlug ? "PROJECTS_LIST" : null,
-    workspaceSlug ? () => projectStore.fetchProjects(workspaceSlug?.toString()) : null
-  );
+
   // states
   const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
@@ -50,8 +45,7 @@ export const ProjectSidebarList: FC = observer(() => {
     : undefined;
 
   const handleCopyText = (projectId: string) => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",

web/components/states/state-select.tsx

@@ -1,21 +1,18 @@
 import React, { useState } from "react";
 import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
 // ui
 import { StateGroupIcon } from "@plane/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
 import { Tooltip } from "components/ui";
-import { Placement } from "@popperjs/core";
-// constants
-import { IState, IStateResponse } from "types";
+// types
+import { IState } from "types";
 
 type Props = {
   value: IState;
   onChange: (state: IState) => void;
-  stateGroups: IStateResponse | undefined;
+  states: IState[] | undefined;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -27,7 +24,7 @@ type Props = {
 export const StateSelect: React.FC<Props> = ({
   value,
   onChange,
-  stateGroups,
+  states,
   className = "",
   buttonClassName = "",
   optionsClassName = "",
@@ -42,10 +39,16 @@ export const StateSelect: React.FC<Props> = ({
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
   });
 
-  const states = getStatesList(stateGroups);
-
   const options = states?.map((state) => ({
     value: state.id,
     query: state.name,
@@ -63,7 +66,7 @@ export const StateSelect: React.FC<Props> = ({
   const label = (
     <Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
       <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
-        <span className="h-3.5 w-3.5">{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}</span>
+        {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
         <span className="truncate">{value?.name ?? "State"}</span>
       </div>
     </Tooltip>
@@ -85,7 +88,7 @@ export const StateSelect: React.FC<Props> = ({
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
         >
@@ -93,9 +96,9 @@ export const StateSelect: React.FC<Props> = ({
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
-      <Combobox.Options>
+      <Combobox.Options className="fixed z-10">
         <div
-          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
@@ -119,7 +122,7 @@ export const StateSelect: React.FC<Props> = ({
                     value={option.value}
                     className={({ active, selected }) =>
                       `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
+                        active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
                   >

web/constants/issue.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from "uuid";
 // icons
 import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
 // types
@@ -11,6 +12,9 @@ import {
   TIssuePriorities,
   TIssueTypeFilters,
   TStateGroups,
+  IIssue,
+  IProject,
+  IWorkspace,
 } from "types";
 
 export const ISSUE_PRIORITIES: {
@@ -415,3 +419,74 @@ export const groupReactionEmojis = (reactions: any) => {
 
   return _groupedEmojis;
 };
+
+/**
+ *
+ * @param workspaceDetail workspace detail to be added in the issue payload
+ * @param projectDetail project detail to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+
+export const createIssuePayload: (
+  workspaceDetail: IWorkspace,
+  projectDetail: IProject,
+  formData: Partial<IIssue>
+) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
+  const payload = {
+    archived_at: null,
+    assignees: [],
+    assignee_details: [],
+    assignees_list: [],
+    attachment_count: 0,
+    attachments: [],
+    issue_relations: [],
+    related_issues: [],
+    bridge_id: null,
+    completed_at: new Date(),
+    created_at: "",
+    created_by: "",
+    cycle: null,
+    cycle_id: null,
+    cycle_detail: null,
+    description: {},
+    description_html: "",
+    description_stripped: "",
+    estimate_point: null,
+    issue_cycle: null,
+    issue_link: [],
+    issue_module: null,
+    labels: [],
+    label_details: [],
+    is_draft: false,
+    labels_list: [],
+    links_list: [],
+    link_count: 0,
+    module: null,
+    module_id: null,
+    name: "",
+    parent: null,
+    parent_detail: null,
+    priority: "none",
+    project: projectDetail.id,
+    project_detail: projectDetail,
+    sequence_id: 0,
+    sort_order: 0,
+    sprints: null,
+    start_date: null,
+    state: projectDetail.default_state,
+    state_detail: {} as any,
+    sub_issues_count: 0,
+    target_date: null,
+    updated_at: "",
+    updated_by: "",
+    workspace: workspaceDetail.id,
+    workspace_detail: workspaceDetail,
+    id: uuidv4(),
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+  } as IIssue;
+
+  return payload;
+};

web/layouts/app-layout-legacy/app-header.tsx

@@ -1,75 +0,0 @@
-// next imports
-import { useRouter } from "next/router";
-import Link from "next/link";
-// icons
-import { Menu } from "lucide-react";
-// ui components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-type Props = {
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-  noHeader: boolean;
-};
-
-const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-let plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL;
-
-if (typeof window !== "undefined" && !plane_deploy_url) {
-  plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
-}
-
-const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => {
-  const { projectDetails } = useProjectDetails();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  return (
-    <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 px-5 py-4 ${
-        noHeader ? "md:hidden" : ""
-      }`}
-    >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => setToggleSidebar((prevData) => !prevData)}
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-        </div>
-        <div>{breadcrumbs}</div>
-
-        {projectDetails && projectDetails?.is_deployed && (
-          <Link href={`${plane_deploy_url}/${workspaceSlug}/${projectId}`}>
-            <a target="_blank" rel="noreferrer">
-              <Tooltip tooltipContent="This project is public, and live on web." position="bottom-left">
-                <div className="transition-all flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 p-1 rounded overflow-hidden relative flex items-center gap-1 cursor-pointer group">
-                  <div className="w-[14px] h-[14px] flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">radio_button_checked</span>
-                  </div>
-                  <div className="text-xs font-medium">Public</div>
-                  <div className="w-[14px] h-[14px] hidden group-hover:flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">open_in_new</span>
-                  </div>
-                </div>
-              </Tooltip>
-            </a>
-          </Link>
-        )}
-
-        <div className="flex-shrink-0">{left}</div>
-      </div>
-      <div className="flex-shrink-0">{right}</div>
-    </div>
-  );
-};
-
-export default Header;

web/layouts/app-layout-legacy/app-sidebar.tsx

@@ -1,43 +0,0 @@
-import dynamic from "next/dynamic";
-// components
-import { WorkspaceHelpSection, WorkspaceSidebarDropdown, WorkspaceSidebarMenu } from "components/workspace";
-
-const WorkspaceSidebarQuickAction = dynamic<{}>(
-  () => import("components/workspace/sidebar-quick-action").then((mod) => mod.WorkspaceSidebarQuickAction),
-  {
-    ssr: false,
-  }
-);
-
-import { ProjectSidebarList } from "components/project";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { observer } from "mobx-react-lite";
-
-export interface SidebarProps {
-  toggleSidebar: boolean;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const { theme: themeStore } = useMobxStore();
-
-  return (
-    <div
-      id="app-sidebar"
-      className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
-        themeStore?.sidebarCollapsed ? "" : "md:w-[280px]"
-      } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
-    >
-      <div className="flex h-full w-full flex-1 flex-col">
-        <WorkspaceSidebarDropdown />
-        <WorkspaceSidebarQuickAction />
-        <WorkspaceSidebarMenu />
-        <ProjectSidebarList />
-        <WorkspaceHelpSection />
-      </div>
-    </div>
-  );
-});
-
-export default Sidebar;

web/layouts/app-layout-legacy/layout.tsx

@@ -1 +0,0 @@
-export const AppLayoutLegacy = () => <></>;

web/layouts/auth-layout-legacy/index.ts

@@ -1,3 +0,0 @@
-export * from "./project-authorization-wrapper";
-export * from "./workspace-authorization-wrapper";
-export * from "./user-authorization-wrapper";

web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx

@@ -1,122 +0,0 @@
-import { useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// contexts
-import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
-// layouts
-import AppHeader from "layouts/app-layout-legacy/app-header";
-import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
-// components
-import { NotAuthorizedView, JoinProject } from "components/auth-screens";
-import { CommandPalette } from "components/command-palette";
-// ui
-import { Button, LayersIcon, Spinner } from "@plane/ui";
-import { EmptyState } from "components/common";
-// images
-import emptyProject from "public/empty-state/project.svg";
-
-type Props = {
-  children: React.ReactNode;
-  noHeader?: boolean;
-  bg?: "primary" | "secondary";
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-};
-
-export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
-  <ProjectMemberProvider>
-    <ProjectAuthorizationWrapped {...props} />
-  </ProjectMemberProvider>
-);
-
-const ProjectAuthorizationWrapped: React.FC<Props> = ({
-  children,
-  noHeader = false,
-  bg = "primary",
-  breadcrumbs,
-  left,
-  right,
-}) => {
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { loading, error, memberRole: memberType } = useProjectMyMembership();
-
-  const settingsLayout = router.pathname.includes("/settings");
-
-  return (
-    <>
-      <CommandPalette />
-      <div className="relative flex h-screen w-full overflow-hidden">
-        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-
-        {loading ? (
-          <div className="grid h-full w-full place-items-center p-4 bg-custom-background-100">
-            <div className="flex flex-col items-center gap-3 text-center">
-              <h3 className="text-xl">Loading your project...</h3>
-              <Spinner />
-            </div>
-          </div>
-        ) : error?.status === 401 || error?.status === 403 ? (
-          <JoinProject />
-        ) : error?.status === 404 ? (
-          <div className="container grid h-screen place-items-center bg-custom-background-100">
-            <EmptyState
-              title="No such project exists"
-              description="Try creating a new project"
-              image={emptyProject}
-              primaryButton={{
-                text: "Create Project",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "p",
-                  });
-                  document.dispatchEvent(e);
-                },
-              }}
-            />
-          </div>
-        ) : settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-          <NotAuthorizedView
-            actionButton={
-              <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-                <a>
-                  <Button variant="primary" prependIcon={<LayersIcon color="white" />}>
-                    Go to issues
-                  </Button>
-                </a>
-              </Link>
-            }
-            type="project"
-          />
-        ) : (
-          <main
-            className={`relative flex h-full w-full flex-col overflow-hidden ${
-              bg === "primary"
-                ? "bg-custom-background-100"
-                : bg === "secondary"
-                ? "bg-custom-background-90"
-                : "bg-custom-background-80"
-            }`}
-          >
-            <AppHeader
-              breadcrumbs={breadcrumbs}
-              left={left}
-              right={right}
-              setToggleSidebar={setToggleSidebar}
-              noHeader={noHeader}
-            />
-            <div className="h-full w-full overflow-hidden">
-              <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
-            </div>
-          </main>
-        )}
-      </div>
-    </>
-  );
-};

web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx

@@ -1,42 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import { UserService } from "services/user.service";
-// ui
-import { Spinner } from "@plane/ui";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-// services
-const userService = new UserService();
-
-export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
-  const router = useRouter();
-
-  const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
-
-  if (!currentUser && !error) {
-    return (
-      <div className="h-screen grid place-items-center p-4">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    const redirectTo = router.asPath;
-
-    router.push(`/?next=${redirectTo}`);
-    return null;
-  }
-
-  return <>{children}</>;
-};

web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx

@@ -1,123 +0,0 @@
-import { useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import { WorkspaceService } from "services/workspace.service";
-// contexts
-import { WorkspaceMemberProvider } from "contexts/workspace-member.context";
-// layouts
-import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
-import AppHeader from "layouts/app-layout-legacy/app-header";
-import { UserAuthorizationLayout } from "./user-authorization-wrapper";
-// components
-import { Button, LayersIcon, Spinner } from "@plane/ui";
-import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
-import { CommandPalette } from "components/command-palette";
-// fetch-keys
-import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
-
-type Props = {
-  children: React.ReactNode;
-  noHeader?: boolean;
-  bg?: "primary" | "secondary";
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-};
-
-const workspaceService = new WorkspaceService();
-
-export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
-  children,
-  noHeader = false,
-  bg = "primary",
-  breadcrumbs,
-  left,
-  right,
-}) => {
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: workspaceMemberMe, error } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
-  );
-
-  if (!workspaceMemberMe && !error)
-    return (
-      <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <h3 className="text-xl">Loading your workspace...</h3>
-          <Spinner />
-        </div>
-      </div>
-    );
-
-  if (error?.status === 401 || error?.status === 403) return <NotAWorkspaceMember />;
-
-  // FIXME: show 404 for workspace not workspace member
-  if (error?.status === 404) {
-    return (
-      <div className="container flex h-screen items-center justify-center bg-custom-background-100">
-        <p className="text-2xl font-semibold">No such workspace exists. Create one?</p>
-      </div>
-    );
-  }
-
-  const settingsLayout = router.pathname.includes("/settings");
-  const memberType = {
-    isOwner: workspaceMemberMe?.role === 20,
-    isMember: workspaceMemberMe?.role === 15,
-    isViewer: workspaceMemberMe?.role === 10,
-    isGuest: workspaceMemberMe?.role === 5,
-  };
-
-  return (
-    <UserAuthorizationLayout>
-      <WorkspaceMemberProvider>
-        <CommandPalette />
-        <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-          {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-            <NotAuthorizedView
-              actionButton={
-                <Link href={`/${workspaceSlug}`}>
-                  <a>
-                    <Button className="flex items-center gap-1">
-                      <LayersIcon height={16} width={16} color="white" /> Go to workspace
-                    </Button>
-                  </a>
-                </Link>
-              }
-              type="workspace"
-            />
-          ) : (
-            <main
-              className={`relative flex h-full w-full flex-col overflow-hidden ${
-                bg === "primary"
-                  ? "bg-custom-background-100"
-                  : bg === "secondary"
-                  ? "bg-custom-background-90"
-                  : "bg-custom-background-80"
-              }`}
-            >
-              <AppHeader
-                breadcrumbs={breadcrumbs}
-                left={left}
-                right={right}
-                setToggleSidebar={setToggleSidebar}
-                noHeader={noHeader}
-              />
-              <div className="h-full w-full overflow-hidden">
-                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
-              </div>
-            </main>
-          )}
-        </div>
-      </WorkspaceMemberProvider>
-    </UserAuthorizationLayout>
-  );
-};

web/layouts/auth-layout/project-wrapper.tsx

@@ -65,7 +65,13 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
       ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
       : null
   );
-  // TODO: fetch project estimates
+  // fetching project estimates
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectEstimates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
   // fetching project cycles
   useSWR(
     workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,

web/layouts/profile-layout.tsx

@@ -1,49 +0,0 @@
-import { useRouter } from "next/router";
-// hooks
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
-// components
-import { ProfileNavbar, ProfileSidebar } from "components/profile";
-// ui
-import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-};
-
-export const ProfileAuthWrapper = (props: Props) => {
-  const router = useRouter();
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem title="User Profile" />
-        </Breadcrumbs>
-      }
-    >
-      <ProfileLayout {...props} />
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-const ProfileLayout: React.FC<Props> = ({ children, className }) => {
-  const { memberRole } = useWorkspaceMyMembership();
-
-  return (
-    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
-      <ProfileSidebar />
-      <div className="md:h-full w-full flex flex-col md:overflow-hidden">
-        <ProfileNavbar memberRole={memberRole} />
-        {memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? (
-          <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
-        ) : (
-          <div className="h-full w-full grid place-items-center text-custom-text-200">
-            You do not have the permission to access this page.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

web/layouts/profile-layout/index.ts

@@ -0,0 +1 @@
+export * from "./layout";

web/layouts/profile-layout/layout.tsx

@@ -0,0 +1,44 @@
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { ProfileNavbar, ProfileSidebar } from "components/profile";
+// constants
+import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const ProfileAuthWrapper: React.FC<Props> = ({ children, className }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: memberDetails } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
+  );
+
+  const isAuthorized = memberDetails?.role === 20 || memberDetails?.role === 15 || memberDetails?.role === 10;
+
+  return (
+    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
+      <ProfileSidebar />
+      <div className="md:h-full w-full flex flex-col md:overflow-hidden">
+        <ProfileNavbar isAuthorized={isAuthorized} />
+        {isAuthorized ? (
+          <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
+        ) : (
+          <div className="h-full w-full grid place-items-center text-custom-text-200">
+            You do not have the permission to access this page.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

web/layouts/setting-layout/index.ts

@@ -0,0 +1,2 @@
+export * from "./project-setting-layout";
+export * from "./workspace-setting-layout";

web/layouts/setting-layout/project-setting-layout/layout.tsx

@@ -1,40 +1,20 @@
 import { FC, ReactNode } from "react";
-// layouts
-import { UserAuthWrapper, ProjectAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
 // components
-import { AppSidebar } from "layouts/app-layout";
 import { ProjectSettingsSidebar } from "./sidebar";
 
 export interface IProjectSettingLayout {
   children: ReactNode;
-  header: ReactNode;
 }
 
 export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
-  const { children, header } = props;
+  const { children } = props;
 
   return (
-    <>
-      <UserAuthWrapper>
-        <WorkspaceAuthWrapper>
-          <ProjectAuthWrapper>
-            <div className="relative flex h-screen w-full overflow-hidden">
-              <AppSidebar />
-              <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
-                {header}
-                <div className="h-full w-full overflow-hidden">
-                  <div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                    <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-                      <ProjectSettingsSidebar />
-                    </div>
-                    {children}
-                  </div>
-                </div>
-              </main>
-            </div>
-          </ProjectAuthWrapper>
-        </WorkspaceAuthWrapper>
-      </UserAuthWrapper>
-    </>
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <ProjectSettingsSidebar />
+      </div>
+      {children}
+    </div>
   );
 };

web/layouts/setting-layout/workspace-setting-layout/layout.tsx

@@ -1,38 +1,20 @@
 import { FC, ReactNode } from "react";
-// layouts
-import { UserAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
 // components
-import { AppSidebar } from "layouts/app-layout";
 import { WorkspaceSettingsSidebar } from "./sidebar";
 
 export interface IWorkspaceSettingLayout {
   children: ReactNode;
-  header: ReactNode;
 }
 
 export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
-  const { children, header } = props;
+  const { children } = props;
 
   return (
-    <>
-      <UserAuthWrapper>
-        <WorkspaceAuthWrapper>
-          <div className="relative flex h-screen w-full overflow-hidden">
-            <AppSidebar />
-            <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
-              {header}
-              <div className="h-full w-full overflow-hidden">
-                <div className="flex gap-2 relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                  <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-                    <WorkspaceSettingsSidebar />
-                  </div>
-                  {children}
-                </div>
-              </div>
-            </main>
-          </div>
-        </WorkspaceAuthWrapper>
-      </UserAuthWrapper>
-    </>
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <WorkspaceSettingsSidebar />
+      </div>
+      {children}
+    </div>
   );
 };

web/next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
       "localhost",
       ...extraImageDomains,
     ],
+    unoptimized: true,
   },
   output: "standalone",
   experimental: {

web/package.json

@@ -7,7 +7,8 @@
     "develop": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",