refactor class to switch show/hide

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -4,7 +4,7 @@ $grw-sidebar-content-footer-height: 50px;
 $grw-pagetree-item-padding-left: 10px;
 $grw-pagetree-item-container-height: 40px;
 
-.grw-pagetree {
+.grw-items-tree {
 
   .grw-pagetree-item-skeleton-text {
     @include grw-skeleton-text($font-size:16px, $line-height:$grw-pagetree-item-container-height);
@@ -19,20 +19,6 @@ $grw-pagetree-item-container-height: 40px;
   :global {
 
     .list-group-item {
-      .grw-visible-on-hover {
-        display: none;
-      }
-
-      &:hover {
-        .grw-visible-on-hover {
-          display: block;
-        }
-
-        .grw-count-badge {
-          display: none;
-        }
-      }
-
       .grw-pagetree-triangle-btn {
         border: 0;
         transition: all 0.2s ease-out;
@@ -49,13 +35,6 @@ $grw-pagetree-item-container-height: 40px;
         text-decoration: none;
       }
 
-      .grw-pagetree-count-wrapper {
-        display: inline-block;
-
-        &:hover {
-          display: none;
-        }
-      }
     }
 
     .grw-pagetree-item-container {

apps/app/src/components/ItemsTree/ItemsTree.tsx

@@ -32,6 +32,7 @@ import ItemsTreeContentSkeleton from './ItemsTreeContentSkeleton';
 
 import styles from './ItemsTree.module.scss';
 
+const moduleClass = styles['grw-items-tree'] ?? '';
 
 const logger = loggerFactory('growi:cli:ItemsTree');
 
@@ -275,7 +276,7 @@ export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
 
   if (initialItemNode != null) {
     return (
-      <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-4`} ref={rootElemRef}>
+      <ul className={`${moduleClass} list-group py-4`} ref={rootElemRef}>
         <CustomTreeItem
           key={initialItemNode.page.path}
           targetPathOrId={targetPathOrId}

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

@@ -24,10 +24,10 @@ 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 grw-visible-on-hover"
+              className="border-0 rounded btn btn-page-item-control p-0 d-none d-hover-block"
               onClick={onClick}
             >
-              <span className="material-symbols-outlined d-block p-0">add_circle</span>
+              <span className="material-symbols-outlined p-0">add_circle</span>
             </button>
           </NotAvailableForReadOnlyUser>
         </NotAvailableForGuest>

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

@@ -0,0 +1,15 @@
+// show / hide on hover
+.simple-item {
+  :global {
+    .list-group-item {
+      &:hover {
+        .d-hover-none {
+          display: none !important;
+        }
+        .d-hover-block {
+          display: block !important;
+        }
+      }
+    }
+  }
+}

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

@@ -22,6 +22,11 @@ import { useNewPageInput } from './NewPageInput';
 import type { TreeItemProps, TreeItemToolProps } from './interfaces';
 
 
+import styles from './SimpleItem.module.scss';
+
+const moduleClass = styles['simple-item'] ?? '';
+
+
 // Utility to mark target
 const markTarget = (children: ItemNode[], targetPathOrId?: Nullable<string>): void => {
   if (targetPathOrId == null) {
@@ -84,7 +89,7 @@ export const SimpleItemTool: FC<TreeItemToolProps> = (props) => {
   return (
     <>
       {descendantCount > 0 && (
-        <div className="grw-pagetree-count-wrapper">
+        <div className="d-hover-none">
           <CountBadge count={descendantCount} />
         </div>
       )}
@@ -196,7 +201,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
     <div
       id={`pagetree-item-${page._id}`}
       data-testid="grw-pagetree-item-container"
-      className={`grw-pagetree-item-container ${mainClassName}`}
+      className={`grw-pagetree-item-container ${moduleClass} ${mainClassName}`}
     >
       <li
         ref={itemRef}