fix(room): очередь поднятых рук — компактный поповер вместо панели во весь экран

HandQueuePanel рендерился как боковая панель на весь экран на мобильном (.chat-panel, унаследовано от чата) — для короткого списка поднятых рук это избыточно, история переписки тут ни при чём. Переделано в HandQueueMenu — тот же самодостаточный поповер над кнопкой, что и «Вид» (StageViewMenu): своё состояние открытия, закрытие по клику вне/Escape, .tb-menu вместо боковой панели. Кнопка «Очередь» больше не получает open-состояние пропсами сверху — сама решает, открыта ли, и сама проверяет useIsOrganizer(). Список внутри растёт вместе с очередью (компактно при 1–2 поднятых руках), но не бесконечно — после ~10 строк упирается в max-height и скроллится дальше.
2026-08-02 04:58:56 +03:00
parent 826b7639b1
commit d7ae462ed5
5 changed files with 115 additions and 103 deletions
--- a/frontend/src/components/room/HandQueueMenu.tsx
+++ b/frontend/src/components/room/HandQueueMenu.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react'
+import { Hand, ListOrdered } from 'lucide-react'
+import { useIsOrganizer } from '@/hooks/useIsOrganizer'
+import type { HandQueueEntry } from '@/hooks/useChat'
+
+interface HandQueueMenuProps {
+  queue: HandQueueEntry[]
+  onLower: (identity: string) => void
+}
+
+/**
+ * Кнопка «Очередь» в тулбаре с поповером над ней — видна только организатору
+ * (задача B1). Тот же самодостаточный паттерн, что и `StageViewMenu` («Вид»):
+ * собственное состояние открытия, закрытие по клику вне/Escape, поповер
+ * `.tb-menu` над кнопкой — а не боковая панель на весь экран (как чат):
+ * очередь рук — короткий список, а не история переписки, разворачивать её
+ * во весь экран незачем и на мобильном.
+ *
+ * Размер поповера подстраивается под число записей — `.hand-queue-list`
+ * растёт вместе со списком и не даёт пустого места при 1–2 поднятых руках,
+ * но не бесконечно: после ~10 строк список упирается в `max-height` и дальше
+ * скроллится (см. room.css) — иначе организатор на энергичной встрече
+ * получил бы поповер выше экрана.
+ */
+export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
+  const isOrganizer = useIsOrganizer()
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    function handlePointerDown(event: MouseEvent) {
+      if (wrapRef.current && !wrapRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    function handleKeydown(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOpen(false)
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeydown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }, [open])
+
+  if (!isOrganizer) return null
+
+  return (
+    <div className="tb-menu-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className={`tb-btn${open ? ' is-panel-open' : ''}`}
+        aria-pressed={open}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-label={open ? 'Свернуть очередь поднятых рук' : 'Открыть очередь поднятых рук'}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className="icon-shell">
+          <ListOrdered className="lucide" aria-hidden="true" />
+          {queue.length > 0 && (
+            <span className="badge-count">{queue.length > 9 ? '9+' : queue.length}</span>
+          )}
+        </span>
+        <span className="label">Очередь</span>
+      </button>
+      {open && (
+        <div className="tb-menu hand-queue-menu" role="dialog" aria-label="Очередь поднятых рук">
+          {queue.length === 0 ? (
+            <p className="chat-empty">Пока никто не поднял руку</p>
+          ) : (
+            <ol className="hand-queue-list">
+              {queue.map((entry, index) => (
+                <li className="hand-queue-item" key={entry.identity}>
+                  <span className="hand-queue-position">{index + 1}</span>
+                  <span className="hand-queue-name">
+                    <Hand className="lucide" aria-hidden="true" />
+                    {entry.name}
+                  </span>
+                  <button
+                    type="button"
+                    className="hand-queue-lower"
+                    onClick={() => onLower(entry.identity)}
+                  >
+                    Опустить
+                  </button>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}