fixed merge conflict

apps/app/components/command-palette/index.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useCallback, useEffect } from "react";
 // next
 import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
+// react hook form
+import { SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // hooks
@@ -22,9 +26,11 @@ import CreateProjectModal from "components/project/CreateProjectModal";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
 // types
-import { IIssue } from "types";
+import { IIssue, IProject, IssueResponse } from "types";
 import { Button } from "ui";
-import { SubmitHandler, useForm } from "react-hook-form";
+import issuesServices from "lib/services/issues.services";
+// fetch keys
+import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 type ItemType = {
   name: string;
@@ -33,7 +39,7 @@ type ItemType = {
 };
 
 type FormInput = {
-  issue: string[];
+  issue_ids: string[];
 };
 
 const CommandPalette: React.FC = () => {
@@ -47,7 +53,7 @@ const CommandPalette: React.FC = () => {
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
   const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
 
-  const { issues, activeProject } = useUser();
+  const { activeWorkspace, activeProject, issues, cycles } = useUser();
 
   const { toggleCollapsed } = useTheme();
 
@@ -59,6 +65,14 @@ const CommandPalette: React.FC = () => {
       : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
         [];
 
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setError,
+  } = useForm<FormInput>();
+
   const quickActions = [
     {
       name: "Add new issue...",
@@ -81,6 +95,7 @@ const CommandPalette: React.FC = () => {
   const handleCommandPaletteClose = () => {
     setIsPaletteOpen(false);
     setQuery("");
+    reset();
   };
 
   const handleKeyDown = useCallback(
@@ -127,21 +142,42 @@ const CommandPalette: React.FC = () => {
     [toggleCollapsed, setToastAlert, router]
   );
 
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    setError,
-    control,
-  } = useForm<FormInput>();
-
   const handleDelete: SubmitHandler<FormInput> = (data) => {
-    console.log("Deleting... " + JSON.stringify(data));
+    if (activeWorkspace && activeProject && data.issue_ids) {
+      issuesServices
+        .bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
+        .then((res) => {
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
+            (prevData) => {
+              return {
+                ...(prevData as IssueResponse),
+                count: (prevData?.results ?? []).filter(
+                  (p) => !data.issue_ids.some((id) => p.id === id)
+                ).length,
+                results: (prevData?.results ?? []).filter(
+                  (p) => !data.issue_ids.some((id) => p.id === id)
+                ),
+              };
+            },
+            false
+          );
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
   };
 
   const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
-    console.log("Adding to cycle...");
+    if (activeWorkspace && activeProject && data.issue_ids) {
+      issuesServices
+        .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, "", data)
+        .then((res) => {})
+        .catch((e) => {
+          console.log(e);
+        });
+    }
   };
 
   useEffect(() => {
@@ -254,10 +290,16 @@ const CommandPalette: React.FC = () => {
                                     /> */}
                                       <input
                                         type="checkbox"
-                                        {...register("issue")}
+                                        {...register("issue_ids")}
+                                        id={`issue-${issue.id}`}
                                         value={issue.id}
                                       />
-                                      <span className="ml-3 flex-auto truncate">{issue.name}</span>
+                                      <label
+                                        htmlFor={`issue-${issue.id}`}
+                                        className="ml-3 flex-auto truncate"
+                                      >
+                                        {issue.name}
+                                      </label>
                                       {active && (
                                         <span className="ml-3 flex-none text-gray-500">
                                           Jump to...

apps/app/components/lexical/config.ts

@@ -0,0 +1,31 @@
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+// theme
+import { defaultTheme } from "./theme";
+
+export const initialConfig = {
+  namespace: "LexicalEditor",
+  // The editor theme
+  theme: defaultTheme,
+  // Handling of errors during update
+  onError(error: any) {
+    console.error(error);
+  },
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+  ],
+};

apps/app/components/lexical/editor.tsx

@@ -0,0 +1,75 @@
+import { FC } from "react";
+import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+
+// custom plugins
+import { CodeHighlightPlugin } from "./plugins/code-highlight";
+import { LexicalToolbar } from "./toolbar";
+// config
+import { initialConfig } from "./config";
+// helpers
+import { getValidatedValue } from "./helpers/editor";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+
+export interface RichTextEditorProps {
+  onChange: (state: string) => void;
+  id: string;
+  value: string;
+}
+
+const RichTextEditor: FC<RichTextEditorProps> = (props) => {
+  // props
+  const { onChange, value, id } = props;
+
+  function handleChange(state: EditorState, editor: LexicalEditor) {
+    state.read(() => {
+      onChange(JSON.stringify(state.toJSON()));
+    });
+  }
+
+  return (
+    <LexicalComposer
+      initialConfig={{
+        ...initialConfig,
+        namespace: id || "Lexical Editor",
+        editorState: getValidatedValue(value),
+      }}
+    >
+      <div className="border border-[#e2e2e2] rounded-md">
+        <LexicalToolbar />
+        <div className="relative">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable className='className="h-[450px] outline-none py-[15px] px-2.5 resize-none overflow-hidden text-ellipsis' />
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+            placeholder={
+              <div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
+                Enter some text...
+              </div>
+            }
+          />
+          <OnChangePlugin onChange={handleChange} />
+          <HistoryPlugin />
+          <CodeHighlightPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <CheckListPlugin />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default RichTextEditor;

apps/app/components/lexical/helpers/editor.ts

@@ -0,0 +1,33 @@
+export const positionEditorElement = (editor: any, rect: any) => {
+  if (window) {
+    if (rect === null) {
+      editor.style.opacity = "0";
+      editor.style.top = "-1000px";
+      editor.style.left = "-1000px";
+    } else {
+      editor.style.opacity = "1";
+      editor.style.top = `${
+        rect.top + rect.height + window.pageYOffset + 10
+      }px`;
+      editor.style.left = `${
+        rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
+      }px`;
+    }
+  }
+};
+
+export const getValidatedValue = (value: string) => {
+  const defaultValue =
+    '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+  if (value) {
+    try {
+      const json = JSON.parse(value);
+      return JSON.stringify(json);
+    } catch (error) {
+      return defaultValue;
+    }
+  }
+
+  return defaultValue;
+};

apps/app/components/lexical/helpers/node.ts

@@ -0,0 +1,17 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+
+export const getSelectedNode = (selection: any) => {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+};

apps/app/components/lexical/plugins/code-highlight.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { registerCodeHighlighting } from "@lexical/code";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export const CodeHighlightPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+};

apps/app/components/lexical/plugins/read-only.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { getValidatedValue } from "../helpers/editor";
+
+const ReadOnlyPlugin = ({ value }: { value: string }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (editor && value) {
+      const initialEditorState = editor?.parseEditorState(
+        getValidatedValue(value) || ""
+      );
+      editor.setEditorState(initialEditorState);
+    }
+  }, [editor, value]);
+
+  return <></>;
+};
+
+export default ReadOnlyPlugin;

apps/app/components/lexical/theme.ts

@@ -0,0 +1,67 @@
+export const defaultTheme = {
+  ltr: "ltr",
+  rtl: "rtl",
+  placeholder: "editor-placeholder",
+  paragraph: "mb-1",
+  quote: "editor-quote",
+  heading: {
+    h1: "text-3xl font-bold",
+    h2: "text-2xl font-bold",
+    h3: "text-xl font-bold",
+    h4: "text-lg font-bold",
+    h5: "text-base font-bold",
+  },
+  list: {
+    nested: {
+      listitem: "list-item",
+    },
+    ol: "list-decimal pl-4",
+    ul: "list-disc pl-4",
+    listitem: "list-item",
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "font-bold",
+    italic: "italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "underline",
+    strikethrough: "line-through",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code",
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable",
+  },
+};

apps/app/components/lexical/toolbar/block-type-select.tsx

@@ -0,0 +1,333 @@
+import { FC, Fragment, useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $getNodeByKey,
+} from "lexical";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  INSERT_CHECK_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import {
+  $isParentElementRTL,
+  $isAtNodeEnd,
+  $wrapNodes,
+} from "@lexical/selection";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+} from "@lexical/rich-text";
+import {
+  $createCodeNode,
+  $isCodeNode,
+  getDefaultCodeLanguage,
+  getCodeLanguages,
+} from "@lexical/code";
+
+const BLOCK_DATA = [
+  { type: "paragraph", name: "Normal" },
+  { type: "h1", name: "Large Heading" },
+  { type: "h2", name: "Small Heading" },
+  { type: "h3", name: "Heading" },
+  { type: "h4", name: "Heading" },
+  { type: "h5", name: "Heading" },
+  { type: "Quote", name: "quote" },
+  { type: "ol", name: "Numbered List" },
+  { type: "ul", name: "Bulleted List" },
+];
+
+const supportedBlockTypes = new Set([
+  "paragraph",
+  "quote",
+  "code",
+  "h1",
+  "h2",
+  "ul",
+  "ol",
+]);
+
+const blockTypeToBlockName: any = {
+  code: "Code Block",
+  h1: "Large Heading",
+  h2: "Small Heading",
+  h3: "Heading",
+  h4: "Heading",
+  h5: "Heading",
+  ol: "Numbered List",
+  paragraph: "Normal",
+  quote: "Quote",
+  ul: "Bulleted List",
+};
+
+export interface BlockTypeSelectProps {
+  editor: any;
+  toolbarRef: any;
+  blockType: string;
+}
+
+export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
+  const { editor, toolbarRef, blockType } = props;
+  // refs
+  const dropDownRef = useRef<any>(null);
+  // states
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
+    useState(false);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown !== null) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown !== null && toolbar !== null) {
+      const handle = (event: any) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    console.log("blockType ", blockType);
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createQuoteNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatCode = () => {
+    if (blockType !== "code") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createCodeNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        className="p-2 mr-2 text-sm flex items-center"
+        onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+        aria-label="Formatting Options"
+      >
+        <span className="mr-2">{blockTypeToBlockName[blockType]}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-chevron-down"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
+          ></path>
+        </svg>
+      </button>
+      {showBlockOptionsDropDown && (
+        <ul
+          className="absolute mt-1 w-full min-w-[160px] overflow-auto rounded-md bg-white z-10 p-1 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          ref={dropDownRef}
+        >
+          <li className="p-1 cursor-pointer" onClick={formatParagraph}>
+            <span className="icon paragraph" />
+            <span className="text">Normal</span>
+            {blockType === "paragraph" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatLargeHeading}>
+            <span className="icon large-heading" />
+            <span className="text">Large Heading</span>
+            {blockType === "h1" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatSmallHeading}>
+            <span className="icon small-heading" />
+            <span className="text">Small Heading</span>
+            {blockType === "h2" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatBulletList}>
+            <span className="icon bullet-list" />
+            <span className="text">Bullet List</span>
+            {blockType === "ul" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatNumberedList}>
+            <span className="icon numbered-list" />
+            <span className="text">Numbered List</span>
+            {blockType === "ol" && <span className="active" />}
+          </li>
+
+          <li className="p-1 cursor-pointer" onClick={formatQuote}>
+            <span className="icon quote" />
+            <span className="text">Quote</span>
+            {blockType === "quote" && <span className="active" />}
+          </li>
+          {/* <button className="item" onClick={formatCode}>
+                <span className="icon code" />
+                <span className="text">Code Block</span>
+                {blockType === 'code' && <span className="active" />}
+              </button> */}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+// export const BlockTypeSelect: FC<any> = () => {
+//   const [selected, setSelected] = useState(BLOCK_DATA[0]);
+
+//   return (
+//     <div className="inline-flex pr-1">
+//       <Listbox value={selected} onChange={setSelected}>
+//         <div className="relative">
+//           <Listbox.Button className="relative w-full min-w-[160px] cursor-default rounded border border-[#e2e2e2] bg-white py-1 pl-3 pr-10 text-left outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-xs">
+//             <span className="block truncate">{selected.name}</span>
+//             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+//               <svg
+//                 xmlns="http://www.w3.org/2000/svg"
+//                 width="16"
+//                 height="16"
+//                 fill="currentColor"
+//                 className="bi bi-chevron-down"
+//                 viewBox="0 0 16 16"
+//               >
+//                 <path
+//                   fillRule="evenodd"
+//                   d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
+//                 ></path>
+//               </svg>
+//             </span>
+//           </Listbox.Button>
+//           <Transition
+//             as={Fragment}
+//             leave="transition ease-in duration-100"
+//             leaveFrom="opacity-100"
+//             leaveTo="opacity-0"
+//           >
+//             <Listbox.Options className="absolute mt-1 max-h-60 w-full min-w-[160px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+//               {BLOCK_DATA.map((blockType, index) => (
+//                 <Listbox.Option
+//                   key={index}
+//                   className={({ active }) =>
+//                     `relative cursor-default select-none py-2 px-2 ${
+//                       active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+//                     }`
+//                   }
+//                   value={blockType}
+//                 >
+//                   {({ selected }) => (
+//                     <>
+//                       <span
+//                         className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
+//                       >
+//                         {blockType.name}
+//                       </span>
+//                     </>
+//                   )}
+//                 </Listbox.Option>
+//               ))}
+//             </Listbox.Options>
+//           </Transition>
+//         </div>
+//       </Listbox>
+//     </div>
+//   );
+// };

apps/app/components/lexical/toolbar/floating-link-editor.tsx

@@ -0,0 +1,156 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { SELECTION_CHANGE_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { mergeRegister } from '@lexical/utils';
+
+// helper functions
+import { positionEditorElement } from '../helpers/editor';
+import { getSelectedNode } from '../helpers/node';
+
+const LowPriority = 1;
+
+export interface FloatingLinkEditorProps {
+  editor: any;
+}
+
+export const FloatingLinkEditor = ({ editor }: FloatingLinkEditorProps) => {
+  // refs
+  const editorRef = useRef<any>(null);
+  const inputRef = useRef<any>(null);
+  const mouseDownRef = useRef(false);
+  // states
+  const [linkUrl, setLinkUrl] = useState('');
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<any>(null);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl('');
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window?.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      !nativeSelection?.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection?.anchorNode)
+    ) {
+      const domRange = nativeSelection?.getRangeAt(0);
+      let rect;
+      if (nativeSelection?.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange?.getBoundingClientRect();
+      }
+
+      if (!mouseDownRef.current) {
+        positionEditorElement(editorElem, rect);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== 'link-input') {
+      positionEditorElement(editorElem, null);
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl('');
+    }
+
+    return true;
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }: any) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <input
+          ref={inputRef}
+          className="link-input"
+          value={linkUrl}
+          onChange={(event) => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              if (lastSelection !== null) {
+                if (linkUrl !== '') {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+                }
+                setEditMode(false);
+              }
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <>
+          <div className="link-input">
+            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+              {linkUrl}
+            </a>
+            <div
+              className="link-edit"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setEditMode(true);
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

apps/app/components/lexical/toolbar/index.tsx

@@ -0,0 +1,430 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $getNodeByKey,
+  RangeSelection,
+  NodeSelection,
+  GridSelection,
+} from "lexical";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $isParentElementRTL,
+  $wrapNodes,
+  $isAtNodeEnd,
+} from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+} from "@lexical/rich-text";
+// custom elements
+import { FloatingLinkEditor } from "./floating-link-editor";
+import { BlockTypeSelect } from "./block-type-select";
+
+const LowPriority = 1;
+
+function getSelectedNode(selection: any) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+export const LexicalToolbar = () => {
+  // editor
+  const [editor] = useLexicalComposerContext();
+  // ref
+  const toolbarRef = useRef(null);
+  // states
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
+    null
+  );
+  const [isRTL, setIsRTL] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType();
+          setBlockType(type);
+        }
+      }
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsRTL($isParentElementRTL(selection));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const insertLink = useCallback(
+    (e: any) => {
+      e.preventDefault();
+      if (!isLink) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+      } else {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      }
+    },
+    [editor, isLink]
+  );
+
+  return (
+    <div
+      className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
+      ref={toolbarRef}
+    >
+      <button
+        disabled={!canUndo}
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(UNDO_COMMAND, undefined);
+        }}
+        className="p-2 mr-2"
+        aria-label="Undo"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-arrow-counterclockwise"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 3a5 5 0 11-4.546 2.914.5.5 0 00-.908-.417A6 6 0 108 2v1z"
+          ></path>
+          <path d="M8 4.466V.534a.25.25 0 00-.41-.192L5.23 2.308a.25.25 0 000 .384l2.36 1.966A.25.25 0 008 4.466z"></path>
+        </svg>
+      </button>
+      <button
+        disabled={!canRedo}
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(REDO_COMMAND, undefined);
+        }}
+        className="p-2 mr-2"
+        aria-label="Redo"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-arrow-clockwise"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 3a5 5 0 104.546 2.914.5.5 0 01.908-.417A6 6 0 118 2v1z"
+          ></path>
+          <path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
+        </svg>
+      </button>
+      <BlockTypeSelect
+        editor={editor}
+        toolbarRef={toolbarRef}
+        blockType={blockType}
+      />
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+        }}
+        className={`p-2 mr-2 ${isBold ? "active" : ""}`}
+        aria-label="Format Bold"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-bold"
+          viewBox="0 0 16 16"
+        >
+          <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+        }}
+        className={"p-2 mr-2" + (isItalic ? "active" : "")}
+        aria-label="Format Italics"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-italic"
+          viewBox="0 0 16 16"
+        >
+          <path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+        }}
+        className={"p-2 mr-2" + (isUnderline ? "active" : "")}
+        aria-label="Format Underline"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-underline"
+          viewBox="0 0 16 16"
+        >
+          <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+        }}
+        className={"p-2 mr-2" + (isStrikethrough ? "active" : "")}
+        aria-label="Format Strikethrough"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-strikethrough"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 01-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+        }}
+        className={"p-2 mr-2 " + (isCode ? "active" : "")}
+        aria-label="Insert Code"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-code"
+          viewBox="0 0 16 16"
+        >
+          <path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={insertLink}
+        className={"p-2 mr-2 " + (isLink ? "active" : "")}
+        aria-label="Insert Link"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-link"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6.354 5.5H4a3 3 0 000 6h3a3 3 0 002.83-4H9c-.086 0-.17.01-.25.031A2 2 0 017 10.5H4a2 2 0 110-4h1.535c.218-.376.495-.714.82-1z"></path>
+          <path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
+        </svg>
+      </button>
+      {isLink &&
+        createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+        }}
+        className="p-2 mr-2"
+        aria-label="Left Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-left"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M2 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+        }}
+        className="p-2 mr-2"
+        aria-label="Center Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-center"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm2-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+        }}
+        className="p-2 mr-2"
+        aria-label="Right Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-right"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M6 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm4-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+        }}
+        className="p-2 mr-2"
+        aria-label="Justify Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-justify"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M2 12.5a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>{" "}
+    </div>
+  );
+};

