feat: add subject to thread display#324
Conversation
|
@sergio-jva is attempting to deploy a commit to the 0 Team on Vercel. A member of the Team first needs to authorize it. |
components/mail/thread-display.tsx
Outdated
There was a problem hiding this comment.
All the changes listed are mostly being highlighted for the memory manage of git, the only changes made here are
Importing the ThreadSubject component
Wrapping the header on a div, now including ThreadSubject (This is the thing messing the changes)
Adding the ThreadSubject Component almost at the end
I can make the change other way If think necessary, like importing the component and adding it only under the header, and removing the border, I let this to you folks
|
Loom please |
sergioxro
force-pushed
the
feat/thread-subject
branch
from
f2927ad to
41c68f0
Compare
|
could you put it in the same line as the icons? between the close and the other icons to the right. |
|
@ahmetskilinc it was my first approach, and the full subject was going to be displayed with the Tooltip, however, for the reason of the big subjects is that I send it to a second line also, think of the scenario where te user has to copy the entire subject, or a part that is not visible, that why I made it expandable but I can try to make it expandable on the same row, just I don't think its going to look great hah |
|
by putting it on a new line you destroy the top bar aligning with the top bar on the mail-list panel. can we keep it uniform and put the subject somewhere else. maybe where the users email/name is shown? |
|
fixes #301 |
sergioxro
force-pushed
the
feat/thread-subject
branch
from
41c68f0 to
25ad186
Compare
|
I think it can be much simpler, truncate it, and add a popup on hover to display the full subject? |
sergioxro
force-pushed
the
feat/thread-subject
branch
from
25ad186 to
abcc90e
Compare
|
I think let's truncate and when someone hovers display a popup |
sergioxro
force-pushed
the
feat/thread-subject
branch
from
abcc90e to
d9991f9
Compare
WalkthroughThis pull request updates email subject handling and adds a new UI component while applying widespread formatting improvements. In the mail API driver, default subject values have been modified. The new ThreadSubject component is introduced into ThreadDisplay to render email subject text with overflow detection and copy-to-clipboard support. In addition, many files have been refactored—imports reordered, CSS class names reorganized, and minor syntactical adjustments made across authentication, route, UI, configuration, and Sentry-related code—without altering core functionality. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant TS as ThreadSubject
participant Clipboard as Clipboard API
participant Toast as Toast Library
User->>TS: Render with subject prop
TS->>TS: Check for subject text overflow (via useRef & useEffect)
User->>TS: Click copy button (if enabled)
TS->>Clipboard: Trigger copy of subject text
alt Copy Succeeds
Clipboard-->>TS: Return success status
TS->>Toast: Display success toast notification
else Copy Fails
Clipboard-->>TS: Return error status
TS->>Toast: Display error toast notification
end
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 0
🧹 Nitpick comments (3)
apps/mail/components/mail/thread-display.tsx (2)
229-229: Consider the flex class ordering for better readabilityWhile functionally correct, it's generally a good practice to keep related utility classes together.
-<div className="flex items-center gap-2 flex-1"> +<div className="flex flex-1 items-center gap-2">
244-244: Successfully implemented thread subject displayThe ThreadSubject component is correctly integrated with appropriate props. It receives the subject from the first email in the thread and the isMobile status.
However, based on the PR comments, there was discussion about alternative placement options for the subject, such as aligning it with the icons in the top bar or placing it where the user's email/name is shown. You might want to consider these placement suggestions for a more streamlined UI.
Would you like me to suggest alternative implementations for the subject placement that align with the feedback in the PR comments?
apps/mail/components/mail/thread-subject.tsx (1)
60-74: Consider making copy functionality available on desktop tooCurrently, the copy button is only shown on mobile devices when a subject exists. Consider making this functionality available on desktop as well, as users might want to copy the subject regardless of device type.
- {(isMobile && subject) && + {subject && (<Tooltip> <TooltipTrigger asChild> <Button variant="ghost" - className="md:h-fit md:px-2" + className={cn("md:h-fit md:px-2", !isMobile && "hidden md:block")} onClick={handleCopySubject} > <Copy className="h-4 w-4" /> <span className="sr-only">Copy subject</span> </Button> </TooltipTrigger> <TooltipContent>Copy subject</TooltipContent> </Tooltip>) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/mail/app/api/driver/google.ts(1 hunks)apps/mail/components/draft/draft.tsx(1 hunks)apps/mail/components/mail/thread-display.tsx(3 hunks)apps/mail/components/mail/thread-subject.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/mail/components/draft/draft.tsx
🔇 Additional comments (7)
apps/mail/app/api/driver/google.ts (1)
69-69: Improved error handling for missing subject headersChanged the default value for missing subject headers from a failure message to an empty string, which allows for more graceful handling when no subject is found. This aligns well with the new thread subject display functionality.
apps/mail/components/mail/thread-display.tsx (1)
23-23: Good addition of the new ThreadSubject component importThis import correctly brings in the new component that will display the thread subject.
apps/mail/components/mail/thread-subject.tsx (5)
10-13: Clear and concise props interfaceThe interface is well-defined with appropriate optional properties.
15-19: Good implementation of default subject textThe component correctly handles the case when no subject is provided by displaying "(no subject)" instead, which is consistent with the empty string default in the API driver.
20-26: Effective overflow detection implementationThe use of useRef and useEffect to detect text overflow is a good approach. The component correctly compares scrollHeight and clientHeight to determine if the text is overflowing.
28-37: Well-implemented copy functionality with proper error handlingThe copy function is implemented correctly with appropriate success and error handling using toast notifications.
39-59: Well-structured tooltip implementation for overflow handlingThe tooltip is implemented correctly, showing the full subject text only when it's overflowing. The use of conditional rendering for the TooltipContent is a good optimization.
sergioxro
force-pushed
the
feat/thread-subject
branch
3 times, most recently
from
3ac82d9 to
8417b92
Compare
|
What do you think @MrgSub? Showcase.mp4 |
|
I like it |
sergioxro
force-pushed
the
feat/thread-subject
branch
from
8417b92 to
ac4d16d
Compare
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
sergioxro
force-pushed
the
feat/thread-subject
branch
from
ac4d16d to
ae514f9
Compare
|
resolved conflicts |
|
Bump |
sergioxro
force-pushed
the
feat/thread-subject
branch
2 times, most recently
from
410d66a to
bf04e01
Compare
changes: add subject to thread display create thread-subject component thread-subject is collapsable the componen detects is subject is long enough to require the collapse button
sergioxro
force-pushed
the
feat/thread-subject
branch
from
79ae205 to
2d2598e
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
apps/mail/components/mail/thread-subject.tsx (5)
21-26: Consider adding window resize handling for overflow detection.The current implementation only checks for overflow when the subject changes, but not when the container size changes (e.g., on window resize). This could lead to incorrect overflow detection if the viewport is resized.
useEffect(() => { if (textRef.current) { const isClamped = textRef.current.scrollHeight > textRef.current.clientHeight; setIsOverflowing(isClamped); } - }, [subject]); + }, [subject]); + + useEffect(() => { + const handleResize = () => { + if (textRef.current) { + const isClamped = textRef.current.scrollHeight > textRef.current.clientHeight; + setIsOverflowing(isClamped); + } + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []);
28-38: Add fallback for browsers without Clipboard API support.While most modern browsers support the Clipboard API, it's good practice to include a fallback for older browsers or environments where the API might not be available.
const handleCopySubject = () => { - navigator.clipboard - .writeText(subjectContent) - .then(() => { - toast.success("Subject copied to clipboard"); - }) - .catch((error) => { - console.error(error); - toast.error("Failed to copy subject"); - }); + if (navigator.clipboard) { + navigator.clipboard + .writeText(subjectContent) + .then(() => { + toast.success("Subject copied to clipboard"); + }) + .catch((error) => { + console.error(error); + fallbackCopyTextToClipboard(); + }); + } else { + fallbackCopyTextToClipboard(); + } + }; + + const fallbackCopyTextToClipboard = () => { + try { + const textArea = document.createElement("textarea"); + textArea.value = subjectContent; + textArea.style.position = "fixed"; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + const successful = document.execCommand("copy"); + document.body.removeChild(textArea); + if (successful) { + toast.success("Subject copied to clipboard"); + } else { + toast.error("Failed to copy subject"); + } + } catch (error) { + console.error(error); + toast.error("Failed to copy subject"); + }
44-52: Add accessibility enhancement for tooltip trigger.The span element has a cursor-pointer class suggesting it's clickable, but it doesn't have any onClick handler. Either remove the cursor-pointer class or add an interaction (like expanding the text on click) to improve user experience.
<span ref={textRef} className={cn( - "line-clamp-1 block cursor-pointer font-semibold", + "line-clamp-1 block font-semibold", !subject && "opacity-50", )} > {subjectContent} </span>
60-70: Consider adding the copy button for desktop users as well.The copy functionality is only available for mobile users, but desktop users might also benefit from this feature, especially for very long subjects.
- {subject && isMobile && isOverflowing && ( + {subject && (isMobile ? isOverflowing : true) && ( <Tooltip> <TooltipTrigger asChild> <Button variant="ghost" className="md:h-fit md:px-2" onClick={handleCopySubject}> <Copy className="h-4 w-4" /> <span className="sr-only">Copy subject</span> </Button> </TooltipTrigger> <TooltipContent>Copy subject</TooltipContent> </Tooltip> )}
55-56: Consider adjusting the tooltip max-width for different viewport sizes.The fixed max-width of 600px might be too large for smaller viewports. Consider using responsive values or a percentage-based width.
- <TooltipContent className="max-w-[600px] break-words text-base"> + <TooltipContent className="max-w-[min(600px,90vw)] break-words text-base">apps/mail/components/mail/search-bar.tsx (3)
140-205: Well-implemented input handling with position calculation.The
handleInputChangefunction effectively processes user input, matches filter prefixes, and positions the date picker. The DOM manipulation for calculating position is well-executed.Consider adding a window resize listener to recalculate positions when the window size changes.
useEffect(() => { + const handleResize = () => { + if (datePickerState.show && inputRef.current) { + // Recalculate position logic here + } + }; + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); }, [datePickerState.show]);
227-260: Advanced keyboard navigation implementation.The grid-based navigation calculation is sophisticated and handles directional movement well. However, the current implementation stops at boundaries rather than wrapping around.
Consider implementing wrap-around navigation for better UX:
case "right": nextIndex = prev.activeIndex < prev.filtered.length - 1 ? prev.activeIndex + 1 - : prev.activeIndex; + : 0; // Wrap to first item break; case "left": nextIndex = prev.activeIndex > 0 ? prev.activeIndex - 1 - : 0; + : prev.filtered.length - 1; // Wrap to last item break;
575-797: Clean UI implementation with consistent styling.The UI elements follow a consistent design system with appropriate class names. The responsive design adapts well to mobile views, and the filtering UI is intuitive.
The only potential improvement would be extracting some of the repeated class combinations into named utility classes to reduce duplication.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (107)
apps/mail/app/(auth)/login/login-client.tsx(10 hunks)apps/mail/app/(auth)/login/page.tsx(1 hunks)apps/mail/app/(auth)/zero/login/page.tsx(2 hunks)apps/mail/app/(auth)/zero/signup/page.tsx(4 hunks)apps/mail/app/(full-width)/contributors/page.tsx(7 hunks)apps/mail/app/(routes)/create/layout.tsx(1 hunks)apps/mail/app/(routes)/create/page.tsx(1 hunks)apps/mail/app/(routes)/developer/page.tsx(3 hunks)apps/mail/app/(routes)/layout.tsx(1 hunks)apps/mail/app/(routes)/mail/[folder]/page.tsx(1 hunks)apps/mail/app/(routes)/mail/create/page.tsx(1 hunks)apps/mail/app/(routes)/mail/page.tsx(1 hunks)apps/mail/app/(routes)/mail/under-construction/[path]/back-button.tsx(1 hunks)apps/mail/app/(routes)/mail/under-construction/[path]/page.tsx(1 hunks)apps/mail/app/(routes)/settings/general/page.tsx(2 hunks)apps/mail/app/(routes)/settings/layout.tsx(3 hunks)apps/mail/app/api/driver/google.ts(2 hunks)apps/mail/app/error.tsx(2 hunks)apps/mail/app/global-error.tsx(1 hunks)apps/mail/app/page.tsx(1 hunks)apps/mail/components/context/command-palette-context.tsx(1 hunks)apps/mail/components/context/sidebar-context.tsx(1 hunks)apps/mail/components/context/thread-context.tsx(1 hunks)apps/mail/components/cookies/cookie-dialog.tsx(7 hunks)apps/mail/components/cookies/toggle.tsx(1 hunks)apps/mail/components/create/ai-textarea.tsx(1 hunks)apps/mail/components/create/editor-buttons.tsx(1 hunks)apps/mail/components/create/editor-menu.tsx(1 hunks)apps/mail/components/create/editor.colors.tsx(3 hunks)apps/mail/components/create/editor.link-selector.tsx(2 hunks)apps/mail/components/create/editor.node-selector.tsx(2 hunks)apps/mail/components/create/selectors/link-selector.tsx(1 hunks)apps/mail/components/create/selectors/math-selector.tsx(1 hunks)apps/mail/components/create/selectors/node-selector.tsx(1 hunks)apps/mail/components/create/selectors/text-buttons.tsx(1 hunks)apps/mail/components/create/slash-command.tsx(1 hunks)apps/mail/components/create/uploaded-file-icon.tsx(1 hunks)apps/mail/components/home/footer.tsx(1 hunks)apps/mail/components/home/hero-image.tsx(1 hunks)apps/mail/components/home/hero.tsx(4 hunks)apps/mail/components/icons/animated/align-vertical.tsx(1 hunks)apps/mail/components/icons/animated/archive.tsx(1 hunks)apps/mail/components/icons/animated/arrow-left.tsx(1 hunks)apps/mail/components/icons/animated/bell.tsx(1 hunks)apps/mail/components/icons/animated/book-text.tsx(1 hunks)apps/mail/components/icons/animated/cart.tsx(1 hunks)apps/mail/components/icons/animated/check-check.tsx(1 hunks)apps/mail/components/icons/animated/expand.tsx(4 hunks)apps/mail/components/icons/animated/filter.tsx(1 hunks)apps/mail/components/icons/animated/inbox.tsx(1 hunks)apps/mail/components/icons/animated/keyboard.tsx(1 hunks)apps/mail/components/icons/animated/message.tsx(1 hunks)apps/mail/components/icons/animated/moon.tsx(1 hunks)apps/mail/components/icons/animated/more-vertical.tsx(3 hunks)apps/mail/components/icons/animated/reply.tsx(4 hunks)apps/mail/components/icons/animated/search.tsx(1 hunks)apps/mail/components/icons/animated/settings-gear.tsx(1 hunks)apps/mail/components/icons/animated/settings-lines.tsx(1 hunks)apps/mail/components/icons/animated/shield.tsx(1 hunks)apps/mail/components/icons/animated/sparkles.tsx(1 hunks)apps/mail/components/icons/animated/square-pen.tsx(1 hunks)apps/mail/components/icons/animated/sun.tsx(1 hunks)apps/mail/components/icons/animated/trash.tsx(1 hunks)apps/mail/components/icons/animated/users.tsx(1 hunks)apps/mail/components/icons/animated/x.tsx(1 hunks)apps/mail/components/icons/icons.tsx(1 hunks)apps/mail/components/mail/account-switcher.tsx(2 hunks)apps/mail/components/mail/mail-compose.tsx(8 hunks)apps/mail/components/mail/mail-skeleton.tsx(1 hunks)apps/mail/components/mail/mail.tsx(1 hunks)apps/mail/components/mail/navbar.tsx(2 hunks)apps/mail/components/mail/reply-composer.tsx(1 hunks)apps/mail/components/mail/search-bar.tsx(20 hunks)apps/mail/components/mail/thread-display.tsx(4 hunks)apps/mail/components/mail/thread-subject.tsx(1 hunks)apps/mail/components/responsive-modal.tsx(2 hunks)apps/mail/components/settings/settings-card.tsx(1 hunks)apps/mail/components/theme/theme-toggle.tsx(2 hunks)apps/mail/components/ui/accordion.tsx(2 hunks)apps/mail/components/ui/account-switcher.tsx(2 hunks)apps/mail/components/ui/animated-number.tsx(2 hunks)apps/mail/components/ui/avatar.tsx(1 hunks)apps/mail/components/ui/card.tsx(2 hunks)apps/mail/components/ui/chart.tsx(6 hunks)apps/mail/components/ui/command.tsx(7 hunks)apps/mail/components/ui/context-menu.tsx(8 hunks)apps/mail/components/ui/dialog.tsx(3 hunks)apps/mail/components/ui/drawer.tsx(2 hunks)apps/mail/components/ui/dropdown-menu.tsx(7 hunks)apps/mail/components/ui/input-otp.tsx(3 hunks)apps/mail/components/ui/input.tsx(1 hunks)apps/mail/components/ui/nav-user.tsx(1 hunks)apps/mail/components/ui/popover.tsx(1 hunks)apps/mail/components/ui/radio-group.tsx(1 hunks)apps/mail/components/ui/resizable.tsx(1 hunks)apps/mail/components/ui/scroll-area.tsx(1 hunks)apps/mail/components/ui/select.tsx(4 hunks)apps/mail/components/ui/separator.tsx(1 hunks)apps/mail/components/ui/sheet.tsx(3 hunks)apps/mail/components/ui/sidebar.tsx(1 hunks)apps/mail/components/ui/skeleton.tsx(1 hunks)apps/mail/components/ui/spinner.tsx(1 hunks)apps/mail/components/ui/switch.tsx(1 hunks)apps/mail/components/ui/tabs.tsx(3 hunks)apps/mail/components/ui/text-shimmer.tsx(3 hunks)apps/mail/components/ui/textarea.tsx(1 hunks)apps/mail/instrumentation.ts(1 hunks)
⛔ Files not processed due to max files limit (3)
- apps/mail/lib/providers.tsx
- apps/mail/next.config.ts
- apps/mail/sentry.client.config.ts
🚧 Files skipped from review as they are similar to previous changes (105)
- apps/mail/components/ui/separator.tsx
- apps/mail/app/(routes)/mail/under-construction/[path]/back-button.tsx
- apps/mail/components/icons/animated/inbox.tsx
- apps/mail/components/ui/skeleton.tsx
- apps/mail/components/icons/animated/bell.tsx
- apps/mail/app/(routes)/mail/under-construction/[path]/page.tsx
- apps/mail/components/icons/animated/search.tsx
- apps/mail/components/icons/animated/users.tsx
- apps/mail/components/icons/animated/square-pen.tsx
- apps/mail/components/icons/animated/x.tsx
- apps/mail/components/cookies/toggle.tsx
- apps/mail/app/(routes)/create/layout.tsx
- apps/mail/components/icons/animated/book-text.tsx
- apps/mail/components/ui/sidebar.tsx
- apps/mail/components/ui/nav-user.tsx
- apps/mail/components/icons/animated/moon.tsx
- apps/mail/components/icons/animated/sun.tsx
- apps/mail/app/(routes)/layout.tsx
- apps/mail/components/ui/scroll-area.tsx
- apps/mail/components/ui/textarea.tsx
- apps/mail/components/icons/animated/settings-gear.tsx
- apps/mail/components/create/editor.link-selector.tsx
- apps/mail/components/ui/text-shimmer.tsx
- apps/mail/components/ui/command.tsx
- apps/mail/components/icons/animated/arrow-left.tsx
- apps/mail/components/icons/animated/shield.tsx
- apps/mail/components/create/selectors/math-selector.tsx
- apps/mail/components/home/hero-image.tsx
- apps/mail/components/icons/animated/archive.tsx
- apps/mail/app/(routes)/mail/create/page.tsx
- apps/mail/components/create/slash-command.tsx
- apps/mail/components/icons/animated/cart.tsx
- apps/mail/components/icons/animated/keyboard.tsx
- apps/mail/components/ui/context-menu.tsx
- apps/mail/components/ui/avatar.tsx
- apps/mail/app/(routes)/create/page.tsx
- apps/mail/components/mail/thread-display.tsx
- apps/mail/app/global-error.tsx
- apps/mail/components/create/uploaded-file-icon.tsx
- apps/mail/components/icons/animated/expand.tsx
- apps/mail/components/ui/input.tsx
- apps/mail/components/ui/popover.tsx
- apps/mail/components/icons/animated/filter.tsx
- apps/mail/components/ui/card.tsx
- apps/mail/components/icons/animated/trash.tsx
- apps/mail/components/mail/mail-compose.tsx
- apps/mail/components/icons/animated/sparkles.tsx
- apps/mail/components/context/command-palette-context.tsx
- apps/mail/app/page.tsx
- apps/mail/components/icons/animated/align-vertical.tsx
- apps/mail/app/(routes)/mail/[folder]/page.tsx
- apps/mail/components/mail/mail-skeleton.tsx
- apps/mail/components/mail/reply-composer.tsx
- apps/mail/components/create/editor-menu.tsx
- apps/mail/components/context/sidebar-context.tsx
- apps/mail/components/ui/dialog.tsx
- apps/mail/components/ui/dropdown-menu.tsx
- apps/mail/components/settings/settings-card.tsx
- apps/mail/components/mail/account-switcher.tsx
- apps/mail/components/icons/animated/check-check.tsx
- apps/mail/components/create/editor.node-selector.tsx
- apps/mail/app/error.tsx
- apps/mail/components/ui/account-switcher.tsx
- apps/mail/components/icons/animated/message.tsx
- apps/mail/components/mail/navbar.tsx
- apps/mail/components/ui/sheet.tsx
- apps/mail/components/ui/accordion.tsx
- apps/mail/components/theme/theme-toggle.tsx
- apps/mail/components/home/hero.tsx
- apps/mail/components/ui/drawer.tsx
- apps/mail/components/ui/animated-number.tsx
- apps/mail/components/ui/input-otp.tsx
- apps/mail/components/ui/chart.tsx
- apps/mail/components/context/thread-context.tsx
- apps/mail/components/create/ai-textarea.tsx
- apps/mail/app/(routes)/mail/page.tsx
- apps/mail/app/(routes)/settings/general/page.tsx
- apps/mail/components/mail/mail.tsx
- apps/mail/app/(auth)/zero/login/page.tsx
- apps/mail/components/create/editor-buttons.tsx
- apps/mail/components/icons/animated/settings-lines.tsx
- apps/mail/components/icons/icons.tsx
- apps/mail/components/create/selectors/text-buttons.tsx
- apps/mail/app/(auth)/login/page.tsx
- apps/mail/components/create/selectors/link-selector.tsx
- apps/mail/components/create/selectors/node-selector.tsx
- apps/mail/components/ui/spinner.tsx
- apps/mail/app/api/driver/google.ts
- apps/mail/components/cookies/cookie-dialog.tsx
- apps/mail/components/ui/tabs.tsx
- apps/mail/components/icons/animated/more-vertical.tsx
- apps/mail/components/icons/animated/reply.tsx
- apps/mail/app/(full-width)/contributors/page.tsx
- apps/mail/components/ui/resizable.tsx
- apps/mail/app/(routes)/settings/layout.tsx
- apps/mail/components/ui/radio-group.tsx
- apps/mail/components/create/editor.colors.tsx
- apps/mail/app/(routes)/developer/page.tsx
- apps/mail/app/(auth)/zero/signup/page.tsx
- apps/mail/components/responsive-modal.tsx
- apps/mail/components/ui/select.tsx
- apps/mail/app/(auth)/login/login-client.tsx
- apps/mail/components/ui/switch.tsx
- apps/mail/components/home/footer.tsx
- apps/mail/instrumentation.ts
🔇 Additional comments (8)
apps/mail/components/mail/thread-subject.tsx (2)
1-9: Well-organized imports and directives.The "use client" directive is correctly placed at the top, and imports are logically organized into UI components, React hooks, and utilities.
15-19: Good implementation of default subject handling.The component properly handles missing subject values with a default "(no subject)" text and applies appropriate styling.
apps/mail/components/mail/search-bar.tsx (6)
8-9: Well-structured imports with good organization.The new imports have been properly structured, splitting utility functions, hooks, and component imports logically. The addition of filter-related utilities enhances the search functionality.
Also applies to: 12-12, 20-20
104-104: Good state management for suggestions and date picker.The addition of
activePrefixto track the current filter prefix and the improveddatePickerStatewithfilterTypeand position tracking enable better UI interactions and positioning.Also applies to: 109-110
121-138: Effective use of memoization for derived state.The
useMemoimplementations forformValuesandfilteringstatus are excellent optimizations that prevent unnecessary recalculations. The dependency arrays are correctly specified.
446-527: Strong accessibility in suggestion rendering.The suggestion rendering includes proper ARIA attributes (
role="listbox",aria-label,aria-selected), and responsive design considerations for different screen sizes. The keyboard navigation hint is a nice UX touch.
529-555: Flexible date picker positioning.The date picker positioning logic accounts for both desktop and mobile views. The use of
Math.max(0, ...)ensures the date picker doesn't render off-screen.
304-337: Well-structured search term processing.The
submitSearchfunction properly processes and normalizes search terms from various inputs. The handling of "me" as a special case in email addresses is a good UX consideration.
|
closing because outdated, check on: #464 |
3 participants
Description
we don't have a way to now the current subject of any thread/email
changes:
add subject to thread display
create thread-subject component
thread-subject is collapsable
the componen detects is subject is long
enough to require the collapse button
Type of Change
Please delete options that are not relevant.
Areas Affected
Please check all that apply:
Testing Done
Describe the tests you've done:
Checklist
Screenshots/Recordings
Showcase.mp4
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit
New Features
Bug Fixes
Chores