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

HandQueuePanel рендерился как боковая панель на весь экран на мобильном
(.chat-panel, унаследовано от чата) — для короткого списка поднятых рук это
избыточно, история переписки тут ни при чём. Переделано в HandQueueMenu —
тот же самодостаточный поповер над кнопкой, что и «Вид» (StageViewMenu):
своё состояние открытия, закрытие по клику вне/Escape, .tb-menu вместо
боковой панели. Кнопка «Очередь» больше не получает open-состояние
пропсами сверху — сама решает, открыта ли, и сама проверяет
useIsOrganizer().

Список внутри растёт вместе с очередью (компактно при 1–2 поднятых руках),
но не бесконечно — после ~10 строк упирается в max-height и скроллится
дальше.
This commit is contained in:
2026-08-02 04:58:56 +03:00
parent 826b7639b1
commit d7ae462ed5
5 changed files with 115 additions and 103 deletions

View File

@@ -1,6 +1,5 @@
import {
Hand,
ListOrdered,
LogOut,
Maximize,
MessageSquare,
@@ -18,9 +17,9 @@ import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
import { useToast } from '@/components/ui/ToastProvider'
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
import { useIsOrganizer } from '@/hooks/useIsOrganizer'
import type { HandQueueEntry } from '@/hooks/useChat'
import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
import { HandQueueMenu } from '@/components/room/HandQueueMenu'
/**
* Опции захвата демонстрации экрана: `audio: true` — звук
@@ -67,8 +66,8 @@ interface RoomToolbarProps extends StageViewProps {
handQueue: HandQueueEntry[]
onRaiseHand: () => void
onLowerHand: () => void
handQueueOpen: boolean
onToggleHandQueue: () => void
/** Опустить ЧУЖУЮ руку по identity — только организатору (панель очереди, `HandQueueMenu`). */
onLowerHandById: (identity: string) => void
}
/**
@@ -104,8 +103,7 @@ export function RoomToolbar({
handQueue,
onRaiseHand,
onLowerHand,
handQueueOpen,
onToggleHandQueue,
onLowerHandById,
layoutMode,
onLayoutModeChange,
hideOthers,
@@ -113,7 +111,6 @@ export function RoomToolbar({
}: RoomToolbarProps) {
const toast = useToast()
const isCompact = useIsCompactViewport()
const isOrganizer = useIsOrganizer()
const { localParticipant } = useLocalParticipant()
const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity)
const mic = useTrackToggle({ source: Track.Source.Microphone })
@@ -197,23 +194,7 @@ export function RoomToolbar({
<span className="label">Рука</span>
</button>
{isOrganizer && (
<button
type="button"
className={`tb-btn${handQueueOpen ? ' is-panel-open' : ''}`}
aria-pressed={handQueueOpen}
aria-label={handQueueOpen ? 'Свернуть очередь поднятых рук' : 'Открыть очередь поднятых рук'}
onClick={onToggleHandQueue}
>
<span className="icon-shell">
<ListOrdered className="lucide" aria-hidden="true" />
{handQueue.length > 0 && (
<span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
)}
</span>
<span className="label">Очередь</span>
</button>
)}
<HandQueueMenu queue={handQueue} onLower={onLowerHandById} />
{!isCompact && (
<StageViewMenu