valknarandClaude Sonnet 5
1bad1f4e33
Page title is now "{session name} - Replay" (matching generateMetadata)
instead of a bare "Replay" heading with the name duplicated inside a
Card title. Dropped that redundant outer Card - the pre-connection
scan/match buttons now sit in a flat row below the header, same as
Control's scan/record row, with the same "no devices connected" hint
card shown underneath when nothing's connected yet. Playback controls
once a replay starts still live in a card, matching DeviceCard's style.
Also gave "Match & replay" a Play icon.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { ReplayPlayerLoader } from "@/components/sessions/ReplayPlayerLoader";
|
|
import { getSessionName } from "@/lib/db/queries/sessions";
|
|
|
|
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
|
const { id } = await params;
|
|
const name = await getSessionName(Number(id));
|
|
return { title: name ? `${name} - Replay` : "Replay" };
|
|
}
|
|
|
|
export default async function ReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params;
|
|
const name = await getSessionName(Number(id));
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="font-heading text-2xl font-semibold">{name ?? `Session #${id}`} - Replay</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Connect the devices you want to replay onto, then match them to this session's original device
|
|
slots and play its recorded intensity back live over Web Bluetooth.
|
|
</p>
|
|
</div>
|
|
<ReplayPlayerLoader sessionId={Number(id)} />
|
|
</div>
|
|
);
|
|
}
|