birdclaw 0.5.0 → 0.6.0

package/src/routes/index.tsx

@@ -1,138 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { TimelineCard } from "#/components/TimelineCard";
-import type {
-	QueryEnvelope,
-	QueryResponse,
-	ReplyFilter,
-	TimelineItem,
-} from "#/lib/types";
-import {
-	cx,
-	emptyStateClass,
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-} from "#/lib/ui";
+import { TimelineRouteFrame } from "#/components/TimelineRouteFrame";
+import type { QueryEnvelope } from "#/lib/types";
 
 export const Route = createFileRoute("/")({
 	component: HomeRoute,
 });
 
-const TABS: Array<{ value: ReplyFilter; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "unreplied", label: "Unreplied" },
-	{ value: "replied", label: "Replied" },
-];
+function homeSubtitle(meta: QueryEnvelope | null) {
+	if (!meta) return "Loading local context...";
+	return `${String(meta.stats.home)} items · ${String(meta.stats.needsReply)} waiting · ${meta.transport.statusText}`;
+}
 
 function HomeRoute() {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
-	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("all");
-	const [search, setSearch] = useState("");
-	const [refreshTick, setRefreshTick] = useState(0);
-
-	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
-	}, []);
-
-	useEffect(() => {
-		const url = new URL("/api/query", window.location.origin);
-		url.searchParams.set("resource", "home");
-		url.searchParams.set("replyFilter", replyFilter);
-		url.searchParams.set("refresh", String(refreshTick));
-		if (search.trim()) {
-			url.searchParams.set("search", search.trim());
-		}
-
-		fetch(url)
-			.then((response) => response.json())
-			.then((data: QueryResponse) => setItems(data.items as TimelineItem[]));
-	}, [refreshTick, replyFilter, search]);
-
-	const subtitle = useMemo(() => {
-		if (!meta) return "Loading local context...";
-		return `${String(meta.stats.home)} items · ${String(meta.stats.needsReply)} waiting · ${meta.transport.statusText}`;
-	}, [meta]);
-
-	async function replyToTweet(tweetId: string) {
-		const text = window.prompt("Reply text");
-		if (!text?.trim()) return;
-
-		await fetch("/api/action", {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({
-				kind: "replyTweet",
-				accountId: "acct_primary",
-				tweetId,
-				text,
-			}),
-		});
-
-		setRefreshTick((value) => value + 1);
-	}
-
 	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Home</h1>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-				</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="Search local timeline"
-							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.value}
-									{active ? <span className={tabButtonIndicatorClass} /> : null}
-								</span>
-							</button>
-						);
-					})}
-				</div>
-			</header>
-			<section className={feedClass}>
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>No posts to show.</div>
-				) : null}
-				{items.map((item) => (
-					<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
-				))}
-			</section>
-		</>
+		<TimelineRouteFrame
+			emptyDetail="Try a different filter or sync the timeline again."
+			emptyLabel="No posts in this view"
+			errorFallback="Timeline unavailable"
+			errorTitle="Could not load posts"
+			initialReplyFilter="all"
+			loadingDetail="Reading the local timeline store"
+			loadingLabel="Loading posts"
+			resource="home"
+			searchPlaceholder="Search local timeline"
+			subtitle={homeSubtitle}
+			syncKind="timeline"
+			syncLabel="Sync timeline"
+			title="Home"
+		/>
 	);
 }

package/src/routes/links.tsx

