update serena memories

.serena/memories/apps-app-modal-performance-optimization-v3-list.md

@@ -2,7 +2,9 @@
 
 ## V3進捗状況
 
-**実装完了**: 6/46モーダル (2025-10-16更新)
+**実装完了**: 12/46モーダル (26%) (2025-10-16更新)
+
+### 中頻度モーダル (6/6 - 100%完了) ✅
 - ✅ PageAccessoriesModal (2025-10-15)
 - ✅ ShortcutsModal (2025-10-15)
 - ✅ PageRenameModal (2025-10-16) - ケースC
@@ -10,10 +12,23 @@
 - ✅ DescendantsPageListModal (2025-10-16) - ケースC
 - ✅ PageDeleteModal (2025-10-16) - ケースA
 
-**今回完了**: 中頻度モーダル4つ (約20分)
+**時間**: 中頻度4モーダル完了に約20分
 - 3つケースC (最短経路): 各5分程度
 - 1つケースA: 約5分
 
+### 低頻度モーダル (6/38 - 16%完了) 🔄
+- ✅ DrawioModal (2025-10-16) - ケースC
+- ✅ HandsontableModal (2025-10-16) - ケースC + 複数ステータス対応
+- ✅ TemplateModal (2025-10-16) - ケースC + @growi/editor state
+- ✅ LinkEditModal (2025-10-16) - ケースC + @growi/editor state
+- ✅ TagEditModal (2025-10-16) - ケースC
+- ✅ ConflictDiffModal (2025-10-16) - ケースC
+
+**バグ修正 (2025-10-16)**:
+- LinkEditModal: 誤ったstate importパス修正 (`~/states` → `@growi/editor/dist/states`)
+- TemplateModal: 誤ったstate importパス修正 (`~/states` → `@growi/editor`)
+- HandsontableModal: 複数ステータス対応 (`isOpened || isOpendInEditor`)
+
 ---
 
 ## V2完了モーダル (46個) - V3動的ロード候補
@@ -31,16 +46,18 @@
 - ✅ PageDuplicateModal.tsx
 - ✅ DescendantsPageListModal.tsx
 
-### 低頻度使用 - 動的ロード確定 (38個)
-**次の優先候補**:
-- LinkEditModal.tsx
-- TagEditModal.tsx
-- ConflictDiffModal.tsx
-- PagePresentationModal.tsx
-- HandsontableModal.tsx
-- DrawioModal.tsx
+### 低頻度使用 - 動的ロード候補 (38個)
+
+**完了 (6個)** ✅:
+- ✅ LinkEditModal.tsx
+- ✅ TagEditModal.tsx
+- ✅ ConflictDiffModal.tsx
+- ✅ HandsontableModal.tsx
+- ✅ DrawioModal.tsx
+- ✅ TemplateModal.tsx
 
-**その他**:
+**次の優先候補 (32個)** 🔜:
+- PagePresentationModal.tsx
 - PageBulkExportSelectModal.tsx
 - CreateTemplateModal.tsx
 - SearchOptionModal.tsx
@@ -53,7 +70,6 @@
 - GrantedGroupsInheritanceSelectModal.tsx
 - SelectUserGroupModal.tsx
 - UserGroupModal.tsx
-- TemplateModal.tsx
 - DeleteAiAssistantModal.tsx
 - ShareScopeWarningModal.tsx
 - DeleteAttachmentModal.tsx
@@ -63,7 +79,7 @@
 - DeleteSlackBotSettingsModal.tsx
 - AiAssistantManagementModal.tsx
 - PageSelectModal.tsx
-- その他
+- その他 (約10個)
 
 ---
 
@@ -91,3 +107,20 @@ Modal/
 - 所要時間: 約5-10分/モーダル
 - Container-Presentation分離なし
 - 作業: ディレクトリ化 + dynamic.tsx/index.ts追加 + named export化
+
+---
+
+## 重要な注意事項
+
+### Cross-Package State Management
+一部のモーダル（特にエディター関連）は`@growi/editor`パッケージでstateを管理:
+- LinkEditModal: `@growi/editor/dist/states/modal/link-edit`
+- TemplateModal: `@growi/editor`
+- HandsontableModal (Editor用): `@growi/editor` (useHandsontableModalForEditorStatus)
+
+**注意**: `~/states`からインポートできると仮定しないこと！
+
+### 複数ステータス対応
+一部のモーダルは複数のステータスプロパティを持つ:
+- HandsontableModal: `isOpened || isOpendInEditor`
+- dynamic.tsxで両方をチェックする必要あり

.serena/memories/apps-app-modal-performance-optimization-v3.md

@@ -509,6 +509,65 @@ import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
 - [ ] **Container-Presentation効果**: モーダル閉じている時、Substanceがレンダリングされない
 - [ ] TypeScriptエラーが発生しない
 
