birdclaw 0.8.3 → 0.8.4

package/src/components/DmWorkspace.tsx

@@ -1,286 +0,0 @@
-import { CheckCircle2, Circle } from "lucide-react";
-import { formatCompactNumber } from "#/lib/present";
-import type { DmConversationItem, DmMessageItem } from "#/lib/types";
-import {
-	composerBarClass,
-	composerInputClass,
-	contextStatRowClass,
-	contextStatTermClass,
-	contextStatValueClass,
-	cx,
-	dmComposerShellClass,
-	dmListBodyClass,
-	dmListClass,
-	dmListHandleClass,
-	dmListHeaderClass,
-	dmListItemActiveClass,
-	dmListItemClass,
-	dmListNameClass,
-	dmListPreviewClass,
-	dmListTimestampClass,
-	dmMessageBubbleClass,
-	dmMessageBubbleInboundClass,
-	dmMessageBubbleOutboundClass,
-	dmMessageMetaClass,
-	dmMessageRowClass,
-	dmMessageRowOutboundClass,
-	dmMessagesClass,
-	dmShellClass,
-	dmThreadClass,
-	dmThreadHeaderClass,
-	dmThreadNameClass,
-	dmThreadSubtitleClass,
-	dmThreadTitleClass,
-	pillAlertClass,
-	pillClass,
-	pillSoftClass,
-	primaryButtonClass,
-	timestampClass,
-} from "#/lib/ui";
-import { AvatarChip } from "./AvatarChip";
-import { BirdclawEmpty } from "./BrandMark";
-import { SmartTimestamp } from "./SmartTimestamp";
-
-function MessageBubble({ message }: { message: DmMessageItem }) {
-	const outbound = message.direction === "outbound";
-	return (
-		<div
-			className={cx(dmMessageRowClass, outbound && dmMessageRowOutboundClass)}
-		>
-			<div
-				className={cx(
-					dmMessageBubbleClass,
-					outbound ? dmMessageBubbleOutboundClass : dmMessageBubbleInboundClass,
-				)}
-			>
-				{message.text}
-			</div>
-			<div className={dmMessageMetaClass}>
-				<span>{message.sender.displayName}</span>
-				<span>·</span>
-				<SmartTimestamp value={message.createdAt} />
-			</div>
-		</div>
-	);
-}
-
-export function DmWorkspace({
-	conversations,
-	selectedConversation,
-	selectedMessages,
-	onSelectConversation,
-	replyDraft,
-	onReplyDraftChange,
-	onReplySend,
-}: {
-	conversations: DmConversationItem[];
-	selectedConversation: DmConversationItem | null;
-	selectedMessages: DmMessageItem[];
-	onSelectConversation: (conversationId: string) => void;
-	replyDraft: string;
-	onReplyDraftChange: (value: string) => void;
-	onReplySend: (conversationId: string) => void;
-}) {
-	const participant = selectedConversation?.participant ?? null;
-	const selectedStatus = selectedConversation
-		? selectedConversation.isMessageRequest
-			? "Message request"
-			: selectedConversation.needsReply
-				? "Reply open"
-				: "We replied"
-		: null;
-
-	return (
-		<section aria-label="DM workspace" className={dmShellClass}>
-			<aside className={dmListClass}>
-				{conversations.length === 0 ? (
-					<BirdclawEmpty
-						detail="Sync DMs to populate this lane."
-						label="No conversations"
-					/>
-				) : null}
-				{conversations.map((conversation) => {
-					const active = conversation.id === selectedConversation?.id;
-					return (
-						<button
-							key={conversation.id}
-							className={cx(dmListItemClass, active && dmListItemActiveClass)}
-							onClick={() => onSelectConversation(conversation.id)}
-							type="button"
-						>
-							<AvatarChip
-								avatarUrl={conversation.participant.avatarUrl}
-								hue={conversation.participant.avatarHue}
-								name={conversation.participant.displayName}
-								profileId={conversation.participant.id}
-							/>
-							<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>
-									<SmartTimestamp
-										className={dmListTimestampClass}
-										value={conversation.lastMessageAt}
-									/>
-								</div>
-								<p className={dmListPreviewClass}>
-									{conversation.lastMessagePreview}
-								</p>
-								<div className="mt-1 flex items-center gap-1.5">
-									<span
-										className={cx(
-											pillClass,
-											conversation.needsReply ? pillAlertClass : pillSoftClass,
-										)}
-										aria-label={
-											conversation.needsReply ? "Reply open" : "We replied"
-										}
-									>
-										{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)}>
-										{formatCompactNumber(
-											conversation.participant.followersCount,
-										)}{" "}
-										followers
-									</span>
-								</div>
-							</div>
-						</button>
-					);
-				})}
-			</aside>
-
-			<div className={dmThreadClass}>
-				{selectedConversation ? (
-					<>
-						<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}>
-										{selectedStatus && selectedConversation ? (
-											<>
-												{selectedStatus} · last message{" "}
-												<SmartTimestamp
-													value={selectedConversation.lastMessageAt}
-												/>
-											</>
-										) : (
-											"No conversation selected"
-										)}
-									</div>
-								</div>
-							</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}>
-											{formatCompactNumber(participant?.followersCount ?? 0)}
-										</dd>
-									</div>
-									<div className={contextStatRowClass}>
-										<dt className={contextStatTermClass}>Influence</dt>
-										<dd className={contextStatValueClass}>
-											{selectedConversation.influenceScore} ·{" "}
-											{selectedConversation.influenceLabel}
-										</dd>
-									</div>
-									<div className={contextStatRowClass}>
-										<dt className={contextStatTermClass}>Reply state</dt>
-										<dd className={contextStatValueClass}>
-											{selectedConversation.isMessageRequest
-												? "Message request"
-												: selectedConversation.needsReply
-													? "Reply open"
-													: "We replied"}
-										</dd>
-									</div>
-									<div className={contextStatRowClass}>
-										<dt className={contextStatTermClass}>Account</dt>
-										<dd className={contextStatValueClass}>
-											{selectedConversation.accountHandle}
-										</dd>
-									</div>
-								</dl>
-							</div>
-						) : null}
-						<div className={dmMessagesClass}>
-							{selectedMessages.map((message) => (
-								<MessageBubble key={message.id} message={message} />
-							))}
-						</div>
-						<div className={dmComposerShellClass}>
-							<textarea
-								className={composerInputClass}
-								onChange={(event) => onReplyDraftChange(event.target.value)}
-								placeholder={`Reply to @${selectedConversation.participant.handle}`}
-								rows={3}
-								value={replyDraft}
-							/>
-							<div className={composerBarClass}>
-								<span className={timestampClass}>
-									{selectedConversation.needsReply
-										? "Reply open"
-										: "We replied"}
-								</span>
-								<button
-									className={primaryButtonClass}
-									disabled={!replyDraft.trim()}
-									onClick={() => onReplySend(selectedConversation.id)}
-									type="button"
-								>
-									Send reply
-								</button>
-							</div>
-						</div>
-					</>
-				) : (
-					<BirdclawEmpty
-						detail="Pick a conversation to read the thread."
-						label="No DM selected"
-					/>
-				)}
-			</div>
-		</section>
-	);
-}

