Первоначальная версия VidConf

2026-07-23 01:04:01 +03:00
commit 896455381a
335 changed files with 61527 additions and 0 deletions
--- a/frontend/src/components/layout/ShellTopbar.tsx
+++ b/frontend/src/components/layout/ShellTopbar.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { CalendarDays, LayoutDashboard, LogOut, Menu, Users, Video } from 'lucide-react'
+import { useAuth } from '@/auth/useAuth'
+import { Avatar } from '@/components/ui/Avatar'
+import { LogoMark } from '@/components/ui/LogoMark'
+import { ThemeToggle } from '@/components/ui/ThemeToggle'
+
+const NAV_LINKS = [
+  { to: '/lobby', label: 'Лобби', icon: Video },
+  { to: '/calendar', label: 'Календарь', icon: CalendarDays },
+  { to: '/my-conferences', label: 'Мои конференции', icon: Users },
+]
+
+/** Доступен только администраторам — сама админка тоже защищена route-guard'ом (см. App.tsx). */
+const ADMIN_NAV_LINK = { to: '/admin', label: 'Админка', icon: LayoutDashboard }
+
+/**
+ * Верхняя навигация светлой оболочки (лобби/календарь/мои конференции/админка),
+ * см. design/mockups/lobby.html.
+ *
+ * Пункты навигации убраны в скрывающуюся панель за бургером (`.menu-wrap` +
+ * `.burger` + `.menu`) — как в макете; список ссылок там расширен нашими
+ * реальными разделами (в самом макете в панели — заглушки «Скачать
+ * приложение»/«О сервисе», которых как отдельных экранов нет). Бургер виден
+ * всегда, а не только на мобильной ширине — макет не прячет его по media
+ * query ни на одной ширине, это единственный способ навигации между
+ * разделами оболочки.
+ *
+ * Пилюля с ФИО теперь ссылка на страницу профиля
+ * (`/profile`) — в макете это была декоративная заглушка без перехода;
+ * аватар — общий компонент `Avatar` (фото или инициалы).
+ */
+export function ShellTopbar() {
+  const { user, logout } = useAuth()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuWrapRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!menuOpen) return
+
+    function handlePointerDown(event: MouseEvent) {
+      if (menuWrapRef.current && !menuWrapRef.current.contains(event.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    function handleKeydown(event: KeyboardEvent) {
+      if (event.key === 'Escape') setMenuOpen(false)
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeydown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }, [menuOpen])
+
+  async function handleLogout() {
+    setMenuOpen(false)
+    await logout()
+    navigate('/login', { replace: true })
+  }
+
+  return (
+    <header className="topbar">
+      <Link to="/lobby" className="brand-mark">
+        <LogoMark /> VidConf
+      </Link>
+
+      <div className="topbar-right">
+        <ThemeToggle />
+
+        <Link to="/profile" className="user-pill">
+          <Avatar name={user?.name_user ?? '?'} avatarUrl={user?.avatar_url} />
+          <span className="user-pill-name">{user?.name_user ?? '—'}</span>
+        </Link>
+
+        <div className="menu-wrap" ref={menuWrapRef}>
+          <button
+            type="button"
+            className="burger"
+            aria-expanded={menuOpen}
+            aria-controls="main-menu"
+            aria-label={menuOpen ? 'Закрыть меню' : 'Открыть меню'}
+            onClick={() => setMenuOpen((v) => !v)}
+          >
+            <Menu className="icon" aria-hidden="true" />
+          </button>
+          <nav className={`menu${menuOpen ? ' is-open' : ''}`} id="main-menu" aria-label="Основное меню">
+            {[...NAV_LINKS, ...(user?.role === 'admin' ? [ADMIN_NAV_LINK] : [])].map((link) => {
+              const Icon = link.icon
+              return (
+                <Link
+                  key={link.to}
+                  to={link.to}
+                  className={location.pathname.startsWith(link.to) ? 'is-active' : ''}
+                  onClick={() => setMenuOpen(false)}
+                >
+                  <Icon className="icon" aria-hidden="true" />
+                  {link.label}
+                </Link>
+              )
+            })}
+            <div className="menu-divider" />
+            <button type="button" className="danger" onClick={handleLogout}>
+              <LogOut className="icon" aria-hidden="true" />
+              Выйти
+            </button>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}