create EditorNavbar

apps/app/src/components/PageEditor/EditorNavbar/EditingUserList.tsx

@@ -4,16 +4,17 @@ import type { IUserHasId } from '@growi/core';
 import { UserPicture } from '@growi/ui/dist/components';
 import { Popover, PopoverBody } from 'reactstrap';
 
-import UserPictureList from '../Common/UserPictureList';
+import UserPictureList from '../../Common/UserPictureList';
 
-import popoverStyles from './user-list-popover.module.scss';
+import styles from './EditingUserList.module.scss';
+
+const userListPopoverClass = styles['user-list-popover'] ?? '';
 
 type Props = {
-  className: string,
   userList: IUserHasId[]
 }
 
-export const EditingUserList: FC<Props> = ({ className, userList }) => {
+export const EditingUserList: FC<Props> = ({ userList }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
@@ -21,33 +22,36 @@ export const EditingUserList: FC<Props> = ({ className, userList }) => {
   const firstFourUsers = userList.slice(0, 4);
   const remainingUsers = userList.slice(4);
 
+  if (userList.length === 0) {
+    return <></>;
+  }
+
   return (
-    <div className={className}>
-      {userList.length > 0 && (
-        <div className="d-flex justify-content-end">
-          {firstFourUsers.map(user => (
-            <div className="ms-1">
-              <UserPicture
-                user={user}
-                noLink
-                additionalClassName="border border-info"
-              />
-            </div>
-          ))}
-          {remainingUsers.length > 0 && (
-            <div className="ms-1">
-              <button type="button" id="btn-editing-user" className="btn border-0 bg-info-subtle rounded-pill p-0">
-                <span className="fw-bold text-info p-1">+{remainingUsers.length}</span>
-              </button>
-              <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-editing-user" toggle={togglePopover} trigger="legacy">
-                <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
-                  <UserPictureList users={remainingUsers} />
-                </PopoverBody>
-              </Popover>
-            </div>
-          )}
-        </div>
-      )}
+    <div className="d-flex flex-column justify-content-end">
+      <div className="d-flex justify-content-end">
+        {firstFourUsers.map(user => (
+          <div className="ms-1">
+            <UserPicture
+              user={user}
+              noLink
+              additionalClassName="border border-info"
+            />
+          </div>
+        ))}
+
+        {remainingUsers.length > 0 && (
+          <div className="ms-1">
+            <button type="button" id="btn-editing-user" className="btn border-0 bg-info-subtle rounded-pill p-0">
+              <span className="fw-bold text-info p-1">+{remainingUsers.length}</span>
+            </button>
+            <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-editing-user" toggle={togglePopover} trigger="legacy">
+              <PopoverBody className={userListPopoverClass}>
+                <UserPictureList users={remainingUsers} />
+              </PopoverBody>
+            </Popover>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx

@@ -0,0 +1,20 @@
+
+import { PageHeader } from '~/components/PageHeader';
+import { useEditingUsers } from '~/stores/use-editing-users';
+
+import { EditingUserList } from './EditingUserList';
+
+export const EditorNavbar = (): JSX.Element => {
+  const { data: editingUsers } = useEditingUsers();
+
+  return (
+    <div className="px-4 py-2">
+      <div className="d-flex justify-content-between">
+        <PageHeader />
+        <EditingUserList
+          userList={editingUsers?.userList ?? []}
+        />
+      </div>
+    </div>
+  );
+};

apps/app/src/components/PageEditor/EditorNavbar/index.ts

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

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -6,7 +6,7 @@ import React, {
 import type EventEmitter from 'events';
 import nodePath from 'path';
 
-import type { IPageHasId, IUserHasId } from '@growi/core';
+import type { IPageHasId } from '@growi/core';
 import { useGlobalSocket } from '@growi/core/dist/swr';
 import { pathUtils } from '@growi/core/dist/utils';
 import {
@@ -57,16 +57,15 @@ import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
-import { PageHeader } from '../PageHeader/PageHeader';
-
-// import { ConflictDiffModal } from './PageEditor/ConflictDiffModal';
-// import { ConflictDiffModal } from './ConflictDiffModal';
+import { EditorNavbar } from './EditorNavbar';
 import EditorNavbarBottom from './EditorNavbarBottom';
 import Preview from './Preview';
 import { scrollEditor, scrollPreview } from './ScrollSyncHelper';
 
 import '@growi/editor/dist/style.css';
 
+// import { ConflictDiffModal } from './PageEditor/ConflictDiffModal';
+// import { ConflictDiffModal } from './ConflictDiffModal';
 
 const logger = loggerFactory('growi:PageEditor');
 
@@ -433,9 +432,9 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   return (
     <div data-testid="page-editor" id="page-editor" className={`flex-expand-vert ${props.visibility ? '' : 'd-none'}`}>
-      <div className="px-4 py-2">
-        <PageHeader />
-      </div>
+
+      <EditorNavbar />
+
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
         <div className="page-editor-editor-container flex-expand-vert">
           <CodeMirrorEditorMain
@@ -477,7 +476,9 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         />
         */}
       </div>
+
       <EditorNavbarBottom />
+
     </div>
   );
 });

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

@@ -1,11 +1,7 @@
 import type { FC } from 'react';
 
-import { DevidedPagePath } from '@growi/core/dist/models';
-
 import { useSWRxCurrentPage } from '~/stores/page';
-import { useEditingUsers } from '~/stores/use-editing-users';
 
-import { EditingUserList } from './EditingUserList';
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
 
@@ -15,14 +11,11 @@ const moduleClass = styles['page-header'] ?? '';
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: editingUsers } = useEditingUsers();
 
   if (currentPage == null) {
     return <></>;
   }
 
-  const dPagePath = new DevidedPagePath(currentPage.path, true);
-
   return (
     <div className={moduleClass}>
       <PagePathHeader
@@ -33,10 +26,6 @@ export const PageHeader: FC = () => {
           className="col"
           currentPage={currentPage}
         />
-        <EditingUserList
-          className={`${dPagePath.isRoot ? 'mt-1' : 'col mt-2'}`}
-          userList={editingUsers?.userList ?? []}
-        />
       </div>
     </div>
   );

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

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