Feat: Note Tooltip On Hover + Note Text Overflow fixes#1553
Feat: Note Tooltip On Hover + Note Text Overflow fixes#1553Pheewww wants to merge 3 commits intoMail-0:stagingfrom
Conversation
WalkthroughThis update enhances the mail list and note panel components by adding a tooltip to the notes icon that displays the last note's content, reorganizes imports, and applies UI improvements such as scrollable note content and width constraints. No public API or exported entity signatures are changed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MailList
participant NotesPanel
User->>MailList: Hover over notes icon in thread
MailList->>MailList: Retrieve last note content (if any)
MailList-->>User: Show tooltip with last note content
User->>NotesPanel: View notes panel
NotesPanel->>NotesPanel: Display notes with scrollable content and width constraint
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 (
|
![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
🧹 Nitpick comments (1)
apps/mail/components/mail/mail-list.tsx (1)
549-558: Standardize tooltip styling for consistency.The tooltip implementation works correctly, but the styling classes
border-yellow-300 border-solidare inconsistent with other tooltips in the codebase which use the default styling.Consider using consistent tooltip styling:
- <TooltipContent side="bottom" className="p-1 text-xs md:max-w-52 max-w-60 border-yellow-300 border-solid"> + <TooltipContent side="bottom" className="p-1 text-xs md:max-w-52 max-w-60">The yellow border may not provide sufficient contrast in all theme modes and differs from the standard tooltip appearance used elsewhere.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/mail/components/mail/mail-list.tsx(5 hunks)apps/mail/components/mail/note-panel.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
apps/mail/components/mail/note-panel.tsx (1)
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.
apps/mail/components/mail/mail-list.tsx (1)
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.
🧬 Code Graph Analysis (1)
apps/mail/components/mail/mail-list.tsx (2)
apps/mail/components/ui/tooltip.tsx (3)
Tooltip(72-72)TooltipTrigger(72-72)TooltipContent(72-72)apps/mail/lib/utils.ts (1)
formatDate(121-180)
🔇 Additional comments (5)
apps/mail/components/mail/note-panel.tsx (3)
135-135: Good addition for handling long note content.The scrollable container with
max-h-60 overflow-y-autoeffectively addresses the text overflow issue mentioned in the PR objectives.
537-539: Correct conditional tooltip behavior.Properly prevents the tooltip from appearing when the notes panel is open, addressing the background tooltip issue mentioned in the PR objectives.
590-590: Width constraint improves layout consistency.The
max-w-[350px]constraint prevents the notes list from becoming too wide, complementing the scrollable content fix.apps/mail/components/mail/mail-list.tsx (2)
45-45: Import additions are appropriate.The new imports for
useThreadNotesandStickyNoteare necessary for the tooltip feature implementation.Also applies to: 54-54
716-724: Minor formatting improvement.The JSX formatting changes in the Draft component improve code readability.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
There could be many notes, we need a better design for this @nizzyabi |
2 participants
Added feature to view last added note without opening notes panel + bugs fixes
Other bugs are fixed in #1484
BEFORE
AFTER
For Large Texts
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Improvements
Style