second version

frontend/src/App.tsx

@@ -1,49 +1,63 @@
-import { useState } from 'react'
 import { Toaster } from 'sonner'
-import Planning from './pages/Planning'
+import { NavLink, Outlet, Route, Routes } from 'react-router-dom'
+
+import { useWsLogErrorCount } from './hooks/useWsLogErrorCount'
 import { Dashboard } from './pages/Dashboard'
+import { Logs } from './pages/Logs'
+import Planning from './pages/Planning'
 import { Settings } from './pages/Settings'
 
-type Page = 'dashboard' | 'planning' | 'settings'
+function AppLayout() {
+  const logErrors = useWsLogErrorCount(true)
 
-export default function App() {
-  const [page, setPage] = useState<Page>('dashboard')
+  const tabClass = ({ isActive }: { isActive: boolean }) =>
+    `rounded-lg px-3 py-2 text-sm font-medium transition ${
+      isActive ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-900 hover:text-slate-200'
+    }`
 
   return (
     <div className="min-h-screen bg-slate-950">
       <nav className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/95 backdrop-blur">
-        <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2 md:px-8">
-          <button
-            type="button"
-            onClick={() => setPage('dashboard')}
-            className={`rounded-lg px-3 py-2 text-sm font-medium transition ${
-              page === 'dashboard' ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-900 hover:text-slate-200'
-            }`}
-          >
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-1 px-4 py-2 md:px-8">
+          <NavLink to="/" end className={tabClass}>
             Přehled
-          </button>
-          <button
-            type="button"
-            onClick={() => setPage('planning')}
-            className={`rounded-lg px-3 py-2 text-sm font-medium transition ${
-              page === 'planning' ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-900 hover:text-slate-200'
-            }`}
-          >
+          </NavLink>
+          <NavLink to="/planning" className={tabClass}>
             Plánování
-          </button>
-          <button
-            type="button"
-            onClick={() => setPage('settings')}
-            className={`rounded-lg px-3 py-2 text-sm font-medium transition ${
-              page === 'settings' ? 'bg-slate-800 text-white' : 'text-slate-400 hover:bg-slate-900 hover:text-slate-200'
-            }`}
-          >
+          </NavLink>
+          <NavLink to="/settings" className={tabClass}>
             Nastavení
-          </button>
+          </NavLink>
+          <a
+            href="/logs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative rounded-lg px-3 py-2 text-sm font-medium text-slate-400 transition hover:bg-slate-900 hover:text-slate-200"
+          >
+            Logy
+            {logErrors > 0 ? (
+              <span className="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-600 px-1 text-[10px] font-bold text-white">
+                {logErrors > 99 ? '99+' : logErrors}
+              </span>
+            ) : null}
+          </a>
         </div>
       </nav>
-      {page === 'dashboard' ? <Dashboard /> : page === 'planning' ? <Planning /> : <Settings />}
+      <Outlet />
       <Toaster richColors position="top-right" theme="dark" />
     </div>
   )
 }
+
+export default function App() {
+  return (
+    <Routes>
+      <Route element={<AppLayout />}>
+        <Route index element={<Dashboard />} />
+        <Route path="planning" element={<Planning />} />
+        <Route path="settings" element={<Settings />} />
+      </Route>
+      <Route path="logs" element={<Logs />} />
+    </Routes>
+  )
+}