Create component and adjust styling

https://youtrack.weseek.co.jp/issue/GW-7849
- Show child count badge on bookmark folder list
- Add isSidearItem props to BookmarkItem component
- Add conditional rendering of BookmarkItem for sidebar and user page
- Create BookmarkContents component for user page
- Adjust styling of BookmarkContents component
- Remove min-height from bookmark-folder-tree style
- Implement BookmarkContents component to UsersHomePageFooter component
- Remove unused import from UsersHomePageFooter

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

@@ -190,7 +190,9 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
                 <p className={'text-truncate m-auto '}>{name}</p>
               ) : (
                 <div className="d-flex flex-row">
-                  <div className="p-2">  <p className={'text-truncate m-auto '}>{name}</p></div>
+                  <div className="p-2">
+                    <p className={'text-truncate m-auto '}>{name}</p>
+                  </div>
                   <div className="p-2">
                     <div className="grw-foldertree-control d-flex">
                       <BookmarkFolderItemControl
@@ -210,6 +212,13 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
                       </button>
                     </div>
                   </div>
+                  <div className="p-2">
+                    {hasChildren() && (
+                      <div className="grw-foldertree-count-wrapper">
+                        <CountBadge count={ childCount() } />
+                      </div>
+                    )}
+                  </div>
                 </div>
               )}
             </div>

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

@@ -69,6 +69,7 @@ const BookmarkFolderTree = (): JSX.Element => {
               onUnbookmarked={mutateCurrentUserBookmarks}
               onRenamed={mutateCurrentUserBookmarks}
               onClickDeleteMenuItem={deleteMenuItemClickHandler}
+              isSidebarItem={true}
             />
           );
         })}

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

@@ -14,19 +14,21 @@ import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/pa
 
 import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
+import { PageListItemS } from '../PageList/PageListItemS';
 
 
 type Props = {
   bookmarkedPage: IPageHasId,
   onUnbookmarked: () => void,
   onRenamed: () => void,
-  onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void
+  onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void,
+  isSidebarItem: boolean
 }
 
 const BookmarkItem = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const {
-    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem,
+    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem, isSidebarItem,
   } = props;
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
@@ -94,9 +96,53 @@ const BookmarkItem = (props: Props): JSX.Element => {
     onClickDeleteMenuItem(pageToDelete);
   }, [bookmarkedPage, onClickDeleteMenuItem]);
 
