move nickname entry to inside chat panel

webui/src/App.jsx

@@ -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)]">

webui/src/components/ChatPanel/index.jsx

@@ -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>

webui/src/components/ModeGateOverlay/index.jsx

@@ -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">

webui/src/components/OverseerPreferencePanel/index.jsx

@@ -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 ${

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';
@@ -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 />