birdclaw 0.8.3 → 0.8.4

package/src/components/SavedTimelineView.tsx

@@ -1,155 +0,0 @@
-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 { useTimelineRouteData } from "#/components/useTimelineRouteData";
-import { ConversationSurfaceScope } from "#/lib/conversation-surface";
-import {
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-} from "#/lib/ui";
-
-interface SavedTimelineViewProps {
-	filter: "liked" | "bookmarked";
-	eyebrow: string;
-	title: string;
-	loadingLabel: string;
-	searchPlaceholder: string;
-}
-
-const TITLES: Record<SavedTimelineViewProps["filter"], string> = {
-	liked: "Likes",
-	bookmarked: "Bookmarks",
-};
-
-export function SavedTimelineView({
-	filter,
-	title,
-	loadingLabel,
-	searchPlaceholder,
-}: SavedTimelineViewProps) {
-	const [search, setSearch] = useState("");
-	const {
-		meta,
-		items,
-		loading,
-		error,
-		retry,
-		refreshLocalView,
-		replyToTweet,
-		hasMore,
-		loadingMore,
-		loadMore,
-	} = useTimelineRouteData({
-		resource: "home",
-		search,
-		errorFallback: `${TITLES[filter]} unavailable`,
-		likedOnly: filter === "liked",
-		bookmarkedOnly: filter === "bookmarked",
-	});
-
-	const subtitle = useMemo(() => {
-		if (!meta) {
-			return items.length > 0
-				? `${String(items.length)} visible`
-				: loadingLabel;
-		}
-		return `${String(items.length)} visible · ${meta.transport.statusText}`;
-	}, [items.length, loadingLabel, meta]);
-
-	const syncKind = filter === "liked" ? "likes" : "bookmarks";
-
-	return (
-		<>
-			<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>
-					<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={searchFieldInputClass}
-							onChange={(event) => setSearch(event.target.value)}
-							placeholder={searchPlaceholder}
-							value={search}
-						/>
-					</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}
-							item={item}
-							onReply={replyToTweet}
-							showReplyControls={false}
-						/>
-					))}
-					{!loading && !error && hasMore ? (
-						<div className="flex justify-center py-4">
-							<button
-								className="rounded-full bg-[var(--accent)] px-5 py-1.5 text-[14px] font-bold text-white disabled:opacity-60"
-								disabled={loadingMore}
-								onClick={loadMore}
-								type="button"
-							>
-								{loadingMore ? "Loading…" : "Load more"}
-							</button>
-						</div>
-					) : null}
-				</section>
-			</ConversationSurfaceScope>
-		</>
-	);
-}

package/src/components/SmartTimestamp.tsx

@@ -1,72 +0,0 @@
-import { useSyncExternalStore } from "react";
-import {
-	formatExactTimestamp,
-	formatShortTimestamp,
-	formatSmartTimestamp,
-} from "#/lib/present";
-
-const CLOCK_INTERVAL_MS = 30_000;
-
-type ClockSnapshot = number | null;
-
-const listeners = new Set<() => void>();
-let currentNow = Date.now();
-let clockInterval: ReturnType<typeof setInterval> | null = null;
-
-function updateClock() {
-	currentNow = Date.now();
-	for (const listener of listeners) listener();
-}
-
-function subscribeToClock(listener: () => void) {
-	listeners.add(listener);
-
-	if (clockInterval === null) {
-		currentNow = Date.now();
-		clockInterval = setInterval(updateClock, CLOCK_INTERVAL_MS);
-	}
-
-	return () => {
-		listeners.delete(listener);
-		if (listeners.size === 0 && clockInterval !== null) {
-			clearInterval(clockInterval);
-			clockInterval = null;
-		}
-	};
-}
-
-function getClockSnapshot(): ClockSnapshot {
-	return currentNow;
-}
-
-function getServerClockSnapshot(): ClockSnapshot {
-	return null;
-}
-
-export function SmartTimestamp({
-	className,
-	value,
-}: {
-	className?: string;
-	value: string;
-}) {
-	const now = useSyncExternalStore(
-		subscribeToClock,
-		getClockSnapshot,
-		getServerClockSnapshot,
-	);
-	const exactTimestamp = formatExactTimestamp(value);
-
-	return (
-		<time
-			aria-label={exactTimestamp}
-			className={className}
-			dateTime={value}
-			title={exactTimestamp}
-		>
-			{now === null
-				? formatShortTimestamp(value)
-				: formatSmartTimestamp(value, now)}
-		</time>
-	);
-}

package/src/components/SyncNowButton.tsx

