Adjust styling and manage component

https://youtrack.weseek.co.jp/issue/GW-7849
- Move bookmark component to new directory
- Update bookmark component import
- Adjust styling for dark and light theme
- Create bookmark-folder-tree styling
- Implement bookmark-folder-tree style to bookmark folder list in home page
- Add styling for list group item
- Add isSidebarItem props to BookmarkFolderItem component
- Add conditional rendering for folder tree item control

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

@@ -21,9 +21,10 @@ import DeleteBookmarkFolderModal from './DeleteBookmarkFolderModal';
 type BookmarkFolderItemProps = {
   bookmarkFolder: BookmarkFolderItems
   isOpen?: boolean
+  isSidebarItem: boolean
 }
 const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
-  const { bookmarkFolder, isOpen: _isOpen = false } = props;
+  const { bookmarkFolder, isOpen: _isOpen = false, isSidebarItem } = props;
 
   const { t } = useTranslation();
   const {
@@ -134,6 +135,7 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
           <BookmarkFolderItem
             key={childFolder._id}
             bookmarkFolder={childFolder}
+            isSidebarItem={isSidebarItem}
           />
         </div>
       );
@@ -184,9 +186,34 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
         ) : (
           <>
             <div className='grw-foldertree-title-anchor flex-grow-1 pl-2' onClick={loadChildFolder}>
-              <p className={'text-truncate m-auto '}>{name}</p>
+              {isSidebarItem ? (
+                <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">
+                    <div className="grw-foldertree-control d-flex">
+                      <BookmarkFolderItemControl
+                        onClickRename={onClickRenameHandler}
+                        onClickDelete={onClickDeleteHandler}
+                      >
+                        <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>
+                      </BookmarkFolderItemControl>
+                      <button
+                        type="button"
+                        className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
+                        onClick={onClickPlusButton}
+                      >
+                        <i className="icon-plus d-block p-0" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
-            {hasChildren() && (
+            {hasChildren() && isSidebarItem && (
               <div className="grw-foldertree-count-wrapper">
                 <CountBadge count={ childCount() } />
               </div>
@@ -195,24 +222,25 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
         )
 
         }
-        <div className="grw-foldertree-control d-flex">
-          <BookmarkFolderItemControl
-            onClickRename={onClickRenameHandler}
-            onClickDelete={onClickDeleteHandler}
-          >
-            <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>
-          </BookmarkFolderItemControl>
-          <button
-            type="button"
-            className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
-            onClick={onClickPlusButton}
-          >
-            <i className="icon-plus d-block p-0" />
-          </button>
-
-        </div>
+        { isSidebarItem && (
+          <div className="grw-foldertree-control d-flex">
+            <BookmarkFolderItemControl
+              onClickRename={onClickRenameHandler}
+              onClickDelete={onClickDeleteHandler}
+            >
+              <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>
+            </BookmarkFolderItemControl>
+            <button
+              type="button"
+              className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
+              onClick={onClickPlusButton}
+            >
+              <i className="icon-plus d-block p-0" />
+            </button>
+          </div>
+        )}
 
       </li>
       {isCreateAction && (

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

@@ -27,7 +27,7 @@ const BookmarkFolderNameInput = (props: Props): JSX.Element => {
   };
 
   return (
-    <div className="flex-fill">
+    <div className="flex-fill folder-name-input">
       <ClosableTextInput
         value={ value }
         placeholder={t('bookmark_folder.input_placeholder')}

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

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

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

@@ -50,6 +50,7 @@ const BookmarkFolderTree = (): JSX.Element => {
               key={item._id}
               bookmarkFolder={item}
               isOpen={false}
+              isSidebarItem={true}
             />
           );
         })}

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

@@ -12,9 +12,8 @@ import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
 
-
-import ClosableTextInput, { AlertInfo, AlertType } from '../../Common/ClosableTextInput';
-import { MenuItemType, PageItemControl } from '../../Common/Dropdown/PageItemControl';
+import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
+import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
 
 
 type Props = {

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

@@ -4,12 +4,11 @@ import { useTranslation } from 'next-i18next';
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Post } from '~/client/util/apiv3-client';
+import BookmarkFolderNameInput from '~/components/Bookmarks/BookmarkFolderNameInput';
+import BookmarkFolderTree from '~/components/Bookmarks/BookmarkFolderTree';
 import FolderPlusIcon from '~/components/Icons/FolderPlusIcon';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
-import BookmarkFolderNameInput from './BookmarkFolderNameInput';
-import BookmarkFolderTree from './BookmarkFolderTree';
-
 
 const BookmarkContents = (): JSX.Element => {
 

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

@@ -1,7 +1,27 @@
 @use '~/styles/molecules/page_list';
+@use '~/styles/molecules/bookmark-folder-tree';
+
 
 .user-page-footer :global {
   .grw-user-page-list-m {
+    .list-group-item {
+      svg{
+        width: 20px;
+        height: 20px;
+      }
+
+    }
+    .grw-triangle-container{
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+    .grw-foldertree-item-container {
+      input {
+        max-width: 25%;
+      }
+    }
     svg {
       width: 35px;
       height: 35px;

packages/app/src/components/UsersHomePageFooter.tsx

@@ -10,9 +10,10 @@ 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 BookmarkFolderItem from './Sidebar/Bookmarks/BookmarkFolderItem';
-import BookmarkFolderNameInput from './Sidebar/Bookmarks/BookmarkFolderNameInput';
+
 
 export type UsersHomePageFooterProps = {
   creatorId: string,
@@ -65,21 +66,23 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </div>
         )}
         {
-          <ul className={'grw-foldertree list-group p-3'}>
+          <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>
         }
-        <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
-          <BookmarkList />
-        </div>
+
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">
         <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -362,6 +362,23 @@ ul.pagination {
   }
 }
 
+.grw-user-page-list-m {
+  .grw-foldertree {
+    @include override-list-group-item-for-pagetree(
+      $body-color,
+      lighten($body-bg, 8%),
+      lighten($body-bg, 15%),
+      darken($body-color, 15%),
+      darken($body-color, 10%),
+      lighten($body-bg, 18%),
+      lighten($body-bg, 24%)
+    );
+    .grw-foldertree-triangle-btn {
+      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
+    }
+  }
+}
+
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
   @include hover() {

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -240,6 +240,23 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
 }
 
+.grw-user-page-list-m {
+  .grw-foldertree {
+    @include override-list-group-item-for-pagetree(
+      $body-color,
+      darken($body-bg, 5%),
+      darken($body-bg, 12%),
+      lighten($body-color, 10%),
+      lighten($body-color, 8%),
+      darken($body-bg, 15%),
+      darken($body-bg, 24%)
+    );
+    .grw-foldertree-triangle-btn {
+      @include mixins.button-outline-svg-icon-variant($gray-400, $primary);
+    }
+  }
+}
+
 .btn.btn-page-item-control {
   @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
   @include hover() {