birdclaw 0.5.0 → 0.6.0

package/src/components/TimelineRouteFrame.tsx

@@ -0,0 +1,170 @@
+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,
+	timestampClass,
+} 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,
+		replyError,
+		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={meta?.accounts}
+						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>
+			{replyError ? (
+				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
+					{replyError}
+				</p>
+			) : null}
+			<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,185 @@
+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);
 	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;
+	const singleImage =
+		visibleItems.length === 1 && visibleItems[0]?.type === "image"
+			? visibleItems[0]
+			: 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"
+		<>
+			{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",
+						)}
+						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"
+					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 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);
+		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,
@@ -10,16 +11,19 @@ import {
 	tweetLinkClass,
 	tweetMentionClass,
 } from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
 import { ProfilePreview } from "./ProfilePreview";
 
 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 +43,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)}`}
@@ -54,17 +66,20 @@ export function TweetRichText({
 						</ProfilePreview>
 					);
 				} else if (segment.kind === "url") {
-					node = (
-						<a
-							key={`segment-${String(index)}`}
-							className={tweetLinkClass}
-							href={segment.expandedUrl}
-							rel="noreferrer"
-							target="_blank"
-						>
-							{segment.displayUrl}
-						</a>
-					);
+					const href = safeHttpUrl(segment.expandedUrl);
+					if (href) {
+						node = (
+							<a
+								key={`segment-${String(index)}`}
+								className={tweetLinkClass}
+								href={href}
+								rel="noreferrer"
+								target="_blank"
+							>
+								{segment.displayUrl}
+							</a>
+						);
+					}
 				} else if (segment.kind === "hashtag") {
 					node = (
 						<span

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

@@ -0,0 +1,153 @@
+import { useEffect, useState } from "react";
+import type {
+	QueryEnvelope,
+	ReplyFilter,
+	ResourceKind,
+	TimelineItem,
+} from "#/lib/types";
+import {
+	fetchQueryEnvelope,
+	fetchQueryResponse,
+	postAction,
+} from "#/lib/api-client";
+import { useSelectedAccountId } from "./account-selection";
+
+interface UseTimelineRouteDataOptions {
+	resource: Exclude<ResourceKind, "dms">;
+	search: string;
+	errorFallback: string;
+	replyFilter?: ReplyFilter;
+	likedOnly?: boolean;
+	bookmarkedOnly?: boolean;
+}
+
+export function useTimelineRouteData({
+	resource,
+	search,
+	errorFallback,
+	replyFilter,
+	likedOnly = false,
+	bookmarkedOnly = false,
+}: UseTimelineRouteDataOptions) {
+	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
+	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 selectedAccountId = useSelectedAccountId(meta?.accounts);
+
+	async function loadStatus() {
+		setMeta(await fetchQueryEnvelope());
+	}
+
+	useEffect(() => {
+		void loadStatus();
+	}, []);
+
+	useEffect(() => {
+		const url = new URL("/api/query", window.location.origin);
+		url.searchParams.set("resource", resource);
+		url.searchParams.set("refresh", String(refreshTick));
+		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());
+		}
+
+		const controller = new AbortController();
+		let active = true;
+		setError(null);
+		setLoading(true);
+		fetchQueryResponse(url, { signal: controller.signal })
+			.then((data) => {
+				if (active) {
+					setItems(data.items as TimelineItem[]);
+				}
+			})
+			.catch((fetchError: unknown) => {
+				if (
+					fetchError instanceof DOMException &&
+					fetchError.name === "AbortError"
+				) {
+					return;
+				}
+				if (!active) return;
+				setError(
+					fetchError instanceof Error ? fetchError.message : errorFallback,
+				);
+				setItems([]);
+			})
+			.finally(() => {
+				if (active) {
+					setLoading(false);
+				}
+			});
+
+		return () => {
+			active = false;
+			controller.abort();
+		};
+	}, [
+		bookmarkedOnly,
+		errorFallback,
+		likedOnly,
+		refreshTick,
+		replyFilter,
+		resource,
+		search,
+		selectedAccountId,
+	]);
+
+	function retry() {
+		setRefreshTick((value) => value + 1);
+	}
+
+	function refreshLocalView() {
+		setRefreshTick((value) => value + 1);
+		void loadStatus();
+	}
+
+	async function replyToTweet(tweetId: string) {
+		const text = window.prompt("Reply text");
+		if (!text?.trim()) return;
+
+		setReplyError(null);
+		try {
+			await postAction({
+				kind: "replyTweet",
+				accountId: selectedAccountId ?? "acct_primary",
+				tweetId,
+				text,
+			});
+
+			retry();
+		} catch (replyError) {
+			setReplyError(
+				replyError instanceof Error ? replyError.message : "Reply failed",
+			);
+		}
+	}
+
+	return {
+		meta,
+		items,
+		loading,
+		error,
+		replyError,
+		retry,
+		refreshLocalView,
+		replyToTweet,
+		selectedAccountId,
+	};
+}