rename

.serena/memories/apps-app-page-tree-specification.md

@@ -15,8 +15,8 @@ GROWIのPageTreeは、`@headless-tree/react` と `@tanstack/react-virtual` を
 src/features/page-tree/
 ├── index.ts                                # メインエクスポート
 ├── components/
-│   ├── SimplifiedItemsTree.tsx             # コアvirtualizedツリーコンポーネント
-│   ├── SimplifiedItemsTree.spec.tsx        # テスト
+│   ├── ItemsTree.tsx                       # コアvirtualizedツリーコンポーネント
+│   ├── ItemsTree.spec.tsx                  # テスト
 │   ├── TreeItemLayout.tsx                  # 汎用ツリーアイテムレイアウト
 │   ├── TreeItemLayout.module.scss
 │   ├── SimpleItemContent.tsx               # シンプルなアイテムコンテンツ表示
@@ -67,7 +67,7 @@ src/features/page-tree/
 
 以下は `components/Sidebar/PageTreeItem/` に残留：
 
-- `SimplifiedPageTreeItem.tsx` - Sidebar専用の実装
+- `PageTreeItem.tsx` - Sidebar専用の実装
 - `CountBadgeForPageTreeItem.tsx` - PageTree専用バッジ
 - `use-page-item-control.tsx` - コンテキストメニュー制御
 
@@ -75,16 +75,16 @@ src/features/page-tree/
 
 ## 2. 主要コンポーネント
 
-### 2.1 SimplifiedItemsTree
+### 2.1 ItemsTree
 
-**ファイル**: `features/page-tree/components/SimplifiedItemsTree.tsx`
+**ファイル**: `features/page-tree/components/ItemsTree.tsx`
 
 Virtualizedツリーのコアコンポーネント。`@headless-tree/react` と `@tanstack/react-virtual` を統合。
 
 #### Props
 
 ```typescript
-interface SimplifiedItemsTreeProps {
+interface ItemsTreeProps {
   // 表示対象のターゲットパスまたはID
   targetPathOrId: string | null;
   // WIPページを表示するか
@@ -151,9 +151,9 @@ useEffect(() => {
 }, [targetPath, page.path, isExpanded, onToggle]);
 ```
 
-### 2.3 SimplifiedPageTreeItem
+### 2.3 PageTreeItem
 
-**ファイル**: `components/Sidebar/PageTreeItem/SimplifiedPageTreeItem.tsx`
+**ファイル**: `components/Sidebar/PageTreeItem/PageTreeItem.tsx`
 
 Sidebar用のツリーアイテム実装。TreeItemLayoutを使用し、Rename/Create/Control機能を統合。
 
@@ -215,7 +215,7 @@ usePageTreeCreateActions(): startCreating, cancelCreating
 ```typescript
 const { isCreatingChild, CreateInputComponent, startCreating } = usePageCreate(item);
 
-// SimplifiedPageTreeItemで使用
+// PageTreeItemで使用
 {isCreatingChild() && <CreateInputComponent />}
 ```
 
