feat: support sending and preview links

js/src/features/compose/text-compose-step.tsx

@@ -1,5 +1,10 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import { cn } from "@/lib/utils";
+import { useFirstLinkMetadata } from "@/hooks/use-link-metadata";
+import {
+  LinkPreviewCard,
+  LinkPreviewCardSkeleton,
+} from "@/components/link-preview-card";
 
 interface TextComposeStepProps {
   textContent: string;
@@ -8,11 +13,12 @@ interface TextComposeStepProps {
   onCancel: () => void;
 }
 
-function getTextStyle(length: number) {
-  if (length < 50) return { size: "text-5xl", weight: "font-semibold" };
-  if (length < 150) return { size: "text-3xl", weight: "font-semibold" };
-  if (length < 300) return { size: "text-2xl", weight: "font-normal" };
-  return { size: "text-lg", weight: "font-normal" };
+const IMMERSIVE_CHAR_LIMIT = 120;
+
+function getImmersiveTextStyle(length: number) {
+  if (length < 30) return { size: "text-5xl", weight: "font-semibold" };
+  if (length < 70) return { size: "text-3xl", weight: "font-semibold" };
+  return { size: "text-2xl", weight: "font-normal" };
 }
 
 export function TextComposeStep({
@@ -23,6 +29,14 @@ export function TextComposeStep({
 }: TextComposeStepProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  // Debounce URL detection to avoid fetching on every keystroke
+  const [debouncedText, setDebouncedText] = useState(textContent);
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedText(textContent), 500);
+    return () => clearTimeout(t);
+  }, [textContent]);
+  const { data: metadata, isLoading, url: firstUrl } = useFirstLinkMetadata(debouncedText);
+
   useEffect(() => {
     textareaRef.current?.focus();
   }, []);
@@ -40,37 +54,79 @@ export function TextComposeStep({
     [onCancel, onAdvance, textContent],
   );
 
-  const style = getTextStyle(textContent.length);
+  const immersive = textContent.length < IMMERSIVE_CHAR_LIMIT;
+  const showPreview = firstUrl && (isLoading || metadata);
+
+  const linkPreview = (
+    <>
+      {firstUrl && isLoading && <LinkPreviewCardSkeleton />}
+      {firstUrl && metadata && <LinkPreviewCard metadata={metadata} compact />}
+    </>
+  );
+
+  const keyboardHints = (
+    <div className="absolute bottom-8 flex items-center gap-4 text-sm text-white/50">
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          Esc
+        </kbd>{" "}
+        cancel
+      </span>
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          ⌘+Enter
+        </kbd>{" "}
+        next
+      </span>
+    </div>
+  );
+
+  if (immersive) {
+    const style = getImmersiveTextStyle(textContent.length);
+    return (
+      <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/90">
+        <div
+          className={cn(
+            "flex w-full items-center justify-center gap-6 px-6",
+            showPreview ? "flex-row" : "flex-col",
+          )}
+        >
+          <textarea
+            ref={textareaRef}
+            value={textContent}
+            onChange={(e) => onTextChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a message..."
+            className={cn(
+              "flex-1 resize-none border-none bg-transparent p-8 text-white placeholder-white/40 outline-none",
+              showPreview ? "text-left" : "text-center",
+              style.size,
+              style.weight,
+            )}
+            rows={4}
+          />
+          {showPreview && <div className="shrink-0">{linkPreview}</div>}
+        </div>
+        {keyboardHints}
+      </div>
+    );
+  }
 
   return (
     <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/90">
-      <textarea
-        ref={textareaRef}
-        value={textContent}
-        onChange={(e) => onTextChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Type a message..."
-        className={cn(
-          "w-full max-w-2xl resize-none border-none bg-transparent p-8 text-center text-white placeholder-white/40 outline-none",
-          style.size,
-          style.weight,
-        )}
-        rows={4}
-      />
-      <div className="absolute bottom-8 flex items-center gap-4 text-sm text-white/50">
-        <span>
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            Esc
-          </kbd>{" "}
-          cancel
-        </span>
-        <span>
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            ⌘+Enter
-          </kbd>{" "}
-          next
-        </span>
+      <div className="flex max-h-[calc(100%-6rem)] max-w-md flex-col gap-4 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
+        <textarea
+          ref={textareaRef}
+          value={textContent}
+          onChange={(e) => onTextChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type a message..."
+          className="w-full resize-none border-none bg-transparent text-base leading-relaxed text-white placeholder-white/40 outline-none"
+          rows={6}
+        />
+        {showPreview && linkPreview}
       </div>
+      {keyboardHints}
     </div>
   );
 }