#fix: Ensure label list updates immediately after label creation + Added Black color as pre-selected color of labels.#1723
Conversation
|
""" WalkthroughThe changes update the default color scheme for label creation to a dark theme across both frontend and backend. Additionally, the label creation flow is modified so that after creating a new label, a success message is shown and the label list is refetched after a short delay, addressing label list update timing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NavMain (UI)
participant Server (TRPC)
participant Label List
User->>NavMain (UI): Submit new label
NavMain (UI)->>Server (TRPC): createLabel
Server (TRPC)-->>NavMain (UI): Label created (with dark theme colors)
NavMain (UI)->>NavMain (UI): Show success toast
NavMain (UI)->>Label List: (after 200ms) Refetch labels
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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 (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Enhanced label creation UX with improved synchronization and default color selection.
- Fixed immediate label visibility in
apps/mail/components/ui/nav-main.tsxby adding async/await and 200ms delay for proper list refresh - Set black (#202020) as default label background color with white text in
apps/mail/components/labels/label-dialog.tsx - Updated server-side schema in
apps/server/src/trpc/routes/label.tsto include default color values for consistent behavior
3 files reviewed, 4 comments
Edit PR Review Bot Settings | Greptile
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/mail/components/labels/label-dialog.tsx (1)
66-66: Fix color inconsistency for editing labels without color.The fallback color for editing labels still uses the old light theme colors, which is inconsistent with the new dark theme defaults used elsewhere in the component.
Apply this diff to maintain consistency:
- color: editingLabel.color || { backgroundColor: '#E2E2E2', textColor: '#000000' }, + color: editingLabel.color || { backgroundColor: '#202020', textColor: '#FFFFFF' },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/mail/components/labels/label-dialog.tsx(3 hunks)apps/mail/components/ui/nav-main.tsx(1 hunks)apps/server/src/trpc/routes/label.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
apps/mail/components/labels/label-dialog.tsx (2)
Learnt from: snehendu098
PR: Mail-0/Zero#1323
File: apps/mail/lib/themes/theme-utils.ts:318-318
Timestamp: 2025-06-24T06:22:58.753Z
Learning: In the Mail-0/Zero theme system (apps/mail/lib/themes/theme-utils.ts), when color themes are being applied, all color values come in HSL format, so there's no need for additional format validation when converting colors with hslToHex().
Learnt from: danteissaias
PR: Mail-0/Zero#902
File: apps/mail/components/connection/add.tsx:77-77
Timestamp: 2025-05-07T16:55:46.513Z
Learning: For the "Upgrade" link in AddConnectionDialog, using a proper <button> element instead of a <span> with onClick is recognized as an accessibility improvement but was deferred as out of scope in PR #902 (CSS variables PR).
apps/mail/components/ui/nav-main.tsx (2)
Learnt from: retrogtx
PR: Mail-0/Zero#1328
File: apps/mail/lib/hotkeys/mail-list-hotkeys.tsx:202-209
Timestamp: 2025-06-18T17:26:50.918Z
Learning: In apps/mail/lib/hotkeys/mail-list-hotkeys.tsx, the switchCategoryByIndex function using hardcoded indices for category hotkeys does not break when users reorder categories, contrary to the theoretical index-shifting issue. The actual implementation has constraints or mechanisms that prevent hotkey targeting issues.
Learnt from: retrogtx
PR: Mail-0/Zero#1468
File: apps/server/src/trpc/routes/mail.ts:331-331
Timestamp: 2025-06-28T03:56:09.376Z
Learning: In apps/server/src/trpc/routes/mail.ts, the user indicated they are not using ISO format for the scheduleAt parameter, despite the frontend code showing toISOString() usage in the ScheduleSendPicker component.
🧬 Code Graph Analysis (1)
apps/mail/components/ui/nav-main.tsx (3)
apps/server/src/lib/driver/google.ts (1)
createLabel(691-709)apps/server/src/routes/chat.ts (2)
createLabel(141-146)createLabel(700-711)apps/server/src/lib/driver/microsoft.ts (1)
createLabel(864-889)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (2)
apps/server/src/trpc/routes/label.ts (1)
44-47: LGTM! Server-side default colors align with dark theme.The default color values are correctly implemented and consistent with dark theme patterns. This ensures that when no color is explicitly provided, labels will have a professional dark appearance.
apps/mail/components/labels/label-dialog.tsx (1)
53-54: LGTM! Default color values consistently updated to dark theme.The default color values are properly updated to use the dark theme across form initialization and reset operations.
Also applies to: 71-71, 87-87
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic found 1 issue across 3 files. Review it in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
|
@MrgSub Please review this PR sir and let me know if you want any changes. Thanks ! |
|
@cubic-dev-ai /review |
@Anshumancanrock I've started the AI code review. It'll take a few minutes to complete. |
There was a problem hiding this comment.
cubic found 2 issues across 3 files. Review them in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic found 1 issue across 3 files. Review it in cubic.dev
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
There was a problem hiding this comment.
cubic reviewed 3 files and found no issues. Review PR in cubic.dev.
apps/mail/components/ui/nav-main.tsx
Outdated
| try { | ||
| await createLabel(data); | ||
| toast.success('Label created successfully'); | ||
| setTimeout(() => refetch(), 200); |
There was a problem hiding this comment.
why do we have a timeout here?
|
@MrgSub Sir.. I initially changed this to try/catch with with setTimeout but you are right this is problematic. I have now reverted the changes back to toast.promise() with proper promise changing. Please let me know if you want any other changes . Appreciate your time sir ! |
|
@MrgSub Please review this PR sir and let me know if you want any changes. Thanks ! |
|
This PR has merge conflicts and has been open for more than 3 days. It will be automatically closed. Please resolve the conflicts and reopen the PR if you'd like to continue working on it. |
2 participants
What does this PR do?
Description
This PR addresses two improvements related to the label creation experience:
Label creation delay fix:
Previously, when a new label was created via the sidebar "+" button, it wouldn’t show up immediately in the labels list. Users had to refresh the page or create another label to see the first one. This has been resolved by ensuring the label creation (
labels.create) completes before triggering a fresh fetch (labels.list). The result is a smoother and more intuitive experience.Default color selection:
When opening the "Create Label" dialog, no color was selected by default, which could be confusing. The first color option (black) is now pre-selected automatically when the dialog opens, offering a more consistent and user-friendly interaction.
Type of Change
Areas Affected
Testing Done
Manual Test Coverage:
Security Considerations
Checklist
Additional Notes
Technical Details:
Files modified:
nav-main.tsx– Updated label creation logic to improve UI synclabel-dialog.tsx– Added logic for default color selectionlabel.ts– Updated default color value on the server sideScreenshots/Recordings:
Before fix:
Recording.2025-07-14.013556.mp4
After fix:
Recording.2025-07-14.003115.1.mp4
Summary by cubic
Newly created labels now appear instantly in the sidebar, and the "Create Label" dialog pre-selects black as the default color.
Bug Fixes
UI Improvements
Summary by CodeRabbit
New Features
User Experience