birdclaw 0.4.0 → 0.5.0

package/src/components/AppNav.tsx

@@ -1,23 +1,41 @@
 import { Link, useRouterState } from "@tanstack/react-router";
 import {
-	brandMarkClass,
+	Bell,
+	Bird,
+	Bookmark,
+	Heart,
+	Home,
+	Inbox,
+	Link as LinkIcon,
+	Mail,
+	ShieldOff,
+} from "lucide-react";
+import {
 	cx,
-	eyebrowClass,
-	navClass,
 	navLinkActiveClass,
 	navLinkClass,
-	navLinksClass,
+	navLinkIconClass,
+	navLinkLabelClass,
+	sidebarBrandClass,
+	sidebarBrandCopyClass,
+	sidebarBrandMarkClass,
+	sidebarBrandTaglineClass,
+	sidebarBrandTitleClass,
+	sidebarFooterClass,
+	sidebarNavClass,
+	sidebarShellClass,
 } from "#/lib/ui";
 import { ThemeSlider } from "./ThemeSlider";
 
 const links = [
-	{ to: "/inbox", label: "Inbox" },
-	{ to: "/", label: "Home" },
-	{ to: "/mentions", label: "Mentions" },
-	{ to: "/likes", label: "Likes" },
-	{ to: "/bookmarks", label: "Bookmarks" },
-	{ to: "/dms", label: "DMs" },
-	{ to: "/blocks", label: "Blocks" },
+	{ to: "/inbox", label: "Inbox", icon: Inbox },
+	{ 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: "/dms", label: "DMs", icon: Mail },
+	{ to: "/blocks", label: "Blocks", icon: ShieldOff },
 ] as const;
 
 export function AppNav() {
@@ -26,26 +44,45 @@ export function AppNav() {
 	});
 
 	return (
-		<nav className={navClass}>
-			<div>
-				<p className={eyebrowClass}>birdclaw</p>
-				<h1 className={brandMarkClass}>Quiet signal for Twitter.</h1>
+		<aside className={sidebarShellClass}>
+			<div className="flex flex-col">
+				<Link to="/" className={sidebarBrandClass}>
+					<span className={sidebarBrandMarkClass}>
+						<Bird className="size-5" strokeWidth={2.4} />
+					</span>
+					<span className={sidebarBrandCopyClass}>
+						<span className={sidebarBrandTitleClass}>birdclaw</span>
+						<span className={sidebarBrandTaglineClass}>
+							Quiet signal for Twitter.
+						</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(navLinkClass, active && navLinkActiveClass)}
+							>
+								<Icon
+									className={navLinkIconClass}
+									size={22}
+									strokeWidth={active ? 2.4 : 1.8}
+									aria-hidden="true"
+								/>
+								<span className={navLinkLabelClass}>{link.label}</span>
+							</Link>
+						);
+					})}
+				</nav>
 			</div>
-			<div className={navLinksClass}>
-				{links.map((link) => {
-					const active = pathname === link.to;
-					return (
-						<Link
-							key={link.to}
-							to={link.to}
-							className={cx(navLinkClass, active && navLinkActiveClass)}
-						>
-							{link.label}
-						</Link>
-					);
-				})}
+			<div className={sidebarFooterClass}>
 				<ThemeSlider />
 			</div>
-		</nav>
+		</aside>
 	);
 }

package/src/components/AvatarChip.tsx

@@ -1,6 +1,11 @@
 import { useState } from "react";
 import { getInitials } from "#/lib/present";
