birdclaw 0.4.1 → 0.5.1

package/src/components/ProfilePreview.tsx

@@ -9,6 +9,7 @@ import {
 	profilePreviewHandleClass,
 	profilePreviewHeaderClass,
 	profilePreviewMetaClass,
+	profilePreviewNameClass,
 	profilePreviewTriggerClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
@@ -40,12 +41,16 @@ export function ProfilePreview({
 						name={profile.displayName}
 						profileId={profile.id}
 					/>
-					<span>
-						<strong>{profile.displayName}</strong>
+					<span className="flex min-w-0 flex-col">
+						<span className={profilePreviewNameClass}>
+							{profile.displayName}
+						</span>
 						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
 					</span>
 				</span>
-				<span className={profilePreviewBioClass}>{profile.bio}</span>
+				{profile.bio ? (
+					<span className={profilePreviewBioClass}>{profile.bio}</span>
+				) : null}
 				<span className={profilePreviewMetaClass}>
 					{formatCompactNumber(profile.followersCount)} followers
 				</span>

package/src/components/SavedTimelineView.tsx

@@ -1,18 +1,24 @@
-import { useEffect, useMemo, useState } from "react";
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+	FeedEmpty,
+	FeedError,
+	FeedLoading,
+	TweetSkeletonRows,
+} from "#/components/FeedState";
+import { SyncNowButton } from "#/components/SyncNowButton";
 import { TimelineCard } from "#/components/TimelineCard";
-import type { QueryEnvelope, QueryResponse, TimelineItem } from "#/lib/types";
+import { useTimelineRouteData } from "#/components/useTimelineRouteData";
+import { ConversationSurfaceScope } from "#/lib/conversation-surface";
 import {
-	cx,
-	eyebrowClass,
-	feedPageClass,
-	heroControlsClass,
-	heroCopyClass,
-	heroShellClass,
-	heroTitleClass,
-	pageWrapClass,
-	textFieldClass,
-	textFieldWideClass,
-	timelineLaneClass,
+	feedClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
 } from "#/lib/ui";
 
 interface SavedTimelineViewProps {
@@ -23,83 +29,95 @@ interface SavedTimelineViewProps {
 	searchPlaceholder: string;
 }
 
+const TITLES: Record<SavedTimelineViewProps["filter"], string> = {
+	liked: "Likes",
+	bookmarked: "Bookmarks",
+};
+
 export function SavedTimelineView({
 	filter,
-	eyebrow,
 	title,
 	loadingLabel,
 	searchPlaceholder,
 }: SavedTimelineViewProps) {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
 	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(filter, "true");
-		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[]));
-	}, [filter, refreshTick, search]);
+	const { meta, items, loading, error, retry, refreshLocalView, replyToTweet } =
+		useTimelineRouteData({
+			resource: "home",
+			search,
+			errorFallback: `${TITLES[filter]} unavailable`,
+			likedOnly: filter === "liked",
+			bookmarkedOnly: filter === "bookmarked",
+		});
 
 	const subtitle = useMemo(() => {
 		if (!meta) {
-			return items.length > 0 ? `${items.length} visible` : loadingLabel;
+			return items.length > 0
+				? `${String(items.length)} visible`
+				: loadingLabel;
 		}
-		return `${items.length} visible · ${meta.transport.statusText}`;
+		return `${String(items.length)} visible · ${meta.transport.statusText}`;
 	}, [items.length, loadingLabel, 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);
-	}
+	const syncKind = filter === "liked" ? "likes" : "bookmarks";
 
 	return (
-		<main className={pageWrapClass}>
-			<div className={feedPageClass}>
-				<section className={heroShellClass}>
-					<div>
-						<p className={eyebrowClass}>{eyebrow}</p>
-						<h2 className={heroTitleClass}>{title}</h2>
-						<p className={heroCopyClass}>{subtitle}</p>
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>{TITLES[filter]}</h1>
+						<p className={pageSubtitleClass}>{title}</p>
+						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
-					<div className={heroControlsClass}>
+					<SyncNowButton
+						accounts={meta?.accounts}
+						kind={syncKind}
+						label={filter === "liked" ? "Sync likes" : "Sync bookmarks"}
+						onSynced={refreshLocalView}
+					/>
+				</div>
+				<div className="px-4 pb-3">
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
 						<input
-							className={cx(textFieldClass, textFieldWideClass)}
+							className={searchFieldInputClass}
 							onChange={(event) => setSearch(event.target.value)}
 							placeholder={searchPlaceholder}
 							value={search}
 						/>
-					</div>
-				</section>
-
-				<section className={timelineLaneClass}>
+					</label>
+				</div>
+			</header>
+			<ConversationSurfaceScope>
+				<section className={feedClass}>
+					{loading ? (
+						<FeedLoading
+							detail={`Reading local ${TITLES[filter].toLowerCase()}`}
+							label={loadingLabel}
+						>
+							<TweetSkeletonRows />
+						</FeedLoading>
+					) : error ? (
+						<FeedError
+							action={
+								<button
+									className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
+									onClick={retry}
+									type="button"
+								>
+									Retry
+								</button>
+							}
+							message={error}
+							title={`Could not load ${TITLES[filter].toLowerCase()}`}
+						/>
+					) : items.length === 0 ? (
+						<FeedEmpty
+							detail="Sync this collection or broaden the search."
+							label="Nothing saved here yet"
+						/>
+					) : null}
 					{items.map((item) => (
 						<TimelineCard
 							key={item.id}
@@ -109,7 +127,7 @@ export function SavedTimelineView({
 						/>
 					))}
 				</section>
-			</div>
-		</main>
+			</ConversationSurfaceScope>
+		</>
 	);
 }

package/src/components/SyncNowButton.tsx

@@ -0,0 +1,105 @@
+import { RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { postSync } from "#/lib/api-client";
+import type { AccountRecord } from "#/lib/types";
+import { cx, selectFieldClass } from "#/lib/ui";
+import type { WebSyncKind, WebSyncResponse } from "#/lib/web-sync";
+
+interface SyncNowButtonProps {
+	kind: WebSyncKind;
+	label: string;
+	accounts?: AccountRecord[];
+	onSynced: (result: WebSyncResponse) => void;
+}
+
+export function SyncNowButton({
+	kind,
+	label,
+	accounts = [],
+	onSynced,
+}: SyncNowButtonProps) {
+	const [syncing, setSyncing] = useState(false);
+	const [message, setMessage] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [selectedAccountId, setSelectedAccountId] = useState<
+		string | undefined
+	>();
+	const defaultAccountId = useMemo(
+		() => accounts.find((account) => account.isDefault)?.id ?? accounts[0]?.id,
+		[accounts],
+	);
+	const accountId = selectedAccountId ?? defaultAccountId;
+
+	useEffect(() => {
+		if (!accounts.length) {
+			setSelectedAccountId(undefined);
+			return;
+		}
+		if (!accountId || !accounts.some((account) => account.id === accountId)) {
+			setSelectedAccountId(defaultAccountId);
+		}
+	}, [accountId, accounts, defaultAccountId]);
+
+	async function syncNow() {
+		setSyncing(true);
+		setError(null);
+		setMessage(null);
+		try {
+			const data = await postSync(kind, accountId);
+			if (!data.ok) throw new Error(data.summary);
+			setMessage(data.summary);
+			onSynced(data);
+		} catch (syncError) {
+			setError(syncError instanceof Error ? syncError.message : "Sync failed");
+		} finally {
+			setSyncing(false);
+		}
+	}
+
+	return (
+		<div className="flex shrink-0 items-center gap-2">
+			{accounts.length > 1 ? (
+				<select
+					aria-label="Sync account"
+					className={cx(selectFieldClass, "h-9 w-[132px]")}
+					disabled={syncing}
+					onChange={(event) => setSelectedAccountId(event.target.value)}
+					value={accountId ?? ""}
+				>
+					{accounts.map((account) => (
+						<option key={account.id} value={account.id}>
+							{account.handle}
+						</option>
+					))}
+				</select>
+			) : null}
+			<button
+				type="button"
+				className={cx(
+					"inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-semibold text-[var(--ink)] transition-[background,border-color,color,transform] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] hover:bg-[var(--accent-soft)] hover:text-[var(--accent)] active:scale-[0.98] disabled:cursor-wait disabled:opacity-65",
+					syncing && "text-[var(--ink-soft)]",
+				)}
+				aria-label={syncing ? `${label}: syncing` : label}
+				disabled={syncing}
+				onClick={syncNow}
+			>
+				<RefreshCw
+					className={cx("size-4", syncing && "animate-spin")}
+					strokeWidth={2}
+				/>
+				<span className="hidden sm:inline">
+					{syncing ? "Syncing..." : label}
+				</span>
+			</button>
+			<span
+				className={cx(
+					"hidden max-w-[190px] truncate text-[12px] sm:inline",
+					error ? "text-[var(--alert)]" : "text-[var(--ink-soft)]",
+				)}
+				role="status"
+			>
+				{error ?? message ?? ""}
+			</span>
+		</div>
+	);
+}

package/src/components/ThemeSlider.tsx

@@ -1,6 +1,5 @@
 import { Monitor, Moon, Sun } from "lucide-react";
-import type { CSSProperties, MouseEvent } from "react";
-import { useMemo } from "react";
+import type { MouseEvent } from "react";
 import { type ThemeValue, useTheme } from "#/lib/theme";
 import {
 	startThemeTransition,
@@ -18,67 +17,18 @@ const THEME_OPTIONS = [
 	label: string;
 }>;
 
-const ACTIVE_ITEM_WIDTH_PX = 30;
-const GAP_PX = 6;
-const CONTAINER_PADDING_PX = 6;
-const INDICATOR_SIZE_PX = 30;
-const INDICATOR_OVERHANG_PX = (INDICATOR_SIZE_PX - ACTIVE_ITEM_WIDTH_PX) / 2;
-const INDICATOR_BASE_OFFSET_PX = CONTAINER_PADDING_PX - INDICATOR_OVERHANG_PX;
-
-function toPx(value: number) {
-	return `${String(value)}px`;
-}
-
 export function ThemeSlider() {
-	const { isReady, theme, resolvedTheme, setTheme } = useTheme();
-
-	const activeIndex = useMemo(() => {
-		const index = THEME_OPTIONS.findIndex((option) => option.key === theme);
-		return index === -1 ? 0 : index;
-	}, [theme]);
-
-	const indicatorOffset = activeIndex * (ACTIVE_ITEM_WIDTH_PX + GAP_PX);
-	const indicatorStyle = useMemo<CSSProperties>(
-		() => ({
-			left: toPx(INDICATOR_BASE_OFFSET_PX),
-			transform: `translate(${toPx(indicatorOffset)}, -50%)`,
-		}),
-		[indicatorOffset],
-	);
-	const sliderStyle = useMemo<CSSProperties>(
-		() => ({
-			gridTemplateColumns: `repeat(${String(THEME_OPTIONS.length)}, ${toPx(ACTIVE_ITEM_WIDTH_PX)})`,
-			columnGap: toPx(GAP_PX),
-			padding: `0 ${toPx(CONTAINER_PADDING_PX)}`,
-			width: toPx(
-				THEME_OPTIONS.length * ACTIVE_ITEM_WIDTH_PX +
-					(THEME_OPTIONS.length - 1) * GAP_PX +
-					CONTAINER_PADDING_PX * 2,
-			),
-		}),
-		[],
-	);
+	const { isReady, theme, setTheme } = useTheme();
 
 	return (
 		<fieldset
-			className="theme-slider-shell m-0 border-0 p-0"
+			className="theme-slider-shell m-0 flex justify-center border-0 px-2 py-1 min-[1100px]:justify-start min-[1100px]:px-3"
 			aria-label="Theme selector"
 		>
-			<div
-				className="theme-slider relative grid h-[42px] place-items-center overflow-hidden rounded-full border border-[var(--line)] bg-[color:color-mix(in_srgb,var(--panel-strong)_86%,transparent)] shadow-[inset_0_1px_0_color-mix(in_srgb,white_40%,transparent)] transition-[background,border-color] duration-180"
-				style={sliderStyle}
-			>
-				<div
-					className={cx(
-						"theme-slider-indicator pointer-events-none absolute top-1/2 z-0 size-[30px] rounded-full border border-[color:color-mix(in_srgb,var(--line-strong)_85%,transparent)] bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.6),transparent_58%),var(--panel-strong)] shadow-[0_10px_24px_var(--shadow),inset_0_1px_0_rgba(255,255,255,0.35)] transition-[transform,background,border-color,box-shadow] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)]",
-						resolvedTheme === "dark" &&
-							"theme-slider-indicator-dark shadow-[0_10px_24px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.08)]",
-					)}
-					style={indicatorStyle}
-				/>
+			<div className="theme-slider flex flex-col items-center gap-1.5 min-[1100px]:flex-row">
 				{THEME_OPTIONS.map((option, index) => {
 					const Icon = option.icon;
-					const isActive = index === activeIndex;
+					const isActive = option.key === theme || (index === 0 && !theme);
 
 					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
 						if (isActive) return;
@@ -102,8 +52,9 @@ export function ThemeSlider() {
 							key={option.key}
 							type="button"
 							className={cx(
-								"theme-slider-button relative z-[1] inline-flex size-[30px] items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[color,transform] duration-160 hover:-translate-y-px hover:text-[var(--ink)] disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
-								isActive && "theme-slider-button-active text-[var(--ink)]",
+								"theme-slider-button inline-flex size-9 items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[background,color,transform] duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
+								isActive &&
+									"theme-slider-button-active bg-[var(--bg-active)] text-[var(--ink)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_72%,transparent)]",
 							)}
 							onClick={handleClick}
 							aria-label={option.label}
@@ -112,8 +63,8 @@ export function ThemeSlider() {
 							disabled={!isReady}
 						>
 							<Icon
-								className="theme-slider-icon size-[15px]"
-								strokeWidth={1.8}
+								className="theme-slider-icon size-[17px]"
+								strokeWidth={isActive ? 2.1 : 1.8}
 							/>
 						</button>
 					);