-  return (
-    <div className="grw-foldertree-item-container" key={bookmarkedPage._id}>
-      <li className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pl-3 d-flex align-items-center" id={bookmarkItemId}>
+  const renderBookmarkListForSidebar = () => {
+    return (
+      <div className="grw-foldertree-item-container" key={bookmarkedPage._id}>
+        <li className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pl-3 d-flex align-items-center" id={bookmarkItemId}>
+          { isRenameInputShown ? (
+            <ClosableTextInput
+              value={nodePath.basename(bookmarkedPage.path ?? '')}
+              placeholder={t('Input page name')}
+              onClickOutside={() => { setRenameInputShown(false) }}
+              onPressEnter={pressEnterForRenameHandler}
+              inputValidator={inputValidator}
+            />
+          ) : (
+            <a href={`/${bookmarkedPage._id}`} className="grw-foldertree-title-anchor flex-grow-1 pr-3">
+              <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
+            </a>
+          )}
+          <PageItemControl
+            pageId={bookmarkedPage._id}
+            isEnableActions
+            forceHideMenuItems={[MenuItemType.DUPLICATE]}
+            onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+            onClickRenameMenuItem={renameMenuItemClickHandler}
+            onClickDeleteMenuItem={deleteMenuItemClickHandler}
+          >
+            <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="right"
+            target={bookmarkItemId}
+            fade={false}
+          >
+            { formerPagePath !== null ? `${formerPagePath}/` : '/' }
+          </UncontrolledTooltip>
+        </li>
+      </div>
+    );
+  };
+
+  const renderBookmarkListForUserPage = () => {
+    return (
+      <li key={`my-bookmarks:${bookmarkedPage?._id}`}
+        className="bookmark-item-list list-group-item list-group-item-action border-0 py-2 pl-3 d-flex align-items-center">
         { isRenameInputShown ? (
           <ClosableTextInput
             value={nodePath.basename(bookmarkedPage.path ?? '')}
@@ -105,34 +151,37 @@ const BookmarkItem = (props: Props): JSX.Element => {
             onPressEnter={pressEnterForRenameHandler}
             inputValidator={inputValidator}
           />
+
         ) : (
-          <a href={`/${bookmarkedPage._id}`} className="grw-foldertree-title-anchor flex-grow-1 pr-3">
-            <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
-          </a>
+          <>
+            <div className='d-flex flex-row'>
+              <PageListItemS page={bookmarkedPage} />
+              <PageItemControl
+                pageId={bookmarkedPage._id}
+                isEnableActions
+                forceHideMenuItems={[MenuItemType.DUPLICATE]}
+                onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+                onClickRenameMenuItem={renameMenuItemClickHandler}
+                onClickDeleteMenuItem={deleteMenuItemClickHandler}
+              >
+                <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>
+            </div>
+          </>
         )}
-        <PageItemControl
-          pageId={bookmarkedPage._id}
-          isEnableActions
-          forceHideMenuItems={[MenuItemType.DUPLICATE]}
-          onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-          onClickRenameMenuItem={renameMenuItemClickHandler}
-          onClickDeleteMenuItem={deleteMenuItemClickHandler}
-        >
-          <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="right"
-          target={bookmarkItemId}
-          fade={false}
-        >
-          { formerPagePath !== null ? `${formerPagePath}/` : '/' }
-        </UncontrolledTooltip>
+
       </li>
-    </div>
+    );
+  };
+  return (
+    <>
+      {isSidebarItem
+        ? renderBookmarkListForSidebar()
+        : renderBookmarkListForUserPage()
+      }
+    </>
   );
 };
 

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -1,6 +1,4 @@
 @use '~/styles/molecules/page_list';
-@use '~/styles/molecules/bookmark-folder-tree';
-
 
 .user-page-footer :global {
   .grw-user-page-list-m {

packages/app/src/components/UsersHomePageFooter.tsx

@@ -5,14 +5,13 @@ import { useTranslation } from 'next-i18next';
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
-import { BookmarkList } from '~/components/PageList/BookmarkList';
 import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import styles from '~/components/UsersHomePageFooter.module.scss';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
-import BookmarkFolderItem from './Bookmarks/BookmarkFolderItem';
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
+import BookmarkContents from './UsersPageBookmarks/BookmarkContents';
 
 
 export type UsersHomePageFooterProps = {
@@ -23,7 +22,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   const { t } = useTranslation();
   const { creatorId } = props;
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
-  const { data: bookmarkFolderData, mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
+  const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
 
 
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
@@ -66,21 +65,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </div>
         )}
         {
-          <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group p-3`}>
-            {bookmarkFolderData?.map((item) => {
-              return (
-                <BookmarkFolderItem
-                  key={item._id}
-                  bookmarkFolder={item}
-                  isOpen={false}
-                  isSidebarItem={false}
-                />
-              );
-            })}
-            <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
-              <BookmarkList />
-            </div>
-          </ul>
+          <BookmarkContents />
         }
 
       </div>

packages/app/src/components/UsersPageBookmarks/BookmarkContents.module.scss

@@ -0,0 +1,3 @@
+@use '~/styles/molecules/bookmark-folder-tree';
+@use '~/styles/molecules/page_list';
+

packages/app/src/components/UsersPageBookmarks/BookmarkContents.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { toastSuccess } from '~/client/util/apiNotification';
+import { IPageToDeleteWithMeta } from '~/interfaces/page';
+import { OnDeletedFunction } from '~/interfaces/ui';
+import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
+import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+import { usePageDeleteModal } from '~/stores/modal';
+
+import BookmarkFolderItem from '../Bookmarks/BookmarkFolderItem';
+import BookmarkItem from '../Bookmarks/BookmarkItem';
+
+
+import styles from './BookmarkContents.module.scss';
+
+const BookmarkContents = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild(null);
+  const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
+  const { open: openDeleteModal } = usePageDeleteModal();
+
+  const deleteMenuItemClickHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
+    const pageDeletedHandler : OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
+      if (typeof pathOrPathsToDelete !== 'string') {
+        return;
+      }
+      const path = pathOrPathsToDelete;
+
+      if (isCompletely) {
+        toastSuccess(t('deleted_pages_completely', { path }));
+      }
+      else {
+        toastSuccess(t('deleted_pages', { path }));
+      }
+      mutateCurrentUserBookmarks();
+    };
+    openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
+  }, [mutateCurrentUserBookmarks, openDeleteModal, t]);
+
+  return (
+    <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group p-3`}>
+      {bookmarkFolderData?.map((item) => {
+        return (
+          <BookmarkFolderItem
+            key={item._id}
+            bookmarkFolder={item}
+            isOpen={false}
+            isSidebarItem={false}
+          />
+        );
+      })}
+      <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
+        {currentUserBookmarksData?.length === 0 ? t('No bookmarks yet') : (
+          <>
+            <ul className="page-list-ul page-list-ul-flat my-3">
+              {currentUserBookmarksData?.map(page => (
+                <BookmarkItem
+                  key={page._id}
+                  onClickDeleteMenuItem={deleteMenuItemClickHandler}
+                  onRenamed={mutateCurrentUserBookmarks}
+                  onUnbookmarked={mutateCurrentUserBookmarks}
+                  bookmarkedPage={page}
+                  isSidebarItem={false}
+                />
+              ))}
+
+            </ul>
+          </>
+        ) }
+      </div>
+    </ul>
+  );
+};
+
+export default BookmarkContents;

packages/app/src/styles/molecules/_bookmark-folder-tree.scss

@@ -1,11 +1,8 @@
 @use '~/styles/variables' as var;
-$grw-sidebar-content-header-height: 58px;
-$grw-sidebar-content-footer-height: 50px;
 $grw-foldertree-item-padding-left: 10px;
 
 .grw-foldertree {
   :global {
-    min-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
 
     .btn-page-item-control {
       .icon-plus::before {