feat: adapt recipe surfaces for batch-cook sessions
- Recipes page action buttons reordered/restyled to push AI generation and batch cooking ahead of manual recipe creation. - Recipe detail page hides meal/drink pairing (doesn't make sense for a multi-dish batch session). - Print pages force light mode regardless of app theme (dark bg + hardcoded dark text was unreadable) and render sectioned steps + dishes/storage for batch-cook recipes. - Markdown export mirrors the same sectioned structure. - Cooking mode tags each step with which dish(es) it belongs to. - Meal planner: mealPlanEntries.batchDishId lets a slot point at one specific dish within a batch session; picking a batch-cook recipe now prompts for which dish, and the grid shows the dish name. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
@@ -58,14 +58,15 @@ export default async function MealPlanPage({
|
||||
where: and(eq(mealPlans.userId, session.user.id), eq(mealPlans.weekStart, weekStart)),
|
||||
with: {
|
||||
entries: {
|
||||
with: { recipe: { with: { photos: true } } },
|
||||
with: { recipe: { with: { photos: true } }, batchDish: true },
|
||||
},
|
||||
},
|
||||
}),
|
||||
db.query.recipes.findMany({
|
||||
where: eq(recipes.authorId, session.user.id),
|
||||
orderBy: desc(recipes.updatedAt),
|
||||
columns: { id: true, title: true },
|
||||
columns: { id: true, title: true, isBatchCook: true },
|
||||
with: { batchDishes: { columns: { id: true, name: true }, orderBy: (t, { asc }) => asc(t.order) } },
|
||||
}),
|
||||
db.query.mealPlanMembers.findMany({
|
||||
where: eq(mealPlanMembers.userId, session.user.id),
|
||||
@@ -88,6 +89,7 @@ export default async function MealPlanPage({
|
||||
servings: e.servings,
|
||||
note: e.note,
|
||||
recipe: e.recipe ? { id: e.recipe.id, title: e.recipe.title } : null,
|
||||
batchDish: e.batchDish ? { id: e.batchDish.id, name: e.batchDish.name } : null,
|
||||
}));
|
||||
|
||||
const label = `${monday.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${sunday.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
|
||||
|
||||
@@ -41,6 +41,7 @@ export default async function CookPage({ params }: Params) {
|
||||
id: s.id,
|
||||
instruction: s.instruction,
|
||||
timerSeconds: s.timerSeconds,
|
||||
appliesTo: recipe.isBatchCook ? s.appliesTo : undefined,
|
||||
}))}
|
||||
ingredients={recipe.ingredients.map((i) => ({
|
||||
rawName: i.rawName,
|
||||
|
||||
@@ -151,8 +151,12 @@ export default async function RecipePage({ params }: Params) {
|
||||
</Tooltip>
|
||||
)}
|
||||
<FavoriteButton recipeId={id} initialFavorited={isFavorited} />
|
||||
<MealPairingButton recipeId={id} />
|
||||
<DrinkPairingButton recipeId={id} />
|
||||
{!recipe.isBatchCook && (
|
||||
<>
|
||||
<MealPairingButton recipeId={id} />
|
||||
<DrinkPairingButton recipeId={id} />
|
||||
</>
|
||||
)}
|
||||
{recipe.visibility === "public" && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={
|
||||
@@ -217,6 +221,8 @@ export default async function RecipePage({ params }: Params) {
|
||||
sourceUrl: recipe.sourceUrl,
|
||||
ingredients: recipe.ingredients,
|
||||
steps: recipe.steps,
|
||||
isBatchCook: recipe.isBatchCook,
|
||||
batchDishes: recipe.batchDishes,
|
||||
})}
|
||||
filename={recipe.title}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
import { db, mealPlans, mealPlanEntries, recipes, eq, and, or, ne } from "@epicure/db";
|
||||
import { db, mealPlans, mealPlanEntries, recipes, recipeBatchDishes, eq, and, or, ne } from "@epicure/db";
|
||||
import { requireSession } from "@/lib/api-auth";
|
||||
import { dispatchWebhook } from "@/lib/webhooks";
|
||||
|
||||
@@ -10,6 +10,7 @@ const Schema = z.object({
|
||||
day: z.enum(["mon", "tue", "wed", "thu", "fri", "sat", "sun"]),
|
||||
mealType: z.enum(["breakfast", "lunch", "dinner", "snack"]),
|
||||
recipeId: z.string().optional(),
|
||||
batchDishId: z.string().optional(),
|
||||
servings: z.number().int().min(1).max(100).default(2),
|
||||
note: z.string().max(500).optional(),
|
||||
});
|
||||
@@ -44,6 +45,14 @@ export async function POST(req: NextRequest, { params }: Params) {
|
||||
if (!recipe) return NextResponse.json({ error: "Recipe not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
if (parsed.data.batchDishId) {
|
||||
if (!parsed.data.recipeId) return NextResponse.json({ error: "batchDishId requires recipeId" }, { status: 400 });
|
||||
const dish = await db.query.recipeBatchDishes.findFirst({
|
||||
where: and(eq(recipeBatchDishes.id, parsed.data.batchDishId), eq(recipeBatchDishes.recipeId, parsed.data.recipeId)),
|
||||
});
|
||||
if (!dish) return NextResponse.json({ error: "Dish not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
const plan = await getOrCreatePlan(session!.user.id, weekStart);
|
||||
|
||||
// Remove existing entry for same day+mealType before inserting
|
||||
@@ -62,6 +71,7 @@ export async function POST(req: NextRequest, { params }: Params) {
|
||||
day: parsed.data.day,
|
||||
mealType: parsed.data.mealType,
|
||||
recipeId: parsed.data.recipeId,
|
||||
batchDishId: parsed.data.batchDishId,
|
||||
servings: parsed.data.servings,
|
||||
note: parsed.data.note,
|
||||
});
|
||||
|
||||
@@ -21,6 +21,7 @@ export default async function RecipePrintPage({ params }: Params) {
|
||||
with: {
|
||||
ingredients: { orderBy: (t, { asc }) => asc(t.order) },
|
||||
steps: { orderBy: (t, { asc }) => asc(t.order) },
|
||||
batchDishes: { orderBy: (t, { asc }) => asc(t.order) },
|
||||
},
|
||||
});
|
||||
|
||||
@@ -28,6 +29,16 @@ export default async function RecipePrintPage({ params }: Params) {
|
||||
|
||||
const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
|
||||
|
||||
const stepGroups: Array<{ label: string; steps: typeof recipe.steps }> = [];
|
||||
if (recipe.isBatchCook) {
|
||||
for (const step of recipe.steps) {
|
||||
const label = step.appliesTo.length === 0 ? m.recipe.batchCookPrep : step.appliesTo.join(" + ");
|
||||
const last = stepGroups[stepGroups.length - 1];
|
||||
if (last && last.label === label) last.steps.push(step);
|
||||
else stepGroups.push({ label, steps: [step] });
|
||||
}
|
||||
}
|
||||
|
||||
const activeTags = Object.entries(recipe.dietaryTags ?? {})
|
||||
.filter(([, v]) => v)
|
||||
.map(([k]) => m.recipe.dietary[k as keyof typeof m.recipe.dietary])
|
||||
@@ -62,6 +73,11 @@ export default async function RecipePrintPage({ params }: Params) {
|
||||
ol.steps { padding-left: 20px; margin: 0; }
|
||||
ol.steps li { padding: 6px 0 6px 4px; border-bottom: 1px dotted #e0e0e0; font-size: 0.95em; }
|
||||
ol.steps li:last-child { border-bottom: none; }
|
||||
h3.section { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: #777; margin: 18px 0 6px; font-family: system-ui, sans-serif; }
|
||||
.dish { border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; margin: 10px 0; font-family: system-ui, sans-serif; }
|
||||
.dish-name { font-weight: 600; margin: 0 0 4px; }
|
||||
.dish-storage { font-size: 0.85em; color: #666; margin: 0 0 6px; }
|
||||
.dish-dayof { font-size: 0.9em; margin: 0; }
|
||||
.timer { font-size: 0.85em; color: #666; font-family: system-ui, sans-serif; margin-left: 8px; }
|
||||
footer { margin-top: 40px; font-size: 0.75em; color: #aaa; text-align: center; font-family: system-ui, sans-serif; }
|
||||
.print-btn {
|
||||
@@ -117,16 +133,46 @@ export default async function RecipePrintPage({ params }: Params) {
|
||||
{recipe.steps.length > 0 && (
|
||||
<>
|
||||
<h2>{m.recipe.instructions}</h2>
|
||||
<ol className="steps">
|
||||
{recipe.steps.map((step) => (
|
||||
<li key={step.id}>
|
||||
{step.instruction}
|
||||
{step.timerSeconds && (
|
||||
<span className="timer">⏱ {Math.floor(step.timerSeconds / 60)} min</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
{recipe.isBatchCook ? (
|
||||
stepGroups.map((group, gi) => (
|
||||
<div key={gi}>
|
||||
<h3 className="section">{group.label}</h3>
|
||||
<ol className="steps">
|
||||
{group.steps.map((step) => (
|
||||
<li key={step.id}>{step.instruction}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<ol className="steps">
|
||||
{recipe.steps.map((step) => (
|
||||
<li key={step.id}>
|
||||
{step.instruction}
|
||||
{step.timerSeconds && (
|
||||
<span className="timer">⏱ {Math.floor(step.timerSeconds / 60)} min</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{recipe.isBatchCook && recipe.batchDishes.length > 0 && (
|
||||
<>
|
||||
<h2>{m.recipe.batchCookDishesTitle}</h2>
|
||||
{recipe.batchDishes.map((dish) => (
|
||||
<div key={dish.id} className="dish">
|
||||
<p className="dish-name">{dish.name}</p>
|
||||
<p className="dish-storage">
|
||||
{formatMessage(m.recipe.batchCookFridgeDays, { days: dish.fridgeDays })}
|
||||
{dish.freezerFriendly && ` · ${m.recipe.batchCookFreezerFriendly}`}
|
||||
{dish.freezerNote && ` — ${dish.freezerNote}`}
|
||||
</p>
|
||||
<p className="dish-dayof"><strong>{m.recipe.batchCookDayOf}:</strong> {dish.dayOfInstructions}</p>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
export default function PrintLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
html, html.dark, html:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
body {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
`}</style>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user