moving things around

2026-09-15 17:12:59 -04:00 · 2026-01-20 01:18:13 -05:00
parent bdcb488988
commit 87dd9a24a0
10 changed files with 197 additions and 148 deletions
@@ -11,8 +11,8 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
    <title>Multi Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-BcGpq6_c.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CxMMWICN.css">
+    <script type="module" crossorigin src="/assets/index-BxYZsNCL.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BjSf29Wv.css">
  </head>
  <body>
    <div id="root"></div>
@@ -83,11 +83,11 @@ export default function HomeAssistantControls() {

  return (
    <section className="panel-section space-y-0.5 text-base">
-      <header className="flex flex-wrap items-start justify-between gap-0.5 text-sm text-slate-400">
-        <div className="flex flex-wrap items-center gap-1">
+      <header className="flex items-center justify-between gap-0.5 text-sm text-slate-400">
+        <div className="flex items-center gap-1">
          <p>Light Controls</p>
          <span className="text-xs text-slate-500">{entities.length}</span>
-          <div className="flex w-full flex-wrap items-center gap-1 text-xs text-slate-300">
+          <div className="flex items-center gap-1 text-xs text-slate-300 background-black">
            <span className="flex items-center gap-0.5">
              <span>On</span>
              {onKeyLabel ? <KeyPill label={onKeyLabel} /> : null}
@@ -4,7 +4,7 @@ import HomeAssistantControls from './HomeAssistantControls.jsx';
 import SettingsPanel from './SettingsPanel.jsx';
 import HelpPanel from './HelpPanel.jsx';
 import ChatPanel from './ChatPanel.jsx';
-import UserListPanel, { NicknameLinksPanel } from './UserListPanel.jsx';
+import UserListPanel, { LinkButtonsPanel, NicknameEntryPanel } from './UserListPanel.jsx';
 import ReplaySourcesPanel from './ReplaySourcesPanel.jsx';
 import Tabs, { Tab, TabList, TabPanel, TabPanels } from './Tabs.jsx';
 import TopDownMap from './TopDownMap.jsx';
@@ -59,14 +59,17 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
                <TopDownMapPanel />
                <DriveDockPanel />
              </div>
-              <div className="grid gap-0.5 grid-cols-[minmax(0,0.6fr)_minmax(0,1.1fr)_minmax(0,0.9fr)]">
-                <NicknameLinksPanel compact />
+              <div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)_minmax(0,0.75fr)]">
                <RoverRosterPanel />
                <ReplaySourcesPanel panelId="replay-sources-desktop" fillHeight />
+                <LinkButtonsPanel />
              </div>
              <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.7fr)] h-[14rem]">
                <ChatPanel fillHeight />
-                <UserListPanel compact hideNicknameForm fillHeight />
+                <div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)]">
+                  <NicknameEntryPanel compact />
+                  <UserListPanel compact hideNicknameForm fillHeight />
+                </div>
              </div>
              <HomeAssistantControls />
              <RoomCameraPanel defaultOrientation="horizontal" panelId="rightpane-telemetry" />
@@ -6,12 +6,19 @@ import NicknameForm from './NicknameForm.jsx';
 import DiscordInviteButton from './DiscordInviteButton.jsx';
 import KoFiButton from './KoFiButton.jsx';

