birdclaw 0.5.1 → 0.6.0

package/src/components/ThemeSlider.tsx

@@ -17,59 +17,64 @@ const THEME_OPTIONS = [
 	label: string;
 }>;
 
-export function ThemeSlider() {
-	const { isReady, theme, setTheme } = useTheme();
-
-	return (
-		<fieldset
-			className="theme-slider-shell m-0 flex justify-center border-0 px-2 py-1 min-[1100px]:justify-start min-[1100px]:px-3"
-			aria-label="Theme selector"
-		>
-			<div className="theme-slider flex flex-col items-center gap-1.5 min-[1100px]:flex-row">
-				{THEME_OPTIONS.map((option, index) => {
-					const Icon = option.icon;
-					const isActive = option.key === theme || (index === 0 && !theme);
+function themeIndex(theme: ThemeValue) {
+	return THEME_OPTIONS.findIndex((option) => option.key === theme);
+}
 
-					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-						if (isActive) return;
+export function ThemeSlider({ compact = false }: { compact?: boolean }) {
+	const { isReady, theme, setTheme } = useTheme();
+	const activeIndex = Math.max(themeIndex(theme), 0);
+	const activeOption = THEME_OPTIONS[activeIndex];
+	const nextOption = THEME_OPTIONS[(activeIndex + 1) % THEME_OPTIONS.length];
+	const Icon = activeOption.icon;
 
-						const context: ThemeTransitionContext = {
-							element: event.currentTarget,
-							pointerClientX: event.clientX,
-							pointerClientY: event.clientY,
-						};
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		const context: ThemeTransitionContext = {
+			element: event.currentTarget,
+			pointerClientX: event.clientX,
+			pointerClientY: event.clientY,
+		};
 
-						startThemeTransition({
-							nextTheme: option.key,
-							currentTheme: theme,
-							setTheme,
-							context,
-						});
-					};
+		startThemeTransition({
+			nextTheme: nextOption.key,
+			currentTheme: theme,
+			setTheme,
+			context,
+		});
+	};
 
-					return (
-						<button
-							key={option.key}
-							type="button"
-							className={cx(
-								"theme-slider-button inline-flex size-9 items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[background,color,transform] duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
-								isActive &&
-									"theme-slider-button-active bg-[var(--bg-active)] text-[var(--ink)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_72%,transparent)]",
-							)}
-							onClick={handleClick}
-							aria-label={option.label}
-							aria-pressed={isActive}
-							data-testid={`theme-${option.key}`}
-							disabled={!isReady}
-						>
-							<Icon
-								className="theme-slider-icon size-[17px]"
-								strokeWidth={isActive ? 2.1 : 1.8}
-							/>
-						</button>
-					);
-				})}
-			</div>
-		</fieldset>
+	return (
+		<div
+			className={cx(
+				"theme-toggle-shell flex justify-center",
+				compact
+					? "shrink-0"
+					: "px-1 py-1 min-[1100px]:justify-start min-[1100px]:px-2",
+			)}
+			title={`${activeOption.label}; click for ${nextOption.label}`}
+		>
+			<button
+				type="button"
+				className={cx(
+					"theme-toggle-button inline-flex items-center justify-center rounded-full border bg-transparent text-[var(--ink-soft)] transition-[background,border-color,color,transform,box-shadow] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_38%,var(--line))] hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
+					compact
+						? "size-8 border-transparent"
+						: "size-11 border-[var(--line)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_44%,transparent)]",
+				)}
+				onClick={handleClick}
+				aria-label={`Theme: ${activeOption.label}. Switch to ${nextOption.label}.`}
+				data-testid="theme-toggle"
+				disabled={!isReady}
+			>
+				<Icon
+					className={cx(
+						"theme-toggle-icon",
+						compact ? "size-[17px]" : "size-[19px]",
+					)}
+					strokeWidth={2}
+					aria-hidden="true"
+				/>
+			</button>
+		</div>
 	);
 }

package/src/components/TimelineCard.tsx

@@ -1,9 +1,9 @@
 import {
-	Bookmark,
 	BookmarkCheck,
 	CheckCircle2,
 	Circle,
 	Heart,
+	Image,
 	MessageCircle,
 	Repeat2,
 } from "lucide-react";
@@ -21,8 +21,6 @@ import {
 	feedActionButtonClass,
 	feedActionIconClass,
 	feedActionIconWrapClass,
-	feedActionIconWrapLikeClass,
-	feedActionLikeClass,
 	feedRowActionsClass,
 	feedRowBodyClass,
 	feedRowClass,
@@ -35,7 +33,6 @@ import {
 	feedRowStatePillOpenClass,
 	feedRowTextClass,
 	feedRowTimestampClass,
-	mutedDotClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
 import { ConversationThread } from "./ConversationThread";
@@ -83,6 +80,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(entities: TweetEntities) {
+	return (entities.urls ?? [])
+		.filter(isUnresolvedShortUrlEntity)
+		.map((entry) => ({ start: entry.start, end: entry.end }));
+}
+
+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(entities);
+	if (ranges.length === 0) return false;
+	return textOutsideRanges(text, ranges).trim().length === 0;
+}
+
 function isOwnStatusMediaUrl(
 	value: string | null | undefined,
 	tweetId: string,
@@ -108,13 +163,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 +186,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))
+		.filter(
+			(entry) =>
+				isMediaUrlEntity(entry, mediaUrls, tweetId) ||
+				(hideUnresolvedShortUrls && isUnresolvedShortUrlEntity(entry)),
+		)
 		.map((entry) => ({ start: entry.start, end: entry.end }));
 }
 
-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 +233,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 +284,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 +330,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 +430,7 @@ export function TimelineCard({
 								className={feedActionButtonClass}
 								onClick={(event) => {
 									event.stopPropagation();
-									onReply(item.id);
+									onReply(interactionTweetId);
 								}}
 								type="button"
 								aria-label="Reply"
@@ -305,57 +444,50 @@ export function TimelineCard({
 								<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(
-								feedActionButtonClass,
-								feedActionLikeClass,
-								"cursor-default",
-								item.liked && "text-[var(--like)]",
-							)}
-						>
+						{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,21 @@ 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,
+	} = useTimelineRouteData({
+		resource,
+		replyFilter,
+		search,
+		errorFallback,
+	});
 	const subtitleText = useMemo(() => subtitle(meta), [meta, subtitle]);
 
 	return (
@@ -86,7 +95,7 @@ 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}
@@ -123,6 +132,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 ? (