refactor PagePathNav

apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx → apps/app/src/components-universal/Common/PagePathNav/PagePathNavLayout.tsx

@@ -21,7 +21,7 @@ type Props = PagePathNavLayoutProps & {
   latterLink?: ReactNode,
 }
 
-const CopyDropdown = dynamic(() => import('../CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
+const CopyDropdown = dynamic(() => import('../../../components/Common/CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
 
 export const PagePathNavLayout = (props: Props): JSX.Element => {
   const {

apps/app/src/components-universal/Common/PagePathNavTitle/PagePathNavTitle.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import withLoadingProps from 'next-dynamic-loading-props';
+import dynamic from 'next/dynamic';
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
+
+import { PagePathNav } from '../PagePathNav';
+import type { PagePathNavLayoutProps } from '../PagePathNav/PagePathNavLayout';
+
+const PagePathNavSticky = withLoadingProps<PagePathNavLayoutProps>(useLoadingProps => dynamic(
+  () => import('~/components/Common/PagePathNavSticky').then(mod => mod.PagePathNavSticky),
+  {
+    ssr: false,
+    loading: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const props = useLoadingProps();
+      return <PagePathNav {...props} />;
+    },
+  },
+));
+
+/**
+ * Switch PagePathNav and PagePathNavSticky
+ * @returns
+ */
+export const PagePathNavTitle = (props: PagePathNavLayoutProps): JSX.Element => {
+
+  const [isClient, setClient] = useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    setClient(true);
+  }, []);
+
+  return isClient
+    ? <PagePathNavSticky {...props} />
+    : <PagePathNav {...props} />;
+
+};

apps/app/src/components-universal/Common/PagePathNavTitle/index.ts

@@ -0,0 +1 @@
+export * from './PagePathNavTitle';

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,24 +0,0 @@
-@use '@growi/ui/scss/atoms/btn-muted';
-
-.grw-page-path-nav :global {
-  .btn-copy {
-    @include btn-muted.colorize(bs.$orange);
-  }
-}
-
-// == Colors
-.grw-former-link :global {
-  .separator {
-    opacity: 0.75;
-  }
-}
-
-.grw-former-link a {
-  --bs-link-opacity: 0.75;
-
-  &:global {
-    &:hover {
-      --bs-link-opacity: 1;
-    }
-  }
-}

apps/app/src/components/Common/PagePathNavSticky/PagePathNavSticky.tsx

@@ -14,9 +14,9 @@ import {
   usePageControlsX, useCurrentProductNavWidth, useSidebarMode,
 } from '~/stores/ui';
 
-import { PagePathHierarchicalLink } from '../PagePathHierarchicalLink';
-import type { PagePathNavLayoutProps } from '../PagePathNav';
-import { PagePathNavLayout, Separator } from '../PagePathNav';
+import { PagePathHierarchicalLink } from '../../../components-universal/Common/PagePathHierarchicalLink';
+import type { PagePathNavLayoutProps } from '../../../components-universal/Common/PagePathNav';
+import { PagePathNavLayout, Separator } from '../../../components-universal/Common/PagePathNav';
 
 import { CollapsedParentsDropdown } from './CollapsedParentsDropdown';
 

apps/app/src/components/Common/PagePathNavSticky/index.ts

@@ -0,0 +1 @@
+export * from './PagePathNavSticky';

apps/app/src/components/Page/PageView.tsx

@@ -7,6 +7,7 @@ import { isUsersHomepage } from '@growi/core/dist/utils/page-path-utils';
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
 import dynamic from 'next/dynamic';
 
+import { PagePathNavTitle } from '~/components-universal/Common/PagePathNavTitle';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import { useShouldExpandContent } from '~/services/layout/use-should-expand-content';
 import { generateSSRViewOptions } from '~/services/renderer/renderer';
@@ -17,7 +18,6 @@ import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import { useIsMobile } from '~/stores/ui';
 
-import { PagePathNavSticky } from '../Common/PagePathNav';
 import { PageViewLayout } from '../Common/PageViewLayout';
 import { PageAlerts } from '../PageAlert/PageAlerts';
 import { PageContentFooter } from '../PageContentFooter';
@@ -93,7 +93,6 @@ export const PageView = (props: Props): JSX.Element => {
   }, [isCommentsLoaded]);
   // *******************************  end  *******************************
 
-
   const specialContents = useMemo(() => {
     if (isIdenticalPathPage) {
       return <IdenticalPathPage />;
@@ -106,9 +105,7 @@ export const PageView = (props: Props): JSX.Element => {
     }
   }, [isForbidden, isIdenticalPathPage, isNotCreatable]);
 
-  const headerContents = (
-    <PagePathNavSticky pageId={page?._id} pagePath={pagePath} isWipPage={page?.wip} />
-  );
+  const headerContents = <PagePathNavTitle pageId={page?._id} pagePath={pagePath} />;
 
   const sideContents = !isNotFound && !isNotCreatable
     ? (

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -14,7 +14,7 @@ import { ValidationTarget, useInputValidator } from '~/client/util/use-input-val
 import LinkedPagePath from '~/models/linked-page-path';
 import { usePageSelectModal } from '~/stores/modal';
 
-import { PagePathHierarchicalLink } from '../Common/PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from '../../components-universal/Common/PagePathHierarchicalLink';
 import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
 import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';
 import { PageSelectModal } from '../PageSelectModal/PageSelectModal';

apps/app/src/components/PageList/PageListItemL.tsx

@@ -34,7 +34,7 @@ import { useIsDeviceLargerThanLg } from '~/stores/ui';
 import { useSWRMUTxPageInfo, useSWRxPageInfo } from '../../stores/page';
 import type { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 import { PageItemControl } from '../Common/Dropdown/PageItemControl';
-import { PagePathHierarchicalLink } from '../Common/PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from '../../components-universal/Common/PagePathHierarchicalLink';
 
 type Props = {
   page: IPageWithSearchMeta | IPageWithMeta<IPageInfoForListing & IPageSearchMeta>,

apps/app/src/components/SearchPage/SearchResultContent.tsx

@@ -25,7 +25,7 @@ import { useSearchResultOptions } from '~/stores/renderer';
 import { mutateSearching } from '~/stores/search';
 
 import type { AdditionalMenuItemsRendererProps, ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
-import { PagePathNav } from '../Common/PagePathNav';
+import { PagePathNav } from '../../components-universal/Common/PagePathNav';
 import { type RevisionLoaderProps } from '../Page/RevisionLoader';
 import type { PageContentFooterProps } from '../PageContentFooter';
 

apps/app/src/components/ShareLinkPageView.tsx

@@ -4,6 +4,7 @@ import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
 import dynamic from 'next/dynamic';
 
+import { PagePathNavTitle } from '~/components-universal/Common/PagePathNavTitle';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { IShareLinkHasId } from '~/interfaces/share-link';
 import { useShouldExpandContent } from '~/services/layout/use-should-expand-content';
@@ -12,7 +13,6 @@ import { useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
 import loggerFactory from '~/utils/logger';
 
-import { PagePathNavSticky } from './Common/PagePathNav';
 import { PageViewLayout } from './Common/PageViewLayout';
 import RevisionRenderer from './Page/RevisionRenderer';
 import ShareLinkAlert from './Page/ShareLinkAlert';
@@ -60,9 +60,7 @@ export const ShareLinkPageView = (props: Props): JSX.Element => {
     }
   }, [disableLinkSharing, props.disableLinkSharing]);
 
-  const headerContents = (
-    <PagePathNavSticky pageId={page?._id} pagePath={pagePath} />
-  );
+  const headerContents = <PagePathNavTitle pageId={page?._id} pagePath={pagePath} />;
 
   const sideContents = !isNotFound
     ? (

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -10,7 +10,7 @@ import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'react-i18next';
 
 import { useKeywordManager } from '~/client/services/search-operation';
-import { PagePathHierarchicalLink } from '~/components/Common/PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from '~/components-universal/Common/PagePathHierarchicalLink';
 import FormattedDistanceDate from '~/components/FormattedDistanceDate';
 import InfiniteScroll from '~/components/InfiniteScroll';
 import LinkedPagePath from '~/models/linked-page-path';

apps/app/src/pages/trash.page.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import React from 'react';
 
 import type { IUser } from '@growi/core';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
@@ -7,9 +6,9 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
+import { PagePathNavTitle } from '~/components-universal/Common/PagePathNavTitle';
 import { BasicLayout } from '~/components-universal/Layout/BasicLayout';
 import { GroundGlassBar } from '~/components-universal/Navbar/GroundGlassBar';
-import { PagePathNavSticky } from '~/components/Common/PagePathNav';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import type { ISidebarConfig } from '~/interfaces/sidebar-config';
@@ -27,6 +26,7 @@ import {
   getServerSideCommonProps, getNextI18NextConfig, generateCustomTitleForPage, useInitSidebarConfig,
 } from './utils/commons';
 
+
 const TrashPageList = dynamic(() => import('~/components/TrashPageList').then(mod => mod.TrashPageList), { ssr: false });
 const EmptyTrashModal = dynamic(() => import('~/components/EmptyTrashModal'), { ssr: false });
 
@@ -77,7 +77,7 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
 
         <div className="main ps-sidebar">
           <div className="container-lg wide-gutter-x-lg">
-            <PagePathNavSticky pagePath="/trash" />
+            <PagePathNavTitle pagePath="/trash" />
             <TrashPageList />
           </div>
         </div>