Implement create new folder from subfolder

https://youtrack.weseek.co.jp/issue/GW-7910
- Remove top property of .grw-bookmark-folder-menu class
- Implement bookmark folder name input in sub folder
- Set dropddown menu open on mouse enter

packages/app/src/components/Bookmarks/BookmarkFolderMenu.module.scss

@@ -1,6 +1,5 @@
 .grw-bookmark-folder-dropdown :global {
   .grw-bookmark-folder-menu {
-    top: 100px !important;
     .grw-bookmark-folder-menu-item {
       svg,
       .grw-bookmark-folder-menu-toggle-btn svg {

packages/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+  useCallback, useEffect, useState,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -78,7 +80,10 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   return (
     <UncontrolledDropdown className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}
-      <DropdownMenu right className='grw-bookmark-folder-menu'>
+      <DropdownMenu
+        right
+        className='grw-bookmark-folder-menu'
+      >
         { isCreateAction ? (
           <div className='mx-2'>
             <BookmarkFolderNameInput

packages/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { useTranslation } from 'next-i18next';
 import {
+  DropdownItem,
   DropdownMenu, DropdownToggle, UncontrolledDropdown,
 } from 'reactstrap';
 
@@ -10,8 +12,11 @@ import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
 
+import FolderIcon from '../Icons/FolderIcon';
 import TriangleIcon from '../Icons/TriangleIcon';
 
+import BookmarkFolderNameInput from './BookmarkFolderNameInput';
+
 
 type Props ={
   item: BookmarkFolderItems
@@ -22,9 +27,12 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const {
     item, isSelected, onSelectedChild,
   } = props;
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
+
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
 
   const getSelectedFolder = useCallback(async() => {
@@ -40,6 +48,19 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     }
   }, [currentPage]);
 
+  const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
+    try {
+      await apiv3Post('/bookmark-folder', { name: folderName, parent: item._id });
+      await mutateChildFolders();
+      setIsCreateAction(false);
+      toastSuccess(t('toaster.create_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }, [item, mutateChildFolders, t]);
+
   useEffect(() => {
     if (isOpen) {
       mutateChildFolders();
@@ -47,9 +68,20 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     }
   }, [getSelectedFolder, isOpen, mutateChildFolders]);
 
+  const onClickNewBookmarkFolder = useCallback((e) => {
+    e.stopPropagation();
+    setIsCreateAction(true);
+  }, []);
+
   const onMouseLeaveHandler = useCallback(() => {
     setIsOpen(false);
+    setIsCreateAction(false);
+  }, []);
+
+  const onMouseEnterHandler = useCallback(() => {
+    setIsOpen(true);
   }, []);
+
   const toggleHandler = useCallback(() => {
     setIsOpen(!isOpen);
   }, [isOpen]);
@@ -88,11 +120,31 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
           {item.name}
         </label>
       </div>
-      <DropdownToggle color="transparent" className='grw-bookmark-folder-menu-toggle-btn ' onClick={e => e.stopPropagation()}>
+      <DropdownToggle
+        color="transparent"
+        className='grw-bookmark-folder-menu-toggle-btn '
+        onClick={e => e.stopPropagation()}
+        onMouseEnter={onMouseEnterHandler}
+      >
         <TriangleIcon/>
       </DropdownToggle>
       { childFolders != null && (
         <DropdownMenu className='m-0'>
+          { isCreateAction ? (
+            <div className='mx-2' onClick={e => e.stopPropagation()}>
+              <BookmarkFolderNameInput
+                onClickOutside={() => setIsCreateAction(false)}
+                onPressEnter={onPressEnterHandlerForCreate}
+              />
+            </div>
+          ) : (
+            <DropdownItem toggle={false} onClick={e => onClickNewBookmarkFolder(e) } className='grw-bookmark-folder-menu-item'>
+              <FolderIcon isOpen={false}/>
+              <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
+            </DropdownItem>
+          )}
+          <DropdownItem divider />
+
           {childFolders?.map(child => (
             <div key={child._id} >
               {child.children.length > 0 ? (