polished notepad page

[ComputelessComputer]

• Added optional className prop to MockWindow component for custom styling
• Enhanced line animation with more granular steps and improved opacity transitions
• Refactored notepad route with platform-aware CTA and responsive design
• Improved product page layout and user experience

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR extends the MockWindow component's styling capabilities, adjusts animation thresholds across multiple product pages to delay element reveals, and refactors the Notepad page with platform-aware CTA logic and a new AnimatedNotesDemo component featuring sequential animation orchestration.

Changes

Cohort / File(s)	Summary
MockWindow Component Enhancement apps/web/src/components/mock-window.tsx	Added optional className prop to MockWindow, threaded through root element's classNames via cn, expanding styling extensibility without altering core behavior.
Animation Timing Updates apps/web/src/routes/_view/index.tsx, apps/web/src/routes/_view/product/ai-notetaking.tsx	Shifted opacity thresholds upward (e.g., 1/2/3 to 2/3/4+) and extended sequential animation timing with additional nested timeouts across HowItWorksSection and SummariesSection, delaying element visibility progression. Desktop and mobile variants updated consistently.
Notepad Page Refactor apps/web/src/routes/_view/product/notepad.tsx	Introduced platform-aware primary CTA logic via usePlatform and getPrimaryCTA; reworked layout to full-height hero with new AnimatedNotesDemo component featuring internal state management and sequential animation orchestration; replaced legacy sections with streamlined hero, conditional CTA row, and MockWindow-wrapped developer UI preview. Removed inline comments from AnimatedMarkdownDemo and AudioTranscriptionDemo.

Sequence Diagram(s)

sequenceDiagram
    participant useEffect
    participant State as State Mgmt
    participant Animation as Animation Loop
    participant UI as UI Render

    useEffect->>State: Initialize typedText1, visibility states
    useEffect->>Animation: Start sequential timeline
    
    Animation->>State: typedText1 full at step 0
    State->>UI: Render animated text + cursor
    
    Animation->>State: typedText2 full at step 1
    State->>UI: Update second text display
    
    Animation->>State: enhancedLines increment 0→7
    State->>UI: Progressively reveal enhancements per threshold
    
    Animation->>State: Reset & loop animation
    State->>UI: Rerun sequence

Loading

sequenceDiagram
    participant Route as Notepad Route
    participant Platform as usePlatform
    participant CTA as getPrimaryCTA
    participant Navigation as Navigation

    Route->>Platform: Get platform info
    Platform-->>Route: Return isMac, etc.
    
    Route->>CTA: getPrimaryCTA(platform)
    alt macOS
        CTA-->>Route: Return download link config
    else Other Platform
        CTA-->>Route: Return waitlist/remind config
    end
    
    Route->>Navigation: Render conditional CTA (Download or Link)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–60 minutes

• Animation threshold changes: Verify opacity conditions (shifted 1/2/3→2/3/4+) across both desktop and mobile variants in HowItWorks and SummariesSection render correctly and animation sequencing aligns with expected UX.
• Platform-aware CTA logic: Confirm usePlatform and getPrimaryCTA integration correctly distinguishes macOS from other platforms and routes users to appropriate actions.
• AnimatedNotesDemo orchestration: Review new component's state management, useEffect timing, and animation loop logic for correctness and performance (nested timeouts, state resets).
• MockWindow prop threading: Confirm className prop integrates cleanly into classNames computation and doesn't break existing usage.

Possibly related PRs

• PR #1632: Directly modifies the same MockWindow component introduced in that PR; className prop addition extends its public API.
• PR #1642: Both PRs alter HowItWorksSection in the index route; retrieved PR changes image/copy while this one adjusts animation timing thresholds.

Suggested reviewers

• yujonglee

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title 'polished notepad page' is vague and generic, using non-descriptive terms that don't convey specific information about the actual changes made.	Use a more specific title that highlights the main change, such as 'Refactor notepad page with platform-aware CTA and animation improvements' or 'Add MockWindow className prop and enhance notepad animations'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly relates to the changeset, covering the main modifications across multiple files including MockWindow component updates, animation enhancements, and notepad route refactoring.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch web/notepad-page

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

