valknarandClaude Sonnet 5
5484d3cefe
- Fix device rename input collapsing on mobile (fixed width vs w-full inside an auto-layout table column). - Add cascade-delete confirmation for sessions with a saved recording. - Fix header connection LED: derive state from scanning/device-count/ recording instead of the Buttplug client's raw connected flag; drop the label text and hide the indicator entirely when idle. - Add a per-device disconnect button (stop + remove from store, the closest equivalent Buttplug's protocol allows per device). - Fix replay ending early: duration now comes from the recording's actual durationMs, not the last event's timestamp. - Replay robustness: show which devices are being replayed to, reset actuators to zero on start/play/pause, fully disconnect devices and the whole client on stop/unmount, surface command failures via toast. - Stop flagging the header LED red during replay - recording is only for live sessions. - Add page-number pagination to recordings/sessions/devices lists. - Wordmark SEXY -> Sexy; add proper per-page <title>s including dynamic titles for recording/session detail and replay pages. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
interface PageNavProps {
|
|
basePath: string;
|
|
page: number;
|
|
pageSize: number;
|
|
total: number;
|
|
}
|
|
|
|
export function PageNav({ basePath, page, pageSize, total }: PageNavProps) {
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
if (totalPages <= 1) return null;
|
|
|
|
const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
|
|
const to = Math.min(page * pageSize, total);
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-4 pt-2">
|
|
<span className="bp-readout text-xs text-muted-foreground">
|
|
{from}-{to} of {total}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
{page > 1 ? (
|
|
<Button asChild variant="outline" size="icon-sm">
|
|
<Link href={`${basePath}?page=${page - 1}`} aria-label="Previous page">
|
|
<ChevronLeft className="size-3.5" />
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button variant="outline" size="icon-sm" disabled aria-label="Previous page">
|
|
<ChevronLeft className="size-3.5" />
|
|
</Button>
|
|
)}
|
|
<span className="bp-readout text-xs text-muted-foreground">
|
|
{page} / {totalPages}
|
|
</span>
|
|
{page < totalPages ? (
|
|
<Button asChild variant="outline" size="icon-sm">
|
|
<Link href={`${basePath}?page=${page + 1}`} aria-label="Next page">
|
|
<ChevronRight className="size-3.5" />
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button variant="outline" size="icon-sm" disabled aria-label="Next page">
|
|
<ChevronRight className="size-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|