tidy up className and itemLevel

apps/app/src/components/PageSelectModal/TreeItemForModal.tsx

@@ -19,6 +19,7 @@ export const TreeItemForModal: FC<PageTreeItemProps> = (props) => {
     <TreeItemLayout
       key={props.key}
       targetPathOrId={props.targetPathOrId}
+      itemLevel={props.itemLevel}
       itemNode={props.itemNode}
       isOpen={isOpen}
       isEnableActions={props.isEnableActions}
@@ -26,7 +27,7 @@ export const TreeItemForModal: FC<PageTreeItemProps> = (props) => {
       onClickDuplicateMenuItem={props.onClickDuplicateMenuItem}
       onClickDeleteMenuItem={props.onClickDeleteMenuItem}
       onRenamed={props.onRenamed}
-      customNextComponents={[NewPageInput]}
+      customHeadOfChildrenComponents={[NewPageInput]}
       itemClass={TreeItemForModal}
       customHoveredEndComponents={[NewPageCreateButton]}
       onClick={onClick}

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.module.scss

@@ -1,8 +1,18 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+
 // == Colors
+
+// drag over
+.page-tree-item :global {
+  .drag-over {
+    background-color: var(--bs-list-group-action-active-bg);
+  }
+}
+
 @include bs.color-mode(light) {
-  .pagetree-item :global {
+  // button
+  .page-tree-item :global {
     .list-group-item-action {
       .btn-page-item-control {
         --bs-btn-bg: transparent;
@@ -14,7 +24,8 @@
 }
 
 @include bs.color-mode(dark) {
-  .pagetree-item :global {
+  // button
+  .page-tree-item :global {
     .list-group-item-action {
       .btn-page-item-control {
         --bs-btn-bg: transparent;

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

@@ -28,6 +28,9 @@ import { usePageItemControl } from './use-page-item-control';
 
 import styles from './PageTreeItem.module.scss';
 
+const moduleClass = styles['page-tree-item'] ?? '';
+
+
 const logger = loggerFactory('growi:cli:Item');
 
 export const PageTreeItem: FC<TreeItemProps> = (props) => {
@@ -58,7 +61,6 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
 
   const { page } = itemNode;
   const [isOpen, setIsOpen] = useState(_isOpen);
-  const [shouldHide, setShouldHide] = useState(false);
 
   const { mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
 
@@ -77,17 +79,6 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
     router.push(link);
   }, [router]);
 
-  const displayDroppedItemByPageId = useCallback((pageId) => {
-    const target = document.getElementById(`pagetree-item-${pageId}`);
-    if (target == null) {
-      return;
-    }
-    //   // wait 500ms to avoid removing before d-none is set by useDrag end() callback
-    setTimeout(() => {
-      target.classList.remove('d-none');
-    }, 500);
-  }, []);
-
   const [, drag] = useDrag({
     type: 'PAGE_TREE',
     item: { page },
@@ -100,9 +91,6 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
     end: (item, monitor) => {
       // in order to set d-none to dropped Item
       const dropResult = monitor.getDropResult();
-      if (dropResult != null) {
-        setShouldHide(true);
-      }
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -136,8 +124,6 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       setIsOpen(true);
     }
     catch (err) {
-      // display the dropped item
-      displayDroppedItemByPageId(droppedPage._id);
       if (err.code === 'operation__blocked') {
         toastWarning(t('pagetree.you_cannot_move_this_page_now'));
       }
@@ -180,11 +166,13 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
     drop(c);
   };
 
-  const mainClassName = `${isOver ? 'grw-pagetree-is-over' : ''} ${shouldHide ? 'd-none' : ''}`;
+  const itemClassName = `${isOver ? 'drag-over' : ''}`;
 
   return (
     <TreeItemLayout
+      className={moduleClass}
       targetPathOrId={props.targetPathOrId}
+      itemLevel={props.itemLevel}
       itemNode={props.itemNode}
       isOpen={isOpen}
       isEnableActions={props.isEnableActions}
@@ -196,7 +184,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       onRenamed={props.onRenamed}
       itemRef={itemRef}
       itemClass={PageTreeItem}
-      mainClassName={mainClassName}
+      itemClassName={itemClassName}
       customEndComponents={[CountBadgeForPageTreeItem]}
       customHoveredEndComponents={[Control, NewPageCreateButton]}
       customHeadOfChildrenComponents={[NewPageInput, () => <CreatingNewPageSpinner show={isProcessingSubmission} />]}

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

@@ -37,14 +37,17 @@ const markTarget = (children: ItemNode[], targetPathOrId?: Nullable<string>): vo
 
 
 type TreeItemLayoutProps = TreeItemProps & {
+  className?: string,
   itemRef?: RefObject<any> | RefCallback<any>,
 }
 
 export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
   const {
+    className, itemClassName,
+    itemLevel: baseItemLevel = 1,
     itemNode, targetPathOrId, isOpen: _isOpen = false,
     onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, isEnableActions, isReadOnlyUser, isWipPageShown = true,
-    itemRef, itemClass, mainClassName,
+    itemRef, itemClass,
     showAlternativeContent,
   } = props;
 
@@ -111,7 +114,7 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
   const ItemClassFixed = itemClass ?? TreeItemLayout;
 
-  const baseProps: Omit<TreeItemProps, 'itemNode'> = {
+  const baseProps: Omit<TreeItemProps, 'itemLevel' | 'itemNode'> = {
     isEnableActions,
     isReadOnlyUser,
     isOpen: false,
@@ -124,6 +127,7 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
   const toolProps: TreeItemToolProps = {
     ...baseProps,
+    itemLevel: baseItemLevel,
     itemNode,
     stateHandlers: {
       setIsOpen,
@@ -143,12 +147,14 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
     <div
       id={`tree-item-layout-${page._id}`}
       data-testid="grw-pagetree-item-container"
-      className={`tree-item-layout ${moduleClass} ${mainClassName}`}
+      className={`${moduleClass} ${className} level-${baseItemLevel}`}
     >
       <li
         ref={itemRef}
         role="button"
-        className={`list-group-item border-0 py-0 pr-3 d-flex align-items-center rounded-1 ${page.isTarget ? 'active' : 'list-group-item-action'}`}
+        className={`list-group-item ${itemClassName}
+          border-0 py-0 pr-3 d-flex align-items-center rounded-1
+          ${page.isTarget ? 'active' : 'list-group-item-action'}`}
         id={page.isTarget ? 'grw-pagetree-current-page-item' : `grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
       >
@@ -195,28 +201,32 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
       </li>
 
-      { isOpen && HeadObChildrenComponents?.map((HeadObChildrenContents, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <HeadObChildrenContents key={index} {...toolProps} />
-      ))}
-
-      {
-        isOpen && hasChildren() && currentChildren.map((node, index) => {
-          const itemProps = {
-            ...baseProps,
-            itemNode: node,
-            itemClass,
-            mainClassName,
-            onClick,
-          };
-
-          return (
-            <div key={node.page._id} className="tree-item-layout-children">
+      { isOpen && (
+        <div className={`tree-item-layout-children level-${baseItemLevel + 1}`}>
+
+          {HeadObChildrenComponents?.map((HeadObChildrenContents, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <HeadObChildrenContents key={index} {...toolProps} itemLevel={baseItemLevel + 1} />
+          ))}
+
+          { hasChildren() && currentChildren.map((node) => {
+            const itemProps = {
+              ...baseProps,
+              className,
+              itemLevel: baseItemLevel + 1,
+              itemNode: node,
+              itemClass,
+              itemClassName,
+              onClick,
+            };
+
+            return (
               <ItemClassFixed {...itemProps} />
-            </div>
-          );
-        })
-      }
+            );
+          }) }
+
+        </div>
+      ) }
     </div>
   );
 };

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

@@ -7,6 +7,7 @@ import type { IPageForPageDuplicateModal } from '~/stores/modal';
 import type { ItemNode } from '../ItemNode';
 
 type TreeItemBaseProps = {
+  itemLevel?: number,
   itemNode: ItemNode,
   isEnableActions: boolean,
   isReadOnlyUser: boolean,
@@ -26,7 +27,7 @@ export type TreeItemProps = TreeItemBaseProps & {
   isOpen?: boolean,
   isWipPageShown?: boolean,
   itemClass?: React.FunctionComponent<TreeItemProps>,
-  mainClassName?: string,
+  itemClassName?: string,
   customEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customHoveredEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customHeadOfChildrenComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,