@@ -239,7 +239,7 @@ const { isCreatingChild, CreateInputComponent, startCreating } = usePageCreate(i
 #### 使用方法
 
 ```typescript
-<SimplifiedItemsTree
+<ItemsTree
   enableDragAndDrop={true}
   // ...他のprops
 />
@@ -296,10 +296,10 @@ const { isCreatingChild, CreateInputComponent, startCreating } = usePageCreate(i
 
 #### 使用方法
 
-`SimplifiedItemsTree`コンポーネント内で自動的に有効化されます。
+`ItemsTree`コンポーネント内で自動的に有効化されます。
 
 ```typescript
-// SimplifiedItemsTree.tsx内で呼び出し
+// ItemsTree.tsx内で呼び出し
 useSocketUpdateDescCount();
 ```
 
@@ -367,12 +367,12 @@ const handleOperationComplete = (parentId: string) => notifyUpdateItems([parentI
 
 **使用箇所**: `AiAssistantManagementPageTreeSelection.tsx`
 
-SimplifiedItemsTreeのcheckboxesオプションを使用。
+ItemsTreeのcheckboxesオプションを使用。
 
 #### Props
 
 ```typescript
-<SimplifiedItemsTree
+<ItemsTree
   enableCheckboxes={true}
   initialCheckedItems={['page-id-1', 'page-id-2']}
   onCheckedItemsChange={(checkedItems) => {

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

@@ -9,7 +9,7 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter, Button,
 } from 'reactstrap';
 
-import { SimplifiedItemsTree } from '~/features/page-tree/components';
+import { ItemsTree } from '~/features/page-tree/components';
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageData } from '~/states/page';
 import {
@@ -20,7 +20,7 @@ import {
 
 import ItemsTreeContentSkeleton from '../ItemsTree/ItemsTreeContentSkeleton';
 
-import { SimplifiedTreeItemForModal, simplifiedTreeItemForModalSize } from './SimplifiedTreeItemForModal';
+import { TreeItemForModal, treeItemForModalSize } from './TreeItemForModal';
 
 const PageSelectModalSubstance: FC = () => {
   const { close: closeModal } = usePageSelectModalActions();
@@ -91,13 +91,13 @@ const PageSelectModalSubstance: FC = () => {
             style={{ maxHeight: 'calc(85vh - 133px)', overflowY: 'auto' }}
           >
             {scrollerElem && (
-              <SimplifiedItemsTree
-                CustomTreeItem={SimplifiedTreeItemForModal}
+              <ItemsTree
+                CustomTreeItem={TreeItemForModal}
                 isEnableActions={!isGuestUser}
                 isReadOnlyUser={!!isReadOnlyUser}
                 targetPath={targetPath}
                 targetPathOrId={targetPath}
-                estimateTreeItemSize={() => simplifiedTreeItemForModalSize}
+                estimateTreeItemSize={() => treeItemForModalSize}
                 scrollerElem={scrollerElem}
               />
             )}

apps/app/src/client/components/PageSelectModal/SimplifiedTreeItemForModal.tsx → apps/app/src/client/components/PageSelectModal/TreeItemForModal.tsx

@@ -10,13 +10,13 @@ import styles from './TreeItemForModal.module.scss';
 
 const moduleClass = styles['tree-item-for-modal'] ?? '';
 
-export const simplifiedTreeItemForModalSize = 36; // in px
+export const treeItemForModalSize = 36; // in px
 
-type SimplifiedTreeItemForModalProps = TreeItemProps & {
+type TreeItemForModalProps = TreeItemProps & {
   key?: React.Key | null;
 };
 
-export const SimplifiedTreeItemForModal: FC<SimplifiedTreeItemForModalProps> = (props) => {
+export const TreeItemForModal: FC<TreeItemForModalProps> = (props) => {
   const {
     item,
     targetPathOrId,

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -13,8 +13,8 @@ import {
 } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 
-import { SimplifiedItemsTree } from '~/features/page-tree/components';
-import { SimplifiedPageTreeItem, simplifiedPageTreeItemSize } from '../PageTreeItem';
+import { ItemsTree } from '~/features/page-tree/components';
+import { PageTreeItem, pageTreeItemSize } from '../PageTreeItem';
 import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
 
 import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
@@ -121,7 +121,7 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
 
   return (
     <div className="pt-4">
-      <SimplifiedItemsTree
+      <ItemsTree
         enableRenaming
         enableDragAndDrop
         isEnableActions={!isGuestUser}
@@ -129,8 +129,8 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
         isWipPageShown={isWipPageShown}
         targetPath={path}
         targetPathOrId={targetPathOrId}
-        CustomTreeItem={SimplifiedPageTreeItem}
-        estimateTreeItemSize={() => simplifiedPageTreeItemSize}
+        CustomTreeItem={PageTreeItem}
+        estimateTreeItemSize={() => pageTreeItemSize}
         scrollerElem={sidebarScrollerElem}
       />
 

apps/app/src/client/components/Sidebar/PageTreeItem/SimplifiedPageTreeItem.tsx → apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -36,10 +36,10 @@ import styles from './PageTreeItem.module.scss';
 const moduleClass = styles['page-tree-item'] ?? '';
 
 
-export const simplifiedPageTreeItemSize = 40; // in px
+export const pageTreeItemSize = 40; // in px
 
 
-export const SimplifiedPageTreeItem: FC<TreeItemProps> = ({
+export const PageTreeItem: FC<TreeItemProps> = ({
   item,
   targetPath,
   targetPathOrId,

apps/app/src/client/components/Sidebar/PageTreeItem/index.ts

@@ -1 +1 @@
-export * from './SimplifiedPageTreeItem';
+export * from './PageTreeItem';

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageTreeSelectionTree.tsx

@@ -1,13 +1,13 @@
 import { Suspense, useCallback, useState } from 'react';
 
 import ItemsTreeContentSkeleton from '~/client/components/ItemsTree/ItemsTreeContentSkeleton';
-import { SimplifiedItemsTree } from '~/features/page-tree/components';
+import { ItemsTree } from '~/features/page-tree/components';
 import type { IPageForTreeItem } from '~/interfaces/page';
 
 import {
-  SimplifiedTreeItemWithCheckbox,
-  simplifiedTreeItemWithCheckboxSize,
-} from './SimplifiedTreeItemWithCheckbox';
+  TreeItemWithCheckbox,
+  treeItemWithCheckboxSize,
+} from './TreeItemWithCheckbox';
 
 type Props = {
   isEnableActions: boolean;
@@ -28,7 +28,7 @@ export const PageTreeSelectionTree = (props: Props): JSX.Element => {
   const [scrollerElem, setScrollerElem] = useState<HTMLElement | null>(null);
 
   const estimateTreeItemSize = useCallback(
-    () => simplifiedTreeItemWithCheckboxSize,
+    () => treeItemWithCheckboxSize,
     [],
   );
 
@@ -36,11 +36,11 @@ export const PageTreeSelectionTree = (props: Props): JSX.Element => {
     <div className="page-tree-container" ref={setScrollerElem}>
       {scrollerElem != null && (
         <Suspense fallback={<ItemsTreeContentSkeleton />}>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={isEnableActions}
             isReadOnlyUser={isReadOnlyUser}
-            CustomTreeItem={SimplifiedTreeItemWithCheckbox}
+            CustomTreeItem={TreeItemWithCheckbox}
             estimateTreeItemSize={estimateTreeItemSize}
             scrollerElem={scrollerElem}
             enableCheckboxes

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/SimplifiedTreeItemWithCheckbox.tsx → apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/TreeItemWithCheckbox.tsx

@@ -3,13 +3,13 @@ import type { FC } from 'react';
 import type { TreeItemProps, TreeItemToolProps } from '~/features/page-tree';
 import { TreeItemLayout } from '~/features/page-tree/components';
 
-import styles from './SimplifiedTreeItemWithCheckbox.module.scss';
+import styles from './TreeItemWithCheckbox.module.scss';
 
 const moduleClass = styles['page-tree-item'] ?? '';
 
-export const simplifiedTreeItemWithCheckboxSize = 36; // in px
+export const treeItemWithCheckboxSize = 36; // in px
 
-type SimplifiedTreeItemWithCheckboxProps = TreeItemProps & {
+type TreeItemWithCheckboxProps = TreeItemProps & {
   key?: React.Key | null;
 };
 
@@ -46,8 +46,8 @@ const TreeItemCheckbox: FC<TreeItemToolProps> = ({ item }) => {
   );
 };
 
-export const SimplifiedTreeItemWithCheckbox: FC<
-  SimplifiedTreeItemWithCheckboxProps
+export const TreeItemWithCheckbox: FC<
+  TreeItemWithCheckboxProps
 > = (props) => {
   return (
     <TreeItemLayout

apps/app/src/features/page-tree/components/SimplifiedItemsTree.spec.tsx → apps/app/src/features/page-tree/components/ItemsTree.spec.tsx

@@ -7,7 +7,7 @@ import type { IPageForTreeItem } from '~/interfaces/page';
 
 import type { TreeItemProps } from '../interfaces';
 import { invalidatePageTreeChildren } from '../services';
-import { SimplifiedItemsTree } from './SimplifiedItemsTree';
+import { ItemsTree } from './ItemsTree';
 
 // Mock the apiv3Get function
 const mockApiv3Get = vi.fn();
@@ -111,7 +111,7 @@ const TestWrapper: FC<{ children: React.ReactNode }> = ({ children }) => (
   <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
 );
 
-describe('SimplifiedItemsTree', () => {
+describe('ItemsTree', () => {
   beforeEach(() => {
     // Clear cache before each test
     invalidatePageTreeChildren();
@@ -159,7 +159,7 @@ describe('SimplifiedItemsTree', () => {
 
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={false}
             CustomTreeItem={TestTreeItem}
@@ -224,7 +224,7 @@ describe('SimplifiedItemsTree', () => {
 
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             CustomTreeItem={TestTreeItem}
             estimateTreeItemSize={() => 32}
@@ -288,7 +288,7 @@ describe('SimplifiedItemsTree', () => {
 
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             CustomTreeItem={TestTreeItem}
             estimateTreeItemSize={() => 32}
@@ -363,7 +363,7 @@ describe('SimplifiedItemsTree', () => {
 
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/Sandbox/Test"
             CustomTreeItem={TestTreeItem}
             estimateTreeItemSize={() => 32}
@@ -448,7 +448,7 @@ describe('SimplifiedItemsTree', () => {
 
       const { rerender } = render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={true}
             CustomTreeItem={TestTreeItem}
@@ -470,7 +470,7 @@ describe('SimplifiedItemsTree', () => {
       // Force re-render to simulate React re-renders that could trigger the loop
       rerender(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={true}
             CustomTreeItem={TestTreeItem}
@@ -537,7 +537,7 @@ describe('SimplifiedItemsTree', () => {
       // Initial render without creating state
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={true}
             CustomTreeItem={TestTreeItem}
@@ -607,7 +607,7 @@ describe('SimplifiedItemsTree', () => {
 
       const { unmount } = render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={true}
             CustomTreeItem={TestTreeItem}
@@ -633,7 +633,7 @@ describe('SimplifiedItemsTree', () => {
 
       render(
         <TestWrapper>
-          <SimplifiedItemsTree
+          <ItemsTree
             targetPath="/"
             isEnableActions={true}
             CustomTreeItem={TestTreeItem}

apps/app/src/features/page-tree/components/SimplifiedItemsTree.tsx → apps/app/src/features/page-tree/components/ItemsTree.tsx

@@ -53,7 +53,7 @@ type Props = {
   onCheckedItemsChange?: (checkedItems: IPageForTreeItem[]) => void;
 };
 
-export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
+export const ItemsTree: FC<Props> = (props: Props) => {
   const {
     targetPath,
     targetPathOrId,

apps/app/src/features/page-tree/components/index.ts

@@ -1,4 +1,4 @@
+export * from './ItemsTree';
 export * from './SimpleItemContent';
-export * from './SimplifiedItemsTree';
 export * from './TreeItemLayout';
 export * from './TreeNameInput';

apps/app/src/features/page-tree/hooks/use-page-create.tsx

@@ -158,7 +158,7 @@ export const usePageCreate = (): UsePageCreateReturn => {
       const parentId = parentItem.getId();
       const parentPath = parentItem.getItemData().path ?? '/';
 
-      // Set creating state - expansion will be handled by SimplifiedItemsTree
+      // Set creating state - expansion will be handled by ItemsTree
       startCreatingAction(parentId, parentPath);
     },
     [startCreatingAction],
@@ -245,7 +245,7 @@ export const usePageCreate = (): UsePageCreateReturn => {
     [t, createPage, notifyUpdateItems, cancelCreating],
   );
 
-  // Create from placeholder node (used by onRename handler in SimplifiedItemsTree)
+  // Create from placeholder node (used by onRename handler in ItemsTree)
   const createFromPlaceholder = useCallback(
     async (
       placeholderItem: ItemInstance<IPageForItem>,