fix: project states fixes (#2731)

* fix: project states fixes * fix: states fixes * fix: formating all files
2023-11-08 20:31:46 +05:30 · 2023-11-08 20:31:46 +05:30 · 20fb79567f
commit 20fb79567f
parent bd1a850f35
156 changed files with 1585 additions and 1758 deletions
--- a/ENV_SETUP.md
+++ b/ENV_SETUP.md
@ -1,8 +1,10 @@
 # Environment Variables
+

 Environment variables are distributed in various files. Please refer them carefully.

 ## {PROJECT_FOLDER}/.env
+
 File is available in the project root folder

 ```
@ -41,25 +43,37 @@ USE_MINIO=1
 # Nginx Configuration
 NGINX_PORT=80
 ```
+

+
 ## {PROJECT_FOLDER}/web/.env.example
+

+
 ```
 # Enable/Disable OAUTH - default 0 for selfhosted instance
 NEXT_PUBLIC_ENABLE_OAUTH=0
 # Public boards deploy URL
 NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
 ```
+

+
 ## {PROJECT_FOLDER}/spaces/.env.example
+

+
 ```
 # Flag to toggle OAuth
 NEXT_PUBLIC_ENABLE_OAUTH=0
 ```
+

+
 ## {PROJECT_FOLDER}/apiserver/.env
+

+
 ```
 # Backend
 # Debug value for api server use it as 0 for production use
@ -126,7 +140,9 @@ ENABLE_SIGNUP="1"
 # Email Redirection URL
 WEB_URL="http://localhost"
 ```
+
 ## Updates
+
 - The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
 - The naming convention for containers and images has been updated.
 - The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
--- a/packages/editor/core/Readme.md
+++ b/packages/editor/core/Readme.md
@ -20,7 +20,7 @@ This allows for extensive customization and flexibility in the Editors created u
 1. useEditor - A hook that you can use to extend the Plane editor.

   | Prop                      | Type                                                             | Description                                                                                                                                                             |
-    | --- | --- | --- |
+   | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `extensions`              | `Extension[]`                                                    | An array of custom extensions you want to add into the editor to extend it's core features                                                                              |
   | `editorProps`             | `EditorProps`                                                    | Extend the editor props by passing in a custom props object                                                                                                             |
   | `uploadFile`              | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
@ -35,7 +35,7 @@ This allows for extensive customization and flexibility in the Editors created u
 2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.

   | Prop           | Type          | Description                                                                                |
-    | --- | --- | --- |
+   | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
   | `value`        | `string`      | The initial content of the editor.                                                         |
   | `forwardedRef` | `any`         | Pass this in whenever you want to control the editor's state from an external component    |
   | `extensions`   | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
@ -51,7 +51,11 @@ This allows for extensive customization and flexibility in the Editors created u
 5. Extending with Custom Styles

 ```ts
-const customEditorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+const customEditorClassNames = getEditorClassNames({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+});
 ```

 ## Core features
--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@ -3,18 +3,36 @@ import { UploadImage } from "../types/upload-image";
 import { startImageUpload } from "../ui/plugins/upload-image";

 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
-  else editor.chain().focus().toggleHeading({ level: 1 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 1 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 1 }).run();
 };

 export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
-  else editor.chain().focus().toggleHeading({ level: 2 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 2 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 2 }).run();
 };

 export const toggleHeadingThree = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
-  else editor.chain().focus().toggleHeading({ level: 3 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 3 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 3 }).run();
 };

 export const toggleBold = (editor: Editor, range?: Range) => {
@ -37,7 +55,8 @@ export const toggleCode = (editor: Editor, range?: Range) => {
  else editor.chain().focus().toggleCode().run();
 };
 export const toggleOrderedList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  if (range)
+    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
  else editor.chain().focus().toggleOrderedList().run();
 };

@ -48,7 +67,7 @@ export const toggleBulletList = (editor: Editor, range?: Range) => {

 export const toggleTaskList = (editor: Editor, range?: Range) => {
  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
-  else editor.chain().focus().toggleTaskList().run()
+  else editor.chain().focus().toggleTaskList().run();
 };

 export const toggleStrike = (editor: Editor, range?: Range) => {
@ -57,13 +76,37 @@ export const toggleStrike = (editor: Editor, range?: Range) => {
 };

 export const toggleBlockquote = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
-  else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
 };

 export const insertTableCommand = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
 };

 export const unsetLinkEditor = (editor: Editor) => {
@ -74,7 +117,14 @@ export const setLinkEditor = (editor: Editor, url: string) => {
  editor.chain().focus().setLink({ href: url }).run();
 };

-export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => {
+export const insertImageCommand = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+  range?: Range,
+) => {
  if (range) editor.chain().focus().deleteRange(range).run();
  const input = document.createElement("input");
  input.type = "file";
@ -88,4 +138,3 @@ export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setI
  };
  input.click();
 };
-
--- a/packages/editor/core/src/lib/utils.ts
+++ b/packages/editor/core/src/lib/utils.ts
@ -6,19 +6,24 @@ interface EditorClassNames {
  customClassName?: string;
 }

-export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) => cn(
-  'relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md',
-  noBorder ? '' : 'border border-custom-border-200',
-  borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0',
-  customClassName
-);
+export const getEditorClassNames = ({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+}: EditorClassNames) =>
+  cn(
+    "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
+    noBorder ? "" : "border border-custom-border-200",
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    customClassName,
+  );

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }

 export const findTableAncestor = (
-  node: Node | null
+  node: Node | null,
 ): HTMLTableElement | null => {
  while (node !== null && node.nodeName !== "TABLE") {
    node = node.parentNode;
@ -27,10 +32,10 @@ export const findTableAncestor = (
 };

 export const getTrimmedHTML = (html: string) => {
-  html = html.replace(/^(<p><\/p>)+/, '');
-  html = html.replace(/(<p><\/p>)+$/, '');
+  html = html.replace(/^(<p><\/p>)+/, "");
+  html = html.replace(/(<p><\/p>)+$/, "");
  return html;
-}
+};

 export const isValidHttpUrl = (string: string): boolean => {
  let url: URL;
@ -42,4 +47,4 @@ export const isValidHttpUrl = (string: string): boolean => {
  }

  return url.protocol === "http:" || url.protocol === "https:";
-}
+};
--- a/packages/editor/core/src/types/mention-suggestion.ts
+++ b/packages/editor/core/src/types/mention-suggestion.ts
@ -5,6 +5,6 @@ export type IMentionSuggestion = {
  title: string;
  subtitle: string;
  redirect_uri: string;
-}
+};

-export type IMentionHighlight = string
+export type IMentionHighlight = string;
--- a/packages/editor/core/src/ui/components/editor-content.tsx
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@ -8,10 +8,16 @@ interface EditorContentProps {
  children?: ReactNode;
 }

-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
+export const EditorContentWrapper = ({
+  editor,
+  editorContentCustomClassNames = "",
+  children,
+}: EditorContentProps) => (
  <div className={`contentEditor ${editorContentCustomClassNames}`}>
    <EditorContent editor={editor} />
-    {(editor?.isActive("image") && editor?.isEditable) && <ImageResizer editor={editor} />}
+    {editor?.isActive("image") && editor?.isEditable && (
+      <ImageResizer editor={editor} />
+    )}
    {children}
  </div>
 );
