feat: implement offline message persistence and refined UI #1096
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.
This PR implements robust Offline Message Persistence along with a refined UI for failed message delivery. It ensures that messages sent while offline are not lost, allows users to recover them after a page reload, and provides a clear, intuitive interface for resending or deleting failed attempts.
Closes #1091
Screenshots/Video
Screencast.from.2026-01-23.22-34-23.online-video-cutter.com.mp4
Key Changes
1. Offline Persistence (localStorage)
Implemented
localStorage-based caching for messages that fail to send.Messages are partitioned by Room ID (
rid), ensuring they only reappear in their respective channels.Persisted messages are automatically re-injected into the message store during:
Added session cleanup logic to wipe offline caches on user logout.
2. Refined Message Sorting
Ensures global ordering consistency between:
Resend behavior: When a message is resent, its timestamp is updated to the current time, naturally moving it to the bottom of the chat.
3. UX & UI Improvements
Offline Indicator: Added a centered red
RiWifiOffLineicon for messages that fail to send.Custom Error Menu: Clicking the error icon opens an upward-positioned menu with: