birdclaw 0.4.1 → 0.5.1

package/src/routes/blocks.tsx

@@ -9,22 +9,21 @@ import type {
 	QueryEnvelope,
 } from "#/lib/types";
 import {
-	actionButtonClass,
-	cardHeaderClass,
-	contentCardClass,
+	blockRowBodyClass,
+	blockRowClass,
 	cx,
+	dangerButtonClass,
+	emptyStateClass,
 	errorCopyClass,
-	eyebrowClass,
-	heroControlsBlocksClass,
-	heroControlsClass,
-	heroCopyClass,
-	heroShellClass,
-	heroTitleClass,
-	identityBlockClass,
-	metaRowClass,
 	mutedDotClass,
-	pageWrapClass,
-	stackGridClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	primaryButtonClass,
+	secondaryButtonClass,
+	selectFieldClass,
+	statusCopyClass,
 	textFieldClass,
 	textFieldShortClass,
 	textFieldWideClass,
@@ -142,7 +141,7 @@ function BlocksRoute() {
 					}
 					setMessage(
 						data.transport?.output ??
-							`Synced ${data.syncedCount ?? 0} remote blocks`,
+							`Synced ${String(data.syncedCount ?? 0)} remote blocks`,
 					);
 				},
 			)
@@ -162,12 +161,12 @@ function BlocksRoute() {
 	const subtitle = useMemo(() => {
 		if (!meta) {
 			return items.length > 0
-				? `${items.length} blocked profiles in view · loading transport status...`
+				? `${String(items.length)} blocked profiles · loading transport...`
 				: "Loading local blocklist...";
 		}
 		if (isSyncing)
 			return `Syncing remote blocklist · ${meta.transport.statusText}`;
-		return `${items.length} blocked profiles in view · ${meta.transport.statusText}`;
+		return `${String(items.length)} blocked profiles · ${meta.transport.statusText}`;
 	}, [isSyncing, items.length, meta]);
 
 	async function submit(
@@ -192,9 +191,14 @@ function BlocksRoute() {
 				}),
 			});
 			const data = (await response.json()) as {
+				ok?: boolean;
 				profile?: { handle?: string };
-				transport?: { output?: 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"} @${
@@ -214,18 +218,20 @@ function BlocksRoute() {
 	}
 
 	return (
-		<main className={pageWrapClass}>
-			<section className={heroShellClass}>
-				<div>
-					<p className={eyebrowClass}>blocks</p>
-					<h2 className={heroTitleClass}>
-						Maintain a clean blocklist locally.
-					</h2>
-					<p className={heroCopyClass}>{subtitle}</p>
+		<>
+			<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={cx(heroControlsClass, heroControlsBlocksClass)}>
+				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
 					<select
-						className={cx(textFieldClass, textFieldShortClass)}
+						className={cx(selectFieldClass, textFieldShortClass)}
 						disabled={!isReady}
 						onChange={(event) => setAccountId(event.target.value)}
 						value={accountId}
@@ -237,14 +243,18 @@ function BlocksRoute() {
 						))}
 					</select>
 					<input
-						className={cx(textFieldClass, textFieldWideClass)}
+						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={actionButtonClass}
+						className={primaryButtonClass}
 						disabled={!hasAccountId || isSubmitting || !search.trim()}
 						onClick={() => void submit("blockProfile", search)}
 						type="button"
@@ -252,29 +262,31 @@ function BlocksRoute() {
 						{isSubmitting ? "Working..." : "Block"}
 					</button>
 				</div>
-			</section>
+			</header>
 
-			{message ? <p className={timestampClass}>{message}</p> : null}
+			{message ? <p className={statusCopyClass}>{message}</p> : null}
 			{error ? <p className={errorCopyClass}>{error}</p> : null}
 
 			{matches.length > 0 ? (
-				<section className={stackGridClass}>
+				<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={cx(contentCardClass, "block-card")}
-							key={match.profile.id}
-						>
-							<div className={cardHeaderClass}>
-								<div className={identityBlockClass}>
-									<AvatarChip
-										avatarUrl={match.profile.avatarUrl}
-										hue={match.profile.avatarHue}
-										name={match.profile.displayName}
-										profileId={match.profile.id}
-									/>
-									<div>
-										<strong>{match.profile.displayName}</strong>
-										<div className={metaRowClass}>
+						<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>
@@ -283,43 +295,52 @@ function BlocksRoute() {
 											</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>
-								<button
-									className={actionButtonClass}
-									onClick={() =>
-										void submit(
-											match.isBlocked ? "unblockProfile" : "blockProfile",
-											match.profile.id,
-										)
-									}
-									type="button"
-								>
-									{match.isBlocked ? "Unblock" : "Block"}
-								</button>
+								<p className="text-[14px] leading-[1.4] text-[var(--ink)]">
+									{match.profile.bio}
+								</p>
 							</div>
-							<p className="mt-2.5">{match.profile.bio}</p>
 						</article>
 					))}
 				</section>
 			) : null}
 
-			<section className={stackGridClass}>
+			<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={cx(contentCardClass, "block-card")}
+						className={blockRowClass}
 						key={item.accountId + item.profile.id}
 					>
-						<div className={cardHeaderClass}>
-							<div className={identityBlockClass}>
-								<AvatarChip
-									avatarUrl={item.profile.avatarUrl}
-									hue={item.profile.avatarHue}
-									name={item.profile.displayName}
-									profileId={item.profile.id}
-								/>
-								<div>
-									<strong>{item.profile.displayName}</strong>
-									<div className={metaRowClass}>
+						<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>
@@ -330,23 +351,27 @@ function BlocksRoute() {
 										</span>
 									</div>
 								</div>
+								<button
+									className={secondaryButtonClass}
+									onClick={() => void submit("unblockProfile", item.profile.id)}
+									type="button"
+								>
+									Unblock
+								</button>
 							</div>
-							<button
-								className={actionButtonClass}
-								onClick={() => void submit("unblockProfile", item.profile.id)}
-								type="button"
-							>
-								Unblock
-							</button>
+							{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>
-						<p className="mt-2.5">{item.profile.bio}</p>
-						<p className={timestampClass}>
-							Blocked {new Date(item.blockedAt).toLocaleString()} ·{" "}
-							{item.source}
-						</p>
 					</article>
 				))}
 			</section>
-		</main>
+		</>
 	);
 }

package/src/routes/dms.tsx

@@ -1,40 +1,57 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { DmWorkspace } from "#/components/DmWorkspace";
+import { FeedEmpty, FeedError, FeedLoading } from "#/components/FeedState";
+import { SyncNowButton } from "#/components/SyncNowButton";
+import {
+	fetchQueryEnvelope,
+	fetchQueryResponse,
+	postAction,
+} from "#/lib/api-client";
 import type {
 	DmConversationItem,
 	DmMessageItem,
 	QueryEnvelope,
-	QueryResponse,
 	ReplyFilter,
 } from "#/lib/types";
 import {
 	cx,
-	dmPageClass,
-	eyebrowClass,
-	heroControlsClass,
-	heroControlsDmClass,
-	heroCopyClass,
-	heroShellClass,
-	heroShellDmClass,
-	heroTitleClass,
-	pageWrapClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
 	segmentActiveClass,
 	segmentClass,
 	segmentedClass,
+	tabButtonActiveClass,
+	tabButtonClass,
+	tabButtonIndicatorClass,
+	tabStripClass,
 	textFieldClass,
 	textFieldShortClass,
-	textFieldWideClass,
 } from "#/lib/ui";
 
 export const Route = createFileRoute("/dms")({
 	component: DmsRoute,
 });
 
+const TABS: Array<{ value: ReplyFilter; label: string }> = [
+	{ value: "all", label: "All" },
+	{ value: "unreplied", label: "Unreplied" },
+	{ value: "replied", label: "Replied" },
+];
+
 function DmsRoute() {
 	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
 	const [items, setItems] = useState<DmConversationItem[]>([]);
 	const [messages, setMessages] = useState<DmMessageItem[]>([]);
+	const [loadedConversationId, setLoadedConversationId] = useState<
+		string | undefined
+	>();
 	const [selectedConversationId, setSelectedConversationId] = useState<
 		string | undefined
 	>();
@@ -45,15 +62,20 @@ function DmsRoute() {
 	const [search, setSearch] = useState("");
 	const [replyDraft, setReplyDraft] = useState("");
 	const [refreshTick, setRefreshTick] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	async function loadStatus() {
+		setMeta(await fetchQueryEnvelope());
+	}
 
 	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
+		void loadStatus();
 	}, []);
 
 	useEffect(() => {
 		const controller = new AbortController();
+		let active = true;
 		const url = new URL("/api/query", window.location.origin);
 		url.searchParams.set("resource", "dms");
 		url.searchParams.set("replyFilter", replyFilter);
@@ -68,12 +90,15 @@ function DmsRoute() {
 			url.searchParams.set("search", search.trim());
 		}
 
-		fetch(url, { signal: controller.signal })
-			.then((response) => response.json())
-			.then((data: QueryResponse) => {
+		setError(null);
+		setLoading(true);
+		fetchQueryResponse(url, { signal: controller.signal })
+			.then((data) => {
+				if (!active) return;
 				const conversations = data.items as DmConversationItem[];
 				const nextSelected =
 					data.selectedConversation?.conversation.id ?? conversations[0]?.id;
+				setLoadedConversationId(data.selectedConversation?.conversation.id);
 				setItems(conversations);
 				setSelectedConversationId((current) => {
 					if (!current) return nextSelected;
@@ -85,14 +110,31 @@ function DmsRoute() {
 				});
 				setMessages(data.selectedConversation?.messages ?? []);
 			})
-			.catch((error: unknown) => {
-				if (error instanceof DOMException && error.name === "AbortError") {
+			.catch((fetchError: unknown) => {
+				if (
+					fetchError instanceof DOMException &&
+					fetchError.name === "AbortError"
+				) {
 					return;
 				}
-				throw error;
+				if (!active) return;
+				setError(
+					fetchError instanceof Error
+						? fetchError.message
+						: "Messages unavailable",
+				);
+				setItems([]);
+				setMessages([]);
+				setLoadedConversationId(undefined);
+			})
+			.finally(() => {
+				if (active) {
+					setLoading(false);
+				}
 			});
 
 		return () => {
+			active = false;
 			controller.abort();
 		};
 	}, [
@@ -107,10 +149,17 @@ function DmsRoute() {
 
 	const selectedConversation =
 		items.find((item) => item.id === selectedConversationId) ?? null;
+	const switchingConversation =
+		loading &&
+		Boolean(
+			selectedConversationId &&
+			loadedConversationId &&
+			selectedConversationId !== loadedConversationId,
+		);
 
 	const subtitle = useMemo(() => {
 		if (!meta) return "Loading direct messages...";
-		return `${meta.stats.dms} conversations cached locally · filter by follower load or derived influence score`;
+		return `${String(meta.stats.dms)} conversations cached locally`;
 	}, [meta]);
 
 	async function replyToConversation(conversationId: string) {
@@ -162,14 +211,10 @@ function DmsRoute() {
 		);
 
 		try {
-			await fetch("/api/action", {
-				method: "POST",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify({
-					kind: "replyDm",
-					conversationId,
-					text,
-				}),
+			await postAction({
+				kind: "replyDm",
+				conversationId,
+				text,
 			});
 
 			setSelectedConversationId(conversationId);
@@ -182,71 +227,111 @@ function DmsRoute() {
 		}
 	}
 
+	function refreshLocalView() {
+		setRefreshTick((value) => value + 1);
+		void loadStatus();
+	}
+
 	return (
-		<main className={pageWrapClass}>
-			<div className={dmPageClass}>
-				<section className={cx(heroShellClass, heroShellDmClass)}>
-					<div>
-						<p className={eyebrowClass}>direct messages</p>
-						<h2 className={heroTitleClass}>
-							Influence, bio, and reply state. No hunting.
-						</h2>
-						<p className={heroCopyClass}>{subtitle}</p>
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>Messages</h1>
+						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
-					<div className={cx(heroControlsClass, heroControlsDmClass)}>
+					<SyncNowButton
+						kind="dms"
+						label="Sync DMs"
+						onSynced={refreshLocalView}
+					/>
+				</div>
+				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
+					<label className={cx(searchFieldShellClass, "flex-1 min-w-[200px]")}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
 						<input
-							className={cx(textFieldClass, textFieldWideClass)}
+							className={searchFieldInputClass}
 							onChange={(event) => setSearch(event.target.value)}
 							placeholder="Search DMs"
 							value={search}
 						/>
-						<input
-							className={cx(textFieldClass, textFieldShortClass)}
-							inputMode="numeric"
-							onChange={(event) => setMinFollowers(event.target.value)}
-							placeholder="Min followers"
-							value={minFollowers}
-						/>
-						<input
-							className={cx(textFieldClass, textFieldShortClass)}
-							inputMode="numeric"
-							onChange={(event) => setMinInfluenceScore(event.target.value)}
-							placeholder="Min score"
-							value={minInfluenceScore}
-						/>
-						<div className={segmentedClass}>
-							{(["recent", "influence"] as const).map((value) => (
-								<button
-									key={value}
-									className={cx(
-										segmentClass,
-										value === sort && segmentActiveClass,
-									)}
-									onClick={() => setSort(value)}
-									type="button"
-								>
-									{value}
-								</button>
-							))}
-						</div>
-						<div className={segmentedClass}>
-							{(["all", "replied", "unreplied"] as const).map((value) => (
-								<button
-									key={value}
-									className={cx(
-										segmentClass,
-										value === replyFilter && segmentActiveClass,
-									)}
-									onClick={() => setReplyFilter(value)}
-									type="button"
-								>
-									{value}
-								</button>
-							))}
-						</div>
+					</label>
+					<input
+						className={cx(textFieldClass, textFieldShortClass)}
+						inputMode="numeric"
+						onChange={(event) => setMinFollowers(event.target.value)}
+						placeholder="Min followers"
+						value={minFollowers}
+					/>
+					<input
+						className={cx(textFieldClass, textFieldShortClass)}
+						inputMode="numeric"
+						onChange={(event) => setMinInfluenceScore(event.target.value)}
+						placeholder="Min score"
+						value={minInfluenceScore}
+					/>
+					<div className={segmentedClass}>
+						{(["recent", "influence"] as const).map((value) => (
+							<button
+								key={value}
+								className={cx(
+									segmentClass,
+									value === sort && segmentActiveClass,
+								)}
+								onClick={() => setSort(value)}
+								type="button"
+							>
+								{value}
+							</button>
+						))}
 					</div>
-				</section>
+				</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>
 
+			{loading && (items.length === 0 || switchingConversation) ? (
+				<FeedLoading
+					detail="Reading local conversations and reply state"
+					label="Loading messages"
+				/>
+			) : 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 messages"
+				/>
+			) : items.length === 0 ? (
+				<FeedEmpty
+					detail="Sync DMs or broaden the filters to find a conversation."
+					label="No conversations in this view"
+				/>
+			) : (
 				<DmWorkspace
 					conversations={items}
 					onReplyDraftChange={setReplyDraft}
@@ -256,7 +341,7 @@ function DmsRoute() {
 					selectedConversation={selectedConversation}
 					selectedMessages={messages}
 				/>
-			</div>
-		</main>
+			)}
+		</>
 	);
 }