--- a/packages/editor/core/src/ui/extensions/image/image-resize.tsx
+++ b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
@ -3,7 +3,9 @@ import Moveable from "react-moveable";

 export const ImageResizer = ({ editor }: { editor: Editor }) => {
  const updateMediaSize = () => {
-    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
    if (imageInfo) {
      const selection = editor.state.selection;
      editor.commands.setImage({
--- a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
@ -1 +1 @@
-export { default as default } from "./table-cell"
+export { default as default } from "./table-cell";
--- a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@ -1,7 +1,7 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";

 export interface TableCellOptions {
-  HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }

 export default Node.create<TableCellOptions>({
@ -9,8 +9,8 @@ export default Node.create<TableCellOptions>({

  addOptions() {
    return {
-      HTMLAttributes: {}
-    }
+      HTMLAttributes: {},
+    };
  },

  content: "paragraph+",
@ -18,24 +18,24 @@ export default Node.create<TableCellOptions>({
  addAttributes() {
    return {
      colspan: {
-        default: 1
+        default: 1,
      },
      rowspan: {
-        default: 1
+        default: 1,
      },
      colwidth: {
        default: null,
        parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth")
-          const value = colwidth ? [parseInt(colwidth, 10)] : null
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;

-          return value
-        }
+          return value;
+        },
      },
      background: {
-        default: "none"
-      }
-    }
+        default: "none",
+      },
+    };
  },

  tableRole: "cell",
@ -43,16 +43,16 @@ export default Node.create<TableCellOptions>({
  isolating: true,

  parseHTML() {
-    return [{ tag: "td" }]
+    return [{ tag: "td" }];
  },

  renderHTML({ node, HTMLAttributes }) {
    return [
      "td",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}`
+        style: `background-color: ${node.attrs.background}`,
      }),
-      0
-    ]
-  }
-})
+      0,
+    ];
+  },
+});
--- a/packages/editor/core/src/ui/extensions/table/table-header/index.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
@ -1 +1 @@
-export { default as default } from "./table-header"
+export { default as default } from "./table-header";
--- a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@ -1,15 +1,15 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";

 export interface TableHeaderOptions {
-  HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }
 export default Node.create<TableHeaderOptions>({
  name: "tableHeader",

  addOptions() {
    return {
-      HTMLAttributes: {}
-    }
+      HTMLAttributes: {},
+    };
  },

  content: "paragraph+",
@ -17,24 +17,24 @@ export default Node.create<TableHeaderOptions>({
  addAttributes() {
    return {
      colspan: {
-        default: 1
+        default: 1,
      },
      rowspan: {
-        default: 1
+        default: 1,
      },
      colwidth: {
        default: null,
        parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth")
-          const value = colwidth ? [parseInt(colwidth, 10)] : null
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;

-          return value
-        }
+          return value;
+        },
      },
      background: {
-        default: "rgb(var(--color-primary-100))"
-      }
-    }
+        default: "rgb(var(--color-primary-100))",
+      },
+    };
  },

  tableRole: "header_cell",
@ -42,16 +42,16 @@ export default Node.create<TableHeaderOptions>({
  isolating: true,

  parseHTML() {
-    return [{ tag: "th" }]
+    return [{ tag: "th" }];
  },

  renderHTML({ node, HTMLAttributes }) {
    return [
      "th",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}`
+        style: `background-color: ${node.attrs.background}`,
      }),
-      0
-    ]
-  }
-})
+      0,
+    ];
+  },
+});
--- a/packages/editor/core/src/ui/extensions/table/table-row/index.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
@ -1 +1 @@
-export { default as default } from "./table-row"
+export { default as default } from "./table-row";
--- a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@ -1,7 +1,7 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";

 export interface TableRowOptions {
-    HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }

 export default Node.create<TableRowOptions>({
@ -9,8 +9,8 @@ export default Node.create<TableRowOptions>({

  addOptions() {
    return {
-            HTMLAttributes: {}
-        }
+      HTMLAttributes: {},
+    };
  },

  content: "(tableCell | tableHeader)*",
@ -18,14 +18,14 @@ export default Node.create<TableRowOptions>({
  tableRole: "row",

  parseHTML() {
-        return [{ tag: "tr" }]
+    return [{ tag: "tr" }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      "tr",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-            0
-        ]
-    }
-})
+      0,
+    ];
+  },
+});
--- a/packages/editor/core/src/ui/extensions/table/table/icons.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@ -38,7 +38,7 @@ const icons = {
    />
  </svg>
 `,
-  insertBottomTableIcon:`<svg
+  insertBottomTableIcon: `<svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
--- a/packages/editor/core/src/ui/extensions/table/table/index.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/index.ts
@ -1 +1 @@
-export { default as default } from "./table"
+export { default as default } from "./table";
--- a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@ -68,7 +68,12 @@ export function tableControls() {

        const { hoveredTable, hoveredCell } = pluginState.values;
        const docSize = state.doc.content.size;
-        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+        if (
+          hoveredTable &&
+          hoveredCell &&
+          hoveredTable.pos < docSize &&
+          hoveredCell.pos < docSize
+        ) {
          const decorations = [
            Decoration.node(
              hoveredTable.pos,
--- a/packages/editor/core/src/ui/extensions/table/table/table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@ -1,6 +1,12 @@
-import { TextSelection } from "@tiptap/pm/state"
+import { TextSelection } from "@tiptap/pm/state";

-import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"
+import {
+  callOrReturn,
+  getExtensionField,
+  mergeAttributes,
+  Node,
+  ParentConfig,
+} from "@tiptap/core";
 import {
  addColumnAfter,
  addColumnBefore,
@ -18,64 +24,64 @@ import {
  splitCell,
  tableEditing,
  toggleHeader,
-    toggleHeaderCell
-} from "@tiptap/prosemirror-tables"
+  toggleHeaderCell,
+} from "@tiptap/prosemirror-tables";

-import { tableControls } from "./table-controls"
-import { TableView } from "./table-view"
-import { createTable } from "./utilities/create-table"
-import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected"
+import { tableControls } from "./table-controls";
+import { TableView } from "./table-view";
+import { createTable } from "./utilities/create-table";
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected";

 export interface TableOptions {
-    HTMLAttributes: Record<string, any>
-    resizable: boolean
-    handleWidth: number
-    cellMinWidth: number
-    lastColumnResizable: boolean
-    allowTableNodeSelection: boolean
+  HTMLAttributes: Record<string, any>;
+  resizable: boolean;
+  handleWidth: number;
+  cellMinWidth: number;
+  lastColumnResizable: boolean;
+  allowTableNodeSelection: boolean;
 }

 declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    table: {
      insertTable: (options?: {
-                rows?: number
-                cols?: number
-                withHeaderRow?: boolean
-            }) => ReturnType
-            addColumnBefore: () => ReturnType
-            addColumnAfter: () => ReturnType
-            deleteColumn: () => ReturnType
-            addRowBefore: () => ReturnType
-            addRowAfter: () => ReturnType
-            deleteRow: () => ReturnType
-            deleteTable: () => ReturnType
-            mergeCells: () => ReturnType
-            splitCell: () => ReturnType
-            toggleHeaderColumn: () => ReturnType
-            toggleHeaderRow: () => ReturnType
-            toggleHeaderCell: () => ReturnType
-            mergeOrSplit: () => ReturnType
-            setCellAttribute: (name: string, value: any) => ReturnType
-            goToNextCell: () => ReturnType
-            goToPreviousCell: () => ReturnType
-            fixTables: () => ReturnType
+        rows?: number;
+        cols?: number;
+        withHeaderRow?: boolean;
+      }) => ReturnType;
+      addColumnBefore: () => ReturnType;
+      addColumnAfter: () => ReturnType;
+      deleteColumn: () => ReturnType;
+      addRowBefore: () => ReturnType;
+      addRowAfter: () => ReturnType;
+      deleteRow: () => ReturnType;
+      deleteTable: () => ReturnType;
+      mergeCells: () => ReturnType;
+      splitCell: () => ReturnType;
+      toggleHeaderColumn: () => ReturnType;
+      toggleHeaderRow: () => ReturnType;
+      toggleHeaderCell: () => ReturnType;
+      mergeOrSplit: () => ReturnType;
+      setCellAttribute: (name: string, value: any) => ReturnType;
+      goToNextCell: () => ReturnType;
+      goToPreviousCell: () => ReturnType;
+      fixTables: () => ReturnType;
      setCellSelection: (position: {
-                anchorCell: number
-                headCell?: number
-            }) => ReturnType
-        }
+        anchorCell: number;
+        headCell?: number;
+      }) => ReturnType;
+    };
  }

  interface NodeConfig<Options, Storage> {
    tableRole?:
      | string
      | ((this: {
-                  name: string
-                  options: Options
-                  storage: Storage
-                  parent: ParentConfig<NodeConfig<Options>>["tableRole"]
-              }) => string)
+          name: string;
+          options: Options;
+          storage: Storage;
+          parent: ParentConfig<NodeConfig<Options>>["tableRole"];
+        }) => string);
  }
 }

@ -89,8 +95,8 @@ export default Node.create({
      handleWidth: 5,
      cellMinWidth: 100,
      lastColumnResizable: true,
-            allowTableNodeSelection: true
-        }
+      allowTableNodeSelection: true,
+    };
  },

  content: "tableRow+",
@ -104,103 +110,111 @@ export default Node.create({
  allowGapCursor: false,

  parseHTML() {
-        return [{ tag: "table" }]
+    return [{ tag: "table" }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      "table",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-            ["tbody", 0]
-        ]
+      ["tbody", 0],
+    ];
  },

  addCommands() {
    return {
      insertTable:
-                ({ rows = 3, cols = 3, withHeaderRow = true} = {}) =>
+        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
        ({ tr, dispatch, editor }) => {
-                    const node = createTable(
-                        editor.schema,
-                        rows,
-                        cols,
-                        withHeaderRow
-                    )
+          const node = createTable(editor.schema, rows, cols, withHeaderRow);

          if (dispatch) {
-                        const offset = tr.selection.anchor + 1
+            const offset = tr.selection.anchor + 1;

            tr.replaceSelectionWith(node)
              .scrollIntoView()
-                            .setSelection(
-                                TextSelection.near(tr.doc.resolve(offset))
-                            )
+              .setSelection(TextSelection.near(tr.doc.resolve(offset)));
          }

-                    return true
+          return true;
        },
      addColumnBefore:
        () =>
-                ({ state, dispatch }) => addColumnBefore(state, dispatch),
+        ({ state, dispatch }) =>
+          addColumnBefore(state, dispatch),
      addColumnAfter:
        () =>
-                ({ state, dispatch }) => addColumnAfter(state, dispatch),
+        ({ state, dispatch }) =>
+          addColumnAfter(state, dispatch),
      deleteColumn:
        () =>
-                ({ state, dispatch }) => deleteColumn(state, dispatch),
+        ({ state, dispatch }) =>
+          deleteColumn(state, dispatch),
      addRowBefore:
        () =>
-                ({ state, dispatch }) => addRowBefore(state, dispatch),
+        ({ state, dispatch }) =>
+          addRowBefore(state, dispatch),
      addRowAfter:
        () =>
-                ({ state, dispatch }) => addRowAfter(state, dispatch),
+        ({ state, dispatch }) =>
+          addRowAfter(state, dispatch),
      deleteRow:
        () =>
-                ({ state, dispatch }) => deleteRow(state, dispatch),
+        ({ state, dispatch }) =>
+          deleteRow(state, dispatch),
      deleteTable:
        () =>
-                ({ state, dispatch }) => deleteTable(state, dispatch),
+        ({ state, dispatch }) =>
+          deleteTable(state, dispatch),
      mergeCells:
        () =>
-                ({ state, dispatch }) => mergeCells(state, dispatch),
+        ({ state, dispatch }) =>
+          mergeCells(state, dispatch),
      splitCell:
        () =>
-                ({ state, dispatch }) => splitCell(state, dispatch),
+        ({ state, dispatch }) =>
+          splitCell(state, dispatch),
      toggleHeaderColumn:
        () =>
-                ({ state, dispatch }) => toggleHeader("column")(state, dispatch),
+        ({ state, dispatch }) =>
+          toggleHeader("column")(state, dispatch),
      toggleHeaderRow:
        () =>
-                ({ state, dispatch }) => toggleHeader("row")(state, dispatch),
+        ({ state, dispatch }) =>
+          toggleHeader("row")(state, dispatch),
      toggleHeaderCell:
        () =>
-                ({ state, dispatch }) => toggleHeaderCell(state, dispatch),
+        ({ state, dispatch }) =>
+          toggleHeaderCell(state, dispatch),
      mergeOrSplit:
        () =>
        ({ state, dispatch }) => {
          if (mergeCells(state, dispatch)) {
-                        return true
+            return true;
          }

-                    return splitCell(state, dispatch)
+          return splitCell(state, dispatch);
        },
      setCellAttribute:
        (name, value) =>
-                ({ state, dispatch }) => setCellAttr(name, value)(state, dispatch),
+        ({ state, dispatch }) =>
+          setCellAttr(name, value)(state, dispatch),
      goToNextCell:
        () =>
-                ({ state, dispatch }) => goToNextCell(1)(state, dispatch),
+        ({ state, dispatch }) =>
+          goToNextCell(1)(state, dispatch),
      goToPreviousCell:
        () =>
-                ({ state, dispatch }) => goToNextCell(-1)(state, dispatch),
+        ({ state, dispatch }) =>
+          goToNextCell(-1)(state, dispatch),
      fixTables:
        () =>
        ({ state, dispatch }) => {
          if (dispatch) {
-                        fixTables(state)
+            fixTables(state);
          }

-                    return true
+          return true;
        },
      setCellSelection:
        (position) =>
@ -209,62 +223,62 @@ export default Node.create({
            const selection = CellSelection.create(
              tr.doc,
              position.anchorCell,
-                            position.headCell
-                        )
+              position.headCell,
+            );

            // @ts-ignore
-                        tr.setSelection(selection)
+            tr.setSelection(selection);
          }

-                    return true
-                }
-        }
+          return true;
+        },
+    };
  },

  addKeyboardShortcuts() {
    return {
      Tab: () => {
        if (this.editor.commands.goToNextCell()) {
-                    return true
+          return true;
        }

        if (!this.editor.can().addRowAfter()) {
-                    return false
+          return false;
        }

-                return this.editor.chain().addRowAfter().goToNextCell().run()
+        return this.editor.chain().addRowAfter().goToNextCell().run();
      },
      "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
      Backspace: deleteTableWhenAllCellsSelected,
      "Mod-Backspace": deleteTableWhenAllCellsSelected,
      Delete: deleteTableWhenAllCellsSelected,
-            "Mod-Delete": deleteTableWhenAllCellsSelected
-        }
+      "Mod-Delete": deleteTableWhenAllCellsSelected,
+    };
  },

  addNodeView() {
    return ({ editor, getPos, node, decorations }) => {
-            const { cellMinWidth } = this.options
+      const { cellMinWidth } = this.options;

      return new TableView(
        node,
        cellMinWidth,
        decorations,
        editor,
-                getPos as () => number
-            )
-        }
+        getPos as () => number,
+      );
+    };
  },

  addProseMirrorPlugins() {
-        const isResizable = this.options.resizable && this.editor.isEditable
+    const isResizable = this.options.resizable && this.editor.isEditable;

    const plugins = [
      tableEditing({
-                allowTableNodeSelection: this.options.allowTableNodeSelection
+        allowTableNodeSelection: this.options.allowTableNodeSelection,
      }),
-            tableControls()
-        ]
+      tableControls(),
+    ];

    if (isResizable) {
      plugins.unshift(
@ -274,25 +288,25 @@ export default Node.create({
          // View: TableView,

          // @ts-ignore
-                    lastColumnResizable: this.options.lastColumnResizable
-                })
-            )
+          lastColumnResizable: this.options.lastColumnResizable,
+        }),
+      );
    }

-        return plugins
+    return plugins;
  },

  extendNodeSchema(extension) {
    const context = {
      name: extension.name,
      options: extension.options,
-            storage: extension.storage
-        }
+      storage: extension.storage,
+    };

    return {
      tableRole: callOrReturn(
-                getExtensionField(extension, "tableRole", context)
-            )
-        }
-    }
-})
+        getExtensionField(extension, "tableRole", context),
+      ),
+    };
+  },
+});
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
@ -1,12 +1,12 @@
-import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model"
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";

 export function createCell(
  cellType: NodeType,
-    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode | null | undefined {
  if (cellContent) {
-        return cellType.createChecked(null, cellContent)
+    return cellType.createChecked(null, cellContent);
  }

-    return cellType.createAndFill()
+  return cellType.createAndFill();
 }
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
@ -1,45 +1,45 @@
-import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model"
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";

-import { createCell } from "./create-cell"
-import { getTableNodeTypes } from "./get-table-node-types"
+import { createCell } from "./create-cell";
+import { getTableNodeTypes } from "./get-table-node-types";

 export function createTable(
  schema: Schema,
  rowsCount: number,
  colsCount: number,
  withHeaderRow: boolean,
-    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode {
-    const types = getTableNodeTypes(schema)
-    const headerCells: ProsemirrorNode[] = []
-    const cells: ProsemirrorNode[] = []
+  const types = getTableNodeTypes(schema);
+  const headerCells: ProsemirrorNode[] = [];
+  const cells: ProsemirrorNode[] = [];

  for (let index = 0; index < colsCount; index += 1) {
-        const cell = createCell(types.cell, cellContent)
+    const cell = createCell(types.cell, cellContent);

    if (cell) {
-            cells.push(cell)
+      cells.push(cell);
    }

    if (withHeaderRow) {
-            const headerCell = createCell(types.header_cell, cellContent)
+      const headerCell = createCell(types.header_cell, cellContent);

      if (headerCell) {
-                headerCells.push(headerCell)
+        headerCells.push(headerCell);
      }
    }
  }

-    const rows: ProsemirrorNode[] = []
+  const rows: ProsemirrorNode[] = [];

  for (let index = 0; index < rowsCount; index += 1) {
    rows.push(
      types.row.createChecked(
        null,
-                withHeaderRow && index === 0 ? headerCells : cells
-            )
-        )
+        withHeaderRow && index === 0 ? headerCells : cells,
+      ),
+    );
  }

-    return types.table.createChecked(null, rows)
+  return types.table.createChecked(null, rows);
 }
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
@ -1,39 +1,42 @@
-import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"
+import {
+  findParentNodeClosestToPos,
+  KeyboardShortcutCommand,
+} from "@tiptap/core";

-import { isCellSelection } from "./is-cell-selection"
+import { isCellSelection } from "./is-cell-selection";

 export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
-    editor
+  editor,
 }) => {
-    const { selection } = editor.state
+  const { selection } = editor.state;

  if (!isCellSelection(selection)) {
-        return false
+    return false;
  }

-    let cellCount = 0
+  let cellCount = 0;
  const table = findParentNodeClosestToPos(
    selection.ranges[0].$from,
-        (node) => node.type.name === "table"
-    )
+    (node) => node.type.name === "table",
+  );

  table?.node.descendants((node) => {
    if (node.type.name === "table") {
-            return false
+      return false;
    }

    if (["tableCell", "tableHeader"].includes(node.type.name)) {
-            cellCount += 1
+      cellCount += 1;
    }
-    })
+  });

-    const allCellsSelected = cellCount === selection.ranges.length
+  const allCellsSelected = cellCount === selection.ranges.length;

  if (!allCellsSelected) {
-        return false
+    return false;
  }

-    editor.commands.deleteTable()
+  editor.commands.deleteTable();

-    return true
-}
+  return true;
+};
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
@ -1,21 +1,21 @@
-import { NodeType, Schema } from "prosemirror-model"
+import { NodeType, Schema } from "prosemirror-model";

 export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
  if (schema.cached.tableNodeTypes) {
-        return schema.cached.tableNodeTypes
+    return schema.cached.tableNodeTypes;
  }

-    const roles: { [key: string]: NodeType } = {}
+  const roles: { [key: string]: NodeType } = {};

  Object.keys(schema.nodes).forEach((type) => {
-        const nodeType = schema.nodes[type]
+    const nodeType = schema.nodes[type];

    if (nodeType.spec.tableRole) {
-            roles[nodeType.spec.tableRole] = nodeType
+      roles[nodeType.spec.tableRole] = nodeType;
    }
-    })
+  });

-    schema.cached.tableNodeTypes = roles
+  schema.cached.tableNodeTypes = roles;

-    return roles
+  return roles;
 }
--- a/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
@ -1,5 +1,5 @@
-import { CellSelection } from "@tiptap/prosemirror-tables"
+import { CellSelection } from "@tiptap/prosemirror-tables";

 export function isCellSelection(value: unknown): value is CellSelection {
-    return value instanceof CellSelection
+  return value instanceof CellSelection;
 }
--- a/packages/editor/core/src/ui/hooks/useEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@ -95,4 +95,3 @@ export const useEditor = ({

  return editor;
 };
-
--- a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@ -7,7 +7,7 @@ import {
 } from "react";
 import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
 import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
 import { IMentionSuggestion } from "../../types/mention-suggestion";

 interface CustomReadOnlyEditorProps {
@ -19,7 +19,14 @@ interface CustomReadOnlyEditorProps {
  mentionSuggestions?: IMentionSuggestion[];
 }

-export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {}, mentionHighlights, mentionSuggestions}: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = ({
+  value,
+  forwardedRef,
+  extensions = [],
+  editorProps = {},
+  mentionHighlights,
+  mentionSuggestions,
+}: CustomReadOnlyEditorProps) => {
  const editor = useCustomEditor({
    editable: false,
    content:
@ -28,7 +35,13 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
      ...CoreReadOnlyEditorProps,
      ...editorProps,
    },
-    extensions: [...CoreReadOnlyEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}), ...extensions],
+    extensions: [
+      ...CoreReadOnlyEditorExtensions({
+        mentionSuggestions: mentionSuggestions ?? [],
+        mentionHighlights: mentionHighlights ?? [],
+      }),
+      ...extensions,
+    ],
  });

  const hasIntiliazedContent = useRef(false);
--- a/packages/editor/core/src/ui/mentions/custom.tsx
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@ -1,11 +1,11 @@
-import { Mention, MentionOptions } from '@tiptap/extension-mention'
-import { mergeAttributes } from '@tiptap/core'
-import { ReactNodeViewRenderer } from '@tiptap/react'
-import mentionNodeView from './mentionNodeView'
-import { IMentionHighlight } from '../../types/mention-suggestion'
+import { Mention, MentionOptions } from "@tiptap/extension-mention";
+import { mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import mentionNodeView from "./mentionNodeView";
+import { IMentionHighlight } from "../../types/mention-suggestion";
 export interface CustomMentionOptions extends MentionOptions {
-  mentionHighlights: IMentionHighlight[]
-  readonly?: boolean
+  mentionHighlights: IMentionHighlight[];
+  readonly?: boolean;
 }

 export const CustomMention = Mention.extend<CustomMentionOptions>({
@ -21,35 +21,37 @@ export const CustomMention = Mention.extend<CustomMentionOptions>({
        default: null,
      },
      self: {
-        default: false
+        default: false,
      },
      redirect_uri: {
-        default: "/"
-      }
-    }
+        default: "/",
+      },
+    };
  },

  addNodeView() {
-    return ReactNodeViewRenderer(mentionNodeView)
+    return ReactNodeViewRenderer(mentionNodeView);
  },

  parseHTML() {
-    return [{
-      tag: 'mention-component',
+    return [
+      {
+        tag: "mention-component",
        getAttrs: (node: string | HTMLElement) => {
-        if (typeof node === 'string') {
+          if (typeof node === "string") {
            return null;
          }
          return {
-          id: node.getAttribute('data-mention-id') || '',
-          target: node.getAttribute('data-mention-target') || '',
-          label: node.innerText.slice(1) || '',
-          redirect_uri: node.getAttribute('redirect_uri')
-        }
+            id: node.getAttribute("data-mention-id") || "",
+            target: node.getAttribute("data-mention-target") || "",
+            label: node.innerText.slice(1) || "",
+            redirect_uri: node.getAttribute("redirect_uri"),
+          };
        },
-    }]
+      },
+    ];
  },
  renderHTML({ HTMLAttributes }) {
-    return ['mention-component', mergeAttributes(HTMLAttributes)]
+    return ["mention-component", mergeAttributes(HTMLAttributes)];
  },
-})
+});
--- a/packages/editor/core/src/ui/mentions/index.tsx
+++ b/packages/editor/core/src/ui/mentions/index.tsx
@ -2,14 +2,21 @@

 import suggestion from "./suggestion";
 import { CustomMention } from "./custom";
-import { IMentionHighlight, IMentionSuggestion } from "../../types/mention-suggestion";
+import {
+  IMentionHighlight,
+  IMentionSuggestion,
+} from "../../types/mention-suggestion";

-export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({
+export const Mentions = (
+  mentionSuggestions: IMentionSuggestion[],
+  mentionHighlights: IMentionHighlight[],
+  readonly,
+) =>
+  CustomMention.configure({
    HTMLAttributes: {
-    'class' : "mention",
+      class: "mention",
    },
    readonly: readonly,
    mentionHighlights: mentionHighlights,
    suggestion: suggestion(mentionSuggestions),
-})
-
+  });
--- a/packages/editor/core/src/ui/mentions/suggestion.ts
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@ -1,12 +1,17 @@
-import { ReactRenderer } from '@tiptap/react'
+import { ReactRenderer } from "@tiptap/react";
 import { Editor } from "@tiptap/core";
-import tippy from 'tippy.js'
+import tippy from "tippy.js";

-import MentionList from './MentionList'
-import { IMentionSuggestion } from '../../types/mention-suggestion';
+import MentionList from "./MentionList";
+import { IMentionSuggestion } from "../../types/mention-suggestion";

 const Suggestion = (suggestions: IMentionSuggestion[]) => ({
-  items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),
+  items: ({ query }: { query: string }) =>
+    suggestions
+      .filter((suggestion) =>
+        suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 5),
  render: () => {
    let reactRenderer: ReactRenderer | null = null;
    let popup: any | null = null;
@ -30,7 +35,7 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
      },

      onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
-        reactRenderer?.updateProps(props)
+        reactRenderer?.updateProps(props);

        popup &&
          popup[0].setProps({
@ -49,11 +54,10 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
      },
      onExit: () => {
        popup?.[0].destroy();
-        reactRenderer?.destroy()
+        reactRenderer?.destroy();
      },
-    }
+    };
  },
-})
-
+});

 export default Suggestion;
--- a/packages/editor/core/src/ui/props.tsx
+++ b/packages/editor/core/src/ui/props.tsx
@ -5,7 +5,9 @@ import { UploadImage } from "../types/upload-image";

 export function CoreEditorProps(
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ): EditorProps {
  return {
    attributes: {
@ -32,7 +34,11 @@ export function CoreEditorProps(
          }
        }
      }
-      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
        event.preventDefault();
        const file = event.clipboardData.files[0];
        const pos = view.state.selection.from;
@ -51,7 +57,12 @@ export function CoreEditorProps(
          }
        }
      }
-      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
        event.preventDefault();
        const file = event.dataTransfer.files[0];
        const coordinates = view.posAtCoords({
@ -59,7 +70,13 @@ export function CoreEditorProps(
          top: event.clientY,
        });
        if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting);
+          startImageUpload(
+            file,
+            view,
+            coordinates.pos - 1,
+            uploadFile,
+            setIsSubmitting,
+          );
        }
        return true;
      }
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@ -18,9 +18,10 @@ import { isValidHttpUrl } from "../../lib/utils";
 import { Mentions } from "../mentions";
 import { IMentionSuggestion } from "../../types/mention-suggestion";

-export const CoreReadOnlyEditorExtensions = (
-  mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] },
-) => [
+export const CoreReadOnlyEditorExtensions = (mentionConfig: {
+  mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: string[];
+}) => [
  StarterKit.configure({
    bulletList: {
      HTMLAttributes: {
@ -93,5 +94,9 @@ export const CoreReadOnlyEditorExtensions = (
  TableHeader,
  TableCell,
  TableRow,
-    Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
-  ];
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    true,
+  ),
+];
--- a/packages/editor/core/src/ui/read-only/props.tsx
+++ b/packages/editor/core/src/ui/read-only/props.tsx
@ -1,7 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";

-export const CoreReadOnlyEditorProps: EditorProps =
-{
+export const CoreReadOnlyEditorProps: EditorProps = {
  attributes: {
    class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
  },
--- a/packages/editor/lite-text-editor/Readme.md
+++ b/packages/editor/lite-text-editor/Readme.md
@ -10,13 +10,13 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in

  `LiteTextEditor` & `LiteTextEditorWithRef`

- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Lite editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
  `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`

 ## LiteTextEditor

 | Prop                            | Type                                                             | Description                                                                                                                                                             |
-| --- | --- | --- |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
 | `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
 | `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
@ -45,21 +45,21 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
  onChange={(comment_json: Object, comment_html: string) => {
    onChange(comment_html);
  }}
-    />
+/>
 ```

 2. Example of how to use the `LiteTextEditorWithRef` component

 ```tsx
-  const editorRef = useRef<any>(null);
+const editorRef = useRef<any>(null);

-  // can use it to set the editor's value
-  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);

-  // can use it to clear the editor
-  editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();

-  return ( 
+return (
  <LiteTextEditorWithRef
    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
@ -72,13 +72,13 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
      onChange(comment_html);
    }}
  />
-)
+);
 ```

 ## LiteReadOnlyEditor

 | Prop                            | Type          | Description                                                           |
-| --- | --- | --- |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
 | `value`                         | `html string` | The initial content of the editor.                                    |
 | `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
 | `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
@ -90,8 +90,8 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
 Here is an example of how to use the `RichReadOnlyEditor` component

 ```tsx
-  <LiteReadOnlyEditor
+<LiteReadOnlyEditor
  value={comment.comment_html}
  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-  />
+/>
 ```
--- a/packages/editor/lite-text-editor/src/index.ts
+++ b/packages/editor/lite-text-editor/src/index.ts
@ -1,3 +1,3 @@
 export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
 export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
-export type { IMentionSuggestion, IMentionHighlight } from "./ui"
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@ -31,7 +31,7 @@ interface ILiteTextEditor {
  editorContentCustomClassNames?: string;
  onChange?: (json: any, html: string) => void;
  setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved"
+    isSubmitting: "submitting" | "submitted" | "saved",
  ) => void;
  setShouldShowAlert?: (showAlert: boolean) => void;
  forwardedRef?: any;
@ -129,7 +129,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
 };

 const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