package/src/components/EmbeddedTweetCard.tsx

@@ -1,55 +0,0 @@
-import type { EmbeddedTweet } from "#/lib/types";
-import {
-	embeddedCardBodyClass,
-	embeddedCardCopyClass,
-	embeddedCardHandleClass,
-	embeddedCardHeaderClass,
-	embeddedCardLabelClass,
-	embeddedCardNameClass,
-	feedRowTimestampClass,
-} from "#/lib/ui";
-import { ProfilePreview } from "./ProfilePreview";
-import { SmartTimestamp } from "./SmartTimestamp";
-import { TweetArticleCard } from "./TweetArticleCard";
-import { TweetMediaGrid } from "./TweetMediaGrid";
-import { TweetRichText } from "./TweetRichText";
-
-export function EmbeddedTweetCard({
-	item,
-	label,
-}: {
-	item: EmbeddedTweet;
-	label: string;
-}) {
-	return (
-		<section className={embeddedCardBodyClass}>
-			<p className={embeddedCardLabelClass}>{label}</p>
-			<header className={embeddedCardHeaderClass}>
-				<ProfilePreview profile={item.author}>
-					<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="text-[var(--ink-soft)]">·</span>
-				<SmartTimestamp
-					className={feedRowTimestampClass}
-					value={item.createdAt}
-				/>
-			</header>
-			<TweetRichText
-				className={embeddedCardCopyClass}
-				entities={item.entities}
-				text={item.text}
-			/>
-			<TweetMediaGrid items={item.media} />
-			{item.entities.article ? (
-				<TweetArticleCard article={item.entities.article} />
-			) : null}
-		</section>
-	);
-}

package/src/components/FeedState.tsx

