birdclaw 0.8.2 → 0.8.4

package/src/components/TweetArticleCard.tsx

@@ -1,66 +0,0 @@
-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/TweetMediaGrid.tsx

@@ -1,185 +0,0 @@
-import { X } from "lucide-react";
-import { useState } from "react";
-import type { TweetMediaItem } from "#/lib/types";
-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 (
-		<>
-			{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"
-				>
-					<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={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}
-						/>
-					) : (
-						<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>
-					)}
-				</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,159 +0,0 @@
-import { Fragment } from "react";
-import type { ReactNode } from "react";
-import {
-	collectTweetSegmentsForText,
-	enrichFallbackUrlEntities,
-	isTweetArticleUrlEntity,
-	normalizeTweetUrlEntityRangeForText,
-} from "#/lib/tweet-render";
-import type { TweetEntities } from "#/lib/types";
-import {
-	bodyCopyClass,
-	tweetHashtagClass,
-	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}`;
-}
-
-function isShortUrl(value: string) {
-	try {
-		return new URL(value).hostname.replace(/^www\./, "") === "t.co";
-	} catch {
-		return false;
-	}
-}
-
-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 = 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;
-		hiddenRangeKeys.add(
-			rangeKey(normalizeTweetUrlEntityRangeForText(text, entry)),
-		);
-	}
-	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}>
-			{visibleSegments.map((segment, index) => {
-				if (
-					segment.start < cursor ||
-					segment.end <= segment.start ||
-					segment.end > text.length
-				) {
-					return null;
-				}
-
-				const prefix = text.slice(cursor, segment.start);
-				cursor = segment.end;
-
-				let node: ReactNode = (
-					<Fragment key={`segment-${String(index)}`}>
-						{text.slice(segment.start, segment.end)}
-					</Fragment>
-				);
-				if (segment.kind === "url" && hiddenRangeKeys.has(rangeKey(segment))) {
-					node = null;
-				} else if (segment.kind === "mention" && segment.profile) {
-					node = (
-						<ProfilePreview
-							key={`segment-${String(index)}`}
-							profile={segment.profile}
-						>
-							<span className={tweetMentionClass}>@{segment.username}</span>
-						</ProfilePreview>
-					);
-				} else if (segment.kind === "mention") {
-					node = (
-						<a
-							key={`segment-${String(index)}`}
-							className={tweetMentionClass}
-							href={`/profiles/${encodeURIComponent(segment.username)}`}
-						>
-							@{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
-							className={tweetHashtagClass}
-							key={`segment-${String(index)}`}
-						>
-							#{segment.tag}
-						</span>
-					);
-				}
-
-				return (
-					<Fragment key={`piece-${String(index)}`}>
-						{prefix}
-						{node}
-					</Fragment>
-				);
-			})}
-			{hideArticleTitle ? null : text.slice(cursor)}
-		</Wrapper>
-	);
-}

package/src/components/account-selection.ts

@@ -1,64 +0,0 @@
-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;
-}