support activeUsersCount props

packages/app/src/styles/_page_list.scss

@@ -48,6 +48,18 @@ body .page-list {
       i {
         margin-right: 2px;
       }
+
+      .seen-users-count {
+        &.strength-1 {
+          font-weight: bold;
+        }
+        &.strength-2 {
+          font-weight: normal;
+        }
+        &.strength-3 {
+          opacity: 0.6;
+        }
+      }
     }
 
     // after second level indent

packages/plugin-lsx/src/client/js/components/LsxPageList/LsxPage.jsx

@@ -1,8 +1,8 @@
+import React from 'react';
 
 import { pathUtils } from '@growi/core';
 import { PageListMeta } from '@growi/ui';
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { LsxContext } from '../../util/LsxContext';
 import { PageNode } from '../PageNode';
@@ -79,6 +79,7 @@ export class LsxPage extends React.Component {
 
   render() {
     const pageNode = this.props.pageNode;
+    const { activeUsersCount } = this.props.lsxContext;
 
     // create PagePath element
     let pagePathNode = <PagePathWrapper pagePath={pageNode.pagePath} isExists={this.state.isExists} />;
@@ -87,7 +88,7 @@ export class LsxPage extends React.Component {
     }
 
     // create PageListMeta element
-    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} /> : '';
+    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} activeUsersCount={activeUsersCount} /> : '';
 
     return (
       <li className="page-list-li">

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import assert from 'assert';
+
 import { IPageHasId } from '@growi/app/src/interfaces/page';
 import { templateChecker, pagePathUtils } from '@growi/core';
 
@@ -8,16 +10,57 @@ import { FootstampIcon } from '../SearchPage/FootstampIcon';
 const { isTopPage } = pagePathUtils;
 const { checkTemplatePath } = templateChecker;
 
+
+const MIN_OPACITY_LEVEL = -3;
+
+type SeenUsersCountProps = {
+  count: number,
+  activeUsersCount?: number,
+  shouldSpaceOutIcon?: boolean,
+}
+
+const SeenUsersCount = (props: SeenUsersCountProps): JSX.Element => {
+
+  const { count, shouldSpaceOutIcon, activeUsersCount } = props;
+
+  if (count === 0) {
+    return <></>;
+  }
+
+  const strengthLevel = Math.log(count / (activeUsersCount ?? count)); // Max: 0
+
+  if (strengthLevel <= MIN_OPACITY_LEVEL) {
+    return <></>;
+  }
+
+  assert(strengthLevel > MIN_OPACITY_LEVEL); // [0, MIN_OPACITY_LEVEL)
+
+  let strengthClass = '';
+  if (strengthLevel < 0) {
+    strengthClass = `strength-${Math.ceil(strengthLevel * -1)}`; // opacity-{0, 1, 2, 3}
+  }
+
+  return (
+    <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-3' : ''} ${strengthClass}`}>
+      <i className="footstamp-icon"><FootstampIcon /></i>
+      {count}
+    </span>
+  );
+
+};
+
+
 type PageListMetaProps = {
   page: IPageHasId,
   likerCount?: number,
   bookmarkCount?: number,
   shouldSpaceOutIcon?: boolean,
+  activeUsersCount?: number,
 }
 
 export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) => {
 
-  const { page, shouldSpaceOutIcon } = props;
+  const { page, shouldSpaceOutIcon, activeUsersCount } = props;
 
   // top check
   let topLabel;
@@ -46,16 +89,6 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
     locked = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-lock" /></span>;
   }
 
-  let seenUserCount;
-  if (page.seenUsers.length > 0) {
-    seenUserCount = (
-      <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}>
-        <i className="footstamp-icon"><FootstampIcon /></i>
-        {page.seenUsers.length}
-      </span>
-    );
-  }
-
   let bookmarkCount;
   if (props.bookmarkCount != null && props.bookmarkCount > 0) {
     bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
@@ -65,7 +98,7 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
     <span className="page-list-meta">
       {topLabel}
       {templateLabel}
-      {seenUserCount}
+      <SeenUsersCount count={page.seenUsers.length} activeUsersCount={activeUsersCount} />
       {commentCount}
       {likerCount}
       {locked}