update userpage

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

@@ -0,0 +1,6 @@
+.grw-icon-container-recently-created :global {
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}

packages/app/src/components/ContentLinkButtons.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
+import styles from '~/components/ContentLinkButtons.module.scss';
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { usePageUser } from '~/stores/context';
 
 
 const WIKI_HEADER_LINK = 120;
 
-
-const ContentLinkButtons = (): JSX.Element => {
+export const ContentLinkButtons = (): JSX.Element => {
 
   const { data: pageUser } = usePageUser();
 
@@ -45,13 +45,13 @@ const ContentLinkButtons = (): JSX.Element => {
         className="btn btn-outline-secondary btn-sm px-3"
         onClick={() => smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
       >
-        <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
+        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created mr-2`}><RecentlyCreatedIcon /></i>
         <span>Recently Created</span>
       </button>
     );
   }, [getRecentlyCreatedListHeaderDom]);
 
-  if (pageUser == null) {
+  if (pageUser == null || pageUser.name === '') {
     return <></>;
   }
 
@@ -61,7 +61,4 @@ const ContentLinkButtons = (): JSX.Element => {
       <RecentlyCreatedLinkButton />
     </div>
   );
-
 };
-
-export default ContentLinkButtons;

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
 
 // import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
 import {
-  useCurrentPagePath, useIsSharedUser, useIsEditable, useIsUserPage, usePageUser, useShareLinkId, useIsNotFound,
+  useCurrentPagePath, useIsSharedUser, useIsEditable, useIsUserPage, useShareLinkId, useIsNotFound,
 } from '~/stores/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
@@ -17,8 +17,6 @@ import CustomTabContent from '../CustomNavigation/CustomTabContent';
 import PageListIcon from '../Icons/PageListIcon';
 import { Page } from '../Page';
 import TableOfContents from '../TableOfContents';
-import { UserInfoProps } from '../User/UserInfo';
-
 
 import styles from './DisplaySwitcher.module.scss';
 
@@ -30,9 +28,9 @@ const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
 const PageEditorByHackmd = dynamic(() => import('../PageEditorByHackmd').then(mod => mod.PageEditorByHackmd), { ssr: false });
 const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
 const HashChanged = dynamic(() => import('../EventListeneres/HashChanged'), { ssr: false });
-const ContentLinkButtons = dynamic(() => import('../ContentLinkButtons'), { ssr: false });
+const ContentLinkButtons = dynamic(() => import('../ContentLinkButtons').then(mod => mod.ContentLinkButtons), { ssr: false });
 const NotFoundPage = dynamic(() => import('../NotFoundPage'), { ssr: false });
-const UserInfo = dynamic<UserInfoProps>(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
+const UserInfo = dynamic(() => import('../User/UserInfo').then(mod => mod.UserInfo), { ssr: false });
 
 
 const PageView = React.memo((): JSX.Element => {
@@ -42,7 +40,6 @@ const PageView = React.memo((): JSX.Element => {
   const { data: isSharedUser } = useIsSharedUser();
   const { data: shareLinkId } = useShareLinkId();
   const { data: isUserPage } = useIsUserPage();
-  const { data: pageUser } = usePageUser();
   const { data: isNotFound } = useIsNotFound();
   const { data: currentPage } = useSWRxCurrentPage(shareLinkId ?? undefined);
   const { open: openDescendantPageListModal } = useDescendantsPageListModal();
@@ -53,7 +50,7 @@ const PageView = React.memo((): JSX.Element => {
     <div className="d-flex flex-column flex-lg-row">
 
       <div className="flex-grow-1 flex-basis-0 mw-0">
-        { isUserPage && pageUser != null && <UserInfo pageUser={pageUser} />}
+        { isUserPage && <UserInfo /> }
         { !isNotFound && <Page /> }
         { isNotFound && <NotFoundPage /> }
       </div>
@@ -98,7 +95,7 @@ const PageView = React.memo((): JSX.Element => {
 
             <div className="d-none d-lg-block">
               <TableOfContents />
-              <ContentLinkButtons />
+              { isUserPage && <ContentLinkButtons /> }
             </div>
 
           </div>

packages/app/src/components/User/UserInfo.tsx

@@ -2,20 +2,16 @@ import React from 'react';
 
 import { UserPicture } from '@growi/ui';
 
-import { IUserHasId } from '~/interfaces/user';
+import { usePageUser } from '~/stores/context';
 
 import styles from './UserInfo.module.scss';
 
-export type UserInfoProps = {
-  pageUser: IUserHasId,
-}
+export const UserInfo = (): JSX.Element => {
 
-export const UserInfo = (props: UserInfoProps): JSX.Element => {
-
-  const { pageUser } = props;
+  const { data: pageUser } = usePageUser();
 
   // Do not display when the user does not exist
-  if (pageUser == null) {
+  if (pageUser == null || pageUser.name === '') {
     return <></>;
   }