apply user list popover

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

@@ -0,0 +1,53 @@
+import { type FC, useState } from 'react';
+
+import type { IUserHasId } from '@growi/core';
+import { UserPicture } from '@growi/ui/dist/components';
+import { Popover, PopoverBody } from 'reactstrap';
+
+import UserPictureList from '../Common/UserPictureList';
+
+import popoverStyles from '../PageControls/user-list-popover.module.scss';
+
+type Props = {
+  className: string,
+  userList: IUserHasId[]
+}
+
+export const EditingUserList: FC<Props> = ({ className, userList }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
+
+  const firstFourUsers = userList.slice(0, 4);
+  const remainingUsers = userList.slice(4);
+
+  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 btn-sm border-0 p-0">
+                <span className="material-symbols-outlined p-0">group</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>
+  );
+};

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

@@ -5,9 +5,9 @@ import { DevidedPagePath } from '@growi/core/dist/models';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 
+import { EditingUserList } from './EditingUserList';
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
-import { UserList } from './UserList';
 
 import styles from './PageHeader.module.scss';
 
@@ -37,7 +37,7 @@ export const PageHeader: FC<Props> = (props) => {
           className="col"
           currentPage={currentPage}
         />
-        <UserList
+        <EditingUserList
           className={`z-2 ${dPagePath.isRoot ? '' : 'col mt-2'}`}
           userList={userList}
         />

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

@@ -1,32 +0,0 @@
-import type { FC } from 'react';
-
-import type { IUserHasId } from '@growi/core';
-import { UserPicture } from '@growi/ui/dist/components';
-
-type Props = {
-  className: string,
-  userList: IUserHasId[]
-}
-
-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>
-  );
-};