initial commit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/admin/components/AdminLayout.tsx

@@ -0,0 +1,107 @@
+import { useState, useCallback } from 'react'
+import { Outlet, Navigate, useLocation } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { useAuth } from '../context/AuthContext'
+import { useTheme } from '../../context/ThemeContext'
+import { setLogoutAlert } from '../utils/api'
+import useModalLock from '../hooks/useModalLock'
+import Sidebar from './Sidebar'
+import ShortcutsHelp from './ShortcutsHelp'
+
+export default function AdminLayout() {
+  const { isAuthenticated, loading, user, logout } = useAuth()
+  const { theme, toggleTheme } = useTheme()
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [loggingOut, setLoggingOut] = useState(false)
+  const location = useLocation()
+
+  // Session is managed by AuthProvider (initial check + proactive refresh via setTimeout).
+  // Do not call checkSession on route changes — concurrent refresh calls with token rotation
+  // would invalidate each other and kick the user out.
+
+  const handleLogout = useCallback(() => {
+    setLoggingOut(true)
+    setSidebarOpen(false)
+    setLogoutAlert()
+    setTimeout(() => logout(), 400)
+  }, [logout])
+
+  useModalLock(sidebarOpen)
+
+  if (loading) {
+    return (
+      <div className="admin-layout">
+        <div className="admin-loading" style={{ width: '100%' }}>
+          <div className="admin-spinner" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  // If 2FA is required but user hasn't enabled it, redirect to dashboard (where setup lives)
+  const needs2FASetup = user?.require2FA && !user?.totpEnabled
+  if (needs2FASetup && location.pathname !== '/') {
+    return <Navigate to="/" replace />
+  }
+
+  return (
+    <motion.div
+      className="admin-layout"
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={loggingOut
+        ? { scale: 1.5, opacity: 0, filter: 'blur(12px)' }
+        : { scale: 1, opacity: 1, filter: 'none' }
+      }
+      transition={{ duration: loggingOut ? 0.4 : 0.25, ease: [0.4, 0, 0.2, 1] }}
+    >
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} onLogout={handleLogout} />
+
+      <div className="admin-main">
+        <header className="admin-header">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="admin-menu-btn"
+            aria-label="Otevřít menu"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+
+          <div className="flex-1" />
+
+          <button
+            onClick={toggleTheme}
+            className="admin-header-theme-btn"
+            title={theme === 'dark' ? 'Světlý režim' : 'Tmavý režim'}
+            aria-label={theme === 'dark' ? 'Světlý režim' : 'Tmavý režim'}
+          >
+            <span className={`admin-theme-icon ${theme === 'light' ? 'visible' : ''}`}>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="5" />
+                <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+              </svg>
+            </span>
+            <span className={`admin-theme-icon ${theme === 'dark' ? 'visible' : ''}`}>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+              </svg>
+            </span>
+          </button>
+
+        </header>
+
+        <main className="admin-content">
+          <Outlet />
+        </main>
+      </div>
+      <ShortcutsHelp />
+    </motion.div>
+  )
+}