birdclaw 0.4.1 → 0.5.0

package/src/routes/inbox.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Sparkles } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { InboxCard } from "#/components/InboxCard";
 import type {
@@ -8,21 +9,19 @@ import type {
 	QueryEnvelope,
 } from "#/lib/types";
 import {
-	actionButtonClass,
 	cx,
-	eyebrowClass,
-	feedPageClass,
-	heroControlsClass,
-	heroCopyClass,
-	heroShellClass,
-	heroTitleClass,
-	inboxLaneClass,
-	navLinkActiveClass,
-	navLinkClass,
-	pageWrapClass,
-	segmentActiveClass,
-	segmentClass,
-	segmentedClass,
+	emptyStateClass,
+	feedClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	primaryButtonClass,
+	secondaryButtonClass,
+	tabButtonActiveClass,
+	tabButtonClass,
+	tabButtonIndicatorClass,
+	tabStripClass,
 	textFieldClass,
 	textFieldShortClass,
 	timestampClass,
@@ -32,6 +31,12 @@ export const Route = createFileRoute("/inbox")({
 	component: InboxRoute,
 });
 
+const TABS: Array<{ value: InboxKind; label: string }> = [
+	{ value: "mixed", label: "Mixed" },
+	{ value: "mentions", label: "Mentions" },
+	{ value: "dms", label: "DMs" },
+];
+
 function InboxRoute() {
 	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
 	const [items, setItems] = useState<InboxItem[]>([]);
@@ -70,7 +75,7 @@ function InboxRoute() {
 
 	const subtitle = useMemo(() => {
 		if (!meta || !stats) return "Ranking unreplied mentions and DMs...";
-		return `${stats.total} items in queue · ${stats.openai} OpenAI scored · ${meta.transport.statusText}`;
+		return `${String(stats.total)} in queue · ${String(stats.openai)} OpenAI scored · ${meta.transport.statusText}`;
 	}, [meta, stats]);
 
 	async function scoreNow() {
@@ -122,80 +127,87 @@ function InboxRoute() {
 	}
 
 	return (
-		<main className={pageWrapClass}>
-			<div className={feedPageClass}>
-				<section className={heroShellClass}>
-					<div>
-						<p className={eyebrowClass}>inbox</p>
-						<h2 className={heroTitleClass}>AI triage for mentions and DMs.</h2>
-						<p className={heroCopyClass}>{subtitle}</p>
-					</div>
-					<div className={heroControlsClass}>
-						<div className={segmentedClass}>
-							{(["mixed", "mentions", "dms"] as const).map((value) => (
-								<button
-									key={value}
-									className={cx(
-										segmentClass,
-										value === kind && segmentActiveClass,
-									)}
-									onClick={() => setKind(value)}
-									type="button"
-								>
-									{value}
-								</button>
-							))}
-						</div>
-						<input
-							className={cx(textFieldClass, textFieldShortClass)}
-							inputMode="numeric"
-							onChange={(event) => setMinScore(event.target.value)}
-							placeholder="Min AI score"
-							value={minScore}
-						/>
-						<button
-							className={cx(navLinkClass, hideLowSignal && navLinkActiveClass)}
-							onClick={() => setHideLowSignal((value) => !value)}
-							type="button"
-						>
-							{hideLowSignal ? "Hide low-signal" : "Show all"}
-						</button>
-						<button
-							className={actionButtonClass}
-							disabled={isScoring}
-							onClick={() => void scoreNow()}
-							type="button"
-						>
-							{isScoring ? "Scoring..." : "Score with OpenAI"}
-						</button>
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>Inbox</h1>
+						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
-				</section>
-
-				<section className={inboxLaneClass}>
-					{items.map((item) => (
-						<InboxCard
-							key={item.id}
-							isReplying={activeReplyId === item.id}
-							item={item}
-							onReplyChange={setReplyDraft}
-							onReplySend={() => void sendReply(item)}
-							onReplyToggle={() => {
-								if (activeReplyId === item.id) {
-									setActiveReplyId(null);
-									setReplyDraft("");
-									return;
-								}
-								setActiveReplyId(item.id);
+					<button
+						className={primaryButtonClass}
+						disabled={isScoring}
+						onClick={() => void scoreNow()}
+						type="button"
+					>
+						<Sparkles className="size-4" strokeWidth={2.2} />
+						{isScoring ? "Scoring..." : "Score with OpenAI"}
+					</button>
+				</div>
+				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
+					<input
+						className={cx(textFieldClass, textFieldShortClass)}
+						inputMode="numeric"
+						onChange={(event) => setMinScore(event.target.value)}
+						placeholder="Min AI score"
+						value={minScore}
+					/>
+					<button
+						className={secondaryButtonClass}
+						onClick={() => setHideLowSignal((value) => !value)}
+						type="button"
+						aria-pressed={hideLowSignal}
+					>
+						{hideLowSignal ? "Hide low-signal" : "Show all"}
+					</button>
+				</div>
+				<div className={tabStripClass}>
+					{TABS.map((tab) => {
+						const active = kind === tab.value;
+						return (
+							<button
+								key={tab.value}
+								type="button"
+								aria-pressed={active}
+								className={cx(tabButtonClass, active && tabButtonActiveClass)}
+								onClick={() => setKind(tab.value)}
+							>
+								<span className="relative inline-flex flex-col items-center justify-center py-1">
+									{tab.value}
+									{active ? <span className={tabButtonIndicatorClass} /> : null}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+			</header>
+			<section className={feedClass}>
+				{items.length === 0 ? (
+					<div className={emptyStateClass}>Inbox clear.</div>
+				) : null}
+				{items.map((item) => (
+					<InboxCard
+						key={item.id}
+						isReplying={activeReplyId === item.id}
+						item={item}
+						onReplyChange={setReplyDraft}
+						onReplySend={() => void sendReply(item)}
+						onReplyToggle={() => {
+							if (activeReplyId === item.id) {
+								setActiveReplyId(null);
 								setReplyDraft("");
-							}}
-							replyDraft={activeReplyId === item.id ? replyDraft : ""}
-						/>
-					))}
-				</section>
-			</div>
+								return;
+							}
+							setActiveReplyId(item.id);
+							setReplyDraft("");
+						}}
+						replyDraft={activeReplyId === item.id ? replyDraft : ""}
+					/>
+				))}
+			</section>
 			{isSendingReply ? (
-				<p className={timestampClass}>Sending reply...</p>
+				<p className={cx(timestampClass, "px-4 py-2")}>Sending reply...</p>
 			) : null}
-		</main>
+		</>
 	);
 }

package/src/routes/index.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { TimelineCard } from "#/components/TimelineCard";
 import type {
@@ -9,25 +10,31 @@ import type {
 } from "#/lib/types";
 import {
 	cx,
-	eyebrowClass,
-	feedPageClass,
-	heroControlsClass,
-	heroCopyClass,
-	heroShellClass,
-	heroTitleClass,
-	pageWrapClass,
-	segmentActiveClass,
-	segmentClass,
-	segmentedClass,
-	textFieldClass,
-	textFieldWideClass,
-	timelineLaneClass,
+	emptyStateClass,
+	feedClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
+	tabButtonActiveClass,
+	tabButtonClass,
+	tabButtonIndicatorClass,
+	tabStripClass,
 } from "#/lib/ui";
 
 export const Route = createFileRoute("/")({
 	component: HomeRoute,
 });
 
+const TABS: Array<{ value: ReplyFilter; label: string }> = [
+	{ value: "all", label: "All" },
+	{ value: "unreplied", label: "Unreplied" },
+	{ value: "replied", label: "Replied" },
+];
+
 function HomeRoute() {
 	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
 	const [items, setItems] = useState<TimelineItem[]>([]);
@@ -57,7 +64,7 @@ function HomeRoute() {
 
 	const subtitle = useMemo(() => {
 		if (!meta) return "Loading local context...";
-		return `${meta.stats.home} home items · ${meta.stats.needsReply} waiting on action · ${meta.transport.statusText}`;
+		return `${String(meta.stats.home)} items · ${String(meta.stats.needsReply)} waiting · ${meta.transport.statusText}`;
 	}, [meta]);
 
 	async function replyToTweet(tweetId: string) {
@@ -79,47 +86,53 @@ function HomeRoute() {
 	}
 
 	return (
-		<main className={pageWrapClass}>
-			<div className={feedPageClass}>
-				<section className={heroShellClass}>
-					<div>
-						<p className={eyebrowClass}>home timeline</p>
-						<h2 className={heroTitleClass}>
-							Read first. Act only where signal survives.
-						</h2>
-						<p className={heroCopyClass}>{subtitle}</p>
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>Home</h1>
+						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
-					<div className={heroControlsClass}>
+				</div>
+				<div className="px-4 pb-3">
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
 						<input
-							className={cx(textFieldClass, textFieldWideClass)}
+							className={searchFieldInputClass}
 							onChange={(event) => setSearch(event.target.value)}
 							placeholder="Search local timeline"
 							value={search}
 						/>
-						<div className={segmentedClass}>
-							{(["all", "replied", "unreplied"] as const).map((value) => (
-								<button
-									key={value}
-									className={cx(
-										segmentClass,
-										value === replyFilter && segmentActiveClass,
-									)}
-									onClick={() => setReplyFilter(value)}
-									type="button"
-								>
-									{value}
-								</button>
-							))}
-						</div>
-					</div>
-				</section>
-
-				<section className={timelineLaneClass}>
-					{items.map((item) => (
-						<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
-					))}
-				</section>
-			</div>
-		</main>
+					</label>
+				</div>
+				<div className={tabStripClass}>
+					{TABS.map((tab) => {
+						const active = replyFilter === tab.value;
+						return (
+							<button
+								key={tab.value}
+								type="button"
+								aria-pressed={active}
+								className={cx(tabButtonClass, active && tabButtonActiveClass)}
+								onClick={() => setReplyFilter(tab.value)}
+							>
+								<span className="relative inline-flex flex-col items-center justify-center py-1">
+									{tab.value}
+									{active ? <span className={tabButtonIndicatorClass} /> : null}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+			</header>
+			<section className={feedClass}>
+				{items.length === 0 ? (
+					<div className={emptyStateClass}>No posts to show.</div>
+				) : null}
+				{items.map((item) => (
+					<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
+				))}
+			</section>
+		</>
 	);
 }