birdclaw 0.5.1 → 0.6.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

@@ -11,6 +11,7 @@ import {
 	tweetLinkClass,
 	tweetMentionClass,
 } from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
 import { ProfilePreview } from "./ProfilePreview";
 
 export function TweetRichText({
@@ -65,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

@@ -10,6 +10,7 @@ import {
 	fetchQueryResponse,
 	postAction,
 } from "#/lib/api-client";
+import { useSelectedAccountId } from "./account-selection";
 
 interface UseTimelineRouteDataOptions {
 	resource: Exclude<ResourceKind, "dms">;
@@ -32,7 +33,9 @@ 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 selectedAccountId = useSelectedAccountId(meta?.accounts);
 
 	async function loadStatus() {
 		setMeta(await fetchQueryEnvelope());
@@ -46,6 +49,9 @@ export function useTimelineRouteData({
 		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);
 		}
@@ -100,6 +106,7 @@ export function useTimelineRouteData({
 		replyFilter,
 		resource,
 		search,
+		selectedAccountId,
 	]);
 
 	function retry() {
@@ -115,14 +122,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 +144,10 @@ export function useTimelineRouteData({
 		items,
 		loading,
 		error,
+		replyError,
 		retry,
 		refreshLocalView,
 		replyToTweet,
+		selectedAccountId,
 	};
 }