-  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />,
 );

 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
@ -6,8 +6,9 @@ type Props = {
 };

 export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
+  <span
+    className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}
+  >
    {iconName}
  </span>
 );
-
--- a/packages/editor/rich-text-editor/Readme.md
+++ b/packages/editor/rich-text-editor/Readme.md
@ -10,13 +10,13 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in

  `RichTextEditor` & `RichTextEditorWithRef`

- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Rich editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Rich editor types (with and without Ref)
  `RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`

 ## RichTextEditor

 | Prop                            | Type                                                             | Description                                                                                                                                                             |
-| --- | --- | --- |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
 | `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
 | `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
@ -57,15 +57,16 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
 2. Example of how to use the `RichTextEditorWithRef` component

 ```tsx
-  const editorRef = useRef<any>(null);
+const editorRef = useRef<any>(null);

-  // can use it to set the editor's value
-  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);

-  // can use it to clear the editor
-  editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();

-  return (<RichTextEditorWithRef
+return (
+  <RichTextEditorWithRef
    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
    deleteFile={fileService.deleteImage}
    ref={editorRef}
@ -75,13 +76,15 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
    onChange={(description: Object, description_html: string) => {
      onChange(description_html);
      // custom stuff you want to do
-  } } />)
+    }}
+  />
+);
 ```

 ## RichReadOnlyEditor

 | Prop                            | Type          | Description                                                           |
