Merge pull request #7632 from weseek/feat/115447-121606-put-root-position

feat: Apply design FB to BookmarkFolderMenu

apps/app/public/static/locales/en_US/translation.json

@@ -796,7 +796,7 @@
     "drop_item_here": "Drag and drop item here",
     "cancel_bookmark": "Un-bookmark this page",
     "move_to_root": "Move to the root",
-    "do_not_include_folder": "Do not include in folder"
+    "root": "root (default)"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page tree feature is not available yet.",

apps/app/public/static/locales/ja_JP/translation.json

@@ -829,7 +829,7 @@
     "drop_item_here": "ルートに配置する",
     "cancel_bookmark": "このページのブックマークを解除",
     "move_to_root": "ルートに配置する",
-    "do_not_include_folder": "フォルダに含めない"
+    "root": "root (default)"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page Tree 機能は現在使用できません。",

apps/app/public/static/locales/zh_CN/translation.json

@@ -799,7 +799,7 @@
     "drop_item_here": "将项目拖放到此处",
     "cancel_bookmark": "取消收藏此页面",
     "move_to_root": "移动到根部",
-    "do_not_include_folder": "不包括在文件夹中"
+    "root": "root (default)"
   },
   "questionnaire": {
     "give_us_feedback": "向我们提供反馈以进行改进",

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
+
 import { getCustomModifiers } from '@growi/ui/dist/utils';
 import { useTranslation } from 'next-i18next';
 import { DropdownItem, DropdownMenu, UncontrolledDropdown } from 'reactstrap';
@@ -8,6 +9,7 @@ import { toastError } from '~/client/util/toastr';
 import { useSWRBookmarkInfo, useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage, useSWRxPageInfo } from '~/stores/page';
+
 import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
 
 export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode}> = ({ children }): JSX.Element => {
@@ -74,17 +76,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode}> = ({ chi
       }
     }
   },
-  [
-    isOpen,
-    mutateBookmarkFolders,
-    bookmarkFolders,
-    isBookmarked,
-    currentPage?._id,
-    toggleBookmarkHandler,
-    mutateUserBookmarks,
-    mutateBookmarkInfo,
-    mutatePageInfo,
-  ]);
+  [isOpen, bookmarkFolders, isBookmarked, currentPage?._id, toggleBookmarkHandler, mutateUserBookmarks, mutateBookmarkInfo, mutatePageInfo]);
 
   const onMenuItemClickHandler = useCallback(async(e, itemId: string | null) => {
     e.stopPropagation();
@@ -96,7 +88,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode}> = ({ chi
         await toggleBookmarkHandler();
       }
       if (currentPage != null) {
-        await addBookmarkToFolder(currentPage._id, itemId);
+        await addBookmarkToFolder(currentPage._id, itemId === 'clear' ? null : itemId);
       }
       mutateUserBookmarks();
       mutateBookmarkFolders();
@@ -124,24 +116,33 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode}> = ({ chi
         {isBookmarkFolderExists && (
           <>
             <DropdownItem divider />
-            <DropdownItem
-              toggle={false}
-              onClick={e => onMenuItemClickHandler(e, null)}
-            >
-              {t('bookmark_folder.do_not_include_folder')}
-            </DropdownItem>
-            <DropdownItem divider />
+            <div key='root'>
+              <div
+                className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
+                tabIndex={0}
+                role="menuitem"
+                onClick={e => onMenuItemClickHandler(e, 'root')}
+              >
+                <BookmarkFolderMenuItem
+                  itemId='root'
+                  itemName={t('bookmark_folder.root')}
+                  isSelected={selectedItem === 'root'}
+                />
+              </div>
+            </div>
             {bookmarkFolders?.map(folder => (
               <>
                 <div key={folder._id}>
                   <div
                     className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
+                    style={{ paddingLeft: '40px' }}
                     tabIndex={0}
                     role="menuitem"
                     onClick={e => onMenuItemClickHandler(e, folder._id)}
                   >
                     <BookmarkFolderMenuItem
-                      item={folder}
+                      itemId={folder._id}
+                      itemName={folder.name}
                       isSelected={selectedItem === folder._id}
                     />
                   </div>
@@ -151,12 +152,13 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode}> = ({ chi
                     <div key={child._id}>
                       <div
                         className='dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0'
-                        style={{ paddingLeft: '40px' }}
+                        style={{ paddingLeft: '60px' }}
                         tabIndex={0}
                         role="menuitem"
                         onClick={e => onMenuItemClickHandler(e, child._id)}>
                         <BookmarkFolderMenuItem
-                          item={child}
+                          itemId={child._id}
+                          itemName={child.name}
                           isSelected={selectedItem === child._id}
                         />
                       </div>

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

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
-
 export const BookmarkFolderMenuItem: React.FC<{
-  item: BookmarkFolderItems
+  itemId: string
+  itemName: string
   isSelected: boolean
 }> = ({
-  item,
+  itemId,
+  itemName,
   isSelected,
 }) => {
   return (
@@ -15,12 +15,12 @@ export const BookmarkFolderMenuItem: React.FC<{
         type="radio"
         checked={isSelected}
         name="bookmark-folder-menu-item"
-        id={`bookmark-folder-menu-item-${item._id}`}
+        id={`bookmark-folder-menu-item-${itemId}`}
         onChange={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       />
-      <label htmlFor={`bookmark-folder-menu-item-${item._id}`} className='p-2 m-0'>
-        {item.name}
+      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className='p-2 m-0'>
+        {itemName}
       </label>
     </div>
   );