Conversation List Highlighting #7453
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: trevor-signal <[email protected]>
Co-authored-by: Wyatt Childers <[email protected]>
Co-authored-by: Yash <[email protected]> Co-authored-by: ayumi-signal <[email protected]> Co-authored-by: Jamie Kyle <[email protected]> Co-authored-by: Fedor Indutny <[email protected]> Co-authored-by: trevor-signal <[email protected]>
There was a problem hiding this comment.
@brianHarder thanks for this PR! It looks great; I have one clarifying question.
It's great that you added a mock-test, but I think it's unnecessary for this kind of small stylistic change -- mock tests are great but also have overhead so we don't add them for every change.
| @@ -290,7 +290,12 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = | |||
| data-testid={testId} | |||
| disabled={disabled} | |||
| onClick={onClick} | |||
| onMouseDown={onMouseDown} | |||
| onMouseDown={event => { | |||
| event.preventDefault(); | |||
There was a problem hiding this comment.
can you say more why this change is necessary?
There was a problem hiding this comment.
@trevor-signal thank you for the feedback! I included this line of code because the default Chromium behavior would maintain an 'active' state on a chat list item throughout the drag, which I believe could cause the highlight to linger. This change was specifically to address the highlight during dragging.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Contributor checklist:
mainbranchpnpm run readyrun passes successfully (more about tests here)Description
This PR ensures that highlighting in the chat list only occurs by mouse hover and keyboard navigation. Previously there was an issue where clicking and dragging on a chat would cause it to stay highlighted both throughout the drag and even after mouse release. To achieve this, the default mouse behavior has been prevented, and new CSS classes have been added to only highlight conversation lists via mouse hover or the tab key.
I manually tested this PR by performing mouse movements in my staging environment and ensuring that the highlighting was either applied or not applied as expected. I specifically simulated the click and drag several times to make sure the highlight was not lingering. I also added a test file - conversationListHighlight_test.ts - which simulates a hover movement to check for highlighting and a click-drag movement to check that the highlight does not stay. I did all my testing on my laptop, which runs macOS 10.15.7.
Screen.Recording.2025-08-15.at.3.59.53.PM.mov