Fix device/replay/session UX issues, add pagination, bump to 0.3.0
- 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>
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user