@@ -11,6 +11,12 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AvatarChip } from "#/components/AvatarChip";
+import {
+	FeedEmpty,
+	FeedError,
+	FeedLoading,
+	LinkSkeletonRows,
+} from "#/components/FeedState";
 import { ProfilePreview } from "#/components/ProfilePreview";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type {
@@ -26,7 +32,6 @@ import type {
 } from "#/lib/types";
 import {
 	cx,
-	emptyStateClass,
 	pageHeaderClass,
 	pageHeaderRowClass,
 	pageSubtitleClass,
@@ -649,6 +654,7 @@ function LinksRoute() {
 	const cacheRef = useRef(new Map<string, LinkInsightResponse>());
 	const inFlightRef = useRef(new Set<string>());
 	const mountedRef = useRef(true);
+	const [errorByKey, setErrorByKey] = useState<Record<string, string>>({});
 	const [, bumpCacheVersion] = useState(0);
 	const currentCacheKey = insightCacheKey(
 		kind,
@@ -658,6 +664,8 @@ function LinksRoute() {
 		refreshTick,
 	);
 	const data = cacheRef.current.get(currentCacheKey) ?? null;
+	const error = errorByKey[currentCacheKey] ?? null;
+	const loading = !data && !error;
 
 	useEffect(() => {
 		return () => {
@@ -672,6 +680,11 @@ function LinksRoute() {
 				return;
 			}
 			inFlightRef.current.add(key);
+			setErrorByKey((current) => {
+				const rest = { ...current };
+				delete rest[key];
+				return rest;
+			});
 			fetch(linkInsightsUrl(fetchKind, range, sort, source, refreshTick))
 				.then((response) => response.json())
 				.then((response: LinkInsightResponse) => {
@@ -684,7 +697,17 @@ function LinksRoute() {
 					if (error instanceof DOMException && error.name === "AbortError") {
 						return;
 					}
+					if (!mountedRef.current) {
+						return;
+					}
 					console.warn("Link insights failed", error);
+					setErrorByKey((current) => ({
+						...current,
+						[key]:
+							error instanceof Error
+								? error.message
+								: "Link insights unavailable",
+					}));
 				})
 				.finally(() => {
 					inFlightRef.current.delete(key);
@@ -865,10 +888,32 @@ function LinksRoute() {
 			</header>
 
 			<section className="flex flex-col">
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>
-						{data ? "No links in this window." : "Loading links..."}
-					</div>
+				{loading ? (
+					<FeedLoading
+						detail="Ranking URLs and collecting local discussion"
+						label="Loading links"
+					>
+						<LinkSkeletonRows />
+					</FeedLoading>
+				) : error ? (
+					<FeedError
+						action={
+							<button
+								className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
+								onClick={() => setRefreshTick((value) => value + 1)}
+								type="button"
+							>
+								Retry
+							</button>
+						}
+						message={error}
+						title="Could not load links"
+					/>
+				) : items.length === 0 ? (
+					<FeedEmpty
+						detail="Try a different range, source, or search term."
+						label="No links in this window"
+					/>
 				) : null}
 				{items.map((item, index) => (
 					<LinkInsightRow

package/src/routes/mentions.tsx

@@ -1,138 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { TimelineCard } from "#/components/TimelineCard";
-import type {
-	QueryEnvelope,
-	QueryResponse,
-	ReplyFilter,
-	TimelineItem,
-} from "#/lib/types";
-import {
-	cx,
-	emptyStateClass,
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-} from "#/lib/ui";
+import { TimelineRouteFrame } from "#/components/TimelineRouteFrame";
+import type { QueryEnvelope } from "#/lib/types";
 
 export const Route = createFileRoute("/mentions")({
 	component: MentionsRoute,
 });
 
-const TABS: Array<{ value: ReplyFilter; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "unreplied", label: "Unreplied" },
-	{ value: "replied", label: "Replied" },
-];
+function mentionsSubtitle(meta: QueryEnvelope | null) {
+	if (!meta) return "Loading mentions...";
+	return `${String(meta.stats.mentions)} mention/reply items in local store`;
+}
 
 function MentionsRoute() {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
-	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("unreplied");
-	const [search, setSearch] = useState("");
-	const [refreshTick, setRefreshTick] = useState(0);
-
-	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
-	}, []);
-
-	useEffect(() => {
-		const url = new URL("/api/query", window.location.origin);
-		url.searchParams.set("resource", "mentions");
-		url.searchParams.set("replyFilter", replyFilter);
-		url.searchParams.set("refresh", String(refreshTick));
-		if (search.trim()) {
-			url.searchParams.set("search", search.trim());
-		}
-
-		fetch(url)
-			.then((response) => response.json())
-			.then((data: QueryResponse) => setItems(data.items as TimelineItem[]));
-	}, [refreshTick, replyFilter, search]);
-
-	const subtitle = useMemo(() => {
-		if (!meta) return "Loading mentions...";
-		return `${String(meta.stats.mentions)} mention/reply items in local store`;
-	}, [meta]);
-
-	async function replyToTweet(tweetId: string) {
-		const text = window.prompt("Reply text");
-		if (!text?.trim()) return;
-
-		await fetch("/api/action", {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({
-				kind: "replyTweet",
-				accountId: "acct_primary",
-				tweetId,
-				text,
-			}),
-		});
-
-		setRefreshTick((value) => value + 1);
-	}
-
 	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Mentions</h1>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-				</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="Search mentions"
-							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.value}
-									{active ? <span className={tabButtonIndicatorClass} /> : null}
-								</span>
-							</button>
-						);
-					})}
-				</div>
-			</header>
-			<section className={feedClass}>
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>No mentions in view.</div>
-				) : null}
-				{items.map((item) => (
-					<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
-				))}
-			</section>
-		</>
+		<TimelineRouteFrame
+			emptyDetail="Try All, search less narrowly, or sync mentions."
+			emptyLabel="No mentions in this view"
+			errorFallback="Mentions unavailable"
+			errorTitle="Could not load mentions"
+			initialReplyFilter="unreplied"
+			loadingDetail="Checking local mentions and reply context"
+			loadingLabel="Loading mentions"
+			resource="mentions"
+			searchPlaceholder="Search mentions"
+			subtitle={mentionsSubtitle}
+			syncKind="mentions"
+			syncLabel="Sync mentions"
+			title="Mentions"
+		/>
 	);
 }