Skip to content

Comments

optimistic thread state for thread context menu#1300

Merged
ahmetskilinc merged 1 commit intostagingfrom
06-13-optimistic_thread_state_for_thread_context_menu
Jun 27, 2025
Merged

optimistic thread state for thread context menu#1300
ahmetskilinc merged 1 commit intostagingfrom
06-13-optimistic_thread_state_for_thread_context_menu

Conversation

@ahmetskilinc
Copy link
Contributor

@ahmetskilinc ahmetskilinc commented Jun 13, 2025

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

  • ✨ New feature (non-breaking change which adds functionality)

Areas Affected

  • User Interface/Experience
  • Data Storage/Management

Testing Done

  • Manual testing performed

Summary by CodeRabbit

  • New Features

    • Added support for bulk label toggling on multiple mail threads.
    • Labels now update instantly in the UI with optimistic updates, reflecting changes before server confirmation.
  • Improvements

    • Checkbox states for labels now accurately reflect pending changes for a smoother user experience.
    • Enhanced feedback with toast messages indicating label changes, including support for multiple threads.
  • Style

    • Minor formatting improvements in context menu components.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 13, 2025

Caution

Review failed

The pull request is closed.

"""

Walkthrough

This update introduces optimistic UI handling for label toggling on mail threads, supporting both single and bulk operations. The LabelsList component and related hooks are refactored to apply label changes optimistically, track pending label state, and update UI immediately without waiting for server responses. Bulk selection logic and state synchronization are also enhanced.

Changes

File(s) Change Summary
apps/mail/components/context/thread-context.tsx Refactored LabelsList to support bulk label toggling with a new bulkSelected prop; switched to optimistic updates; updated usage.
apps/mail/components/mail/mail-list.tsx Enhanced optimistic label computation in Thread to reflect both additions and removals; updated label data source and dependencies.
apps/mail/components/mail/optimistic-thread-state.tsx Improved useOptimisticThreadState to track granular optimistic label additions/removals.
apps/mail/hooks/use-optimistic-actions.ts Added optimisticToggleLabel method for optimistic label toggling; integrated mutation and undo logic; exposed new API.

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)
Loading

Possibly related PRs

  • fixes some optimistic action bugs #1171: Related changes to useOptimisticActions hook focusing on internal execution timing and query invalidation, complementing this PR’s label toggling enhancements.

Suggested reviewers

  • MrgSub

Poem

In the warren of code, labels leap and twirl,
With optimism bright, they swiftly unfurl.
Bulk or single, toggles hop with glee,
UI updates instantly—what joy to see!
Threads wear new badges, no waiting in line,
This rabbit’s proud—your inbox will shine!
🐇✨
"""


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c786a9a and eec8ee1.

📒 Files selected for processing (4)
  • apps/mail/components/context/thread-context.tsx (4 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)
✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

@ahmetskilinc ahmetskilinc force-pushed the 06-13-optimistic_thread_state_for_thread_context_menu branch from 8f642d1 to 7134c0f Compare June 18, 2025 17:17
@ahmetskilinc ahmetskilinc marked this pull request as ready for review June 18, 2025 20:42
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 labelId as 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

📥 Commits

Reviewing files that changed from the base of the PR and between 3686619 and c3074c4.

📒 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 add flag, 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 bulkSelected prop 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.

@ahmetskilinc ahmetskilinc force-pushed the 06-13-optimistic_thread_state_for_thread_context_menu branch from c3074c4 to 4f87c22 Compare June 23, 2025 20:54
@graphite-app
Copy link
Contributor

graphite-app bot commented Jun 24, 2025

Merge activity

  • Jun 24, 6:05 AM UTC: This pull request can not be added to the Graphite merge queue. Please try rebasing and resubmitting to merge when ready.
  • Jun 24, 6:05 AM UTC: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..
  • Jun 27, 5:29 PM UTC: Graphite rebased this pull request as part of a merge.
  • Jun 27, 5:30 PM UTC: @ahmetskilinc merged this pull request with Graphite.

@ahmetskilinc ahmetskilinc force-pushed the 06-13-optimistic_thread_state_for_thread_context_menu branch from 4f87c22 to c786a9a Compare June 24, 2025 16:37
@ahmetskilinc
Copy link
Contributor Author

ready

@ahmetskilinc
Copy link
Contributor Author

@MrgSub ready

uses correct array of labels

fixes the return value in list labels
@ahmetskilinc ahmetskilinc force-pushed the 06-13-optimistic_thread_state_for_thread_context_menu branch from c786a9a to eec8ee1 Compare June 27, 2025 17:29
@ahmetskilinc ahmetskilinc merged commit 33d52ce into staging Jun 27, 2025
5 of 6 checks passed
@ahmetskilinc ahmetskilinc deleted the 06-13-optimistic_thread_state_for_thread_context_menu branch June 27, 2025 17:30
@coderabbitai coderabbitai bot mentioned this pull request Jul 8, 2025
8 tasks
@coderabbitai coderabbitai bot mentioned this pull request Aug 4, 2025
34 tasks
@coderabbitai coderabbitai bot mentioned this pull request Aug 11, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants