birdclaw 0.8.3 → 0.8.5

package/src/components/AccountSwitcher.tsx

@@ -1,178 +0,0 @@
-import { Check, ChevronDown } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
-import type { ReactNode } from "react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { fetchQueryEnvelope } from "#/lib/api-client";
-import { queryKeys } from "#/lib/query-client";
-import type { AccountRecord } from "#/lib/types";
-import { cx } from "#/lib/ui";
-import { AvatarChip } from "./AvatarChip";
-import { setStoredAccountId, useSelectedAccountId } from "./account-selection";
-
-function hueForAccount(account: AccountRecord) {
-	let hash = 0;
-	const value = account.handle || account.name || account.id;
-	for (const character of value) {
-		hash = (hash * 31 + character.charCodeAt(0)) % 360;
-	}
-	return hash;
-}
-
-function accountLabel(account: AccountRecord) {
-	return account.handle || account.name || account.id;
-}
-
-function avatarName(account: AccountRecord) {
-	return account.name || account.handle || account.id;
-}
-
-export function AccountSwitcher({ action }: { action?: ReactNode } = {}) {
-	const [open, setOpen] = useState(false);
-	const switcherRef = useRef<HTMLDivElement>(null);
-	const statusQuery = useQuery({
-		queryKey: queryKeys.status,
-		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
-	});
-	const accounts = statusQuery.data?.accounts ?? [];
-	const selectedAccountId = useSelectedAccountId(accounts);
-	const selectedAccount = useMemo(
-		() => accounts.find((account) => account.id === selectedAccountId),
-		[accounts, selectedAccountId],
-	);
-
-	useEffect(() => {
-		if (!open) return;
-
-		const closeOnOutside = (event: PointerEvent) => {
-			if (!switcherRef.current?.contains(event.target as Node)) {
-				setOpen(false);
-			}
-		};
-		const closeOnEscape = (event: KeyboardEvent) => {
-			if (event.key === "Escape") setOpen(false);
-		};
-		window.addEventListener("pointerdown", closeOnOutside);
-		window.addEventListener("keydown", closeOnEscape);
-		return () => {
-			window.removeEventListener("pointerdown", closeOnOutside);
-			window.removeEventListener("keydown", closeOnEscape);
-		};
-	}, [open]);
-
-	if (accounts.length < 2 || !selectedAccount) {
-		return action ? (
-			<div className="flex justify-center px-1 min-[1100px]:justify-start min-[1100px]:px-2">
-				{action}
-			</div>
-		) : null;
-	}
-
-	return (
-		<div ref={switcherRef} className="relative px-1 min-[1100px]:px-2">
-			<div
-				className={cx(
-					"group grid w-full justify-items-center gap-2 text-[var(--ink)] min-[1100px]:flex min-[1100px]:h-11 min-[1100px]:items-center min-[1100px]:justify-start min-[1100px]:gap-1 min-[1100px]:rounded-full min-[1100px]:border min-[1100px]:border-transparent min-[1100px]:bg-transparent min-[1100px]:p-0.5 min-[1100px]:transition-[background,border-color,box-shadow] min-[1100px]:duration-150 min-[1100px]:hover:bg-[var(--bg-hover)]",
-					open &&
-						"min-[1100px]:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] min-[1100px]:bg-[var(--bg-active)] min-[1100px]:shadow-[0_0_0_1px_color-mix(in_srgb,var(--accent)_20%,transparent)]",
-				)}
-			>
-				<button
-					type="button"
-					aria-expanded={open}
-					aria-haspopup="listbox"
-					aria-label={`Active account: ${accountLabel(selectedAccount)}`}
-					className="flex size-11 min-w-0 flex-none items-center justify-center gap-2 rounded-full px-1 py-1 text-left transition-colors duration-150 hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_srgb,var(--accent)_28%,transparent)] min-[1100px]:h-auto min-[1100px]:w-auto min-[1100px]:flex-1 min-[1100px]:justify-start min-[1100px]:hover:bg-transparent"
-					onClick={() => setOpen((value) => !value)}
-				>
-					<AvatarChip
-						avatarUrl={selectedAccount.avatarUrl}
-						hue={selectedAccount.avatarHue ?? hueForAccount(selectedAccount)}
-						name={avatarName(selectedAccount)}
-						profileId={selectedAccount.profileId}
-						size="small"
-					/>
-					<span className="hidden min-w-0 flex-1 flex-col leading-tight min-[1100px]:flex">
-						<span className="truncate text-[14px] font-bold">
-							{accountLabel(selectedAccount)}
-						</span>
-						<span className="truncate text-[11px] font-medium text-[var(--ink-soft)]">
-							active account
-						</span>
-					</span>
-				</button>
-				{action ? (
-					<div className="order-first shrink-0 min-[1100px]:order-none">
-						{action}
-					</div>
-				) : null}
-				<button
-					type="button"
-					aria-expanded={open}
-					aria-haspopup="listbox"
-					aria-label="Switch account"
-					className="hidden size-8 shrink-0 items-center justify-center rounded-full text-[var(--ink-soft)] transition-colors duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_srgb,var(--accent)_28%,transparent)] min-[1100px]:inline-flex"
-					onClick={() => setOpen((value) => !value)}
-				>
-					<ChevronDown
-						className={cx(
-							"size-4 transition-transform duration-150",
-							open && "rotate-180",
-						)}
-						strokeWidth={2.2}
-						aria-hidden="true"
-					/>
-				</button>
-			</div>
-			{open ? (
-				<div
-					role="listbox"
-					aria-label="Active account"
-					className="absolute bottom-[calc(100%+8px)] left-1 z-50 w-[228px] overflow-hidden rounded-2xl border border-[var(--line)] bg-[color:color-mix(in_srgb,var(--bg)_96%,black_4%)] py-1.5 shadow-[0_18px_48px_rgba(0,0,0,.28)] backdrop-blur min-[1100px]:left-2"
-				>
-					{accounts.map((account) => {
-						const selected = account.id === selectedAccount.id;
-						return (
-							<button
-								key={account.id}
-								type="button"
-								role="option"
-								aria-selected={selected}
-								className={cx(
-									"flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors duration-150 hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none",
-									selected && "bg-[var(--accent-soft)]",
-								)}
-								onClick={() => {
-									setStoredAccountId(account.id);
-									setOpen(false);
-								}}
-							>
-								<AvatarChip
-									avatarUrl={account.avatarUrl}
-									hue={account.avatarHue ?? hueForAccount(account)}
-									name={avatarName(account)}
-									profileId={account.profileId}
-									size="small"
-								/>
-								<span className="min-w-0 flex-1">
-									<span className="block truncate text-[14px] font-bold text-[var(--ink)]">
-										{accountLabel(account)}
-									</span>
-									<span className="block truncate text-[12px] text-[var(--ink-soft)]">
-										{account.name || account.id}
-									</span>
-								</span>
-								{selected ? (
-									<Check
-										className="size-4 shrink-0 text-[var(--accent)]"
-										strokeWidth={2.4}
-										aria-hidden="true"
-									/>
-								) : null}
-							</button>
-						);
-					})}
-				</div>
-			) : null}
-		</div>
-	);
-}

package/src/components/AppNav.tsx

@@ -1,118 +0,0 @@
-import { Link, useRouterState } from "@tanstack/react-router";
-import {
-	Bell,
-	Bookmark,
-	CalendarDays,
-	Database,
-	Gauge,
-	Globe2,
-	Heart,
-	Home,
-	Inbox,
-	Link as LinkIcon,
-	Mail,
-	MessagesSquare,
-	ShieldOff,
-	UserSearch,
-} from "lucide-react";
-import {
-	cx,
-	navLinkActiveClass,
-	navLinkClass,
-	navLinkCompactClass,
-	navLinkIconClass,
-	navLinkLabelClass,
-	navLinkLabelCompactClass,
-	sidebarBrandClass,
-	sidebarBrandCopyClass,
-	sidebarBrandCopyCompactClass,
-	sidebarBrandMarkClass,
-	sidebarBrandTaglineClass,
-	sidebarBrandTitleClass,
-	sidebarShellCompactClass,
-	sidebarFooterClass,
-	sidebarNavClass,
-	sidebarShellClass,
-} from "#/lib/ui";
-import { AccountSwitcher } from "./AccountSwitcher";
-import { BirdclawMark } from "./BrandMark";
-import { ThemeSlider } from "./ThemeSlider";
-
-const links = [
-	{ to: "/inbox", label: "Inbox", icon: Inbox },
-	{ to: "/today", label: "Today", icon: CalendarDays },
-	{ to: "/discuss", label: "Discuss", icon: MessagesSquare },
-	{ to: "/profile-analyze", label: "Analyse", icon: UserSearch },
-	{ to: "/network-map", label: "Map", icon: Globe2 },
-	{ to: "/data-sources", label: "Sources", icon: Database },
-	{ to: "/", label: "Home", icon: Home },
-	{ to: "/mentions", label: "Mentions", icon: Bell },
-	{ to: "/likes", label: "Likes", icon: Heart },
-	{ to: "/bookmarks", label: "Bookmarks", icon: Bookmark },
-	{ to: "/links", label: "Links", icon: LinkIcon },
-	{ to: "/rate-limits", label: "Rate Limits", icon: Gauge },
-	{ to: "/dms", label: "DMs", icon: Mail },
-	{ to: "/blocks", label: "Blocks", icon: ShieldOff },
-] as const;
-
-export function AppNav({ compact = false }: { compact?: boolean }) {
-	const pathname = useRouterState({
-		select: (state) => state.location.pathname,
-	});
-
-	return (
-		<aside className={compact ? sidebarShellCompactClass : sidebarShellClass}>
-			<div className="flex flex-col">
-				<Link to="/" className={sidebarBrandClass}>
-					<span className={sidebarBrandMarkClass}>
-						<BirdclawMark className="size-10" />
-					</span>
-					<span
-						className={
-							compact ? sidebarBrandCopyCompactClass : sidebarBrandCopyClass
-						}
-					>
-						<span className={sidebarBrandTitleClass}>birdclaw</span>
-						<span className={sidebarBrandTaglineClass}>
-							Fast search for your archive.
-						</span>
-					</span>
-				</Link>
-				<nav className={sidebarNavClass} aria-label="Primary">
-					{links.map((link) => {
-						const active = pathname === link.to;
-						const Icon = link.icon;
-						return (
-							<Link
-								key={link.to}
-								to={link.to}
-								aria-label={link.label}
-								className={cx(
-									compact ? navLinkCompactClass : navLinkClass,
-									active && navLinkActiveClass,
-								)}
-							>
-								<Icon
-									className={navLinkIconClass}
-									size={22}
-									strokeWidth={active ? 2.4 : 1.8}
-									aria-hidden="true"
-								/>
-								<span
-									className={
-										compact ? navLinkLabelCompactClass : navLinkLabelClass
-									}
-								>
-									{link.label}
-								</span>
-							</Link>
-						);
-					})}
-				</nav>
-			</div>
-			<div className={sidebarFooterClass}>
-				<AccountSwitcher action={<ThemeSlider compact />} />
-			</div>
-		</aside>
-	);
-}

package/src/components/AvatarChip.tsx

@@ -1,58 +0,0 @@
-import { useState } from "react";
-import { getInitials } from "#/lib/present";
-import {
-	avatarChipClass,
-	avatarChipLargeClass,
-	avatarChipSmallClass,
-	cx,
-} from "#/lib/ui";
-
-export function AvatarChip({
-	profileId,
-	avatarUrl,
-	name,
-	hue,
-	size = "default",
-}: {
-	profileId?: string;
-	avatarUrl?: string;
-	name: string;
-	hue: number;
-	size?: "default" | "large" | "small";
-}) {
-	const avatarSrc =
-		profileId && avatarUrl ? avatarPath(profileId, avatarUrl) : null;
-	const [failedSrc, setFailedSrc] = useState<string | null>(null);
-	const showImage = avatarSrc && failedSrc !== avatarSrc;
-
-	return (
-		<span
-			className={cx(
-				avatarChipClass,
-				size === "large" && avatarChipLargeClass,
-				size === "small" && avatarChipSmallClass,
-			)}
-			style={{ backgroundColor: `hsl(${String(hue)} 72% 50%)` }}
-		>
-			{showImage ? (
-				<img
-					alt={name}
-					className="size-full rounded-[inherit] object-cover"
-					loading="lazy"
-					onError={() => setFailedSrc(avatarSrc)}
-					src={avatarSrc}
-				/>
-			) : (
-				getInitials(name)
-			)}
-		</span>
-	);
-}
-
-export function avatarPath(profileId: string, avatarUrl: string) {
-	const query = new URLSearchParams({
-		profileId,
-		v: avatarUrl,
-	});
-	return `/api/avatar?${query.toString()}`;
-}

