web UI

VisionBuilder.UI.Blazor/Dialogs/RecipeSelectionDialog.razor

@@ -0,0 +1,44 @@
+@using MudBlazor
+
+<MudDialog>
+    <DialogContent>
+        @if (ViewModel != null)
+        {
+            <div class="recipe-grid">
+                @foreach (var recipe in ViewModel.Recipes)
+                {
+                    var isSelected = recipe == ViewModel.SelectedRecipe;
+                    <div class="recipe-item @(isSelected ? "recipe-selected" : "")"
+                         @onclick="() => SelectRecipe(recipe)">
+                        @if (recipe.Image != null && !recipe.Image.Empty())
+                        {
+                            <img src="@recipe.Image.ToBase64DataUri(60)" alt="@recipe.RecipeName" class="recipe-thumbnail" />
+                        }
+                        else
+                        {
+                            <div class="recipe-thumbnail recipe-no-image">No image</div>
+                        }
+                        <span class="recipe-name">@recipe.RecipeName</span>
+                    </div>
+                }
+            </div>
+        }
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="Cancel">Cancel</MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;
+    [Parameter] public RecipeSelectionVM? ViewModel { get; set; }
+
+    private void SelectRecipe(RecipeData recipe)
+    {
+        if (ViewModel != null)
+            ViewModel.SelectedRecipe = recipe;
+        MudDialog.Close(DialogResult.Ok(true));
+    }
+
+    private void Cancel() => MudDialog.Cancel();
+}