birdclaw 0.5.0 → 0.5.1

package/src/components/TimelineCard.tsx

@@ -1,13 +1,20 @@
-import { useState } from "react";
 import {
 	Bookmark,
 	BookmarkCheck,
+	CheckCircle2,
+	Circle,
 	Heart,
 	MessageCircle,
 	Repeat2,
 } from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
-import type { EmbeddedTweet, TimelineItem } from "#/lib/types";
+import type {
+	TimelineItem,
+	TweetEntities,
+	TweetMediaItem,
+	TweetUrlEntity,
+} from "#/lib/types";
+import { useConversationSurface } from "#/lib/conversation-surface";
 import {
 	cx,
 	embeddedCardClass,
@@ -23,6 +30,9 @@ import {
 	feedRowHandleClass,
 	feedRowHeaderClass,
 	feedRowNameClass,
+	feedRowStatePillActiveClass,
+	feedRowStatePillClass,
+	feedRowStatePillOpenClass,
 	feedRowTextClass,
 	feedRowTimestampClass,
 	mutedDotClass,
@@ -35,9 +45,95 @@ import { ProfilePreview } from "./ProfilePreview";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
-function getVisibleUrlCards(item: TimelineItem) {
+function comparableUrl(value: string | null | undefined) {
+	if (!value) return null;
+	try {
+		const parsed = new URL(value);
+		return `${parsed.protocol}//${parsed.hostname}${parsed.pathname}`;
+	} catch {
+		return value.split("?")[0] ?? value;
+	}
+}
+
+function getMediaUrlSet(media: TweetMediaItem[]) {
+	const urls = new Set<string>();
+	for (const item of media) {
+		for (const url of [item.url, item.thumbnailUrl]) {
+			const comparable = comparableUrl(url);
+			if (comparable) urls.add(comparable);
+		}
+	}
+	return urls;
+}
+
+function isMediaUrlEntity(
+	entry: TweetUrlEntity,
+	mediaUrls: Set<string>,
+	tweetId: string,
+) {
+	if (mediaUrls.size > 0 && isOwnStatusMediaUrl(entry.expandedUrl, tweetId)) {
+		return true;
+	}
+	for (const url of [entry.url, entry.expandedUrl, entry.displayUrl]) {
+		const comparable = comparableUrl(url);
+		if (comparable && mediaUrls.has(comparable)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function isOwnStatusMediaUrl(
+	value: string | null | undefined,
+	tweetId: string,
+) {
+	if (!value) return false;
+	try {
+		const parsed = new URL(value);
+		const host = parsed.hostname.replace(/^www\./, "");
+		if (host !== "x.com" && host !== "twitter.com") return false;
+		const segments = parsed.pathname.split("/").filter(Boolean);
+		const statusIndex = segments.indexOf("status");
+		if (statusIndex < 0 || segments[statusIndex + 1] !== tweetId) {
+			return false;
+		}
+		const mediaSegment = segments[statusIndex + 2];
+		return mediaSegment === "photo" || mediaSegment === "video";
+	} catch {
+		return false;
+	}
+}
+
+function getVisibleEntities(
+	entities: TweetEntities,
+	media: TweetMediaItem[],
+	tweetId: string,
+) {
+	const mediaUrls = getMediaUrlSet(media);
+	if (mediaUrls.size === 0) return entities;
+	return {
+		...entities,
+		urls: (entities.urls ?? []).filter(
+			(entry) => !isMediaUrlEntity(entry, mediaUrls, tweetId),
+		),
+	};
+}
+
+function getHiddenMediaUrlRanges(
+	entities: TweetEntities,
+	media: TweetMediaItem[],
+	tweetId: string,
+) {
+	const mediaUrls = getMediaUrlSet(media);
+	if (mediaUrls.size === 0) return [];
+	return (entities.urls ?? [])
+		.filter((entry) => isMediaUrlEntity(entry, mediaUrls, tweetId))
+		.map((entry) => ({ start: entry.start, end: entry.end }));
+}
+
+function getVisibleUrlCards(item: TimelineItem, entities: TweetEntities) {
 	const quotedUrl = item.quotedTweet ? item.quotedTweet.id : null;
-	return (item.entities.urls ?? []).filter((entry) => {
+	return (entities.urls ?? []).filter((entry) => {
 		if (!item.quotedTweet) return true;
 		return !entry.expandedUrl.includes(quotedUrl ?? "");
 	});
@@ -61,56 +157,28 @@ 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 conversation = useConversationSurface(item.id);
+	const visibleEntities = getVisibleEntities(
+		item.entities,
+		item.media,
+		item.id,
 	);
-	const [conversationItems, setConversationItems] = useState<EmbeddedTweet[]>(
-		[],
+	const hiddenMediaUrlRanges = getHiddenMediaUrlRanges(
+		item.entities,
+		item.media,
+		item.id,
 	);
-
-	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();
-		}
-	}
+	const hasConversation = Boolean(item.replyToTweet || item.replyToId);
 
 	return (
 		<article
 			className={cx(feedRowClass, "cursor-pointer")}
 			data-perf="timeline-card"
+			onFocus={conversation.prefetch}
+			onMouseEnter={conversation.prefetch}
 			onClick={(event) => {
 				if (isInteractiveTarget(event.target)) return;
-				toggleConversation();
+				conversation.toggle();
 			}}
 		>
 			<AvatarChip
@@ -133,19 +201,47 @@ export function TimelineCard({
 					<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>
-							)}
+					{canReply || hasConversation ? (
+						<span className="ml-auto inline-flex items-center gap-1">
+							{hasConversation ? (
+								<span
+									aria-label="Part of a conversation"
+									className={cx(
+										feedRowStatePillClass,
+										feedRowStatePillActiveClass,
+									)}
+									title="Part of a conversation"
+								>
+									<MessageCircle className="size-3.5" strokeWidth={2} />
+									thread
+								</span>
+							) : null}
+							{canReply ? (
+								<span
+									aria-label={item.isReplied ? "We replied" : "Reply open"}
+									className={cx(
+										feedRowStatePillClass,
+										item.isReplied
+											? feedRowStatePillActiveClass
+											: feedRowStatePillOpenClass,
+									)}
+									title={item.isReplied ? "We replied" : "Reply open"}
+								>
+									{item.isReplied ? (
+										<CheckCircle2 className="size-3.5" strokeWidth={2} />
+									) : (
+										<Circle className="size-3" strokeWidth={2.2} />
+									)}
+									{item.isReplied ? "replied" : "open"}
+								</span>
+							) : null}
 						</span>
 					) : null}
 				</header>
 				<TweetRichText
 					className={feedRowTextClass}
 					entities={item.entities}
+					hiddenUrlRanges={hiddenMediaUrlRanges}
 					text={item.text}
 				/>
 				<TweetMediaGrid items={item.media} />
@@ -159,7 +255,7 @@ export function TimelineCard({
 						<EmbeddedTweetCard item={item.quotedTweet} label="Quoted tweet" />
 					</div>
 				) : null}
-				{getVisibleUrlCards(item).map((entry, index) => (
+				{getVisibleUrlCards(item, visibleEntities).map((entry, index) => (
 					<LinkPreviewCard
 						key={`${entry.expandedUrl}-${String(index)}`}
 						entry={entry}
@@ -169,14 +265,14 @@ export function TimelineCard({
 				<footer className={feedRowActionsClass}>
 					<div className="flex items-center gap-3 text-[13px] text-[var(--ink-soft)]">
 						<button
-							aria-expanded={conversationOpen}
+							aria-expanded={conversation.isOpen}
 							aria-label={
-								conversationOpen ? "Hide conversation" : "Show conversation"
+								conversation.isOpen ? "Hide conversation" : "Show conversation"
 							}
 							className={feedActionButtonClass}
 							onClick={(event) => {
 								event.stopPropagation();
-								toggleConversation();
+								conversation.toggle();
 							}}
 							type="button"
 						>
@@ -187,7 +283,7 @@ export function TimelineCard({
 								/>
 							</span>
 							<span className="text-[13px]">
-								{conversationOpen ? "Hide thread" : "Thread"}
+								{conversation.isOpen ? "Hide thread" : "Thread"}
 							</span>
 						</button>
 						{canReply ? (
@@ -257,12 +353,12 @@ export function TimelineCard({
 						<span>{item.accountHandle}</span>
 					</div>
 				</footer>
-				{conversationOpen ? (
+				{conversation.isOpen ? (
 					<ConversationThread
 						anchorId={item.id}
-						error={conversationError}
-						items={conversationItems}
-						loading={conversationLoading}
+						error={conversation.error}
+						items={conversation.items}
+						loading={conversation.loading}
 					/>
 				) : null}
 			</div>

package/src/components/TimelineRouteFrame.tsx

@@ -0,0 +1,156 @@
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+	FeedEmpty,
+	FeedError,
+	FeedLoading,
+	TweetSkeletonRows,
+} from "#/components/FeedState";
+import { SyncNowButton } from "#/components/SyncNowButton";
+import { TimelineCard } from "#/components/TimelineCard";
+import { ConversationSurfaceScope } from "#/lib/conversation-surface";
+import type { QueryEnvelope, ReplyFilter } from "#/lib/types";
+import type { WebSyncKind } from "#/lib/web-sync";
+import {
+	cx,
+	feedClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
+	tabButtonActiveClass,
+	tabButtonClass,
+	tabButtonIndicatorClass,
+	tabStripClass,
+} from "#/lib/ui";
+import { useTimelineRouteData } from "./useTimelineRouteData";
+
+const TABS: Array<{ value: ReplyFilter; label: string }> = [
+	{ value: "all", label: "All" },
+	{ value: "unreplied", label: "Unreplied" },
+	{ value: "replied", label: "Replied" },
+];
+
+interface TimelineRouteFrameProps {
+	title: string;
+	resource: "home" | "mentions";
+	initialReplyFilter: ReplyFilter;
+	searchPlaceholder: string;
+	syncKind: WebSyncKind;
+	syncLabel: string;
+	loadingLabel: string;
+	loadingDetail: string;
+	errorTitle: string;
+	errorFallback: string;
+	emptyLabel: string;
+	emptyDetail: string;
+	subtitle: (meta: QueryEnvelope | null) => string;
+}
+
+export function TimelineRouteFrame({
+	title,
+	resource,
+	initialReplyFilter,
+	searchPlaceholder,
+	syncKind,
+	syncLabel,
+	loadingLabel,
+	loadingDetail,
+	errorTitle,
+	errorFallback,
+	emptyLabel,
+	emptyDetail,
+	subtitle,
+}: TimelineRouteFrameProps) {
+	const [replyFilter, setReplyFilter] =
+		useState<ReplyFilter>(initialReplyFilter);
+	const [search, setSearch] = useState("");
+	const { meta, items, loading, error, retry, refreshLocalView, replyToTweet } =
+		useTimelineRouteData({
+			resource,
+			replyFilter,
+			search,
+			errorFallback,
+		});
+	const subtitleText = useMemo(() => subtitle(meta), [meta, subtitle]);
+
+	return (
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>{title}</h1>
+						<p className={pageSubtitleClass}>{subtitleText}</p>
+					</div>
+					<SyncNowButton
+						accounts={syncKind === "mentions" ? meta?.accounts : undefined}
+						kind={syncKind}
+						label={syncLabel}
+						onSynced={refreshLocalView}
+					/>
+				</div>
+				<div className="px-4 pb-3">
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
+						<input
+							className={searchFieldInputClass}
+							onChange={(event) => setSearch(event.target.value)}
+							placeholder={searchPlaceholder}
+							value={search}
+						/>
+					</label>
+				</div>
+				<div className={tabStripClass}>
+					{TABS.map((tab) => {
+						const active = replyFilter === tab.value;
+						return (
+							<button
+								key={tab.value}
+								type="button"
+								aria-pressed={active}
+								className={cx(tabButtonClass, active && tabButtonActiveClass)}
+								onClick={() => setReplyFilter(tab.value)}
+							>
+								<span className="relative inline-flex flex-col items-center justify-center py-1">
+									{tab.label}
+									{active ? <span className={tabButtonIndicatorClass} /> : null}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+			</header>
+			<ConversationSurfaceScope>
+				<section className={feedClass}>
+					{loading ? (
+						<FeedLoading detail={loadingDetail} label={loadingLabel}>
+							<TweetSkeletonRows />
+						</FeedLoading>
+					) : error ? (
+						<FeedError
+							action={
+								<button
+									className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
+									onClick={retry}
+									type="button"
+								>
+									Retry
+								</button>
+							}
+							message={error}
+							title={errorTitle}
+						/>
+					) : items.length === 0 ? (
+						<FeedEmpty detail={emptyDetail} label={emptyLabel} />
+					) : null}
+					{items.map((item) => (
+						<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
+					))}
+				</section>
+			</ConversationSurfaceScope>
+		</>
+	);
+}

package/src/components/TweetMediaGrid.tsx

@@ -1,39 +1,136 @@
+import { X } from "lucide-react";
+import { useState } from "react";
 import type { TweetMediaItem } from "#/lib/types";
 import { tweetMediaGridClass, tweetMediaTileClass } from "#/lib/ui";
 
 export function TweetMediaGrid({ items }: { items: TweetMediaItem[] }) {
+	const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 	if (items.length === 0) {
 		return null;
 	}
 
+	const visibleItems = items.slice(0, 4);
+	const selectedItem =
+		selectedIndex === null ? null : (visibleItems[selectedIndex] ?? null);
+	const selectedVideoUrl =
+		selectedItem?.type === "video" || selectedItem?.type === "gif"
+			? (selectedItem.variants?.[0]?.url ?? playableVideoUrl(selectedItem.url))
+			: null;
+
 	return (
-		<div className={tweetMediaGridClass(Math.min(items.length, 4))}>
-			{items.slice(0, 4).map((item, index) => (
-				<a
-					key={item.url + String(index)}
-					className={tweetMediaTileClass(index, Math.min(items.length, 4))}
-					href={item.url}
-					rel="noreferrer"
-					target="_blank"
+		<>
+			<div className={tweetMediaGridClass(Math.min(items.length, 4))}>
+				{visibleItems.map((item, index) => (
+					<button
+						key={item.url + String(index)}
+						aria-label={`Open tweet media ${String(index + 1)}`}
+						className={tweetMediaTileClass(index, Math.min(items.length, 4))}
+						onClick={(event) => {
+							event.stopPropagation();
+							setSelectedIndex(index);
+						}}
+						style={
+							visibleItems.length === 1 && item.width && item.height
+								? {
+										aspectRatio: `${String(item.width)} / ${String(item.height)}`,
+									}
+								: undefined
+						}
+						type="button"
+					>
+						{item.type === "image" ? (
+							<img
+								alt={item.altText ?? `Tweet media ${String(index + 1)}`}
+								className="tweet-media-image block size-full object-contain"
+								loading="lazy"
+								src={item.thumbnailUrl ?? item.url}
+							/>
+						) : (
+							<span className="tweet-media-fallback grid min-h-40 place-items-center font-semibold text-[var(--ink-soft)]">
+								{item.type === "video"
+									? "Video"
+									: item.type === "gif"
+										? "GIF"
+										: "Media"}
+							</span>
+						)}
+					</button>
+				))}
+			</div>
+			{selectedItem ? (
+				<div
+					aria-modal="true"
+					className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4"
+					onClick={(event) => {
+						event.stopPropagation();
+						setSelectedIndex(null);
+					}}
+					role="dialog"
 				>
-					{item.type === "image" ? (
+					<button
+						aria-label="Close media viewer"
+						className="absolute right-4 top-4 grid size-10 place-items-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+						onClick={(event) => {
+							event.stopPropagation();
+							setSelectedIndex(null);
+						}}
+						type="button"
+					>
+						<X className="size-5" strokeWidth={1.8} />
+					</button>
+					{selectedItem.type === "image" ? (
 						<img
-							alt={item.altText ?? `Tweet media ${String(index + 1)}`}
-							className="tweet-media-image block size-full object-cover"
-							loading="lazy"
-							src={item.thumbnailUrl ?? item.url}
+							alt={selectedItem.altText ?? "Tweet media"}
+							className="max-h-[92vh] max-w-[92vw] object-contain"
+							onClick={(event) => event.stopPropagation()}
+							src={selectedItem.url}
+						/>
+					) : selectedVideoUrl ? (
+						<video
+							autoPlay={selectedItem.type === "gif"}
+							className="max-h-[92vh] max-w-[92vw]"
+							controls
+							loop={selectedItem.type === "gif"}
+							muted={selectedItem.type === "gif"}
+							onClick={(event) => event.stopPropagation()}
+							playsInline
+							poster={selectedItem.thumbnailUrl}
+							src={selectedVideoUrl}
 						/>
 					) : (
-						<span className="tweet-media-fallback grid min-h-40 place-items-center font-semibold text-[var(--ink-soft)]">
-							{item.type === "video"
-								? "Video"
-								: item.type === "gif"
-									? "GIF"
-									: "Media"}
-						</span>
+						<div
+							className="grid min-h-64 min-w-80 place-items-center gap-3 rounded-2xl border border-white/20 bg-black p-6 text-white"
+							onClick={(event) => event.stopPropagation()}
+						>
+							<span>
+								{selectedItem.type === "video"
+									? "Video"
+									: selectedItem.type === "gif"
+										? "GIF"
+										: "Media"}
+							</span>
+							<a
+								className="rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-white/20"
+								href={selectedItem.url}
+								rel="noreferrer"
+								target="_blank"
+							>
+								Open media
+							</a>
+						</div>
 					)}
-				</a>
-			))}
-		</div>
+				</div>
+			) : null}
+		</>
 	);
 }
+
+function playableVideoUrl(url: string) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.hostname === "video.twimg.com") return url;
+		return /\.(?:mp4|m3u8)(?:$|[?#])/i.test(parsed.pathname) ? url : undefined;
+	} catch {
+		return /\.(?:mp4|m3u8)(?:$|[?#])/i.test(url) ? url : undefined;
+	}
+}

package/src/components/TweetRichText.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from "react";
+import type { ReactNode } from "react";
 import {
 	collectTweetSegments,
 	enrichFallbackUrlEntities,
@@ -16,10 +17,12 @@ export function TweetRichText({
 	text,
 	entities,
 	className = "body-copy",
+	hiddenUrlRanges = [],
 }: {
 	text: string;
 	entities: TweetEntities;
 	className?: string;
+	hiddenUrlRanges?: Array<{ start: number; end: number }>;
 }) {
 	const richEntities = enrichFallbackUrlEntities(text, entities);
 	const segments = collectTweetSegments(richEntities);
@@ -39,12 +42,20 @@ export function TweetRichText({
 				const prefix = text.slice(cursor, segment.start);
 				cursor = segment.end;
 
-				let node = (
+				let node: ReactNode = (
 					<Fragment key={`segment-${String(index)}`}>
 						{text.slice(segment.start, segment.end)}
 					</Fragment>
 				);
-				if (segment.kind === "mention" && segment.profile) {
+				if (
+					segment.kind === "url" &&
+					hiddenUrlRanges.some(
+						(range) =>
+							range.start === segment.start && range.end === segment.end,
+					)
+				) {
+					node = null;
+				} else if (segment.kind === "mention" && segment.profile) {
 					node = (
 						<ProfilePreview
 							key={`segment-${String(index)}`}