fix: ensure base recipe references display correctly in English and auto-translate

Fixed three issues with base recipe translation support:

1. Base recipe content not loading in English - English API endpoint now
   populates baseRecipeRef fields to resolve base recipe data
2. itemsBefore/itemsAfter and stepsBefore/stepsAfter not being detected as
   changed - enhanced change detection to properly track all base recipe
   reference fields for re-translation
3. Base recipe name labels showing German text in English view - display
   components now use translated base recipe names as label fallback

src/lib/components/IngredientsPage.svelte

@@ -49,9 +49,14 @@ const flattenedIngredients = $derived.by(() => {
 
 			// Push as one section with optional label
 			if (combinedList.length > 0) {
+				// Use labelOverride if present, otherwise use base recipe name (translated if viewing in English)
+				const baseRecipeName = (lang === 'en' && item.resolvedRecipe.translations?.en?.name)
+					? item.resolvedRecipe.translations.en.name
+					: item.resolvedRecipe.name;
+
 				sections.push({
 					type: 'section',
-					name: item.showLabel ? (item.labelOverride || item.resolvedRecipe.name) : '',
+					name: item.showLabel ? (item.labelOverride || baseRecipeName) : '',
 					list: combinedList,
 					isReference: item.showLabel,
 					short_name: item.resolvedRecipe.short_name

src/lib/components/InstructionsPage.svelte

@@ -43,9 +43,14 @@ const flattenedInstructions = $derived.by(() => {
 
 			// Push as one section with optional label
 			if (combinedSteps.length > 0) {
+				// Use labelOverride if present, otherwise use base recipe name (translated if viewing in English)
+				const baseRecipeName = (lang === 'en' && item.resolvedRecipe.translations?.en?.name)
+					? item.resolvedRecipe.translations.en.name
+					: item.resolvedRecipe.name;
+
 				return [{
 					type: 'section',
-					name: item.showLabel ? (item.labelOverride || item.resolvedRecipe.name) : '',
+					name: item.showLabel ? (item.labelOverride || baseRecipeName) : '',
 					steps: combinedSteps,
 					isReference: item.showLabel,
 					short_name: item.resolvedRecipe.short_name

src/routes/api/recipes/items/[name]/+server.ts

@@ -11,10 +11,19 @@ export const GET: RequestHandler = async ({ params }) => {
 	await dbConnect();
 
 	try {
-		// Find recipe by English short_name
+		// Find recipe by English short_name and populate base recipe references
 		const recipe = await Recipe.findOne({
 			"translations.en.short_name": params.name
-		});
+		})
+		.populate({
+			path: 'translations.en.ingredients.baseRecipeRef',
+			select: 'short_name name ingredients instructions translations'
+		})
+		.populate({
+			path: 'translations.en.instructions.baseRecipeRef',
+			select: 'short_name name ingredients instructions translations'
+		})
+		.lean();
 
 		if (!recipe) {
 			throw error(404, 'Recipe not found');
@@ -25,7 +34,7 @@ export const GET: RequestHandler = async ({ params }) => {
 		}
 
 		// Return English translation with necessary metadata
-		const englishRecipe = {
+		let englishRecipe: any = {
 			_id: recipe._id,
 			short_name: recipe.translations.en.short_name,
 			name: recipe.translations.en.name,
@@ -55,6 +64,25 @@ export const GET: RequestHandler = async ({ params }) => {
 			germanShortName: recipe.short_name,
 		};
 
+		// Map populated base recipe refs to resolvedRecipe field
+		if (englishRecipe.ingredients) {
+			englishRecipe.ingredients = englishRecipe.ingredients.map((item: any) => {
+				if (item.type === 'reference' && item.baseRecipeRef) {
+					return { ...item, resolvedRecipe: item.baseRecipeRef };
+				}
+				return item;
+			});
+		}
+
+		if (englishRecipe.instructions) {
+			englishRecipe.instructions = englishRecipe.instructions.map((item: any) => {
+				if (item.type === 'reference' && item.baseRecipeRef) {
+					return { ...item, resolvedRecipe: item.baseRecipeRef };
+				}
+				return item;
+			});
+		}
+
 		// Merge English alt/caption with original image paths
 		// Handle both array and single object (there's a bug in add page that sometimes saves as object)
 		const imagesArray = Array.isArray(recipe.images) ? recipe.images : (recipe.images ? [recipe.images] : []);

src/utils/translation.ts

@@ -541,6 +541,30 @@ class DeepLTranslationService {
 				continue;
 			}
 
+			// Handle base recipe references
+			if (oldGroup.type === 'reference' || newGroup.type === 'reference') {
+				// If type changed (reference <-> section), it's definitely changed
+				if (oldGroup.type !== newGroup.type) {
+					changes.push({ groupIndex: i, changed: true });
+					continue;
+				}
+
+				// Both are references - check reference-specific fields
+				if (oldGroup.type === 'reference' && newGroup.type === 'reference') {
+					const referenceChanged =
+						String(oldGroup.baseRecipeRef) !== String(newGroup.baseRecipeRef) ||
+						oldGroup.includeIngredients !== newGroup.includeIngredients ||
+						oldGroup.showLabel !== newGroup.showLabel ||
+						oldGroup.labelOverride !== newGroup.labelOverride ||
+						JSON.stringify(oldGroup.itemsBefore || []) !== JSON.stringify(newGroup.itemsBefore || []) ||
+						JSON.stringify(oldGroup.itemsAfter || []) !== JSON.stringify(newGroup.itemsAfter || []);
+
+					changes.push({ groupIndex: i, changed: referenceChanged });
+					continue;
+				}
+			}
+
+			// Regular section handling
 			// Check if group name changed
 			const nameChanged = oldGroup.name !== newGroup.name;
 
@@ -608,6 +632,30 @@ class DeepLTranslationService {
 				continue;
 			}
 
+			// Handle base recipe references
+			if (oldGroup.type === 'reference' || newGroup.type === 'reference') {
+				// If type changed (reference <-> section), it's definitely changed
+				if (oldGroup.type !== newGroup.type) {
+					changes.push({ groupIndex: i, changed: true });
+					continue;
+				}
+
+				// Both are references - check reference-specific fields
+				if (oldGroup.type === 'reference' && newGroup.type === 'reference') {
+					const referenceChanged =
+						String(oldGroup.baseRecipeRef) !== String(newGroup.baseRecipeRef) ||
+						oldGroup.includeInstructions !== newGroup.includeInstructions ||
+						oldGroup.showLabel !== newGroup.showLabel ||
+						oldGroup.labelOverride !== newGroup.labelOverride ||
+						JSON.stringify(oldGroup.stepsBefore || []) !== JSON.stringify(newGroup.stepsBefore || []) ||
+						JSON.stringify(oldGroup.stepsAfter || []) !== JSON.stringify(newGroup.stepsAfter || []);
+
+					changes.push({ groupIndex: i, changed: referenceChanged });
+					continue;
+				}
+			}
+
+			// Regular section handling
 			// Check if group name changed
 			const nameChanged = oldGroup.name !== newGroup.name;