From 67912dc78d44123f68d64c028f3602b364230e0e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 9 Mar 2026 22:14:51 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20App.jsx=20=E2=80=94=20dynamic=20kennel?=
 =?UTF-8?q?=20name=20in=20header,=20Settings=20nav=20link,=20useSettings?=
 =?UTF-8?q?=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.jsx | 111 ++++++++++++++++++++++++---------------------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index bddf6bc..729ff39 100644
--- a/client/src/App.jsx
+++ b/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,60 +8,69 @@ 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 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 (
+    <div className="app">
+      <nav className="navbar">
+        <div className="container">
+          <div className="nav-brand">
+            <img
+              src="/static/br-logo.png"
+              alt="BREEDR Logo"
+              className="brand-logo"
+            />
+            <span className="brand-text">{kennelName}</span>
+          </div>
+          <div className="nav-links">
+            <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>
+
+      <main className="main-content">
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/dogs" element={<DogList />} />
+          <Route path="/dogs/:id" element={<DogDetail />} />
+          <Route path="/pedigree/:id" element={<PedigreeView />} />
+          <Route path="/litters" element={<LitterList />} />
+          <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>
-      <div className="app">
-        <nav className="navbar">
-          <div className="container">
-            <div className="nav-brand">
-              <img
-                src="/static/br-logo.png"
-                alt="BREEDR Logo"
-                className="brand-logo"
-              />
-              <span className="brand-text">BREEDR</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>
-            </div>
-          </div>
-        </nav>
-
-        <main className="main-content">
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/dogs" element={<DogList />} />
-            <Route path="/dogs/:id" element={<DogDetail />} />
-            <Route path="/pedigree/:id" element={<PedigreeView />} />
-            <Route path="/litters" element={<LitterList />} />
-            <Route path="/litters/:id" element={<LitterDetail />} />
-            <Route path="/breeding" element={<BreedingCalendar />} />
-            <Route path="/pairing" element={<PairingSimulator />} />
-          </Routes>
-        </main>
-      </div>
+      <AppInner />
     </Router>
   )
 }