birdclaw 0.8.2 → 0.8.4

package/src/routes/blocks.tsx

@@ -1,377 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useEffect, useMemo, useState } from "react";
-import { AvatarChip } from "#/components/AvatarChip";
-import { formatCompactNumber } from "#/lib/present";
-import type {
-	BlockItem,
-	BlockListResponse,
-	BlockSearchItem,
-	QueryEnvelope,
-} from "#/lib/types";
-import {
-	blockRowBodyClass,
-	blockRowClass,
-	cx,
-	dangerButtonClass,
-	emptyStateClass,
-	errorCopyClass,
-	mutedDotClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	primaryButtonClass,
-	secondaryButtonClass,
-	selectFieldClass,
-	statusCopyClass,
-	textFieldClass,
-	textFieldShortClass,
-	textFieldWideClass,
-	timestampClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/blocks")({
-	component: BlocksRoute,
-});
-
-function BlocksRoute() {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [accountId, setAccountId] = useState<string>("acct_primary");
-	const [search, setSearch] = useState("");
-	const [items, setItems] = useState<BlockItem[]>([]);
-	const [matches, setMatches] = useState<BlockSearchItem[]>([]);
-	const [refreshTick, setRefreshTick] = useState(0);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [isSyncing, setIsSyncing] = useState(false);
-	const [message, setMessage] = useState("");
-	const [error, setError] = useState("");
-	const hasAccountId = accountId.trim().length > 0;
-	const isReady = Boolean(meta);
-
-	useEffect(() => {
-		const controller = new AbortController();
-
-		fetch("/api/status", { signal: controller.signal })
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => {
-				setMeta(data);
-				setAccountId(data.accounts[0]?.id ?? "acct_primary");
-				setError("");
-			})
-			.catch((error: unknown) => {
-				if (error instanceof DOMException && error.name === "AbortError") {
-					return;
-				}
-				setError(
-					error instanceof Error
-						? error.message
-						: "Unable to load blocklist status",
-				);
-			});
-
-		return () => {
-			controller.abort();
-		};
-	}, []);
-
-	useEffect(() => {
-		const controller = new AbortController();
-		const params = new URLSearchParams({
-			account: accountId,
-			limit: "12",
-			refresh: String(refreshTick),
-		});
-		if (search.trim()) {
-			params.set("search", search.trim());
-		}
-
-		fetch(`/api/blocks?${params.toString()}`, { signal: controller.signal })
-			.then((response) => response.json())
-			.then((data: BlockListResponse) => {
-				setItems(data.items);
-				setMatches(data.matches);
-				setError("");
-			})
-			.catch((error: unknown) => {
-				if (error instanceof DOMException && error.name === "AbortError") {
-					return;
-				}
-				setError(
-					error instanceof Error ? error.message : "Unable to load blocklist",
-				);
-			});
-
-		return () => {
-			controller.abort();
-		};
-	}, [accountId, refreshTick, search]);
-
-	useEffect(() => {
-		if (!hasAccountId) {
-			return;
-		}
-
-		const controller = new AbortController();
-		setIsSyncing(true);
-
-		fetch("/api/action", {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({
-				kind: "syncBlocks",
-				accountId,
-			}),
-			signal: controller.signal,
-		})
-			.then((response) => response.json())
-			.then(
-				(data: {
-					ok?: boolean;
-					synced?: boolean;
-					syncedCount?: number;
-					transport?: { ok?: boolean; output?: string };
-				}) => {
-					if (data.ok === false) {
-						setError(data.transport?.output ?? "Block sync failed");
-						return;
-					}
-					setRefreshTick((value) => value + 1);
-					if (data.transport?.output?.includes("disabled")) {
-						return;
-					}
-					setMessage(
-						data.transport?.output ??
-							`Synced ${String(data.syncedCount ?? 0)} remote blocks`,
-					);
-				},
-			)
-			.catch((error: unknown) => {
-				if (error instanceof DOMException && error.name === "AbortError") {
-					return;
-				}
-				setError(error instanceof Error ? error.message : "Block sync failed");
-			})
-			.finally(() => setIsSyncing(false));
-
-		return () => {
-			controller.abort();
-		};
-	}, [accountId, hasAccountId]);
-
-	const subtitle = useMemo(() => {
-		if (!meta) {
-			return items.length > 0
-				? `${String(items.length)} blocked profiles · loading transport...`
-				: "Loading local blocklist...";
-		}
-		if (isSyncing)
-			return `Syncing remote blocklist · ${meta.transport.statusText}`;
-		return `${String(items.length)} blocked profiles · ${meta.transport.statusText}`;
-	}, [isSyncing, items.length, meta]);
-
-	async function submit(
-		kind: "blockProfile" | "unblockProfile",
-		query: string,
-	) {
-		const normalized = query.trim();
-		if (!normalized) return;
-
-		setIsSubmitting(true);
-		setError("");
-		setMessage("");
-
-		try {
-			const response = await fetch("/api/action", {
-				method: "POST",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify({
-					kind,
-					accountId,
-					query: normalized,
-				}),
-			});
-			const data = (await response.json()) as {
-				ok?: boolean;
-				profile?: { handle?: string };
-				transport?: { ok?: boolean; output?: string };
-			};
-			if (data.ok === false || data.transport?.ok === false) {
-				setError(data.transport?.output ?? "Blocklist action failed");
-				return;
-			}
-
-			setMessage(
-				`${kind === "blockProfile" ? "Blocked" : "Unblocked"} @${
-					data.profile?.handle ?? normalized.replace(/^@/, "")
-				} · ${data.transport?.output ?? "local"}`,
-			);
-			setRefreshTick((value) => value + 1);
-		} catch (submitError) {
-			setError(
-				submitError instanceof Error
-					? submitError.message
-					: "Blocklist action failed",
-			);
-		} finally {
-			setIsSubmitting(false);
-		}
-	}
-
-	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Blocks</h1>
-						<h2 className={cx(pageSubtitleClass, "text-[14px]")}>
-							Maintain a clean blocklist locally.
-						</h2>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-				</div>
-				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
-					<select
-						className={cx(selectFieldClass, textFieldShortClass)}
-						disabled={!isReady}
-						onChange={(event) => setAccountId(event.target.value)}
-						value={accountId}
-					>
-						{meta?.accounts.map((account) => (
-							<option key={account.id} value={account.id}>
-								{account.handle}
-							</option>
-						))}
-					</select>
-					<input
-						className={cx(
-							textFieldClass,
-							textFieldWideClass,
-							"flex-1 min-w-[200px]",
-						)}
-						disabled={!hasAccountId}
-						onChange={(event) => setSearch(event.target.value)}
-						placeholder="Handle, name, bio, or Twitter URL"
-						value={search}
-					/>
-					<button
-						className={primaryButtonClass}
-						disabled={!hasAccountId || isSubmitting || !search.trim()}
-						onClick={() => void submit("blockProfile", search)}
-						type="button"
-					>
-						{isSubmitting ? "Working..." : "Block"}
-					</button>
-				</div>
-			</header>
-
-			{message ? <p className={statusCopyClass}>{message}</p> : null}
-			{error ? <p className={errorCopyClass}>{error}</p> : null}
-
-			{matches.length > 0 ? (
-				<section className="flex flex-col">
-					<h2 className="px-4 pt-3 pb-1 text-[13px] font-semibold uppercase tracking-wide text-[var(--ink-soft)]">
-						Search matches
-					</h2>
-					{matches.map((match) => (
-						<article className={blockRowClass} key={match.profile.id}>
-							<AvatarChip
-								avatarUrl={match.profile.avatarUrl}
-								hue={match.profile.avatarHue}
-								name={match.profile.displayName}
-								profileId={match.profile.id}
-							/>
-							<div className={blockRowBodyClass}>
-								<div className="flex items-center justify-between gap-2">
-									<div className="flex min-w-0 flex-col">
-										<strong className="truncate text-[15px] text-[var(--ink)]">
-											{match.profile.displayName}
-										</strong>
-										<div className="flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--ink-soft)]">
-											<span>@{match.profile.handle}</span>
-											<span className={mutedDotClass} />
-											<span>
-												{formatCompactNumber(match.profile.followersCount)}{" "}
-												followers
-											</span>
-										</div>
-									</div>
-									<button
-										className={
-											match.isBlocked ? secondaryButtonClass : dangerButtonClass
-										}
-										onClick={() =>
-											void submit(
-												match.isBlocked ? "unblockProfile" : "blockProfile",
-												match.profile.id,
-											)
-										}
-										type="button"
-									>
-										{match.isBlocked ? "Unblock" : "Block"}
-									</button>
-								</div>
-								<p className="text-[14px] leading-[1.4] text-[var(--ink)]">
-									{match.profile.bio}
-								</p>
-							</div>
-						</article>
-					))}
-				</section>
-			) : null}
-
-			<section className="flex flex-col">
-				{items.length === 0 && matches.length === 0 ? (
-					<div className={emptyStateClass}>No blocks in this account.</div>
-				) : null}
-				{items.map((item) => (
-					<article
-						className={blockRowClass}
-						key={item.accountId + item.profile.id}
-					>
-						<AvatarChip
-							avatarUrl={item.profile.avatarUrl}
-							hue={item.profile.avatarHue}
-							name={item.profile.displayName}
-							profileId={item.profile.id}
-						/>
-						<div className={blockRowBodyClass}>
-							<div className="flex items-center justify-between gap-2">
-								<div className="flex min-w-0 flex-col">
-									<strong className="truncate text-[15px] text-[var(--ink)]">
-										{item.profile.displayName}
-									</strong>
-									<div className="flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--ink-soft)]">
-										<span>@{item.profile.handle}</span>
-										<span className={mutedDotClass} />
-										<span>{item.accountHandle}</span>
-										<span className={mutedDotClass} />
-										<span>
-											{formatCompactNumber(item.profile.followersCount)}{" "}
-											followers
-										</span>
-									</div>
-								</div>
-								<button
-									className={secondaryButtonClass}
-									onClick={() => void submit("unblockProfile", item.profile.id)}
-									type="button"
-								>
-									Unblock
-								</button>
-							</div>
-							{item.profile.bio ? (
-								<p className="text-[14px] leading-[1.4] text-[var(--ink)]">
-									{item.profile.bio}
-								</p>
-							) : null}
-							<p className={timestampClass}>
-								Blocked {new Date(item.blockedAt).toLocaleString()} ·{" "}
-								{item.source}
-							</p>
-						</div>
-					</article>
-				))}
-			</section>
-		</>
-	);
-}

package/src/routes/bookmarks.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { SavedTimelineView } from "#/components/SavedTimelineView";
-
-export const Route = createFileRoute("/bookmarks")({
-	component: BookmarksRoute,
-});
-
-function BookmarksRoute() {
-	return (
-		<SavedTimelineView
-			eyebrow="bookmarks"
-			filter="bookmarked"
-			loadingLabel="Loading bookmarks..."
-			searchPlaceholder="Search bookmarks"
-			title="Saved threads, receipts, and future rabbit holes."
-		/>
-	);
-}

package/src/routes/data-sources.tsx

@@ -1,257 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import {
-	AlertTriangle,
-	CheckCircle2,
-	Database,
-	RefreshCw,
-	Route as RouteIcon,
-	TerminalSquare,
-	XCircle,
-} from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type {
-	LiveDataSourceCapability,
-	LiveDataSourceKind,
-	LiveDataSourcesResponse,
-	LiveDataSourceStatus,
-} from "#/lib/types";
-import {
-	cx,
-	errorCopyClass,
-	pageHeaderActionsClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	secondaryButtonClass,
-	statusCopyClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/data-sources")({
-	component: DataSourcesRoute,
-});
-
-async function fetchDataSources() {
-	const response = await fetch("/api/data-sources");
-	if (!response.ok) {
-		throw new Error(`Data source status failed (${String(response.status)})`);
-	}
-	return (await response.json()) as LiveDataSourcesResponse;
-}
-
-function sourceIcon(source: LiveDataSourceKind) {
-	if (source === "birdclaw") return Database;
-	if (source === "bird") return TerminalSquare;
-	return RouteIcon;
-}
-
-function statusTone(status: LiveDataSourceStatus["status"]) {
-	if (status === "ok") {
-		return "border-[color:color-mix(in_srgb,#22c55e_45%,var(--line))] bg-[color:color-mix(in_srgb,#22c55e_10%,var(--bg))] text-[color:color-mix(in_srgb,#22c55e_82%,var(--ink))]";
-	}
-	if (status === "warning") {
-		return "border-[color:color-mix(in_srgb,#f59e0b_50%,var(--line))] bg-[color:color-mix(in_srgb,#f59e0b_12%,var(--bg))] text-[color:color-mix(in_srgb,#f59e0b_82%,var(--ink))]";
-	}
-	return "border-[color:color-mix(in_srgb,var(--alert)_55%,var(--line))] bg-[var(--alert-soft)] text-[var(--alert)]";
-}
-
-function statusIcon(status: LiveDataSourceStatus["status"]) {
-	if (status === "ok") return CheckCircle2;
-	if (status === "warning") return AlertTriangle;
-	return XCircle;
-}
-
-function sourceLabel(source: LiveDataSourceKind) {
-	if (source === "birdclaw") return "local";
-	return source;
-}
-
-function SourceCard({ source }: { source: LiveDataSourceStatus }) {
-	const Icon = sourceIcon(source.source);
-	const StatusIcon = statusIcon(source.status);
-	return (
-		<section className="min-w-0 border-b border-[var(--line)] px-4 py-4">
-			<div className="flex items-start justify-between gap-3">
-				<div className="flex min-w-0 items-center gap-3">
-					<div className="grid size-10 shrink-0 place-items-center rounded-md border border-[var(--line)] bg-[var(--bg-active)] text-[var(--ink)]">
-						<Icon className="size-5" strokeWidth={1.9} />
-					</div>
-					<div className="min-w-0">
-						<h2 className="truncate text-[16px] font-bold text-[var(--ink)]">
-							{source.label}
-						</h2>
-						<p className="truncate text-[13px] text-[var(--ink-soft)]">
-							{source.installed === false ? "not installed" : source.detail}
-						</p>
-					</div>
-				</div>
-				<span
-					className={cx(
-						"inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[12px] font-bold",
-						statusTone(source.status),
-					)}
-				>
-					<StatusIcon className="size-3.5" strokeWidth={2} />
-					{source.works ? "works" : source.status}
-				</span>
-			</div>
-			<div className="mt-4 flex flex-wrap gap-2">
-				{source.accounts.length > 0 ? (
-					source.accounts.map((account, index) => (
-						<span
-							key={`${account.app ?? ""}:${account.username ?? account.handle ?? account.id ?? String(index)}`}
-							className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--line)] bg-[var(--bg)] px-2.5 py-1 text-[12px] font-semibold text-[var(--ink-soft)]"
-						>
-							{account.app ? (
-								<span className="text-[var(--ink-faint)]">{account.app}</span>
-							) : null}
-							<span className="truncate">
-								{account.handle ??
-									(account.username ? `@${account.username}` : account.id)}
-							</span>
-							{account.isDefault ? (
-								<span className="text-[var(--accent)]">default</span>
-							) : null}
-						</span>
-					))
-				) : (
-					<span className="text-[13px] text-[var(--ink-soft)]">
-						no authenticated account detected
-					</span>
-				)}
-			</div>
-		</section>
-	);
-}
-
-function CapabilityRow({
-	capability,
-	sourcesByKind,
-}: {
-	capability: LiveDataSourceCapability;
-	sourcesByKind: Map<LiveDataSourceKind, LiveDataSourceStatus>;
-}) {
-	const chain = [capability.primary, ...capability.fallbacks];
-	return (
-		<div className="grid gap-3 border-b border-[var(--line)] px-4 py-4 min-[840px]:grid-cols-[220px_minmax(0,1fr)]">
-			<div className="min-w-0">
-				<div className="font-bold text-[var(--ink)]">{capability.label}</div>
-				{capability.notes ? (
-					<div className="mt-1 text-[12px] text-[var(--ink-soft)]">
-						{capability.notes}
-					</div>
-				) : null}
-			</div>
-			<div className="flex min-w-0 flex-wrap items-center gap-2">
-				{chain.map((source, index) => {
-					const status = sourcesByKind.get(source);
-					const ok = Boolean(status?.works);
-					return (
-						<div
-							key={`${capability.key}:${source}:${String(index)}`}
-							className={cx(
-								"inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[13px] font-semibold",
-								ok
-									? "border-[color:color-mix(in_srgb,#22c55e_38%,var(--line))] text-[var(--ink)]"
-									: "border-[var(--line)] text-[var(--ink-soft)]",
-							)}
-						>
-							<span className="text-[12px] text-[var(--ink-faint)]">
-								{index === 0 ? "primary" : `fallback ${String(index)}`}
-							</span>
-							<span>{sourceLabel(source)}</span>
-						</div>
-					);
-				})}
-			</div>
-		</div>
-	);
-}
-
-function DataSourcesRoute() {
-	const [snapshot, setSnapshot] = useState<LiveDataSourcesResponse | null>(
-		null,
-	);
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(true);
-	const sourcesByKind = useMemo(
-		() =>
-			new Map(
-				(snapshot?.sources ?? []).map((source) => [source.source, source]),
-			),
-		[snapshot],
-	);
-
-	const load = useCallback(() => {
-		setLoading(true);
-		setError(null);
-		fetchDataSources()
-			.then(setSnapshot)
-			.catch((cause: unknown) => {
-				setError(
-					cause instanceof Error ? cause.message : "Data sources unavailable",
-				);
-			})
-			.finally(() => setLoading(false));
-	}, []);
-
-	useEffect(() => {
-		load();
-	}, [load]);
-
-	return (
-		<section className="flex min-h-screen flex-col">
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div>
-						<h1 className={pageTitleClass}>Data Sources</h1>
-						<p className={pageSubtitleClass}>
-							Live auth, local archive, and automatic fallback order
-						</p>
-					</div>
-					<div className={pageHeaderActionsClass}>
-						<button
-							className={secondaryButtonClass}
-							type="button"
-							onClick={load}
-							disabled={loading}
-						>
-							<RefreshCw className={cx("size-4", loading && "animate-spin")} />
-							Refresh
-						</button>
-					</div>
-				</div>
-			</header>
-			{error ? <div className={errorCopyClass}>{error}</div> : null}
-			{snapshot ? (
-				<>
-					<div className="grid border-t border-[var(--line)]">
-						{snapshot.sources.map((source) => (
-							<SourceCard key={source.source} source={source} />
-						))}
-					</div>
-					<section className="min-h-0 flex-1">
-						<header className="border-b border-[var(--line)] px-4 py-3">
-							<h2 className="text-[16px] font-bold text-[var(--ink)]">
-								Fallbacks
-							</h2>
-							<p className="text-[13px] text-[var(--ink-soft)]">
-								Calls try the next source when the current source cannot serve
-								the request.
-							</p>
-						</header>
-						{snapshot.capabilities.map((capability) => (
-							<CapabilityRow
-								key={capability.key}
-								capability={capability}
-								sourcesByKind={sourcesByKind}
-							/>
-						))}
-					</section>
-				</>
-			) : loading ? (
-				<div className={statusCopyClass}>Checking data sources...</div>
-			) : null}
-		</section>
-	);
-}