fix: update new recipe form for new lexicon structure

apps/api/src/xrpc/index.ts

···
     handler: simpleFetchHandler({
       service: 'https://public.api.bsky.app',
     }),
-  })
+  });
 
   let authorInfo: BlueRecipesFeedDefs.AuthorInfo | null = null;
   if (did) {
···
     });
   }
 
-  const author = await getDidDoc(recipe.authorDid);
+  const rpc = new XRPC({
+    handler: simpleFetchHandler({
+      service: 'https://public.api.bsky.app',
+    }),
+  });
+
+  const authorInfo = await getAuthorInfo(recipe.authorDid, rpc);
 
   return ctx.json({
     recipe: {
-      author: {
-        handle: author.alsoKnownAs[0]?.substring(5),
-      },
+      author: authorInfo,
       title: recipe.title,
+      time: 5,
       description: recipe.description,
       ingredients: recipe.ingredients,
       steps: recipe.steps,

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

···
               <BreadcrumbItem className="hidden md:block">
                 <BreadcrumbLink asChild>
                   <Link to="/recipes/$author" params={{ author: recipe.author.handle }}>
-                    {recipe.author.handle}
+                    {recipe.author.displayName}
                   </Link>
                 </BreadcrumbLink>
               </BreadcrumbItem>
···
       </header>
       <div className="flex flex-col gap-4 px-4 py-8 items-center max-w-2xl w-full mx-auto">
         <p className="text-muted-foreground">
-          By @{recipe.author.handle}
+          By {recipe.author.displayName}
         </p>
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
           {recipe.title}
···
               <CardTitle>Ingredients</CardTitle>
             </CardHeader>
             <CardContent>
-              <ul className="list-disc flex flex-col ml-4">
+              <ul className="flex flex-col">
                 {recipe.ingredients.map((ing, idx) => (
                   <li key={idx}>
-                    {ing.name} ({ing.amount} {ing.unit})
+                    <b>{ing.amount}</b> {ing.name}
                   </li>
                 ))}
               </ul>

apps/web/src/routes/_.(app)/recipes/new.tsx

···
   component: RouteComponent,
 });
 
-const schema = RecipeRecord.extend({
-  ingredients: z.array(
-    IngredientObject.extend({
-      amount: z.coerce.number().nullable(),
-    }),
-  ),
-});
+const schema = RecipeRecord;
 
 function RouteComponent() {
   const form = useForm<z.infer<typeof schema>>({
···
                           {...field}
                         />
                       </FormControl>
+                      <FormDescription>Describe your recipe, maybe tell the world how tasty it is? (Optional)</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  name="time"
+                  control={form.control}
+                  render={({ field: { value, ...field } }) => (
+                    <FormItem>
+                      <FormLabel>Time</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          className="resize-none"
+                          value={value || ""}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>How long (in minutes) does your recipe take to complete?</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
···
                     <div className="flex w-full flex-col gap-2">
                       {ingredients.fields.map((field, index) => (
                         <SortableItem key={field.id} value={field.id} asChild>
-                          <div className="grid grid-cols-[2rem_1fr_0.2fr_0.2fr_2rem] items-center gap-2">
+                          <div className="grid grid-cols-[2rem_0.3fr_1fr_2rem] items-center gap-2">
                             <SortableDragHandle
                               type="button"
                               variant="outline"
···
 
                             <FormField
                               control={form.control}
-                              name={`ingredients.${index}.name`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <Input
-                                      placeholder="Ingredient"
-                                      className="h-8"
-                                      {...field}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-
-                            <FormField
-                              control={form.control}
                               name={`ingredients.${index}.amount`}
                               render={({ field: { value, ...field } }) => (
                                 <FormItem>
                                   <FormControl>
                                     <Input
-                                      type="number"
-                                      placeholder="#"
-                                      value={value || "0"}
+                                      placeholder="Amount"
+                                      value={value || ""}
                                       className="h-8"
                                       {...field}
                                     />
···
 
                             <FormField
                               control={form.control}
-                              name={`ingredients.${index}.unit`}
-                              render={({ field: { value, ...field } }) => (
+                              name={`ingredients.${index}.name`}
+                              render={({ field }) => (
                                 <FormItem>
                                   <FormControl>
                                     <Input
-                                      placeholder="Unit"
+                                      placeholder="Ingredient"
                                       className="h-8"
-                                      value={value || ""}
                                       {...field}
                                     />
                                   </FormControl>

libs/lexicons/src/defs.ts

···
 import { z } from 'zod';
 
 export const IngredientObject = z.object({
+  amount: z.string().nullable(),
   name: z.string().max(3000, 'Ingredient names must be under 3000 characters.'),
-  amount: z.number().nullable(),
-  unit: z.string().max(3000, 'Ingredient units must be under 3000 characters.').nullable(),
 });
 
 export type Ingredient = z.infer<typeof IngredientObject>;

libs/lexicons/src/recipe.ts

···
 export const RecipeRecord = z.object({
   title: z.string().max(3000, 'Recipe titles must be under 3000 characters.'),
   description: z.string().max(3000, 'Recipe descriptions must be under 3000 characters.').nullable(),
+  time: z.number({ message: 'Time must be a number.' }),
   ingredients: z.array(IngredientObject),
   steps: z.array(StepObject),
 });