b3f5a3f75f
# Record Table Row Navigation This PR improves the table accessibility by adding a row navigation and new shortcuts to the table. Closes #896. # Introduce focused active row states on the table This PR implements the focused and active row states feature for the record table, allowing users to navigate through the table with keyboard arrows and providing visual feedback for selection. ## Implementation details: - Added new component states to track focused and active row positions and states. - Implemented dedicated hooks for row state management - Updated UI styling for active and focused rows: - Applied blue border (Adaptive Colors Blue 3) - Added highlight background (Accent Quaternary) - Added styling for focused rows to clearly indicate selection state - Added row state cleanup: - `RecordTableDeactivateRecordTableRowEffect` component to reset states - Added row state reset logic upon navigation ## Bug fixes - Fixed record table unselection in the page change effect - Fixed a hack introduced by https://github.com/twentyhq/twenty/pull/8489 which duplicated the last table column # Shortcuts ## Arrow keys and J+K navigation https://github.com/user-attachments/assets/6b46f6b5-cd98-4053-aaef-f8bf2b9584b5 ## Record selection with X https://github.com/user-attachments/assets/44ab7397-e00c-4dfe-8dd1-b3ffc53b3e5f ## Enter allows for cell navigation, Escape goes back to row navigation https://github.com/user-attachments/assets/890d7e25-2d81-47e3-972f-043a1879b8cc ## Command + Enter opens the record https://github.com/user-attachments/assets/cf8cdbd5-7cf0-4d78-909f-dc6be88b9e25
Run yarn dev while server running on port 3000