Initial commit: HotelSync PMS v0.1.0

- React 18 + TypeScript + Vite + Tailwind CSS
- Шахматка бронирований (drag-to-book)
- Страницы: Calendar, Bookings, Rooms, Housekeeping, Channels, API Docs, Settings
- Роли: super_admin, hotel_manager, housekeeper
- Светлая/тёмная тема
- Docker + Nginx конфигурация
- Лендинг hotelsync.ru

src/components/layout/Topbar.tsx

@@ -0,0 +1,95 @@
+import { Sun, Moon, Bell, LogOut, ChevronDown, Menu } from 'lucide-react'
+import { useTheme } from '../../contexts/ThemeContext'
+import { useAuth } from '../../contexts/AuthContext'
+import { ROLE_LABELS } from '../../lib/utils'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+interface TopbarProps {
+  onMenuToggle?: () => void
+  title?: string
+}
+
+export function Topbar({ onMenuToggle, title }: TopbarProps) {
+  const { theme, toggle } = useTheme()
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <header className="h-16 shrink-0 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex items-center px-4 gap-3 z-30">
+      {/* Mobile menu button */}
+      <button
+        onClick={onMenuToggle}
+        className="lg:hidden btn-ghost p-2"
+      >
+        <Menu size={20} />
+      </button>
+
+      {/* Page title (mobile) */}
+      {title && (
+        <span className="lg:hidden font-semibold text-slate-900 dark:text-slate-100 truncate">
+          {title}
+        </span>
+      )}
+
+      <div className="flex-1" />
+
+      {/* Notification bell */}
+      <button className="btn-ghost p-2 relative">
+        <Bell size={18} />
+        <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500" />
+      </button>
+
+      {/* Theme toggle */}
+      <button onClick={toggle} className="btn-ghost p-2">
+        {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+      </button>
+
+      {/* User menu */}
+      <div className="relative">
+        <button
+          onClick={() => setUserMenuOpen(v => !v)}
+          className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+        >
+          <div className="w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center text-white text-sm font-semibold shrink-0">
+            {user?.name.charAt(0) ?? 'U'}
+          </div>
+          <div className="hidden sm:block text-left">
+            <p className="text-sm font-medium text-slate-900 dark:text-slate-100 leading-tight">
+              {user?.name}
+            </p>
+            <p className="text-xs text-slate-500 dark:text-slate-400">
+              {user ? ROLE_LABELS[user.role] : ''}
+            </p>
+          </div>
+          <ChevronDown size={14} className="text-slate-400 hidden sm:block" />
+        </button>
+
+        {userMenuOpen && (
+          <>
+            <div className="fixed inset-0 z-10" onClick={() => setUserMenuOpen(false)} />
+            <div className="absolute right-0 top-full mt-1 w-52 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl z-20 py-1 animate-fade-in">
+              <div className="px-3 py-2 border-b border-slate-100 dark:border-slate-700">
+                <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{user?.name}</p>
+                <p className="text-xs text-slate-500 dark:text-slate-400">{user?.email}</p>
+              </div>
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              >
+                <LogOut size={14} />
+                Выйти
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </header>
+  )
+}