birdclaw 0.8.3 → 0.8.4

package/src/routes/blocks.tsx

@@ -1,343 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import {
-	keepPreviousData,
-	useQuery,
-	useQueryClient,
-} from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
-import { AvatarChip } from "#/components/AvatarChip";
-import { useDebouncedValue } from "#/components/useDebouncedValue";
-import { fetchQueryEnvelope, postAction } from "#/lib/api-client";
-import { formatCompactNumber } from "#/lib/present";
-import { queryKeys } from "#/lib/query-client";
-import type { BlockListResponse } 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 queryClient = useQueryClient();
-	const [accountId, setAccountId] = useState<string>("acct_primary");
-	const [search, setSearch] = useState("");
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [message, setMessage] = useState("");
-	const [actionError, setActionError] = useState("");
-	const statusQuery = useQuery({
-		queryKey: queryKeys.status,
-		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
-	});
-	const meta = statusQuery.data ?? null;
-	const debouncedSearch = useDebouncedValue(search, 180);
-	const hasAccountId = accountId.trim().length > 0;
-	const isReady = Boolean(meta);
-	const blocksQueryKey = [
-		...queryKeys.blocks,
-		{ accountId, search: debouncedSearch },
-	] as const;
-	const blocksQuery = useQuery({
-		queryKey: blocksQueryKey,
-		enabled: hasAccountId,
-		queryFn: async ({ signal }) => {
-			const params = new URLSearchParams({
-				account: accountId,
-				limit: "12",
-			});
-			if (debouncedSearch.trim()) {
-				params.set("search", debouncedSearch.trim());
-			}
-			const response = await fetch(`/api/blocks?${params.toString()}`, {
-				signal,
-			});
-			if (!response.ok) {
-				throw new Error(
-					`Blocklist request failed (${String(response.status)})`,
-				);
-			}
-			return (await response.json()) as BlockListResponse;
-		},
-		placeholderData: keepPreviousData,
-		staleTime: 5 * 60_000,
-	});
-	const items = blocksQuery.data?.items ?? [];
-	const matches = blocksQuery.data?.matches ?? [];
-	const blockSyncQuery = useQuery({
-		queryKey: [...queryKeys.blockSync, accountId],
-		enabled: hasAccountId,
-		retry: false,
-		queryFn: async () => {
-			const data = (await postAction({
-				kind: "syncBlocks",
-				accountId,
-			})) as {
-				ok?: boolean;
-				syncedCount?: number;
-				transport?: { ok?: boolean; output?: string };
-			};
-			if (data.ok === false || data.transport?.ok === false) {
-				throw new Error(data.transport?.output ?? "Block sync failed");
-			}
-			await queryClient.invalidateQueries({ queryKey: queryKeys.blocks });
-			return data;
-		},
-		staleTime: 5 * 60_000,
-	});
-	const isSyncing = blockSyncQuery.isFetching;
-	const queryError =
-		statusQuery.error ?? blocksQuery.error ?? blockSyncQuery.error ?? null;
-	const error =
-		actionError ||
-		(queryError instanceof Error
-			? queryError.message
-			: queryError
-				? "Unable to load blocklist"
-				: "");
-
-	useEffect(() => {
-		if (!meta?.accounts.length) return;
-		if (meta.accounts.some((account) => account.id === accountId)) return;
-		setAccountId(meta.accounts[0]?.id ?? "acct_primary");
-	}, [accountId, meta]);
-
-	useEffect(() => {
-		const data = blockSyncQuery.data;
-		if (!data || data.transport?.output?.includes("disabled")) return;
-		setMessage(
-			data.transport?.output ??
-				`Synced ${String(data.syncedCount ?? 0)} remote blocks`,
-		);
-	}, [blockSyncQuery.data]);
-
-	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);
-		setActionError("");
-		setMessage("");
-
-		try {
-			const data = (await postAction({
-				kind,
-				accountId,
-				query: normalized,
-			})) as {
-				ok?: boolean;
-				profile?: { handle?: string };
-				transport?: { ok?: boolean; output?: string };
-			};
-			if (data.ok === false || data.transport?.ok === false) {
-				setActionError(data.transport?.output ?? "Blocklist action failed");
-				return;
-			}
-
-			setMessage(
-				`${kind === "blockProfile" ? "Blocked" : "Unblocked"} @${
-					data.profile?.handle ?? normalized.replace(/^@/, "")
-				} · ${data.transport?.output ?? "local"}`,
-			);
-			await queryClient.invalidateQueries({ queryKey: queryKeys.blocks });
-		} catch (submitError) {
-			setActionError(
-				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,249 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useQuery } from "@tanstack/react-query";
-import {
-	AlertTriangle,
-	CheckCircle2,
-	Database,
-	RefreshCw,
-	Route as RouteIcon,
-	TerminalSquare,
-	XCircle,
-} from "lucide-react";
-import { useMemo } from "react";
-import { queryKeys } from "#/lib/query-client";
-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 dataSourcesQuery = useQuery({
-		queryKey: queryKeys.dataSources,
-		queryFn: fetchDataSources,
-		staleTime: 5 * 60_000,
-	});
-	const snapshot = dataSourcesQuery.data ?? null;
-	const loading = dataSourcesQuery.isFetching;
-	const error = dataSourcesQuery.error;
-	const sourcesByKind = useMemo(
-		() =>
-			new Map(
-				(snapshot?.sources ?? []).map((source) => [source.source, source]),
-			),
-		[snapshot],
-	);
-
-	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={() => void dataSourcesQuery.refetch()}
-							disabled={loading}
-						>
-							<RefreshCw className={cx("size-4", loading && "animate-spin")} />
-							Refresh
-						</button>
-					</div>
-				</div>
-			</header>
-			{error ? (
-				<div className={errorCopyClass}>
-					{error instanceof Error ? error.message : "Data sources unavailable"}
-				</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>
-	);
-}