birdclaw 0.5.0 → 0.6.0

package/src/components/AccountSwitcher.tsx

@@ -0,0 +1,186 @@
+import { Check, ChevronDown } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchQueryEnvelope } from "#/lib/api-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 [accounts, setAccounts] = useState<AccountRecord[]>([]);
+	const [open, setOpen] = useState(false);
+	const switcherRef = useRef<HTMLDivElement>(null);
+	const selectedAccountId = useSelectedAccountId(accounts);
+	const selectedAccount = useMemo(
+		() => accounts.find((account) => account.id === selectedAccountId),
+		[accounts, selectedAccountId],
+	);
+
+	useEffect(() => {
+		let active = true;
+		fetchQueryEnvelope()
+			.then((meta) => {
+				if (active) setAccounts(meta.accounts);
+			})
+			.catch(() => {
+				if (active) setAccounts([]);
+			});
+		return () => {
+			active = false;
+		};
+	}, []);
+
+	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,8 +1,8 @@
 import { Link, useRouterState } from "@tanstack/react-router";
 import {
 	Bell,
-	Bird,
 	Bookmark,
+	CalendarDays,
 	Heart,
 	Home,
 	Inbox,
@@ -14,21 +14,28 @@ 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: "/", label: "Home", icon: Home },
 	{ to: "/mentions", label: "Mentions", icon: Bell },
 	{ to: "/likes", label: "Likes", icon: Heart },
@@ -38,22 +45,26 @@ const links = [
 	{ to: "/blocks", label: "Blocks", icon: ShieldOff },
 ] as const;
 
-export function AppNav() {
+export function AppNav({ compact = false }: { compact?: boolean }) {
 	const pathname = useRouterState({
 		select: (state) => state.location.pathname,
 	});
 
 	return (
-		<aside className={sidebarShellClass}>
+		<aside className={compact ? sidebarShellCompactClass : sidebarShellClass}>
 			<div className="flex flex-col">
 				<Link to="/" className={sidebarBrandClass}>
 					<span className={sidebarBrandMarkClass}>
-						<Bird className="size-5" strokeWidth={2.4} />
+						<BirdclawMark className="size-10" />
 					</span>
-					<span className={sidebarBrandCopyClass}>
+					<span
+						className={
+							compact ? sidebarBrandCopyCompactClass : sidebarBrandCopyClass
+						}
+					>
 						<span className={sidebarBrandTitleClass}>birdclaw</span>
 						<span className={sidebarBrandTaglineClass}>
-							Quiet signal for Twitter.
+							Fast search for your archive.
 						</span>
 					</span>
 				</Link>
@@ -66,7 +77,10 @@ export function AppNav() {
 								key={link.to}
 								to={link.to}
 								aria-label={link.label}
-								className={cx(navLinkClass, active && navLinkActiveClass)}
+								className={cx(
+									compact ? navLinkCompactClass : navLinkClass,
+									active && navLinkActiveClass,
+								)}
 							>
 								<Icon
 									className={navLinkIconClass}
@@ -74,14 +88,20 @@ export function AppNav() {
 									strokeWidth={active ? 2.4 : 1.8}
 									aria-hidden="true"
 								/>
-								<span className={navLinkLabelClass}>{link.label}</span>
+								<span
+									className={
+										compact ? navLinkLabelCompactClass : navLinkLabelClass
+									}
+								>
+									{link.label}
+								</span>
 							</Link>
 						);
 					})}
 				</nav>
 			</div>
 			<div className={sidebarFooterClass}>
-				<ThemeSlider />
+				<AccountSwitcher action={<ThemeSlider compact />} />
 			</div>
 		</aside>
 	);

package/src/components/AvatarChip.tsx