@@ -1,140 +0,0 @@
-import { RefreshCw } from "lucide-react";
-import { 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,
-	WebSyncOptions,
-	WebSyncResponse,
-} from "#/lib/web-sync";
-import {
-	defaultAccountId as getDefaultAccountId,
-	setStoredAccountId,
-	useSelectedAccountId,
-} from "./account-selection";
-
-interface SyncNowButtonProps {
-	kind: WebSyncKind;
-	label: string;
-	accounts?: AccountRecord[];
-	onSynced: (result: WebSyncResponse) => void;
-	showAccountPicker?: boolean;
-	syncOptions?: WebSyncOptions;
-}
-
-export function SyncNowButton({
-	kind,
-	label,
-	accounts,
-	onSynced,
-	showAccountPicker = false,
-	syncOptions,
-}: SyncNowButtonProps) {
-	const [syncing, setSyncing] = useState(false);
-	const [message, setMessage] = useState<string | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const accountList = accounts ?? [];
-	const globalAccountId = useSelectedAccountId(accounts);
-	const defaultAccountId = useMemo(
-		() => getDefaultAccountId(accounts),
-		[accounts],
-	);
-	const accountId = globalAccountId ?? defaultAccountId;
-	const accountAwareSync = kind !== "dms";
-	const waitingForAccount =
-		accountAwareSync &&
-		accounts === undefined &&
-		(showAccountPicker || kind !== "timeline");
-	const birdOnlyWrongAccount =
-		!accountAwareSync &&
-		accountId !== undefined &&
-		defaultAccountId !== undefined &&
-		accountId !== defaultAccountId;
-	const disabled = syncing || waitingForAccount || birdOnlyWrongAccount;
-	const statusMessage = birdOnlyWrongAccount
-		? "Switch to default to sync"
-		: waitingForAccount
-			? "Loading account"
-			: (error ?? message ?? "");
-
-	function selectAccount(accountId: string) {
-		setStoredAccountId(accountId);
-	}
-
-	async function syncNow() {
-		setSyncing(true);
-		setError(null);
-		setMessage(null);
-		try {
-			const data = await postSync(
-				kind,
-				accountAwareSync ? accountId : undefined,
-				syncOptions,
-			);
-			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">
-			{showAccountPicker && accountAwareSync && accountList.length > 1 ? (
-				<select
-					aria-label="Sync account"
-					className={cx(selectFieldClass, "h-9 w-[132px]")}
-					disabled={syncing}
-					onChange={(event) => selectAccount(event.target.value)}
-					value={accountId ?? ""}
-				>
-					{accountList.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:opacity-65",
-					syncing && "text-[var(--ink-soft)]",
-					birdOnlyWrongAccount
-						? "disabled:cursor-not-allowed"
-						: "disabled:cursor-wait",
-				)}
-				aria-label={
-					birdOnlyWrongAccount
-						? `${label}: default account only`
-						: syncing
-							? `${label}: syncing`
-							: label
-				}
-				disabled={disabled}
-				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"
-			>
-				{statusMessage}
-			</span>
-		</div>
-	);
-}

package/src/components/ThemeSlider.tsx

@@ -1,80 +0,0 @@
-import { Monitor, Moon, Sun } from "lucide-react";
-import type { MouseEvent } from "react";
-import { type ThemeValue, useTheme } from "#/lib/theme";
-import {
-	startThemeTransition,
-	type ThemeTransitionContext,
-} from "#/lib/theme-transition";
-import { cx } from "#/lib/ui";
-
-const THEME_OPTIONS = [
-	{ key: "system", icon: Monitor, label: "System default" },
-	{ key: "light", icon: Sun, label: "Light theme" },
-	{ key: "dark", icon: Moon, label: "Dark theme" },
-] as const satisfies Array<{
-	key: ThemeValue;
-	icon: typeof Sun;
-	label: string;
-}>;
-
-function themeIndex(theme: ThemeValue) {
-	return THEME_OPTIONS.findIndex((option) => option.key === theme);
-}
-
-export function ThemeSlider({ compact = false }: { compact?: boolean }) {
-	const { isReady, theme, setTheme } = useTheme();
-	const activeIndex = Math.max(themeIndex(theme), 0);
-	const activeOption = THEME_OPTIONS[activeIndex];
-	const nextOption = THEME_OPTIONS[(activeIndex + 1) % THEME_OPTIONS.length];
-	const Icon = activeOption.icon;
-
-	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-		const context: ThemeTransitionContext = {
-			element: event.currentTarget,
-			pointerClientX: event.clientX,
-			pointerClientY: event.clientY,
-		};
-
-		startThemeTransition({
-			nextTheme: nextOption.key,
-			currentTheme: theme,
-			setTheme,
-			context,
-		});
-	};
-
-	return (
-		<div
-			className={cx(
-				"theme-toggle-shell flex justify-center",
-				compact
-					? "shrink-0"
-					: "px-1 py-1 min-[1100px]:justify-start min-[1100px]:px-2",
-			)}
-			title={`${activeOption.label}; click for ${nextOption.label}`}
-		>
-			<button
-				type="button"
-				className={cx(
-					"theme-toggle-button inline-flex items-center justify-center rounded-full border bg-transparent text-[var(--ink-soft)] transition-[background,border-color,color,transform,box-shadow] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_38%,var(--line))] 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)]",
-					compact
-						? "size-8 border-transparent"
-						: "size-11 border-[var(--line)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_44%,transparent)]",
-				)}
-				onClick={handleClick}
-				aria-label={`Theme: ${activeOption.label}. Switch to ${nextOption.label}.`}
-				data-testid="theme-toggle"
-				disabled={!isReady}
-			>
-				<Icon
-					className={cx(
-						"theme-toggle-icon",
-						compact ? "size-[17px]" : "size-[19px]",
-					)}
-					strokeWidth={2}
-					aria-hidden="true"
-				/>
-			</button>
-		</div>
-	);
-}