Max Ronzhin
d7ae462ed5
HandQueuePanel рендерился как боковая панель на весь экран на мобильном (.chat-panel, унаследовано от чата) — для короткого списка поднятых рук это избыточно, история переписки тут ни при чём. Переделано в HandQueueMenu — тот же самодостаточный поповер над кнопкой, что и «Вид» (StageViewMenu): своё состояние открытия, закрытие по клику вне/Escape, .tb-menu вместо боковой панели. Кнопка «Очередь» больше не получает open-состояние пропсами сверху — сама решает, открыта ли, и сама проверяет useIsOrganizer(). Список внутри растёт вместе с очередью (компактно при 1–2 поднятых руках), но не бесконечно — после ~10 строк упирается в max-height и скроллится дальше.
100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
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>
|
||
)
|
||
}
|