feat(chats): unreads

[Flemmli97]

What this PR does 📖

• Adds unread feature:
  • Wireup unread badge for chat button in navigation bar to display unread messages. Only gets triggered if not viewing the chat
  • Add unread feature in chat:
    • Adds a separator for unread messages in chat with date
    • Adds an indicator at the top of chat for amount of unread messages in chat
• Reduce the threshold where chat scrolls down (bug(Chat): Scroll will jump to bottom of the chat  #486, see if thats better now. the feature itself is there to automatically scroll down whenever chat changes for incoming messages)

Which issue(s) this PR fixes 🔨

• Resolve bug(Chat): Scroll will jump to bottom of the chat  #486
• Resolve feat(Notification): Wire up unreads to Warp #419
• Resolve task(Chats): Add count indicator for incoming messages #683

[github-actions]

Download the app installers for this pull request:

• build-macos.zip
• build-ubuntu.zip
• build-windows.zip
• build-android.zip

[github-actions]

Automated Test Results

 110 passed
 15 skipped

Details

 125 tests across 16 suites
 13 minutes, 26 seconds
 95c018d

Skipped tests

Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Local and Remote - Updating note
Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Local - Updating username, status, banner and profile picture
Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Remote - Updating username, status, banner and profile picture
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K2 - Font dropdown should show expected font names
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K15 - Emoji Font dropdown should show expected emoji font names
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K18 - Default Profile Picture Style dropdown should show expected default profile picture styles
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O1, 06 - Message at top of page and custom keybinds listed correctly
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O2, 04 - Clicking a key should activate the Recorded Keys - User can save keybind
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O3 - Action dropdown should display correct keybind actions
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O5 - Clicking Cancel should cancel any custom keybinding the user was trying to add
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O7 - Highlighted border should display when user clicks cancel
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O8 - Clicking Revert Keybindings should revert any custom keybindings the user has saved
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O9 - Highlighted border should be displayed when clicking Revert Keybindings
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O10 - Clicking the backwards arrow should revert specific custom keybinding
Automated Tests on Chrome Desktop › 20-settings-developer.spec.ts › Settings Developer Tests › T4 - Clicking Clear State should clear users state

[github-actions]

Playwright test execution is complete! You can find the test results report here

[phillsatellite]

Hey Flem! So far this is working awesome theres just a little thing I wanted to mention. (I can create a new ticket if you'd rather fix in there) But it seems like separator for new unread messages will only cover half of the chat width and has a little ui issue with those black areas that appear on it. Other than that its working very well

[Flemmli97]

that thing on top is not the separator. but it is broken. what browser you using?

[stavares843]

brave browser @Flemmli97

[phillsatellite]

Also replicated on Chrome as well

[stavares843]

same on opera

[stavares843]

3294293349009.mov

when i go to the chat, i dont know which messages are unread

phil gets this but that does not appear on my side

browser - opera

[stavares843]

if im on the chat, and im scrolled up and i get new messages, theres no banner with the unreads

discord has this

[stavares843]

why does this badge does not have a number of unreads?

i know we have the unreads overall number on the bottom but if i have 20 chats, 23094309 unreads, i dont know how many unreads each chat with unreads has

[stavares843]

i only get this banner with the unreads first time starting a chat

after that i only get the unread dot on the sidebar

[Flemmli97]

if im on the chat, and im scrolled up and i get new messages, theres no banner with the unreads

discord has this

unreads doesnt appear if you are viewing the chat

[Flemmli97]

why does this badge does not have a number of unreads?

i know we have the unreads overall number on the bottom but if i have 20 chats, 23094309 unreads, i dont know how many unreads each chat with unreads has

i didnt know that dot was supposed to be unread Oo (i didnt add that) but i can fix that

[stavares843]

unreads doesnt appear if you are viewing the chat

but is that on purpose?

[Flemmli97]

unreads doesnt appear if you are viewing the chat

but is that on purpose?

yes. do we want to change that?

also for the badge on the sidebar: it seems that is also intended. like there is a boolean with simpleUnreads which is turned on. and if off will show the number

[stavares843]

unreads doesnt appear if you are viewing the chat

if you are scroll up id'd say yes