birdclaw 0.4.1 → 0.5.0

package/src/components/TimelineCard.tsx

@@ -1,24 +1,36 @@
+import { useState } from "react";
+import {
+	Bookmark,
+	BookmarkCheck,
+	Heart,
+	MessageCircle,
+	Repeat2,
+} from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
-import type { TimelineItem } from "#/lib/types";
+import type { EmbeddedTweet, TimelineItem } from "#/lib/types";
 import {
-	actionButtonClass,
-	cardFooterClass,
-	cardHeaderClass,
-	contentCardClass,
 	cx,
-	identityBlockClass,
-	identityRowClass,
-	linkPreviewCardClass,
-	metaStackClass,
-	metricRowClass,
+	embeddedCardClass,
+	feedActionButtonClass,
+	feedActionIconClass,
+	feedActionIconWrapClass,
+	feedActionIconWrapLikeClass,
+	feedActionLikeClass,
+	feedRowActionsClass,
+	feedRowBodyClass,
+	feedRowClass,
+	feedRowDotClass,
+	feedRowHandleClass,
+	feedRowHeaderClass,
+	feedRowNameClass,
+	feedRowTextClass,
+	feedRowTimestampClass,
 	mutedDotClass,
-	pillAlertClass,
-	pillClass,
-	pillSoftClass,
-	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
+import { ConversationThread } from "./ConversationThread";
 import { EmbeddedTweetCard } from "./EmbeddedTweetCard";
+import { LinkPreviewCard } from "./LinkPreviewCard";
 import { ProfilePreview } from "./ProfilePreview";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
@@ -31,6 +43,13 @@ function getVisibleUrlCards(item: TimelineItem) {
 	});
 }
 