@@ -1,147 +0,0 @@
-import type { ReactNode } from "react";
-import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
-
-function SkeletonBlock({
-	className,
-	muted = false,
-}: {
-	className: string;
-	muted?: boolean;
-}) {
-	return (
-		<span
-			aria-hidden="true"
-			className={`block animate-pulse rounded-full ${muted ? "bg-[color:color-mix(in_srgb,var(--ink-soft)_16%,transparent)]" : "bg-[color:color-mix(in_srgb,var(--ink-soft)_24%,transparent)]"} ${className}`}
-		/>
-	);
-}
-
-export function TweetSkeletonRows({ count = 4 }: { count?: number }) {
-	return (
-		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
-			{Array.from({ length: count }, (_unused, index) => {
-				const hasMedia = index % 3 === 0;
-				const hasQuote = index % 4 === 2;
-				return (
-					<article
-						className="flex gap-3 px-4 py-3"
-						data-perf="tweet-skeleton-row"
-						key={`tweet-skeleton-${index}`}
-					>
-						<SkeletonBlock className="size-10 shrink-0 rounded-full" />
-						<div className="min-w-0 flex-1 space-y-3">
-							<div className="flex items-center gap-2">
-								<SkeletonBlock className="h-3.5 w-32" />
-								<SkeletonBlock className="h-3 w-20" muted />
-								<SkeletonBlock className="ml-auto h-5 w-16" muted />
-							</div>
-							<div className="space-y-2">
-								<SkeletonBlock className="h-3 w-full" />
-								<SkeletonBlock className="h-3 w-11/12" muted />
-								{index % 2 === 0 ? (
-									<SkeletonBlock className="h-3 w-7/12" muted />
-								) : null}
-							</div>
-							{hasMedia ? (
-								<SkeletonBlock className="h-32 w-full rounded-2xl" muted />
-							) : null}
-							{hasQuote ? (
-								<div className="space-y-2 rounded-2xl border border-[var(--line)] px-3 py-2">
-									<SkeletonBlock className="h-3 w-28" muted />
-									<SkeletonBlock className="h-3 w-full" muted />
-								</div>
-							) : null}
-							<div className="flex max-w-md items-center justify-between">
-								{["thread", "reply", "repost", "like"].map((key) => (
-									<SkeletonBlock className="h-3 w-11" key={key} muted />
-								))}
-							</div>
-						</div>
-					</article>
-				);
-			})}
-		</div>
-	);
-}
-
-export function LinkSkeletonRows({ count = 4 }: { count?: number }) {
-	return (
-		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
-			{Array.from({ length: count }, (_unused, index) => (
-				<article
-					className="flex gap-3 px-4 py-3"
-					data-perf="link-skeleton-row"
-					key={`link-skeleton-${index}`}
-				>
-					<SkeletonBlock className="size-9 shrink-0 rounded-full" muted />
-					<div className="min-w-0 flex-1 space-y-3">
-						<SkeletonBlock className="h-3.5 w-8/12" />
-						<SkeletonBlock className="h-3 w-6/12" muted />
-						<div className="flex flex-wrap gap-2">
-							<SkeletonBlock className="h-3 w-20" muted />
-							<SkeletonBlock className="h-3 w-14" muted />
-							<SkeletonBlock className="h-3 w-24" muted />
-						</div>
-						{index % 2 === 0 ? (
-							<SkeletonBlock
-								className="h-20 w-72 max-w-full rounded-2xl"
-								muted
-							/>
-						) : null}
-					</div>
-				</article>
-			))}
-		</div>
-	);
-}
-
-export function FeedLoading({
-	children,
-	detail,
-	label,
-}: {
-	children?: ReactNode;
-	detail?: string;
-	label: string;
-}) {
-	return (
-		<div className="border-b border-[var(--line)]">
-			<BirdclawLoading detail={detail} label={label} />
-			{children}
-		</div>
-	);
-}
-
-export function FeedError({
-	action,
-	message,
-	title = "Could not load this view",
-}: {
-	action?: ReactNode;
-	message: string;
-	title?: string;
-}) {
-	return (
-		<div className="border-b border-[var(--line)] px-6 py-10 text-center">
-			<div className="mx-auto max-w-sm">
-				<div className="text-[14px] font-bold text-[var(--alert)]">{title}</div>
-				<p className="mt-2 text-[13px] leading-[1.45] text-[var(--ink-soft)]">
-					{message}
-				</p>
-				{action ? (
-					<div className="mt-4 flex justify-center">{action}</div>
-				) : null}
-			</div>
-		</div>
-	);
-}
-
-export function FeedEmpty({
-	detail,
-	label,
-}: {
-	detail?: string;
-	label: string;
-}) {
-	return <BirdclawEmpty detail={detail} label={label} />;
-}