package/src/components/AvatarPreload.ts

@@ -1,149 +0,0 @@
-import { type RefObject, useEffect } from "react";
-import { avatarPath } from "./AvatarChip";
-
-const MAX_CONCURRENT_PRELOADS = 4;
-const IDLE_TIMEOUT_MS = 2500;
-const PRELOAD_ROOT_MARGIN = "800px 0px";
-
-const queuedSources: string[] = [];
-const knownSources = new Set<string>();
-const activeImages = new Set<HTMLImageElement>();
-
-let activePreloads = 0;
-let listeningForLoad = false;
-let idleId: number | null = null;
-let fallbackTimerId: number | null = null;
-
-function finishPreload(image: HTMLImageElement) {
-	if (!activeImages.delete(image)) return;
-	activePreloads -= 1;
-	drainPreloads();
-}
-
-function drainPreloads() {
-	while (activePreloads < MAX_CONCURRENT_PRELOADS && queuedSources.length > 0) {
-		const src = queuedSources.shift();
-		if (!src) return;
-
-		const image = new Image();
-		activePreloads += 1;
-		activeImages.add(image);
-		image.decoding = "async";
-		image.onerror = () => finishPreload(image);
-		image.onload = () => {
-			if (typeof image.decode !== "function") {
-				finishPreload(image);
-				return;
-			}
-			void image
-				.decode()
-				.catch(() => undefined)
-				.finally(() => finishPreload(image));
-		};
-		image.src = src;
-	}
-}
-
-function runIdlePreloads() {
-	idleId = null;
-	fallbackTimerId = null;
-	drainPreloads();
-}
-
-function scheduleIdlePreloads() {
-	if (
-		queuedSources.length === 0 ||
-		idleId !== null ||
-		fallbackTimerId !== null
-	) {
-		return;
-	}
-
-	const requestIdle = window.requestIdleCallback?.bind(window);
-	if (requestIdle) {
-		idleId = requestIdle(runIdlePreloads, {
-			timeout: IDLE_TIMEOUT_MS,
-		});
-		return;
-	}
-
-	fallbackTimerId = window.setTimeout(runIdlePreloads, 0);
-}
-
-function handleWindowLoad() {
-	listeningForLoad = false;
-	scheduleIdlePreloads();
-}
-
-function scheduleAfterPageLoad() {
-	if (document.readyState === "complete") {
-		scheduleIdlePreloads();
-		return;
-	}
-	if (listeningForLoad) return;
-	listeningForLoad = true;
-	window.addEventListener("load", handleWindowLoad, { once: true });
-}
-
-function queueAvatarPreload(profileId?: string, avatarUrl?: string) {
-	if (!profileId || !avatarUrl || typeof window === "undefined") return;
-	const src = avatarPath(profileId, avatarUrl);
-	if (knownSources.has(src)) return;
-	knownSources.add(src);
-	queuedSources.push(src);
-	scheduleAfterPageLoad();
-}
-
-export function useAvatarPreload(
-	reference: RefObject<Element | null>,
-	profileId?: string,
-	avatarUrl?: string,
-) {
-	useEffect(() => {
-		if (!profileId || !avatarUrl) return;
-		const node = reference.current;
-		if (!node || typeof IntersectionObserver === "undefined") {
-			queueAvatarPreload(profileId, avatarUrl);
-			return;
-		}
-
-		const observer = new IntersectionObserver(
-			(entries) => {
-				if (!entries.some((entry) => entry.isIntersecting)) return;
-				observer.disconnect();
-				queueAvatarPreload(profileId, avatarUrl);
-			},
-			{ rootMargin: PRELOAD_ROOT_MARGIN },
-		);
-		observer.observe(node);
-		return () => observer.disconnect();
-	}, [avatarUrl, profileId, reference]);
-}
-
-function resetPreloader() {
-	if (listeningForLoad) {
-		window.removeEventListener("load", handleWindowLoad);
-	}
-	if (idleId !== null && "cancelIdleCallback" in window) {
-		window.cancelIdleCallback(idleId);
-	}
-	if (fallbackTimerId !== null) {
-		window.clearTimeout(fallbackTimerId);
-	}
-	for (const image of activeImages) {
-		image.onload = null;
-		image.onerror = null;
-	}
-	queuedSources.length = 0;
-	knownSources.clear();
-	activeImages.clear();
-	activePreloads = 0;
-	listeningForLoad = false;
-	idleId = null;
-	fallbackTimerId = null;
-}
-
-export const __test__ = {
-	queueAvatarPreload,
-	resetPreloader,
-};

