This commit is contained in:
legop3
2025-11-24 03:43:36 -05:00
parent e6fec6d9bf
commit 82f1b71c26
8 changed files with 35 additions and 25 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-B5J0CUJj.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C9IjFgQB.css">
<script type="module" crossorigin src="/assets/index-dU53IKaa.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BhKzLrKY.css">
</head>
<body>
<div id="root"></div>
+7 -3
View File
@@ -58,9 +58,13 @@ function DesktopLayout({ layout }) {
<div className="flex h-full gap-0.5 overflow-hidden">
<div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
<DriverVideoPanel />
<div className="grid grid-cols-2 gap-0.5">
<UserListPanel />
<ChatPanel />
<div className="grid grid-cols-2 gap-0.5 h-48">
<div className="h-full">
<UserListPanel fullHeight />
</div>
<div className="h-full">
<ChatPanel fullHeight />
</div>
</div>
<LogPanel />
</div>
+5 -3
View File
@@ -25,7 +25,7 @@ function displayName(message) {
return message.nickname || message.socketId?.slice(0, 6) || 'unknown';
}
export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false }) {
export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false, fullHeight = false }) {
const { session } = useSession();
const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat();
const [draft, setDraft] = useState('');
@@ -57,10 +57,12 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
}
}
const listClass = 'h-48';
const listClass = fullHeight ? 'flex-1 min-h-0' : 'h-48';
return (
<section className="panel-section space-y-0.5 text-base">
<section
className={`panel-section space-y-0.5 text-base ${fullHeight ? 'flex h-full flex-col overflow-hidden' : ''}`}
>
<div className={`surface overflow-y-auto space-y-0.25 ${listClass}`} ref={listRef}>
{sorted.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p>
+5 -3
View File
@@ -26,7 +26,7 @@ function formatLabel(user, selfId) {
return base;
}
export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '' }) {
export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '', fullHeight = false }) {
const { session, setNickname } = useSession();
const { value } = useSettingsNamespace('profile', { nickname: '' });
const lastSyncedSocketRef = useRef(null);
@@ -91,10 +91,12 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
return Math.ceil(ms / 1000);
}, []);
const listClass = 'h-48';
const listClass = fullHeight ? 'flex-1 min-h-0' : 'h-48';
return (
<section className={`panel-section space-y-0.5 text-base ${className}`}>
<section
className={`panel-section space-y-0.5 text-base ${fullHeight ? 'flex h-full flex-col overflow-hidden' : ''} ${className}`}
>
{!hideNicknameForm && (
<div className="space-y-0.5">
<NicknameForm />
+8 -6
View File
@@ -86,13 +86,15 @@ function RoverRow({ roster, frames, videoSources, session }) {
function SecondaryRow() {
return (
<section className="grid grid-cols-1 items-start gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
<RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
<div className="flex flex-col">
<UserListPanel hideNicknameForm hideHeader />
<section className="grid grid-cols-1 items-stretch gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
<div className="flex h-full flex-col">
<RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
</div>
<div className="flex flex-col">
<ChatPanel hideInput hideSpectatorNotice />
<div className="flex h-full min-h-0 flex-col">
<UserListPanel hideNicknameForm hideHeader fullHeight />
</div>
<div className="flex h-full min-h-0 flex-col">
<ChatPanel hideInput hideSpectatorNotice fullHeight />
</div>
</section>
);