birdclaw 0.5.0 → 0.5.1

package/src/routes/mentions.tsx

@@ -1,138 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { TimelineCard } from "#/components/TimelineCard";
-import type {
-	QueryEnvelope,
-	QueryResponse,
-	ReplyFilter,
-	TimelineItem,
-} from "#/lib/types";
-import {
-	cx,
-	emptyStateClass,
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-} from "#/lib/ui";
+import { TimelineRouteFrame } from "#/components/TimelineRouteFrame";
+import type { QueryEnvelope } from "#/lib/types";
 
 export const Route = createFileRoute("/mentions")({
 	component: MentionsRoute,
 });
 
-const TABS: Array<{ value: ReplyFilter; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "unreplied", label: "Unreplied" },
-	{ value: "replied", label: "Replied" },
-];
+function mentionsSubtitle(meta: QueryEnvelope | null) {
+	if (!meta) return "Loading mentions...";
+	return `${String(meta.stats.mentions)} mention/reply items in local store`;
+}
 
 function MentionsRoute() {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
-	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("unreplied");
-	const [search, setSearch] = useState("");
-	const [refreshTick, setRefreshTick] = useState(0);
-
-	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
-	}, []);
-
-	useEffect(() => {
-		const url = new URL("/api/query", window.location.origin);
-		url.searchParams.set("resource", "mentions");
-		url.searchParams.set("replyFilter", replyFilter);
-		url.searchParams.set("refresh", String(refreshTick));
-		if (search.trim()) {
-			url.searchParams.set("search", search.trim());
-		}
-
-		fetch(url)
-			.then((response) => response.json())
-			.then((data: QueryResponse) => setItems(data.items as TimelineItem[]));
-	}, [refreshTick, replyFilter, search]);
-
-	const subtitle = useMemo(() => {
-		if (!meta) return "Loading mentions...";
-		return `${String(meta.stats.mentions)} mention/reply items in local store`;
-	}, [meta]);
-
-	async function replyToTweet(tweetId: string) {
-		const text = window.prompt("Reply text");
-		if (!text?.trim()) return;
-
-		await fetch("/api/action", {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({
-				kind: "replyTweet",
-				accountId: "acct_primary",
-				tweetId,
-				text,
-			}),
-		});
-
-		setRefreshTick((value) => value + 1);
-	}
-
 	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Mentions</h1>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-				</div>
-				<div className="px-4 pb-3">
-					<label className={searchFieldShellClass}>
-						<Search className={searchFieldIconClass} strokeWidth={2} />
-						<input
-							className={searchFieldInputClass}
-							onChange={(event) => setSearch(event.target.value)}
-							placeholder="Search mentions"
-							value={search}
-						/>
-					</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 mentions in view.</div>
-				) : null}
-				{items.map((item) => (
-					<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
-				))}
-			</section>
-		</>
+		<TimelineRouteFrame
+			emptyDetail="Try All, search less narrowly, or sync mentions."
+			emptyLabel="No mentions in this view"
+			errorFallback="Mentions unavailable"
+			errorTitle="Could not load mentions"
+			initialReplyFilter="unreplied"
+			loadingDetail="Checking local mentions and reply context"
+			loadingLabel="Loading mentions"
+			resource="mentions"
+			searchPlaceholder="Search mentions"
+			subtitle={mentionsSubtitle}
+			syncKind="mentions"
+			syncLabel="Sync mentions"
+			title="Mentions"
+		/>
 	);
 }

package/src/styles.css

@@ -34,23 +34,24 @@
 	--ring: rgb(29 155 240 / 35%);
 	--shadow: rgb(15 20 25 / 6%);
 	--shadow-strong: rgb(15 20 25 / 12%);
+	--brand-shadow: rgb(29 155 240 / 22%);
 	--theme-switch-x: 50%;
 	--theme-switch-y: 50%;
 	color-scheme: light;
 }
 
 [data-theme="dark"] {
-	--bg: #000000;
-	--bg-elevated: #16181c;
-	--bg-hover: #16181c;
-	--bg-active: #1d1f23;
-	--panel: #000000;
-	--panel-strong: #16181c;
-	--line: #2f3336;
-	--line-strong: #536471;
-	--ink: #e7e9ea;
-	--ink-soft: #71767b;
-	--ink-mute: #5b6166;
+	--bg: #0b0f14;
+	--bg-elevated: #10151b;
+	--bg-hover: #141a21;
+	--bg-active: #18212a;
+	--panel: #0b0f14;
+	--panel-strong: #121820;
+	--line: #26323d;
+	--line-strong: #44515d;
+	--ink: #d8dee5;
+	--ink-soft: #8b98a5;
+	--ink-mute: #687480;
 	--accent: #1d9bf0;
 	--accent-hover: #1a8cd8;
 	--accent-press: #177cc1;
@@ -63,6 +64,7 @@
 	--ring: rgb(29 155 240 / 45%);
 	--shadow: rgb(0 0 0 / 60%);
 	--shadow-strong: rgb(0 0 0 / 80%);
+	--brand-shadow: rgb(29 155 240 / 36%);
 	color-scheme: dark;
 }
 
@@ -141,6 +143,62 @@ textarea {
 	}
 }
 
+@keyframes birdclaw-load-sway {
+	0%,
+	100% {
+		transform: translateY(0) rotate(-2deg) scale(1);
+	}
+
+	40% {
+		transform: translateY(-5px) rotate(3deg) scale(1.04);
+	}
+
+	70% {
+		transform: translateY(1px) rotate(-1deg) scale(0.99);
+	}
+}
+
+@keyframes birdclaw-load-glow {
+	0%,
+	100% {
+		opacity: 0.24;
+		transform: scale(0.82);
+	}
+
+	50% {
+		opacity: 0.46;
+		transform: scale(1.08);
+	}
+}
+
+.birdclaw-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 168px;
+}
+
+.birdclaw-mark::before {
+	content: "";
+	position: absolute;
+	inset: 16%;
+	z-index: -1;
+	border-radius: 999px;
+	background: var(--accent-soft);
+	filter: blur(14px);
+	opacity: 0.34;
+}
+
+.birdclaw-mark-animated {
+	animation: birdclaw-load-sway 1.7s ease-in-out infinite;
+	transform-origin: 50% 56%;
+}
+
+.birdclaw-mark-animated::before {
+	animation: birdclaw-load-glow 1.7s ease-in-out infinite;
+}
+
 html.theme-transition {
 	view-transition-name: theme;
 }
@@ -169,4 +227,9 @@ html.theme-transition::view-transition-new(theme) {
 	html.theme-transition::view-transition-new(theme) {
 		animation: none !important;
 	}
+
+	.birdclaw-mark-animated,
+	.birdclaw-mark-animated::before {
+		animation: none !important;
+	}
 }

package/vite.config.ts

@@ -4,6 +4,11 @@ import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
+const extraAllowedHosts =
+	process.env.BIRDCLAW_ALLOWED_HOSTS?.split(",")
+		.map((host) => host.trim())
+		.filter(Boolean) ?? [];
+
 const config = defineConfig({
 	plugins: [
 		devtools(),
@@ -18,6 +23,9 @@ const config = defineConfig({
 	resolve: {
 		tsconfigPaths: true,
 	},
+	server: {
+		allowedHosts: ["clawmac.sheep-coho.ts.net", ...extraAllowedHosts],
+	},
 });
 
 export default config;