birdclaw 0.8.1 → 0.8.2

package/src/components/ProfilePreview.tsx

@@ -1,10 +1,4 @@
-import {
-	Fragment,
-	type ReactNode,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
+import { Fragment, type ReactNode } from "react";
 import { formatCompactNumber } from "#/lib/present";
 import {
 	collectTweetSegmentsForText,
@@ -25,25 +19,7 @@ import {
 } from "#/lib/ui";
 import { safeHttpUrl } from "#/lib/url-safety";
 import { AvatarChip } from "./AvatarChip";
-
-type VerticalBounds = { top: number; bottom: number };
-
-function nearestVerticalClipBounds(element: HTMLElement): VerticalBounds {
-	let top = 0;
-	let bottom = window.innerHeight;
-	for (
-		let current = element.parentElement;
-		current;
-		current = current.parentElement
-	) {
-		const style = window.getComputedStyle(current);
-		if (!/(auto|scroll|hidden|clip)/.test(style.overflowY)) continue;
-		const rect = current.getBoundingClientRect();
-		top = Math.max(top, rect.top);
-		bottom = Math.min(bottom, rect.bottom);
-	}
-	return { top, bottom };
-}
+import { useFloatingPreview } from "./FloatingPreview";
 
 function ProfilePreviewBio({ profile }: { profile: ProfileRecord }) {
 	const segments = collectTweetSegmentsForText(
@@ -98,74 +74,56 @@ export function ProfilePreview({
 	children: ReactNode;
 	className?: string;
 }) {
-	const [placeAbove, setPlaceAbove] = useState(false);
-	const shellRef = useRef<HTMLSpanElement | null>(null);
-	const cardRef = useRef<HTMLSpanElement | null>(null);
-
-	function updatePlacement() {
-		const shell = shellRef.current;
-		if (!shell) return;
-		const shellRect = shell.getBoundingClientRect();
-		const card = cardRef.current;
-		const cardRect = card?.getBoundingClientRect();
-		const cardHeight = Math.max(
-			card?.offsetHeight ?? 0,
-			cardRect?.height ?? 0,
-			180,
-		);
-		const bounds = nearestVerticalClipBounds(shell);
-		const belowSpace = bounds.bottom - shellRect.bottom;
-		const aboveSpace = shellRect.top - bounds.top;
-		setPlaceAbove(belowSpace < cardHeight + 18 && aboveSpace >= belowSpace);
-	}
-
-	useLayoutEffect(() => {
-		updatePlacement();
-		const frame = window.requestAnimationFrame(updatePlacement);
-		return () => window.cancelAnimationFrame(frame);
-	}, []);
+	const preview = useFloatingPreview();
 
 	return (
 		<span
-			ref={shellRef}
-			className={cx(profilePreviewClass, "group", className)}
-			onFocus={updatePlacement}
-			onPointerEnter={updatePlacement}
+			ref={preview.referenceRef}
+			className={cx(profilePreviewClass, className)}
+			{...preview.referenceProps}
 		>
 			<a
+				aria-controls={preview.open ? preview.floatingId : undefined}
+				aria-expanded={preview.open}
 				className={profilePreviewTriggerClass}
 				href={`/profiles/${encodeURIComponent(profile.handle)}`}
 			>
 				{children}
 			</a>
-			<span
-				ref={cardRef}
-				className={cx(
-					profilePreviewCardClass,
-					placeAbove
-						? "bottom-[calc(100%+8px)] -translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0"
-						: "top-[calc(100%+8px)] translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0",
-				)}
-			>
-				<span className={profilePreviewHeaderClass}>
-					<AvatarChip
-						avatarUrl={profile.avatarUrl}
-						hue={profile.avatarHue}
-						name={profile.displayName}
-						profileId={profile.id}
-					/>
-					<span className="flex min-w-0 flex-col">
-						<span className={profilePreviewNameClass}>
-							{profile.displayName}
+			{preview.open ? (
+				<span
+					aria-label={`${profile.displayName} profile preview`}
+					id={preview.floatingId}
+					ref={preview.floatingRef}
+					className={profilePreviewCardClass}
+					role="group"
+					style={preview.floatingStyle}
+					{...preview.floatingProps}
+				>
+					<span className="grid gap-2" data-floating-preview-content>
+						<span className={profilePreviewHeaderClass}>
+							<AvatarChip
+								avatarUrl={profile.avatarUrl}
+								hue={profile.avatarHue}
+								name={profile.displayName}
+								profileId={profile.id}
+							/>
+							<span className="flex min-w-0 flex-col">
+								<span className={profilePreviewNameClass}>
+									{profile.displayName}
+								</span>
+								<span className={profilePreviewHandleClass}>
+									@{profile.handle}
+								</span>
+							</span>
+						</span>
+						{profile.bio ? <ProfilePreviewBio profile={profile} /> : null}
+						<span className={profilePreviewMetaClass}>
+							{formatCompactNumber(profile.followersCount)} followers
 						</span>
-						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
 					</span>
 				</span>
-				{profile.bio ? <ProfilePreviewBio profile={profile} /> : null}
-				<span className={profilePreviewMetaClass}>
-					{formatCompactNumber(profile.followersCount)} followers
-				</span>
-			</span>
+			) : null}
 		</span>
 	);
 }

package/src/components/TimelineCard.tsx

@@ -9,7 +9,10 @@ import {
 	UserSearch,
 } from "lucide-react";
 import { formatCompactNumber } from "#/lib/present";
-import { normalizeTweetUrlEntityRangeForText } from "#/lib/tweet-render";
+import {
+	isTweetArticleUrlEntity,
+	normalizeTweetUrlEntityRangeForText,
+} from "#/lib/tweet-render";
 import type {
 	TimelineItem,
 	TweetEntities,
@@ -42,6 +45,7 @@ import { EmbeddedTweetCard } from "./EmbeddedTweetCard";
 import { LinkPreviewCard } from "./LinkPreviewCard";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -213,6 +217,9 @@ function getVisibleUrlCards(
 ) {
 	return (entities.urls ?? []).filter((entry) => {
 		if (isUnresolvedShortUrlEntity(entry)) return false;
+		if (entities.article && isTweetArticleUrlEntity(entry, entities.article)) {
+			return false;
+		}
 		if (!quotedTweetId) return true;
 		return !entry.expandedUrl.includes(quotedTweetId);
 	});
@@ -277,7 +284,10 @@ export function TimelineCard({
 
 	return (
 		<article
-			className={cx(feedRowClass, "cursor-pointer")}
+			className={cx(
+				feedRowClass,
+				"cursor-pointer [content-visibility:auto] [contain-intrinsic-size:auto_280px]",
+			)}
 			data-perf="timeline-card"
 			onFocus={conversation.prefetch}
 			onMouseEnter={conversation.prefetch}
@@ -363,6 +373,9 @@ export function TimelineCard({
 							text={displayTweet.text}
 						/>
 						<TweetMediaGrid items={displayTweet.media} />
+						{displayTweet.entities.article ? (
+							<TweetArticleCard article={displayTweet.entities.article} />
+						) : null}
 						{visibleUrlCards.map((entry, index) => (
 							<LinkPreviewCard
 								key={`${entry.expandedUrl}-${String(index)}`}
@@ -380,6 +393,9 @@ export function TimelineCard({
 							text={item.text}
 						/>
 						<TweetMediaGrid items={item.media} />
+						{item.entities.article ? (
+							<TweetArticleCard article={item.entities.article} />
+						) : null}
 						{item.replyToTweet ? (
 							<div className={embeddedCardClass}>
 								<EmbeddedTweetCard

package/src/components/TweetArticleCard.tsx

@@ -0,0 +1,66 @@
+import { BookOpen, ExternalLink } from "lucide-react";
+import type { TweetArticle } from "#/lib/types";
+import {
+	linkPreviewCardClass,
+	linkPreviewDescClass,
+	linkPreviewHostClass,
+	linkPreviewTitleClass,
+} from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
+
+function safeArticleImageUrl(value: string | undefined) {
+	const url = safeHttpUrl(value);
+	if (!url) return null;
+	try {
+		return new URL(url).hostname === "pbs.twimg.com" ? url : null;
+	} catch {
+		return null;
+	}
+}
+
+export function TweetArticleCard({ article }: { article: TweetArticle }) {
+	const href = safeHttpUrl(article.url);
+	if (!href) return null;
+	const imageUrl = safeArticleImageUrl(article.coverImageUrl);
+
+	return (
+		<a
+			aria-label={`Read article: ${article.title}`}
+			className={linkPreviewCardClass}
+			data-perf="tweet-article-card"
+			href={href}
+			rel="noreferrer"
+			target="_blank"
+		>
+			<div className="flex min-w-0 flex-1 flex-col justify-center gap-1 px-3.5 py-3">
+				<div className="flex min-w-0 items-center gap-2">
+					<BookOpen
+						aria-hidden="true"
+						className="size-3.5 shrink-0 text-[var(--ink-soft)]"
+						strokeWidth={1.8}
+					/>
+					<span className={linkPreviewHostClass}>Article on X</span>
+					<ExternalLink
+						aria-hidden="true"
+						className="size-3.5 shrink-0 text-[var(--ink-soft)] opacity-0 transition-opacity group-hover/link-preview:opacity-100"
+						strokeWidth={1.8}
+					/>
+				</div>
+				<span className={linkPreviewTitleClass}>{article.title}</span>
+				{article.previewText ? (
+					<span className={linkPreviewDescClass}>{article.previewText}</span>
+				) : null}
+			</div>
+			{imageUrl ? (
+				<div className="flex aspect-[1.45] w-40 shrink-0 overflow-hidden border-l border-[var(--line)] bg-[var(--bg-soft)] max-[720px]:w-28">
+					<img
+						alt=""
+						className="size-full object-cover transition-transform duration-200 group-hover/link-preview:scale-[1.03]"
+						loading="lazy"
+						src={imageUrl}
+					/>
+				</div>
+			) : null}
+		</a>
+	);
+}

package/src/components/TweetRichText.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import {
 	collectTweetSegmentsForText,
 	enrichFallbackUrlEntities,
+	isTweetArticleUrlEntity,
 	normalizeTweetUrlEntityRangeForText,
 } from "#/lib/tweet-render";
 import type { TweetEntities } from "#/lib/types";
@@ -19,6 +20,14 @@ function rangeKey(range: { start: number; end: number }) {
 	return `${range.start}:${range.end}`;
 }
 
+function isShortUrl(value: string) {
+	try {
+		return new URL(value).hostname.replace(/^www\./, "") === "t.co";
+	} catch {
+		return false;
+	}
+}
+
 export function TweetRichText({
 	text,
 	entities,
@@ -37,6 +46,25 @@ export function TweetRichText({
 	const richEntities = enrichFallbackUrlEntities(text, entities);
 	const segments = collectTweetSegmentsForText(text, richEntities);
 	const hiddenRawRangeKeys = new Set(hiddenUrlRanges.map(rangeKey));
+	const article = entities.article;
+	if (article) {
+		const urlEntries = richEntities.urls ?? [];
+		const articleUrlEntries = urlEntries.filter((entry) =>
+			isTweetArticleUrlEntity(entry, article),
+		);
+		const onlyUrlEntry = urlEntries[0];
+		if (
+			articleUrlEntries.length === 0 &&
+			urlEntries.length === 1 &&
+			onlyUrlEntry &&
+			(isShortUrl(onlyUrlEntry.url) || isShortUrl(onlyUrlEntry.expandedUrl))
+		) {
+			articleUrlEntries.push(onlyUrlEntry);
+		}
+		for (const entry of articleUrlEntries) {
+			hiddenRawRangeKeys.add(rangeKey(entry));
+		}
+	}
 	const hiddenRangeKeys = new Set(hiddenRawRangeKeys);
 	for (const entry of richEntities.urls ?? []) {
 		if (!hiddenRawRangeKeys.has(rangeKey(entry))) continue;
@@ -46,10 +74,13 @@ export function TweetRichText({
 	}
 	const Wrapper = as;
 	let cursor = 0;
+	const hideArticleTitle =
+		entities.article && text.trim() === entities.article.title.trim();
+	const visibleSegments = hideArticleTitle ? [] : segments;
 
 	return (
 		<Wrapper className={className === "body-copy" ? bodyCopyClass : className}>
-			{segments.map((segment, index) => {
+			{visibleSegments.map((segment, index) => {
 				if (
 					segment.start < cursor ||
 					segment.end <= segment.start ||
@@ -122,7 +153,7 @@ export function TweetRichText({
 					</Fragment>
 				);
 			})}
-			{text.slice(cursor)}
+			{hideArticleTitle ? null : text.slice(cursor)}
 		</Wrapper>
 	);
 }

package/src/components/useDebouncedValue.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delayMs: number) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timeout = window.setTimeout(() => setDebouncedValue(value), delayMs);
+		return () => window.clearTimeout(timeout);
+	}, [delayMs, value]);
+
+	return debouncedValue;
+}

package/src/components/useTimelineRouteData.ts

@@ -6,13 +6,30 @@ import type {
 	TimelineItem,
 } from "#/lib/types";
 import {
+	fetchCachedQueryResponse,
 	fetchQueryEnvelope,
-	fetchQueryResponse,
+	invalidateCachedQueryResponse,
+	invalidateCachedQueryResponses,
 	postAction,
+	readCachedQueryEnvelope,
 } from "#/lib/api-client";
+import {
+	deleteClientCache,
+	deleteClientCacheByPrefix,
+	readClientCache,
+	writeClientCache,
+} from "#/lib/client-cache";
 import { useSelectedAccountId } from "./account-selection";
+import { useDebouncedValue } from "./useDebouncedValue";
 
 const PAGE_SIZE = 50;
+const TIMELINE_VIEW_CACHE_PREFIX = "timeline-view:";
+const TIMELINE_VIEW_CACHE_MAX_AGE_MS = 5 * 60_000;
+
+interface TimelineViewSnapshot {
+	items: TimelineItem[];
+	hasMore: boolean;
+}
 
 interface UseTimelineRouteDataOptions {
 	resource: Exclude<ResourceKind, "dms">;
@@ -23,6 +40,53 @@ interface UseTimelineRouteDataOptions {
 	bookmarkedOnly?: boolean;
 }
 
+function buildTimelineQueryUrl({
+	resource,
+	search,
+	replyFilter,
+	likedOnly,
+	bookmarkedOnly,
+	selectedAccountId,
+	refreshTick,
+	until,
+	untilId,
+}: {
+	resource: Exclude<ResourceKind, "dms">;
+	search: string;
+	replyFilter?: ReplyFilter;
+	likedOnly: boolean;
+	bookmarkedOnly: boolean;
+	selectedAccountId?: string;
+	refreshTick: number;
+	until?: string;
+	untilId?: string;
+}) {
+	const params = new URLSearchParams({
+		resource,
+		limit: String(PAGE_SIZE),
+	});
+	if (selectedAccountId) params.set("account", selectedAccountId);
+	params.set("refresh", String(refreshTick));
+	if (replyFilter) params.set("replyFilter", replyFilter);
+	if (likedOnly) params.set("liked", "true");
+	if (bookmarkedOnly) params.set("bookmarked", "true");
+	if (search.trim()) params.set("search", search.trim());
+	if (until) params.set("until", until);
+	if (untilId) params.set("untilId", untilId);
+	params.sort();
+	const base =
+		typeof window === "undefined"
+			? "http://birdclaw.local"
+			: window.location.origin;
+	return new URL(`/api/query?${params.toString()}`, base).toString();
+}
+
+function timelineViewCacheKey(requestUrl: string) {
+	const url = new URL(requestUrl, "http://birdclaw.local");
+	url.searchParams.delete("refresh");
+	return `${TIMELINE_VIEW_CACHE_PREFIX}${url.pathname}?${url.searchParams.toString()}`;
+}
+
 export function useTimelineRouteData({
 	resource,
 	search,
@@ -31,75 +95,98 @@ export function useTimelineRouteData({
 	likedOnly = false,
 	bookmarkedOnly = false,
 }: UseTimelineRouteDataOptions) {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
-	const [loading, setLoading] = useState(true);
+	const [meta, setMeta] = useState<QueryEnvelope | null>(
+		() => readCachedQueryEnvelope() ?? null,
+	);
+	const selectedAccountId = useSelectedAccountId(meta?.accounts);
+	const debouncedSearch = useDebouncedValue(search, 180);
+	const initialRequestUrl = buildTimelineQueryUrl({
+		resource,
+		search: debouncedSearch,
+		replyFilter,
+		likedOnly,
+		bookmarkedOnly,
+		selectedAccountId,
+		refreshTick: 0,
+	});
+	const initialSnapshot = useRef(
+		readClientCache<TimelineViewSnapshot>(
+			timelineViewCacheKey(initialRequestUrl),
+			TIMELINE_VIEW_CACHE_MAX_AGE_MS,
+		),
+	);
+	const [items, setItems] = useState<TimelineItem[]>(
+		() => initialSnapshot.current?.items ?? [],
+	);
+	const [loading, setLoading] = useState(() => !initialSnapshot.current);
 	const [error, setError] = useState<string | null>(null);
 	const [replyError, setReplyError] = useState<string | null>(null);
 	const [refreshTick, setRefreshTick] = useState(0);
-	const [hasMore, setHasMore] = useState(false);
+	const [hasMore, setHasMore] = useState(
+		() => initialSnapshot.current?.hasMore ?? false,
+	);
 	const [loadingMore, setLoadingMore] = useState(false);
-	const selectedAccountId = useSelectedAccountId(meta?.accounts);
 	// Bumped whenever the active filters change. A `loadMore` request that
 	// resolves against a stale generation is discarded so its older page is
 	// never appended to a freshly loaded feed.
 	const generationRef = useRef(0);
 	const loadMoreControllerRef = useRef<AbortController | null>(null);
+	const activeRequestUrlRef = useRef(initialRequestUrl);
 
-	async function loadStatus() {
-		setMeta(await fetchQueryEnvelope());
+	async function loadStatus(force = false) {
+		setMeta(await fetchQueryEnvelope(undefined, { force }));
 	}
 
 	useEffect(() => {
 		void loadStatus();
 	}, []);
 
-	// Build the /api/query URL for the current filters. Passing the last item's
-	// (createdAt, id) requests the next (older) page via the server's keyset
-	// cursor, which is deterministic across duplicate timestamps.
-	function buildQueryUrl(until?: string, untilId?: string) {
-		const url = new URL("/api/query", window.location.origin);
-		url.searchParams.set("resource", resource);
-		url.searchParams.set("refresh", String(refreshTick));
-		url.searchParams.set("limit", String(PAGE_SIZE));
-		if (selectedAccountId) {
-			url.searchParams.set("account", selectedAccountId);
-		}
-		if (replyFilter) {
-			url.searchParams.set("replyFilter", replyFilter);
-		}
-		if (likedOnly) {
-			url.searchParams.set("liked", "true");
-		}
-		if (bookmarkedOnly) {
-			url.searchParams.set("bookmarked", "true");
-		}
-		if (search.trim()) {
-			url.searchParams.set("search", search.trim());
-		}
-		if (until) {
-			url.searchParams.set("until", until);
-		}
-		if (untilId) {
-			url.searchParams.set("untilId", untilId);
-		}
-		return url;
-	}
-
 	useEffect(() => {
 		generationRef.current += 1;
 		loadMoreControllerRef.current?.abort();
 		const controller = new AbortController();
 		let active = true;
+		const requestUrl = buildTimelineQueryUrl({
+			resource,
+			search: debouncedSearch,
+			replyFilter,
+			likedOnly,
+			bookmarkedOnly,
+			selectedAccountId,
+			refreshTick,
+		});
+		const viewCacheKey = timelineViewCacheKey(requestUrl);
+		activeRequestUrlRef.current = requestUrl;
 		setError(null);
-		setLoading(true);
 		setLoadingMore(false);
-		fetchQueryResponse(buildQueryUrl(), { signal: controller.signal })
+		const cached = readClientCache<TimelineViewSnapshot>(
+			viewCacheKey,
+			TIMELINE_VIEW_CACHE_MAX_AGE_MS,
+		);
+		if (cached) {
+			setItems(cached.items);
+			setHasMore(cached.hasMore);
+			setLoading(false);
+			return () => {
+				active = false;
+				controller.abort();
+			};
+		}
+
+		setItems([]);
+		setHasMore(false);
+		setLoading(true);
+		fetchCachedQueryResponse(requestUrl, { signal: controller.signal })
 			.then((data) => {
 				if (!active) return;
 				const next = data.items as TimelineItem[];
 				setItems(next);
-				setHasMore(next.length >= PAGE_SIZE);
+				const nextHasMore = next.length >= PAGE_SIZE;
+				setHasMore(nextHasMore);
+				writeClientCache(viewCacheKey, {
+					items: next,
+					hasMore: nextHasMore,
+				});
 			})
 			.catch((fetchError: unknown) => {
 				if (
@@ -127,12 +214,12 @@ export function useTimelineRouteData({
 		};
 	}, [
 		bookmarkedOnly,
+		debouncedSearch,
 		errorFallback,
 		likedOnly,
 		refreshTick,
 		replyFilter,
 		resource,
-		search,
 		selectedAccountId,
 	]);
 
@@ -147,7 +234,13 @@ export function useTimelineRouteData({
 		loadMoreControllerRef.current = controller;
 		setLoadingMore(true);
 		try {
-			const data = await fetchQueryResponse(buildQueryUrl(until, untilId), {
+			const nextPageUrl = new URL(
+				activeRequestUrlRef.current,
+				window.location.origin,
+			);
+			nextPageUrl.searchParams.set("until", until);
+			nextPageUrl.searchParams.set("untilId", untilId);
+			const data = await fetchCachedQueryResponse(nextPageUrl, {
 				signal: controller.signal,
 			});
 			// Discard if the filters changed (new generation) while in flight.
@@ -155,7 +248,12 @@ export function useTimelineRouteData({
 			const page = data.items as TimelineItem[];
 			setItems((prev) => {
 				const seen = new Set(prev.map((item) => item.id));
-				return [...prev, ...page.filter((item) => !seen.has(item.id))];
+				const next = [...prev, ...page.filter((item) => !seen.has(item.id))];
+				writeClientCache(timelineViewCacheKey(activeRequestUrlRef.current), {
+					items: next,
+					hasMore: page.length >= PAGE_SIZE,
+				});
+				return next;
 			});
 			setHasMore(page.length >= PAGE_SIZE);
 		} catch (loadError) {
@@ -175,12 +273,16 @@ export function useTimelineRouteData({
 	}
 
 	function retry() {
+		invalidateCachedQueryResponse(activeRequestUrlRef.current);
+		deleteClientCache(timelineViewCacheKey(activeRequestUrlRef.current));
 		setRefreshTick((value) => value + 1);
 	}
 
 	function refreshLocalView() {
+		invalidateCachedQueryResponses();
+		deleteClientCacheByPrefix(TIMELINE_VIEW_CACHE_PREFIX);
 		setRefreshTick((value) => value + 1);
-		void loadStatus();
+		void loadStatus(true);
 	}
 
 	async function replyToTweet(tweetId: string) {