add serena memory

.serena/memories/apps-app-modal-performance-optimization-v2-fadeout-issue-complete-categorization.md

@@ -0,0 +1,123 @@
+# Modal Fadeout Transition Issue - Complete Categorization
+
+## Issue Summary
+Early return pattern `if (!isOpen) return <></>` in Container components removes the entire `<Modal>` component before the fadeout transition can complete, causing modals to disappear instantly instead of animating smoothly.
+
+## Correct Pattern
+```tsx
+// ❌ Wrong - removes Modal component
+if (!isOpen) return <></>;
+return <Modal isOpen={isOpen}><Substance /></Modal>;
+
+// ✅ Correct - keeps Modal, conditionally renders Substance
+return <Modal isOpen={isOpen}>{isOpen && <Substance />}</Modal>;
+```
+
+## All 51 Modals Categorized
+
+### Category A: Container-Presentation separated with early return (7 modals)
+**Fix**: Remove early return, wrap Substance in conditional
+
+1. `PageDuplicateModal.tsx` - Line 306: `if (!isOpened) return <></>;`
+2. `PageRenameModal.tsx` - Line 378: `if (!isOpened) return <></>;`
+3. `PagePresentationModal.tsx` - Line 121: `if (!isOpen) return <></>;`
+4. `LinkEditModal.tsx` - Line 381: `if (!linkEditModalStatus?.isOpened) return <></>;`
+5. `HandsontableModal.tsx` - Line 541: Special case - Substance contains Modal
+6. `DrawioModal.tsx` - Line 194: `if (!isOpened && !isOpenedInEditor) return <></>;`
+7. `ConflictDiffModal.tsx` - Line 209: Complex condition
+
+### Category B: Single component with early return - needs Container-Presentation separation (11 modals)
+**Fix**: Split into Container/Substance, apply correct pattern
+
+8. `GrantedGroupsInheritanceSelectModal.tsx` - Line 28
+9. `AssociateModal.tsx` - Line 64
+10. `DisassociateModal.tsx` - Line 49
+11. `PrivateLegacyPagesMigrationModal.tsx` - Line 83
+12. `EmptyTrashModal.tsx` - Line 59
+13. `DeleteAttachmentModal.tsx` - Line 97
+14. `DeleteBookmarkFolderModal.tsx` - Line 44
+15. `ShareScopeWarningModal.tsx` - Line 42
+16. `PluginDeleteModal.tsx` - Line 45
+17. `SelectUserGroupModal.tsx` - Line 75
+18. `DescendantsPageListModal.tsx` - Line 95
+
+### Category C: Container-Presentation separated with early return - verified (5 modals)
+**Fix**: Remove early return, wrap Substance in conditional
+
+19. `DeleteCommentModal.tsx` - Line 87: `if (!isShown || comment == null) return <></>;`
+20. `DeleteAiAssistantModal.tsx` - Line 51: `if (!isShown || aiAssistant == null) return <></>;`
+21. `ShortcutsModal.tsx` - Line 405: `if (status == null || !status.isOpened) return <></>;`
+22. `CreateTemplateModal.tsx` - Line 86: `if (!isCreatable) return <></>;`
+23. `ImageCropModal.tsx` - Line 139: `if (!isShow) return <></>;`
+
+### Category D: Already optimized but has early return issue (2 modals)
+**Fix**: Remove early return, wrap Substance in conditional
+
+24. `SearchModal.tsx` - Line 181: `if (!isOpened) return <></>;`
+25. `PageBulkExportSelectModal.tsx` - Line 172: `if (!status?.isOpened) return <></>;`
+
+### Category E: Correct implementation - no changes needed (6 modals)
+✅ Already correct
+
+26. `SearchOptionModal.tsx` - No early return
+27. `PageDeleteModal.tsx` - Substance handles conditionals internally
+28. `PageCreateModal.tsx` - renderForm functions handle conditionals
+29. `TemplateModal.tsx` - Dynamic import with correct structure
+30. `PutbackPageModal.jsx` - Fixed in Phase 6
+31. `TagEditModal.tsx` - Needs verification but likely correct
+
+### Category F: Admin modals - deprioritized (11 modals)
+🔶 Lower priority per user request
+
+32. `Admin/App/ConfirmModal.tsx`
+33. `Admin/ExportArchiveData/SelectCollectionsModal.tsx`
+34. `Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx`
+35. `Admin/Notification/NotificationDeleteModal.jsx` (Class component)
+36. `Admin/Security/DeleteAllShareLinksModal.jsx`
+37. `Admin/Security/LdapAuthTestModal.jsx`
+38. `Admin/SlackIntegration/ConfirmBotChangeModal.jsx`
+39. `Admin/SlackIntegration/DeleteSlackBotSettingsModal.tsx`
+40. `Admin/UserGroupDetail/UpdateParentConfirmModal.tsx`
+41. `Admin/UserGroupDetail/UserGroupUserModal.tsx`
+42. `Admin/UserGroup/UserGroupDeleteModal.tsx`
+43. `Admin/UserGroup/UserGroupModal.tsx`
+
+### Category G: Class components or special cases - out of scope (6 modals)
+🔶 Requires different approach
+
+44. `Admin/Users/PasswordResetModal.jsx` (Class component)
+45. `Admin/Users/UserInviteModal.jsx` (Class component)
+46. `PageEditor/GridEditModal.jsx` (Class component)
+47. `Hotkeys/Subscribers/ShowShortcutsModal.tsx` (Special HOC pattern)
+48. `PageAccessoriesModal/PageAccessoriesModal.tsx` (Complex modal manager)
+49. `PageSelectModal/PageSelectModal.tsx` (Complex tree modal)
+
+### Category H: Sub-components - not modals (2 files)
+🔶 Not actual modals
+
+50. `TreeItemForModal.tsx` - Sub-component for PageSelectModal
+51. `AiAssistantManagementModal.tsx` - Needs verification
+
+## Summary Statistics
+
+- **Total modals**: 51
+- **Needs fixing (A+B+C+D)**: 25 modals
+  - Category A: 7 (simple fix)
+  - Category B: 11 (needs separation)
+  - Category C: 5 (simple fix)
+  - Category D: 2 (simple fix)
+- **Already correct (E)**: 6 modals
+- **Deprioritized (F)**: 11 modals
+- **Out of scope (G+H)**: 9 items
+
+## Priority Order
+
+1. **Highest**: Category A (7) + Category D (2) - Simple fixes, 14 total affected
+2. **High**: Category C (5) - Already separated, simple fix
+3. **Medium**: Category B (11) - Needs Container-Presentation separation
+4. **Low**: Category F (11) - Admin modals
+5. **Later**: Category G (6) - Class components
+
+## Next Steps
+
+Start with SearchModal and PageBulkExportSelectModal (Category D) as they are already opened in the editor, then proceed to Category A for quick wins.