-| --- | --- | --- |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
 | `value`                         | `html string` | The initial content of the editor.                                    |
 | `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
 | `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
@ -93,7 +96,8 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
 Here is an example of how to use the `RichReadOnlyEditor` component

 ```tsx
-  <RichReadOnlyEditor
+<RichReadOnlyEditor
  value={issueDetails.description_html}
-    customClassName="p-3 min-h-[50px] shadow-sm" />
+  customClassName="p-3 min-h-[50px] shadow-sm"
+/>
 ```
--- a/packages/editor/rich-text-editor/src/index.ts
+++ b/packages/editor/rich-text-editor/src/index.ts
@ -2,4 +2,4 @@ import "./styles/github-dark.css";

 export { RichTextEditor, RichTextEditorWithRef } from "./ui";
 export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
-export type { IMentionSuggestion, IMentionHighlight } from "./ui"
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";
--- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@ -1,7 +1,7 @@
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Placeholder from "@tiptap/extension-placeholder";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { common, createLowlight } from 'lowlight'
+import { common, createLowlight } from "lowlight";
 import { InputRule } from "@tiptap/core";

 import ts from "highlight.js/lib/languages/typescript";
@ -9,12 +9,14 @@ import ts from "highlight.js/lib/languages/typescript";
 import SlashCommand from "./slash-command";
 import { UploadImage } from "../";

