feat: source servings count from index

apps/api/src/xrpc/index.ts

···
     rkey: r.rkey,
     title: r.title,
     time: r.time,
-    serves: r.serves,
+    serves: r.serves ?? 1,
     description: r.description || undefined,
     ingredients: r.ingredientsCount as number,
     steps: r.stepsCount as number,
     imageUrl: r.imageRef
       ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${r.authorDid}/${r.imageRef}@jpeg`
-      : null,
+      : undefined,
   });
 
   for (const result of recipes) {

apps/web/src/components/recipe-card.tsx

···
 import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Link } from "@tanstack/react-router";
-import { Clock, ListOrdered, Utensils } from "lucide-react";
+import { Clock, ListOrdered, Users, Utensils } from "lucide-react";
 
 type RecipeCardProps = {
   recipe: BlueRecipesFeedGetRecipes.Result;
···
               <div className="flex items-center">
                 <ListOrdered className="w-4 h-4 mr-1" />
                 <span>{recipe.steps}</span>
+              </div>
+
+              <div className="flex items-center">
+                <Users className="w-4 h-4 mr-1" />
+                <span>{recipe.serves}</span>
               </div>
 
               <div className="flex items-center">

apps/web/src/routes/_.(app)/recipes/$author/$rkey/index.lazy.tsx

···
               </Badge>
               <Badge variant="secondary" className="flex items-center gap-2">
                 <Users className="size-4" />
-                <span>Serves 2</span>
+                <span>Serves {recipe.serves ?? '1'}</span>
               </Badge>
             </div>