feat: App.jsx — dynamic kennel name in header, Settings nav link, useSettings hook

client/src/App.jsx

@@ -1,5 +1,5 @@
-import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
-import { Home, Users, Activity, Heart, FlaskConical } from 'lucide-react'
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
+import { Home, Users, Activity, Heart, FlaskConical, Settings } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import DogList from './pages/DogList'
 import DogDetail from './pages/DogDetail'
@@ -8,11 +8,26 @@ import LitterList from './pages/LitterList'
 import LitterDetail from './pages/LitterDetail'
 import BreedingCalendar from './pages/BreedingCalendar'
 import PairingSimulator from './pages/PairingSimulator'
+import SettingsPage from './pages/SettingsPage'
+import { useSettings } from './hooks/useSettings'
 import './App.css'
 
-function App() {
+function NavLink({ to, icon: Icon, label }) {
+  const location = useLocation()
+  const isActive = location.pathname === to
+  return (
+    <Link to={to} className={`nav-link${isActive ? ' active' : ''}`}>
+      <Icon size={20} />
+      <span>{label}</span>
+    </Link>
+  )
+}
+
+function AppInner() {
+  const { settings } = useSettings()
+  const kennelName = settings?.kennel_name || 'BREEDR'
+
   return (
-    <Router>
     <div className="app">
       <nav className="navbar">
         <div className="container">
@@ -22,29 +37,15 @@ function App() {
               alt="BREEDR Logo"
               className="brand-logo"
             />
-              <span className="brand-text">BREEDR</span>
+            <span className="brand-text">{kennelName}</span>
           </div>
           <div className="nav-links">
-              <Link to="/" className="nav-link">
-                <Home size={20} />
-                <span>Dashboard</span>
-              </Link>
-              <Link to="/dogs" className="nav-link">
-                <Users size={20} />
-                <span>Dogs</span>
-              </Link>
-              <Link to="/litters" className="nav-link">
-                <Activity size={20} />
-                <span>Litters</span>
-              </Link>
-              <Link to="/breeding" className="nav-link">
-                <Heart size={20} />
-                <span>Breeding</span>
-              </Link>
-              <Link to="/pairing" className="nav-link">
-                <FlaskConical size={20} />
-                <span>Pairing</span>
-              </Link>
+            <NavLink to="/" icon={Home} label="Dashboard" />
+            <NavLink to="/dogs" icon={Users} label="Dogs" />
+            <NavLink to="/litters" icon={Activity} label="Litters" />
+            <NavLink to="/breeding" icon={Heart} label="Breeding" />
+            <NavLink to="/pairing" icon={FlaskConical} label="Pairing" />
+            <NavLink to="/settings" icon={Settings} label="Settings" />
           </div>
         </div>
       </nav>
@@ -59,9 +60,17 @@ function App() {
           <Route path="/litters/:id" element={<LitterDetail />} />
           <Route path="/breeding" element={<BreedingCalendar />} />
           <Route path="/pairing" element={<PairingSimulator />} />
+          <Route path="/settings" element={<SettingsPage />} />
         </Routes>
       </main>
     </div>
+  )
+}
+
+function App() {
+  return (
+    <Router>
+      <AppInner />
     </Router>
   )
 }