-const lowlight = createLowlight(common)
+const lowlight = createLowlight(common);
 lowlight.register("ts", ts);

 export const RichTextEditorExtensions = (
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) => [
  HorizontalRule.extend({
    addInputRules() {
@ -56,4 +58,4 @@ export const RichTextEditorExtensions = (
    },
    includeChildren: true,
  }),
-  ];
+];
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@ -1,7 +1,19 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import { cn, isValidHttpUrl, setLinkEditor, unsetLinkEditor, } from "@plane/editor-core";
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import {
+  cn,
+  isValidHttpUrl,
+  setLinkEditor,
+  unsetLinkEditor,
+} from "@plane/editor-core";

 interface LinkSelectorProps {
  editor: Editor;
@ -9,7 +21,11 @@ interface LinkSelectorProps {
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }

-export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const LinkSelector: FC<LinkSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
  const inputRef = useRef<HTMLInputElement>(null);

  const onLinkSubmit = useCallback(() => {
@ -31,7 +47,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
        type="button"
        className={cn(
          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
+          { "bg-custom-background-100": isOpen },
        )}
        onClick={() => {
          setIsOpen(!isOpen);
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@ -1,10 +1,16 @@
-import { BulletListItem, cn, CodeItem, HeadingOneItem, HeadingThreeItem, HeadingTwoItem, NumberedListItem, QuoteItem, TodoListItem } from "@plane/editor-core";
-import { Editor } from "@tiptap/react";
 import {
-  Check,
-  ChevronDown,
-  TextIcon,
-} from "lucide-react";
+  BulletListItem,
+  cn,
+  CodeItem,
+  HeadingOneItem,
+  HeadingThreeItem,
+  HeadingTwoItem,
+  NumberedListItem,
+  QuoteItem,
+  TodoListItem,
+} from "@plane/editor-core";
+import { Editor } from "@tiptap/react";
+import { Check, ChevronDown, TextIcon } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";

 import { BubbleMenuItem } from ".";
@ -15,12 +21,17 @@ interface NodeSelectorProps {
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }

-export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const NodeSelector: FC<NodeSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
  const items: BubbleMenuItem[] = [
    {
      name: "Text",
      icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
      isActive: () =>
        editor.isActive("paragraph") &&
        !editor.isActive("bulletList") &&
@ -63,7 +74,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
              }}
              className={cn(
                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
-                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+                {
+                  "bg-custom-primary-100/5 text-custom-text-100":
+                    activeItem.name === item.name,
+                },
              )}
            >
              <div className="flex items-center space-x-2">
--- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@ -1,6 +1,11 @@
-"use client"
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core';
-import * as React from 'react';
+"use client";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
+import * as React from "react";

 interface IRichTextReadOnlyEditor {
  value: string;
@ -35,23 +40,31 @@ const RichReadOnlyEditor = ({
    mentionHighlights,
  });

-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });

  if (!editor) return null;

  return (
    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
      <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
      </div>
-    </EditorContainer >
+    </EditorContainer>
  );
 };

-const RichReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => (
-  <RichReadOnlyEditor {...props} forwardedRef={ref} />
-));
+const RichReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  IRichTextReadOnlyEditor
+>((props, ref) => <RichReadOnlyEditor {...props} forwardedRef={ref} />);

 RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";

-export { RichReadOnlyEditor , RichReadOnlyEditorWithRef };
+export { RichReadOnlyEditor, RichReadOnlyEditorWithRef };
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@ -123,7 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
    size = "md",
    shape = "circle",
    src,
-    className = ""
+    className = "",
  } = props;

  // get size details based on the size prop
