optimistic thread state for thread context menu#1300
Conversation
|
Caution Review failedThe pull request is closed. """ WalkthroughThis update introduces optimistic UI handling for label toggling on mail threads, supporting both single and bulk operations. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LabelsList
participant useOptimisticActions
participant useOptimisticThreadState
participant Server
User->>LabelsList: Toggle label (single or bulk)
LabelsList->>useOptimisticActions: optimisticToggleLabel(threadIds, labelId, add)
useOptimisticActions->>useOptimisticThreadState: Add optimistic action
useOptimisticActions->>Server: mutate labels (async)
useOptimisticThreadState->>LabelsList: Update UI with optimistic state
Server-->>useOptimisticActions: Mutation result
useOptimisticActions->>useOptimisticThreadState: Remove optimistic action (on completion)
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
8f642d1 to
7134c0f
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/mail/components/mail/mail-list.tsx (1)
117-119: Consider using actual label names instead of IDs.Using
labelIdas the label name might not display correctly if the actual label name differs from the ID. Consider fetching the actual label data.optimisticState.optimisticLabels.addedLabelIds.forEach((labelId) => { if (!labels.some((label) => label.id === labelId)) { - labels.push({ id: labelId, name: labelId }); + // Consider fetching actual label data or using a lookup + labels.push({ id: labelId, name: labelId }); // TODO: Use actual label name } });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/mail/components/context/thread-context.tsx(2 hunks)apps/mail/components/mail/mail-list.tsx(2 hunks)apps/mail/components/mail/optimistic-thread-state.tsx(2 hunks)apps/mail/hooks/use-optimistic-actions.ts(4 hunks)
🔇 Additional comments (10)
apps/mail/components/mail/optimistic-thread-state.tsx (2)
34-37: Enhanced label state tracking looks good!The granular tracking of added and removed label IDs is a significant improvement over boolean flags, providing more precise state management for optimistic updates.
64-68: LABEL case implementation is correct.The logic properly distributes label IDs to the appropriate arrays based on the
addflag, maintaining clear separation between additions and removals.apps/mail/hooks/use-optimistic-actions.ts (3)
35-35: Added modifyLabels mutation integration.Good addition of the mutation hook following the established pattern.
54-57: Label query refetch integration is correct.Properly added label list refetch to ensure UI consistency after label modifications.
410-412: Toast message pluralization logic is well implemented.Good UX consideration with proper pluralization for bulk operations.
apps/mail/components/mail/mail-list.tsx (2)
111-121: Optimistic label computation logic is sound.The implementation correctly filters out removed labels and adds optimistically added ones, maintaining proper state consistency.
208-208: Correct integration of optimistic labels.Properly updated to use the computed optimistic labels instead of raw thread data.
apps/mail/components/context/thread-context.tsx (3)
60-68: Good refactor to support bulk operations.The addition of
bulkSelectedprop and integration with optimistic actions is well implemented.
75-91: Label toggle logic correctly handles optimistic state.The implementation properly considers both current thread labels and optimistic changes to determine the correct toggle action.
480-480: Proper integration of bulk selection.Correctly passing the bulk selected thread IDs to enable bulk label operations.
c3074c4 to
4f87c22
Compare
Merge activity
|
4f87c22 to
c786a9a
Compare
|
ready |
|
@MrgSub ready |
uses correct array of labels fixes the return value in list labels
c786a9a to
eec8ee1
Compare

Implement Optimistic UI for Label Management in Email Threads
This PR adds optimistic UI updates for label management in email threads context menu.
Type of Change
Areas Affected
Testing Done
Summary by CodeRabbit
New Features
Improvements
Style