birdclaw 0.8.1 → 0.8.3

package/src/components/AccountSwitcher.tsx

@@ -1,7 +1,9 @@
 import { Check, ChevronDown } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { fetchQueryEnvelope } from "#/lib/api-client";
+import { queryKeys } from "#/lib/query-client";
 import type { AccountRecord } from "#/lib/types";
 import { cx } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
@@ -25,29 +27,19 @@ function avatarName(account: AccountRecord) {
 }
 
 export function AccountSwitcher({ action }: { action?: ReactNode } = {}) {
-	const [accounts, setAccounts] = useState<AccountRecord[]>([]);
 	const [open, setOpen] = useState(false);
 	const switcherRef = useRef<HTMLDivElement>(null);
+	const statusQuery = useQuery({
+		queryKey: queryKeys.status,
+		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
+	});
+	const accounts = statusQuery.data?.accounts ?? [];
 	const selectedAccountId = useSelectedAccountId(accounts);
 	const selectedAccount = useMemo(
 		() => accounts.find((account) => account.id === selectedAccountId),
 		[accounts, selectedAccountId],
 	);
 
-	useEffect(() => {
-		let active = true;
-		fetchQueryEnvelope()
-			.then((meta) => {
-				if (active) setAccounts(meta.accounts);
-			})
-			.catch(() => {
-				if (active) setAccounts([]);
-			});
-		return () => {
-			active = false;
-		};
-	}, []);
-
 	useEffect(() => {
 		if (!open) return;
 

package/src/components/AvatarChip.tsx

@@ -49,7 +49,7 @@ export function AvatarChip({
 	);
 }
 
-function avatarPath(profileId: string, avatarUrl: string) {
+export function avatarPath(profileId: string, avatarUrl: string) {
 	const query = new URLSearchParams({
 		profileId,
 		v: avatarUrl,

package/src/components/AvatarPreload.ts

@@ -0,0 +1,149 @@
+import { type RefObject, useEffect } from "react";
+import { avatarPath } from "./AvatarChip";
+
+const MAX_CONCURRENT_PRELOADS = 4;
+const IDLE_TIMEOUT_MS = 2500;
+const PRELOAD_ROOT_MARGIN = "800px 0px";
+
+const queuedSources: string[] = [];
+const knownSources = new Set<string>();
+const activeImages = new Set<HTMLImageElement>();
+
+let activePreloads = 0;
+let listeningForLoad = false;
+let idleId: number | null = null;
+let fallbackTimerId: number | null = null;
+
+function finishPreload(image: HTMLImageElement) {
+	if (!activeImages.delete(image)) return;
+	activePreloads -= 1;
+	drainPreloads();
+}
+
+function drainPreloads() {
+	while (activePreloads < MAX_CONCURRENT_PRELOADS && queuedSources.length > 0) {
+		const src = queuedSources.shift();
+		if (!src) return;
+
+		const image = new Image();
+		activePreloads += 1;
+		activeImages.add(image);
+		image.decoding = "async";
+		image.onerror = () => finishPreload(image);
+		image.onload = () => {
+			if (typeof image.decode !== "function") {
+				finishPreload(image);
+				return;
+			}
+			void image
+				.decode()
+				.catch(() => undefined)
+				.finally(() => finishPreload(image));
+		};
+		image.src = src;
+	}
+}
+
+function runIdlePreloads() {
+	idleId = null;
+	fallbackTimerId = null;
+	drainPreloads();
+}
+
+function scheduleIdlePreloads() {
+	if (
+		queuedSources.length === 0 ||
+		idleId !== null ||
+		fallbackTimerId !== null
+	) {
+		return;
+	}
+
+	const requestIdle = window.requestIdleCallback?.bind(window);
+	if (requestIdle) {
+		idleId = requestIdle(runIdlePreloads, {
+			timeout: IDLE_TIMEOUT_MS,
+		});
+		return;
+	}
+
+	fallbackTimerId = window.setTimeout(runIdlePreloads, 0);
+}
+
+function handleWindowLoad() {
+	listeningForLoad = false;
+	scheduleIdlePreloads();
+}
+
+function scheduleAfterPageLoad() {
+	if (document.readyState === "complete") {
+		scheduleIdlePreloads();
+		return;
+	}
+	if (listeningForLoad) return;
+	listeningForLoad = true;
+	window.addEventListener("load", handleWindowLoad, { once: true });
+}
+
+function queueAvatarPreload(profileId?: string, avatarUrl?: string) {
+	if (!profileId || !avatarUrl || typeof window === "undefined") return;
+	const src = avatarPath(profileId, avatarUrl);
+	if (knownSources.has(src)) return;
+	knownSources.add(src);
+	queuedSources.push(src);
+	scheduleAfterPageLoad();
+}
+
+export function useAvatarPreload(
+	reference: RefObject<Element | null>,
+	profileId?: string,
+	avatarUrl?: string,
+) {
+	useEffect(() => {
+		if (!profileId || !avatarUrl) return;
+		const node = reference.current;
+		if (!node || typeof IntersectionObserver === "undefined") {
+			queueAvatarPreload(profileId, avatarUrl);
+			return;
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (!entries.some((entry) => entry.isIntersecting)) return;
+				observer.disconnect();
+				queueAvatarPreload(profileId, avatarUrl);
+			},
+			{ rootMargin: PRELOAD_ROOT_MARGIN },
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [avatarUrl, profileId, reference]);
+}
+
+function resetPreloader() {
+	if (listeningForLoad) {
+		window.removeEventListener("load", handleWindowLoad);
+	}
+	if (idleId !== null && "cancelIdleCallback" in window) {
+		window.cancelIdleCallback(idleId);
+	}
+	if (fallbackTimerId !== null) {
+		window.clearTimeout(fallbackTimerId);
+	}
+	for (const image of activeImages) {
+		image.onload = null;
+		image.onerror = null;
+	}
+	queuedSources.length = 0;
+	knownSources.clear();
+	activeImages.clear();
+	activePreloads = 0;
+	listeningForLoad = false;
+	idleId = null;
+	fallbackTimerId = null;
+}
+
+export const __test__ = {
+	queueAvatarPreload,
+	resetPreloader,
+};

package/src/components/ConversationThread.tsx

@@ -11,6 +11,7 @@ import { AvatarChip } from "./AvatarChip";
 import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -117,6 +118,9 @@ export function ConversationThread({
 									text={tweet.text}
 								/>
 								<TweetMediaGrid items={tweet.media} />
+								{tweet.entities.article ? (
+									<TweetArticleCard article={tweet.entities.article} />
+								) : null}
 							</div>
 						</div>
 					);

package/src/components/EmbeddedTweetCard.tsx

@@ -10,6 +10,7 @@ import {
 } from "#/lib/ui";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -46,6 +47,9 @@ export function EmbeddedTweetCard({
 				text={item.text}
 			/>
 			<TweetMediaGrid items={item.media} />
+			{item.entities.article ? (
+				<TweetArticleCard article={item.entities.article} />
+			) : null}
 		</section>
 	);
 }

package/src/components/FloatingPreview.tsx

@@ -0,0 +1,382 @@
+import {
+	type CSSProperties,
+	type FocusEvent,
+	type KeyboardEvent,
+	type PointerEvent,
+	type RefObject,
+	useCallback,
+	useEffect,
+	useId,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+
+type PreviewSide = "top" | "bottom";
+
+type Rect = {
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+	width: number;
+	height: number;
+};
+
+type PreviewPosition = {
+	top: number;
+	left: number;
+	maxWidth: number;
+	maxHeight: number;
+	side: PreviewSide;
+	measured: boolean;
+	ready: boolean;
+};
+
+type PlacementInput = {
+	referenceRects: Rect[];
+	floatingWidth: number;
+	floatingHeight: number;
+	viewport: Rect;
+	gap?: number;
+	gutter?: number;
+};
+
+const DEFAULT_GAP = 10;
+const DEFAULT_GUTTER = 12;
+const DEFAULT_CLOSE_DELAY_MS = 120;
+
+const initialPosition: PreviewPosition = {
+	top: 0,
+	left: 0,
+	maxWidth: 0,
+	maxHeight: 0,
+	side: "bottom",
+	measured: false,
+	ready: false,
+};
+
+function edgeRect(rects: Rect[], side: PreviewSide) {
+	return rects.reduce((best, rect) => {
+		if (side === "bottom") {
+			if (rect.bottom > best.bottom) return rect;
+			if (rect.bottom === best.bottom && rect.width > best.width) return rect;
+			return best;
+		}
+		if (rect.top < best.top) return rect;
+		if (rect.top === best.top && rect.width > best.width) return rect;
+		return best;
+	});
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+	if (maximum < minimum) return minimum;
+	return Math.min(Math.max(value, minimum), maximum);
+}
+
+function calculatePreviewPosition({
+	referenceRects,
+	floatingWidth,
+	floatingHeight,
+	viewport,
+	gap = DEFAULT_GAP,
+	gutter = DEFAULT_GUTTER,
+}: PlacementInput): PreviewPosition {
+	const referenceTop = Math.min(...referenceRects.map((rect) => rect.top));
+	const referenceBottom = Math.max(
+		...referenceRects.map((rect) => rect.bottom),
+	);
+	const availableBelow = Math.max(
+		0,
+		viewport.bottom - gutter - referenceBottom - gap,
+	);
+	const availableAbove = Math.max(
+		0,
+		referenceTop - viewport.top - gutter - gap,
+	);
+	const side: PreviewSide =
+		availableBelow >= floatingHeight || availableBelow >= availableAbove
+			? "bottom"
+			: "top";
+	const availableHeight = side === "bottom" ? availableBelow : availableAbove;
+	const renderedHeight = Math.min(floatingHeight, availableHeight);
+	const anchor = edgeRect(referenceRects, side);
+	const maxWidth = Math.max(0, viewport.width - gutter * 2);
+	const renderedWidth = Math.min(floatingWidth, maxWidth);
+	const minimumLeft = viewport.left + gutter;
+	const maximumLeft = viewport.right - gutter - renderedWidth;
+	const left = clamp(
+		anchor.left + anchor.width / 2 - renderedWidth / 2,
+		minimumLeft,
+		maximumLeft,
+	);
+	const top =
+		side === "bottom"
+			? referenceBottom + gap
+			: referenceTop - gap - renderedHeight;
+
+	return {
+		top,
+		left,
+		maxWidth,
+		maxHeight: availableHeight,
+		side,
+		measured: true,
+		ready: true,
+	};
+}
+
+function viewportRect(): Rect {
+	const viewport = window.visualViewport;
+	const left = viewport?.offsetLeft ?? 0;
+	const top = viewport?.offsetTop ?? 0;
+	const width = viewport?.width ?? window.innerWidth;
+	const height = viewport?.height ?? window.innerHeight;
+	return {
+		top,
+		right: left + width,
+		bottom: top + height,
+		left,
+		width,
+		height,
+	};
+}
+
+function elementRects(element: HTMLElement): Rect[] {
+	const fragments = Array.from(element.getClientRects()).filter(
+		(rect) => rect.width > 0 || rect.height > 0,
+	);
+	return fragments.length > 0 ? fragments : [element.getBoundingClientRect()];
+}
+
+function referenceIntersectsViewport(rects: Rect[], viewport: Rect) {
+	return rects.some(
+		(rect) =>
+			rect.right >= viewport.left &&
+			rect.left <= viewport.right &&
+			rect.bottom >= viewport.top &&
+			rect.top <= viewport.bottom,
+	);
+}
+
+function samePosition(left: PreviewPosition, right: PreviewPosition) {
+	return (
+		left.top === right.top &&
+		left.left === right.left &&
+		left.maxWidth === right.maxWidth &&
+		left.maxHeight === right.maxHeight &&
+		left.side === right.side &&
+		left.measured === right.measured &&
+		left.ready === right.ready
+	);
+}
+
+function floatingStyle(position: PreviewPosition): CSSProperties {
+	return {
+		position: "fixed",
+		top: position.top,
+		left: position.left,
+		// Apply constraints during the hidden first pass so remeasurement can settle.
+		maxWidth: position.measured ? position.maxWidth : undefined,
+		maxHeight: position.measured ? position.maxHeight : undefined,
+		visibility: position.ready ? "visible" : "hidden",
+	};
+}
+
+function containsTarget(
+	target: EventTarget | null,
+	...elements: Array<HTMLElement | null>
+) {
+	return (
+		target instanceof Node &&
+		elements.some((element) => element?.contains(target))
+	);
+}
+
+export function useFloatingPreview(options: { closeDelayMs?: number } = {}): {
+	open: boolean;
+	referenceRef: RefObject<HTMLSpanElement | null>;
+	floatingRef: RefObject<HTMLSpanElement | null>;
+	floatingStyle: CSSProperties;
+	referenceProps: {
+		onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+		onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+		onFocus: (event: FocusEvent<HTMLElement>) => void;
+		onBlur: (event: FocusEvent<HTMLElement>) => void;
+		onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+	};
+	floatingProps: {
+		onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+		onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+		onFocus: (event: FocusEvent<HTMLElement>) => void;
+		onBlur: (event: FocusEvent<HTMLElement>) => void;
+		onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+	};
+	floatingId: string;
+	closePreview: () => void;
+} {
+	const closeDelayMs = options.closeDelayMs ?? DEFAULT_CLOSE_DELAY_MS;
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState(initialPosition);
+	const floatingId = useId();
+	const referenceRef = useRef<HTMLSpanElement | null>(null);
+	const floatingRef = useRef<HTMLSpanElement | null>(null);
+	const closeTimerRef = useRef<number | null>(null);
+
+	const clearCloseTimer = useCallback(() => {
+		if (closeTimerRef.current === null) return;
+		window.clearTimeout(closeTimerRef.current);
+		closeTimerRef.current = null;
+	}, []);
+
+	const openPreview = useCallback(() => {
+		clearCloseTimer();
+		if (!open) setPosition(initialPosition);
+		setOpen(true);
+	}, [clearCloseTimer, open]);
+
+	const closePreview = useCallback(() => {
+		clearCloseTimer();
+		setOpen(false);
+	}, [clearCloseTimer]);
+
+	const scheduleClose = useCallback(() => {
+		clearCloseTimer();
+		closeTimerRef.current = window.setTimeout(() => {
+			closeTimerRef.current = null;
+			const reference = referenceRef.current;
+			const floating = floatingRef.current;
+			const focusInside = containsTarget(
+				document.activeElement,
+				reference,
+				floating,
+			);
+			const pointerInside =
+				Boolean(reference?.matches(":hover")) ||
+				Boolean(floating?.matches(":hover"));
+			if (!focusInside && !pointerInside) setOpen(false);
+		}, closeDelayMs);
+	}, [clearCloseTimer, closeDelayMs]);
+
+	const handleBlur = useCallback(
+		(event: FocusEvent<HTMLElement>) => {
+			if (
+				containsTarget(
+					event.relatedTarget,
+					referenceRef.current,
+					floatingRef.current,
+				)
+			) {
+				return;
+			}
+			scheduleClose();
+		},
+		[scheduleClose],
+	);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLElement>) => {
+			if (event.key !== "Escape") return;
+			closePreview();
+			referenceRef.current?.querySelector<HTMLElement>("a,button")?.focus();
+		},
+		[closePreview],
+	);
+
+	const updatePlacement = useCallback(() => {
+		const reference = referenceRef.current;
+		const floating = floatingRef.current;
+		if (!reference || !floating) return;
+		const viewport = viewportRect();
+		const referenceRects = elementRects(reference);
+		if (!referenceIntersectsViewport(referenceRects, viewport)) {
+			setPosition((current) =>
+				current.ready ? { ...current, ready: false } : current,
+			);
+			return;
+		}
+		const floatingRect = floating.getBoundingClientRect();
+		const content = floating.querySelector<HTMLElement>(
+			"[data-floating-preview-content]",
+		);
+		const style = window.getComputedStyle(floating);
+		const verticalChrome = [
+			style.paddingTop,
+			style.paddingBottom,
+			style.borderTopWidth,
+			style.borderBottomWidth,
+		].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+		// Measure the unclipped child so a previously constrained card can grow again.
+		const naturalHeight = Math.max(
+			floatingRect.height,
+			(content?.getBoundingClientRect().height ?? 0) + verticalChrome,
+		);
+		const next = calculatePreviewPosition({
+			referenceRects,
+			floatingWidth: floatingRect.width,
+			floatingHeight: naturalHeight,
+			viewport,
+		});
+		if (floatingRect.width > next.maxWidth + 0.5) next.ready = false;
+		setPosition((current) => (samePosition(current, next) ? current : next));
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!open) return;
+		updatePlacement();
+		let frame = 0;
+		const trackLayout = () => {
+			updatePlacement();
+			frame = window.requestAnimationFrame(trackLayout);
+		};
+		// Fixed positioning needs explicit tracking when surrounding content shifts.
+		frame = window.requestAnimationFrame(trackLayout);
+		const viewport = window.visualViewport;
+		window.addEventListener("resize", updatePlacement);
+		window.addEventListener("scroll", updatePlacement, true);
+		viewport?.addEventListener("resize", updatePlacement);
+		viewport?.addEventListener("scroll", updatePlacement);
+		const observer =
+			typeof ResizeObserver === "undefined"
+				? null
+				: new ResizeObserver(updatePlacement);
+		if (referenceRef.current) observer?.observe(referenceRef.current);
+		if (floatingRef.current) observer?.observe(floatingRef.current);
+
+		return () => {
+			window.cancelAnimationFrame(frame);
+			window.removeEventListener("resize", updatePlacement);
+			window.removeEventListener("scroll", updatePlacement, true);
+			viewport?.removeEventListener("resize", updatePlacement);
+			viewport?.removeEventListener("scroll", updatePlacement);
+			observer?.disconnect();
+		};
+	}, [open, updatePlacement]);
+
+	useEffect(() => () => clearCloseTimer(), [clearCloseTimer]);
+
+	const interactionProps = {
+		onPointerEnter: (_event: PointerEvent<HTMLElement>) => openPreview(),
+		onPointerLeave: (_event: PointerEvent<HTMLElement>) => scheduleClose(),
+		onFocus: (_event: FocusEvent<HTMLElement>) => openPreview(),
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+	};
+
+	return {
+		open,
+		referenceRef,
+		floatingRef,
+		floatingStyle: floatingStyle(position),
+		referenceProps: interactionProps,
+		floatingProps: interactionProps,
+		floatingId,
+		closePreview,
+	};
+}
+
+export const __test__ = {
+	calculatePreviewPosition,
+	floatingStyle,
+	referenceIntersectsViewport,
+};