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
+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>
);