legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

LOTS OF STYLING STUFF FINALLY THAT I HAD TO DO FINALYL AAUUFH

Browse Source
This commit is contained in:
legop3
2026-06-01 23:21:44 -04:00
parent 2e83a142ec
commit 56607f41ec
25 changed files with 169 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/App.jsx
+1 -1
View File
@@ -81,7 +81,7 @@ function DesktopLayout({ layout, onOpenHelpOverlay }) {
<div className={`flex min-w-0 flex-[1.22] flex-col ${themeGapClass} overflow-y-auto pr-0`}>
<DriverVideo />
<TelemetryPanel />
<LogPanel />
{/* <LogPanel /> */}
</div>
<div className={`flex min-w-0 flex-1 flex-col ${themeGapClass} overflow-y-auto`}>
<GlobalObjectiveBanner layout={layout} />
webui/src/components/AdminPanel/AdminIpLogPanel.jsx
+6 -8
View File
@@ -1,15 +1,13 @@
// Admin Ip Log Panel
// Purpose: Defines the Admin Ip Log Panel module and the local helpers/components used in this file.
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
import CardFrame from '../CardFrame/index.jsx';
export default function AdminIpLogPanel({ entries }) {
const logs = entries || [];
return (
<div className="panel-section space-y-0.5 text-base">
<div className="flex items-center justify-between text-sm text-slate-400">
<span>Admin IP log</span>
<span>{logs.length}</span>
</div>
<div className="surface h-64 overflow-y-auto font-mono text-xs">
<CardFrame title="Admin IP log" meta={logs.length} bodyClassName="space-y-0.5 text-base">
<div className="h-64 overflow-y-auto font-mono text-xs">
{logs.length === 0 ? (
<p>No admin log entries yet.</p>
) : (
@@ -17,7 +15,7 @@ export default function AdminIpLogPanel({ entries }) {
.slice()
.reverse()
.map((entry) => (
<div key={entry.id} className="surface">
<div key={entry.id}>
<span className="text-amber-400">{entry.ts ? new Date(entry.ts).toLocaleTimeString() : '--'}</span>{' '}
{entry.label && <span className="text-teal-400">[{entry.label}]</span>}{' '}
<span className="text-slate-200">{entry.message}</span>{' '}
@@ -28,6 +26,6 @@ export default function AdminIpLogPanel({ entries }) {
)}
</div>
<p className="text-xs text-slate-500">Admin-only log stream; IPs never appear in user data.</p>
</div>
</CardFrame>
);
}
webui/src/components/AdminPanel/AdminPanelContent.jsx
+7 -6
View File
@@ -8,6 +8,7 @@ import LlmCommentaryPanel from './LlmCommentaryPanel.jsx';
import OverseerControlPanel from './OverseerControlPanel.jsx';
import ReplaySnapshotHealth from './ReplaySnapshotHealth.jsx';
import AdminIpLogPanel from './AdminIpLogPanel.jsx';
import CardFrame from '../CardFrame/index.jsx';
const MODES = [
{ key: 'open', label: 'Open' },
@@ -279,10 +280,7 @@ export default function AdminPanelContent() {
if (!isAdmin) return null;
return (
<section className="panel-section space-y-0.5 text-base">
<div className="flex items-center justify-between gap-0.5 text-sm">
<span>Admin controls</span>
const actions = (
<select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
{MODES.map((mode) => (
<option key={mode.key} value={mode.key}>
@@ -290,7 +288,10 @@ export default function AdminPanelContent() {
</option>
))}
</select>
</div>
);
return (
<CardFrame title="Admin controls" actions={actions} bodyClassName="space-y-0.5 text-base">
<div className="flex gap-0.5 text-xs">
<button
type="button"
@@ -514,6 +515,6 @@ export default function AdminPanelContent() {
clearingHistory={clearingOverseerHistory}
/>
<AdminIpLogPanel entries={adminLogs} />
</section>
</CardFrame>
);
}
webui/src/components/AuthPanel/index.jsx
+4 -4
View File
@@ -3,9 +3,10 @@
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
import { useState } from 'react';
import { useSessionActions } from '../../context/SessionContext.jsx';
import CardFrame from '../CardFrame/index.jsx';
export default function AuthPanel() {
const { login, setRole } = useSessionActions();
const { login } = useSessionActions();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
@@ -25,8 +26,7 @@ export default function AuthPanel() {
}
return (
<div className="panel-section space-y-0.5 text-base">
<p className="text-sm text-slate-400">Admin login</p>
<CardFrame title="Admin login" bodyClassName="space-y-0.5 text-base">
<form className="flex flex-col gap-0.5" onSubmit={handleLogin}>
<input
className="field-input"
@@ -53,6 +53,6 @@ export default function AuthPanel() {
Spectator
</button>
</div> */}
</div>
</CardFrame>
);
}
webui/src/components/CameraTiltControl/index.jsx
+7 -3
View File
@@ -10,7 +10,7 @@ function formatDegrees(value) {
function KeyPill({ label }) {
if (!label) return null;
return <span className="rounded border border-white/40 px-1 text-[0.7rem] text-white">{label}</span>;
return <span className="rounded bg-slate-800 px-1 py-0.5 text-[0.6rem] font-semibold text-slate-200">{label}</span>;
}
export default function CameraTiltControl({
@@ -143,10 +143,14 @@ export default function CameraTiltControl({
}
return (
<div className={`space-y-0.5 ${className}`.trim()}>
<div className={`space-y-0.5 ${disabled ? 'opacity-50' : ''} ${className}`.trim()}>
<div className={`flex items-center justify-between ${labelRowClass}`.trim()}>
<span className={labelClass}>{label}</span>
{showValue ? <span className={valueClass}>{formatDegrees(value)}</span> : null}
{showValue ? (
<span className={`rounded bg-slate-800 px-1 py-0.5 text-[0.7rem] font-semibold ${valueClass}`.trim()}>
{formatDegrees(value)}
</span>
) : null}
</div>
<div>
{slider}
webui/src/components/CardFrame/index.jsx
+2 -2
View File
@@ -53,14 +53,14 @@ export default function CardFrame({
const cardStyle = accentRgb ? { borderColor: rgba(accentRgb, 0.35) } : undefined;
const headerStyle = accentRgb
? {
backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 58%, ${rgba(accentRgb, 0.18)} 100%)`,
backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 30%, ${rgba(accentRgb, 0.28)} 100%)`,
}
: undefined;
return (
<section
className={cx(
'panel-section border border-neutral-500/60 bg-neutral-900/95',
'panel-section border-2 border-neutral-500/60 bg-neutral-900/95',
clipOverflow ? 'overflow-hidden' : 'overflow-visible',
fillHeight && 'flex h-full min-h-0 flex-col',
className,
webui/src/components/ChatMessageRow/index.jsx
+3 -3
View File
@@ -121,15 +121,15 @@ export function ChatIdentity({ message, toolsToggle = null }) {
function chatRowClass(message) {
if (isBotMessage(message)) {
return 'surface-muted flex flex-col gap-0.5 border border-emerald-500/40 bg-emerald-900/15 text-sm';
return 'flex flex-col gap-0.5 rounded-md border border-emerald-500/40 bg-emerald-950 px-0.5 py-0.5 text-sm text-neutral-100';
}
const isAdmin =
message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin';
return `surface-muted flex flex-col gap-0.5 text-sm ${
return `flex flex-col gap-0.5 rounded-md bg-neutral-800 px-0.5 py-0.5 text-sm text-neutral-100 ${
isAdmin
? 'border border-amber-400/30'
: message.fromDiscord
? 'border border-indigo-400/30 bg-indigo-900/20'
? 'border border-indigo-400/30 bg-indigo-950'
: ''
}`;
}
webui/src/components/ChatPanel/index.jsx
+1 -1
View File
@@ -154,7 +154,7 @@ export default function ChatPanel({
fillHeight={fillHeight}
bodyClassName="space-y-0.5 text-base"
>
<div className={`surface overflow-y-auto space-y-0.5 px-0 ${listClass}`} ref={listRef}>
<div className={`overflow-y-auto space-y-0.5 px-0 ${listClass}`} ref={listRef}>
{sorted.length === 0 && typingRows.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p>
) : (
webui/src/components/DriverVideo/index.jsx
+5 -4
View File
@@ -10,6 +10,7 @@ import OvercurrentOverlay from '../HudOverlays/OvercurrentOverlay/index.jsx';
import LowBatteryOverlay from '../HudOverlays/LowBatteryOverlay/index.jsx';
import DriverBottomStrip from '../HudOverlays/DriverBottomStrip/index.jsx';
import HudChatInput from '../HudOverlays/HudChatInput/index.jsx';
import CardFrame from '../CardFrame/index.jsx';
export default function DriverVideo({ layoutFormat = 'desktop' }) {
const roverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
@@ -20,7 +21,7 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
if (!roverId) {
return (
<section className="panel">
<CardFrame hideHeader className="shrink-0">
<div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">
<p>You are not assigned to a rover.</p>
<p className="mt-0">
@@ -29,13 +30,13 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
</a>
</p>
</div>
</section>
</CardFrame>
);
}
const mobileHud = layoutFormat !== 'desktop';
return (
<section className="panel">
<CardFrame hideHeader className="shrink-0">
<div className="flex flex-col gap-0.5">
<div className="relative w-full overflow-hidden bg-black aspect-[4/3]">
<RoverMediaPlayer roverId={roverId} videoMode={videoMode} />
@@ -58,6 +59,6 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
</div>
<DriverBottomStrip mobileHud={mobileHud} />
</div>
</section>
</CardFrame>
);
}
webui/src/components/GamepadMappingSettings/GamepadMappingSettingsContent.jsx
+16 -19
View File
@@ -9,6 +9,7 @@ import {
createProfileForPad,
} from '../../controls/inputs/gamepadBindings.js';
import { useGamepadHubState } from '../../controls/inputs/gamepadHub.js';
import CardFrame from '../CardFrame/index.jsx';
import SliderField from './SliderField.jsx';
import { ACTIONS, NUMBER_FORMAT } from './constants.js';
import {
@@ -222,20 +223,16 @@ export default function GamepadMappingSettings() {
}, [activePad, activeProfile]);
return (
<section className="panel-section space-y-0.5 text-sm">
<div className="flex items-center justify-between">
<div>
<p className="text-xs text-slate-400">Controller</p>
<p className="text-[0.65rem] text-slate-500">
{activePad ? 'Move sticks or press buttons to bind' : 'Connect a controller to configure.'}
</p>
{captureAction && (
<p className="mt-0 text-[0.7rem] text-emerald-400">Capturing {captureAction.label}…</p>
)}
</div>
</div>
<CardFrame
title="Controller"
meta={activePad ? 'Move sticks or press buttons to bind' : 'Connect a controller to configure.'}
bodyClassName="space-y-0.5 text-sm"
>
{captureAction && (
<p className="mt-0 text-[0.7rem] text-emerald-400">Capturing {captureAction.label}…</p>
)}
<div className="space-y-0.5 surface">
<div className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">Connected controller</p>
{hubState.pads.length === 0 ? (
<p className="text-[0.7rem] text-slate-400">No controller detected.</p>
@@ -257,7 +254,7 @@ export default function GamepadMappingSettings() {
)}
</div>
<div className="space-y-0.5 surface">
<div className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">Calibration</p>
<div className="space-y-0.5">
<SliderField
@@ -296,7 +293,7 @@ export default function GamepadMappingSettings() {
value={activeProfile.calibration?.auxSideScale ?? 0.55}
onChange={(value) => updateCalibration({ auxSideScale: value })}
/>
<label className="surface-muted block p-0.5">
<label className="block p-0.5">
<div className="flex items-center justify-between text-xs text-slate-300">
<span className="font-semibold text-slate-100">Camera mode</span>
<select
@@ -324,14 +321,14 @@ export default function GamepadMappingSettings() {
<div className="space-y-0.5">
{Object.entries(grouped).map(([section, actions]) => (
<div key={section} className="space-y-0.5 surface">
<div key={section} className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">{section}</p>
<div className="space-y-0.5">
{actions.map((action) => {
const binding = activeProfile.bindings?.[action.id];
const source = binding?.sources?.[0] ?? null;
return (
<div key={action.id} className="surface-muted flex items-center justify-between text-xs">
<div key={action.id} className="flex items-center justify-between text-xs">
<div>
<p className="font-semibold text-slate-100">{action.label}</p>
<p className="text-[0.65rem] text-slate-400">{formatSource(source)}</p>
@@ -390,7 +387,7 @@ export default function GamepadMappingSettings() {
))}
</div>
<div className="space-y-0.5 surface">
<div className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">Diagnostics</p>
{!activePad ? (
<p className="text-[0.7rem] text-slate-400">No controller detected.</p>
@@ -435,6 +432,6 @@ export default function GamepadMappingSettings() {
</div>
)}
</div>
</section>
</CardFrame>
);
}
webui/src/components/GamepadMappingSettings/SliderField.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { NUMBER_FORMAT } from './constants.js';
export default function SliderField({ label, description, min, max, step, value, onChange }) {
return (
<label className="surface-muted block p-0.5">
<label className="block p-0.5">
<div className="flex items-center justify-between text-xs text-slate-300">
<span className="font-semibold text-slate-100">{label}</span>
<span className="font-mono text-slate-400">{NUMBER_FORMAT.format(value)}</span>
webui/src/components/HelpPanel/index.jsx
+13 -12
View File
@@ -2,24 +2,25 @@
// Purpose: Defines the Help Panel module and the local helpers/components used in this file.
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
import { useControlSystem } from '../../controls/index.js';
import CardFrame from '../CardFrame/index.jsx';
import HelpContentView from '../HelpContentView/index.jsx';
export default function HelpPanel({ layout, onOpenOverlay }) {
const { state } = useControlSystem();
const actions = (
<button
type="button"
onClick={onOpenOverlay}
className="button-dark px-1 py-0.25 text-[0.75rem]"
>
Open full help
</button>
);
return (
<section className="panel-section space-y-0.5 text-sm">
<div className="flex items-center justify-between text-xs text-slate-400">
<span>Help</span>
<button
type="button"
onClick={onOpenOverlay}
className="button-dark px-1 py-0.25 text-[0.75rem]"
>
Open full help
</button>
</div>
<CardFrame title="Help" actions={actions} bodyClassName="space-y-0.5 text-sm">
<HelpContentView layout={layout} keymap={state?.keymap || {}} />
</section>
</CardFrame>
);
}
webui/src/components/HomeAssistantControls/index.jsx
+2 -2
View File
@@ -104,8 +104,8 @@ function EntityRow({ entity, connected, controlsLocked, onToggle, onSetColor, on
: controlsLocked
? 'border-slate-800 bg-slate-900 text-slate-300 cursor-not-allowed'
: isOn
? 'border-emerald-700 bg-emerald-900/80 text-emerald-50 hover:bg-emerald-800'
: 'border-rose-800 bg-rose-900/80 text-rose-50 hover:bg-rose-800';
? 'border-emerald-700 bg-emerald-900 text-emerald-50 hover:bg-emerald-800'
: 'border-rose-800 bg-rose-900 text-rose-50 hover:bg-rose-800';
useEffect(() => {
if (!supportsColor || draggingRef.current) return;
webui/src/components/HudOverlays/DriverBottomStrip/index.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function DriverBottomStrip({ roverId = null, mobileHud = false })
return (
<div className="space-y-0.5">
<LightBumpBars roverId={effectiveRoverId} />
<div className="panel-section space-y-0.5 text-sm">
<div className="space-y-0.5 text-sm">
<BatteryBar visual={batteryVisual} compact={mobileHud} />
</div>
</div>
webui/src/components/KeymapSettings/index.jsx
+14 -13
View File
@@ -8,6 +8,7 @@ import { canonicalizeKeyInput, formatKeyLabel } from '../../controls/keymapUtils
import { setKeyboardCaptureLocked } from '../../controls/inputs/keyboardCaptureLock.js';
import { useSettingsNamespace } from '../../settings/index.js';
import { INPUT_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
import CardFrame from '../CardFrame/index.jsx';
const KEY_ACTIONS = [
{ id: 'driveForward', label: 'Drive Forward', group: 'Driving' },
@@ -118,7 +119,7 @@ function useKeyCapture(onCapture) {
function SpeedField({ label, description, value, onChange, min = 0, max = 500, step = 5 }) {
return (
<label className="surface-muted block p-0.5">
<label className="block p-0.5">
<div className="flex items-center justify-between text-xs text-slate-300">
<span className="font-semibold text-slate-100">{label}</span>
<input
@@ -212,17 +213,17 @@ export default function KeymapSettings() {
);
return (
<section className="panel-section space-y-0.5 text-sm">
<div className="flex items-center justify-between">
<div>
<p className="text-xs text-slate-400">Keyboard layout</p>
<p className="text-[0.7rem] text-slate-500">Per-browser · click to change a binding</p>
</div>
<CardFrame
title="Keyboard layout"
meta="Per-browser · click to change a binding"
actions={
<button type="button" onClick={() => resetKeyBindings()} className="button-dark text-xs">
Reset defaults
</button>
</div>
<div className="space-y-0.5 surface">
}
bodyClassName="space-y-0.5 text-sm"
>
<div className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">Keyboard speeds</p>
<div className="space-y-0.5">
<SpeedField
@@ -245,7 +246,7 @@ export default function KeymapSettings() {
/>
</div>
</div>
<div className="space-y-0.5 surface">
<div className="space-y-0.5">
<p className="text-[0.7rem] text-slate-500">Camera tilt</p>
<SpeedField
label="Tilt speed"
@@ -259,14 +260,14 @@ export default function KeymapSettings() {
</div>
<div className="space-y-0.5">
{Object.entries(grouped).map(([group, actions]) => (
<div key={group} className="space-y-0.5 surface">
<div key={group} className="space-y-0.5">
<p className="text-[0.75rem] text-slate-400">{group}</p>
<div className="space-y-0.5">
{actions.map((action) => {
const value = currentKey(action.id);
const isActive = active === action.id;
return (
<div key={action.id} className="surface-muted flex items-center justify-between text-xs">
<div key={action.id} className="flex items-center justify-between text-xs">
<div>
<p className="font-semibold text-slate-100">{action.label}</p>
<p className="text-[0.65rem] text-slate-400">{formatKeyLabel(value)}</p>
@@ -294,6 +295,6 @@ export default function KeymapSettings() {
</div>
))}
</div>
</section>
</CardFrame>
);
}
webui/src/components/OvercurrentLimiterPanel/index.jsx
+9 -8
View File
@@ -4,6 +4,7 @@
import { useMemo } from 'react';
import { useControlSystem } from '../../controls/index.js';
import { OVERCURRENT_GROUPS } from '../../controls/overcurrentLimiter.js';
import CardFrame from '../CardFrame/index.jsx';
const GROUP_LABELS = {
drive: 'Drive wheels',
@@ -32,11 +33,11 @@ export default function OvercurrentLimiterPanel() {
const groups = useMemo(() => OVERCURRENT_GROUPS.map((group) => group.key), []);
return (
<section className="panel-section space-y-0.5 text-sm">
<div className="flex items-center justify-between text-xs text-slate-400">
<span>Overcurrent limiter</span>
<span>{overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}</span>
</div>
<CardFrame
title="Overcurrent limiter"
meta={overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}
bodyClassName="space-y-0.5 text-sm"
>
{!roverId ? (
<p className="text-xs text-slate-500">Assign a rover to view limiter status.</p>
) : (
@@ -46,7 +47,7 @@ export default function OvercurrentLimiterPanel() {
const over = overcurrentLimiter?.overcurrent?.groups?.[key] ?? false;
const scale = overcurrentLimiter?.scales?.perGroup?.[key] ?? 1;
return (
<div key={key} className="surface space-y-0.5">
<div key={key} className="space-y-0.5">
<div className="flex items-center justify-between text-xs">
<span className="text-slate-200">{GROUP_LABELS[key] || key}</span>
<span className={over ? 'text-red-300' : 'text-slate-400'}>
@@ -67,13 +68,13 @@ export default function OvercurrentLimiterPanel() {
</div>
);
})}
<div className="surface text-[0.7rem] text-slate-400">
<div className="text-[0.7rem] text-slate-400">
<div>{`Down rate ${overcurrentLimiter?.config?.downRatePerSec}/s · Up rate ${overcurrentLimiter?.config?.upRatePerSec}/s`}</div>
<div>{`Release delay ${overcurrentLimiter?.config?.releaseDelaySec}s`}</div>
<div>{`Output rate ${overcurrentLimiter?.config?.outputRateMs}ms`}</div>
</div>
</div>
)}
</section>
</CardFrame>
);
}
webui/src/components/RawUserPilePanel/index.jsx
+3 -3
View File
@@ -70,7 +70,7 @@ export default function RawUserPilePanel({
<div className="space-y-0.5">
<div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<div className="min-w-0">
<div className="surface flex w-full items-center px-0 py-0">
<div className="flex w-full items-center px-0 py-0">
<NicknameForm compact={compact} />
</div>
</div>
@@ -82,7 +82,7 @@ export default function RawUserPilePanel({
<div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
<div
className={`surface flex flex-wrap content-start items-start gap-0.5 px-0 pb-0 ${baseListClass} ${compact ? 'text-[0.8rem]' : ''}`}
className={`flex flex-wrap content-start items-start gap-0.5 px-0 pb-0 ${baseListClass} ${compact ? 'text-[0.8rem]' : ''}`}
>
{sorted.length === 0 ? (
<p className="text-sm text-slate-500">Waiting for users…</p>
@@ -90,7 +90,7 @@ export default function RawUserPilePanel({
sorted.map((user) => (
<span
key={user.socketId}
className={`rounded bg-slate-800/80 px-1 py-0.25 text-[0.7rem] ${roleColors(user.role)}`}
className={`rounded px-1 py-0.25 text-[0.7rem] ${roleColors(user.role)}`}
>
{formatLabel(user, selfId)}
</span>
webui/src/components/RightPaneTabs/index.jsx
+12 -7
View File
@@ -76,10 +76,15 @@ function DriveDockPanel() {
const cameraDisabled = Boolean(!roverId || dockAssist.cameraLocked);
return (
<section className={`panel-section grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] ${themeGapClass}`}>
<CardFrame
hideHeader
className="h-full"
bodyClassName={`grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] ${themeGapClass}`}
>
<DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
{!hideInlineControls ? (
<div className={`surface ${themeStackClass} p-0 text-sm text-slate-200`}>
<div className={`${themeStackClass} p-0 text-sm text-slate-200`}>
{nightVisionAvailable && (
<NightVisionControl
nightVisionOn={nightVisionState?.nightVisionOn}
@@ -108,18 +113,18 @@ function DriveDockPanel() {
onChange={setServoAngle}
keyDownLabel={downLabel}
keyUpLabel={upLabel}
className={`${themeStackClass} px-1 py-1`}
labelRowClass="text-xs text-slate-300"
labelClass=""
className={`${themeStackClass} rounded-xl border-2 border-emerald-300/70 bg-emerald-900 px-1 py-1 text-emerald-50`}
labelRowClass="text-xs text-emerald-100"
labelClass="text-sm font-semibold"
valueClass="font-mono text-slate-100"
sliderClass="w-full"
accentClass="accent-emerald-400"
endpointClass="text-[0.7rem] text-slate-400"
endpointClass="text-[0.7rem] text-emerald-100/80"
/>
)}
</div>
) : null}
</section>
</CardFrame>
);
}
webui/src/components/RoomCameraPanel/index.jsx
+3 -3
View File
@@ -10,10 +10,10 @@ import CardFrame from '../CardFrame/index.jsx';
function EmptyState() {
return (
<div className="panel-section space-y-0.5 text-sm">
<CardFrame title="Room cameras" bodyClassName="space-y-0.5 text-sm">
<p className="text-center text-slate-400">No room cameras configured.</p>
<p className="text-center text-slate-500">Add entries to server config to populate this list.</p>
</div>
</CardFrame>
);
}
@@ -97,7 +97,7 @@ export default function RoomCameraPanel({
{cameras.map((camera) => {
const feed = feedMap[camera.id] || null;
return (
<article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
<article key={camera.id} className="w-full space-y-0.5 p-0.5">
{/* <header className="space-y-0.5">
<p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
{camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}
webui/src/components/SessionSnapshot/index.jsx
+4 -4
View File
@@ -3,16 +3,16 @@
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
import { useMemo } from 'react';
import { useSession } from '../../context/SessionContext.jsx';
import CardFrame from '../CardFrame/index.jsx';
export default function SessionSnapshot() {
const { session } = useSession();
const payload = useMemo(() => JSON.stringify(session ?? {}, null, 2), [session]);
return (
<div className="panel-section flex min-h-0 flex-col gap-0.5 text-xs">
<p className="text-sm text-slate-400">Session snapshot</p>
<pre className="surface min-h-0 flex-1 overflow-y-auto font-mono text-[0.7rem] text-lime-300">
<CardFrame title="Session snapshot" className="min-h-0" bodyClassName="flex min-h-0 flex-col gap-0.5 text-xs">
<pre className="min-h-0 flex-1 overflow-y-auto font-mono text-[0.7rem] text-lime-300">
{payload}
</pre>
</div>
</CardFrame>
);
}
webui/src/components/SettingsPanel/index.jsx
+17 -23
View File
@@ -11,6 +11,7 @@ import OvercurrentLimiterPanel from '../OvercurrentLimiterPanel/index.jsx';
import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx';
import SessionSnapshot from '../SessionSnapshot/index.jsx';
import SocketLogPanel from '../SocketLogPanel/index.jsx';
import CardFrame from '../CardFrame/index.jsx';
import { useHudMapSetting } from '../../hooks/useHudMapSetting.js';
import { useSettingsNamespace } from '../../settings/index.js';
import { useSocket } from '../../context/SocketContext.jsx';
@@ -121,8 +122,7 @@ export default function SettingsPanel() {
</TabPanel>
<TabPanel id="page">
<div className="space-y-0.5">
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">HUD</p>
<CardFrame title="HUD" bodyClassName="space-y-0.5 text-sm">
<label className="flex items-center gap-0.5 text-slate-200">
<input
type="checkbox"
@@ -133,9 +133,8 @@ export default function SettingsPanel() {
<span>Show top-down map in HUD (desktop)</span>
</label>
<p className="text-xs text-slate-500">Mobile HUD keeps the map on by default.</p>
</section>
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Mobile controls</p>
</CardFrame>
<CardFrame title="Mobile controls" bodyClassName="space-y-0.5 text-sm">
<label className="flex items-center gap-0.5 text-slate-200">
<input
type="checkbox"
@@ -145,9 +144,8 @@ export default function SettingsPanel() {
/>
<span>Swap control columns (put joystick on the left)</span>
</label>
</section>
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Macros</p>
</CardFrame>
<CardFrame title="Macros" bodyClassName="space-y-0.5 text-sm">
<label className="flex items-center gap-0.5 text-slate-200">
<input
type="checkbox"
@@ -157,9 +155,8 @@ export default function SettingsPanel() {
/>
<span>Enable backward bump in drive macro</span>
</label>
</section>
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Audio</p>
</CardFrame>
<CardFrame title="Audio" bodyClassName="space-y-0.5 text-sm">
<label className="grid gap-0.5 text-slate-200">
<div className="flex items-center justify-between gap-0.5">
<span>Master volume</span>
@@ -233,9 +230,8 @@ export default function SettingsPanel() {
<p className="text-xs text-slate-500">
Lowers rover audio only while the main brush is running.
</p>
</section>
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Connection</p>
</CardFrame>
<CardFrame title="Connection" bodyClassName="space-y-0.5 text-sm">
<label className="flex items-center justify-between gap-0.5 text-slate-200">
<span>Transport</span>
<select
@@ -248,14 +244,13 @@ export default function SettingsPanel() {
</select>
</label>
<p className="text-xs text-slate-500">Switching reconnects your session.</p>
</section>
</CardFrame>
</div>
</TabPanel>
<TabPanel id="admin">
<div className="space-y-0.5">
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Manual OI commands</p>
<div className="surface flex flex-wrap gap-0.5">
<CardFrame title="Manual OI commands" bodyClassName="space-y-0.5 text-sm">
<div className="flex flex-wrap gap-0.5">
{manualTabs.map((tab) => (
<button
key={tab.key}
@@ -268,10 +263,9 @@ export default function SettingsPanel() {
</button>
))}
</div>
</section>
<section className="panel-section space-y-0.5 text-sm">
<p className="text-slate-400">Sensor stream</p>
<div className="surface flex gap-0.5">
</CardFrame>
<CardFrame title="Sensor stream" bodyClassName="space-y-0.5 text-sm">
<div className="flex gap-0.5">
{sensorButtons.map((btn) => (
<button
key={btn.key}
@@ -285,7 +279,7 @@ export default function SettingsPanel() {
))}
</div>
{!canControl && <p className="text-xs text-slate-500">Assign a rover to toggle streams.</p>}
</section>
</CardFrame>
<AuthPanel />
<OvercurrentLimiterPanel />
<AdminPanel />
webui/src/components/SocketLogPanel/index.jsx
+11 -10
View File
@@ -3,6 +3,7 @@
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
import { useEffect, useMemo, useState } from 'react';
import { useSocket } from '../../context/SocketContext.jsx';
import CardFrame from '../CardFrame/index.jsx';
const MAX_ENTRIES = 300;
const MAX_PAYLOAD_LENGTH = 240;
@@ -113,19 +114,19 @@ export default function SocketLogPanel() {
};
}, [socket]);
return (
<section className="panel-section space-y-0.5 text-base">
<div className="flex items-center justify-between text-sm text-slate-400">
<span>Socket activity</span>
const actions = (
<div className="flex items-center gap-0.5 text-xs text-slate-400">
<span className="surface-muted">in {counters.in}</span>
<span className="surface-muted">out {counters.out}</span>
<span>in {counters.in}</span>
<span>out {counters.out}</span>
<button type="button" className="button-dark text-xs" onClick={() => setEntries([])}>
Clear
</button>
</div>
</div>
<div className="surface h-64 overflow-y-auto font-mono text-xs">
);
return (
<CardFrame title="Socket activity" actions={actions} bodyClassName="space-y-0.5 text-base">
<div className="h-64 overflow-y-auto font-mono text-xs">
{entries.length === 0 ? (
<p>No socket activity yet.</p>
) : (
@@ -133,7 +134,7 @@ export default function SocketLogPanel() {
.slice()
.reverse()
.map((entry) => (
<div key={entry.id} className="surface">
<div key={entry.id}>
<span className="text-slate-400">{entry.timestamp}</span>{' '}
<span className={entry.direction === 'in' ? 'text-emerald-400' : 'text-amber-400'}>
[{entry.direction.toUpperCase()}]
@@ -145,6 +146,6 @@ export default function SocketLogPanel() {
)}
</div>
<p className="text-xs text-slate-500">Logs are collected only while this panel is open.</p>
</section>
</CardFrame>
);
}
webui/src/components/TopDownMap/TopDownMapContent.jsx
+1 -1
View File
@@ -65,7 +65,7 @@ function TopDownMapContent({ sensors = {}, variant = 'full', size: overrideSize,
return (
<div
className={`${overlay ? 'relative' : 'surface relative p-1'}`}
className={`${overlay ? 'relative' : 'relative p-1'}`}
style={overlay ? { width: `${size}px`, height: `${size}px` } : { height: '100%', width: '100%', aspectRatio: '1 / 1' }}
>
<svg width="100%" height="100%" viewBox={`0 0 ${size} ${size}`} preserveAspectRatio="xMidYMid meet" className="mx-auto block">
webui/src/components/UserListPanel/index.jsx
+20 -29
View File
@@ -10,11 +10,11 @@ import CardFrame from '../CardFrame/index.jsx';
export function NicknameEntryPanel({ compact = false }) {
return (
<section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
<div className="surface flex w-full items-center px-0 py-0">
<CardFrame hideHeader className="h-full" bodyClassName="flex h-full min-h-0 flex-col gap-0.5 text-base">
<div className="flex w-full items-center px-0 py-0">
<NicknameForm compact={compact} />
</div>
</section>
</CardFrame>
);
}
@@ -126,7 +126,7 @@ export default function UserListPanel({
return (
<div
key={user.socketId}
className={`surface-muted flex items-center gap-0.5 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
className={`flex items-center gap-0.5 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
>
<p className={`font-semibold ${roleColors(user.role)}`}>{formatLabel(user, selfId)}</p>
{user.roverId ? (
@@ -150,14 +150,19 @@ export default function UserListPanel({
);
return (
<section
className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full min-h-0 flex-col overflow-hidden' : ''} ${className}`}
<CardFrame
title={!hideHeader ? (isTurnsMode ? (showQueuesSection ? 'Turn queues' : 'Users') : 'Users') : ''}
meta={!hideHeader ? (showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length) : null}
hideHeader={hideHeader}
fillHeight={fillHeight}
className={className}
bodyClassName="space-y-0.5 text-base"
>
{!hideNicknameForm && (
<div className="space-y-0.5">
<div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<div className="min-w-0">
<div className="surface flex w-full items-center px-0 py-0">
<div className="flex w-full items-center px-0 py-0">
<NicknameForm compact={compact} />
</div>
</div>
@@ -168,21 +173,8 @@ export default function UserListPanel({
)}
<div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
{!hideHeader && (
<div className={`flex items-center justify-between text-sm text-slate-400 ${compact ? 'text-xs' : ''}`}>
<div className="flex items-center gap-0.5">
<span>
{isTurnsMode
? showQueuesSection
? 'Turn queues'
: 'Users'
: 'Users'}
</span>
<span className="text-xs text-slate-500">
{showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
</span>
</div>
{showToggle ? (
{!hideHeader && showToggle ? (
<div className="flex justify-end">
<div className="inline-flex overflow-hidden rounded border border-slate-700 text-[0.7rem]">
<button
type="button"
@@ -199,11 +191,10 @@ export default function UserListPanel({
Users
</button>
</div>
) : null}
</div>
)}
) : null}
{showQueuesSection ? (
<div className={`surface space-y-0.5 px-0 pb-0 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
<div className={`space-y-0.5 px-0 pb-0 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
{Object.keys(turnQueues || {}).length === 0 ? (
<p className="text-sm text-slate-500">No turn queues yet.</p>
) : (
@@ -220,7 +211,7 @@ export default function UserListPanel({
: queue[0]
: null;
return (
<div key={roverId} className={`surface-muted flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
<div key={roverId} className={`flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
<div className="flex items-center gap-0.5">
<p className="font-semibold text-slate-200">
<span
@@ -277,7 +268,7 @@ export default function UserListPanel({
) : null}
{showUsersSection ? (
<div className={`surface space-y-0.5 px-0 pb-0 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
<div className={`space-y-0.5 px-0 pb-0 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
{renderUserList()}
</div>
) : null}
@@ -288,10 +279,10 @@ export default function UserListPanel({
<span>Users</span>
<span className="text-[0.7rem] text-slate-500">{sorted.length}</span>
</div>
<div className={`surface space-y-0.5 px-0 pb-0 ${usersListClass}`}>{renderUserList()}</div>
<div className={`space-y-0.5 px-0 pb-0 ${usersListClass}`}>{renderUserList()}</div>
</div>
) : null}
</div>
</section>
</CardFrame>
);
}
webui/src/themeFlags.js
+6 -2
View File
@@ -1,5 +1,9 @@
export const PRIDE_THEME_ENABLED = true;
export const pageBackgroundClass = PRIDE_THEME_ENABLED ? 'pride-page-bg' : 'bg-black';
export const themeGapClass = PRIDE_THEME_ENABLED ? 'gap-1' : 'gap-0.5';
export const themeStackClass = PRIDE_THEME_ENABLED ? 'space-y-1' : 'space-y-0.5';
// export const themeGapClass = PRIDE_THEME_ENABLED ? 'gap-1' : 'gap-0.5';
// export const themeStackClass = PRIDE_THEME_ENABLED ? 'space-y-1' : 'space-y-0.5';
// permanent smaller gaps i think is better probably
export const themeGapClass = 'gap-0.5';
export const themeStackClass = 'space-y-0.5';