birdclaw 0.5.1 → 0.7.0

package/src/components/TweetMediaGrid.tsx

@@ -1,7 +1,7 @@
 import { X } from "lucide-react";
 import { useState } from "react";
 import type { TweetMediaItem } from "#/lib/types";
-import { tweetMediaGridClass, tweetMediaTileClass } from "#/lib/ui";
+import { cx, tweetMediaGridClass, tweetMediaTileClass } from "#/lib/ui";
 
 export function TweetMediaGrid({ items }: { items: TweetMediaItem[] }) {
 	const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
@@ -16,47 +16,83 @@ export function TweetMediaGrid({ items }: { items: TweetMediaItem[] }) {
 		selectedItem?.type === "video" || selectedItem?.type === "gif"
 			? (selectedItem.variants?.[0]?.url ?? playableVideoUrl(selectedItem.url))
 			: null;
+	const singleImage =
+		visibleItems.length === 1 && visibleItems[0]?.type === "image"
+			? visibleItems[0]
+			: null;
 
 	return (
 		<>
-			<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>
+			{singleImage ? (
+				<button
+					aria-label="Open tweet media 1"
+					className={cx(
+						"tweet-media-single mt-2 max-w-full overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-active)] p-0 text-left",
+						singleImage.width && singleImage.height
+							? "block"
+							: "inline-block align-top",
+					)}
+					onClick={(event) => {
+						event.stopPropagation();
+						setSelectedIndex(0);
+					}}
+					style={singleImageStyle(singleImage)}
+					type="button"
+				>
+					<img
+						alt={singleImage.altText ?? "Tweet media 1"}
+						className={cx(
+							"tweet-media-image block max-h-[720px] max-w-full",
+							singleImage.width && singleImage.height
+								? "size-full object-cover"
+								: "h-auto w-auto object-contain",
 						)}
-					</button>
-				))}
-			</div>
+						height={singleImage.height}
+						loading="lazy"
+						src={singleImage.thumbnailUrl ?? singleImage.url}
+						width={singleImage.width}
+					/>
+				</button>
+			) : (
+				<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"
@@ -125,6 +161,19 @@ export function TweetMediaGrid({ items }: { items: TweetMediaItem[] }) {
 	);
 }
 
+function singleImageStyle(item: TweetMediaItem) {
+	if (!item.width || !item.height) return undefined;
+	const maxHeight = 720;
+	const width = Math.min(
+		item.width,
+		Math.round((item.width / item.height) * maxHeight),
+	);
+	return {
+		aspectRatio: `${String(item.width)} / ${String(item.height)}`,
+		width: `${String(width)}px`,
+	};
+}
+
 function playableVideoUrl(url: string) {
 	try {
 		const parsed = new URL(url);

package/src/components/TweetRichText.tsx

@@ -1,8 +1,9 @@
 import { Fragment } from "react";
 import type { ReactNode } from "react";
 import {
-	collectTweetSegments,
+	collectTweetSegmentsForText,
 	enrichFallbackUrlEntities,
+	normalizeTweetUrlEntityRangeForText,
 } from "#/lib/tweet-render";
 import type { TweetEntities } from "#/lib/types";
 import {
@@ -11,25 +12,43 @@ import {
 	tweetLinkClass,
 	tweetMentionClass,
 } from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
 import { ProfilePreview } from "./ProfilePreview";
 
+function rangeKey(range: { start: number; end: number }) {
+	return `${range.start}:${range.end}`;
+}
+
 export function TweetRichText({
 	text,
 	entities,
 	className = "body-copy",
 	hiddenUrlRanges = [],
+	urlLabel = "display",
+	as = "p",
 }: {
 	text: string;
 	entities: TweetEntities;
 	className?: string;
 	hiddenUrlRanges?: Array<{ start: number; end: number }>;
+	urlLabel?: "display" | "expanded";
+	as?: "p" | "span";
 }) {
 	const richEntities = enrichFallbackUrlEntities(text, entities);
-	const segments = collectTweetSegments(richEntities);
+	const segments = collectTweetSegmentsForText(text, richEntities);
+	const hiddenRawRangeKeys = new Set(hiddenUrlRanges.map(rangeKey));
+	const hiddenRangeKeys = new Set(hiddenRawRangeKeys);
+	for (const entry of richEntities.urls ?? []) {
+		if (!hiddenRawRangeKeys.has(rangeKey(entry))) continue;
+		hiddenRangeKeys.add(
+			rangeKey(normalizeTweetUrlEntityRangeForText(text, entry)),
+		);
+	}
+	const Wrapper = as;
 	let cursor = 0;
 
 	return (
-		<p className={className === "body-copy" ? bodyCopyClass : className}>
+		<Wrapper className={className === "body-copy" ? bodyCopyClass : className}>
 			{segments.map((segment, index) => {
 				if (
 					segment.start < cursor ||
@@ -47,13 +66,7 @@ export function TweetRichText({
 						{text.slice(segment.start, segment.end)}
 					</Fragment>
 				);
-				if (
-					segment.kind === "url" &&
-					hiddenUrlRanges.some(
-						(range) =>
-							range.start === segment.start && range.end === segment.end,
-					)
-				) {
+				if (segment.kind === "url" && hiddenRangeKeys.has(rangeKey(segment))) {
 					node = null;
 				} else if (segment.kind === "mention" && segment.profile) {
 					node = (
@@ -64,18 +77,33 @@ export function TweetRichText({
 							<span className={tweetMentionClass}>@{segment.username}</span>
 						</ProfilePreview>
 					);
-				} else if (segment.kind === "url") {
+				} else if (segment.kind === "mention") {
 					node = (
 						<a
 							key={`segment-${String(index)}`}
-							className={tweetLinkClass}
-							href={segment.expandedUrl}
-							rel="noreferrer"
-							target="_blank"
+							className={tweetMentionClass}
+							href={`/profiles/${encodeURIComponent(segment.username)}`}
 						>
-							{segment.displayUrl}
+							@{segment.username}
 						</a>
 					);
+				} else if (segment.kind === "url") {
+					const href = safeHttpUrl(segment.expandedUrl);
+					if (href) {
+						node = (
+							<a
+								key={`segment-${String(index)}`}
+								className={tweetLinkClass}
+								href={href}
+								rel="noreferrer"
+								target="_blank"
+							>
+								{urlLabel === "expanded"
+									? segment.expandedUrl
+									: segment.displayUrl}
+							</a>
+						);
+					}
 				} else if (segment.kind === "hashtag") {
 					node = (
 						<span
@@ -95,6 +123,6 @@ export function TweetRichText({
 				);
 			})}
 			{text.slice(cursor)}
-		</p>
+		</Wrapper>
 	);
 }

package/src/components/account-selection.ts

@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useState } from "react";
+import type { AccountRecord } from "#/lib/types";
+
+const STORAGE_KEY = "birdclaw:selected-account-id";
+const CHANGE_EVENT = "birdclaw-account-change";
+
+export function defaultAccountId(accounts: AccountRecord[] | undefined) {
+	if (!accounts?.length) return undefined;
+	return accounts.find((account) => account.isDefault)?.id ?? accounts[0]?.id;
+}
+
+function readStoredAccountId() {
+	if (typeof window === "undefined") return undefined;
+	return window.localStorage.getItem(STORAGE_KEY) ?? undefined;
+}
+
+export function setStoredAccountId(accountId: string) {
+	if (typeof window === "undefined") return;
+	window.localStorage.setItem(STORAGE_KEY, accountId);
+	window.dispatchEvent(
+		new CustomEvent(CHANGE_EVENT, {
+			detail: { accountId },
+		}),
+	);
+}
+
+export function useSelectedAccountId(accounts: AccountRecord[] | undefined) {
+	const fallbackAccountId = useMemo(
+		() => defaultAccountId(accounts),
+		[accounts],
+	);
+	const [selectedAccountId, setSelectedAccountId] = useState<
+		string | undefined
+	>(() => readStoredAccountId());
+
+	useEffect(() => {
+		const onChange = (event: Event) => {
+			const custom = event as CustomEvent<{ accountId?: string }>;
+			setSelectedAccountId(custom.detail?.accountId ?? readStoredAccountId());
+		};
+		const onStorage = () => setSelectedAccountId(readStoredAccountId());
+		window.addEventListener(CHANGE_EVENT, onChange);
+		window.addEventListener("storage", onStorage);
+		return () => {
+			window.removeEventListener(CHANGE_EVENT, onChange);
+			window.removeEventListener("storage", onStorage);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!accounts?.length || !fallbackAccountId) return;
+		const current = readStoredAccountId();
+		const valid = current && accounts.some((account) => account.id === current);
+		if (!valid) {
+			setStoredAccountId(fallbackAccountId);
+			setSelectedAccountId(fallbackAccountId);
+		}
+	}, [accounts, fallbackAccountId]);
+
+	return selectedAccountId &&
+		accounts?.some((account) => account.id === selectedAccountId)
+		? selectedAccountId
+		: fallbackAccountId;
+}

package/src/components/useTimelineRouteData.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type {
 	QueryEnvelope,
 	ReplyFilter,
@@ -10,6 +10,9 @@ import {
 	fetchQueryResponse,
 	postAction,
 } from "#/lib/api-client";
+import { useSelectedAccountId } from "./account-selection";
+
+const PAGE_SIZE = 50;
 
 interface UseTimelineRouteDataOptions {
 	resource: Exclude<ResourceKind, "dms">;
@@ -32,7 +35,16 @@ export function useTimelineRouteData({
 	const [items, setItems] = useState<TimelineItem[]>([]);
 	const [loading, setLoading] = useState(true);
 	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 [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);
 
 	async function loadStatus() {
 		setMeta(await fetchQueryEnvelope());
@@ -42,10 +54,17 @@ export function useTimelineRouteData({
 		void loadStatus();
 	}, []);
 
-	useEffect(() => {
+	// 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);
 		}
@@ -58,16 +77,29 @@ export function useTimelineRouteData({
 		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;
 		setError(null);
 		setLoading(true);
-		fetchQueryResponse(url, { signal: controller.signal })
+		setLoadingMore(false);
+		fetchQueryResponse(buildQueryUrl(), { signal: controller.signal })
 			.then((data) => {
-				if (active) {
-					setItems(data.items as TimelineItem[]);
-				}
+				if (!active) return;
+				const next = data.items as TimelineItem[];
+				setItems(next);
+				setHasMore(next.length >= PAGE_SIZE);
 			})
 			.catch((fetchError: unknown) => {
 				if (
@@ -81,6 +113,7 @@ export function useTimelineRouteData({
 					fetchError instanceof Error ? fetchError.message : errorFallback,
 				);
 				setItems([]);
+				setHasMore(false);
 			})
 			.finally(() => {
 				if (active) {
@@ -100,8 +133,47 @@ export function useTimelineRouteData({
 		replyFilter,
 		resource,
 		search,
+		selectedAccountId,
 	]);
 
+	async function loadMore() {
+		if (loading || loadingMore || !hasMore || items.length === 0) return;
+		const lastItem = items[items.length - 1];
+		const until = lastItem?.createdAt;
+		const untilId = lastItem?.id;
+		if (!until || !untilId) return;
+		const generation = generationRef.current;
+		const controller = new AbortController();
+		loadMoreControllerRef.current = controller;
+		setLoadingMore(true);
+		try {
+			const data = await fetchQueryResponse(buildQueryUrl(until, untilId), {
+				signal: controller.signal,
+			});
+			// Discard if the filters changed (new generation) while in flight.
+			if (generation !== generationRef.current) return;
+			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))];
+			});
+			setHasMore(page.length >= PAGE_SIZE);
+		} catch (loadError) {
+			if (
+				loadError instanceof DOMException &&
+				loadError.name === "AbortError"
+			) {
+				return;
+			}
+			if (generation !== generationRef.current) return;
+			setError(loadError instanceof Error ? loadError.message : errorFallback);
+		} finally {
+			if (generation === generationRef.current) {
+				setLoadingMore(false);
+			}
+		}
+	}
+
 	function retry() {
 		setRefreshTick((value) => value + 1);
 	}
@@ -115,14 +187,21 @@ export function useTimelineRouteData({
 		const text = window.prompt("Reply text");
 		if (!text?.trim()) return;
 
-		await postAction({
-			kind: "replyTweet",
-			accountId: "acct_primary",
-			tweetId,
-			text,
-		});
+		setReplyError(null);
+		try {
+			await postAction({
+				kind: "replyTweet",
+				accountId: selectedAccountId ?? "acct_primary",
+				tweetId,
+				text,
+			});
 
-		retry();
+			retry();
+		} catch (replyError) {
+			setReplyError(
+				replyError instanceof Error ? replyError.message : "Reply failed",
+			);
+		}
 	}
 
 	return {
@@ -130,8 +209,13 @@ export function useTimelineRouteData({
 		items,
 		loading,
 		error,
+		replyError,
 		retry,
 		refreshLocalView,
 		replyToTweet,
+		selectedAccountId,
+		hasMore,
+		loadingMore,
+		loadMore,
 	};
 }