support group message: init

src/pages/inbox/components/DirectMessageButton/DirectMessageButton.tsx

@@ -15,6 +15,10 @@ interface DirectMessageButtonProps {
   }>;
 }
 
+/**
+ * CHECK IF NEED TO DELETE
+ */
+
 const DirectMessageButton: FC<DirectMessageButtonProps> = (props) => {
   const { className, isMobileVersion = false, ButtonComponent } = props;
   const {

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx

@@ -23,10 +23,16 @@ interface DirectMessageModalProps {
   isOpen: boolean;
   onClose: () => void;
   isMobileVersion?: boolean;
+  groupMessage?: boolean;
 }
 
 const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
-  const { isOpen, onClose, isMobileVersion = false } = props;
+  const {
+    isOpen,
+    onClose,
+    isMobileVersion = false,
+    groupMessage = false,
+  } = props;
   const dispatch = useDispatch();
   const listRef = useRef<HTMLUListElement>(null);
   const [searchText, setSearchText] = useState("");
@@ -235,6 +241,7 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
               value={searchText}
               onChange={setSearchText}
               autoFocus
+              multiple={groupMessage}
             />
           )}
         </div>

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/SearchInput/SearchInput.tsx

@@ -8,10 +8,11 @@ interface SearchInputProps {
   value: string;
   onChange: (text: string) => void;
   autoFocus?: boolean;
+  multiple?: boolean;
 }
 
 const SearchInput: FC<SearchInputProps> = (props) => {
-  const { className, value, onChange, autoFocus } = props;
+  const { className, value, onChange, autoFocus, multiple } = props;
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     onChange(event.target.value);
@@ -27,6 +28,7 @@ const SearchInput: FC<SearchInputProps> = (props) => {
           onChange={handleInputChange}
           placeholder="Search"
           autoFocus={autoFocus}
+          multiple={multiple}
         />
       </div>
     </div>

src/pages/inbox/components/HeaderContent/HeaderContent.tsx

@@ -2,10 +2,8 @@ import React, { FC } from "react";
 import classNames from "classnames";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
-import { DirectMessageButton } from "../DirectMessageButton";
 import { HeaderContent_v04 } from "../HeaderContent_v04";
-import { InboxFilterButton } from "../InboxFilterButton";
-import { PlusButton } from "./components";
+import NewDirectMessageButton from "../NewDirectMessageButton/NewDirectMessageButton";
 import styles from "./HeaderContent.module.scss";
 
 interface HeaderContentProps {
@@ -34,10 +32,7 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
       </div>
       <div className={styles.actionButtonsWrapper}>
         {/* <InboxFilterButton /> */}
-        <DirectMessageButton
-          isMobileVersion={isMobileVersion}
-          ButtonComponent={PlusButton}
-        />
+        <NewDirectMessageButton isMobileVersion={isMobileVersion} />
       </div>
     </div>
   );

src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx

@@ -3,9 +3,7 @@ import classNames from "classnames";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { getPluralEnding } from "@/shared/utils";
-import { DirectMessageButton } from "../DirectMessageButton";
-import { PlusButton } from "../HeaderContent/components";
-import { InboxFilterButton } from "../InboxFilterButton";
+import NewDirectMessageButton from "../NewDirectMessageButton/NewDirectMessageButton";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -33,11 +31,7 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
       </div>
       <div className={styles.actionButtonsWrapper}>
         {/* <InboxFilterButton /> */}
-        <DirectMessageButton
-          className={styles.directMessageButton}
-          isMobileVersion={isMobileVersion}
-          ButtonComponent={PlusButton}
-        />
+        <NewDirectMessageButton isMobileVersion={isMobileVersion} />
       </div>
     </div>
   );

src/pages/inbox/components/NewDirectMessageButton/NewDirectMessageButton.tsx

@@ -0,0 +1,66 @@
+import React, { FC, useMemo, useState } from "react";
+import { InboxAction } from "@/shared/constants";
+import { useModal } from "@/shared/hooks";
+import { MenuItem as Item } from "@/shared/interfaces";
+import { DesktopMenu, MobileMenu } from "@/shared/ui-kit";
+import { DirectMessageModal } from "../DirectMessageButton/components";
+import { PlusButton } from "../HeaderContent/components";
+
+interface NewDirectMessageButton {
+  isMobileVersion?: boolean;
+  className?: string;
+}
+
+const NewDirectMessageButton: FC<NewDirectMessageButton> = (props) => {
+  const { isMobileVersion, className } = props;
+  const {
+    isShowing: isDirectMessageModalOpen,
+    onOpen: onDirectMessageModalOpen,
+    onClose: onDirectMessageModalClose,
+  } = useModal(false);
+  const [groupMessage, setGroupMessage] = useState(false);
+
+  const items: Item[] = useMemo(
+    () => [
+      {
+        id: InboxAction.NewDirectMessage,
+        text: "Direct message",
+        onClick: () => {
+          setGroupMessage(false);
+          onDirectMessageModalOpen();
+        },
+      },
+      {
+        id: InboxAction.NewGroupMessage,
+        text: "Group message",
+        onClick: () => {
+          setGroupMessage(true);
+          onDirectMessageModalOpen();
+        },
+      },
+    ],
+    [groupMessage],
+  );
+
+  const triggerEl = <PlusButton />;
+  const menuProps = {
+    className,
+    triggerEl,
+    items,
+  };
+  const Menu = isMobileVersion ? MobileMenu : DesktopMenu;
+
+  return (
+    <>
+      <Menu {...menuProps} />
+      <DirectMessageModal
+        isOpen={isDirectMessageModalOpen}
+        onClose={onDirectMessageModalClose}
+        isMobileVersion={isMobileVersion}
+        groupMessage={groupMessage}
+      />
+    </>
+  );
+};
+
+export default NewDirectMessageButton;

src/shared/constants/inboxAction.ts

@@ -0,0 +1,4 @@
+export enum InboxAction {
+  NewDirectMessage = "new-direct-message",
+  NewGroupMessage = "new-group-message",
+}

src/shared/constants/index.tsx

@@ -32,3 +32,4 @@ export * from "./systemDiscussionMessage";
 export * from "./theme";
 export * from "./docChange";
 export * from "./files";
+export * from "./inboxAction";