Decrease mobile mock window height in editor section #1986
Conversation
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
📝 WalkthroughWalkthroughReworked the AnimatedMarkdownDemo interaction and mobile editor layout in Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Introduce staged placeholder and transformation states to make the typing
animation mimic how tools like Notion render headings and lists. Added
showPlaceholder and transforming state flags, expanded lines to include
placeholder text, and adjusted the typing logic to briefly display a
placeholder (e.g., "Heading 1" or "List") after typing the trigger
sequence ("# " or "- ") before animating into the transformed
rendered element. Also updated rendering to show a pulsing cursor during
placeholder and to animate transformed headings with motion.
Prevent the cursor from jumping to the end by rendering the typing cursor inline with the typing text and placeholder. The change moves the pulse cursor character into the same span as typingText and places the placeholder in a following inline span so the cursor stays at the current typing position instead of jumping to the end.
Adjust the spacing between the blinking cursor and the placeholder text to make the caret appear closer to the placeholder. The change replaces the margin-left utility from ml-2 to ml-0.5 to tighten the gap and improve visual alignment of the cursor and placeholder in the AI note-taking component.
Make the placeholder text and blinking cursor visible immediately after typing a marker (e.g. "# " or "- ") and render them in the correct visual style for headings and bullets. This change replaces generic placeholders like "Heading 1"/"List" with "Enter header"/"Enter list item", ensures the cursor blinks before the placeholder, and uses larger heading font sizes and proper list markup so the placeholder matches the final rendered element.
Prevent transformed list items and other placeholder-rendered lines from re-sliding by removing motion wrappers for heading (and adding comments for bullet and bold states). This stops the slide-in animation when the placeholder is shown so the UI doesn't animate the item again after transformation; the diff removes the motion.h1 wrapper and adds clarifying comments for bullet and bold transformed states.
Remove placeholder-related animation state and transitional opacity so placeholders vanish instantly instead of animating. The change eliminates the "transforming" state and related class toggles, and ensures showPlaceholder is reset immediately when placeholders are dismissed. This prevents unwanted fade/opacity animations when placeholders go away and simplifies the placeholder/typing flow.
ComputelessComputer
force-pushed
the
devin/1764384753-markdown-transform-mobile-height
branch
from
d809020 to
e31119f
Compare
![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/web/src/routes/_view/product/ai-notetaking.tsx (1)
385-411: Consider extractinglinesarray outside the component.The
linesarray is constant and doesn't depend on props or state. Defining it inside the component causes it to be recreated on every render. For a minor performance optimization, move it outsideAnimatedMarkdownDemo.+const MARKDOWN_LINES = [ + { + text: "# Meeting Notes", + type: "heading" as const, + placeholder: "Enter header", + }, + { + text: "- Product roadmap review", + type: "bullet" as const, + placeholder: "Enter list item", + }, + { + text: "- Q4 marketing strategy", + type: "bullet" as const, + placeholder: "Enter list item", + }, + { + text: "- Budget allocation", + type: "bullet" as const, + placeholder: "Enter list item", + }, + { + text: "**Decision:** Launch campaign by end of month", + type: "bold" as const, + placeholder: "", + }, +]; + function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) { // ... state declarations ... - const lines = [ - // ... - ]; + const lines = MARKDOWN_LINES;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/product/ai-notetaking.tsx(9 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/product/ai-notetaking.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/product/ai-notetaking.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
⏰ 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). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci (macos, macos-14)
- GitHub Check: fmt
🔇 Additional comments (4)
apps/web/src/routes/_view/product/ai-notetaking.tsx (4)
284-286: Height value differs from PR description.The PR description specifies reducing the height to 256px (
h-64), but this implementation usesh-[200px](200px). Please confirm which value is correct—the arbitraryh-[200px]or the Tailwind utilityh-64(256px).
435-457: Placeholder and transformation logic is well-structured.The markdown trigger detection correctly identifies
#for headings and-for bullets, showing a brief placeholder before transformation. The nested timeout pattern appropriately delays the transformation after showing the placeholder.
545-588: Placeholder rendering is comprehensive.The placeholder rendering correctly handles heading, bullet, and fallback cases with appropriate styling and a pulsing caret. The conditional branching is clear and follows the established pattern for other line types.
590-658: Transformed state rendering is consistent.The rendering branches for heading, bullet, and bold transformed states are correctly implemented with appropriate text slicing and styling. The default typing state fallback at lines 649-657 ensures all cases are handled.
ComputelessComputer
deleted the
devin/1764384753-markdown-transform-mobile-height
branch
Decrease mobile mock window height in editor section
Summary
Reduces the height of the mock window in the mobile view of the EditorSection on the ai-notetaking page from 380px to 256px (h-64).
Review & Testing Checklist for Human
Notes
The user also mentioned markdown syntax transformation (e.g.,
#+ space becoming a header). The existingAnimatedMarkdownDemocomponent already implements this behavior - it transforms markdown syntax after the trigger character + space is typed. No code changes were needed for that functionality.Requested by: john@hyprnote.com (@ComputelessComputer)
Devin session: https://app.devin.ai/sessions/dee8a705bca848abadabb7cfd839bf65