Remove previous bookmark list implementation

https://youtrack.weseek.co.jp/issue/GW-7830
- Add optional props isUserHomePage to BookmarkFolderItem and BookmarkFolderTree
-  Implement PageListItemS to BookmarkItem component
- Add props type pageTitle to PageListItemS and set path conditionally
- Replace BookmarkList component with BookmarkFolderTree
- Adjust scss styling

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

@@ -28,10 +28,11 @@ type BookmarkFolderItemProps = {
   isOpen?: boolean
   level: number
   root: string
+  isUserHomePage?: boolean
 }
 const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
   const {
-    bookmarkFolder, isOpen: _isOpen = false, level, root,
+    bookmarkFolder, isOpen: _isOpen = false, level, root, isUserHomePage,
   } = props;
 
   const { t } = useTranslation();
@@ -221,12 +222,14 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
             bookmarkFolder={childFolder}
             level={level + 1}
             root={root}
+            isUserHomePage ={isUserHomePage}
           />
         </div>
       );
     });
   };
 
+
   const renderBookmarkItem = () => {
     return isOpen && bookmarks?.map((bookmark) => {
       return (

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

@@ -6,8 +6,13 @@ import BookmarkFolderItem from './BookmarkFolderItem';
 import styles from './BookmarkFolderTree.module.scss';
 
 
-const BookmarkFolderTree = (): JSX.Element => {
+type BookmarkFolderTreeProps = {
+  isUserHomePage?: boolean
+}
+
+const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element => {
   const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild();
+  const { isUserHomePage } = props;
 
   return (
     <>
@@ -20,6 +25,7 @@ const BookmarkFolderTree = (): JSX.Element => {
               isOpen={false}
               level={0}
               root={item._id}
+              isUserHomePage={isUserHomePage}
             />
           );
         })}

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

@@ -17,6 +17,7 @@ import { useSWRxPageInfo } from '~/stores/page';
 
 import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
+import { PageListItemS } from '../PageList/PageListItemS';
 
 
 type Props = {
@@ -122,14 +123,13 @@ const BookmarkItem = (props: Props): JSX.Element => {
     }),
   });
 
-
   return (
     <li
-      className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center"
+      className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
       key={bookmarkedPage._id} ref={(c) => { bookmarkItemDragRef(c) }}
       id={bookmarkItemId}
     >
-      {isRenameInputShown ? (
+      { isRenameInputShown ? (
         <ClosableTextInput
           value={nodePath.basename(bookmarkedPage.path ?? '')}
           placeholder={t('Input page name')}
@@ -137,24 +137,22 @@ 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>
-      )}
-      <PageItemControl
-        pageId={bookmarkedPage._id}
-        isEnableActions
-        pageInfo={fetchedPageInfo}
-        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>
+      ) : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle}/>}
+      <div className='grw-foldertree-control'>
+        <PageItemControl
+          pageId={bookmarkedPage._id}
+          isEnableActions
+          pageInfo={fetchedPageInfo}
+          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>
       <UncontrolledTooltip
         modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
         autohide={false}

packages/app/src/components/PageList/PageListItemS.tsx

@@ -8,13 +8,16 @@ import { IPageHasId } from '~/interfaces/page';
 type PageListItemSProps = {
   page: IPageHasId,
   noLink?: boolean,
+  pageTitle?: string
 }
 
 export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
 
-  const { page, noLink = false } = props;
+  const { page, noLink = false, pageTitle } = props;
 
-  let pagePathElement = <PagePathLabel path={page.path} additionalClassNames={['mx-1']} />;
+  const path = pageTitle != null ? pageTitle : page.path;
+
+  let pagePathElement = <PagePathLabel path={path} additionalClassNames={['mx-1']} />;
   if (!noLink) {
     pagePathElement = <a className="text-break" href={page.path}>{pagePathElement}</a>;
   }

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

@@ -29,6 +29,25 @@ $grw-sidebar-content-footer-height: 50px;
         min-height: 40px;
         border-radius: 0px;
       }
+      .bookmark-item-list {
+        .picture {
+          width: 16px;
+          height: 16px;
+          vertical-align: text-bottom;
+
+          &.picture-md {
+            width: 20px;
+            height: 20px;
+          }
+        }
+        svg{
+          width: 14px;
+          height: 14px;
+        }
+      }
+      .grw-foldertree-control{
+        margin-left: 2px;
+      }
     }
 
     .grw-foldertree-item-container {

packages/app/src/components/UsersHomePageFooter.tsx

@@ -7,18 +7,13 @@ import { apiv3Post } from '~/client/util/apiv3-client';
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import styles from '~/components/UsersHomePageFooter.module.scss';
-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 BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
 import BookmarkFolderTree from './Bookmarks/BookmarkFolderTree';
 import CompressIcon from './Icons/CompressIcon';
 import ExpandIcon from './Icons/ExpandIcon';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
-import { BookmarkList } from './PageList/BookmarkList';
 
 
 export type UsersHomePageFooterProps = {
@@ -31,28 +26,6 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const { mutate: mutateChildBookmarkData } = 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]);
-
 
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
@@ -105,28 +78,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </div>
         )}
         <div className={`${isExpanded ? `${styles['grw-bookarks-contents-expanded']}` : `${styles['grw-bookarks-contents-compressed']}`}`}>
-          {
-            <BookmarkFolderTree />
-
-          }
-          <div id="user-bookmark-list" className={`page-list p-3 ${styles['page-list']}`}>
-            <div className="grw-bookmarks-list-container">
-              {currentUserBookmarksData?.length === 0
-                ? t('No bookmarks yet')
-                : <ul className="list-group page-list-ul page-list-ul-flat mb-3">
-                  {currentUserBookmarksData?.map(page => (
-                    <BookmarkList
-                      key={page._id}
-                      page={page}
-                      onRenamed={mutateCurrentUserBookmarks}
-                      onUnbookmarked={mutateCurrentUserBookmarks}
-                      onClickDeleteMenuItem={deleteMenuItemClickHandler}
-                    />
-                  ))}
-                </ul>
-              }
-            </div>
-          </div>
+          <BookmarkFolderTree isUserHomePage={true} />
         </div>
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">

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

@@ -49,8 +49,21 @@ $grw-bookmark-item-padding-left: 45px;
         height: 40px;
       }
       .bookmark-item-list{
+        .picture {
+          width: 16px;
+          height: 16px;
+          vertical-align: text-bottom;
+
+          &.picture-md {
+            width: 20px;
+            height: 20px;
+          }
+        }
         min-width: 30px;
         height: 35px;
+        .grw-foldertree-control{
+          margin-left: auto;
+        }
       }
     }
   }