feat: implement frontend Web UI pages

- Add types for all API models (MealPlan, Recipe, Ingredient, etc.)
- Add API client with mealPlannerApi wrapper for all endpoints
- Implement Dashboard with weekly meal plan grid view
- Implement Pantry page with add/remove functionality
- Implement MealDetail page with recipe display
- Implement ShoppingList page with aisle grouping
- Add ShoppingList route to App.tsx
- Add vite-env.d.ts for Vite env type support

frontend/src/pages/MealDetail.tsx

@@ -1,11 +1,119 @@
+import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'react-router-dom'
+import { mealPlannerApi } from '../api'
+import type { MealPlanItem } from '../types'
 
 export default function MealDetail() {
-  const { id } = useParams()
+  const { id } = useParams<{ id: string }>()
+
+  const { data: item, isLoading } = useQuery<MealPlanItem>({
+    queryKey: ['mealItem', id],
+    queryFn: () => mealPlannerApi.meals.getItem(id!).then(r => r.data),
+    enabled: !!id,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    )
+  }
+
+  if (!item?.recipe) {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-2xl font-bold text-gray-900">Recipe Not Found</h1>
+        <p className="text-gray-500">This meal item doesn't have an associated recipe.</p>
+      </div>
+    )
+  }
+
+  const recipe = item.recipe
+
   return (
     <div className="space-y-6">
-      <h1 className="text-2xl font-bold text-gray-900">Meal Detail</h1>
-      <p className="text-gray-500">Meal {id} details coming soon...</p>
+      {recipe.image_url && (
+        <img
+          src={recipe.image_url}
+          alt={recipe.name}
+          className="w-full h-64 object-cover rounded-lg"
+        />
+      )}
+
+      <div className="flex justify-between items-start">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">{recipe.name}</h1>
+          {recipe.description && (
+            <p className="mt-2 text-gray-600">{recipe.description}</p>
+          )}
+        </div>
+        <div className="text-right">
+          <div className="text-2xl font-bold text-gray-900">
+            ${item.estimated_cost?.toFixed(2) || 'N/A'}
+          </div>
+          <div className="text-sm text-gray-500">per serving</div>
+        </div>
+      </div>
+
+      <div className="flex gap-4 text-sm text-gray-600">
+        {recipe.prep_time_minutes && (
+          <span>Prep: {recipe.prep_time_minutes} min</span>
+        )}
+        {recipe.cook_time_minutes && (
+          <span>Cook: {recipe.cook_time_minutes} min</span>
+        )}
+        <span>Serves: {recipe.servings}</span>
+        {recipe.cuisine_tags?.length > 0 && (
+          <span>{recipe.cuisine_tags.join(', ')}</span>
+        )}
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold mb-4">Ingredients</h2>
+        <ul className="space-y-2">
+          {recipe.ingredients?.map((ing, idx) => (
+            <li key={idx} className="flex items-center gap-2">
+              <span className="w-2 h-2 bg-gray-400 rounded-full" />
+              <span>
+                {ing.quantity && `${ing.quantity} `}
+                {ing.unit && `${ing.unit} `}
+                {ing.name}
+                {ing.is_optional && ' (optional)'}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold mb-4">Instructions</h2>
+        <ol className="space-y-4">
+          {recipe.instructions?.map((step, idx) => (
+            <li key={idx} className="flex gap-4">
+              <span className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center font-semibold">
+                {idx + 1}
+              </span>
+              <p className="pt-1">{step}</p>
+            </li>
+          ))}
+        </ol>
+      </div>
+
+      <div className="flex gap-4">
+        <button
+          onClick={() => window.print()}
+          className="bg-gray-100 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-200"
+        >
+          Print Recipe
+        </button>
+        <a
+          href="/"
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
+        >
+          Back to Meal Plan
+        </a>
+      </div>
     </div>
   )
-}
+}