Decrease mobile mock window height in editor section (#1986)

* Decrease mobile mock window height in editor section

Co-Authored-By: [email protected] <[email protected]>

* Mimic Notion-style typing animation for markdown

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.

* Keep cursor placeholder in-place during typing

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.

* Reduce space between cursor and placeholder

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.

* Show placeholder and blinking cursor for headings and bullets

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.

* Avoid re-animating list item placeholder

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.

* Don't animate when placeholders disappear

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.

* feat(product): add default typing state comment

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: ComputelessComputer

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

@@ -281,7 +281,7 @@ function EditorSection() {
         </div>
         <div className="px-6 pb-0 bg-stone-50/30 overflow-clip">
           <MockWindow variant="mobile">
-            <div className="p-6 h-[380px] overflow-hidden">
+            <div className="p-6 h-[200px] overflow-hidden">
               <AnimatedMarkdownDemo isMobile />
             </div>
           </MockWindow>
@@ -380,15 +380,33 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
   const [currentLineIndex, setCurrentLineIndex] = useState(0);
   const [typingText, setTypingText] = useState("");
   const [isTransformed, setIsTransformed] = useState(false);
+  const [showPlaceholder, setShowPlaceholder] = useState(false);
 
   const lines = [
-    { text: "# Meeting Notes", type: "heading" as const },
-    { text: "- Product roadmap review", type: "bullet" as const },
-    { text: "- Q4 marketing strategy", type: "bullet" as const },
-    { text: "- Budget allocation", type: "bullet" as const },
+    {
+      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: "",
     },
   ];
 
@@ -399,6 +417,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
         setCurrentLineIndex(0);
         setTypingText("");
         setIsTransformed(false);
+        setShowPlaceholder(false);
       }, 2000);
       return () => clearTimeout(timeout);
     }
@@ -413,16 +432,29 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
         setTypingText(newText);
         charIndex++;
 
-        const shouldTransform =
+        // Check if we just typed the trigger sequence (e.g., "# " or "- ")
+        const isMarkdownTrigger =
           (currentLine.type === "heading" && newText === "# ") ||
-          (currentLine.type === "bullet" && newText === "- ") ||
-          (currentLine.type === "bold" && newText.match(/\*\*[^*]+\*\*/));
-
-        if (shouldTransform) {
+          (currentLine.type === "bullet" && newText === "- ");
+
+        if (isMarkdownTrigger && !isTransformed) {
+          // Show placeholder briefly, then transform
+          setShowPlaceholder(true);
+
+          timeout = setTimeout(() => {
+            setIsTransformed(true);
+            setShowPlaceholder(false);
+            timeout = setTimeout(typeCharacter, 60);
+          }, 300); // Show placeholder duration
+        } else if (
+          currentLine.type === "bold" &&
+          newText.match(/\*\*[^*]+\*\*/)
+        ) {
           setIsTransformed(true);
+          timeout = setTimeout(typeCharacter, 60);
+        } else {
+          timeout = setTimeout(typeCharacter, 60);
         }
-
-        timeout = setTimeout(typeCharacter, 60);
       } else {
         timeout = setTimeout(() => {
           const completedElement = renderCompletedLine(currentLine, isMobile);
@@ -432,6 +464,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
 
           setTypingText("");
           setIsTransformed(false);
+          setShowPlaceholder(false);
           setCurrentLineIndex((prev) => prev + 1);
         }, 800);
       }
@@ -509,6 +542,52 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
       return null;
     }
 
+    // Show placeholder state (after typing "# " or "- " but before transformation)
+    if (showPlaceholder && !isTransformed) {
+      // For headings, show with larger font size
+      if (currentLine.type === "heading") {
+        return (
+          <h1 className={cn(["font-bold", isMobile ? "text-xl" : "text-2xl"])}>
+            <span className="animate-pulse">|</span>
+            <span className="text-neutral-400">{currentLine.placeholder}</span>
+          </h1>
+        );
+      }
+
+      // For bullets, show as list item
+      if (currentLine.type === "bullet") {
+        return (
+          <ul
+            className={cn([
+              "list-disc pl-5",
+              isMobile ? "text-sm" : "text-base",
+            ])}
+          >
+            <li>
+              <span className="animate-pulse">|</span>
+              <span className="text-neutral-400">
+                {currentLine.placeholder}
+              </span>
+            </li>
+          </ul>
+        );
+      }
+
+      // Default fallback (shouldn't reach here for current lines)
+      return (
+        <div
+          className={cn([
+            "text-neutral-700",
+            isMobile ? "text-sm" : "text-base",
+          ])}
+        >
+          <span className="animate-pulse">|</span>
+          <span className="text-neutral-400">{currentLine.placeholder}</span>
+        </div>
+      );
+    }
+
+    // Transformed state for headings
     if (currentLine.type === "heading" && isTransformed) {
       const displayText = typingText.slice(2); // Remove "# "
       return (
@@ -524,6 +603,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
       );
     }
 
+    // Transformed state for bullets
     if (currentLine.type === "bullet" && isTransformed) {
       const displayText = typingText.slice(2); // Remove "- "
       return (
@@ -541,6 +621,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
       );
     }
 
+    // Transformed state for bold text
     if (currentLine.type === "bold" && isTransformed) {
       const parts = typingText.split(/(\*\*.*?\*\*)/g);
       return (
@@ -565,6 +646,7 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
       );
     }
 
+    // Default typing state
     return (
       <div
         className={cn(["text-neutral-700", isMobile ? "text-sm" : "text-base"])}