@@ -75,12 +81,6 @@ export default function RawUserPilePanel({
)}
- {!hideHeader && (
-
- Users
- {sorted.length}
-
- )}
@@ -98,6 +98,6 @@ export default function RawUserPilePanel({
)}
-
+
);
}
diff --git a/webui/src/components/ReplaySourcesPanel/index.jsx b/webui/src/components/ReplaySourcesPanel/index.jsx
index 22fafc23..46d0acca 100644
--- a/webui/src/components/ReplaySourcesPanel/index.jsx
+++ b/webui/src/components/ReplaySourcesPanel/index.jsx
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from 'react';
import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
import { useSettingsNamespace } from '../../settings/index.js';
import { roverNameChromeStyle } from '../../lib/roverColor.js';
+import CardFrame from '../CardFrame/index.jsx';
function normalizeSources(list = []) {
return list
@@ -146,15 +147,10 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
}
};
- const containerClass = fillHeight ? 'h-full flex flex-col' : '';
const listWrapClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : '';
return (
-
-
- Replay Sources
- {sources.length}
-
+
@@ -201,7 +197,7 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
{error ?
{error}
: null}
{success ?
{success}
: null}
-
+
);
}
diff --git a/webui/src/components/RightPaneTabs/index.jsx b/webui/src/components/RightPaneTabs/index.jsx
index af4d6514..35aae8e0 100644
--- a/webui/src/components/RightPaneTabs/index.jsx
+++ b/webui/src/components/RightPaneTabs/index.jsx
@@ -6,7 +6,7 @@ import HomeAssistantControls from '../HomeAssistantControls/index.jsx';
import SettingsPanel from '../SettingsPanel/index.jsx';
import HelpPanel from '../HelpPanel/index.jsx';
import ChatPanel from '../ChatPanel/index.jsx';
-import { LinkButtonsPanel, NicknameEntryPanel } from '../UserListPanel/index.jsx';
+import { LinkButtonsPanel } from '../UserListPanel/index.jsx';
import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx';
import TopDownMap from '../TopDownMap/index.jsx';
@@ -24,6 +24,7 @@ import { useSessionSelector } from '../../context/SessionContext.jsx';
import { useSettingsNamespace } from '../../settings/index.js';
import ButtonBoxPanel from '../ButtonBoxPanel/index.jsx';
import OverseerPreferencePanel from '../OverseerPreferencePanel/index.jsx';
+import CardFrame from '../CardFrame/index.jsx';
import { useState } from 'react';
import { useManualDockAssist } from '../../features/manualDockAssist/useManualDockAssist.js';
@@ -35,11 +36,11 @@ function TopDownMapPanel() {
const sensors = frame?.sensors || {};
return (
-
+
);
}
@@ -101,6 +102,7 @@ function DriveDockPanel() {
value={value}
min={min}
max={max}
+ label="Camera tilt"
disabled={cameraDisabled}
onChange={setServoAngle}
keyDownLabel={downLabel}
@@ -178,10 +180,9 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
-
diff --git a/webui/src/components/RoomCameraPanel/index.jsx b/webui/src/components/RoomCameraPanel/index.jsx
index 045b543f..a609d9de 100644
--- a/webui/src/components/RoomCameraPanel/index.jsx
+++ b/webui/src/components/RoomCameraPanel/index.jsx
@@ -6,6 +6,7 @@ import { useSessionSelector } from '../../context/SessionContext.jsx';
import { useSettingsNamespace } from '../../settings/index.js';
import { useRoomCameraSnapshots } from '../../hooks/useRoomCameraSnapshots.js';
import RoomCameraFeed from '../RoomCameraFeed/index.jsx';
+import CardFrame from '../CardFrame/index.jsx';
function EmptyState() {
return (
@@ -66,35 +67,32 @@ export default function RoomCameraPanel({
return
;
}
+ const actions = showLayoutToggle ? (
+
+
Layout
+
+ {ORIENTATIONS.map((option) => (
+
+ ))}
+
+
+ ) : null;
+
return (
-
- {!hideHeader && (
-
- )}
+
{cameras.map((camera) => {
const feed = feedMap[camera.id] || null;
@@ -109,6 +107,6 @@ export default function RoomCameraPanel({
);
})}
-
+
);
}
diff --git a/webui/src/components/RoverQueuesPanel/index.jsx b/webui/src/components/RoverQueuesPanel/index.jsx
index 367b0393..2db1420d 100644
--- a/webui/src/components/RoverQueuesPanel/index.jsx
+++ b/webui/src/components/RoverQueuesPanel/index.jsx
@@ -4,6 +4,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
import { roverNameChromeStyle } from '../../lib/roverColor.js';
+import CardFrame from '../CardFrame/index.jsx';
function classNames(...values) {
return values.filter(Boolean).join(' ');
@@ -96,8 +97,7 @@ export default function RoverQueuesPanel({ title = 'Rovers' }) {
users.find((u) => u.socketId === socketId) || { socketId, nickname: null, role: null };
return (
-
- {title &&
{title}
}
+
{rosterItems.length === 0 ? (
No rovers registered.
) : (
@@ -216,6 +216,6 @@ export default function RoverQueuesPanel({ title = 'Rovers' }) {
})}
)}
-
+
);
}
diff --git a/webui/src/components/SocialButton/index.jsx b/webui/src/components/SocialButton/index.jsx
index 4b5e7d91..88f1a22d 100644
--- a/webui/src/components/SocialButton/index.jsx
+++ b/webui/src/components/SocialButton/index.jsx
@@ -1,97 +1,59 @@
// Social Button
// Purpose: Defines the Social Button 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 { useEffect } from 'react';
-import { FaBook, FaCoffee, FaCrown, FaDiscord, FaLink } from 'react-icons/fa';
+import * as FaIcons from 'react-icons/fa';
+import { FaLink } from 'react-icons/fa';
+import { useSessionSelector } from '../../context/SessionContext.jsx';
+import { getSocialById } from '../../lib/socials.js';
-const ICONS_BY_ID = {
- discord: FaDiscord,
- kofi: FaCoffee,
- 'ko-fi': FaCoffee,
- wiki: FaBook,
- throne: FaCrown,
-};
-
-const GRADIENT_STYLE_BY_ID = {
- discord: {
- backgroundImage:
- 'linear-gradient(270deg,#5865F2,#404EED,#5865F2)',
- backgroundSize: '600% 600%',
- animation: 'socialGradient 180s ease infinite',
- },
- kofi: {
- backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
- backgroundSize: '600% 600%',
- animation: 'socialGradient 170s ease infinite',
- },
- 'ko-fi': {
- backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
- backgroundSize: '600% 600%',
- animation: 'socialGradient 170s ease infinite',
- },
- wiki: {
- backgroundImage: 'linear-gradient(270deg,#EE8019,#C65C08,#EE8019)',
- backgroundSize: '600% 600%',
- animation: 'socialGradient 180s ease infinite',
- },
- throne: {
- backgroundImage: 'linear-gradient(270deg,#7C3AED,#5B21B6,#7C3AED)',
- backgroundSize: '600% 600%',
- animation: 'socialGradient 180s ease infinite',
- },
-};
-
-function useSocialButtonStyles() {
- useEffect(() => {
- if (typeof document === 'undefined') return;
- const styleId = 'social-button-keyframes';
- if (document.getElementById(styleId)) return;
- const style = document.createElement('style');
- style.id = styleId;
- style.textContent = `
- @keyframes socialGradient {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
- }
- `;
- document.head.appendChild(style);
- }, []);
+function sanitizeCssColor(value) {
+ if (typeof value !== 'string') return null;
+ const trimmed = value.trim();
+ if (!trimmed) return null;
+ if (/^#[0-9a-fA-F]{3,8}$/.test(trimmed)) return trimmed;
+ if (/^(rgb|rgba|hsl|hsla)\([^)]+\)$/.test(trimmed)) return trimmed;
+ return null;
}
-function normalizeId(id, label) {
- if (typeof id === 'string' && id.trim()) return id.trim().toLowerCase();
- if (typeof label === 'string' && label.trim()) {
- return label
- .trim()
- .toLowerCase()
- .replace(/\s+/g, '-')
- .replace(/[^a-z0-9-]/g, '');
- }
- return '';
+function resolveIcon(iconName) {
+ if (typeof iconName !== 'string' || !iconName.trim()) return FaLink;
+ const icon = FaIcons[iconName.trim()];
+ return typeof icon === 'function' ? icon : FaLink;
}
-export default function SocialButton({ id, label, url, className = '' }) {
- if (!url) return null;
- useSocialButtonStyles();
- const key = normalizeId(id, label);
- const Icon = ICONS_BY_ID[key] || FaLink;
- const gradientStyle = GRADIENT_STYLE_BY_ID[key] || null;
- const text = label || id || 'Link';
+export default function SocialButton({ id = null, label, url, icon, color, layout = 'stacked', className = '' }) {
+ const socialFromId = useSessionSelector((state) => (id ? getSocialById(state, id) : null));
+ const resolvedUrl = url || socialFromId?.url || null;
+ if (!resolvedUrl) return null;
+ const resolvedIcon = icon || socialFromId?.icon || null;
+ const resolvedColor = color || socialFromId?.color || null;
+ const Icon = resolveIcon(resolvedIcon);
+ const bgColor = sanitizeCssColor(resolvedColor);
+ const text = label || socialFromId?.label || 'Link';
+ const isInline = layout === 'inline';
return (
-
- {text}
+ {isInline ? (
+
+
+ {text}
+
+ ) : (
+
+
+
+
+ {text}
+
+ )}
);
}
diff --git a/webui/src/components/SocialButtonsGrid/index.jsx b/webui/src/components/SocialButtonsGrid/index.jsx
index 34fe40be..e7854672 100644
--- a/webui/src/components/SocialButtonsGrid/index.jsx
+++ b/webui/src/components/SocialButtonsGrid/index.jsx
@@ -4,46 +4,18 @@
import { useSessionSelector } from '../../context/SessionContext.jsx';
import SocialButton from '../SocialButton/index.jsx';
-function normalizeSocials({ socials, discordInvite, kofiLink }) {
- const configured = Array.isArray(socials) ? socials : null;
- if (configured && configured.length) {
- return configured;
- }
- const fallback = [];
- if (discordInvite) {
- fallback.push({ id: 'discord', label: 'Discord', url: discordInvite });
- }
- if (kofiLink) {
- fallback.push({ id: 'kofi', label: 'Ko-fi', url: kofiLink });
- }
- return fallback;
-}
-
-function normalizeEntry(entry) {
- if (!entry || typeof entry !== 'object') return null;
- const id = entry.id || entry.service || entry.key || entry.name || null;
- const label = entry.label || entry.title || entry.name || id || 'Link';
- const url = entry.url || entry.link || entry.href || null;
- return url ? { id, label, url } : null;
-}
-
export default function SocialButtonsGrid({ className = '' }) {
- const socialsInput = useSessionSelector((state) => ({
- socials: state.session?.socials ?? [],
- discordInvite: state.session?.discord?.invite || null,
- kofiLink: state.session?.kofi?.link || null,
- }));
- const socials = normalizeSocials(socialsInput)
- .map(normalizeEntry)
- .filter(Boolean)
- .slice(0, 4);
+ const socials = useSessionSelector((state) => state.session?.socials ?? []).slice(0, 4);
if (!socials.length) return null;
return (
{socials.map((entry) => (
-
+
))}
);
diff --git a/webui/src/components/Tabs/index.jsx b/webui/src/components/Tabs/index.jsx
index 28a67b10..dfc8230a 100644
--- a/webui/src/components/Tabs/index.jsx
+++ b/webui/src/components/Tabs/index.jsx
@@ -2,6 +2,7 @@
// Purpose: Defines the Tabs 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 { createContext, useCallback, useContext, useMemo, useState, useEffect } from 'react';
+import { useSessionSelector } from '../../context/SessionContext.jsx';
const TabsContext = createContext(null);
@@ -33,6 +34,28 @@ function classNames(...parts) {
return parts.filter(Boolean).join(' ');
}
+function hexToRgb(hex) {
+ const raw = String(hex || '').trim();
+ const normalized = raw.startsWith('#') ? raw.slice(1) : raw;
+ if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(normalized)) return null;
+ const expanded =
+ normalized.length === 3
+ ? normalized
+ .split('')
+ .map((ch) => ch + ch)
+ .join('')
+ : normalized;
+ return {
+ r: Number.parseInt(expanded.slice(0, 2), 16),
+ g: Number.parseInt(expanded.slice(2, 4), 16),
+ b: Number.parseInt(expanded.slice(4, 6), 16),
+ };
+}
+
+function rgba(rgb, alpha) {
+ return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+
export default function Tabs({ children, defaultTab, currentTab, onTabChange, variant = DEFAULT_VARIANT }) {
const [internalTab, setInternalTab] = useState(defaultTab ?? null);
const [tabOrder, setTabOrder] = useState([]);
@@ -95,7 +118,32 @@ export default function Tabs({ children, defaultTab, currentTab, onTabChange, va
}
export function TabList({ children, className = '' }) {
- return
{children}
;
+ const ownRoverColor = useSessionSelector((state) => {
+ const roverId = String(state.session?.assignment?.roverId || '').trim();
+ if (!roverId) return null;
+ const roster = Array.isArray(state.session?.roster) ? state.session.roster : [];
+ const rover = roster.find((entry) => String(entry?.id) === roverId);
+ return rover?.color || null;
+ });
+ const accentRgb = hexToRgb(ownRoverColor);
+ const frameStyle = 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%)`,
+ }
+ : undefined;
+
+ return (
+
+ );
}
export function Tab({ id, children, className = '', disabled = false, highlight = 'none' }) {
diff --git a/webui/src/components/TelemetryPanel/index.jsx b/webui/src/components/TelemetryPanel/index.jsx
index 17370654..b5778185 100644
--- a/webui/src/components/TelemetryPanel/index.jsx
+++ b/webui/src/components/TelemetryPanel/index.jsx
@@ -5,6 +5,7 @@ import { useMemo } from 'react';
import { useSessionSelector } from '../../context/SessionContext.jsx';
import { useTelemetryFrame } from '../../context/TelemetryContext.jsx';
import { useDockIr } from '../../hooks/useDockIr.js';
+import CardFrame from '../CardFrame/index.jsx';
function formatMetric(value, fallback = '--') {
if (value == null || value === '') return fallback;
@@ -39,7 +40,7 @@ export default function TelemetryPanel() {
}, [activeDriverId, roverId, selfSocketId, users]);
return (
-
+
{/*
{connected ? 'online' : 'offline'}
· role {session?.role || 'unknown'}
@@ -60,7 +61,7 @@ export default function TelemetryPanel() {
{rawSnippet && (
{rawSnippet}
)}
-
+
);
}
@@ -173,7 +174,7 @@ function SensorDetails({ sensors, dockState }) {
function DetailCard({ title, children }) {
return (
-
{title}
+
{title}
{children}
);
diff --git a/webui/src/components/TopDownMap/TopDownMapContent.jsx b/webui/src/components/TopDownMap/TopDownMapContent.jsx
index a38467f2..b8a545f0 100644
--- a/webui/src/components/TopDownMap/TopDownMapContent.jsx
+++ b/webui/src/components/TopDownMap/TopDownMapContent.jsx
@@ -68,12 +68,6 @@ function TopDownMapContent({ sensors = {}, variant = 'full', size: overrideSize,
className={`${overlay ? 'relative' : 'surface relative p-1'}`}
style={overlay ? { width: `${size}px`, height: `${size}px` } : { height: '100%', width: '100%', aspectRatio: '1 / 1' }}
>
- {!overlay ? (
- <>
-
Top-down
-
0–{maxLight}
-
- ) : null}