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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-B5J0CUJj.js"></script> <script type="module" crossorigin src="/assets/index-dU53IKaa.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C9IjFgQB.css"> <link rel="stylesheet" crossorigin href="/assets/index-BhKzLrKY.css">
</head> </head>
<body> <body>
<div id="root"></div> <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 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"> <div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
<DriverVideoPanel /> <DriverVideoPanel />
<div className="grid grid-cols-2 gap-0.5"> <div className="grid grid-cols-2 gap-0.5 h-48">
<UserListPanel /> <div className="h-full">
<ChatPanel /> <UserListPanel fullHeight />
</div>
<div className="h-full">
<ChatPanel fullHeight />
</div>
</div> </div>
<LogPanel /> <LogPanel />
</div> </div>
+5 -3
View File
@@ -25,7 +25,7 @@ function displayName(message) {
return message.nickname || message.socketId?.slice(0, 6) || 'unknown'; 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 { session } = useSession();
const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat(); const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat();
const [draft, setDraft] = useState(''); 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 ( 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}> <div className={`surface overflow-y-auto space-y-0.25 ${listClass}`} ref={listRef}>
{sorted.length === 0 ? ( {sorted.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p> <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; 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 { session, setNickname } = useSession();
const { value } = useSettingsNamespace('profile', { nickname: '' }); const { value } = useSettingsNamespace('profile', { nickname: '' });
const lastSyncedSocketRef = useRef(null); const lastSyncedSocketRef = useRef(null);
@@ -91,10 +91,12 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
return Math.ceil(ms / 1000); return Math.ceil(ms / 1000);
}, []); }, []);
const listClass = 'h-48'; const listClass = fullHeight ? 'flex-1 min-h-0' : 'h-48';
return ( 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 && ( {!hideNicknameForm && (
<div className="space-y-0.5"> <div className="space-y-0.5">
<NicknameForm /> <NicknameForm />
+8 -6
View File
@@ -86,13 +86,15 @@ function RoverRow({ roster, frames, videoSources, session }) {
function SecondaryRow() { function SecondaryRow() {
return ( return (
<section className="grid grid-cols-1 items-start gap-0.5 lg:grid-cols-[2fr_1fr_1fr]"> <section className="grid grid-cols-1 items-stretch gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
<RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader /> <div className="flex h-full flex-col">
<div className="flex flex-col"> <RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
<UserListPanel hideNicknameForm hideHeader />
</div> </div>
<div className="flex flex-col"> <div className="flex h-full min-h-0 flex-col">
<ChatPanel hideInput hideSpectatorNotice /> <UserListPanel hideNicknameForm hideHeader fullHeight />
</div>
<div className="flex h-full min-h-0 flex-col">
<ChatPanel hideInput hideSpectatorNotice fullHeight />
</div> </div>
</section> </section>
); );