rename SubNavButtons to PageControls

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -36,7 +36,6 @@ import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
 import { NotAvailable } from '../NotAvailable';
-import type { SubNavButtonsProps } from '../PageControls';
 import { Skeleton } from '../Skeleton';
 
 import { GrowiSubNavigation } from './GrowiSubNavigation';
@@ -48,8 +47,8 @@ const PageEditorModeManager = dynamic(
   () => import('./PageEditorModeManager').then(mod => mod.PageEditorModeManager),
   { ssr: false, loading: () => <Skeleton additionalClass={`${PageEditorModeManagerStyles['grw-page-editor-mode-manager-skeleton']}`} /> },
 );
-const SubNavButtons = dynamic<SubNavButtonsProps>(
-  () => import('../PageControls/SubNavButtons').then(mod => mod.SubNavButtons),
+const PageControls = dynamic(
+  () => import('../PageControls').then(mod => mod.PageControls),
   { ssr: false, loading: () => <></> },
 );
 const PageAuthorInfo = dynamic(() => import('../PageAuthorInfo/PageAuthorInfo').then(mod => mod.PageAuthorInfo), {
@@ -346,7 +345,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             {isViewMode && (
               <div className="h-50">
                 {pageId != null && (
-                  <SubNavButtons
+                  <PageControls
                     pageId={pageId}
                     revisionId={revisionId}
                     shareLinkId={shareLinkId}

apps/app/src/components/PageControls/SubNavButtons.module.scss → apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,4 +1,4 @@
-.grw-sub-nav-buttons :global {
+.page-controls :global {
 
   .btn-like,
   .btn-subscribe,

apps/app/src/components/PageControls/SubNavButtons.tsx → apps/app/src/components/PageControls/PageControls.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 
 import type {
   IPageInfoForOperation, IPageToDeleteWithMeta, IPageToRenameWithMeta,
@@ -29,7 +29,7 @@ import SeenUserInfo from './SeenUserInfo';
 import SubscribeButton from './SubscribeButton';
 
 
-import styles from './SubNavButtons.module.scss';
+import styles from './PageControls.module.scss';
 
 
 type WideViewMenuItemProps = AdditionalMenuItemsRendererProps & {
@@ -77,7 +77,7 @@ type CommonProps = {
   onClickSwitchContentWidth?: (pageId: string, value: boolean) => void,
 }
 
-type SubNavButtonsSubstanceProps = CommonProps & {
+type PageControlsSubstanceProps = CommonProps & {
   pageId: string,
   shareLinkId?: string | null,
   revisionId: string | null,
@@ -86,7 +86,7 @@ type SubNavButtonsSubstanceProps = CommonProps & {
   expandContentWidth?: boolean,
 }
 
-const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element => {
+const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element => {
   const {
     pageInfo,
     pageId, revisionId, path, shareLinkId, expandContentWidth,
@@ -215,7 +215,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   ];
 
   return (
-    <div className={`grw-sub-nav-buttons ${styles['grw-sub-nav-buttons']} d-flex`} style={{ gap: '2px' }}>
+    <div className={`grw-page-controls ${styles['grw-page-controls']} d-flex`} style={{ gap: '2px' }}>
       {revisionId != null && (
         <SubscribeButton
           status={pageInfo.subscriptionStatus}
@@ -263,7 +263,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   );
 };
 
-export type SubNavButtonsProps = CommonProps & {
+type PageControlsProps = CommonProps & {
   pageId: string,
   shareLinkId?: string | null,
   revisionId?: string | null,
@@ -271,7 +271,7 @@ export type SubNavButtonsProps = CommonProps & {
   expandContentWidth?: boolean,
 };
 
-export const SubNavButtons = (props: SubNavButtonsProps): JSX.Element => {
+export const PageControls = memo((props: PageControlsProps): JSX.Element => {
   const {
     pageId, revisionId, path, shareLinkId, expandContentWidth,
     onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
@@ -288,7 +288,7 @@ export const SubNavButtons = (props: SubNavButtonsProps): JSX.Element => {
   }
 
   return (
-    <SubNavButtonsSubstance
+    <PageControlsSubstance
       {...props}
       pageInfo={pageInfo}
       pageId={pageId}
@@ -301,4 +301,4 @@ export const SubNavButtons = (props: SubNavButtonsProps): JSX.Element => {
       expandContentWidth={expandContentWidth}
     />
   );
-};
+});

apps/app/src/components/PageControls/index.ts

@@ -1 +1 @@
-export * from './SubNavButtons';
+export * from './PageControls';

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

@@ -28,13 +28,12 @@ import type { GrowiSubNavigationProps } from '../Navbar/GrowiSubNavigation';
 import { type RevisionLoaderProps } from '../Page/RevisionLoader';
 import { type PageCommentProps } from '../PageComment';
 import type { PageContentFooterProps } from '../PageContentFooter';
-import type { SubNavButtonsProps } from '../PageControls';
 
 import styles from './SearchResultContent.module.scss';
 
 
 const GrowiSubNavigation = dynamic<GrowiSubNavigationProps>(() => import('../Navbar/GrowiSubNavigation').then(mod => mod.GrowiSubNavigation), { ssr: false });
-const SubNavButtons = dynamic<SubNavButtonsProps>(() => import('../PageControls').then(mod => mod.SubNavButtons), { ssr: false });
+const PageControls = dynamic(() => import('../PageControls').then(mod => mod.PageControls), { ssr: false });
 const RevisionLoader = dynamic<RevisionLoaderProps>(() => import('../Page/RevisionLoader').then(mod => mod.RevisionLoader), { ssr: false });
 const PageComment = dynamic<PageCommentProps>(() => import('../PageComment').then(mod => mod.PageComment), { ssr: false });
 const PageContentFooter = dynamic<PageContentFooterProps>(() => import('../PageContentFooter').then(mod => mod.PageContentFooter), { ssr: false });
@@ -188,7 +187,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
 
     return (
       <div className="d-flex flex-column align-items-end justify-content-center py-md-2">
-        <SubNavButtons
+        <PageControls
           pageId={page._id}
           revisionId={revisionId}
           path={page.path}
@@ -214,7 +213,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
       data-testid="search-result-content"
       className={`dynamic-layout-root ${growiLayoutFluidClass} search-result-content ${styles['search-result-content']}`}
     >
-      <div className="grw-page-path-text-muted-container">
+      <div className=" ">
         { isRenderable && (
           <GrowiSubNavigation
             pagePath={page.path}