valknarandClaude Sonnet 5
fa04cb32b4
Every CardTitle now uses the default foreground color; only size marks the hierarchy (text-sm for stat-tile labels, text-base for section titles, text-2xl for the login wordmark) instead of some titles being muted-gray and others white. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { BrandMark } from "@/components/layout/BrandMark";
|
|
import { SessionsTable } from "@/components/sessions/SessionsTable";
|
|
import { listSessions } from "@/lib/db/queries/sessions";
|
|
import { getSessionsSummary } from "@/lib/db/queries/stats";
|
|
|
|
// Always reflects live DB state for an authenticated, single-tenant app -
|
|
// never worth prerendering (and the DB file doesn't exist at build time).
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function DashboardPage() {
|
|
const [sessions, summary] = await Promise.all([listSessions(), getSessionsSummary()]);
|
|
|
|
const recentSessions = [...sessions].reverse().slice(0, 5);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<Card className="bp-glass overflow-hidden">
|
|
<CardContent className="flex flex-col items-start gap-4 py-8">
|
|
<BrandMark size={48} animated className="rounded-[9px]" />
|
|
<h1 className="font-heading text-3xl font-semibold">Welcome back</h1>
|
|
<p className="max-w-xl text-sm text-muted-foreground">
|
|
Scan for nearby devices, take control, and replay completed sessions later - all running
|
|
directly from your browser over Web Bluetooth.
|
|
</p>
|
|
<Button asChild size="lg">
|
|
<Link href="/control">Start a session</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm">Completed sessions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
|
|
</Card>
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm">Total play time</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">
|
|
{(summary.totalDurationMs / 3_600_000).toFixed(1)}h
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-sm">Replays</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="bp-readout text-3xl">{summary.totalReplays}</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="bp-glass">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Recent sessions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-3">
|
|
<SessionsTable sessions={recentSessions} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|