moving a LOT of stuff around in web ui

webui/src/layouts/driver/tabs/mobile/ChatTab/index.jsx

@@ -0,0 +1,34 @@
+// Mobile Chat Tab
+// Purpose: Owns the mobile chat and compact supporting-card composition.
+import ChatPanel from '../../../../../components/ChatPanel/index.jsx';
+import SocialButtonsGrid from '../../../../../components/SocialButtonsGrid/index.jsx';
+import OverseerPreferencePanel from '../../../../../components/OverseerPreferencePanel/index.jsx';
+import RawUserPilePanel from '../../../../../components/RawUserPilePanel/index.jsx';
+import { TabPanel } from '../../../../../components/Tabs/index.jsx';
+import { useSessionSelector } from '../../../../../context/SessionContext.jsx';
+import { isFeatureEnabled } from '../../../../../lib/features.js';
+import { themeGapClass, themeStackClass } from '../../../../../themes/index.js';
+
+export default function MobileChatTab() {
+  const showOverseerPreferencePanel = useSessionSelector((state) => Boolean(state.session?.overseerVote?.votingEnabled));
+  const showSocialButtons = useSessionSelector((state) => {
+    /* Match the card's own gate so its absence cannot reserve an empty column. */
+    const socials = Array.isArray(state.session?.socials) ? state.session.socials : [];
+    return isFeatureEnabled(state, 'socials') && socials.length > 0;
+  });
+
+  return (
+    <TabPanel id="chat">
+      <div className={themeStackClass}>
+        <ChatPanel nicknameLayout="stacked" />
+        <div className={`grid items-start ${themeGapClass} ${showSocialButtons ? 'grid-cols-[minmax(0,1fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)]'}`}>
+          {showSocialButtons ? <SocialButtonsGrid /> : null}
+          <div className={`flex min-w-0 flex-col ${themeGapClass} ${showSocialButtons ? '' : 'max-w-sm'}`}>
+            {showOverseerPreferencePanel ? <OverseerPreferencePanel /> : null}
+            <RawUserPilePanel hideNicknameForm compact />
+          </div>
+        </div>
+      </div>
+    </TabPanel>
+  );
+}