add user list to page header

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

@@ -1,30 +1,47 @@
 import type { FC } from 'react';
 
+import type { IUser } from '@growi/core';
+import { DevidedPagePath } from '@growi/core/dist/models';
+
 import { useSWRxCurrentPage } from '~/stores/page';
 
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
+import { UserList } from './UserList';
 
 import styles from './PageHeader.module.scss';
 
 const moduleClass = styles['page-header'] ?? '';
 
-export const PageHeader: FC = () => {
+type Props = {
+  userList: IUser[]
+}
+
+export const PageHeader: FC<Props> = (props) => {
+  const { userList } = props;
   const { data: currentPage } = useSWRxCurrentPage();
 
   if (currentPage == null) {
     return <></>;
   }
 
+  const dPagePath = new DevidedPagePath(currentPage.path, true);
+
   return (
     <div className={moduleClass}>
       <PagePathHeader
         currentPage={currentPage}
       />
-      <PageTitleHeader
-        className="mt-2"
-        currentPage={currentPage}
-      />
+      <div className="row mt-2">
+        <PageTitleHeader
+          className="col"
+          currentPage={currentPage}
+        />
+        <UserList
+          className={`z-2 ${dPagePath.isRoot ? '' : 'col mt-2'}`}
+          userList={userList}
+        />
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+
+import type { IUser } from '@growi/core';
+import { UserPicture } from '@growi/ui/dist/components';
+
+type Props = {
+  className: string,
+  userList: IUser[]
+}
+
+export const UserList: FC<Props> = (props) => {
+  const { className, userList } = props;
+  return (
+    <div className={className}>
+      {userList.length > 0 && (
+        <div className="d-flex justify-content-end">
+          {userList.map((user) => {
+            return (
+              <div className="ms-1">
+                <UserPicture
+                  user={user}
+                  noLink
+                  additionalClassName="border border-info rounded-circle"
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -328,7 +328,8 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root justify-content-between">
-        <nav className="sticky-top">
+        {/* z-1 for UserIconList */}
+        <nav className="sticky-top z-1">
           <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
         </nav>
 

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

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import type { IUser, IUserHasId } from '@growi/core';
 import type { GetServerSideProps, GetServerSidePropsContext } from 'next';
@@ -68,7 +69,8 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root">
-        <nav className="sticky-top">
+        {/* z-1 for UserIconList */}
+        <nav className="sticky-top z-1">
           TODO: implement navigation for /trash
         </nav>
 

packages/ui/src/components/UserPicture.tsx

@@ -74,18 +74,22 @@ type Props = {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   noLink?: boolean,
   noTooltip?: boolean,
+  additionalClassName?: string
 };
 
 export const UserPicture = memo((props: Props): JSX.Element => {
 
   const {
-    user, size, noLink, noTooltip,
+    user, size, noLink, noTooltip, additionalClassName,
   } = props;
 
   const classNames = ['rounded-circle', 'picture'];
   if (size != null) {
     classNames.push(`picture-${size}`);
   }
+  if (additionalClassName != null) {
+    classNames.push(additionalClassName);
+  }
   const className = classNames.join(' ');
 
   if (user == null || !isUserObj(user)) {