@@ -21,9 +21,7 @@ export function AvatarChip({
 	size?: "default" | "large" | "small";
 }) {
 	const avatarSrc =
-		profileId && avatarUrl
-			? `/api/avatar?profileId=${encodeURIComponent(profileId)}`
-			: null;
+		profileId && avatarUrl ? avatarPath(profileId, avatarUrl) : null;
 	const [failedSrc, setFailedSrc] = useState<string | null>(null);
 	const showImage = avatarSrc && failedSrc !== avatarSrc;
 
@@ -50,3 +48,11 @@ export function AvatarChip({
 		</span>
 	);
 }
+
+function avatarPath(profileId: string, avatarUrl: string) {
+	const query = new URLSearchParams({
+		profileId,
+		v: avatarUrl,
+	});
+	return `/api/avatar?${query.toString()}`;
+}

package/src/components/BrandMark.tsx

@@ -0,0 +1,67 @@
+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

@@ -3,13 +3,13 @@ import { formatShortTimestamp } from "#/lib/present";
 import type { EmbeddedTweet } from "#/lib/types";
 import {
 	cx,
-	emptyStateClass,
 	feedActionIconClass,
 	feedRowHandleClass,
 	feedRowNameClass,
 	feedRowTimestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
+import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
 import { ProfilePreview } from "./ProfilePreview";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
@@ -27,8 +27,11 @@ export function ConversationThread({
 }) {
 	if (loading) {
 		return (
-			<section className="mt-3 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] px-4 py-4 text-[14px] text-[var(--ink-soft)]">
-				Loading conversation...
+			<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>
 		);
 	}
@@ -43,13 +46,11 @@ export function ConversationThread({
 
 	if (items.length <= 1) {
 		return (
-			<section
-				className={cx(
-					emptyStateClass,
-					"mt-3 rounded-2xl border border-[var(--line)] py-4",
-				)}
-			>
-				No other archived replies in this conversation.
+			<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>
 		);
 	}

package/src/components/DmWorkspace.tsx

@@ -1,3 +1,4 @@
+import { CheckCircle2, Circle } from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { DmConversationItem, DmMessageItem } from "#/lib/types";
 import {
@@ -18,6 +19,7 @@ import {
 	dmListPreviewClass,
 	dmListTimestampClass,
 	dmMessageBubbleClass,
+	dmMessageBubbleInboundClass,
 	dmMessageBubbleOutboundClass,
 	dmMessageMetaClass,
 	dmMessageRowClass,
@@ -29,7 +31,6 @@ import {
 	dmThreadNameClass,
 	dmThreadSubtitleClass,
 	dmThreadTitleClass,
-	emptyStateClass,
 	pillAlertClass,
 	pillClass,
 	pillSoftClass,
@@ -37,6 +38,7 @@ import {
 	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
+import { BirdclawEmpty } from "./BrandMark";
 
 function MessageBubble({ message }: { message: DmMessageItem }) {
 	const outbound = message.direction === "outbound";
@@ -47,7 +49,7 @@ function MessageBubble({ message }: { message: DmMessageItem }) {
 			<div
 				className={cx(
 					dmMessageBubbleClass,
-					outbound && dmMessageBubbleOutboundClass,
+					outbound ? dmMessageBubbleOutboundClass : dmMessageBubbleInboundClass,
 				)}
 			>
 				{message.text}
@@ -80,14 +82,17 @@ export function DmWorkspace({
 }) {
 	const participant = selectedConversation?.participant ?? null;
 	const subtitle = selectedConversation
-		? `${selectedConversation.needsReply ? "Reply owed" : "Thread clear"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
+		? `${selectedConversation.isMessageRequest ? "Message request" : selectedConversation.needsReply ? "Reply open" : "We replied"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
 		: "No conversation selected";
 
 	return (
-		<section className={dmShellClass}>
+		<section aria-label="DM workspace" className={dmShellClass}>
 			<aside className={dmListClass}>
 				{conversations.length === 0 ? (
-					<div className={emptyStateClass}>No conversations.</div>
+					<BirdclawEmpty
+						detail="Sync DMs to populate this lane."
+						label="No conversations"
+					/>
 				) : null}
 				{conversations.map((conversation) => {
 					const active = conversation.id === selectedConversation?.id;
@@ -127,12 +132,27 @@ export function DmWorkspace({
 											pillClass,
 											conversation.needsReply ? pillAlertClass : pillSoftClass,
 										)}
+										aria-label={
+											conversation.needsReply ? "Reply open" : "We replied"
+										}
 									>
-										{conversation.needsReply ? "needs reply" : "clear"}
+										{conversation.needsReply ? (
+											<Circle className="size-3" strokeWidth={2.2} />
+										) : (
+											<CheckCircle2 className="size-3.5" strokeWidth={2} />
+										)}
+										{conversation.needsReply ? "open" : "replied"}
 									</span>
+									{conversation.isMessageRequest ? (
+										<span className={cx(pillClass, pillAlertClass)}>
+											request
+										</span>
+									) : null}
 									<span className={cx(pillClass, pillSoftClass)}>
-										{conversation.influenceScore} ·{" "}
-										{conversation.influenceLabel}
+										{formatCompactNumber(
+											conversation.participant.followersCount,
+										)}{" "}
+										followers
 									</span>
 								</div>
 							</div>
@@ -191,9 +211,11 @@ export function DmWorkspace({
 									<div className={contextStatRowClass}>
 										<dt className={contextStatTermClass}>Reply state</dt>
 										<dd className={contextStatValueClass}>
-											{selectedConversation.needsReply
-												? "Needs reply"
-												: "Replied"}
+											{selectedConversation.isMessageRequest
+												? "Message request"
+												: selectedConversation.needsReply
+													? "Reply open"
+													: "We replied"}
 										</dd>
 									</div>
 									<div className={contextStatRowClass}>
@@ -221,8 +243,8 @@ export function DmWorkspace({
 							<div className={composerBarClass}>
 								<span className={timestampClass}>
 									{selectedConversation.needsReply
-										? "Reply still owed"
-										: "Thread clear"}
+										? "Reply open"
+										: "We replied"}
 								</span>
 								<button
 									className={primaryButtonClass}
@@ -236,7 +258,10 @@ export function DmWorkspace({
 						</div>
 					</>
 				) : (
-					<div className={emptyStateClass}>No DM selected.</div>
+					<BirdclawEmpty
+						detail="Pick a conversation to read the thread."
+						label="No DM selected"
+					/>
 				)}
 			</div>
 		</section>