Документация по переносу компонента BottomPanel (Общая структура нижней панели)

Общая структура в React

Файл: client/src/components/BottomPanel.tsx
Тип: Функциональный компонент React с useSelector (gameState), useWebSocketNew (isConnected), useIsMobile, useBurgerMenuContext (toggleMenu).
Зависимости: react-redux, hooks (useWebSocketNew, useIsMobile, useBurgerMenuContext), components (BurgerButton, PauseButton, BarkerMusicControl), ui/tooltip.
Template (JSX): div fixed bottom-0 left-0 right-0 bg-slate-900 border-t z-30, div w-full h-full flex items-center (mobile: bottom-panel-mobile, desktop: px-6 sm:px-8 lg:px-12 h-full flex).
Layout: flex justify-between, left BurgerButton, center BarkerMusicControl (barkerOnly), PauseButton, BarkerMusicControl (musicOnly), right indicators (WS, ESP, gamersCounter with Tooltip).
Responsive: if isMobile — fixed bottom-0 bg-slate-900 border-t, div flex justify-between h-full, left Burger, center barker/pause/music, right WS/ESP/gamers; else — fixed bottom-0 style height 121px, div px-6 sm:px-8 lg:px-12 h-full flex, left Burger, absolute center Barker/pause/music, right indicators with Tooltip.

Left: BurgerButton (isOpen, onClick toggleMenu).
Center: BarkerMusicControl barkerOnly, PauseButton, BarkerMusicControl musicOnly.
Right: div flex space-x-2 sm:space-x-4, WS indicator (dot green/red, text "WS", Tooltip "WebSocket: Подключен/Отключен"), ESP indicator (dot green/red, text "ESP", Tooltip "ESP: Подключен/Отключен" + ping time), gamersCounter (fa-users text-xs text-slate-400, span {systemState.gamersCounter}).
Indicators: dot w-2 h-2 rounded-full bg-green/red-500, text text-xs text-slate-300 hidden sm:inline.
Mobile: pl-4 pr-1, mobile-text-sm, gap-2.
Desktop: absolute left-1/2 -translate-x-1/2 z-20 flex gap-4 for center, ml-1 sm:ml-2 for gamers.

Container: fixed bottom-0 left-0 right-0 bg-slate-900 border-t border-slate-700 z-30, style height 121px desktop.
Flex: flex items-center justify-between relative w-full h-full.
Indicators: flex items-center space-x-1 sm:space-x-2, dot w-2 h-2 rounded-full bg-green/red-500, text text-xs text-slate-300 hidden sm:inline.
Tooltip: TooltipProvider > Tooltip > Trigger (div flex space-x-1), Content (p text, p text-xs text-slate-400 for ping).
Responsive: @media max-width 768px — mobile-text-sm (text-xs), gap-2, pl-4 pr-1; desktop — px-6 sm:px-8 lg:px-12, space-x-4.

Indicators: update from useWebSocketNew (isConnected), useSelector (gameState.espConnected, lastPing, gamersCounter).
Pause: onClick toggle via PauseButton.
Burger: onClick toggleMenu from context.
Tooltip: on hover show status.
In Dashboard: .

:

<BurgerButton :is-open="isMenuOpen" @click="toggleMenu" />

WS/ESP indicators, gamers counter

.
Composables: useWebSocketNew (isConnected), useGameStore (espConnected, lastPing, gamersCounter), useIsMobile, useBurgerMenu (isMenuOpen, toggleMenu).
v-if for gamersCounter, :class for colors.