feat(frontend): add recipe browser + recommended + detail pages

- Recipes.tsx: search, tag/protein/cuisine filters, ingredient search, family blocklist
- Recommended.tsx: feedback-driven recipe recommendations
- RecipeDetail.tsx: recipe display with ingredients, instructions, quick stats
- App.tsx: add /recipes, /recipes/recommended, /recipes/:id routes
- API client: list, recommended, get recipe methods
- Types: add Recipe fields (external_source, external_id, discovery_reason, calories_per_serving, qty)

frontend/src/App.tsx

@@ -4,17 +4,21 @@ import { ErrorBoundary } from './components/ErrorBoundary'
 import Dashboard from './pages/Dashboard'
 import MealDetail from './pages/MealDetail'
 import Pantry from './pages/Pantry'
+import Recipes from './pages/Recipes'
+import Recommended from './pages/Recommended'
+import RecipeDetail from './pages/RecipeDetail'
 import ShoppingList from './pages/ShoppingList'
 
 const queryClient = new QueryClient()
 
 function Navigation() {
   const location = useLocation()
-  const isActive = (path: string) => location.pathname === path
+  const path = location.pathname
+  const isActive = (prefix: string) => path === prefix || path.startsWith(prefix + '/')
 
-  const linkClass = (path: string) =>
+  const linkClass = (prefix: string) =>
     `inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
-      isActive(path)
+      isActive(prefix)
         ? 'text-primary-700 bg-primary-50'
         : 'text-surface-600 hover:bg-surface-100'
     }`
@@ -24,6 +28,7 @@ function Navigation() {
       <div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
         <div className="flex items-center gap-1 min-h-14 py-2">
           <Link to="/" className={linkClass('/')}>MealPlanner</Link>
+          <Link to="/recipes" className={linkClass('/recipes')}>Recipes</Link>
           <Link to="/pantry" className={linkClass('/pantry')}>Pantry</Link>
           <Link to="/shopping-list" className={linkClass('/shopping-list')}>Shopping List</Link>
         </div>
@@ -43,6 +48,9 @@ function App() {
               <Routes>
                 <Route path="/" element={<Dashboard />} />
                 <Route path="/meals/:id" element={<MealDetail />} />
+                <Route path="/recipes" element={<Recipes />} />
+                <Route path="/recipes/recommended" element={<Recommended />} />
+                <Route path="/recipes/:id" element={<RecipeDetail />} />
                 <Route path="/pantry" element={<Pantry />} />
                 <Route path="/shopping-list" element={<ShoppingList />} />
               </Routes>
@@ -54,4 +62,4 @@ function App() {
   )
 }
 
-export default App
+export default App