-export function NicknameLinksPanel({ compact = false }) {
+export function NicknameEntryPanel({ compact = false }) {
  return (
    <section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
      <div className="surface flex w-full items-center">
        <NicknameForm compact={compact} />
      </div>
+    </section>
+  );
+}
+
+export function LinkButtonsPanel() {
+  return (
+    <section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
      <div className="grid flex-1 min-h-0 gap-0.5 grid-rows-2">
        <DiscordInviteButton className="h-full" />
        <KoFiButton className="h-full" />
@@ -48,6 +55,7 @@ export default function UserListPanel({
  className = '',
  fillHeight = false,
  compact = false,
+  showBothTurnsAndUsers = false,
 }) {
  const { session, setNickname } = useSession();
  const { value } = useSettingsNamespace('profile', { nickname: '' });
@@ -59,6 +67,12 @@ export default function UserListPanel({
  const isTurnsMode = session?.mode === 'turns';
  const turnQueues = session?.turnQueues || {};
  const roster = session?.roster || [];
+  const [turnView, setTurnView] = useState('queues');
+
+  useEffect(() => {
+    if (!isTurnsMode) return;
+    setTurnView('queues');
+  }, [isTurnsMode]);

  useEffect(() => {
    if (!canSetNickname) return;
@@ -126,6 +140,10 @@ export default function UserListPanel({
        : baseListClass;
  const usersListClass =
    isTurnsMode && fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : baseListClass;
+  const showToggle = isTurnsMode && !showBothTurnsAndUsers;
+  const showQueuesSection = isTurnsMode && (showBothTurnsAndUsers || turnView === 'queues');
+  const showUsersSection = !isTurnsMode || (showToggle && turnView === 'users');
+  const showUsersSecondary = isTurnsMode && showBothTurnsAndUsers;

  const renderUserList = () =>
    sorted.length === 0 ? (
@@ -179,15 +197,41 @@ export default function UserListPanel({
      <div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
        {!hideHeader && (
          <div className={`flex items-center justify-between text-sm text-slate-400 ${compact ? 'text-xs' : ''}`}>
-            <span>{isTurnsMode ? 'Turn queues' : 'Users'}</span>
-            <span className="text-xs text-slate-500">
-              {isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
-            </span>
+            <div className="flex items-center gap-0.5">
+              <span>
+                {isTurnsMode
+                  ? showQueuesSection
+                    ? 'Turn queues'
+                    : 'Users'
+                  : 'Users'}
+              </span>
+              <span className="text-xs text-slate-500">
+                {showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
+              </span>
+            </div>
+            {showToggle ? (
+              <div className="inline-flex overflow-hidden rounded border border-slate-700 text-[0.7rem]">
+                <button
+                  type="button"
+                  className={`px-1 py-0.5 ${turnView === 'queues' ? 'bg-slate-600 text-white' : 'bg-transparent text-slate-400 hover:text-white'}`}
+                  onClick={() => setTurnView('queues')}
+                >
+                  Queues
+                </button>
+                <button
+                  type="button"
+                  className={`px-1 py-0.5 ${turnView === 'users' ? 'bg-slate-600 text-white' : 'bg-transparent text-slate-400 hover:text-white'}`}
+                  onClick={() => setTurnView('users')}
+                >
+                  Users
+                </button>
+              </div>
+            ) : null}
          </div>
        )}
-        <div className={`surface space-y-0.25 ${isTurnsMode ? turnsListClass : baseListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
-          {isTurnsMode ? (
-            Object.keys(turnQueues || {}).length === 0 ? (
+        {showQueuesSection ? (
+          <div className={`surface space-y-0.25 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
+            {Object.keys(turnQueues || {}).length === 0 ? (
              <p className="text-sm text-slate-500">No turn queues yet.</p>
            ) : (
              Object.entries(turnQueues).map(([roverId, info]) => {
@@ -248,21 +292,23 @@ export default function UserListPanel({
                  </div>
                );
              })
-            )
-          ) : (
-            renderUserList()
-          )}
-        </div>
+            )}
+          </div>
+        ) : null}

-        {isTurnsMode ? (
+        {showUsersSection ? (
+          <div className={`surface space-y-0.25 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
+            {renderUserList()}
+          </div>
+        ) : null}
+
+        {showUsersSecondary ? (
          <div className={`space-y-0.25 ${fillHeight ? 'flex min-h-0 flex-1 flex-col' : ''}`}>
            <div className="flex items-center justify-between text-xs text-slate-400">
              <span>Users</span>
              <span className="text-[0.7rem] text-slate-500">{sorted.length}</span>
            </div>
-            <div className={`surface space-y-0.25 ${usersListClass}`}>
-              {renderUserList()}
-            </div>
+            <div className={`surface space-y-0.25 ${usersListClass}`}>{renderUserList()}</div>
          </div>
        ) : null}
      </div>
@@ -434,7 +434,7 @@ export default function VideoTile({
            >
              <div className="text-center">{qualityNotice}</div>
              <div className="pointer-events-auto mt-1">
-                <DiscordInviteButton text={'Join Discord server while you wait!'} />
+                <DiscordInviteButton text={'Join our Discord server while you wait!'} />
              </div>
            </div>
          </div>
@@ -141,7 +141,7 @@ function SpectatorContent() {
            <RoverRoster roster={roster} title="Rovers" emptyText="No rovers registered." />
          </div>
          <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
-            <UserListPanel hideNicknameForm hideHeader fillHeight className="h-full" />
+            <UserListPanel hideNicknameForm hideHeader fillHeight className="h-full" showBothTurnsAndUsers />
          </div>
          <div className="min-h-0 min-w-0 flex-[1.1] overflow-hidden">
            <ChatPanel hideInput hideSpectatorNotice fillHeight />