From 1bad1f4e33706e01c9173c4df7249e682686623d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 31 Aug 2026 17:31:57 +0200
Subject: [PATCH] Streamline the Replay view with the Control view

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
---
 app/(app)/sessions/[id]/replay/page.tsx |  11 +-
 components/sessions/ReplayPlayer.tsx    | 196 ++++++++++++------------
 2 files changed, 110 insertions(+), 97 deletions(-)

diff --git a/app/(app)/sessions/[id]/replay/page.tsx b/app/(app)/sessions/[id]/replay/page.tsx
index 46eca40..fa8b231 100644
--- a/app/(app)/sessions/[id]/replay/page.tsx
+++ b/app/(app)/sessions/[id]/replay/page.tsx
@@ -5,14 +5,21 @@ 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 ? `Replay ${name}` : "Replay" };
+  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">
-      <h1 className="font-heading text-2xl font-semibold">Replay</h1>
+      <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&apos;s original device
+          slots and play its recorded intensity back live over Web Bluetooth.
+        </p>
+      </div>
       <ReplayPlayerLoader sessionId={Number(id)} />
     </div>
   );
diff --git a/components/sessions/ReplayPlayer.tsx b/components/sessions/ReplayPlayer.tsx
index 23cee3f..d1cc0cf 100644
--- a/components/sessions/ReplayPlayer.tsx
+++ b/components/sessions/ReplayPlayer.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
@@ -137,109 +137,115 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
 
   return (
     <div className="flex flex-col gap-6">
-      <Card className="bp-glass">
-        <CardHeader>
-          <CardTitle>{data.session.name ?? `Session #${data.session.id}`}</CardTitle>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          {!player ? (
-            <>
-              <p className="text-sm text-muted-foreground">
-                Connect the devices you want to replay onto, then match them to the session&apos;s
+      {!player ? (
+        <>
+          <div className="flex flex-wrap items-center gap-3">
+            <DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
+            <Button
+              onClick={async () => {
+                try {
+                  await getButtplugClientHandle();
+                  setShowRemap(true);
+                } catch {
+                  toast.error("Could not connect to Buttplug client");
+                }
+              }}
+              disabled={connectedDevices.length === 0 || starting}
+            >
+              {starting ? (
+                "Starting..."
+              ) : (
+                <>
+                  <Play className="size-3.5" /> Match & replay
+                </>
+              )}
+            </Button>
+          </div>
+
+          {connectedDevices.length === 0 && (
+            <Card className="bp-glass">
+              <CardContent className="py-6 text-sm text-muted-foreground">
+                No devices connected yet. Scan to discover nearby toys, then match them to this session&apos;s
                 original device slots.
-              </p>
-              <div className="flex items-center gap-3">
-                <DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
+              </CardContent>
+            </Card>
+          )}
+        </>
+      ) : (
+        <Card className="bp-glass">
+          <CardContent className="flex flex-col gap-3 py-6">
+            {replayTargets.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {replayTargets.map((t) => (
+                  <span
+                    key={t.slotLabel}
+                    className="bp-readout rounded-md border border-border bg-card/60 px-2 py-1 text-xs text-muted-foreground"
+                  >
+                    {t.slotLabel} → {t.deviceName}
+                  </span>
+                ))}
+              </div>
+            )}
+            <Slider
+              value={[elapsedMs]}
+              max={data.session.durationMs}
+              onValueChange={([v]) => player.seek(v)}
+            />
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <span className="bp-readout text-xs text-muted-foreground">
+                {formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
+              </span>
+              <div className="flex items-center gap-2">
                 <Button
+                  size="icon"
+                  variant="outline"
                   onClick={async () => {
-                    try {
-                      await getButtplugClientHandle();
-                      setShowRemap(true);
-                    } catch {
-                      toast.error("Could not connect to Buttplug client");
+                    if (playing) {
+                      player.pause();
+                      setPlaying(false);
+                    } else {
+                      player.play();
+                      setPlaying(true);
                     }
+                    // Toggling either way leaves the toy holding whatever intensity was
+                    // last sent - zero it out so pause always actually stops the device,
+                    // and resume always starts from a clean, known state.
+                    await resetReplayDevices();
                   }}
-                  disabled={connectedDevices.length === 0 || starting}
+                  aria-label={playing ? "Pause" : "Play"}
                 >
-                  {starting ? "Starting..." : "Match devices & replay"}
+                  {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={async () => {
+                    player.stop();
+                    setPlaying(false);
+                    setElapsedMs(0);
+                    // Fully disconnect every device that took part in this replay,
+                    // not just stop the player - see handleDisconnectDevice in
+                    // ButtplugConsole for why "stop + remove from store" is the
+                    // closest equivalent Buttplug's protocol allows per-device.
+                    await Promise.all(
+                      replayDeviceIndexes.map(async (deviceIndex) => {
+                        const liveDevice = await getDevice(deviceIndex);
+                        await liveDevice?.stop().catch(() => {});
+                        removeDevice(deviceIndex);
+                      }),
+                    );
+                    setPlayer(null);
+                    setReplayTargets([]);
+                    setReplayDeviceIndexes([]);
+                  }}
+                >
+                  Stop
                 </Button>
               </div>
-            </>
-          ) : (
-            <div className="flex flex-col gap-3">
-              {replayTargets.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {replayTargets.map((t) => (
-                    <span
-                      key={t.slotLabel}
-                      className="bp-readout rounded-md border border-border bg-card/60 px-2 py-1 text-xs text-muted-foreground"
-                    >
-                      {t.slotLabel} → {t.deviceName}
-                    </span>
-                  ))}
-                </div>
-              )}
-              <Slider
-                value={[elapsedMs]}
-                max={data.session.durationMs}
-                onValueChange={([v]) => player.seek(v)}
-              />
-              <div className="flex items-center justify-between">
-                <span className="bp-readout text-xs text-muted-foreground">
-                  {formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
-                </span>
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="icon"
-                    variant="outline"
-                    onClick={async () => {
-                      if (playing) {
-                        player.pause();
-                        setPlaying(false);
-                      } else {
-                        player.play();
-                        setPlaying(true);
-                      }
-                      // Toggling either way leaves the toy holding whatever intensity was
-                      // last sent - zero it out so pause always actually stops the device,
-                      // and resume always starts from a clean, known state.
-                      await resetReplayDevices();
-                    }}
-                    aria-label={playing ? "Pause" : "Play"}
-                  >
-                    {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={async () => {
-                      player.stop();
-                      setPlaying(false);
-                      setElapsedMs(0);
-                      // Fully disconnect every device that took part in this replay,
-                      // not just stop the player - see handleDisconnectDevice in
-                      // ButtplugConsole for why "stop + remove from store" is the
-                      // closest equivalent Buttplug's protocol allows per-device.
-                      await Promise.all(
-                        replayDeviceIndexes.map(async (deviceIndex) => {
-                          const liveDevice = await getDevice(deviceIndex);
-                          await liveDevice?.stop().catch(() => {});
-                          removeDevice(deviceIndex);
-                        }),
-                      );
-                      setPlayer(null);
-                      setReplayTargets([]);
-                      setReplayDeviceIndexes([]);
-                    }}
-                  >
-                    Stop
-                  </Button>
-                </div>
-              </div>
             </div>
-          )}
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      )}
 
       <DeviceRemapDialog
         open={showRemap}