re-impl DisplaySwitcher

packages/app/src/components/IdenticalPathPage.tsx

@@ -5,11 +5,11 @@ import { DevidedPagePath } from '@growi/core';
 
 import { IPageHasId, IPageWithMeta } from '~/interfaces/page';
 import { useCurrentPagePath, useIsSharedUser } from '~/stores/context';
+import { useDescendantsPageListModal } from '~/stores/ui';
 import { useSWRxPageInfoForList } from '~/stores/page';
 
 import PageListIcon from './Icons/PageListIcon';
 import { PageListItemL } from './PageList/PageListItemL';
-import { useDescendantsPageListModal } from '~/stores/ui';
 
 
 type IdenticalPathAlertProps = {
@@ -78,7 +78,7 @@ const IdenticalPathPage:FC<IdenticalPathPageProps> = (props: IdenticalPathPagePr
           { currentPath != null && !isSharedUser && (
             <button
               type="button"
-              className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between px-3"
+              className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between"
               onClick={() => openDescendantPageListModal(currentPath)}
             >
               <PageListIcon />

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -1,32 +1,39 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { TabContent, TabPane } from 'reactstrap';
-import propTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
-import PageContainer from '~/client/services/PageContainer';
-import { EditorMode, useEditorMode } from '~/stores/ui';
+import { EditorMode, useEditorMode, useDescendantsPageListModal } from '~/stores/ui';
+import {
+  useCurrentPagePath, useIsSharedUser, useIsEditable, useCurrentPageId, useIsUserPage, usePageUser,
+} from '~/stores/context';
 
+
+import PageListIcon from '../Icons/PageListIcon';
 import Editor from '../PageEditor';
 import Page from '../Page';
 import UserInfo from '../User/UserInfo';
 import TableOfContents from '../TableOfContents';
 import ContentLinkButtons from '../ContentLinkButtons';
-import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 import HashChanged from '../EventListeneres/HashChanged';
-import { useIsEditable } from '~/stores/context';
 
 
-const DisplaySwitcher = (props) => {
-  const {
-    pageContainer,
-  } = props;
-  const { isPageExist, pageUser } = pageContainer.state;
+const DisplaySwitcher = (): JSX.Element => {
+  const { t } = useTranslation();
 
+  const { data: currentPageId } = useCurrentPageId();
+  const { data: currentPath } = useCurrentPagePath();
+  const { data: isSharedUser } = useIsSharedUser();
+  const { data: isUserPage } = useIsUserPage();
   const { data: isEditable } = useIsEditable();
+  const { data: pageUser } = usePageUser();
+
   const { data: editorMode } = useEditorMode();
 
+  const { open: openDescendantPageListModal } = useDescendantsPageListModal();
+
+  const isPageExist = currentPageId != null;
   const isViewMode = editorMode === EditorMode.View;
 
   return (
@@ -38,8 +45,19 @@ const DisplaySwitcher = (props) => {
             { isPageExist && (
               <div className="grw-side-contents-container">
                 <div className="grw-side-contents-sticky-container">
-                  <div className="border-bottom pb-1">
-                    <PageAccessories />
+
+                  <div className="grw-page-accessories-control">
+                    { currentPath != null && !isSharedUser && (
+                      <button
+                        type="button"
+                        className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between"
+                        onClick={() => openDescendantPageListModal(currentPath)}
+                      >
+                        <PageListIcon />
+                        {t('page_list')}
+                        <span></span> {/* for a count badge */}
+                      </button>
+                    ) }
                   </div>
 
                   <div className="d-none d-lg-block">
@@ -48,12 +66,13 @@ const DisplaySwitcher = (props) => {
                     </div>
                     <ContentLinkButtons />
                   </div>
+
                 </div>
               </div>
             ) }
 
             <div className="flex-grow-1 flex-basis-0 mw-0">
-              {pageUser && <UserInfo pageUser={pageUser} />}
+              { isUserPage && <UserInfo pageUser={pageUser} />}
               <Page />
             </div>
 
@@ -81,9 +100,4 @@ const DisplaySwitcher = (props) => {
   );
 };
 
-DisplaySwitcher.propTypes = {
-  pageContainer: propTypes.instanceOf(PageContainer).isRequired,
-};
-
-
-export default withUnstatedContainers(DisplaySwitcher, [PageContainer]);
+export default DisplaySwitcher;

packages/app/src/styles/_page-accessories-control.scss

@@ -1,18 +1,11 @@
 .grw-page-accessories-control {
-  line-height: 1.25;
-  border-bottom: 1px solid transparent;
-
   .grw-btn-page-accessories {
-    padding: 0.375rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
 
     svg {
       width: 16px;
       height: 16px;
     }
   }
-
-  .grw-border-vr {
-    height: 25px;
-    border-left: solid 1px transparent;
-  }
 }

packages/app/src/styles/_toc.scss

@@ -4,7 +4,6 @@
   padding: 5px;
   font-size: 0.9em;
 
-  border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 
   .revision-toc-content {