package/src/components/BrandMark.tsx

@@ -1,67 +0,0 @@
-import { cx, emptyStateClass } from "#/lib/ui";
-
-export function BirdclawMark({
-	animated = false,
-	className,
-}: {
-	animated?: boolean;
-	className?: string;
-}) {
-	return (
-		<span
-			aria-hidden="true"
-			className={cx(
-				"birdclaw-mark relative inline-grid shrink-0 place-items-center",
-				animated && "birdclaw-mark-animated",
-				className,
-			)}
-		>
-			<img
-				alt=""
-				className="size-full object-contain drop-shadow-[0_10px_22px_var(--brand-shadow)]"
-				draggable={false}
-				src="/birdclaw-mark.png"
-			/>
-		</span>
-	);
-}
-
-export function BirdclawLoading({
-	label,
-	detail,
-}: {
-	label: string;
-	detail?: string;
-}) {
-	return (
-		<div className={cx(emptyStateClass, "birdclaw-state")}>
-			<BirdclawMark animated className="size-16" />
-			<div className="mt-3 text-[14px] font-semibold text-[var(--ink)]">
-				{label}
-			</div>
-			{detail ? (
-				<div className="mt-1 text-[13px] text-[var(--ink-soft)]">{detail}</div>
-			) : null}
-		</div>
-	);
-}
-
-export function BirdclawEmpty({
-	label,
-	detail,
-}: {
-	label: string;
-	detail?: string;
-}) {
-	return (
-		<div className={cx(emptyStateClass, "birdclaw-state")}>
-			<BirdclawMark className="size-12 opacity-75" />
-			<div className="mt-3 text-[14px] font-semibold text-[var(--ink)]">
-				{label}
-			</div>
-			{detail ? (
-				<div className="mt-1 text-[13px] text-[var(--ink-soft)]">{detail}</div>
-			) : null}
-		</div>
-	);
-}

package/src/components/ConversationThread.tsx

