deprecate GrowiSubNavigation

apps/app/_obsolete/src/styles/theme/_apply-colors-light.scss

@@ -180,9 +180,9 @@
   /*
   * GROWI subnavigation
   */
-  .grw-subnav {
-    background-color: var(--bgcolor-subnav);
-  }
+  // .grw-subnav {
+  //   background-color: var(--bgcolor-subnav);
+  // }
 
   .grw-subnav-fixed-container .grw-subnav {
     background-color: hsl.alpha(var(--bgcolor-subnav),85%);
@@ -207,9 +207,9 @@
   /**
    * GROWI PagePathHierarchicalLink
    */
-  .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
-    color: $gray-600;
-  }
+  // .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
+  //   color: $gray-600;
+  // }
   /*
   * GROWI Sidebar
   */

apps/app/src/components/Layout/SearchResultLayout.module.scss

@@ -35,32 +35,10 @@
   }
 
   .search-result-content {
-    .search-result-content-nav {
-      min-height: var.$grw-subnav-search-preview-min-height;
-      overflow: auto;
-
-      .grw-subnav {
-        min-height: inherit;
-      }
-    }
-
-    .search-result-content {
-
-      > h2 {
-        margin-right: 10px;
-        font-size: 22px;
-        line-height: 1em;
-      }
-
-      &:first-child > h2 {
-        margin-top: 0;
-      }
-
-      .search-result-content-body-container {
-        .wiki {
-          padding: 16px;
-          font-size: 14px;
-        }
+    .search-result-content-body-container {
+      .wiki {
+        margin-top: 2em;
+        font-size: 14px;
       }
     }
   }

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

@@ -36,10 +36,9 @@ import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
 import { NotAvailable } from '../NotAvailable';
+import PagePathNav from '../PagePathNav';
 import { Skeleton } from '../Skeleton';
 
-import { GrowiSubNavigation } from './GrowiSubNavigation';
-
 import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
 
 
@@ -388,16 +387,14 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
 
   const pagePath = isIdenticalPath || isNotFound
-    ? currentPathname
-    : currentPage?.path;
+    ? currentPathname ?? ''
+    : currentPage?.path ?? '';
 
   return (
-    <GrowiSubNavigation
-      pagePath={pagePath}
-      pageId={currentPage?._id}
-      rightComponent={RightComponent}
-      additionalClasses={['container-fluid']}
-    />
+    <>
+      <RightComponent />
+      <PagePathNav pageId={pageId} pagePath={pagePath} />
+    </>
   );
 };
 

apps/app/src/components/PageControls/BookmarkButtons.tsx

@@ -15,6 +15,7 @@ import { BookmarkFolderMenu } from '../Bookmarks/BookmarkFolderMenu';
 import UserPictureList from '../Common/UserPictureList';
 
 import styles from './BookmarkButtons.module.scss';
+import popoverStyles from './user-list-popover.module.scss';
 
 interface Props {
   pageId: string,
@@ -86,12 +87,12 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
         type="button"
         id="po-total-bookmarks"
         className={`shadow-none btn btn-bookmark border-0
-          total-bookmarks ${isBookmarked ? 'active' : ''}`}
+          total-counts ${isBookmarked ? 'active' : ''}`}
       >
         {bookmarkCount}
       </button>
       <Popover placement="bottom" isOpen={isBookmarkUsersPopoverOpen} target="po-total-bookmarks" toggle={toggleBookmarkUsersPopover} trigger="legacy">
-        <PopoverBody className="user-list-popover">
+        <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
           { isLoadingBookmarkedUsers && <i className="fa fa-spinner fa-pulse"></i> }
           { !isLoadingBookmarkedUsers && bookmarkedUsers != null && (
             <>

apps/app/src/components/PageControls/LikeButtons.tsx

@@ -60,7 +60,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="po-total-likes"
         className={`shadow-none btn btn-like border-0
-          total-likes ${isLiked ? 'active' : ''}`}
+          total-counts ${isLiked ? 'active' : ''}`}
       >
         {sumOfLikers}
       </button>

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

@@ -1,8 +1,30 @@
-.page-controls :global {
+%page-controls-buttons-height {
+  height: 40px;
+}
+
+.grw-page-controls :global {
+
+  .btn-subscribe {
+    --bs-btn-font-size: 18px;
+    @extend %page-controls-buttons-height;
+  }
 
   .btn-like,
-  .btn-subscribe,
   .btn-bookmark,
   .btn-seen-user {
+    --bs-btn-font-size: 18px;
+
+    @extend %page-controls-buttons-height;
+    padding-right: 6px;
+    padding-left: 8px;
   }
+
+  .total-counts {
+    font-size: 13px;
+  }
+
+  .btn-page-item-control {
+    @extend %page-controls-buttons-height;
+  }
+
 }

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -6,14 +6,10 @@
     $color-seen-user: #549c79;
 
     @include bs.button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
-    @include mixins-buttons.button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
 
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active {
       color: $color-seen-user;
-      svg {
-        fill: $color-seen-user;
-      }
     }
     &:not(:disabled):not(.disabled):not(:hover) {
       background-color: transparent;

apps/app/src/components/PageControls/SeenUserInfo.tsx

@@ -9,6 +9,7 @@ import UserPictureList from '../Common/UserPictureList';
 
 
 import styles from './SeenUserInfo.module.scss';
+import popoverStyles from './user-list-popover.module.scss';
 
 
 interface Props {
@@ -31,10 +32,10 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
         <span className="me-1 footstamp-icon">
           <FootstampIcon />
         </span>
-        <span className="seen-user-count">{sumOfSeenUsers || seenUsers.length}</span>
+        <span className="total-counts">{sumOfSeenUsers || seenUsers.length}</span>
       </button>
       <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-seen-user" toggle={togglePopover} trigger="legacy" disabled={disabled}>
-        <PopoverBody className="user-list-popover">
+        <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
           <div className="px-2 text-end user-list-content text-truncate text-muted">
             <UserPictureList users={seenUsers} />
           </div>

apps/app/src/components/PageControls/user-list-popover.module.scss

@@ -0,0 +1,12 @@
+.user-list-popover :global {
+  --bs-popover-max-width: 200px;
+  --bs-popover-body-padding-x: .5rem;
+  --bs-popover-body-padding-y: .5rem;
+
+  .user-list-content {
+    direction: rtl;
+  }
+  .cls-1 {
+    isolation: isolate;
+  }
+}

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

@@ -213,7 +213,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
 
       </div>
 
-      <div className="flex-expand-vert d-none d-lg-flex search-result-content">
+      <div className="flex-expand-vert d-none d-lg-flex">
         {pages != null && pages.length !== 0 && selectedPageWithMeta != null && (
           <SearchResultContent
             pageWithMeta={selectedPageWithMeta}

apps/app/src/components/SearchPage/SearchResultContent.module.scss

@@ -1,8 +1,2 @@
-/*
-* shadow
-*/
 .search-result-content :global {
-  .grw-subnav {
-    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
-  }
 }

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

@@ -28,12 +28,13 @@ import type { GrowiSubNavigationProps } from '../Navbar/GrowiSubNavigation';
 import { type RevisionLoaderProps } from '../Page/RevisionLoader';
 import { type PageCommentProps } from '../PageComment';
 import type { PageContentFooterProps } from '../PageContentFooter';
+import PagePathNav from '../PagePathNav';
 
 import styles from './SearchResultContent.module.scss';
 
 
 const GrowiSubNavigation = dynamic<GrowiSubNavigationProps>(() => import('../Navbar/GrowiSubNavigation').then(mod => mod.GrowiSubNavigation), { ssr: false });
-const PageControls = dynamic(() => import('../PageControls').then(mod => mod.PageControls), { ssr: false });
+const SubNavButtons = 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 });
@@ -187,7 +188,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
 
     return (
       <div className="d-flex flex-column align-items-end justify-content-center py-md-2">
-        <PageControls
+        <SubNavButtons
           pageId={page._id}
           revisionId={revisionId}
           path={page.path}
@@ -213,21 +214,17 @@ 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=" ">
-        { isRenderable && (
-          <GrowiSubNavigation
-            pagePath={page.path}
-            pageId={page._id}
-            rightComponent={RightComponent}
-            additionalClasses={['px-4']}
-          />
-        ) }
-      </div>
+      <RightComponent />
+
       <div
         id="search-result-content-body-container"
         ref={scrollElementRef}
         className="search-result-content-body-container main container-lg grw-container-convertible overflow-y-scroll"
       >
+        { isRenderable && (
+          <PagePathNav pageId={page._id} pagePath={page.path} />
+        ) }
+
         { isRenderable && (
           <RevisionLoader
             rendererOptions={rendererOptions}

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

@@ -53,7 +53,7 @@ const PageItem = memo(({ page, isSmall, onClickTag }: PageItemProps): JSX.Elemen
   const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
   const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
   const FormerLink = () => (
-    <div className="grw-page-path-text-muted-container small">
+    <div className="small">
       <PagePathHierarchicalLink linkedPagePath={linkedPagePathFormer} />
     </div>
   );

apps/app/src/styles/_editor.scss

@@ -7,24 +7,6 @@
 .layout-root.editing {
   overflow-y: hidden !important;
 
-  .grw-navbar {
-    position: fixed !important;
-    width: 100vw;
-  }
-
-  // restrict height of subnav
-  .grw-subnav {
-    height: var.$grw-subnav-height-on-edit;
-    min-height: unset;
-    padding-top: 0;
-    padding-right: 15px;
-    padding-left: 15px;
-
-    @include bs.media-breakpoint-up(lg) {
-      height: var.$grw-subnav-height-lg-on-edit;
-    }
-  }
-
   .page-wrapper {
     top: 0;
     height: 100vh;
@@ -98,28 +80,6 @@
     }
   }
 
-  // ellipsis .grw-page-path-hierarchical-link
-  .grw-subnav-start-side {
-    overflow: hidden;
-    .grw-path-nav-container {
-      margin-right: 1rem;
-      overflow: hidden;
-      .grw-page-path-nav {
-        white-space: nowrap;
-
-        .grw-page-path-hierarchical-link {
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        h1 {
-          overflow: hidden;
-        }
-      }
-    }
-  }
-
   .grw-copy-dropdown {
     .btn-copy {
       padding: 3px !important; // overwrite padding

apps/app/src/styles/_variables.scss

@@ -6,13 +6,6 @@ $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
 //== Layout
-$grw-subnav-min-height: 95px;
-$grw-subnav-min-height-md: 115px;
-$grw-subnav-height-on-edit: 95px;
-$grw-subnav-height-lg-on-edit: 50px;
-
-$grw-subnav-search-preview-min-height: 90px;
-
 $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;