birdclaw 0.5.0 → 0.6.0

package/src/components/FeedState.tsx

@@ -0,0 +1,147 @@
+import type { ReactNode } from "react";
+import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
+
+function SkeletonBlock({
+	className,
+	muted = false,
+}: {
+	className: string;
+	muted?: boolean;
+}) {
+	return (
+		<span
+			aria-hidden="true"
+			className={`block animate-pulse rounded-full ${muted ? "bg-[color:color-mix(in_srgb,var(--ink-soft)_16%,transparent)]" : "bg-[color:color-mix(in_srgb,var(--ink-soft)_24%,transparent)]"} ${className}`}
+		/>
+	);
+}
+
+export function TweetSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => {
+				const hasMedia = index % 3 === 0;
+				const hasQuote = index % 4 === 2;
+				return (
+					<article
+						className="flex gap-3 px-4 py-3"
+						data-perf="tweet-skeleton-row"
+						key={`tweet-skeleton-${index}`}
+					>
+						<SkeletonBlock className="size-10 shrink-0 rounded-full" />
+						<div className="min-w-0 flex-1 space-y-3">
+							<div className="flex items-center gap-2">
+								<SkeletonBlock className="h-3.5 w-32" />
+								<SkeletonBlock className="h-3 w-20" muted />
+								<SkeletonBlock className="ml-auto h-5 w-16" muted />
+							</div>
+							<div className="space-y-2">
+								<SkeletonBlock className="h-3 w-full" />
+								<SkeletonBlock className="h-3 w-11/12" muted />
+								{index % 2 === 0 ? (
+									<SkeletonBlock className="h-3 w-7/12" muted />
+								) : null}
+							</div>
+							{hasMedia ? (
+								<SkeletonBlock className="h-32 w-full rounded-2xl" muted />
+							) : null}
+							{hasQuote ? (
+								<div className="space-y-2 rounded-2xl border border-[var(--line)] px-3 py-2">
+									<SkeletonBlock className="h-3 w-28" muted />
+									<SkeletonBlock className="h-3 w-full" muted />
+								</div>
+							) : null}
+							<div className="flex max-w-md items-center justify-between">
+								{["thread", "reply", "repost", "like"].map((key) => (
+									<SkeletonBlock className="h-3 w-11" key={key} muted />
+								))}
+							</div>
+						</div>
+					</article>
+				);
+			})}
+		</div>
+	);
+}
+
+export function LinkSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => (
+				<article
+					className="flex gap-3 px-4 py-3"
+					data-perf="link-skeleton-row"
+					key={`link-skeleton-${index}`}
+				>
+					<SkeletonBlock className="size-9 shrink-0 rounded-full" muted />
+					<div className="min-w-0 flex-1 space-y-3">
+						<SkeletonBlock className="h-3.5 w-8/12" />
+						<SkeletonBlock className="h-3 w-6/12" muted />
+						<div className="flex flex-wrap gap-2">
+							<SkeletonBlock className="h-3 w-20" muted />
+							<SkeletonBlock className="h-3 w-14" muted />
+							<SkeletonBlock className="h-3 w-24" muted />
+						</div>
+						{index % 2 === 0 ? (
+							<SkeletonBlock
+								className="h-20 w-72 max-w-full rounded-2xl"
+								muted
+							/>
+						) : null}
+					</div>
+				</article>
+			))}
+		</div>
+	);
+}
+
+export function FeedLoading({
+	children,
+	detail,
+	label,
+}: {
+	children?: ReactNode;
+	detail?: string;
+	label: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)]">
+			<BirdclawLoading detail={detail} label={label} />
+			{children}
+		</div>
+	);
+}
+
+export function FeedError({
+	action,
+	message,
+	title = "Could not load this view",
+}: {
+	action?: ReactNode;
+	message: string;
+	title?: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)] px-6 py-10 text-center">
+			<div className="mx-auto max-w-sm">
+				<div className="text-[14px] font-bold text-[var(--alert)]">{title}</div>
+				<p className="mt-2 text-[13px] leading-[1.45] text-[var(--ink-soft)]">
+					{message}
+				</p>
+				{action ? (
+					<div className="mt-4 flex justify-center">{action}</div>
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+export function FeedEmpty({
+	detail,
+	label,
+}: {
+	detail?: string;
+	label: string;
+}) {
+	return <BirdclawEmpty detail={detail} label={label} />;
+}

package/src/components/InboxCard.tsx

@@ -1,5 +1,10 @@
 import { Link } from "@tanstack/react-router";
-import { ExternalLink, MessageCircle } from "lucide-react";
+import {
+	CheckCircle2,
+	Circle,
+	ExternalLink,
+	MessageCircle,
+} from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { InboxItem } from "#/lib/types";
 import {
@@ -86,7 +91,14 @@ export function InboxCard({
 						<span className={mutedDotClass} />
 						<span>influence {formatCompactNumber(item.influenceScore)}</span>
 						<span className={mutedDotClass} />
-						<span>{item.needsReply ? "needs reply" : "resolved"}</span>
+						<span className="inline-flex items-center gap-1">
+							{item.needsReply ? (
+								<Circle className="size-3" strokeWidth={2.2} />
+							) : (
+								<CheckCircle2 className="size-3.5" strokeWidth={2} />
+							)}
+							{item.needsReply ? "open" : "replied"}
+						</span>
 					</div>
 					<div className="flex items-center gap-2">
 						<button

package/src/components/LinkPreviewCard.tsx

@@ -9,6 +9,7 @@ import {
 	linkPreviewHostClass,
 	linkPreviewTitleClass,
 } from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
 
 type LinkPreviewState = Pick<
 	TweetUrlEntity,
@@ -21,7 +22,6 @@ type LinkPreviewState = Pick<
 >;
 
 const previewCache = new Map<string, Promise<LinkPreviewMetadata | null>>();
-const IMAGE_EXTENSION_PATTERN = /\.(?:avif|gif|jpe?g|png|webp)(?:[?#].*)?$/i;
 const MAX_CONCURRENT_PREVIEW_FETCHES = 2;
 let activePreviewFetches = 0;
 const queuedPreviewFetches: Array<() => void> = [];
@@ -72,16 +72,13 @@ function schedulePreviewFetch(task: () => Promise<LinkPreviewMetadata | null>) {
 }
 
 function fetchPreview(entry: TweetUrlEntity) {
-	const targetUrl = entry.expandedUrl || entry.url;
+	const targetUrl = safeHttpUrl(entry.expandedUrl || entry.url);
 	if (!targetUrl) return Promise.resolve(null);
 	const key = `${entry.url} ${targetUrl}`;
 	const cached = previewCache.get(key);
 	if (cached) return cached;
 
 	const params = new URLSearchParams({ url: targetUrl });
-	if (entry.url && entry.url !== targetUrl) {
-		params.set("shortUrl", entry.url);
-	}
 	const promise = schedulePreviewFetch(() =>
 		fetch(`/api/link-preview?${params.toString()}`)
 			.then(async (response) => {
@@ -109,14 +106,32 @@ function displayHost(url: string, fallback: string) {
 function isDirectImageUrl(url: string) {
 	try {
 		const parsed = new URL(url);
-		if (IMAGE_EXTENSION_PATTERN.test(parsed.pathname)) return true;
 		return (
+			parsed.protocol === "https:" &&
 			parsed.hostname === "pbs.twimg.com" &&
 			(parsed.pathname.startsWith("/media/") ||
 				parsed.pathname.startsWith("/amplify_video_thumb/"))
 		);
 	} catch {
-		return IMAGE_EXTENSION_PATTERN.test(url);
+		return false;
+	}
+}
+
+function safePreviewImageUrl(url: string | null | undefined) {
+	if (!url) return null;
+	try {
+		const parsed = new URL(url);
+		if (
+			parsed.protocol === "https:" &&
+			parsed.hostname === "pbs.twimg.com" &&
+			(parsed.pathname.startsWith("/media/") ||
+				parsed.pathname.startsWith("/amplify_video_thumb/"))
+		) {
+			return parsed.toString();
+		}
+		return null;
+	} catch {
+		return null;
 	}
 }
 
@@ -127,22 +142,25 @@ export function LinkPreviewCard({
 	entry: TweetUrlEntity;
 	index: number;
 }) {
-	const targetUrl = entry.expandedUrl || entry.url;
-	const displayUrl = entry.displayUrl || displayHost(targetUrl, targetUrl);
-	const directImageUrl = isDirectImageUrl(targetUrl) ? targetUrl : null;
+	const targetUrl = safeHttpUrl(entry.expandedUrl || entry.url);
+	const previewUrl = targetUrl ?? "";
+	const displayUrl =
+		entry.displayUrl || (targetUrl ? displayHost(targetUrl, targetUrl) : "");
+	const directImageUrl =
+		targetUrl && isDirectImageUrl(targetUrl) ? targetUrl : null;
 	const initialPreview = useMemo<LinkPreviewState>(
 		() => ({
-			expandedUrl: targetUrl,
+			expandedUrl: previewUrl,
 			displayUrl,
 			title:
 				entry.title ??
-				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+				(directImageUrl ? displayHost(previewUrl, displayUrl) : undefined),
 			description:
 				entry.description ?? (directImageUrl ? displayUrl : undefined),
 			imageUrl: entry.imageUrl ?? directImageUrl,
 			siteName:
 				entry.siteName ??
-				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+				(directImageUrl ? displayHost(previewUrl, displayUrl) : undefined),
 		}),
 		[
 			directImageUrl,
@@ -151,7 +169,7 @@ export function LinkPreviewCard({
 			entry.imageUrl,
 			entry.siteName,
 			entry.title,
-			targetUrl,
+			previewUrl,
 		],
 	);
 	const [preview, setPreview] = useState(initialPreview);
@@ -199,7 +217,7 @@ export function LinkPreviewCard({
 			void fetchPreview(entry).then((metadata) => {
 				if (cancelled || !metadata) return;
 				setPreview((current) => ({
-					expandedUrl: metadata.url || current.expandedUrl,
+					expandedUrl: safeHttpUrl(metadata.url) ?? current.expandedUrl,
 					displayUrl: current.displayUrl,
 					title: metadata.title ?? current.title,
 					description: metadata.description ?? current.description,
@@ -214,6 +232,8 @@ export function LinkPreviewCard({
 		};
 	}, [cacheKey, canHydrate, entry, hydratedKey, preview, targetUrl]);
 
+	if (!targetUrl) return null;
+
 	const title = preview.title || entry.displayUrl;
 	const description =
 		preview.description && preview.description !== title
@@ -221,14 +241,16 @@ export function LinkPreviewCard({
 			: preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
 	const host =
 		preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
-	const showImage = Boolean(preview.imageUrl && !imageFailed);
+	const imageUrl = safePreviewImageUrl(preview.imageUrl);
+	const showImage = Boolean(imageUrl && !imageFailed);
+	const previewHref = safeHttpUrl(preview.expandedUrl) ?? targetUrl;
 
 	return (
 		<a
 			key={`${entry.expandedUrl}-${String(index)}`}
 			className={linkPreviewCardClass}
 			data-perf="link-preview-card"
-			href={preview.expandedUrl}
+			href={previewHref}
 			ref={cardRef}
 			rel="noreferrer"
 			target="_blank"
@@ -255,7 +277,7 @@ export function LinkPreviewCard({
 						className="size-full object-cover transition-transform duration-200 group-hover/link-preview:scale-[1.03]"
 						loading="lazy"
 						onError={() => setImageFailed(true)}
-						src={preview.imageUrl ?? ""}
+						src={imageUrl ?? ""}
 					/>
 				) : (
 					<ImageIcon