exe.dev user
0a18c774a5
CI / build (push) Successful in 4m26s
Adds a Postgres-backed quotes domain (poems/quotes/favorites) exposed as five agent-native actions (list-quotes, get-random-quote, create-quote, toggle-favorite, list-favorites) callable from both chat and the React UI via useActionQuery/useActionMutation. Moves the primary UI from chat to a mobile-first Quotes/Favorites experience (chat moves to /chat), adds manual OpenTelemetry instrumentation exporting traces/metrics/logs over OTLP, and wires a local Docker Postgres for shared state.
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useActionQuery } from "@agent-native/core/client/hooks";
|
|
import { IconHeart } from "@tabler/icons-react";
|
|
|
|
import { QuoteCard } from "@/components/quotes/QuoteCard";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { useVisitorId } from "@/lib/visitor-id";
|
|
|
|
export function meta() {
|
|
return [{ title: "Favorites — Verse" }];
|
|
}
|
|
|
|
export function HydrateFallback() {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function FavoritesRoute() {
|
|
const visitorId = useVisitorId();
|
|
const { data: quotes, isLoading } = useActionQuery(
|
|
"list-favorites",
|
|
{ visitorId },
|
|
{ enabled: Boolean(visitorId) },
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto flex max-w-4xl flex-col gap-6 p-4 sm:p-6">
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-2xl font-semibold tracking-tight">Favorites</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Quotes you've saved on this device.
|
|
</p>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{Array.from({ length: 2 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-48 w-full" />
|
|
))}
|
|
</div>
|
|
) : !quotes || quotes.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
|
|
<IconHeart className="size-8" />
|
|
<p className="text-sm">
|
|
No favorites yet — tap the heart on any quote to save it here.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{quotes.map((quote) => (
|
|
<QuoteCard key={quote.id} quote={quote} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|