birdclaw 0.5.1 → 0.7.0

package/src/components/TimelineCard.tsx

@@ -1,13 +1,15 @@
 import {
-	Bookmark,
 	BookmarkCheck,
 	CheckCircle2,
 	Circle,
 	Heart,
+	Image,
 	MessageCircle,
 	Repeat2,
+	UserSearch,
 } from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import { normalizeTweetUrlEntityRangeForText } from "#/lib/tweet-render";
 import type {
 	TimelineItem,
 	TweetEntities,
@@ -21,8 +23,6 @@ import {
 	feedActionButtonClass,
 	feedActionIconClass,
 	feedActionIconWrapClass,
-	feedActionIconWrapLikeClass,
-	feedActionLikeClass,
 	feedRowActionsClass,
 	feedRowBodyClass,
 	feedRowClass,
@@ -35,7 +35,6 @@ import {
 	feedRowStatePillOpenClass,
 	feedRowTextClass,
 	feedRowTimestampClass,
-	mutedDotClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
 import { ConversationThread } from "./ConversationThread";
@@ -83,6 +82,64 @@ function isMediaUrlEntity(
 	return false;
 }
 
+function isShortUrl(value: string | null | undefined) {
+	if (!value) return false;
+	try {
+		const candidate = value.includes("://") ? value : `https://${value}`;
+		const parsed = new URL(candidate);
+		return parsed.hostname.replace(/^www\./, "") === "t.co";
+	} catch {
+		return false;
+	}
+}
+
+function isUnresolvedShortUrlEntity(entry: TweetUrlEntity) {
+	if (isShortUrl(entry.expandedUrl)) return true;
+	if (entry.expandedUrl) return false;
+	if (isShortUrl(entry.displayUrl)) return true;
+	return !entry.displayUrl && isShortUrl(entry.url);
+}
+
+function unresolvedShortUrlRanges(text: string, entities: TweetEntities) {
+	return (entities.urls ?? [])
+		.filter(isUnresolvedShortUrlEntity)
+		.map((entry) => normalizeTweetUrlEntityRangeForText(text, entry));
+}
+
+function textOutsideRanges(
+	text: string,
+	ranges: Array<{ start: number; end: number }>,
+) {
+	let cursor = 0;
+	let output = "";
+	for (const range of [...ranges].sort(
+		(left, right) => left.start - right.start,
+	)) {
+		if (
+			range.start < cursor ||
+			range.end <= range.start ||
+			range.end > text.length
+		) {
+			continue;
+		}
+		output += text.slice(cursor, range.start);
+		cursor = range.end;
+	}
+	output += text.slice(cursor);
+	return output;
+}
+
+function shouldHideUnresolvedShortUrls(
+	text: string,
+	entities: TweetEntities,
+	mediaUrls: Set<string>,
+) {
+	if (mediaUrls.size === 0) return false;
+	const ranges = unresolvedShortUrlRanges(text, entities);
+	if (ranges.length === 0) return false;
+	return textOutsideRanges(text, ranges).trim().length === 0;
+}
+
 function isOwnStatusMediaUrl(
 	value: string | null | undefined,
 	tweetId: string,
@@ -108,13 +165,21 @@ function getVisibleEntities(
 	entities: TweetEntities,
 	media: TweetMediaItem[],
 	tweetId: string,
+	text: string,
 ) {
 	const mediaUrls = getMediaUrlSet(media);
 	if (mediaUrls.size === 0) return entities;
+	const hideUnresolvedShortUrls = shouldHideUnresolvedShortUrls(
+		text,
+		entities,
+		mediaUrls,
+	);
 	return {
 		...entities,
 		urls: (entities.urls ?? []).filter(
-			(entry) => !isMediaUrlEntity(entry, mediaUrls, tweetId),
+			(entry) =>
+				!isMediaUrlEntity(entry, mediaUrls, tweetId) &&
+				!(hideUnresolvedShortUrls && isUnresolvedShortUrlEntity(entry)),
 		),
 	};
 }
@@ -123,19 +188,32 @@ function getHiddenMediaUrlRanges(
 	entities: TweetEntities,
 	media: TweetMediaItem[],
 	tweetId: string,
+	text: string,
 ) {
 	const mediaUrls = getMediaUrlSet(media);
 	if (mediaUrls.size === 0) return [];
+	const hideUnresolvedShortUrls = shouldHideUnresolvedShortUrls(
+		text,
+		entities,
+		mediaUrls,
+	);
 	return (entities.urls ?? [])
-		.filter((entry) => isMediaUrlEntity(entry, mediaUrls, tweetId))
-		.map((entry) => ({ start: entry.start, end: entry.end }));
+		.filter(
+			(entry) =>
+				isMediaUrlEntity(entry, mediaUrls, tweetId) ||
+				(hideUnresolvedShortUrls && isUnresolvedShortUrlEntity(entry)),
+		)
+		.map((entry) => normalizeTweetUrlEntityRangeForText(text, entry));
 }
 
-function getVisibleUrlCards(item: TimelineItem, entities: TweetEntities) {
-	const quotedUrl = item.quotedTweet ? item.quotedTweet.id : null;
+function getVisibleUrlCards(
+	entities: TweetEntities,
+	quotedTweetId: string | null,
+) {
 	return (entities.urls ?? []).filter((entry) => {
-		if (!item.quotedTweet) return true;
-		return !entry.expandedUrl.includes(quotedUrl ?? "");
+		if (isUnresolvedShortUrlEntity(entry)) return false;
+		if (!quotedTweetId) return true;
+		return !entry.expandedUrl.includes(quotedTweetId);
 	});
 }
 
@@ -157,18 +235,44 @@ export function TimelineCard({
 }) {
 	const canReply =
 		showReplyControls && item.kind !== "like" && item.kind !== "bookmark";
-	const conversation = useConversationSurface(item.id);
+	const displayTweet = item.retweetedTweet ?? item;
+	const displayTweetId = displayTweet.id;
+	const interactionTweetId =
+		item.retweetedTweet && displayTweetId === `${item.id}:retweeted`
+			? item.id
+			: displayTweetId;
+	const displayAuthor = displayTweet.author;
+	const conversation = useConversationSurface(item.id, interactionTweetId);
 	const visibleEntities = getVisibleEntities(
-		item.entities,
-		item.media,
-		item.id,
+		displayTweet.entities,
+		displayTweet.media,
+		displayTweet.id,
+		displayTweet.text,
 	);
 	const hiddenMediaUrlRanges = getHiddenMediaUrlRanges(
-		item.entities,
-		item.media,
-		item.id,
+		displayTweet.entities,
+		displayTweet.media,
+		displayTweet.id,
+		displayTweet.text,
+	);
+	const visibleUrlCards = getVisibleUrlCards(
+		visibleEntities,
+		item.retweetedTweet ? null : (item.quotedTweet?.id ?? null),
+	);
+	const displayMediaCount = item.retweetedTweet
+		? (displayTweet.mediaCount ?? displayTweet.media.length)
+		: item.mediaCount;
+	const displayIsReplied = displayTweet.isReplied ?? item.isReplied;
+	const displayLikeCount = displayTweet.likeCount ?? item.likeCount;
+	const displayBookmarked = displayTweet.bookmarked ?? item.bookmarked;
+	const displayLiked = displayTweet.liked ?? item.liked;
+	const showLikeIndicator = displayLiked || displayLikeCount > 0;
+	const showMediaIndicator = displayMediaCount > 0;
+	const hasConversation = Boolean(
+		item.retweetedTweet
+			? displayTweet.replyToId
+			: item.replyToTweet || item.replyToId,
 	);
-	const hasConversation = Boolean(item.replyToTweet || item.replyToId);
 
 	return (
 		<article
@@ -182,24 +286,34 @@ export function TimelineCard({
 			}}
 		>
 			<AvatarChip
-				avatarUrl={item.author.avatarUrl}
-				hue={item.author.avatarHue}
-				name={item.author.displayName}
-				profileId={item.author.id}
+				avatarUrl={displayAuthor.avatarUrl}
+				hue={displayAuthor.avatarHue}
+				name={displayAuthor.displayName}
+				profileId={displayAuthor.id}
 			/>
 			<div className={feedRowBodyClass}>
+				{item.retweetedTweet ? (
+					<div className="inline-flex items-center gap-2 text-[13px] font-medium text-[var(--ink-soft)]">
+						<Repeat2 className="size-4" strokeWidth={1.8} />
+						<ProfilePreview profile={item.author}>
+							<span>{item.author.displayName} reposted</span>
+						</ProfilePreview>
+					</div>
+				) : null}
 				<header className={feedRowHeaderClass}>
-					<ProfilePreview profile={item.author}>
+					<ProfilePreview profile={displayAuthor}>
 						<span className="flex min-w-0 items-center gap-1.5">
 							<span className={feedRowNameClass}>
-								{item.author.displayName}
+								{displayAuthor.displayName}
+							</span>
+							<span className={feedRowHandleClass}>
+								@{displayAuthor.handle}
 							</span>
-							<span className={feedRowHandleClass}>@{item.author.handle}</span>
 						</span>
 					</ProfilePreview>
 					<span className={feedRowDotClass}>·</span>
 					<span className={feedRowTimestampClass}>
-						{formatShortTimestamp(item.createdAt)}
+						{formatShortTimestamp(displayTweet.createdAt)}
 					</span>
 					{canReply || hasConversation ? (
 						<span className="ml-auto inline-flex items-center gap-1">
@@ -218,50 +332,77 @@ export function TimelineCard({
 							) : null}
 							{canReply ? (
 								<span
-									aria-label={item.isReplied ? "We replied" : "Reply open"}
+									aria-label={displayIsReplied ? "We replied" : "Reply open"}
 									className={cx(
 										feedRowStatePillClass,
-										item.isReplied
+										displayIsReplied
 											? feedRowStatePillActiveClass
 											: feedRowStatePillOpenClass,
 									)}
-									title={item.isReplied ? "We replied" : "Reply open"}
+									title={displayIsReplied ? "We replied" : "Reply open"}
 								>
-									{item.isReplied ? (
+									{displayIsReplied ? (
 										<CheckCircle2 className="size-3.5" strokeWidth={2} />
 									) : (
 										<Circle className="size-3" strokeWidth={2.2} />
 									)}
-									{item.isReplied ? "replied" : "open"}
+									{displayIsReplied ? "replied" : "open"}
 								</span>
 							) : null}
 						</span>
 					) : null}
 				</header>
-				<TweetRichText
-					className={feedRowTextClass}
-					entities={item.entities}
-					hiddenUrlRanges={hiddenMediaUrlRanges}
-					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, visibleEntities).map((entry, index) => (
-					<LinkPreviewCard
-						key={`${entry.expandedUrl}-${String(index)}`}
-						entry={entry}
-						index={index}
-					/>
-				))}
+				{item.retweetedTweet ? (
+					<>
+						<TweetRichText
+							className={feedRowTextClass}
+							entities={displayTweet.entities}
+							hiddenUrlRanges={hiddenMediaUrlRanges}
+							text={displayTweet.text}
+						/>
+						<TweetMediaGrid items={displayTweet.media} />
+						{visibleUrlCards.map((entry, index) => (
+							<LinkPreviewCard
+								key={`${entry.expandedUrl}-${String(index)}`}
+								entry={entry}
+								index={index}
+							/>
+						))}
+					</>
+				) : (
+					<>
+						<TweetRichText
+							className={feedRowTextClass}
+							entities={item.entities}
+							hiddenUrlRanges={hiddenMediaUrlRanges}
+							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}
+						{visibleUrlCards.map((entry, index) => (
+							<LinkPreviewCard
+								key={`${entry.expandedUrl}-${String(index)}`}
+								entry={entry}
+								index={index}
+							/>
+						))}
+					</>
+				)}
 				<footer className={feedRowActionsClass}>
 					<div className="flex items-center gap-3 text-[13px] text-[var(--ink-soft)]">
 						<button
@@ -291,7 +432,7 @@ export function TimelineCard({
 								className={feedActionButtonClass}
 								onClick={(event) => {
 									event.stopPropagation();
-									onReply(item.id);
+									onReply(interactionTweetId);
 								}}
 								type="button"
 								aria-label="Reply"
@@ -305,57 +446,64 @@ export function TimelineCard({
 								<span className="text-[13px]">Reply</span>
 							</button>
 						) : null}
-						<span className={cx(feedActionButtonClass, "cursor-default")}>
+						<a
+							aria-label={`Analyse @${displayAuthor.handle}`}
+							className={feedActionButtonClass}
+							href={`/profiles/${encodeURIComponent(displayAuthor.handle)}`}
+							onClick={(event) => {
+								event.stopPropagation();
+							}}
+							title={`Analyse @${displayAuthor.handle}`}
+						>
 							<span className={feedActionIconWrapClass}>
-								<Repeat2 className={feedActionIconClass} strokeWidth={1.7} />
+								<UserSearch className={feedActionIconClass} strokeWidth={1.7} />
 							</span>
-						</span>
-						<span
-							className={cx(
-								feedActionButtonClass,
-								feedActionLikeClass,
-								"cursor-default",
-								item.liked && "text-[var(--like)]",
-							)}
-						>
+							<span className="text-[13px]">Analyse</span>
+						</a>
+						{showLikeIndicator ? (
 							<span
+								aria-label={`${formatCompactNumber(displayLikeCount)} likes`}
 								className={cx(
-									feedActionIconWrapClass,
-									feedActionIconWrapLikeClass,
+									"inline-flex items-center gap-1 px-2 py-1 text-[13px]",
+									displayLiked && "text-[var(--like)]",
 								)}
+								title={`${formatCompactNumber(displayLikeCount)} likes`}
 							>
 								<Heart
 									className={feedActionIconClass}
 									strokeWidth={1.7}
-									fill={item.liked ? "currentColor" : "none"}
+									fill={displayLiked ? "currentColor" : "none"}
 								/>
+								<span>{formatCompactNumber(displayLikeCount)}</span>
 							</span>
-							<span>{formatCompactNumber(item.likeCount)}</span>
-						</span>
-						<span className={cx(feedActionButtonClass, "cursor-default")}>
-							<span className={feedActionIconWrapClass}>
-								{item.bookmarked ? (
-									<BookmarkCheck
-										className={feedActionIconClass}
-										strokeWidth={1.7}
-									/>
-								) : (
-									<Bookmark className={feedActionIconClass} strokeWidth={1.7} />
-								)}
+						) : null}
+						{displayBookmarked ? (
+							<span
+								aria-label="Bookmarked"
+								className="inline-flex items-center px-2 py-1"
+								title="Bookmarked"
+							>
+								<BookmarkCheck
+									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>
+						) : null}
+						{showMediaIndicator ? (
+							<span
+								aria-label={`${String(displayMediaCount)} media attachments`}
+								className="inline-flex items-center gap-1 px-2 py-1 text-[13px]"
+								title={`${String(displayMediaCount)} media attachments`}
+							>
+								<Image className={feedActionIconClass} strokeWidth={1.7} />
+								<span>{displayMediaCount}</span>
+							</span>
+						) : null}
 					</div>
 				</footer>
 				{conversation.isOpen ? (
 					<ConversationThread
-						anchorId={item.id}
+						anchorId={interactionTweetId}
 						error={conversation.error}
 						items={conversation.items}
 						loading={conversation.loading}

package/src/components/TimelineRouteFrame.tsx

@@ -25,6 +25,7 @@ import {
 	tabButtonClass,
 	tabButtonIndicatorClass,
 	tabStripClass,
+	timestampClass,
 } from "#/lib/ui";
 import { useTimelineRouteData } from "./useTimelineRouteData";
 
@@ -68,13 +69,24 @@ export function TimelineRouteFrame({
 	const [replyFilter, setReplyFilter] =
 		useState<ReplyFilter>(initialReplyFilter);
 	const [search, setSearch] = useState("");
-	const { meta, items, loading, error, retry, refreshLocalView, replyToTweet } =
-		useTimelineRouteData({
-			resource,
-			replyFilter,
-			search,
-			errorFallback,
-		});
+	const {
+		meta,
+		items,
+		loading,
+		error,
+		replyError,
+		retry,
+		refreshLocalView,
+		replyToTweet,
+		hasMore,
+		loadingMore,
+		loadMore,
+	} = useTimelineRouteData({
+		resource,
+		replyFilter,
+		search,
+		errorFallback,
+	});
 	const subtitleText = useMemo(() => subtitle(meta), [meta, subtitle]);
 
 	return (
@@ -86,10 +98,11 @@ export function TimelineRouteFrame({
 						<p className={pageSubtitleClass}>{subtitleText}</p>
 					</div>
 					<SyncNowButton
-						accounts={syncKind === "mentions" ? meta?.accounts : undefined}
+						accounts={meta?.accounts}
 						kind={syncKind}
 						label={syncLabel}
 						onSynced={refreshLocalView}
+						showAccountPicker
 					/>
 				</div>
 				<div className="px-4 pb-3">
@@ -123,6 +136,11 @@ export function TimelineRouteFrame({
 					})}
 				</div>
 			</header>
+			{replyError ? (
+				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
+					{replyError}
+				</p>
+			) : null}
 			<ConversationSurfaceScope>
 				<section className={feedClass}>
 					{loading ? (
@@ -149,6 +167,18 @@ export function TimelineRouteFrame({
 					{items.map((item) => (
 						<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
 					))}
+					{!loading && !error && hasMore ? (
+						<div className="flex justify-center py-4">
+							<button
+								className="rounded-full bg-[var(--accent)] px-5 py-1.5 text-[14px] font-bold text-white disabled:opacity-60"
+								disabled={loadingMore}
+								onClick={loadMore}
+								type="button"
+							>
+								{loadingMore ? "Loading…" : "Load more"}
+							</button>
+						</div>
+					) : null}
 				</section>
 			</ConversationSurfaceScope>
 		</>