Implement expand and compress bookmark content on user page

https://youtrack.weseek.co.jp/issue/GW-7850
- Create component for Expand / Compress Icon
- Implement Expand / Compress button to UsersHomePageFooter component
- Add props isExpanded props to BookmarkContents component
- Implement conditional styling / classes to BookmarkContents  based on isExpanded state
- Create styling for bookmark content continer
- Adjust styling for expand / compress button

packages/app/src/components/Icons/ExpandCompressIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+type Props = {
+  isExpanded: boolean
+}
+const ExpandCompressIcon = (props: Props): JSX.Element => {
+  const { isExpanded } = props;
+
+  return (
+    <>
+      {isExpanded ? (
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 45 45"
+        >
+          <path
+            fill="currentColor"
+            d="M8.1 44v-3h31.8v3Zm16-4.5-7.6-7.6 2.15-2.15
+            3.95 3.95V14.3l-3.95 3.95-2.15-2.15 7.6-7.6 7.6 7.6-2.15
+            2.15-3.95-3.95v19.4l3.95-3.95 2.15 2.15ZM8.1 7V4h31.8v3Z"
+          />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 45 45"
+        >
+          <path
+            fill="currentColor"
+            d="M22.45 44v-7.9l-3.85 3.8-2.1-2.1 7.45-7.4 7.35 7.4-2.1
+            2.1-3.75-3.8V44ZM8.05 27.5v-3H40v3Zm0-6.05v-3H40v3Zm15.9-5.85-7.4-7.4 2.1-2.1
+            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"/>
+        </svg>
+      )
+      }
+    </>
+  );
+
+};
+
+export default ExpandCompressIcon;

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

@@ -32,5 +32,13 @@
         height: 18px;
       }
     }
+    .expand-compress-btn {
+      max-height: 40px;
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-bottom: 3px;
+      }
+    }
   }
 }

packages/app/src/components/UsersHomePageFooter.tsx

@@ -10,6 +10,7 @@ import styles from '~/components/UsersHomePageFooter.module.scss';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
+import ExpandCompressIcon from './Icons/ExpandCompressIcon';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
 import BookmarkContents from './UsersPageBookmarks/BookmarkContents';
 
@@ -22,6 +23,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   const { t } = useTranslation();
   const { creatorId } = props;
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
 
 
@@ -40,7 +42,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   return (
     <div className={`container-lg user-page-footer py-5 ${styles['user-page-footer']}`}>
       <div className="grw-user-page-list-m d-edit-none">
-        <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+        <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3 d-flex">
           <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
           {t('footer.bookmarks')}
           <span className="pl-2">
@@ -52,6 +54,14 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
               <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
             </button>
           </span>
+          <span className="ml-auto pl-2 ">
+            <button
+              className={`btn btn-sm expand-compress-btn ${isExpanded ? 'active' : ''}`}
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              <ExpandCompressIcon isExpanded={isExpanded}/>
+            </button>
+          </span>
         </h2>
         { isCreateAction && (
           <div className="row">
@@ -65,7 +75,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </div>
         )}
         {
-          <BookmarkContents />
+          <BookmarkContents isExpanded={isExpanded}/>
         }
 
       </div>

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

@@ -1,3 +1,16 @@
 @use '~/styles/molecules/bookmark-folder-tree';
 @use '~/styles/molecules/page_list';
+@use '~/styles/variables' as var;
+$grw-sidebar-content-header-height: 58px;
+$grw-sidebar-content-footer-height: 50px;
+
+.compressed {
+  max-height: calc(70vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}
+
+.expanded {
+  max-height: calc(200vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}
 

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

@@ -15,7 +15,11 @@ import BookmarkItem from '../Bookmarks/BookmarkItem';
 
 import styles from './BookmarkContents.module.scss';
 
-const BookmarkContents = (): JSX.Element => {
+type Props = {
+  isExpanded: boolean
+}
+const BookmarkContents = (props: Props): JSX.Element => {
+  const { isExpanded } = props;
   const { t } = useTranslation();
   const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild(null);
   const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
@@ -39,38 +43,41 @@ const BookmarkContents = (): JSX.Element => {
     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}
-                />
-              ))}
+    <div className={`${isExpanded ? `${styles.expanded}` : `${styles.compressed}`}`}>
+      <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>
+              </ul>
+            </>
+          ) }
+        </div>
+      </ul>
+    </div>
   );
 };
 

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

@@ -363,6 +363,13 @@ ul.pagination {
 }
 
 .grw-user-page-list-m {
+  .expand-compress-btn {
+    color: $body-color;
+    background-color: $body-bg;
+  }
+  .active {
+    background-color: lighten($body-bg, 12%),
+  }
   .grw-foldertree {
     @include override-list-group-item-for-pagetree(
       $body-color,

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

@@ -241,6 +241,13 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 }
 
 .grw-user-page-list-m {
+  .expand-compress-btn {
+    color: $body-color;
+    background-color: $body-bg;
+  }
+  .active {
+    background-color: darken($body-bg, 12%),
+  }
   .grw-foldertree {
     @include override-list-group-item-for-pagetree(
       $body-color,