@ -157,7 +157,9 @@ export const Avatar: React.FC<Props> = (props) => {
          <div
            className={`${
              sizeInfo.fontSize
-            } grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`}
+            } grid place-items-center h-full w-full ${getBorderRadius(
+              shape,
+            )} ${className}`}
            style={{
              backgroundColor:
                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@ -58,7 +58,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
        )}
      </button>
    );
-  }
+  },
 );

 Button.displayName = "plane-ui-button";
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@ -102,7 +102,7 @@ export const buttonStyling: IButtonStyling = {
 export const getButtonStyling = (
  variant: TButtonVariant,
  size: TButtonSizes,
-  disabled: boolean = false
+  disabled: boolean = false,
 ): string => {
  let _variant: string = ``;
  const currentVariant = buttonStyling[variant];
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@ -35,7 +35,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
  const [referenceElement, setReferenceElement] =
    useState<HTMLButtonElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
+    null,
  );

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
@ -46,7 +46,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
    query === ""
      ? options
      : options?.filter((option) =>
-          option.query.toLowerCase().includes(query.toLowerCase())
+          option.query.toLowerCase().includes(query.toLowerCase()),
        );

  const comboboxProps: any = {
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@ -30,7 +30,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
  const [referenceElement, setReferenceElement] =
    useState<HTMLButtonElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
+    null,
  );

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
--- a/packages/ui/src/form-fields/index.ts
+++ b/packages/ui/src/form-fields/index.ts
@ -1,3 +1,3 @@
 export * from "./input";
 export * from "./textarea";
-export * from "./input-color-picker"
+export * from "./input-color-picker";
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@ -10,7 +10,7 @@ export interface TextAreaProps
 // Updates the height of a <textarea> when the value changes.
 const useAutoSizeTextArea = (
  textAreaRef: HTMLTextAreaElement | null,
-  value: any
+  value: any,
 ) => {
  React.useEffect(() => {
    if (textAreaRef) {
@ -63,7 +63,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
        {...rest}
      />
    );
-  }
+  },
 );

 export { TextArea };
--- a/packages/ui/src/progress/circular-progress-indicator.tsx
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@ -9,7 +9,7 @@ interface ICircularProgressIndicator {
 }

 export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
-  props
+  props,
 ) => {
  const { size = 40, percentage = 25, strokeWidth = 6, children } = props;

--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@ -9,7 +9,6 @@ type Props = {
 };

 export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
-
  const mentionConfig = useEditorSuggestions();

  return (
@ -20,15 +19,19 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
      {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
        <RichReadOnlyEditor
-          value={!issueDetails.description_html ||
+          value={
+            !issueDetails.description_html ||
            issueDetails.description_html === "" ||
            (typeof issueDetails.description_html === "object" &&
              Object.keys(issueDetails.description_html).length === 0)
              ? "<p></p>"
-            : issueDetails.description_html}
-          customClassName="p-3 min-h-[50px] shadow-sm" mentionHighlights={mentionConfig.mentionHighlights} />
+              : issueDetails.description_html
+          }
+          customClassName="p-3 min-h-[50px] shadow-sm"
+          mentionHighlights={mentionConfig.mentionHighlights}
+        />
      )}
      <IssueReactions />
    </div>
-  )
+  );
 };
--- a/space/store/mentions.store.ts
+++ b/space/store/mentions.store.ts
@ -7,20 +7,18 @@ export interface IMentionsStore {
  mentionHighlights: IMentionHighlight[];
 }

-export class MentionsStore implements IMentionsStore{
-
+export class MentionsStore implements IMentionsStore {
  // root store
  rootStore;

-    constructor(_rootStore: RootStore ){
-
+  constructor(_rootStore: RootStore) {
    // rootStore
    this.rootStore = _rootStore;

    makeObservable(this, {
      mentionHighlights: computed,
      // mentionSuggestions: computed
-        })
+    });
  }

  // get mentionSuggestions() {
@ -40,6 +38,6 @@ export class MentionsStore implements IMentionsStore{

  get mentionHighlights() {
    const user = this.rootStore.user.currentUser;
-        return user ? [user.id] : []
+    return user ? [user.id] : [];
  }
 }
--- a/web/components/account/github-login-button.tsx
+++ b/web/components/account/github-login-button.tsx
@ -32,8 +32,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
  }, [code, gitCode, handleSignIn]);

  useEffect(() => {
-    const origin =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
    setLoginCallBackURL(`${origin}/` as any);
  }, []);

--- a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@ -49,10 +49,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
            : ""
        }`}
      >
-        {params.segment === "assignees__id"
-          ? renderAssigneeName(tooltipValue.toString())
-          : tooltipValue}
-        :
+        {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
      </span>
      <span>{datum.value}</span>
    </div>
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@ -22,9 +22,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
            keys={["count"]}
            height="250px"
            colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) =>
-              d.count > 0 ? d.count : 50
-            )}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
            tooltip={(datum) => {
              const assignee = defaultAnalytics.pending_issue_user.find(
                (a) => a.assignees__id === `${datum.indexValue}`
--- a/web/components/auth-screens/not-authorized-view.tsx
+++ b/web/components/auth-screens/not-authorized-view.tsx
@ -31,9 +31,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
            alt="ProjectSettingImg"
          />
        </div>
-        <h1 className="text-xl font-medium text-custom-text-100">
-          Oops! You are not authorized to view this page
-        </h1>
+        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>

        <div className="w-full max-w-md text-base text-custom-text-200">
          {user ? (
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@ -7,8 +7,6 @@ import { SelectMonthModal } from "components/automation";
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
 // icons
 import { ArchiveX } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
 import { IProject } from "types";
 // fetch keys
@ -23,12 +21,12 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
  // states
  const [monthModal, setmonthModal] = useState(false);

-  const { user: userStore, project: projectStore } = useMobxStore();
+  const { user: userStore, project: projectStore, projectState: projectStateStore } = useMobxStore();

  const userRole = userStore.currentProjectRole;
  const projectDetails = projectStore.currentProjectDetails;
-  const stateGroups = projectStore.projectStatesByGroups ?? undefined;
-  const states = getStatesList(stateGroups);
+  // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
+  const states = projectStateStore.projectStates;

  const options = states
    ?.filter((state) => state.group === "cancelled")
@ -45,7 +43,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {

  const multipleOptions = (options ?? []).length > 1;

-  const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
+  const defaultState = states?.find((s) => s.group === "cancelled")?.id || null;

  const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
  const currentDefaultState = states?.find((s) => s.id === defaultState);
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@ -1,9 +1,6 @@
 import React, { Dispatch, SetStateAction, useCallback } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // cmdk
 import { Command } from "cmdk";
 // services
@ -13,8 +10,6 @@ import { ProjectStateService } from "services/project";
 import { Spinner, StateGroupIcon } from "@plane/ui";
 // icons
 import { Check } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
 import { IUser, IIssue } from "types";
 // fetch keys
@ -34,11 +29,10 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
  const router = useRouter();
  const { workspaceSlug, projectId, issueId } = router.query;

-  const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
+  const { data: states, mutate: mutateStates } = useSWR(
    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
  );
-  const states = getStatesList(stateGroups);

  const submitChanges = useCallback(
    async (formData: Partial<IIssue>) => {
@ -60,14 +54,14 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
      await issueService
        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
        .then(() => {
-          mutateIssueDetails();
+          mutateStates();
          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
        })
        .catch((e) => {
          console.error(e);
        });
    },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
+    [workspaceSlug, issueId, projectId, mutateStates, user]
  );

  const handleIssueState = (stateId: string) => {
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@ -57,8 +57,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
      const interval = Math.ceil(totalDates / maxDates);
      const limitedDates = [];

-      for (let i = 0; i < totalDates; i += interval)
-        limitedDates.push(renderShortNumericDateFormat(dates[i]));
+      for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderShortNumericDateFormat(dates[i]));

      if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1])))
        limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1]));
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -231,7 +231,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
              </button>
            )}

