Merge pull request #6254 from weseek/imprv/99346-next-Growi-SubNavigation

Imprv: 99346 next growi sub navigation

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

@@ -0,0 +1,18 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-bookmark {
+  :global {
+    box-shadow: none !important;
+  }
+
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: bs.$orange;
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/BookmarkButtons.tsx

@@ -9,6 +9,8 @@ import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
 
+import styles from './BookmarkButtons.module.scss';
+
 interface Props {
   bookmarkCount?: number
   isBookmarked?: boolean
@@ -55,7 +57,7 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
         type="button"
         id="bookmark-button"
         onClick={handleClick}
-        className={`shadow-none btn btn-bookmark border-0
+        className={`shadow-none btn ${styles['btn-bookmark']} border-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>

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

@@ -0,0 +1,17 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-like {
+  :global {
+    box-shadow: none !important;
+  }
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$red, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/LikeButtons.tsx

@@ -3,13 +3,12 @@ import React, { FC, useState, useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 
-import AppContainer from '~/client/services/AppContainer';
-
 import { IUser } from '../interfaces/user';
 
-import { withUnstatedContainers } from './UnstatedUtils';
 import UserPictureList from './User/UserPictureList';
 
+import styles from './LikeButtons.module.scss';
+
 type LikeButtonsProps = {
 
   hideTotalNumber?: boolean,
@@ -51,7 +50,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`shadow-none btn btn-like border-0
+        className={`shadow-none btn ${styles['btn-like']} border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
@@ -85,14 +84,4 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
 
 };
 
-/**
- * Wrapper component for using unstated
- */
-const LikeButtonsUnstatedWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const LikeButtonsWrapper = (props) => {
-  return <LikeButtonsUnstatedWrapper {...props}></LikeButtonsUnstatedWrapper>;
-};
-
-export default LikeButtonsWrapper;
+export default LikeButtons;

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

@@ -4,16 +4,13 @@ import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { DropdownItem } from 'reactstrap';
 
-import EditorContainer from '~/client/services/EditorContainer';
-import PageContainer from '~/client/services/PageContainer';
 import { exportAsMarkdown } from '~/client/services/page-operation';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiPost } from '~/client/util/apiv1-client';
-import { getIdForRef } from '~/interfaces/common';
+import { isPopulated } from '~/interfaces/common';
 import {
   IPageToRenameWithMeta, IPageWithMeta, IPageInfoForEntity,
 } from '~/interfaces/page';
-import { IResTagsUpdateApiv1 } from '~/interfaces/tag';
 import { OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction } from '~/interfaces/ui';
 import {
   useCurrentPageId,
@@ -26,7 +23,7 @@ import {
 } from '~/stores/modal';
 import { useSWRxCurrentPage, useSWRxTagsInfo } from '~/stores/page';
 import {
-  EditorMode, useDrawerMode, useEditorMode, useIsDeviceSmallerThanMd, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
+  EditorMode, useDrawerMode, useEditorMode, useIsAbleToShowPageManagement, useIsAbleToShowTagLabel,
   useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
 } from '~/stores/ui';
 
@@ -36,7 +33,6 @@ import AttachmentIcon from '../Icons/AttachmentIcon';
 import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
-import { withUnstatedContainers } from '../UnstatedUtils';
 
 
 import { GrowiSubNavigation } from './GrowiSubNavigation';
@@ -44,7 +40,7 @@ import PageEditorModeManager from './PageEditorModeManager';
 import { SubNavButtons } from './SubNavButtons';
 
 
-type AdditionalMenuItemsProps = AdditionalMenuItemsRendererProps & {
+type AdditionalMenuItemsProps = {
   pageId: string,
   revisionId: string,
   isLinkSharingDisabled?: boolean,
@@ -149,13 +145,22 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
   );
 };
 
+type GrowiContextualSubNavigationProps = {
+  isCompactMode?: boolean,
+  isLinkSharingDisabled: boolean,
+};
+
+const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
+
+  const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
+  const path = currentPage?.path;
+
+  const revision = currentPage?.revision;
+  const revisionId = (revision != null && isPopulated(revision)) ? revision._id : undefined;
 
-const GrowiContextualSubNavigation = (props) => {
-  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
   const { data: isDrawerMode } = useDrawerMode();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
   const { data: pageId } = useCurrentPageId();
-  const { data: currentPage } = useSWRxCurrentPage();
   const { data: currentUser } = useCurrentUser();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isSharedUser } = useIsSharedUser();
@@ -194,9 +199,7 @@ const GrowiContextualSubNavigation = (props) => {
 
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
 
-  const {
-    isCompactMode, isLinkSharingDisabled, pageContainer,
-  } = props;
+  const { isCompactMode, isLinkSharingDisabled } = props;
 
   const isViewMode = editorMode === EditorMode.View;
 
@@ -208,9 +211,8 @@ const GrowiContextualSubNavigation = (props) => {
 
     const { _id: pageId, revision: revisionId } = currentPage;
     try {
-      const res: IResTagsUpdateApiv1 = await apiPost('/tags.update', { pageId, revisionId, tags: newTags });
-      const updatedRevisionId = getIdForRef(res.savedPage.revision);
-      await pageContainer.setState({ revisionId: updatedRevisionId });
+      await apiPost('/tags.update', { pageId, revisionId, tags: newTags });
+      mutateCurrentPage();
 
       // revalidate SWRTagsInfo
       mutateSWRTagsInfo();
@@ -222,7 +224,7 @@ const GrowiContextualSubNavigation = (props) => {
       toastError(err, 'fail to update tags');
     }
 
-  }, [currentPage, mutateSWRTagsInfo, mutatePageTagsForEditors, pageContainer]);
+  }, [mutateSWRTagsInfo, mutatePageTagsForEditors, mutateCurrentPage, pageId, revisionId]);
 
   const tagsUpdatedHandlerForEditMode = useCallback((newTags: string[]): void => {
     // It will not be reflected in the DB until the page is refreshed
@@ -274,7 +276,7 @@ const GrowiContextualSubNavigation = (props) => {
 
 
   const ControlComponents = useCallback(() => {
-    if (currentPage == null) {
+    if (currentPage == null || pageId == null) {
       return <></>;
     }
 
@@ -282,20 +284,19 @@ const GrowiContextualSubNavigation = (props) => {
       mutateEditorMode(viewType);
     }
 
-    const { _id: pageId, revision, path } = currentPage;
-
-    let additionalMenuItemsRenderer;
-    if (revision != null) {
-      additionalMenuItemsRenderer = props => function additionalMenuItemsRenderer() {
-        return (<AdditionalMenuItems
-          {...props}
+    const additionalMenuItemsRenderer = () => {
+      if (revisionId == null || pageId == null) {
+        return <></>;
+      }
+      return (
+        <AdditionalMenuItems
           pageId={pageId}
-          revisionId={revision}
+          revisionId={revisionId}
           isLinkSharingDisabled={isLinkSharingDisabled}
           onClickTemplateMenuItem={templateMenuItemClickHandler}
-        />);
-      };
-    }
+        />
+      );
+    };
     return (
       <>
         <div className="d-flex flex-column align-items-end justify-content-center py-md-2" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>
@@ -305,8 +306,8 @@ const GrowiContextualSubNavigation = (props) => {
               <SubNavButtons
                 isCompactMode={isCompactMode}
                 pageId={pageId}
+                revisionId={revisionId}
                 shareLinkId={shareLinkId}
-                revisionId={revision.toString()}
                 path={path}
                 disableSeenUserInfoPopover={isSharedUser}
                 showPageControlDropdown={isAbleToShowPageManagement}
@@ -322,7 +323,6 @@ const GrowiContextualSubNavigation = (props) => {
               onPageEditorModeButtonClicked={onPageEditorModeButtonClicked}
               isBtnDisabled={isGuestUser}
               editorMode={editorMode}
-              isDeviceSmallerThanMd={isDeviceSmallerThanMd}
             />
           )}
         </div>
@@ -336,8 +336,8 @@ const GrowiContextualSubNavigation = (props) => {
       </>
     );
   }, [
-    currentPage, shareLinkId, editorMode, mutateEditorMode, isCompactMode,
-    isLinkSharingDisabled, isDeviceSmallerThanMd, isGuestUser, isSharedUser, currentUser,
+    pageId, revisionId, editorMode, mutateEditorMode, isCompactMode,
+    isLinkSharingDisabled, isGuestUser, isSharedUser, currentUser,
     isViewMode, isAbleToShowPageEditorModeManager, isAbleToShowPageManagement,
     duplicateItemClickedHandler, renameItemClickedHandler, deleteItemClickedHandler,
     templateMenuItemClickHandler, isPageTemplateModalShown,
@@ -364,18 +364,5 @@ const GrowiContextualSubNavigation = (props) => {
   );
 };
 
-/**
- * Wrapper component for using unstated
- */
-const GrowiContextualSubNavigationWrapper = withUnstatedContainers(GrowiContextualSubNavigation, [EditorContainer, PageContainer]);
-
-
-GrowiContextualSubNavigation.propTypes = {
-  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-
-  isCompactMode: PropTypes.bool,
-  isLinkSharingDisabled: PropTypes.bool,
-};
 
-export default GrowiContextualSubNavigationWrapper;
+export default GrowiContextualSubNavigation;

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -0,0 +1,199 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+// https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
+// workaround to use '&' in global scope
+.grw-subnav {
+  :global {
+    min-height: var.$grw-subnav-min-height;
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    @include bs.media-breakpoint-up(md) {
+      min-height: var.$grw-subnav-min-height-md;
+    }
+
+    .grw-drawer-toggler {
+      width: 50px;
+      height: 50px;
+      font-size: 24px;
+    }
+
+    h1 {
+      @include mixins.variable-font-size(32px);
+      line-height: 1.4em;
+    }
+
+    .grw-taglabels-container {
+      margin-bottom: 0.5rem;
+    }
+
+    .grw-page-path-nav {
+      .separator {
+        margin-right: 0.2em;
+        margin-left: 0.2em;
+      }
+    }
+
+    .btn-subscribe {
+      height: 40px;
+      font-size: 20px;
+    }
+
+    .btn-like,
+    .btn-bookmark,
+    .btn-seen-user {
+      height: 40px;
+      padding-right: 6px;
+      padding-left: 8px;
+      font-size: 20px;
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .total-likes,
+    .total-bookmarks {
+      display: flex;
+      align-items: flex-end;
+      padding-right: 8px;
+      padding-left: 6px;
+      font-size: 14px;
+      font-weight: bs.$font-weight-bold;
+    }
+    .seen-user-count {
+      padding-right: 6px;
+      padding-left: 6px;
+      font-size: 14px;
+      font-weight: bs.$font-weight-bold;
+      vertical-align: bottom;
+    }
+
+    .btn-page-item-control {
+      height: 40px;
+      font-size: 16px;
+    }
+
+    ul.authors {
+      li {
+        font-size: 12px;
+        list-style: none;
+      }
+
+      .text-date {
+        font-size: 11px;
+      }
+
+      .picture {
+        width: 22px;
+        height: 22px;
+        border: 1px solid bs.$gray-300;
+
+        &.picture-xs {
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      .user-list-popover {
+        max-width: 200px;
+
+        .user-list-content {
+          direction: rtl;
+
+          .liker-user-count,
+          .seen-user-count {
+            font-size: 12px;
+            font-weight: bolder;
+          }
+        }
+        .cls-1 {
+          isolation: isolate;
+        }
+      }
+    }
+  }
+
+  &:global {
+    &:hover {
+      .btn-copy,
+      .btn-edit,
+      .btn-edit-tags {
+        // change button opacity
+        opacity: unset;
+      }
+    }
+
+    /*
+     * Compact Mode
+     */
+    &.grw-subnav-compact {
+      min-height: 70px;
+
+      @include bs.media-breakpoint-up(md) {
+        min-height: 90px;
+      }
+
+      .btn-like,
+      .btn-bookmark,
+      .btn-subscribe {
+        width: 32px;
+        height: 32px;
+        padding: 4px;
+        font-size: 16px;
+      }
+      .btn-seen-user {
+        width: 48px;
+        height: 32px;
+        padding: 4px;
+        font-size: 16px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .btn-page-item-control {
+        width: 32px;
+        height: 32px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+/*
+ * shadow
+ */
+.grw-subnav-append-shadow-container {
+  .grw-subnav {
+    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
+  }
+}
+
+/*
+ * Fixed ver
+ */
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+.grw-subnav-fixed-container {
+  top: var.$grw-navbar-border-width;
+  z-index: bs.$zindex-sticky - 5;
+}
+
+/*
+ * Switching show/hide
+ */
+.grw-subnav-switcher {
+  .grw-subnav-fixed-container {
+    transition: transform 150ms $easeInOutCubic;
+  }
+
+  &.grw-subnav-switcher-hidden {
+    .grw-subnav-fixed-container {
+      transition: unset;
+      transform: translateY(-100%);
+    }
+  }
+}

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { IPageHasId } from '~/interfaces/page';
 import { IUser } from '~/interfaces/user';
 import {
@@ -7,11 +9,13 @@ import {
 } from '~/stores/ui';
 
 import TagLabels from '../Page/TagLabels';
-import PagePathNav from '../PagePathNav';
+// import PagePathNav from '../PagePathNav';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
+import styles from './GrowiSubNavigation.module.scss';
+
 
 type Props = {
   page: Partial<IPageHasId>,
@@ -32,6 +36,9 @@ type Props = {
 }
 
 export const GrowiSubNavigation = (props: Props): JSX.Element => {
+
+  const PagePathNav = dynamic(() => import('../PagePathNav'), { ssr: false });
+
   const { data: editorMode } = useEditorMode();
 
   const {
@@ -57,7 +64,7 @@ export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
   return (
     <div className={
-      'grw-subnav d-flex align-items-center justify-content-between'
+      `grw-subnav ${styles['grw-subnav']} d-flex align-items-center justify-content-between`
       + ` ${additionalClasses.join(' ')}`
       + ` ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}
     >

packages/app/src/components/Navbar/PageEditorModeManager.jsx

@@ -4,11 +4,10 @@ import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 
-import AppContainer from '~/client/services/AppContainer';
-import { useCurrentUser } from '~/stores/context';
+import { useCurrentUser, useHackmdUri } from '~/stores/context';
 import { EditorMode, useIsDeviceSmallerThanMd } from '~/stores/ui';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
+import styles from './PageEditorModeManager.module.scss';
 
 /* eslint-disable react/prop-types */
 const PageEditorModeButtonWrapper = React.memo(({
@@ -42,16 +41,16 @@ PageEditorModeButtonWrapper.displayName = 'PageEditorModeButtonWrapper';
 
 function PageEditorModeManager(props) {
   const {
-    appContainer,
     editorMode, onPageEditorModeButtonClicked, isBtnDisabled,
   } = props;
 
   const { t } = useTranslation();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
   const { data: currentUser } = useCurrentUser();
+  const { data: hackmdUri } = useHackmdUri();
 
-  const isAdmin = currentUser?.isAdmin;
-  const isHackmdEnabled = appContainer.config.env.HACKMD_URI != null;
+  const isAdmin = currentUser?.admin;
+  const isHackmdEnabled = hackmdUri != null;
   const showHackmdBtn = isHackmdEnabled || isAdmin;
 
   const pageEditorModeButtonClickedHandler = useCallback((viewType) => {
@@ -66,7 +65,7 @@ function PageEditorModeManager(props) {
   return (
     <>
       <div
-        className="btn-group grw-page-editor-mode-manager"
+        className={`btn-group grw-page-editor-mode-manager ${styles['grw-page-editor-mode-manager']}`}
         role="group"
         aria-label="page-editor-mode-manager"
         id="grw-page-editor-mode-manager"
@@ -121,8 +120,6 @@ function PageEditorModeManager(props) {
 }
 
 PageEditorModeManager.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
   onPageEditorModeButtonClicked: PropTypes.func,
   isBtnDisabled: PropTypes.bool,
   editorMode: PropTypes.string,
@@ -132,9 +129,4 @@ PageEditorModeManager.defaultProps = {
   isBtnDisabled: false,
 };
 
-/**
- * Wrapper component for using unstated
- */
-const PageEditorModeManagerWrapper = withUnstatedContainers(PageEditorModeManager, [AppContainer]);
-
-export default PageEditorModeManagerWrapper;
+export default PageEditorModeManager;

packages/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -0,0 +1,34 @@
+// @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+.grw-page-editor-mode-manager :global {
+  .btn {
+    width: 70px;
+    white-space: nowrap;
+
+    @include mixins.border-vertical('before', 70%, 1, true);
+
+    &.view-button,
+    &.edit-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
+      }
+    }
+    &.hackmd-button {
+      line-height: 1.2rem;
+      .grw-page-editor-mode-manager-icon {
+        @include bs.media-breakpoint-down(sm) {
+          font-size: 1.2rem;
+        }
+      }
+      .grw-page-editor-mode-manager-label {
+        font-size: 12px;
+        letter-spacing: -0.6px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.btn-subscribe {
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$success, rgba(lighten(bs.$success, 10%), 0.15), rgba(lighten(bs.$success, 10%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$success, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+}

packages/app/src/components/SubscribeButton.tsx

@@ -5,6 +5,8 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import { SubscriptionStatusType } from '~/interfaces/subscription';
 
+import styles from './SubscribeButton.module.scss';
+
 
 type Props = {
   isGuestUser?: boolean,
@@ -35,7 +37,7 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         type="button"
         id="subscribe-button"
         onClick={props.onClick}
-        className={`shadow-none btn btn-subscribe border-0
+        className={`shadow-none btn ${styles['btn-subscribe']} border-0
           ${isSubscribing ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isSubscribing ? 'fa-bell' : 'fa-bell-slash-o'}`}></i>

packages/app/src/pages/[[...path]].page.tsx

@@ -40,6 +40,7 @@ import loggerFactory from '~/utils/logger';
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';
 // import GrowiSubNavigationSwitcher from '../client/js/components/Navbar/GrowiSubNavigationSwitcher';
 import { BasicLayout } from '../components/BasicLayout';
+import GrowiContextualSubNavigation from '../components/Navbar/GrowiContextualSubNavigation';
 import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 
 // import { serializeUserSecurely } from '../server/models/serializers/user-serializer';
@@ -49,10 +50,10 @@ import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 import {
   useCurrentUser, useCurrentPagePath,
   useOwnerOfCurrentPage, useIsLatestRevision,
-  useIsForbidden, useIsNotFound, useIsNotCreatable, useIsTrashPage, useShared, useShareLinkId, useIsSharedUser, useIsAbleToDeleteCompletely,
-  useAppTitle, useSiteUrl, useConfidential, useIsEnabledStaleNotification,
-  useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup,
-  useAclEnabled, useIsAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri,
+  useIsForbidden, useIsNotFound, useIsTrashPage, useShared, useShareLinkId, useIsSharedUser, useIsAbleToDeleteCompletely,
+  useAppTitle, useSiteUrl, useConfidential, useIsEnabledStaleNotification, useIsIdenticalPath,
+  useIsSearchServiceConfigured, useIsSearchServiceReachable, useIsMailerSetup, useDisableLinkSharing,
+  useAclEnabled, useIsAclEnabled, useHasSlackConfig, useDrawioUri, useHackmdUri, useIsUserPage, useIsNotCreatable,
   useNoCdn, useEditorConfig, useCsrfToken, useIsSearchScopeChildrenAsDefault, useCurrentPageId, useCurrentPathname,
   useIsSlackConfigured, useGrowiRendererConfig, useIsBlinkedHeaderAtBoot,
 } from '../stores/context';
@@ -66,7 +67,7 @@ import {
 
 const logger = loggerFactory('growi:pages:all');
 const {
-  isPermalink: _isPermalink, isUsersHomePage, isTrashPage: _isTrashPage, isCreatablePage,
+  isPermalink: _isPermalink, isUsersHomePage, isTrashPage: _isTrashPage, isUserPage, isCreatablePage,
 } = pagePathUtils;
 const { removeHeadingSlash } = pathUtils;
 
@@ -103,7 +104,8 @@ type Props = CommonProps & {
   isAclEnabled: boolean,
   // hasSlackConfig: boolean,
   // drawioUri: string,
-  // hackmdUri: string,
+  hackmdUri: string,
+  // mathJax: string,
   // noCdn: string,
   // highlightJsStyle: string,
   // isAllReplyShown: boolean,
@@ -114,6 +116,7 @@ type Props = CommonProps & {
   // isEnabledLinebreaksInComments: boolean,
   // adminPreferredIndentSize: number,
   // isIndentSizeForced: boolean,
+  disableLinkSharing: boolean,
 
   rendererSettings: RendererSettings,
   growiRendererConfig: GrowiRendererConfig,
@@ -162,6 +165,8 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // useIsTrashPage(_isTrashPage(props.currentPagePath));
   // useShared();
   // useShareLinkId(props.shareLinkId);
+  useIsSharedUser(props.currentUser == null); // '/shared' is not routed this page
+  useIsIdenticalPath(false); // TODO: need to initialize from props
   // useIsAbleToDeleteCompletely(props.isAbleToDeleteCompletely);
   useIsSharedUser(false); // this page cann't be routed for '/share'
   useIsEnabledStaleNotification(props.isEnabledStaleNotification);
@@ -176,9 +181,11 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   useIsAclEnabled(props.isAclEnabled);
   // useHasSlackConfig(props.hasSlackConfig);
   // useDrawioUri(props.drawioUri);
-  // useHackmdUri(props.hackmdUri);
+  useHackmdUri(props.hackmdUri);
+  // useMathJax(props.mathJax);
   // useNoCdn(props.noCdn);
   // useIndentSize(props.adminPreferredIndentSize);
+  useDisableLinkSharing(props.disableLinkSharing);
 
   useRendererSettings(props.rendererSettings);
   useGrowiRendererConfig(props.growiRendererConfig);
@@ -197,6 +204,8 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // useSWRxPage(pageWithMeta?.data._id);
   useSWRxPageInfo(pageWithMeta?.data._id, undefined, pageWithMeta?.meta); // store initial data
   useIsTrashPage(_isTrashPage(pageWithMeta?.data.path ?? ''));
+  useIsUserPage(isUserPage(pageWithMeta?.data.path ?? ''));
+  useIsNotCreatable(props.isForbidden || !isCreatablePage(pageWithMeta?.data.path ?? '')); // TODO: need to include props.isIdentical
   useCurrentPagePath(pageWithMeta?.data.path);
   useCurrentPathname(props.currentPathname);
 
@@ -236,8 +245,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
       {/* <BasicLayout title={useCustomTitle(props, t('GROWI'))} className={classNames.join(' ')}> */}
       <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
         <header className="py-0">
-          {/* <GrowiSubNavigation /> */}
-          GrowiSubNavigation
+          <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
         </header>
         <div className="d-edit-none">
           {/* <GrowiSubNavigationSwitcher /> */}
@@ -411,7 +419,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   props.isAclEnabled = aclService.isAclEnabled();
   // props.hasSlackConfig = slackNotificationService.hasSlackConfig();
   // props.drawioUri = configManager.getConfig('crowi', 'app:drawioUri');
-  // props.hackmdUri = configManager.getConfig('crowi', 'app:hackmdUri');
+  props.hackmdUri = configManager.getConfig('crowi', 'app:hackmdUri');
   // props.mathJax = configManager.getConfig('crowi', 'app:mathJax');
   // props.noCdn = configManager.getConfig('crowi', 'app:noCdn');
   // props.highlightJsStyle = configManager.getConfig('crowi', 'customize:highlightJsStyle');
@@ -420,6 +428,7 @@ async function injectServerConfigurations(context: GetServerSidePropsContext, pr
   props.isEnabledStaleNotification = configManager.getConfig('crowi', 'customize:isEnabledStaleNotification');
   // props.isEnabledLinebreaks = configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks');
   // props.isEnabledLinebreaksInComments = configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments');
+  props.disableLinkSharing = configManager.getConfig('crowi', 'security:disableLinkSharing');
   // props.editorConfig = {
   //   upload: {
   //     image: crowi.fileUploadService.getIsUploadable(),

packages/app/src/stores/context.tsx

@@ -118,10 +118,18 @@ export const useShareLinkId = (initialData?: Nullable<string>): SWRResponse<Null
   return useStaticSWR<Nullable<string>, Error>('shareLinkId', initialData);
 };
 
+export const useDisableLinkSharing = (initialData?: Nullable<boolean>): SWRResponse<Nullable<boolean>, Error> => {
+  return useStaticSWR<Nullable<boolean>, Error>('disableLinkSharing', initialData);
+};
+
 export const useRevisionIdHackmdSynced = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('revisionIdHackmdSynced', initialData);
 };
 
+export const useHackmdUri = (initialData?: Nullable<string>): SWRResponse<Nullable<string>, Error> => {
+  return useStaticSWR<Nullable<string>, Error>('hackmdUri', initialData);
+};
+
 export const useLastUpdateUsername = (initialData?: Nullable<any>): SWRResponse<Nullable<any>, Error> => {
   return useStaticSWR<Nullable<any>, Error>('lastUpdateUsername', initialData);
 };

packages/app/src/styles/_subnav.scss

@@ -1,189 +0,0 @@
-.grw-subnav {
-  min-height: $grw-subnav-min-height;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  @include media-breakpoint-up(md) {
-    min-height: $grw-subnav-min-height-md;
-  }
-
-  &:hover {
-    .btn-copy,
-    .btn-edit,
-    .btn-edit-tags {
-      // change button opacity
-      opacity: unset;
-    }
-  }
-
-  .grw-drawer-toggler {
-    width: 50px;
-    height: 50px;
-    font-size: 24px;
-  }
-
-  h1 {
-    @include variable-font-size(32px);
-    line-height: 1.4em;
-  }
-
-  .grw-taglabels-container {
-    margin-bottom: 0.5rem;
-  }
-
-  .grw-page-path-nav {
-    .separator {
-      margin-right: 0.2em;
-      margin-left: 0.2em;
-    }
-  }
-
-  .btn-subscribe {
-    height: 40px;
-    font-size: 20px;
-  }
-
-  .btn-like,
-  .btn-bookmark,
-  .btn-seen-user {
-    height: 40px;
-    padding-right: 6px;
-    padding-left: 8px;
-    font-size: 20px;
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  .total-likes,
-  .total-bookmarks {
-    display: flex;
-    align-items: flex-end;
-    padding-right: 8px;
-    padding-left: 6px;
-    font-size: 14px;
-    font-weight: $font-weight-bold;
-  }
-  .seen-user-count {
-    padding-right: 6px;
-    padding-left: 6px;
-    font-size: 14px;
-    font-weight: $font-weight-bold;
-    vertical-align: bottom;
-  }
-
-  .btn-page-item-control {
-    height: 40px;
-    font-size: 16px;
-  }
-
-  ul.authors {
-    li {
-      font-size: 12px;
-      list-style: none;
-    }
-
-    .text-date {
-      font-size: 11px;
-    }
-
-    .picture {
-      width: 22px;
-      height: 22px;
-      border: 1px solid $gray-300;
-
-      &.picture-xs {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  /*
-   * Compact Mode
-   */
-  &.grw-subnav-compact {
-    min-height: 70px;
-
-    @include media-breakpoint-up(md) {
-      min-height: 90px;
-    }
-
-    .btn-like,
-    .btn-bookmark,
-    .btn-subscribe {
-      width: 32px;
-      height: 32px;
-      padding: 4px;
-      font-size: 16px;
-    }
-    .btn-seen-user {
-      width: 48px;
-      height: 32px;
-      padding: 4px;
-      font-size: 16px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-    .btn-page-item-control {
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-    }
-  }
-}
-
-/*
- * shadow
- */
-.grw-subnav-append-shadow-container {
-  .grw-subnav {
-    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
-  }
-}
-
-/*
- * Fixed ver
- */
-$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
-
-.grw-subnav-fixed-container {
-  top: $grw-navbar-border-width;
-  z-index: $zindex-sticky - 5;
-}
-
-/*
- * Switching show/hide
- */
-.grw-subnav-switcher {
-  .grw-subnav-fixed-container {
-    transition: transform 150ms $easeInOutCubic;
-  }
-
-  &.grw-subnav-switcher-hidden {
-    .grw-subnav-fixed-container {
-      transition: unset;
-      transform: translateY(-100%);
-    }
-  }
-}
-
-.user-list-popover {
-  max-width: 200px;
-
-  .user-list-content {
-    direction: rtl;
-
-    .liker-user-count,
-    .seen-user-count {
-      font-size: 12px;
-      font-weight: bolder;
-    }
-  }
-  .cls-1 {
-    isolation: isolate;
-  }
-}

packages/app/src/styles/_tag.scss

@@ -1,3 +1,5 @@
+@use './bootstrap/init' as bs;
+
 .tags-page {
   .list-tag-count {
     background: rgba(0, 0, 0, 0.08);
@@ -8,7 +10,7 @@
   .grw-tag-label {
     font-size: 12px;
     font-weight: normal;
-    border-radius: $border-radius;
+    border-radius: bs.$border-radius;
   }
 }
 
@@ -18,7 +20,7 @@
   .grw-tag-label {
     font-size: 10px;
     font-weight: normal;
-    border-radius: $border-radius;
+    border-radius: bs.$border-radius;
   }
 }
 

packages/app/src/styles/atoms/_buttons.scss

@@ -1,42 +1,11 @@
-.btn.btn-like {
-  @include button-outline-variant(rgba($secondary, 50%), lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($red, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-}
-
-.btn.btn-bookmark {
-  @include button-outline-variant(rgba($secondary, 50%), $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $orange;
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-}
-
-.btn.btn-subscribe {
-  @include button-outline-variant(rgba($secondary, 50%), $success, rgba(lighten($success, 10%), 0.15), rgba(lighten($success, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten($success, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
-  }
-  width: 44px;
-}
+@use '../bootstrap/init' as bs;
+@use '../mixins';
 
 .btn.btn-seen-user {
   $color-seen-user: #549c79;
 
-  @include 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 button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
+  @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.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;

packages/app/src/styles/molecules/page-editor-mode-manager.scss

@@ -1,29 +0,0 @@
-// @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
-.grw-page-editor-mode-manager .btn {
-  width: 70px;
-  white-space: nowrap;
-
-  @include border-vertical('before', 70%, 1, true);
-
-  &.view-button,
-  &.edit-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include media-breakpoint-down(sm) {
-        font-size: 1.2rem;
-      }
-    }
-  }
-  &.hackmd-button {
-    line-height: 1.2rem;
-    .grw-page-editor-mode-manager-icon {
-      @include media-breakpoint-down(sm) {
-        font-size: 1.2rem;
-      }
-    }
-    .grw-page-editor-mode-manager-label {
-      font-size: 12px;
-      letter-spacing: -0.6px;
-    }
-  }
-}

packages/app/src/styles/style-next.scss

@@ -14,7 +14,7 @@
 @import '~material-icons/iconfont/filled';
 
 // // atoms
-// @import 'atoms/buttons';
+@import 'atoms/buttons';
 // @import 'atoms/code';
 // @import 'atoms/nav';
 // @import 'atoms/pre';
@@ -62,7 +62,7 @@
 // @import 'sidebar';
 // @import 'sidebar-wiki';
 // @import 'subnav';
-// @import 'tag';
+@import 'tag';
 // @import 'toc';
 // @import 'user';
 // @import 'staff_credit';