fix(ui): button as button error fixed, create mail editor fixes#424
fix(ui): button as button error fixed, create mail editor fixes#424nizzyabi merged 3 commits intoMail-0:stagingfrom
Conversation
|
@nyzss is attempting to deploy a commit to the Zero Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request updates several UI components across the mail application. The modifications include adjustments to CSS class names for altered alignment and spacing, a restructuring of JSX elements in the connection dialog, and enhancements to the editor component such as reorganized imports, improved type safety with the introduction of a new container reference, and updated focus behavior. No changes were made to the public API or business logic. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditorContainer
participant TiptapEditor
User->>EditorContainer: Click on editor area
EditorContainer->>EditorContainer: Verify event target equals containerRef
EditorContainer->>TiptapEditor: Invoke focus('end')
TiptapEditor-->>EditorContainer: Confirm focus applied
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
🪧 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 (1)
apps/mail/components/connection/add.tsx (1)
49-49: Consistent class orderingMoved
w-fullto the end of the class string for consistency. While this doesn't affect functionality, it maintains a uniform pattern throughout the codebase.Also applies to: 67-67
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/mail/app/(routes)/settings/connections/page.tsx(1 hunks)apps/mail/components/connection/add.tsx(3 hunks)apps/mail/components/create/editor.tsx(5 hunks)apps/mail/components/ui/nav-main.tsx(1 hunks)
🔇 Additional comments (8)
apps/mail/components/ui/nav-main.tsx (1)
155-155: Added bottom padding to fix focus ring overflowThe additional
pb-2class addresses the overflow issue with the focus ring on the last element of the sidebar as mentioned in the PR description. This ensures the focus ring is fully visible when the last item is selected.apps/mail/app/(routes)/settings/connections/page.tsx (1)
153-153: Left-aligned connection button for better UXChanging the alignment from
justify-centertojustify-startcreates a more consistent layout in the settings page, as most UI elements in settings typically follow left alignment.apps/mail/components/connection/add.tsx (1)
19-24: Fixed nested button issueThis restructuring resolves the nested
<button>elements problem mentioned in the PR. HTML specifications don't allow button elements to be nested, and this change ensures proper component hierarchy by conditionally rendering either children or a button, not both nested.apps/mail/components/create/editor.tsx (5)
3-12: Improved import organization and type safetyThe reorganized imports and additional imports from
@tiptap/reactprovide better organization and access to necessary types for improved type safety.Also applies to: 34-34
275-277: Enhanced type safety with proper referencesReplaced the generic
anytype with the more specificTiptapEditortype and added a new container reference. This improves type safety and provides better editor control.
282-286: Improved focus handling logicThe modified
focusEditorfunction now correctly checks if the click event occurred directly on the container before triggering focus. This prevents unintended focus behavior when clicking on child elements.
304-305: Enhanced editor container accessibilityAdded the container reference to the
EditorContentcomponent and thecursor-textclass to visually indicate that the area is clickable and can receive focus, improving user experience.
319-321: Fixed editor reference timingThe added
onCreatehandler ensures that theeditorRefis properly set during the editor's creation, rather than relying on updates. This addresses the focus and selection functionality issues mentioned in the PR description.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@nyzss looks good. can i have a ss |
sure, i put videos showing the before and after of the three fixes as they are easier to show that way here is the before: https://www.loom.com/share/74df1db662b542ec89c1611470401670 here is the after: https://www.loom.com/share/57fb88aee0ad4ea68de3885c7d5951d2 the first one is that when you click on the body of the create-email, it is not focusing on the editor which is a bit annoying in UX (there was the code for it but it wasn't working), in the video i showed it in the /create route but the issue was also present in the mail reply component, both are fixed second and the third one is obvious, second is sidebar last element that was being clunky, third one is a button nesting error |
|
@nyzss lets fix up the merge conflicts and get this pushed! exciting pr |
…branch 'staging' of https://github.com/nizzyabi/Mail0 into fix/minor-ui-fixes
done! |
|
amazing, merged! |
3 participants
Description
Minor UI fixes, some issues in the settings sidebar and mail editor:
editorRefwasn't set on editor creation)ConnectionstabType 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
Additional Notes
Add any other context about the pull request here.
Screenshots/Recordings
Add screenshots or recordings here if applicable.
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit
Summary by CodeRabbit
Style
Refactor
These updates enhance the overall visual consistency and user experience throughout the application.