-import { avatarChipClass, avatarChipLargeClass, cx } from "#/lib/ui";
+import {
+	avatarChipClass,
+	avatarChipLargeClass,
+	avatarChipSmallClass,
+	cx,
+} from "#/lib/ui";
 
 export function AvatarChip({
 	profileId,
@@ -13,7 +18,7 @@ export function AvatarChip({
 	avatarUrl?: string;
 	name: string;
 	hue: number;
-	size?: "default" | "large";
+	size?: "default" | "large" | "small";
 }) {
 	const avatarSrc =
 		profileId && avatarUrl
@@ -26,10 +31,10 @@ export function AvatarChip({
 		<span
 			className={cx(
 				avatarChipClass,
-				"avatar-chip",
-				size === "large" && cx(avatarChipLargeClass, "avatar-chip-large"),
+				size === "large" && avatarChipLargeClass,
+				size === "small" && avatarChipSmallClass,
 			)}
-			style={{ backgroundColor: `hsl(${hue} 72% 50%)` }}
+			style={{ backgroundColor: `hsl(${String(hue)} 72% 50%)` }}
 		>
 			{showImage ? (
 				<img

package/src/components/ConversationThread.tsx

@@ -0,0 +1,125 @@
+import { MessageCircle } from "lucide-react";
+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 { ProfilePreview } from "./ProfilePreview";
+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)] px-4 py-4 text-[14px] text-[var(--ink-soft)]">
+				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={cx(
+					emptyStateClass,
+					"mt-3 rounded-2xl border border-[var(--line)] py-4",
+				)}
+			>
+				No other archived replies in this conversation.
+			</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>
+									<span className={feedRowTimestampClass}>
+										{formatShortTimestamp(tweet.createdAt)}
+									</span>
+									{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} />
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		</section>
+	);
+}

package/src/components/DmWorkspace.tsx

@@ -1,67 +1,62 @@
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { DmConversationItem, DmMessageItem } from "#/lib/types";
 import {
-	actionButtonClass,
 	composerBarClass,
 	composerInputClass,
-	composerShellClass,
-	contextBioClass,
-	contextHandleClass,
 	contextStatRowClass,
-	contextStatsClass,
 	contextStatTermClass,
 	contextStatValueClass,
 	cx,
-	dmGridClass,
+	dmComposerShellClass,
+	dmListBodyClass,
 	dmListClass,
-	dmListCopyClass,
+	dmListHandleClass,
+	dmListHeaderClass,
 	dmListItemActiveClass,
 	dmListItemClass,
-	dmPreviewTextClass,
+	dmListNameClass,
+	dmListPreviewClass,
+	dmListTimestampClass,
+	dmMessageBubbleClass,
+	dmMessageBubbleOutboundClass,
+	dmMessageMetaClass,
+	dmMessageRowClass,
+	dmMessageRowOutboundClass,
+	dmMessagesClass,
+	dmShellClass,
+	dmThreadClass,
+	dmThreadHeaderClass,
+	dmThreadNameClass,
+	dmThreadSubtitleClass,
+	dmThreadTitleClass,
 	emptyStateClass,
-	eyebrowClass,
-	identityRowClass,
-	messageBubbleClass,
-	messageBubbleOutboundClass,
-	messageMetaClass,
-	messageRowClass,
-	messageRowOutboundClass,
-	messageStackClass,
-	metaStackClass,
 	pillAlertClass,
 	pillClass,
 	pillSoftClass,
-	threadBioClass,
-	threadDetailColumnClass,
-	threadDetailHeaderClass,
-	threadHeaderClass,
-	threadShellClass,
-	threadSubtitleClass,
-	threadTitleClass,
+	primaryButtonClass,
 	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
 
 function MessageBubble({ message }: { message: DmMessageItem }) {
+	const outbound = message.direction === "outbound";
 	return (
 		<div
-			className={cx(
-				messageRowClass,
-				message.direction === "outbound" && messageRowOutboundClass,
-			)}
+			className={cx(dmMessageRowClass, outbound && dmMessageRowOutboundClass)}
 		>
-			<div className={messageMetaClass}>
-				<span>{message.sender.displayName}</span>
-				<span>{formatShortTimestamp(message.createdAt)}</span>
-			</div>
 			<div
 				className={cx(
-					messageBubbleClass,
-					message.direction === "outbound" && messageBubbleOutboundClass,
+					dmMessageBubbleClass,
+					outbound && dmMessageBubbleOutboundClass,
 				)}
 			>
 				{message.text}
 			</div>
+			<div className={dmMessageMetaClass}>
+				<span>{message.sender.displayName}</span>
+				<span>·</span>
+				<span>{formatShortTimestamp(message.createdAt)}</span>
+			</div>
 		</div>
 	);
 }
@@ -89,8 +84,11 @@ export function DmWorkspace({
 		: "No conversation selected";
 
 	return (
-		<section className={dmGridClass}>
+		<section className={dmShellClass}>
 			<aside className={dmListClass}>
+				{conversations.length === 0 ? (
+					<div className={emptyStateClass}>No conversations.</div>
+				) : null}
 				{conversations.map((conversation) => {
 					const active = conversation.id === selectedConversation?.id;
 					return (
@@ -106,70 +104,77 @@ export function DmWorkspace({
 								name={conversation.participant.displayName}
 								profileId={conversation.participant.id}
 							/>
-							<div className={dmListCopyClass}>
-								<div className={identityRowClass}>
-									<strong>{conversation.participant.displayName}</strong>
-									<span>@{conversation.participant.handle}</span>
+							<div className={dmListBodyClass}>
+								<div className={dmListHeaderClass}>
+									<div className="flex min-w-0 items-center gap-1.5">
+										<span className={dmListNameClass}>
+											{conversation.participant.displayName}
+										</span>
+										<span className={dmListHandleClass}>
+											@{conversation.participant.handle}
+										</span>
+									</div>
+									<span className={dmListTimestampClass}>
+										{formatShortTimestamp(conversation.lastMessageAt)}
+									</span>
 								</div>
-								<p className={dmPreviewTextClass}>
+								<p className={dmListPreviewClass}>
 									{conversation.lastMessagePreview}
 								</p>
-							</div>
-							<div className={metaStackClass}>
-								<span
-									className={cx(
-										pillClass,
-										conversation.needsReply ? pillAlertClass : pillSoftClass,
-									)}
-								>
-									{conversation.needsReply ? "needs reply" : "clear"}
-								</span>
-								<span className={cx(pillClass, pillSoftClass)}>
-									{conversation.influenceScore} · {conversation.influenceLabel}
-								</span>
-								<span className={timestampClass}>
-									{formatShortTimestamp(conversation.lastMessageAt)}
-								</span>
+								<div className="mt-1 flex items-center gap-1.5">
+									<span
+										className={cx(
+											pillClass,
+											conversation.needsReply ? pillAlertClass : pillSoftClass,
+										)}
+									>
+										{conversation.needsReply ? "needs reply" : "clear"}
+									</span>
+									<span className={cx(pillClass, pillSoftClass)}>
+										{conversation.influenceScore} ·{" "}
+										{conversation.influenceLabel}
+									</span>
+								</div>
 							</div>
 						</button>
 					);
 				})}
 			</aside>
 
-			<div className={threadShellClass}>
+			<div className={dmThreadClass}>
 				{selectedConversation ? (
 					<>
-						<header className={threadHeaderClass}>
-							<div>
-								<p className={eyebrowClass}>direct messages</p>
-								<h2 className={threadTitleClass}>
-									{selectedConversation.participant.displayName}
-								</h2>
-								<p className={threadSubtitleClass}>{subtitle}</p>
-								<p className={threadBioClass}>
-									{selectedConversation.lastMessagePreview}
-								</p>
-							</div>
-							<div className={threadDetailColumnClass}>
-								<div className={threadDetailHeaderClass}>
-									<AvatarChip
-										avatarUrl={participant?.avatarUrl}
-										hue={participant?.avatarHue ?? 18}
-										name={participant?.displayName ?? "Unknown"}
-										profileId={participant?.id ?? undefined}
-										size="large"
-									/>
-									<div>
-										<strong>{participant?.displayName}</strong>
-										<p className={cx("context-handle", contextHandleClass)}>
-											@{participant?.handle}
-										</p>
+						<header className={dmThreadHeaderClass}>
+							<div className={dmThreadTitleClass}>
+								<AvatarChip
+									avatarUrl={participant?.avatarUrl}
+									hue={participant?.avatarHue ?? 18}
+									name={participant?.displayName ?? "Unknown"}
+									profileId={participant?.id ?? undefined}
+								/>
+								<div className="min-w-0">
+									<div className={dmThreadNameClass}>
+										{selectedConversation.participant.displayName}
 									</div>
+									<div className={dmThreadSubtitleClass}>{subtitle}</div>
 								</div>
-								<p className={cx("context-bio", contextBioClass)}>
-									{participant?.bio}
-								</p>
-								<dl className={contextStatsClass}>
+							</div>
+							<button
+								className={primaryButtonClass}
+								onClick={() => onReplySend(selectedConversation.id)}
+								type="button"
+							>
+								Reply
+							</button>
+						</header>
+						{participant?.bio || participant?.followersCount ? (
+							<div className="border-b border-[var(--line)] px-4 py-3">
+								{participant?.bio ? (
+									<p className="text-[14px] leading-[1.4] text-[var(--ink)]">
+										{participant.bio}
+									</p>
+								) : null}
+								<dl className="mt-2 grid grid-cols-2 gap-1 text-[13px]">
 									<div className={contextStatRowClass}>
 										<dt className={contextStatTermClass}>Followers</dt>
 										<dd className={contextStatValueClass}>
@@ -198,26 +203,19 @@ export function DmWorkspace({
 										</dd>
 									</div>
 								</dl>
-								<button
-									className={actionButtonClass}
-									onClick={() => onReplySend(selectedConversation.id)}
-									type="button"
-								>
-									Reply
-								</button>
 							</div>
-						</header>
-						<div className={messageStackClass}>
+						) : null}
+						<div className={dmMessagesClass}>
 							{selectedMessages.map((message) => (
 								<MessageBubble key={message.id} message={message} />
 							))}
 						</div>
-						<div className={composerShellClass}>
+						<div className={dmComposerShellClass}>
 							<textarea
 								className={composerInputClass}
 								onChange={(event) => onReplyDraftChange(event.target.value)}
 								placeholder={`Reply to @${selectedConversation.participant.handle}`}
-								rows={4}
+								rows={3}
 								value={replyDraft}
 							/>
 							<div className={composerBarClass}>
@@ -227,7 +225,7 @@ export function DmWorkspace({
 										: "Thread clear"}
 								</span>
 								<button
-									className={actionButtonClass}
+									className={primaryButtonClass}
 									disabled={!replyDraft.trim()}
 									onClick={() => onReplySend(selectedConversation.id)}
 									type="button"

package/src/components/EmbeddedTweetCard.tsx

@@ -1,12 +1,13 @@
 import { formatShortTimestamp } from "#/lib/present";
 import type { EmbeddedTweet } from "#/lib/types";
 import {
-	embeddedTweetAuthorClass,
-	embeddedTweetCardClass,
-	embeddedTweetCopyClass,
-	embeddedTweetHeaderClass,
-	embeddedTweetLabelClass,
-	timestampClass,
+	embeddedCardBodyClass,
+	embeddedCardCopyClass,
+	embeddedCardHandleClass,
+	embeddedCardHeaderClass,
+	embeddedCardLabelClass,
+	embeddedCardNameClass,
+	feedRowTimestampClass,
 } from "#/lib/ui";
 import { ProfilePreview } from "./ProfilePreview";
 import { TweetMediaGrid } from "./TweetMediaGrid";
@@ -20,21 +21,26 @@ export function EmbeddedTweetCard({
 	label: string;
 }) {
 	return (
-		<section className={embeddedTweetCardClass}>
-			<p className={embeddedTweetLabelClass}>{label}</p>
-			<header className={embeddedTweetHeaderClass}>
+		<section className={embeddedCardBodyClass}>
+			<p className={embeddedCardLabelClass}>{label}</p>
+			<header className={embeddedCardHeaderClass}>
 				<ProfilePreview profile={item.author}>
-					<span className={embeddedTweetAuthorClass}>
-						<strong>{item.author.displayName}</strong>
-						<span>@{item.author.handle}</span>
+					<span className="flex min-w-0 items-center gap-1.5">
+						<span className={embeddedCardNameClass}>
+							{item.author.displayName}
+						</span>
+						<span className={embeddedCardHandleClass}>
+							@{item.author.handle}
+						</span>
 					</span>
 				</ProfilePreview>
-				<span className={timestampClass}>
+				<span className="text-[var(--ink-soft)]">·</span>
+				<span className={feedRowTimestampClass}>
 					{formatShortTimestamp(item.createdAt)}
 				</span>
 			</header>
 			<TweetRichText
-				className={embeddedTweetCopyClass}
+				className={embeddedCardCopyClass}
 				entities={item.entities}
 				text={item.text}
 			/>