apps/web/src/routes/_view/index.tsx (1)

769-941: Extended enhancedLines animation is consistent but needs lifecycle cleanup

The added steps (up to enhancedLines === 7) line up correctly with the new opacity thresholds on headings and list items, so the visual sequence should behave as intended. However, the deeply nested setTimeout / setInterval chain has two issues:

• The effect never cleans up its timers, so after this section unmounts the animation keeps running in the background and still calls setState, which is a resource leak.
• The nested timeouts are now hard to reason about and are duplicated in similar sections (e.g., Summaries and the notepad demo), making future tweaks error‑prone.

Consider refactoring this into a single timeline helper (or custom hook) that tracks all timer IDs and clears them in the useEffect cleanup, while driving enhancedLines via a simple array of steps instead of nested callbacks.

apps/web/src/routes/_view/product/ai-notetaking.tsx (2)

212-249: Fix requestAnimationFrame cleanup to avoid a persistent animation after unmount

The updated words timings and 8s duration look good, but the animation loop currently isn’t cleaned up correctly:

• requestAnimationFrame(animate) is called inside animate, but only the very first call’s ID (animationId) is stored and canceled.
• After unmount, subsequent scheduled frames keep running and calling setProgress, which is a resource leak.

You can track the latest frame ID instead so cleanup actually stops the loop:

-  useEffect(() => {
-    const duration = 8000;
-    const startTime = Date.now();
-
-    const animate = () => {
-      const elapsed = Date.now() - startTime;
-      const newProgress = (elapsed % duration) / duration;
-
-      setProgress(newProgress);
-
-      requestAnimationFrame(animate);
-    };
-
-    const animationId = requestAnimationFrame(animate);
-    return () => cancelAnimationFrame(animationId);
-  }, []);
+  useEffect(() => {
+    const duration = 8000;
+    const startTime = Date.now();
+    let frameId: number;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const newProgress = (elapsed % duration) / duration;
+
+      setProgress(newProgress);
+
+      frameId = requestAnimationFrame(animate);
+    };
+
+    frameId = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frameId);
+  }, []);

---

619-937: SummariesSection animation: extended steps are correct but share the same timer‑cleanup and duplication concerns

The additional enhancedLines steps (up to 7) and the updated thresholds across desktop and mobile variants are consistent with the animation sequence and match the extended text reveal flow.

However, this useEffect uses the same pattern as the homepage HowItWorks section:

• Timers are never canceled on unmount, so the animation loop continues to run and call setState even after the component is gone.
• The nested timeouts/intervals plus repeated narrative content are now duplicated across multiple places (homepage, AI notetaking summaries, notepad demo), which makes future adjustments noisy.

It would be safer and easier to maintain to extract a small helper or hook that:

• Drives enhancedLines from a declarative step list.
• Tracks timeout/interval IDs and cancels them in the effect cleanup.
• Is reused by all three sections so you only tweak the timing in one place.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11455f2 and 6e024e6.

📒 Files selected for processing (4)

• apps/web/src/components/mock-window.tsx (2 hunks)
• apps/web/src/routes/_view/index.tsx (7 hunks)
• apps/web/src/routes/_view/product/ai-notetaking.tsx (8 hunks)
• apps/web/src/routes/_view/product/notepad.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/src/routes/_view/product/notepad.tsx (3)

apps/web/src/hooks/use-platform.ts (1)

• usePlatform (5-33)

packages/utils/src/cn.ts (1)

• cn (20-22)

apps/web/src/components/mock-window.tsx (1)

• MockWindow (4-45)

⏰ 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: fmt

🔇 Additional comments (1)

apps/web/src/components/mock-window.tsx (1)

4-23: MockWindow className prop wiring looks correct and flexible

