feat: support sending and preview links

2026-03-21 12:46:23 -07:00
parent 6bf2f2217a
commit d6b7ecc8fd
8 changed files with 431 additions and 60 deletions
@@ -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>
  );
 }
@@ -1,6 +1,11 @@
 import { useEffect, useRef } from "react";
 import type { Particle } from "@/api/types";
 import { cn } from "@/lib/utils";
+import { useFirstLinkMetadata } from "@/hooks/use-link-metadata";
+import {
+  LinkPreviewCard,
+  LinkPreviewCardSkeleton,
+} from "@/components/link-preview-card";

 type TextParticle = Extract<Particle, { type: "text" }>;

@@ -11,22 +16,27 @@ interface TextParticleViewProps {
  onProgress?: (ratio: number) => void;
 }

-const WORDS_PER_MINUTE = 200;
+// Characters per minute (~1000 cpm ≈ 200 wpm at ~5 chars/word)
+const CHARS_PER_MINUTE = 1000;
 const MIN_DURATION_S = 3;
 const MAX_DURATION_S = 15;
 const TICK_MS = 100;
+const LINK_EXTRA_DURATION_S = 3;

-function computeReadDuration(text: string): number {
-  const wordCount = text.trim().split(/\s+/).length;
-  const seconds = (wordCount / WORDS_PER_MINUTE) * 60;
+// Below this threshold: immersive centered display
+// Above: contained left-aligned card
+const IMMERSIVE_CHAR_LIMIT = 120;
+
+function computeReadDuration(text: string, hasLink: boolean): number {
+  const base = (text.length / CHARS_PER_MINUTE) * 60;
+  const seconds = hasLink ? base + LINK_EXTRA_DURATION_S : base;
  return Math.min(Math.max(seconds, MIN_DURATION_S), MAX_DURATION_S);
 }

-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" };
+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 TextParticleView({
@@ -35,8 +45,11 @@ export function TextParticleView({
  onEnded,
  onProgress,
 }: TextParticleViewProps) {
-  const style = getTextStyle(particle.properties.content.length);
-  const durationS = computeReadDuration(particle.properties.content);
+  const content = particle.properties.content;
+  const { data: metadata, isLoading, url: firstUrl } = useFirstLinkMetadata(content);
+  const hasLink = !!firstUrl;
+  const immersive = content.length < IMMERSIVE_CHAR_LIMIT;
+  const durationS = computeReadDuration(content, hasLink);
  const elapsedRef = useRef(0);

  // Reset elapsed when particle changes
@@ -61,17 +74,51 @@ export function TextParticleView({
    return () => clearInterval(interval);
  }, [paused, durationS, onEnded, onProgress, particle.id]);

+  const linkPreview = (
+    <>
+      {isLoading && <LinkPreviewCardSkeleton />}
+      {metadata && <LinkPreviewCard metadata={metadata} />}
+    </>
+  );
+
+  // Content is just a bare URL with no surrounding text
+  const linkOnly = hasLink && content.trim() === firstUrl;
+
+  if (linkOnly) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+        {linkPreview}
+      </div>
+    );
+  }
+
+  if (immersive && !hasLink) {
+    const style = getImmersiveTextStyle(content.length);
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+        <p
+          className={cn(
+            "max-w-2xl break-words text-center leading-relaxed text-white",
+            style.size,
+            style.weight,
+          )}
+        >
+          {content}
+        </p>
+      </div>
+    );
+  }
+
  return (
    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
-      <p
-        className={cn(
-          "max-w-2xl text-center leading-relaxed text-white",
-          style.size,
-          style.weight,
-        )}
-      >
-        {particle.properties.content}
-      </p>
+      <div className="flex max-h-full w-full max-w-3xl items-center gap-6 px-2">
+        <div className="flex-1 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
+          <p className="break-words text-base leading-relaxed text-white">
+            {content}
+          </p>
+        </div>
+        {hasLink && <div className="shrink-0">{linkPreview}</div>}
+      </div>
    </div>
  );
 }