+function isInteractiveTarget(target: EventTarget | null) {
+	return (
+		target instanceof Element &&
+		Boolean(target.closest("a,button,input,textarea,select,[role='button']"))
+	);
+}
+
 export function TimelineCard({
 	item,
 	onReply,
@@ -42,86 +61,211 @@ export function TimelineCard({
 }) {
 	const canReply =
 		showReplyControls && item.kind !== "like" && item.kind !== "bookmark";
+	const [conversationOpen, setConversationOpen] = useState(false);
+	const [conversationLoading, setConversationLoading] = useState(false);
+	const [conversationError, setConversationError] = useState<string | null>(
+		null,
+	);
+	const [conversationItems, setConversationItems] = useState<EmbeddedTweet[]>(
+		[],
+	);
+
+	async function loadConversation() {
+		if (conversationLoading || conversationItems.length > 0) return;
+		setConversationLoading(true);
+		setConversationError(null);
+		try {
+			const response = await fetch(
+				`/api/conversation?tweetId=${encodeURIComponent(item.id)}`,
+			);
+			const data = (await response.json()) as {
+				ok?: boolean;
+				error?: string;
+				items?: EmbeddedTweet[];
+			};
+			if (!response.ok || data.ok === false) {
+				throw new Error(data.error ?? "Conversation unavailable");
+			}
+			setConversationItems((data.items ?? []).filter(Boolean));
+		} catch (error) {
+			setConversationError(
+				error instanceof Error ? error.message : "Conversation unavailable",
+			);
+		} finally {
+			setConversationLoading(false);
+		}
+	}
+
+	function toggleConversation() {
+		const nextOpen = !conversationOpen;
+		setConversationOpen(nextOpen);
+		if (nextOpen) {
+			void loadConversation();
+		}
+	}
 
 	return (
-		<article className={contentCardClass}>
-			<header className={cardHeaderClass}>
-				<div className={identityBlockClass}>
-					<AvatarChip
-						avatarUrl={item.author.avatarUrl}
-						hue={item.author.avatarHue}
-						name={item.author.displayName}
-						profileId={item.author.id}
+		<article
+			className={cx(feedRowClass, "cursor-pointer")}
+			data-perf="timeline-card"
+			onClick={(event) => {
+				if (isInteractiveTarget(event.target)) return;
+				toggleConversation();
+			}}
+		>
+			<AvatarChip
+				avatarUrl={item.author.avatarUrl}
+				hue={item.author.avatarHue}
+				name={item.author.displayName}
+				profileId={item.author.id}
+			/>
+			<div className={feedRowBodyClass}>
+				<header className={feedRowHeaderClass}>
+					<ProfilePreview profile={item.author}>
+						<span className="flex min-w-0 items-center gap-1.5">
+							<span className={feedRowNameClass}>
+								{item.author.displayName}
+							</span>
+							<span className={feedRowHandleClass}>@{item.author.handle}</span>
+						</span>
+					</ProfilePreview>
+					<span className={feedRowDotClass}>·</span>
+					<span className={feedRowTimestampClass}>
+						{formatShortTimestamp(item.createdAt)}
+					</span>
+					{canReply ? (
+						<span className="ml-auto inline-flex items-center gap-1 text-[12px] text-[var(--ink-soft)]">
+							{item.isReplied ? (
+								<span className="text-[var(--accent)]">replied</span>
+							) : (
+								<span className="text-[var(--alert)]">needs reply</span>
+							)}
+						</span>
+					) : null}
+				</header>
+				<TweetRichText
+					className={feedRowTextClass}
+					entities={item.entities}
+					text={item.text}
+				/>
+				<TweetMediaGrid items={item.media} />
+				{item.replyToTweet ? (
+					<div className={embeddedCardClass}>
+						<EmbeddedTweetCard item={item.replyToTweet} label="In reply to" />
+					</div>
+				) : null}
+				{item.quotedTweet ? (
+					<div className={embeddedCardClass}>
+						<EmbeddedTweetCard item={item.quotedTweet} label="Quoted tweet" />
+					</div>
+				) : null}
+				{getVisibleUrlCards(item).map((entry, index) => (
+					<LinkPreviewCard
+						key={`${entry.expandedUrl}-${String(index)}`}
+						entry={entry}
+						index={index}
 					/>
-					<div>
-						<ProfilePreview profile={item.author}>
-							<div className={identityRowClass}>
-								<strong>{item.author.displayName}</strong>
-								<span>@{item.author.handle}</span>
-								<span className={mutedDotClass} />
-								<span>
-									{formatCompactNumber(item.author.followersCount)} followers
+				))}
+				<footer className={feedRowActionsClass}>
+					<div className="flex items-center gap-3 text-[13px] text-[var(--ink-soft)]">
+						<button
+							aria-expanded={conversationOpen}
+							aria-label={
+								conversationOpen ? "Hide conversation" : "Show conversation"
+							}
+							className={feedActionButtonClass}
+							onClick={(event) => {
+								event.stopPropagation();
+								toggleConversation();
+							}}
+							type="button"
+						>
+							<span className={feedActionIconWrapClass}>
+								<MessageCircle
+									className={feedActionIconClass}
+									strokeWidth={1.7}
+								/>
+							</span>
+							<span className="text-[13px]">
+								{conversationOpen ? "Hide thread" : "Thread"}
+							</span>
+						</button>
+						{canReply ? (
+							<button
+								className={feedActionButtonClass}
+								onClick={(event) => {
+									event.stopPropagation();
+									onReply(item.id);
+								}}
+								type="button"
+								aria-label="Reply"
+							>
+								<span className={feedActionIconWrapClass}>
+									<MessageCircle
+										className={feedActionIconClass}
+										strokeWidth={1.7}
+									/>
 								</span>
-							</div>
-						</ProfilePreview>
-					</div>
-				</div>
-				<div className={metaStackClass}>
-					{canReply ? (
+								<span className="text-[13px]">Reply</span>
+							</button>
+						) : null}
+						<span className={cx(feedActionButtonClass, "cursor-default")}>
+							<span className={feedActionIconWrapClass}>
+								<Repeat2 className={feedActionIconClass} strokeWidth={1.7} />
+							</span>
+						</span>
 						<span
 							className={cx(
-								pillClass,
-								item.isReplied ? pillSoftClass : pillAlertClass,
+								feedActionButtonClass,
+								feedActionLikeClass,
+								"cursor-default",
+								item.liked && "text-[var(--like)]",
 							)}
 						>
-							{item.isReplied ? "replied" : "needs reply"}
+							<span
+								className={cx(
+									feedActionIconWrapClass,
+									feedActionIconWrapLikeClass,
+								)}
+							>
+								<Heart
+									className={feedActionIconClass}
+									strokeWidth={1.7}
+									fill={item.liked ? "currentColor" : "none"}
+								/>
+							</span>
+							<span>{formatCompactNumber(item.likeCount)}</span>
 						</span>
-					) : null}
-					<span className={timestampClass}>
-						{formatShortTimestamp(item.createdAt)}
-					</span>
-				</div>
-			</header>
-			<TweetRichText entities={item.entities} text={item.text} />
-			<TweetMediaGrid items={item.media} />
-			{item.replyToTweet ? (
-				<EmbeddedTweetCard item={item.replyToTweet} label="In reply to" />
-			) : null}
-			{item.quotedTweet ? (
-				<EmbeddedTweetCard item={item.quotedTweet} label="Quoted tweet" />
-			) : null}
-			{getVisibleUrlCards(item).map((entry, index) => (
-				<a
-					key={`${entry.expandedUrl}-${String(index)}`}
-					className={linkPreviewCardClass}
-					href={entry.expandedUrl}
-					rel="noreferrer"
-					target="_blank"
-				>
-					<strong>{entry.title ?? entry.displayUrl}</strong>
-					<span className="text-[var(--ink-soft)]">
-						{entry.description ?? entry.displayUrl}
-					</span>
-					<span className={timestampClass}>{entry.displayUrl}</span>
-				</a>
-			))}
-			<footer className={cardFooterClass}>
-				<div className={metricRowClass}>
-					<span>{formatCompactNumber(item.likeCount)} likes</span>
-					<span>{item.mediaCount} media</span>
-					<span>{item.bookmarked ? "bookmarked" : "not bookmarked"}</span>
-					<span>{item.accountHandle}</span>
-				</div>
-				{canReply ? (
-					<button
-						className={actionButtonClass}
-						onClick={() => onReply(item.id)}
-						type="button"
-					>
-						Reply
-					</button>
+						<span className={cx(feedActionButtonClass, "cursor-default")}>
+							<span className={feedActionIconWrapClass}>
+								{item.bookmarked ? (
+									<BookmarkCheck
+										className={feedActionIconClass}
+										strokeWidth={1.7}
+									/>
+								) : (
+									<Bookmark className={feedActionIconClass} strokeWidth={1.7} />
+								)}
+							</span>
+						</span>
+					</div>
+					<div className="flex items-center gap-2 text-[12px] text-[var(--ink-soft)]">
+						<span>{item.mediaCount} media</span>
+						<span className={mutedDotClass} />
+						<span>{item.bookmarked ? "bookmarked" : "not bookmarked"}</span>
+						<span className={mutedDotClass} />
+						<span>{item.accountHandle}</span>
+					</div>
+				</footer>
+				{conversationOpen ? (
+					<ConversationThread
+						anchorId={item.id}
+						error={conversationError}
+						items={conversationItems}
+						loading={conversationLoading}
+					/>
 				) : null}
-			</footer>
+			</div>
 		</article>
 	);
 }

package/src/components/TweetRichText.tsx

@@ -1,5 +1,8 @@
 import { Fragment } from "react";
-import { collectTweetSegments } from "#/lib/tweet-render";
+import {
+	collectTweetSegments,
+	enrichFallbackUrlEntities,
+} from "#/lib/tweet-render";
 import type { TweetEntities } from "#/lib/types";
 import {
 	bodyCopyClass,
@@ -18,7 +21,8 @@ export function TweetRichText({
 	entities: TweetEntities;
 	className?: string;
 }) {
-	const segments = collectTweetSegments(entities);
+	const richEntities = enrichFallbackUrlEntities(text, entities);
+	const segments = collectTweetSegments(richEntities);
 	let cursor = 0;
 
 	return (