The new optional className prop is threaded through cleanly, and placing it last in the cn([...]) call lets consumers override width, border, and rounding when needed while keeping sensible defaults.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Platform-aware primary CTA logic is clear; double-check the non‑Mac target route

The primary CTA correctly distinguishes:

• macOS → direct download link with download attribute.
• mobile/other → “Remind Me” / “Join Waitlist” label routed via Link.

Please just confirm that href: "/" for the non‑Mac case is indeed the route that surfaces the waitlist/reminder flow you expect (and that it integrates with the hero trigger logic on the landing page, if any).

---

🏁 Script executed:

#!/bin/bash
# Inspect where the "/" route is defined and how it handles waitlist/reminder flows.
rg -n 'createFileRoute\("/"\)' -S
rg -n 'heroContext|setOnTrigger|waitlist|remind' apps/web/src -S -C3

Length of output: 13999

---

I need to verify if the notepad component properly integrates with the HeroContext to trigger the waitlist flow, or if it just naively links to the home page.<!-- [scratchpad_update]
[task verify_cta_routing_1/1 - continued]
The web search confirms: Link component does NOT execute callbacks on navigation - it just performs client-side navigation (renders tag with href).
[observations_update]

• Web search confirms Link component simply navigates without triggering custom callbacks
• TanStack Router Link is a regular element with href handling
• To trigger callbacks, useNavigate hook or direct router.navigate() must be used with side-effect logic
  [pending]
• Confirm if notepad.tsx imports useHeroContext
• Check if home page has logic to auto-trigger waitlist on mount or query detection
  [next_action]
• Search for useHeroContext import in notepad.tsx
• Check _view/index.tsx for auto-trigger logic on component mount
  [scratchpad_end] -->

Now I need to check if the notepad component actually uses useHeroContext or if it's just blindly linking to "/":<!-- [scratchpad_update]
[task verify_cta_routing - abandoned web search, now need codebase inspection]
The web search was general .tsx info not specific to the codebase.
[observations_update]

• Must directly inspect notepad.tsx to see if it uses useHeroContext
• Previous output didn't directly show notepad.tsx file contents
  [actions]
• Run codebase search to find if notepad.tsx imports or uses useHeroContext
• Check if home page has query param or hash detection logic for auto-open
  [scratchpad_end] -->

I need to directly examine the notepad.tsx file to see if it properly integrates with the HeroContext:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if notepad.tsx imports or uses useHeroContext
grep -n "useHeroContext\|HeroContext" apps/web/src/routes/_view/product/notepad.tsx

# Also check the home page (_view/index.tsx) to see if there's auto-trigger logic
# Look for query params or mount-time detection that might auto-open the waitlist
grep -n "useSearchParams\|window.location\|useEffect.*\()" apps/web/src/routes/_view/index.tsx -A2 -B2

Length of output: 102

---

Let me locate the actual file and re-inspect it:

---

🏁 Script executed:

```shell
#!/bin/bash
# Find notepad.tsx file
fd -t f "notepad.tsx" apps/web/src

# Also find all files in product route
fd -t f . apps/web/src/routes/_view/product/ 2>/dev/null | head -20

Length of output: 521

---

---

🏁 Script executed:

```shell
#!/bin/bash
# View the notepad.tsx file to check HeroContext usage
cat apps/web/src/routes/_view/product/notepad.tsx

# Also check if home page (_view/index.tsx) uses router state or params to auto-trigger
grep -n "useSearchParams\|window.location\|autoScroll\|autoOpen" apps/web/src/routes/_view/index.tsx | head -20

Length of output: 10079

---

Now let me check if the home page has any auto-detection logic that would trigger the waitlist when navigating from notepad:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if home page (_view/index.tsx) auto-opens waitlist on mount or has query param detection
cat apps/web/src/routes/_view/index.tsx | grep -A20 -B5 "useEffect\|Component\|HeroWaitlist" | head -80

Length of output: 3097

---

---

🏁 Script executed:

