mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
move nickname entry to inside chat panel
This commit is contained in:
legop3
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
File diff suppressed because one or more lines are too long
@@ -11,8 +11,8 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Roomba Rover" />
|
||||
<title>Roomba Rover</title>
|
||||
<script type="module" crossorigin src="/assets/index-tQBHQF7J.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-C-j0HVkU.css">
|
||||
<script type="module" crossorigin src="/assets/index-EY6LbYPB.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BIQkdXB4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+1
-5
@@ -23,7 +23,6 @@ import HomeAssistantControls from './components/HomeAssistantControls/index.jsx'
|
||||
import TurnAlertListener from './components/TurnAlertListener/index.jsx';
|
||||
import RawUserPilePanel from './components/RawUserPilePanel/index.jsx';
|
||||
import OverseerPreferencePanel from './components/OverseerPreferencePanel/index.jsx';
|
||||
import NicknameForm from './components/NicknameForm/index.jsx';
|
||||
import SocialButtonsGrid from './components/SocialButtonsGrid/index.jsx';
|
||||
import ChatPanel from './components/ChatPanel/index.jsx';
|
||||
import FullscreenPrompt from './components/FullscreenPrompt/index.jsx';
|
||||
@@ -144,12 +143,9 @@ function MobileFeatureTabs({
|
||||
<TabPanels>
|
||||
<TabPanel id="chat">
|
||||
<div className="space-y-0.5">
|
||||
<ChatPanel />
|
||||
<ChatPanel nicknameLayout="stacked" />
|
||||
<div className="space-y-0.5">
|
||||
<div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
|
||||
<div className="surface flex w-full items-center px-0 py-0">
|
||||
<NicknameForm />
|
||||
</div>
|
||||
<SocialButtonsGrid />
|
||||
</div>
|
||||
<div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
||||
|
||||
@@ -8,6 +8,7 @@ import { useSettingsNamespace } from '../../settings/index.js';
|
||||
import ChatMessageRow from '../ChatMessageRow/index.jsx';
|
||||
import ChatTypingRow from '../ChatTypingRow/index.jsx';
|
||||
import CardFrame from '../CardFrame/index.jsx';
|
||||
import NicknameForm from '../NicknameForm/index.jsx';
|
||||
|
||||
const FLITE_VOICES = ['kal', 'rms', 'slt', 'ksp', 'bdl'];
|
||||
const ESPEAK_PITCHES = Array.from({ length: 10 }, (_, idx) => idx * 10);
|
||||
@@ -18,6 +19,7 @@ export default function ChatPanel({
|
||||
fillHeight = false,
|
||||
allowSpectatorInput = false,
|
||||
title = 'Chat',
|
||||
nicknameLayout = 'inline',
|
||||
}) {
|
||||
const role = useSessionSelector((state) => state.session?.role || null);
|
||||
const currentRoverId = useSessionSelector((state) => state.session?.assignment?.roverId || null);
|
||||
@@ -105,6 +107,7 @@ export default function ChatPanel({
|
||||
}
|
||||
|
||||
const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
|
||||
const isStackedNickname = nicknameLayout === 'stacked';
|
||||
|
||||
return (
|
||||
<CardFrame
|
||||
@@ -125,9 +128,15 @@ export default function ChatPanel({
|
||||
))}
|
||||
</div>
|
||||
{!hideInput && (
|
||||
<form className="flex flex-wrap items-stretch gap-0.5" onSubmit={handleSend}>
|
||||
<form
|
||||
className={`flex items-stretch gap-0.5 ${isStackedNickname ? 'flex-col' : 'flex-wrap'}`}
|
||||
onSubmit={handleSend}
|
||||
>
|
||||
<div className={isStackedNickname ? 'w-full' : 'w-[9rem] sm:w-[10rem] shrink-0'}>
|
||||
<NicknameForm compact />
|
||||
</div>
|
||||
<input
|
||||
className="field-input flex-1 min-w-[10rem]"
|
||||
className={`field-input ${isStackedNickname ? 'w-full min-w-0' : 'flex-1 min-w-[10rem]'}`}
|
||||
value={draft}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value;
|
||||
@@ -154,7 +163,11 @@ export default function ChatPanel({
|
||||
disabled={!canChat}
|
||||
/>
|
||||
{ttsSupported && (
|
||||
<div className="flex flex-wrap items-center gap-0.5 basis-full sm:basis-auto">
|
||||
<div
|
||||
className={`flex flex-wrap items-center gap-0.5 ${
|
||||
isStackedNickname ? 'w-full' : 'basis-full sm:basis-auto'
|
||||
}`}
|
||||
>
|
||||
<label className="flex items-center gap-0.5 text-xs text-slate-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -214,7 +227,7 @@ export default function ChatPanel({
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canChat || sending}
|
||||
className="button-dark h-full disabled:opacity-50 self-stretch"
|
||||
className={`button-dark disabled:opacity-50 ${isStackedNickname ? 'w-full h-8' : 'h-full self-stretch'}`}
|
||||
>
|
||||
{sending ? '...' : 'Send'}
|
||||
</button>
|
||||
|
||||
@@ -6,7 +6,6 @@ import AuthPanel from '../AuthPanel/index.jsx';
|
||||
import { useSessionSelector } from '../../context/SessionContext.jsx';
|
||||
import SocialButton from '../SocialButton/index.jsx';
|
||||
import ChatPanel from '../ChatPanel/index.jsx';
|
||||
import NicknameForm from '../NicknameForm/index.jsx';
|
||||
|
||||
const PRIVILEGED_ROLES = new Set(['admin', 'lockdown', 'lockdown-admin']);
|
||||
const LOCKDOWN_ROLES = new Set(['lockdown', 'lockdown-admin']);
|
||||
@@ -101,8 +100,7 @@ export default function ModeGateOverlay() {
|
||||
You can still use the chat while the server is locked:
|
||||
{/* set max height of this box */}
|
||||
<div className='max-h-80 overflow-y-auto'>
|
||||
<ChatPanel />
|
||||
<NicknameForm />
|
||||
<ChatPanel nicknameLayout="stacked" />
|
||||
</div>
|
||||
|
||||
{/* <p className="text-xs text-slate-500">
|
||||
|
||||
@@ -33,9 +33,9 @@ export default function OverseerPreferencePanel() {
|
||||
</label>
|
||||
<span className="text-xs">Enable a local LLM in chat</span>
|
||||
|
||||
{/* <div className="mt-0.5 text-slate-400">
|
||||
<div className="mt-0.5 text-slate-400">
|
||||
Yes!: {Number(vote?.yesCount || 0)}, No...: {Number(vote?.noCount || 0)}
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="mt-0.5 flex justify-center">
|
||||
<span
|
||||
className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.7rem] font-medium ${
|
||||
|
||||
@@ -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';
|
||||
@@ -180,10 +180,9 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
|
||||
</div>
|
||||
<div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.22fr)] h-[14rem]">
|
||||
<ChatPanel fillHeight />
|
||||
<div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)_auto]">
|
||||
<div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)]">
|
||||
<OverseerPreferencePanel />
|
||||
<RawUserPilePanel compact hideNicknameForm fillHeight />
|
||||
<NicknameEntryPanel compact />
|
||||
</div>
|
||||
</div>
|
||||
<HomeAssistantControls />
|
||||
|
||||
Reference in New Issue
Block a user