@@ -1,131 +0,0 @@
-import { MessageCircle } from "lucide-react";
-import type { EmbeddedTweet } from "#/lib/types";
-import {
-	cx,
-	feedActionIconClass,
-	feedRowHandleClass,
-	feedRowNameClass,
-	feedRowTimestampClass,
-} from "#/lib/ui";
-import { AvatarChip } from "./AvatarChip";
-import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
-import { ProfilePreview } from "./ProfilePreview";
-import { SmartTimestamp } from "./SmartTimestamp";
-import { TweetArticleCard } from "./TweetArticleCard";
-import { TweetMediaGrid } from "./TweetMediaGrid";
-import { TweetRichText } from "./TweetRichText";
-
-export function ConversationThread({
-	anchorId,
-	error,
-	items,
-	loading,
-}: {
-	anchorId: string;
-	error?: string | null;
-	items: EmbeddedTweet[];
-	loading: boolean;
-}) {
-	if (loading) {
-		return (
-			<section className="mt-3 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)]">
-				<BirdclawLoading
-					detail="Finding archived replies around this post"
-					label="Loading conversation"
-				/>
-			</section>
-		);
-	}
-
-	if (error) {
-		return (
-			<section className="mt-3 rounded-2xl border border-[var(--alert)] bg-[var(--alert-soft)] px-4 py-3 text-[14px] text-[var(--alert)]">
-				{error}
-			</section>
-		);
-	}
-
-	if (items.length <= 1) {
-		return (
-			<section className="mt-3 rounded-2xl border border-[var(--line)]">
-				<BirdclawEmpty
-					detail="This post has no other archived replies locally."
-					label="No thread context yet"
-				/>
-			</section>
-		);
-	}
-
-	return (
-		<section
-			aria-label="Conversation"
-			className="mt-3 overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--bg-card)]"
-		>
-			<div className="flex items-center gap-2 border-b border-[var(--line)] px-4 py-2.5 text-[13px] font-bold text-[var(--ink)]">
-				<MessageCircle className={feedActionIconClass} strokeWidth={1.8} />
-				<span>{items.length} tweets in conversation</span>
-			</div>
-			<div className="flex flex-col">
-				{items.map((tweet, index) => {
-					const isAnchor = tweet.id === anchorId;
-					return (
-						<div
-							className={cx(
-								"flex gap-3 px-4 py-3",
-								index > 0 && "border-t border-[var(--line)]",
-								isAnchor && "bg-[var(--accent-soft)]",
-							)}
-							key={tweet.id}
-						>
-							<div className="flex flex-col items-center">
-								<AvatarChip
-									avatarUrl={tweet.author.avatarUrl}
-									hue={tweet.author.avatarHue}
-									name={tweet.author.displayName}
-									profileId={tweet.author.id}
-									size="small"
-								/>
-								{index < items.length - 1 ? (
-									<span className="mt-2 w-px flex-1 bg-[var(--line)]" />
-								) : null}
-							</div>
-							<div className="min-w-0 flex-1">
-								<header className="flex min-w-0 items-center gap-1.5 text-[14px]">
-									<ProfilePreview profile={tweet.author}>
-										<span className="flex min-w-0 items-center gap-1.5">
-											<span className={feedRowNameClass}>
-												{tweet.author.displayName}
-											</span>
-											<span className={feedRowHandleClass}>
-												@{tweet.author.handle}
-											</span>
-										</span>
-									</ProfilePreview>
-									<span className="text-[var(--ink-soft)]">·</span>
-									<SmartTimestamp
-										className={feedRowTimestampClass}
-										value={tweet.createdAt}
-									/>
-									{isAnchor ? (
-										<span className="ml-auto rounded-full bg-[var(--accent)] px-2 py-0.5 text-[11px] font-bold text-white">
-											selected
-										</span>
-									) : null}
-								</header>
-								<TweetRichText
-									className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-[1.45] text-[var(--ink)] [overflow-wrap:anywhere]"
-									entities={tweet.entities}
-									text={tweet.text}
-								/>
-								<TweetMediaGrid items={tweet.media} />
-								{tweet.entities.article ? (
-									<TweetArticleCard article={tweet.entities.article} />
-								) : null}
-							</div>
-						</div>
-					);
-				})}
-			</div>
-		</section>
-	);
-}