import { useCallback, useEffect, useMemo, } from 'react'; import { useLocation, useNavigate, Link, generatePath, useMatch, } from 'react-router-dom'; import { Layout, Space, Button, Row, Col, Tooltip, Grid, Menu, Dropdown, Typography, Radio, } from 'antd'; import { UserOutlined, CloudUploadOutlined, CloudDownloadOutlined, SettingOutlined, LoginOutlined, LineChartOutlined, SlidersOutlined, FileExcelOutlined, FileTextOutlined, FileZipOutlined, SaveOutlined, DesktopOutlined, DownOutlined, SearchOutlined, ToolOutlined, FundOutlined, UserAddOutlined, LogoutOutlined, InfoCircleOutlined, CarOutlined, } from '@ant-design/icons'; import { useKBar } from 'kbar'; import store from '../store'; import { isMac } from '../utils/env'; import { isToggleSidebar } from '../utils/keyboard/shortcuts'; import { Routes } from '../routes'; import { useAuth } from '../contexts/AuthContext'; import { logOutSuccessful } from '../pages/auth/notifications'; const { Header } = Layout; const { useBreakpoint } = Grid; const { SubMenu } = Menu; const TopBar = ({ tuneId }: { tuneId: string | null }) => { const { xs, sm, lg } = useBreakpoint(); const { pathname } = useLocation(); const { currentUser, logout } = useAuth(); const navigate = useNavigate(); const { query } = useKBar(); const buildTuneUrl = useCallback((route: string) => tuneId ? generatePath(route, { tuneId }) : null, [tuneId]); const hubPathMatch = useMatch(Routes.HUB); const tuneRootMatch = useMatch(`${Routes.TUNE_ROOT}/*`); const tuneTuneMatch = useMatch(`${Routes.TUNE_TUNE}/*`); const tabMatch = useMatch(`${Routes.TUNE_TAB}/*`); const uploadMatch = useMatch(Routes.UPLOAD); const hubMatch = useMatch(Routes.HUB); const logoutClick = useCallback(() => { logout(); logOutSuccessful(); navigate(Routes.HUB); }, [logout, navigate]); const toggleCommandPalette = useCallback(() => query.toggle(), [query]); const handleGlobalKeyboard = useCallback((e: KeyboardEvent) => { if (isToggleSidebar(e)) { e.preventDefault(); store.dispatch({ type: 'ui/toggleSidebar' }); } }, []); useEffect(() => { document.addEventListener('keydown', handleGlobalKeyboard); return () => document.removeEventListener('keydown', handleGlobalKeyboard); }, [currentUser, handleGlobalKeyboard]); const tabs = useMemo(() => (