refactor layout

apps/app/src/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx

@@ -12,9 +12,7 @@ export const CountBadgeForPageTreeItem = (props: TreeItemToolProps): JSX.Element
   return (
     <>
       {descendantCount > 0 && (
-        <div className="d-hover-none">
-          <CountBadge count={descendantCount} />
-        </div>
+        <CountBadge count={descendantCount} />
       )}
     </>
   );

apps/app/src/components/Sidebar/PageTreeItem/CreatingNewPageSpinner.tsx

@@ -0,0 +1,13 @@
+import { LoadingSpinner } from '@growi/ui/dist/components';
+
+export const CreatingNewPageSpinner = ({ show }: { show?: boolean }): JSX.Element => {
+  if (!show) {
+    return <></>;
+  }
+
+  return (
+    <div className="text-center opacity-50 py-2">
+      <LoadingSpinner className="mr-1" />
+    </div>
+  );
+};

apps/app/src/components/Sidebar/PageTreeItem/Ellipsis.tsx

@@ -181,7 +181,7 @@ export const Ellipsis: FC<TreeItemToolProps> = (props) => {
               operationProcessData={page.processData}
             >
               {/* pass the color property to reactstrap dropdownToggle props. https://6-4-0--reactstrap.netlify.app/components/dropdowns/  */}
-              <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control d-none d-hover-block p-0 mr-1">
+              <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 mr-1">
                 <span id="option-button-in-page-tree" className="material-symbols-outlined p-1">more_vert</span>
               </DropdownToggle>
             </PageItemControl>

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../TreeItem';
 
 import { CountBadgeForPageTreeItem } from './CountBadgeForPageTreeItem';
+import { CreatingNewPageSpinner } from './CreatingNewPageSpinner';
 import { Ellipsis } from './Ellipsis';
 
 import styles from './PageTreeItem.module.scss';
@@ -170,7 +171,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
 
   const mainClassName = `${isOver ? 'grw-pagetree-is-over' : ''} ${shouldHide ? 'd-none' : ''}`;
 
-  const { Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
+  const { isProcessingSubmission, Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
 
   return (
     <SimpleItem
@@ -187,8 +188,10 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       itemRef={itemRef}
       itemClass={PageTreeItem}
       mainClassName={mainClassName}
-      customEndComponents={[CountBadgeForPageTreeItem, Ellipsis, NewPageCreateButton]}
+      customEndComponents={[CountBadgeForPageTreeItem]}
+      customHoveredEndComponents={[Ellipsis, NewPageCreateButton]}
       customNextComponents={[NewPageInput]}
+      customNextToChildrenComponents={[() => <CreatingNewPageSpinner show={isProcessingSubmission} />]}
     />
   );
 };

apps/app/src/components/TreeItem/NewPageInput/NewPageCreateButton.tsx

@@ -24,7 +24,7 @@ export const NewPageCreateButton: FC<NewPageCreateButtonProps> = (props) => {
             <button
               id="page-create-button-in-page-tree"
               type="button"
-              className="border-0 rounded btn btn-page-item-control p-0 d-none d-hover-block"
+              className="border-0 rounded btn btn-page-item-control p-0"
               onClick={onClick}
             >
               <span className="material-symbols-outlined p-0">add_circle</span>

apps/app/src/components/TreeItem/SimpleItem.module.scss

@@ -6,8 +6,8 @@
         .d-hover-none {
           display: none !important;
         }
-        .d-hover-block {
-          display: block !important;
+        .d-hover-flex {
+          display: flex !important;
         }
       }
     }

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -6,7 +6,6 @@ import React, {
 import nodePath from 'path';
 
 import type { Nullable } from '@growi/core';
-import { LoadingSpinner } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
@@ -16,7 +15,6 @@ import { usePageTreeDescCountMap } from '~/stores/ui';
 import { shouldRecoverPagePaths } from '~/utils/page-operation';
 
 import { ItemNode } from './ItemNode';
-import { useNewPageInput } from './NewPageInput';
 import type { TreeItemProps, TreeItemToolProps } from './interfaces';
 
 
@@ -91,8 +89,6 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
 
   const { page, children } = itemNode;
 
-  const { isProcessingSubmission } = useNewPageInput();
-
   const [currentChildren, setCurrentChildren] = useState(children);
   const [isOpen, setIsOpen] = useState(_isOpen);
 
@@ -154,8 +150,6 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
 
   const ItemClassFixed = itemClass ?? SimpleItem;
 
-  const EndComponents = props.customEndComponents;
-
   const baseProps: Omit<TreeItemProps, 'itemNode'> = {
     isEnableActions,
     isReadOnlyUser,
@@ -172,7 +166,11 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
     itemNode,
   };
 
-  const CustomNextComponents = props.customNextComponents;
+  const EndComponents = props.customEndComponents;
+  const HoveredEndComponents = props.customHoveredEndComponents;
+  const NextComponents = props.customNextComponents;
+  const NextToChildrenComponents = props.customNextToChildrenComponents;
+  const AlternativeComponents = props.customAlternativeComponents;
 
   if (!isWipPageShown && page.wip) {
     return <></>;
@@ -208,16 +206,25 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
 
         <SimpleItemContent page={page} />
 
-        {EndComponents?.map((EndComponent, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <EndComponent key={index} {...toolProps} />
-        ))}
+        <div className="d-hover-none">
+          {EndComponents?.map((EndComponent, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <EndComponent key={index} {...toolProps} />
+          ))}
+        </div>
+
+        <div className="d-none d-hover-flex">
+          {HoveredEndComponents?.map((HoveredEndContent, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <HoveredEndContent key={index} {...toolProps} />
+          ))}
+        </div>
 
       </li>
 
-      {CustomNextComponents?.map((UnderItemContent, index) => (
+      {NextComponents?.map((NextContent, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <UnderItemContent key={index} {...toolProps} />
+        <NextContent key={index} {...toolProps} />
       ))}
 
       {
@@ -233,11 +240,12 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
           return (
             <div key={node.page._id} className="grw-pagetree-item-children">
               <ItemClassFixed {...itemProps} />
-              {isProcessingSubmission && (currentChildren.length - 1 === index) && (
-                <div className="text-muted text-center">
-                  <LoadingSpinner className="mr-1" />
-                </div>
-              )}
+
+              {NextToChildrenComponents?.map((NextToChildrenContent, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <NextToChildrenContent key={index} {...toolProps} />
+              ))}
+
             </div>
           );
         })

apps/app/src/components/TreeItem/interfaces/index.ts

@@ -28,6 +28,9 @@ export type TreeItemProps = TreeItemBaseProps & {
   itemClass?: React.FunctionComponent<TreeItemProps>,
   mainClassName?: string,
   customEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
+  customHoveredEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customNextComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
+  customNextToChildrenComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
+  customAlternativeComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   onClick?(page: IPageForItem): void,
 };