Add dropdown button to bookmark list

https://youtrack.weseek.co.jp/issue/GW-7837
- Implement PageItemControl to bookmark list item
- Exclude duplicate menu item type from PageItemControl
- Create styling for bookmark-item

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

@@ -4,12 +4,13 @@ import React from 'react';
 import { DevidedPagePath } from '@growi/core';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { UncontrolledTooltip } from 'reactstrap';
+import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
 
 import LinkedPagePath from '~/models/linked-page-path';
 import { useSWRInifiniteBookmarkedPage } from '~/stores/bookmark';
 import { useCurrentUser } from '~/stores/context';
 
+import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
 import PagePathHierarchicalLink from '../PagePathHierarchicalLink';
 
 import InfiniteScroll from './InfiniteScroll';
@@ -19,15 +20,36 @@ const BookmarksItem = ({ data }) => {
   const { page } = data;
   const dPagePath = new DevidedPagePath(page.path, false, true);
   const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-
+  const bookmarkItemId = `bookmark-item-${data._id}`;
   return (
-    <li className="list-group-item py-3 px-0" id={`bookmark-item-${data._id}`}>
-      <div className="d-flex w-100">
-        <h5 className="my-0">
-          <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
-        </h5>
-      </div>
-    </li>
+    <>
+      <li className="list-group-item py-3 px-0" id={bookmarkItemId}>
+        <div className="d-flex w-100 justify-content-between">
+          <h5 className="my-0">
+            <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
+          </h5>
+          <PageItemControl
+            pageId={page._id}
+            isEnableActions
+            forceHideMenuItems={[MenuItemType.DUPLICATE]}
+          >
+            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+              <i className="icon-options fa fa-rotate-90 p-1"></i>
+            </DropdownToggle>
+          </PageItemControl>
+
+          <UncontrolledTooltip
+            modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
+            autohide={false}
+            placement="left"
+            target={bookmarkItemId}
+          >
+            {data.page.path}
+          </UncontrolledTooltip>
+        </div>
+      </li>
+
+    </>
   );
 
 };
@@ -57,16 +79,7 @@ const Bookmarks = () : JSX.Element => {
                 isReachingEnd={isReachingEnd}
               >
                 {paginationResult => paginationResult?.docs.map(data => (
-                  <><BookmarksItem key={data._id} data={data} />
-                    <UncontrolledTooltip
-                      modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
-                      autohide={false}
-                      placement="left"
-                      target={`bookmark-item-${data._id}`}
-                    >
-                      {data.page.path}
-                    </UncontrolledTooltip>
-                  </>
+                  <BookmarksItem key={data._id} data={data} />
                 ))
                 }
               </InfiniteScroll>

packages/app/src/styles/_bookmark-list.scss

@@ -0,0 +1,17 @@
+.grw-bookmarks-list{
+  .list-group-item {
+    .grw-visible-on-hover {
+      display: none;
+    }
+
+    &:hover {
+      .grw-visible-on-hover {
+        display: block;
+      }
+
+      .grw-count-badge {
+        display: none;
+      }
+    }
+  }
+}

packages/app/src/styles/style-app.scss

@@ -59,6 +59,7 @@
 @import 'page-accessories-modal';
 @import 'page-path';
 @import 'page-tree';
+@import 'bookmark-list';
 @import 'page';
 @import 'page-presentation';
 @import 'page-history';