+### デグレチェック項目 🚨 NEW
+- [ ] **モーダルが開くか**: トリガーボタンを押してモーダルが正しく開くことを確認
+- [ ] **State import パス**: `@growi/editor`パッケージのstateを使用していないか確認
+  - LinkEditModal: `@growi/editor/dist/states/modal/link-edit`
+  - TemplateModal: `@growi/editor`
+  - HandsontableModal (Editor): `@growi/editor` (useHandsontableModalForEditorStatus)
+- [ ] **複数ステータス**: モーダルが複数のステータスプロパティを持っていないか確認
+  - 例: HandsontableModal は `isOpened || isOpendInEditor` の両方をチェック必要
+- [ ] **Export宣言**: モーダルコンポーネントが`export const`で正しくexportされているか
+- [ ] **動的ローダーのtrigger条件**: `status?.isOpened`だけでなく、他のプロパティも必要ないか確認
+
+---
+
+## デバッグガイド 🔧 NEW
+
+### モーダルが開かない場合のチェックリスト
+
+1. **State import パスの確認**
+```bash
+# モーダル本体で使用しているstate hookのimport元を確認
+grep -n "useXxxModalStatus" path/to/Modal.tsx
+
+# dynamic.tsxで同じimport元を使用しているか確認
+grep -n "useXxxModalStatus" path/to/dynamic.tsx
+```
+
+**よくある間違い**:
+- ❌ dynamic.tsx: `import { useXxxModalStatus } from '~/states/ui/modal/xxx'`
+- ✅ 本体と同じ: `import { useXxxModalStatus } from '@growi/editor'`
+
+2. **ステータスプロパティの確認**
+```tsx
+// モーダル本体で使用しているプロパティを確認
+<Modal isOpen={status?.isOpened || anotherStatus?.isOpened}>
+
+// dynamic.tsxで同じ条件を使用
+const Component = useLazyLoader(
+  'modal-key',
+  () => import('./Modal'),
+  status?.isOpened || anotherStatus?.isOpened || false, // ⭐すべての条件を含める
+);
+```
+
+3. **Export宣言の確認**
+```tsx
+// ❌ 間違い: default export
+export default MyModal;
+
+// ✅ 正しい: named export
+export const MyModal = () => { ... };
+```
+
+4. **Import パスの確認**
+```tsx
+// dynamic.tsx内
+() => import('./Modal').then(mod => ({ default: mod.MyModal }))
+//                                              ↑ named exportの名前
+```
+
 ---
 
 ## 注意点
@@ -533,24 +592,42 @@ import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
 - **Substance**: `isOpened && <Substance />`で条件付きレンダリング
 - この設計により、`<Modal isOpen={false}>`が正しくfadeout transitionを実行できる
 
----
+### Cross-Package State Management 🚨 NEW
+エディター関連のモーダルは`@growi/editor`パッケージでstateを管理している場合があります：
+- `~/states`からインポートできると仮定しないこと
+- モーダル本体のimport元を必ず確認すること
+- dynamic.tsxで同じimport元を使用すること
 
-## 他のモーダルへの適用優先度
+**例**:
+```tsx
+// LinkEditModal.tsx (本体)
+import { useLinkEditModalStatus } from '@growi/editor/dist/states/modal/link-edit';
+
+// dynamic.tsx (同じimport元を使用)
+import { useLinkEditModalStatus } from '@growi/editor/dist/states/modal/link-edit';
+```
 
-### 高優先度（低頻度使用モーダル）
-1. LinkEditModal
-2. TagEditModal
-3. ConflictDiffModal
-4. 管理者専用モーダル群
+---
 
-### 中優先度（中頻度使用モーダル）
-- PageAccessoriesModal ✅ (完了)
-- ShortcutsModal ✅ (完了)
-- PageDuplicateModal
-- PageRenameModal
-- PageDeleteModal
+## 他のモーダルへの適用優先度
 
-### 低優先度（高頻度使用モーダル）
+### 高優先度（低頻度使用モーダル） - 残り32個
+1. PagePresentationModal
+2. PageBulkExportSelectModal
+3. CreateTemplateModal
+4. SearchOptionModal
+5. ImageCropModal
+6. 管理者専用モーダル群
+
+### 中優先度（中頻度使用モーダル） - 完了✅
+- PageAccessoriesModal ✅
+- ShortcutsModal ✅
+- PageDuplicateModal ✅
+- PageRenameModal ✅
+- PageDeleteModal ✅
+- DescendantsPageListModal ✅
+
+### 低優先度（高頻度使用モーダル） - 動的ロード非推奨
 - PageCreateModal（使用頻度が非常に高いため保留）
 - SearchModal（使用頻度が非常に高いため保留）
 
@@ -611,4 +688,5 @@ import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
 
 【変更】[Modal].tsx本体はnamed export化のみ（実装は変更なし）
 【達成】動的ロード効果を即座に獲得
+【デグレチェック】モーダルが開くか、state import パス、複数ステータス確認
 ```