```shell
#!/bin/bash
# Find handleTrigger implementation and see if there's auto-trigger logic
rg -n "handleTrigger\s*=" apps/web/src/routes/_view/index.tsx -A10

# Also check if there's any router.location or useSearch hook that detects navigation
rg -n "useSearch\|useLocation\|router\.location" apps/web/src/routes/_view/index.tsx -C3

Length of output: 330

---

CTA routing to "/" does not trigger the waitlist form — requires integration with HeroContext

The notepad component's non-Mac CTA uses Link to="/" with label "Join Waitlist" / "Remind Me", but does not integrate with the HeroContext pattern used elsewhere in the site to open the form.

The architecture requires:

• Header and other pages call heroContext.onTrigger() to focus the hero waitlist input
• Home page registers handleTrigger callback that focuses heroInputRef and shakes it
• No auto-trigger logic exists on home page mount

Currently, clicking the notepad CTA navigates to "/" but leaves the form hidden. Users see the home page without the waitlist flow opening.

Required fix: Either:

1. Import useHeroContext in notepad and call heroContext?.onTrigger() on non-download CTA click, OR
2. Route non-Mac CTA to /join-waitlist (which redirects to the Tally form), OR
3. Implement query param detection on home page to auto-trigger when navigating from product pages

🤖 Prompt for AI Agents

In apps/web/src/routes/_view/product/notepad.tsx around lines 24 to 107, the
non-Mac CTA navigates to "/" but does not trigger the home page HeroContext to
open the waitlist input; import useHeroContext at the top, call const
heroContext = useHeroContext(), and add an onClick handler to the non-download
CTA Link that calls heroContext?.onTrigger() (preserve the existing navigation
to "/" so the home route still loads). Ensure the import is added only where
HeroContext exists and that the onClick is a no-op if heroContext is undefined.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

AnimatedNotesDemo animation works visually but needs timer cleanup and could share logic with other sections

The staged typing + enhanced summary reveal matches the narrative used elsewhere and the thresholds (1–6) align with the scheduled setEnhancedLines steps, so the UX should be good.

But similar to the other sections:

• The recursive runAnimation with nested setTimeout / setInterval never cancels its timers on unmount, so the loop continues running and calling setState after the component is removed.
• This exact pattern (including the same text) is now implemented three times, which makes tweaks laborious and easy to get out of sync.

At minimum, I’d add a cancellation guard to prevent post‑unmount updates:

-  useEffect(() => {
-    const runAnimation = () => {
+  useEffect(() => {
+    let cancelled = false;
+
+    const runAnimation = () => {
+      if (cancelled) return;
       setTypedText1("");
       setTypedText2("");
       setShowEnhanced(false);
       setEnhancedLines(0);
@@
-      let currentIndex1 = 0;
+      let currentIndex1 = 0;
       setTimeout(() => {
         const interval1 = setInterval(() => {
-          if (currentIndex1 < text1.length) {
+          if (cancelled) {
+            clearInterval(interval1);
+            return;
+          }
+          if (currentIndex1 < text1.length) {
             setTypedText1(text1.slice(0, currentIndex1 + 1));
@@
-            const interval2 = setInterval(() => {
-              if (currentIndex2 < text2.length) {
+            const interval2 = setInterval(() => {
+              if (cancelled) {
+                clearInterval(interval2);
+                return;
+              }
+              if (currentIndex2 < text2.length) {
                 setTypedText2(text2.slice(0, currentIndex2 + 1));
@@
-                              setEnhancedLines(6);
-                              setTimeout(() => runAnimation(), 2000);
+                              setEnhancedLines(6);
+                              setTimeout(() => {
+                                if (!cancelled) runAnimation();
+                              }, 2000);
@@
-    runAnimation();
-  }, []);
+    runAnimation();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);

Longer term, consider extracting this into a shared hook/helper (since the same animation spec is used on the homepage and AI notetaking page) so timing tweaks are centralized and easier to maintain.