-            <CustomMenu width="auto" ellipsis >
+            <CustomMenu width="auto" ellipsis>
              {!isCompleted && (
                <>
                  <CustomMenu.MenuItem onClick={handleEditCycle}>
--- a/web/components/gantt-chart/chart/month.tsx
+++ b/web/components/gantt-chart/chart/month.tsx
@ -34,16 +34,8 @@ export const MonthChartView: FC<any> = () => {
                        style={{ width: `${currentViewData?.data.width}px` }}
                      >
                        <div className="text-xs space-x-1">
-                          <span className="text-custom-text-200">
-                            {monthDay.dayData.shortTitle[0]}
-                          </span>{" "}
-                          <span
-                            className={
-                              monthDay.today
-                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
-                                : ""
-                            }
-                          >
+                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className={monthDay.today ? "bg-custom-primary-100 text-white px-1 rounded-full" : ""}>
                            {monthDay.day}
                          </span>
                        </div>
@ -63,9 +55,7 @@ export const MonthChartView: FC<any> = () => {
                    >
                      <div
                        className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-90`
-                            : ``
+                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
                        }`}
                      >
                        {/* {monthDay?.today && (
--- a/web/components/gantt-chart/data/index.ts
+++ b/web/components/gantt-chart/data/index.ts
@ -27,8 +27,7 @@ export const months: WeekMonthDataType[] = [
  { key: 11, shortTitle: "dec", title: "december" },
 ];

-export const charCapitalize = (word: string) =>
-  `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
+export const charCapitalize = (word: string) => `${word.charAt(0).toUpperCase()}${word.substring(1)}`;

 export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);

@ -50,9 +49,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
  month = months[month as number] as WeekMonthDataType;
  const year = date.getFullYear();

-  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${
-    includeTime ? `, ${timePreview(date)}` : ``
-  }`;
+  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
 };

 // context data
@ -137,8 +134,6 @@ export const allViewsWithData: ChartDataType[] = [
 ];

 export const currentViewDataWithView = (view: string = "month") => {
-  const currentView: ChartDataType | undefined = allViewsWithData.find(
-    (_viewData) => _viewData.key === view
-  );
+  const currentView: ChartDataType | undefined = allViewsWithData.find((_viewData) => _viewData.key === view);
  return currentView;
 };
--- a/web/components/gantt-chart/views/bi-week-view.ts
+++ b/web/components/gantt-chart/views/bi-week-view.ts
@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";

 type GetAllDaysInMonthInMonthViewType = {
  date: any;
@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
      active: false,
      today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
          ? true
          : false,
    });
@ -72,16 +65,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
  if (side === null) {
    const currentDate = renderState.data.currentDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -96,16 +81,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
  } else if (side === "left") {
    const currentDate = renderState.data.startDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -116,16 +93,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
  } else if (side === "right") {
    const currentDate = renderState.data.endDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

--- a/web/components/gantt-chart/views/day-view.ts
+++ b/web/components/gantt-chart/views/day-view.ts
@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
  const weekStart = new Date(firstWeekStart);

-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;

  return weekNumber;
 };
@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
  return date.getDate();
 };

-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);

 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
  const months = [];
@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
    months.push(new Date(currentYear, currentMonth));
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);

  return months;
 };
@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
      weekNumber: getWeekNumberByDate(date),
      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
      today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
          ? true
          : false,
    });
@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
  return monthPayload;
 };

-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
  let renderState = monthPayload;
  const renderPayload: any = [];

@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
  if (side === null) {
    const currentDate = renderState.data.currentDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
  } else if (side === "left") {
    const currentDate = renderState.data.startDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
  } else if (side === "right") {
    const currentDate = renderState.data.endDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

--- a/web/components/gantt-chart/views/helpers.ts
+++ b/web/components/gantt-chart/views/helpers.ts
@ -1,6 +1,5 @@
 // Generating the date by using the year, month, and day
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);

 // Getting the number of days in a month
 export const getNumberOfDaysInMonth = (month: number, year: number) => {
@ -20,8 +19,7 @@ export const getWeekNumberByDate = (date: Date) => {
  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
  const weekStart = new Date(firstWeekStart);

-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;

  return weekNumber;
 };
@ -86,8 +84,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
    dates.push(new Date(currentYear, currentMonth));
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    dates.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) dates.push(endDate);

  return dates;
 };
--- a/web/components/gantt-chart/views/hours-view.ts
+++ b/web/components/gantt-chart/views/hours-view.ts
@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
  const weekStart = new Date(firstWeekStart);

-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;

  return weekNumber;
 };
@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
  return date.getDate();
 };

-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);

 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
  const months = [];
@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
    months.push(new Date(currentYear, currentMonth));
    currentDate.setMonth(currentDate.getMonth() + 1);
  }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);

  return months;
 };
@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
      weekNumber: getWeekNumberByDate(date),
      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
      today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
          ? true
          : false,
    });
@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
  return monthPayload;
 };

-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
  let renderState = monthPayload;
  const renderPayload: any = [];

@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
  if (side === null) {
    const currentDate = renderState.data.currentDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
  } else if (side === "left") {
    const currentDate = renderState.data.startDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
  } else if (side === "right") {
    const currentDate = renderState.data.endDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

--- a/web/components/gantt-chart/views/month-view.ts
+++ b/web/components/gantt-chart/views/month-view.ts
@ -3,12 +3,7 @@ import { ChartDataType, IGanttBlock } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";

 type GetAllDaysInMonthInMonthViewType = {
  date: any;
@ -62,9 +57,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number): IMonthChild[
      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
      active: false,
      today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
          ? true
          : false,
    });
@ -100,16 +93,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
  if (side === null) {
    const currentDate = renderState.data.currentDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -124,16 +109,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
  } else if (side === "left") {
    const currentDate = renderState.data.startDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -144,16 +121,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
  } else if (side === "right") {
    const currentDate = renderState.data.endDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -191,10 +160,7 @@ export const getNumberOfDaysBetweenTwoDatesInMonth = (startDate: Date, endDate:
 };

 // calc item scroll position and width
-export const getMonthChartItemPositionWidthInMonth = (
-  chartData: ChartDataType,
-  itemData: IGanttBlock
-) => {
+export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType, itemData: IGanttBlock) => {
  let scrollPosition: number = 0;
  let scrollWidth: number = 0;

@ -207,9 +173,7 @@ export const getMonthChartItemPositionWidthInMonth = (

  // position code starts
  const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
-  const positionDaysDifference: number = Math.abs(
-    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const positionDaysDifference: number = Math.abs(Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24)));
  scrollPosition = positionDaysDifference * chartData.data.width;

  var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
@ -221,9 +185,7 @@ export const getMonthChartItemPositionWidthInMonth = (

  // width code starts
  const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
-  const widthDaysDifference: number = Math.abs(
-    Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const widthDaysDifference: number = Math.abs(Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24)));
  scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
  // width code ends

--- a/web/components/gantt-chart/views/quater-view.ts
+++ b/web/components/gantt-chart/views/quater-view.ts
@ -36,10 +36,7 @@ const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number)
  return weekPayload;
 };

-export const generateQuarterChart = (
-  quarterPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" | "right") => {
  let renderState = quarterPayload;
  const renderPayload: any = [];

--- a/web/components/gantt-chart/views/week-view.ts
+++ b/web/components/gantt-chart/views/week-view.ts
@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";

 type GetAllDaysInMonthInMonthViewType = {
  date: any;
@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
      title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
      active: false,
      today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
          ? true
          : false,
    });
@ -72,16 +65,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
  if (side === null) {
    const currentDate = renderState.data.currentDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -96,16 +81,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
  } else if (side === "left") {
    const currentDate = renderState.data.startDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

@ -116,16 +93,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
  } else if (side === "right") {
    const currentDate = renderState.data.endDate;

-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());

    if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);

--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -31,6 +31,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
    cycle: cycleStore,
    cycleIssueFilter: cycleIssueFilterStore,
    project: projectStore,
+    projectState: projectStateStore,
    commandPalette: commandPaletteStore,
  } = useMobxStore();
  const { currentProjectDetails } = projectStore;
@ -178,7 +179,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
              }
              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
          </FiltersDropdown>
          <FiltersDropdown title="Display" placement="bottom-end">
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -31,6 +31,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
    module: moduleStore,
    moduleFilter: moduleFilterStore,
    project: projectStore,
+    projectState: projectStateStore,
    commandPalette: commandPaletteStore,
  } = useMobxStore();
  const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -177,7 +178,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
              }
              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
          </FiltersDropdown>
          <FiltersDropdown title="Display" placement="bottom-end">
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@ -5,10 +5,8 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-// helper
-import { truncateText } from "helpers/string.helper";
 // ui
-import { Breadcrumbs, BreadcrumbItem, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // icons
 import { ArrowLeft } from "lucide-react";
 // components
@ -22,7 +20,11 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { project: projectStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
+  const {
+    project: projectStore,
+    archivedIssueFilters: archivedIssueFiltersStore,
+    projectState: projectStateStore,
+  } = useMobxStore();

  const { currentProjectDetails } = projectStore;

@ -118,7 +120,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
            }
            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
          />
        </FiltersDropdown>
        <FiltersDropdown title="Display" placement="bottom-end">
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -26,6 +26,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
  const {
    issueFilter: issueFilterStore,
    project: projectStore,
+    projectState: projectStateStore,
    inbox: inboxStore,
    commandPalette: commandPaletteStore,
  } = useMobxStore();
@ -172,7 +173,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
              }
              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
          </FiltersDropdown>
          <FiltersDropdown title="Display" placement="bottom-end">
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@ -23,6 +23,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    projectViewFilters: projectViewFiltersStore,
    project: projectStore,
+    projectState: projectStateStore,
    projectViews: projectViewsStore,
  } = useMobxStore();

@ -163,7 +164,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
            }
            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
          />
        </FiltersDropdown>
        <FiltersDropdown title="Display" placement="bottom-end">
--- a/web/components/icons/completed-cycle-icon.tsx
+++ b/web/components/icons/completed-cycle-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const CompletedCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CompletedCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
    <path
      d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
--- a/web/components/icons/current-cycle-icon.tsx
+++ b/web/components/icons/current-cycle-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const CurrentCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CurrentCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
    <path
      d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
--- a/web/components/icons/document-icon.tsx
+++ b/web/components/icons/document-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const DocumentIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/external-link-icon.tsx
+++ b/web/components/icons/external-link-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const ExternalLinkIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const ExternalLinkIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/module/cancelled.tsx
+++ b/web/components/icons/module/cancelled.tsx
@ -7,11 +7,7 @@ type Props = {
  color?: string;
 };

-export const ModuleCancelledIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCancelledIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/module/completed.tsx
+++ b/web/components/icons/module/completed.tsx
@ -7,11 +7,7 @@ type Props = {
  color?: string;
 };

-export const ModuleCompletedIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCompletedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/module/in-progress.tsx
+++ b/web/components/icons/module/in-progress.tsx
@ -7,11 +7,7 @@ type Props = {
  color?: string;
 };

-export const ModuleInProgressIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleInProgressIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
  <svg
    width={width}
    height={height}
@ -23,10 +19,7 @@ export const ModuleInProgressIcon: React.FC<Props> = ({
      <g id="Layer_1-2" data-name="Layer 1">
        <path fill="#f7b964" d="M0,111.14c.63.7.21,1.53.3,2.29-.07.26-.17.28-.3,0Z" />
        <path fill="#f6ab3e" d="M0,119.46a3.11,3.11,0,0,1,.3,2q-.19.33-.3,0Z" />
-        <path
-          fill="#facf96"
-          d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z"
-        />
+        <path fill="#facf96" d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z" />
        <path fill="#f5a939" d="M0,113.47l.3,0a2.39,2.39,0,0,1-.3,1.71Z" />
        <path fill="#f8ba67" d="M.27,123.16a.63.63,0,0,1-.27,0v-1.66l.3,0Z" />
        <path
--- a/web/components/icons/module/module-status-icon.tsx
+++ b/web/components/icons/module/module-status-icon.tsx
@ -17,21 +17,12 @@ type Props = {
  width?: string;
 };

-export const ModuleStatusIcon: React.FC<Props> = ({
-  status,
-  className,
-  height = "12px",
-  width = "12px",
-}) => {
-  if (status === "backlog")
-    return <ModuleBacklogIcon className={className} height={height} width={width} />;
-  else if (status === "cancelled")
-    return <ModuleCancelledIcon className={className} height={height} width={width} />;
-  else if (status === "completed")
-    return <ModuleCompletedIcon className={className} height={height} width={width} />;
+export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height = "12px", width = "12px" }) => {
+  if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
  else if (status === "in-progress")
    return <ModuleInProgressIcon className={className} height={height} width={width} />;
-  else if (status === "paused")
-    return <ModulePausedIcon className={className} height={height} width={width} />;
+  else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
  else return <ModulePlannedIcon className={className} height={height} width={width} />;
 };
--- a/web/components/icons/pencil-scribble-icon.tsx
+++ b/web/components/icons/pencil-scribble-icon.tsx
@ -2,19 +2,8 @@ import React from "react";

 import type { Props } from "./types";

-export const PencilScribbleIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#000000",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 96 960 960"
-  >
+export const PencilScribbleIcon: React.FC<Props> = ({ width = "20", height = "20", className, color = "#000000" }) => (
+  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
    <path
      d="M560 936q-12 0-21-9t-9-21q0-13 9-21.5t21-8.5q59 0 99.5-24t40.5-56q0-23-29.5-45T591 717l47-47q63 19 92.5 52.5T760 796q0 67-61 103.5T560 936ZM240 642q-64-14-92-44t-28-62q0-35 26-63t120-62q66-24 85-39t19-35q0-25-22-43t-68-18q-27 0-46 7t-34 22q-8 8-20.5 9.5T157 308q-11-8-11.5-20t7.5-21q17-22 51-36.5t76-14.5q68 0 109 32.5t41 88.5q0 41-28.5 69.5T290 466q-67 25-88.5 39.5T180 536q0 16 27 30.5t81 27.5l-48 48Zm496-154L608 360l45-45q18-18 40-18t40 18l48 48q18 18 18 40t-18 40l-45 45ZM220 876h42l345-345-42-42-345 345v42Zm-60 60V808l405-405 128 128-405 405H160Zm405-447 42 42-42-42Z"
      fill={color}
--- a/web/components/icons/question-mark-circle-icon.tsx
+++ b/web/components/icons/question-mark-circle-icon.tsx
@ -2,11 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const QuestionMarkCircleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const QuestionMarkCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/single-comment-icon.tsx
+++ b/web/components/icons/single-comment-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const SingleCommentCard: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const SingleCommentCard: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/tag-icon.tsx
+++ b/web/components/icons/tag-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const TagIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const TagIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/triangle-exclamation-icon.tsx
+++ b/web/components/icons/triangle-exclamation-icon.tsx
@ -2,11 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const TriangleExclamationIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const TriangleExclamationIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/icons/upcoming-cycle-icon.tsx
+++ b/web/components/icons/upcoming-cycle-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const UpcomingCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const UpcomingCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
    <path
      d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"
--- a/web/components/icons/user-group-icon.tsx
+++ b/web/components/icons/user-group-icon.tsx
@ -2,12 +2,7 @@ import React from "react";

 import type { Props } from "./types";

-export const UserGroupIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const UserGroupIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
  <svg
    width={width}
    height={height}
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@ -41,7 +41,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {

  const editorRef = useRef<any>(null);

-  const editorSuggestion = useEditorSuggestions()
+  const editorSuggestion = useEditorSuggestions();

  const router = useRouter();
  const { workspaceSlug, projectId, inboxId } = router.query;
--- a/web/components/integration/jira/confirm-import.tsx
+++ b/web/components/integration/jira/confirm-import.tsx
@ -37,9 +37,7 @@ export const JiraConfirmImport: React.FC = () => {
            <p className="text-sm text-custom-text-200">Labels</p>
          </div>
          <div>
-            <h4 className="mb-2 text-lg font-semibold">
-              {watch("data.users").filter((user) => user.import).length}
-            </h4>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.users").filter((user) => user.import).length}</h4>
            <p className="text-sm text-custom-text-200">User</p>
          </div>
        </div>
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@ -15,7 +15,7 @@ import { X } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";

 type Props = {
  appliedFilters: IIssueFilterOptions;
@ -24,7 +24,7 @@ type Props = {
  labels?: IIssueLabels[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
@ -70,7 +70,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
            {filterKey === "priority" && (
              <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
            )}
-            {filterKey === "state" && (
+            {filterKey === "state" && states && (
              <AppliedStateFilters
                handleRemove={(val) => handleRemoveFilter("state", val)}
                states={states}
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@ -12,7 +12,11 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
+  const {
+    archivedIssueFilters: archivedIssueFiltersStore,
+    project: projectStore,
+    projectState: projectStateStore,
+  } = useMobxStore();

  const userFilters = archivedIssueFiltersStore.userFilters;

@ -74,7 +78,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -12,7 +11,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId } = router.query;

-  const { project: projectStore, cycleIssueFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    project: projectStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+    projectState: projectStateStore,
+  } = useMobxStore();

  const userFilters = cycleIssueFilterStore.cycleFilters;

@ -70,7 +73,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@ -12,7 +12,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId, moduleId } = router.query;

-  const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+  const { project: projectStore, moduleFilter: moduleFilterStore, projectState: projectStateStore } = useMobxStore();

  const userFilters = moduleFilterStore.moduleFilters;

@ -70,7 +70,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@ -12,7 +12,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, project: projectStore, projectState: projectStateStore } = useMobxStore();

  const userFilters = issueFilterStore.userFilters;

@ -74,7 +74,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@ -19,6 +19,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {

  const {
    project: projectStore,
+    projectState: projectStateStore,
    projectViews: projectViewsStore,
    projectViewFilters: projectViewFiltersStore,
  } = useMobxStore();
@ -99,7 +100,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
        <Button variant="primary" size="sm" onClick={handleUpdateView}>
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@ -3,26 +3,22 @@ import { observer } from "mobx-react-lite";
 // icons
 import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";

 type Props = {
  handleRemove: (val: string) => void;
-  states: IStateResponse | undefined;
+  states: IState[];
  values: string[];
 };

 export const AppliedStateFilters: React.FC<Props> = observer((props) => {
  const { handleRemove, states, values } = props;

-  const statesList = getStatesList(states);
-
  return (
    <div className="flex items-center gap-1 flex-wrap">
      {values.map((stateId) => {
-        const stateDetails = statesList?.find((s) => s.id === stateId);
+        const stateDetails = states?.find((s) => s.id === stateId);

        if (!stateDetails) return null;

--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@ -15,7 +15,7 @@ import {
  FilterTargetDate,
 } from "components/issues";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions } from "constants/issue";

@ -26,7 +26,7 @@ type Props = {
  labels?: IIssueLabels[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 export const FilterSelection: React.FC<Props> = observer((props) => {
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@ -1,19 +1,16 @@
 import React, { useState } from "react";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader, StateGroupIcon } from "@plane/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";

 type Props = {
  appliedFilters: string[] | null;
  handleUpdate: (val: string) => void;
  searchQuery: string;
-  states: IStateResponse | undefined;
+  states: IState[] | undefined;
 };

 export const FilterState: React.FC<Props> = (props) => {
@ -22,11 +19,9 @@ export const FilterState: React.FC<Props> = (props) => {
  const [itemsToRender, setItemsToRender] = useState(5);
  const [previewEnabled, setPreviewEnabled] = useState(true);

-  const statesList = getStatesList(states);
-
  const appliedFiltersCount = appliedFilters?.length ?? 0;

-  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));

  const handleViewToggle = () => {
    if (!filteredOptions) return;
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@ -25,6 +25,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    cycleIssue: cycleIssueStore,
    issueFilter: issueFilterStore,
    cycleIssueKanBanView: cycleIssueKanBanViewStore,
@ -98,7 +99,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@ -9,8 +9,6 @@ import { KanBanSwimLanes } from "../swimlanes";
 import { KanBan } from "../default";
 import { ModuleIssueQuickActions } from "components/issues";
 import { Spinner } from "@plane/ui";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@ -24,6 +22,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    moduleIssue: moduleIssueStore,
    issueFilter: issueFilterStore,
    moduleIssueKanBanView: moduleIssueKanBanViewStore,
@ -96,7 +95,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/Show More
+++ b/Show More