replay panel tweaking

This commit is contained in:
legop3
2026-01-13 19:24:25 -05:00
parent b8a4a18455
commit 399c077c7a
6 changed files with 34 additions and 40 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-FaKr6Sxz.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DAAnNTU0.css">
<script type="module" crossorigin src="/assets/index-Cvk-2BVU.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DPKQJjsh.css">
</head>
<body>
<div id="root"></div>
+1 -1
View File
@@ -72,7 +72,7 @@ export default function ControlSummary({ showRoster = true }) {
</div>
{showRoster ? (
<div className="grid gap-0.5 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
<div className="aspect-square">
<div>
<ReplaySourcesPanel />
</div>
<RoverRosterPanel />
+9 -15
View File
@@ -97,24 +97,19 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources' }) {
};
return (
<section className="panel h-full w-full">
<div className="flex h-full flex-col gap-0.5 p-0.75 text-sm">
<header className="flex items-center justify-between text-slate-300">
<span className="text-xs uppercase tracking-wide text-slate-400">Replay Sources</span>
<span className="text-xs text-slate-500">{sources.length}</span>
<section className="panel-section p-0.75 text-sm">
<header className="panel-muted flex items-center justify-between text-xs uppercase tracking-wide">
<span>Replay Sources</span>
<span>{sources.length}</span>
</header>
<div className="flex-1 overflow-auto pr-0.5">
<div className="space-y-0.5">
<GroupList title="Rovers" items={grouped.rovers} selected={selected} onToggle={toggleKey} />
<GroupList title="Room Cams" items={grouped.rooms} selected={selected} onToggle={toggleKey} />
</div>
<div className="space-y-0.25">
<button
type="button"
className={`w-full rounded border px-1 py-0.5 text-xs ${
replayDisabled
? 'border-slate-700 text-slate-500'
: 'border-slate-500 text-slate-200 hover:border-slate-300 hover:text-white'
}`}
className="button-dark w-full text-xs disabled:opacity-40"
onClick={handleReplay}
disabled={replayDisabled}
>
@@ -122,7 +117,6 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources' }) {
</button>
{error ? <div className="text-xs text-amber-400">{error}</div> : null}
</div>
</div>
</section>
);
}
@@ -130,11 +124,11 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources' }) {
function GroupList({ title, items, selected, onToggle }) {
if (!items.length) return null;
return (
<div className="mb-0.5 space-y-0.25">
<div className="text-xs uppercase text-slate-500">{title}</div>
<div className="space-y-0.25">
<div className="panel-muted text-xs uppercase">{title}</div>
<div className="space-y-0.25">
{items.map((item) => (
<label key={item.key} className="flex items-center gap-0.5 text-xs text-slate-200">
<label key={item.key} className="surface flex items-center gap-0.5 text-xs">
<input
type="checkbox"
checked={selected.includes(item.key)}