apps/app/components/lexical/viewer.tsx

@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+// custom plugins
+import { CodeHighlightPlugin } from "./plugins/code-highlight";
+import ReadOnlyPlugin from "./plugins/read-only";
+// config
+import { initialConfig } from "./config";
+// helpers
+import { getValidatedValue } from "./helpers/editor";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+
+export interface RichTextViewerProps {
+  id: string;
+  value: string;
+}
+
+const RichTextViewer: FC<RichTextViewerProps> = (props) => {
+  // props
+  const { value, id } = props;
+
+  return (
+    <LexicalComposer
+      initialConfig={{
+        ...initialConfig,
+        namespace: id || "Lexical Editor",
+        editorState: getValidatedValue(value),
+        editable: false,
+      }}
+    >
+      <div className="relative">
+        <RichTextPlugin
+          contentEditable={
+            <ContentEditable className='className="h-[450px] outline-none py-[15px] resize-none overflow-hidden text-ellipsis' />
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+          placeholder={
+            <div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
+              Enter some text...
+            </div>
+          }
+        />
+        <ReadOnlyPlugin value={value} />
+        <HistoryPlugin />
+        <CodeHighlightPlugin />
+        <ListPlugin />
+        <LinkPlugin />
+        <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default RichTextViewer;

apps/app/components/project/issues/BoardView/SingleBoard.tsx

@@ -61,9 +61,6 @@ const SingleBoard: React.FC<Props> = ({
   // Collapse/Expand
   const [show, setState] = useState<any>(true);
 
-  // Edit state name
-  const [showInput, setInput] = useState<any>(false);
-
   if (selectedGroup === "priority")
     groupTitle === "high"
       ? (bgColor = "#dc2626")
@@ -86,54 +83,52 @@ const SingleBoard: React.FC<Props> = ({
           <div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
             <div
               className={`flex justify-between p-3 pb-0 ${
-                snapshot.isDragging ? "bg-indigo-50 border-indigo-100 border-b" : ""
-              } ${!show ? "flex-col bg-gray-50 rounded-md border" : ""}`}
+                !show ? "flex-col bg-gray-50 rounded-md border" : ""
+              }`}
             >
-              {showInput ? null : (
-                <div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
-                  <button
-                    type="button"
-                    {...provided.dragHandleProps}
-                    className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
-                      !show ? "" : "rotate-90"
-                    } ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
-                  >
-                    <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
-                    <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
-                  </button>
-                  <div
-                    className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
-                      !show ? "py-2 mb-2 flex-col gap-y-2" : ""
-                    }`}
+              <div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
+                <button
+                  type="button"
+                  {...provided.dragHandleProps}
+                  className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
+                    !show ? "" : "rotate-90"
+                  } ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
+                >
+                  <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
+                  <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
+                </button>
+                <div
+                  className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
+                    !show ? "py-2 mb-2 flex-col gap-y-2" : ""
+                  }`}
+                  style={{
+                    border: `2px solid ${bgColor}`,
+                    backgroundColor: `${bgColor}20`,
+                  }}
+                >
+                  <span
+                    className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
                     style={{
-                      border: `2px solid ${bgColor}`,
-                      backgroundColor: `${bgColor}20`,
+                      backgroundColor: bgColor,
+                    }}
+                  />
+                  <h2
+                    className={`text-[0.9rem] font-medium capitalize`}
+                    style={{
+                      writingMode: !show ? "vertical-rl" : "horizontal-tb",
                     }}
                   >
-                    <span
-                      className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
-                      style={{
-                        backgroundColor: bgColor,
-                      }}
-                    />
-                    <h2
-                      className={`text-[0.9rem] font-medium capitalize`}
-                      style={{
-                        writingMode: !show ? "vertical-rl" : "horizontal-tb",
-                      }}
-                    >
-                      {groupTitle === null || groupTitle === "null"
-                        ? "None"
-                        : createdBy
-                        ? createdBy
-                        : addSpaceIfCamelCase(groupTitle)}
-                    </h2>
-                    <span className="text-gray-500 text-sm ml-0.5">
-                      {groupedByIssues[groupTitle].length}
-                    </span>
-                  </div>
+                    {groupTitle === null || groupTitle === "null"
+                      ? "None"
+                      : createdBy
+                      ? createdBy
+                      : addSpaceIfCamelCase(groupTitle)}
+                  </h2>
+                  <span className="text-gray-500 text-sm ml-0.5">
+                    {groupedByIssues[groupTitle].length}
+                  </span>
                 </div>
-              )}
+              </div>
 
               <div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}>
                 <button
@@ -141,7 +136,6 @@ const SingleBoard: React.FC<Props> = ({
                   className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
                   onClick={() => {
                     setState(!show);
-                    setInput(false);
                   }}
                 >
                   {show ? (

apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx

@@ -20,7 +20,7 @@ type Props = {
 };
 
 const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
-  const { sprints } = useUser();
+  const { cycles } = useUser();
 
   return (
     <>
@@ -35,7 +35,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
                   <Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">
                     <ArrowPathIcon className="h-3 w-3" />
                     <span className="block truncate">
-                      {sprints?.find((i) => i.id.toString() === value?.toString())?.name ?? "Cycle"}
+                      {cycles?.find((i) => i.id.toString() === value?.toString())?.name ?? "Cycle"}
                     </span>
                   </Listbox.Button>
 
@@ -48,10 +48,10 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
                   >
                     <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                       <div className="p-1">
-                        {sprints?.map((sprint) => (
+                        {cycles?.map((cycle) => (
                           <Listbox.Option
-                            key={sprint.id}
-                            value={sprint.id}
+                            key={cycle.id}
+                            value={cycle.id}
                             className={({ active }) =>
                               `relative cursor-pointer select-none p-2 rounded-md ${
                                 active ? "bg-theme text-white" : "text-gray-900"
@@ -61,7 +61,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
                             {({ active, selected }) => (
                               <>
                                 <span className={`block ${selected && "font-semibold"}`}>
-                                  {sprint.name}
+                                  {cycle.name}
                                 </span>
                               </>
                             )}

apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 // swr
 import useSWR from "swr";
 // headless ui
@@ -22,6 +22,7 @@ import {
 import { classNames, copyTextToClipboard } from "constants/common";
 // ui
 import { Input, Button, Spinner } from "ui";
+import { Popover } from "@headlessui/react";
 // icons
 import {
   UserIcon,
@@ -37,6 +38,7 @@ import {
 // types
 import type { Control } from "react-hook-form";
 import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
+import { TwitterPicker } from "react-color";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -48,6 +50,7 @@ const PRIORITIES = ["high", "medium", "low"];
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
+  colour: "#ff0000",
 };
 
 const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
@@ -86,6 +89,8 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
     handleSubmit,
     formState: { isSubmitting },
     reset,
+    watch,
+    control: controlLabel,
   } = useForm({
     defaultValues,
   });
@@ -101,67 +106,79 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
       });
   };
 
-  const sidebarOptions = [
-    {
-      label: "Priority",
-      name: "priority",
-      canSelectMultipleOptions: false,
-      icon: ChartBarIcon,
-      options: PRIORITIES.map((property) => ({
-        label: property,
-        value: property,
-      })),
-    },
-    {
-      label: "Status",
-      name: "state",
-      canSelectMultipleOptions: false,
-      icon: Squares2X2Icon,
-      options: states?.map((state) => ({
-        label: state.name,
-        value: state.id,
-      })),
-    },
-    {
-      label: "Cycle",
-      name: "cycle",
-      canSelectMultipleOptions: false,
-      icon: ArrowPathIcon,
-      options: cycles?.map((cycle) => ({
-        label: cycle.name,
-        value: cycle.id,
-      })),
-    },
-    {
-      label: "Assignees",
-      name: "assignees_list",
-      canSelectMultipleOptions: true,
-      icon: UserGroupIcon,
-      options: people?.map((person) => ({
-        label: person.member.first_name,
-        value: person.member.id,
-      })),
-    },
-    {
-      label: "Blocker",
-      name: "blockers_list",
-      canSelectMultipleOptions: true,
-      icon: UserIcon,
-      options: projectIssues?.results?.map((issue) => ({
-        label: issue.name,
-        value: issue.id,
-      })),
-    },
-    {
-      label: "Blocked",
-      name: "blocked_list",
-      canSelectMultipleOptions: true,
-      icon: UserIcon,
-      options: projectIssues?.results?.map((issue) => ({
-        label: issue.name,
-        value: issue.id,
-      })),
-    },
+  const sidebarSections = [
+    [
+      {
+        label: "Status",
+        name: "state",
+        canSelectMultipleOptions: false,
+        icon: Squares2X2Icon,
+        options: states?.map((state) => ({
+          label: state.name,
+          value: state.id,
+        })),
+      },
+      {
+        label: "Assignees",
+        name: "assignees_list",
+        canSelectMultipleOptions: true,
+        icon: UserGroupIcon,
+        options: people?.map((person) => ({
+          label: person.member.first_name,
+          value: person.member.id,
+        })),
+      },
+      {
+        label: "Priority",
+        name: "priority",
+        canSelectMultipleOptions: false,
+        icon: ChartBarIcon,
+        options: PRIORITIES.map((property) => ({
+          label: property,
+          value: property,
+        })),
+      },
+    ],
+    [
+      {
+        label: "Blocker",
+        name: "blockers_list",
+        canSelectMultipleOptions: true,
+        icon: UserIcon,
+        options: projectIssues?.results?.map((issue) => ({
+          label: issue.name,
+          value: issue.id,
+        })),
+      },
+      {
+        label: "Blocked",
+        name: "blocked_list",
+        canSelectMultipleOptions: true,
+        icon: UserIcon,
+        options: projectIssues?.results?.map((issue) => ({
+          label: issue.name,
+          value: issue.id,
+        })),
+      },
+      {
+        label: "Due Date",
+        name: "target_date",
+        canSelectMultipleOptions: true,
+        icon: UserIcon,
+      },
+    ],
+    [
+      {
+        label: "Cycle",
+        name: "cycle",
+        canSelectMultipleOptions: false,
+        icon: ArrowPathIcon,
+        options: cycles?.map((cycle) => ({
+          label: cycle.name,
+          value: cycle.id,
+        })),
+      },
+    ],
   ];
 
   const handleCycleChange = (cycleId: string) => {
@@ -172,219 +189,291 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
   };
 
   return (
-    <div className="h-full w-full">
-      <div className="space-y-3">
-        <div className="flex flex-col gap-y-4">
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Quick Actions</h3>
-          <div className="flex items-center gap-2 flex-wrap">
-            <button
-              type="button"
-              className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
-              onClick={() =>
-                copyTextToClipboard(
-                  `https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
-                )
-              }
-            >
-              <LinkIcon className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
-              onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
-            >
-              <ClipboardDocumentIcon className="h-3.5 w-3.5" />
-            </button>
-          </div>
-          {sidebarOptions.map((item) => (
-            <div className="flex items-center justify-between gap-x-2" key={item.label}>
-              <div className="flex items-center gap-x-2 text-sm">
-                <item.icon className="h-4 w-4" />
-                <p>{item.label}</p>
-              </div>
-              <div>
-                <Controller
-                  control={control}
-                  name={item.name as keyof IIssue}
-                  render={({ field: { value } }) => (
-                    <Listbox
-                      as="div"
-                      value={value}
-                      multiple={item.canSelectMultipleOptions}
-                      onChange={(value: any) => {
-                        if (item.name === "cycle") handleCycleChange(value);
-                        else submitChanges({ [item.name]: value });
-                      }}
-                      className="flex-shrink-0"
-                    >
-                      {({ open }) => (
-                        <div className="relative">
-                          <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
-                            <span
-                              className={classNames(
-                                value ? "" : "text-gray-900",
-                                "hidden truncate sm:block w-16 text-left",
-                                item.label === "Priority" ? "capitalize" : ""
-                              )}
-                            >
-                              {value
-                                ? Array.isArray(value)
-                                  ? value
-                                      .map(
-                                        (i: any) =>
-                                          item.options?.find((option) => option.value === i)?.label
-                                      )
-                                      .join(", ") || item.label
-                                  : item.options?.find((option) => option.value === value)?.label
-                                : "None"}
-                            </span>
-                            <ChevronDownIcon className="h-3 w-3" />
-                          </Listbox.Button>
-
-                          <Transition
-                            show={open}
-                            as={React.Fragment}
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                          >
-                            <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                              <div className="p-1">
-                                {item.options ? (
-                                  item.options.length > 0 ? (
-                                    item.options.map((option) => (
-                                      <Listbox.Option
-                                        key={option.value}
-                                        className={({ active, selected }) =>
-                                          `${
-                                            active || selected
-                                              ? "text-white bg-theme"
-                                              : "text-gray-900"
-                                          } ${
-                                            item.label === "Priority" && "capitalize"
-                                          } cursor-pointer select-none relative p-2 rounded-md truncate`
-                                        }
-                                        value={option.value}
-                                      >
-                                        {option.label}
-                                      </Listbox.Option>
-                                    ))
-                                  ) : (
-                                    <div className="text-center">No {item.label}s found</div>
-                                  )
-                                ) : (
-                                  <Spinner />
-                                )}
-                              </div>
-                            </Listbox.Options>
-                          </Transition>
-                        </div>
+    <div className="h-full w-full divide-y-2 divide-gray-100">
+      <div className="flex justify-between items-center pb-3">
+        <h4 className="text-sm font-medium">
+          {activeProject?.identifier}-{issueDetail?.sequence_id}
+        </h4>
+        <div className="flex items-center gap-2 flex-wrap">
+          <button
+            type="button"
+            className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
+            onClick={() =>
+              copyTextToClipboard(
+                `https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
+              )
+            }
+          >
+            <LinkIcon className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
+            onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
+          >
+            <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <div className="divide-y-2 divide-gray-100">
+        {sidebarSections.map((section, index) => (
+          <div key={index} className="py-1">
+            {section.map((item) => (
+              <div key={item.label} className="flex justify-between items-center gap-x-2 py-2">
+                <div className="flex items-center gap-x-2 text-sm">
+                  <item.icon className="h-4 w-4" />
+                  <p>{item.label}</p>
+                </div>
+                <div>
+                  {item.name === "target_date" ? (
+                    <Controller
+                      control={control}
+                      name="target_date"
+                      render={({ field: { value, onChange } }) => (
+                        <input
+                          type="date"
+                          value={value ?? new Date().toString()}
+                          onChange={(e: any) => {
+                            submitChanges({ target_date: e.target.value });
+                            onChange(e.target.value);
+                          }}
+                          className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300"
+                        />
                       )}
-                    </Listbox>
-                  )}
-                />
-              </div>
-            </div>
-          ))}
-          <div>
-            <form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
-              <Input
-                id="name"
-                name="name"
-                placeholder="Add new label"
-                register={register}
-                validations={{
-                  required: false,
-                }}
-                autoComplete="off"
-              />
-              <Button type="submit" disabled={isSubmitting}>
-                +
-              </Button>
-            </form>
-          </div>
-          <div className="flex justify-between items-center gap-x-2">
-            <div className="flex items-center gap-x-2 text-sm">
-              <TagIcon className="w-4 h-4" />
-              <p>Label</p>
-            </div>
-            <div>
-              <Controller
-                control={control}
-                name="labels_list"
-                render={({ field: { value } }) => (
-                  <Listbox
-                    as="div"
-                    value={value}
-                    multiple
-                    onChange={(value) => submitChanges({ labels_list: value })}
-                    className="flex-shrink-0"
-                  >
-                    {({ open }) => (
-                      <>
-                        <Listbox.Label className="sr-only">Label</Listbox.Label>
-                        <div className="relative">
-                          <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
-                            <span
-                              className={classNames(
-                                value ? "" : "text-gray-900",
-                                "hidden truncate capitalize sm:block w-16 text-left"
-                              )}
-                            >
-                              {value && value.length > 0
-                                ? value
-                                    .map(
-                                      (i: string) =>
-                                        issueLabels?.find((option) => option.id === i)?.name
-                                    )
-                                    .join(", ")
-                                : "None"}
-                            </span>
-                            <ChevronDownIcon className="h-3 w-3" />
-                          </Listbox.Button>
+                    />
+                  ) : (
+                    <Controller
+                      control={control}
+                      name={item.name as keyof IIssue}
+                      render={({ field: { value } }) => (
+                        <Listbox
+                          as="div"
+                          value={value}
+                          multiple={item.canSelectMultipleOptions}
+                          onChange={(value: any) => {
+                            if (item.name === "cycle") handleCycleChange(value);
+                            else submitChanges({ [item.name]: value });
+                          }}
+                          className="flex-shrink-0"
+                        >
+                          {({ open }) => (
+                            <div className="relative">
+                              <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
+                                <span
+                                  className={classNames(
+                                    value ? "" : "text-gray-900",
+                                    "hidden truncate sm:block w-16 text-left",
+                                    item.label === "Priority" ? "capitalize" : ""
+                                  )}
+                                >
+                                  {value
+                                    ? Array.isArray(value)
+                                      ? value
+                                          .map(
+                                            (i: any) =>
+                                              item.options?.find((option) => option.value === i)
+                                                ?.label
+                                          )
+                                          .join(", ") || item.label
+                                      : item.options?.find((option) => option.value === value)
+                                          ?.label
+                                    : "None"}
+                                </span>
+                                <ChevronDownIcon className="h-3 w-3" />
+                              </Listbox.Button>
 
-                          <Transition
-                            show={open}
-                            as={React.Fragment}
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                          >
-                            <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
-                              <div className="p-1">
-                                {issueLabels ? (
-                                  issueLabels.length > 0 ? (
-                                    issueLabels.map((label: any) => (
-                                      <Listbox.Option
-                                        key={label.id}
-                                        className={({ active, selected }) =>
-                                          `${
-                                            active || selected
-                                              ? "text-white bg-theme"
-                                              : "text-gray-900"
-                                          } cursor-pointer select-none relative p-2 rounded-md truncate`
-                                        }
-                                        value={label.id}
-                                      >
-                                        {label.name}
-                                      </Listbox.Option>
-                                    ))
-                                  ) : (
-                                    <div className="text-center">No labels found</div>
-                                  )
-                                ) : (
-                                  <Spinner />
-                                )}
-                              </div>
-                            </Listbox.Options>
-                          </Transition>
-                        </div>
-                      </>
+                              <Transition
+                                show={open}
+                                as={React.Fragment}
+                                leave="transition ease-in duration-100"
+                                leaveFrom="opacity-100"
+                                leaveTo="opacity-0"
+                              >
+                                <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                                  <div className="p-1">
+                                    {item.options ? (
+                                      item.options.length > 0 ? (
+                                        item.options.map((option) => (
+                                          <Listbox.Option
+                                            key={option.value}
+                                            className={({ active, selected }) =>
+                                              `${
+                                                active || selected
+                                                  ? "text-white bg-theme"
+                                                  : "text-gray-900"
+                                              } ${
+                                                item.label === "Priority" && "capitalize"
+                                              } cursor-pointer select-none relative p-2 rounded-md truncate`
+                                            }
+                                            value={option.value}
+                                          >
+                                            {option.label}
+                                          </Listbox.Option>
+                                        ))
+                                      ) : (
+                                        <div className="text-center">No {item.label}s found</div>
+                                      )
+                                    ) : (
+                                      <Spinner />
+                                    )}
+                                  </div>
+                                </Listbox.Options>
+                              </Transition>
+                            </div>
+                          )}
+                        </Listbox>
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="space-y-2 pt-3">
+        <h5 className="text-xs font-medium">Add new label</h5>
+        <form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
+          <div>
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`bg-white flex items-center gap-1 rounded-md p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
+                  >
+                    {watch("colour") && watch("colour") !== "" && (
+                      <span
+                        className="w-6 h-6 rounded"
+                        style={{
+                          backgroundColor: watch("colour") ?? "green",
+                        }}
+                      ></span>
                     )}
-                  </Listbox>
-                )}
-              />
-            </div>
+                    <ChevronDownIcon className="h-4 w-4" />
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute z-10 transform right-0 mt-1 px-2 max-w-xs sm:px-0">
+                      <Controller
+                        name="colour"
+                        control={controlLabel}
+                        render={({ field: { value, onChange } }) => (
+                          <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                        )}
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          </div>
+          <Input
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            validations={{
+              required: "This is required",
+            }}
+            autoComplete="off"
+          />
+          <Button type="submit" disabled={isSubmitting}>
+            +
+          </Button>
+        </form>
+        <div className="flex justify-between items-center gap-x-2">
+          <div className="flex items-center gap-x-2 text-sm">
+            <TagIcon className="w-4 h-4" />
+            <p>Label</p>
+          </div>
+          <div>
+            <Controller
+              control={control}
+              name="labels_list"
+              render={({ field: { value } }) => (
+                <Listbox
+                  as="div"
+                  value={value}
+                  multiple
+                  onChange={(value: any) => submitChanges({ labels_list: value })}
+                  className="flex-shrink-0"
+                >
+                  {({ open }) => (
+                    <>
+                      <Listbox.Label className="sr-only">Label</Listbox.Label>
+                      <div className="relative">
+                        <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
+                          <span
+                            className={classNames(
+                              value ? "" : "text-gray-900",
+                              "hidden truncate capitalize sm:block w-16 text-left"
+                            )}
+                          >
+                            {value && value.length > 0
+                              ? value
+                                  .map(
+                                    (i: string) =>
+                                      issueLabels?.find((option) => option.id === i)?.name
+                                  )
+                                  .join(", ")
+                              : "None"}
+                          </span>
+                          <ChevronDownIcon className="h-3 w-3" />
+                        </Listbox.Button>
+
+                        <Transition
+                          show={open}
+                          as={React.Fragment}
+                          leave="transition ease-in duration-100"
+                          leaveFrom="opacity-100"
+                          leaveTo="opacity-0"
+                        >
+                          <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                            <div className="p-1">
+                              {issueLabels ? (
+                                issueLabels.length > 0 ? (
+                                  issueLabels.map((label: IIssueLabels) => (
+                                    <Listbox.Option
+                                      key={label.id}
+                                      className={({ active, selected }) =>
+                                        `${
+                                          active || selected
+                                            ? "text-white bg-theme"
+                                            : "text-gray-900"
+                                        } flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                      }
+                                      value={label.id}
+                                    >
+                                      <span
+                                        className="h-2 w-2 rounded-full flex-shrink-0"
+                                        style={{ backgroundColor: label.colour ?? "green" }}
+                                      ></span>
+                                      {label.name}
+                                    </Listbox.Option>
+                                  ))
+                                ) : (
+                                  <div className="text-center">No labels found</div>
+                                )
+                              ) : (
+                                <Spinner />
+                              )}
+                            </div>
+                          </Listbox.Options>
+                        </Transition>
+                      </div>
+                    </>
+                  )}
+                </Listbox>
+              )}
+            />
           </div>
         </div>
       </div>

apps/app/components/project/issues/issue-detail/activity/index.tsx

@@ -1,6 +1,7 @@
 // next
 import Image from "next/image";
 import {
+  CalendarDaysIcon,
   ChartBarIcon,
   ChatBubbleBottomCenterTextIcon,
   Squares2X2Icon,
@@ -19,6 +20,7 @@ const activityIcons = {
   priority: <ChartBarIcon className="h-4 w-4" />,
   name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
   description: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
+  target_date: <CalendarDaysIcon className="h-4 w-4" />,
 };
 
 const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
@@ -64,43 +66,41 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
                     </div>
                   )}
 
-                  <div className="w-full">
+                  <div className="w-full text-xs">
                     <p>
-                      {activity.actor_detail.first_name} {activity.actor_detail.last_name}{" "}
+                      <span className="font-medium">
+                        {activity.actor_detail.first_name} {activity.actor_detail.last_name}
+                      </span>{" "}
                       <span>{activity.verb}</span>{" "}
                       {activity.verb !== "created" ? (
                         <span>{activity.field ?? "commented"}</span>
                       ) : (
                         " this issue"
                       )}
+                      <span className="ml-2 text-gray-500">{timeAgo(activity.created_at)}</span>
                     </p>
-                    <p className="text-xs text-gray-500">{timeAgo(activity.created_at)}</p>
                     <div className="w-full mt-2">
                       {activity.verb !== "created" && (
-                        <div className="text-sm">
+                        <div>
                           <div>
-                            From:{" "}
-                            <span className="text-gray-500">
-                              {activity.field === "state"
-                                ? activity.old_value
-                                  ? addSpaceIfCamelCase(
-                                      states?.find((s) => s.id === activity.old_value)?.name ?? ""
-                                    )
-                                  : "None"
-                                : activity.old_value}
-                            </span>
+                            <span className="text-gray-500">From: </span>
+                            {activity.field === "state"
+                              ? activity.old_value
+                                ? addSpaceIfCamelCase(
+                                    states?.find((s) => s.id === activity.old_value)?.name ?? ""
+                                  )
+                                : "None"
+                              : activity.old_value}
                           </div>
                           <div>
-                            To:{" "}
-                            <span className="text-gray-500">
-                              {activity.field === "state"
-                                ? activity.new_value
-                                  ? addSpaceIfCamelCase(
-                                      states?.find((s) => s.id === activity.new_value)?.name ?? ""
-                                    )
-                                  : "None"
-                                : activity.new_value}
-                            </span>
+                            <span className="text-gray-500">To: </span>
+                            {activity.field === "state"
+                              ? activity.new_value
+                                ? addSpaceIfCamelCase(
+                                    states?.find((s) => s.id === activity.new_value)?.name ?? ""
+                                  )
+                                : "None"
+                              : activity.new_value}
                           </div>
                         </div>
                       )}