[andremarques94]

User-Facing Changes

Added per-topic message navigation buttons to the Topic List panel, allowing users to step through messages one at a time for any selected topic using previous/next chevron buttons.

Description

This PR introduces Topic Message Navigation functionality to the Topic List panel.

Features:

• Navigation Buttons: Each topic row now displays two icon buttons (chevrons) to navigate to the previous or next message on that specific topic
• Enable/Disable: Buttons are disabled when:
  • The topic is not selected or subscribed
  • There are no more messages in that direction (first/last message reached)
  • A navigation operation is already in progress (prevents double-clicks)
• Automatic Pause: Playback automatically pauses when seeking to a message

Technical Details:

• New useTopicMessageNavigation hook that uses the getBatchIterator method from MessagePipelineContext to iterate through topic messages and find target timestamps
• Implements boundary discovery with caching using immer's enableMapSet to store first/last message times per topic, avoiding expensive re-iteration when switching topics
• Integrates with existing MessagePipeline infrastructure for seeking and pausing playback
• tests

Files Changed:

• useTopicMessageNavigation.ts - New hook with navigation logic
• useTopicMessageNavigation.test.tsx - Test suite
• TopicRow.tsx - UI integration with navigation buttons
• TopicList.tsx - Added index prop to TopicRow
• useTopicListStyles.ts - Button styling

Checklist

• The web version was tested and it is running ok
• The desktop version was tested and it is running ok
• This change is covered by unit tests
• Files constants.ts, types.ts and *.style.ts have been checked and relevant code snippets have been relocated

[Copilot]

Pull request overview

This PR adds per-topic message navigation functionality to the Topic List panel, enabling users to step through messages one at a time using previous/next chevron buttons for each topic.

Changes:

• Introduces a new useTopicMessageNavigation hook that leverages getBatchIterator to navigate through topic messages with boundary caching
• Adds navigation UI buttons (chevrons) to each topic row with appropriate disabled states
• Implements automatic playback pause when seeking to messages

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
useTopicMessageNavigation.ts	New hook implementing message navigation logic with boundary discovery and caching
useTopicMessageNavigation.test.tsx	Comprehensive test suite for the navigation hook
TopicRow.tsx	Integrates navigation buttons with tooltip and event handling
useTopicListStyles.ts	Adds button styling and fixes pointer-events on selected row border
TopicList.tsx	Passes index prop to TopicRow and refactors skeleton rendering

Comments suppressed due to low confidence (1)

packages/suite-base/src/components/TopicList/TopicList.tsx:180

• The changes to the skeleton rendering (from hardcoded array to Array.from) are good, but this appears to be a code quality improvement unrelated to the message navigation feature. While this is a valid improvement, it dilutes the focus of this PR which is specifically about adding message navigation functionality.

          {Array.from({ length: 16 }).map((_, i) => (
            <ListItem divider key={`list-skeleton-${i}`}>
              <ListItemText
                className={classes.skeletonText}
                primary={<Skeleton animation={false} width="20%" />}
                secondary={<Skeleton animation="wave" width="55%" />}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gabriela-almeida-ctw]

Please take a look at the Sonacube analysis. 2 new issues were added and one of them has a high severity.

[rodrigo-p-rodrigues]

lgtm, just make sure you address @gabriela-almeida-ctw comments.

[rodrigo-p-rodrigues]

lgtm

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
85.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud