From f7e6891884ea5a049f0425419772ffa94894acdf Mon Sep 17 00:00:00 2001
From: Norman Huth <norman@huth.it>
Date: Sun, 25 Jan 2026 04:07:33 +0100
Subject: [PATCH 1/2] refactor(components): update recipe card and show layouts
 for improved structure and styling adjustments

---
 .../components/recipes/recipe-card.blade.php    |  9 ++++++---
 .../web/livewire/recipes/recipe-show.blade.php  | 17 +++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/views/web/components/recipes/recipe-card.blade.php b/resources/views/web/components/recipes/recipe-card.blade.php
index a5d8772..44f288b 100644
--- a/resources/views/web/components/recipes/recipe-card.blade.php
+++ b/resources/views/web/components/recipes/recipe-card.blade.php
@@ -1,5 +1,5 @@
 @if ($viewMode === \App\Enums\ViewModeEnum::Grid)
-  <flux:card class="overflow-hidden group">
+  <flux:card class="flex flex-col gap-ui">
     <div class="block relative">
       @if ($recipe->card_image_url)
         <img
@@ -55,8 +55,8 @@ class="absolute bottom-2 left-2 rounded px-2 py-1 text-xs font-semibold"
       @endif
     </div>
 
-    <div class="p-4">
-      <flux:heading size="lg" class="line-clamp-1">
+    <div class="grow">
+      <flux:heading size="">
         <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->name), 'recipe' => $recipe->id])" wire:navigate>
           {{ $recipe->name }}
         </flux:link>
@@ -66,6 +66,9 @@ class="absolute bottom-2 left-2 rounded px-2 py-1 text-xs font-semibold"
         <flux:text class="mt-1 line-clamp-2">{{ $recipe->headline }}</flux:text>
       @endif
 
+    </div>
+    <div>
+
       <div class="mt-3 flex items-center gap-4 text-sm text-zinc-500 dark:text-zinc-400">
         @if ($recipe->total_time)
           <span class="flex items-center gap-1">
diff --git a/resources/views/web/livewire/recipes/recipe-show.blade.php b/resources/views/web/livewire/recipes/recipe-show.blade.php
index b1f2610..135926a 100644
--- a/resources/views/web/livewire/recipes/recipe-show.blade.php
+++ b/resources/views/web/livewire/recipes/recipe-show.blade.php
@@ -95,8 +95,8 @@ class="rounded-full p-2 transition-colors bg-zinc-100 text-zinc-700 hover:bg-zin
       <flux:callout.heading>{{ __('Based on Canonical Recipe') }}</flux:callout.heading>
       <flux:callout.text>
         {{ __('This recipe is based on') }}
-        <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->canonical->name ?: $recipe->canonical->getFirstTranslation('name')), 'recipe' => $recipe->canonical->id])" wire:navigate class="font-medium">
-          {{ $recipe->canonical->name ?: $recipe->canonical->getFirstTranslation('name') }}
+        <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->canonical->name), 'recipe' => $recipe->canonical->id])" wire:navigate class="font-medium">
+          {{ $recipe->canonical->name }}
         </flux:link>
         ({{ $recipe->canonical->country->code }}).
       </flux:callout.text>
@@ -105,16 +105,13 @@ class="rounded-full p-2 transition-colors bg-zinc-100 text-zinc-700 hover:bg-zin
 
   {{-- Variant Recipes --}}
   @if ($recipe->variants->isNotEmpty())
-    <div class="mt-section">
-      <flux:text class="text-sm text-zinc-500 mb-ui">{{ __('Variants of this Recipe') }}</flux:text>
+    <div class="mt-ui text-sm">
+      <flux:text class="text-zinc-500 mb-ui">{{ __('Variants of this Recipe') }}</flux:text>
       <div class="flex flex-wrap gap-ui">
         @foreach ($recipe->variants as $variant)
-          <flux:badge size="sm" color="zinc">
-            <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($variant->name ?: $variant->getFirstTranslation('name')), 'recipe' => $variant->id])" wire:navigate>
-              <x-flag :code="$variant->country->code" class="mr-1" />
-              {{ $variant->name ?: $variant->getFirstTranslation('name') }}
-            </flux:link>
-          </flux:badge>
+          <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($variant->name), 'recipe' => $variant->id])" wire:navigate>
+            {{ $variant->name }}
+          </flux:link>
         @endforeach
       </div>
     </div>

From 6177d5d91cb0291e48b23de69f00241f37f8d607 Mon Sep 17 00:00:00 2001
From: Norman Huth <norman@huth.it>
Date: Sun, 25 Jan 2026 04:30:23 +0100
Subject: [PATCH 2/2] feat(variants): enhance recipe variant handling and
 layout

- Load additional relationships for variants (`label` and `tags`)
- Refactor recipes display using reusable `recipe-grid` component
- Improve variant and similar recipes sections with collapsible layout in `RecipeShow`
---
 app/Livewire/Web/Recipes/RecipeShow.php       |  3 ++
 .../components/recipes/recipe-grid.blade.php  |  7 +++
 .../livewire/recipes/recipe-show.blade.php    | 50 ++++++-------------
 3 files changed, 25 insertions(+), 35 deletions(-)
 create mode 100644 resources/views/web/components/recipes/recipe-grid.blade.php

diff --git a/app/Livewire/Web/Recipes/RecipeShow.php b/app/Livewire/Web/Recipes/RecipeShow.php
index 6ffcb38..9eadfdd 100644
--- a/app/Livewire/Web/Recipes/RecipeShow.php
+++ b/app/Livewire/Web/Recipes/RecipeShow.php
@@ -39,6 +39,8 @@ public function mount(Recipe $recipe): void
             'ingredients',
             'canonical.country',
             'variants.country',
+            'variants.label',
+            'variants.tags',
         ]);
 
         // Set default yield based on available yields
@@ -229,6 +231,7 @@ public function similarRecipes(): Collection
             ))
             ->withCount(['tags' => fn (Builder $query): Builder => $query->whereIn('tags.id', $tagIds)])
             ->orderByDesc('tags_count')
+            ->with(['label', 'tags', 'country'])
             ->limit(4)
             ->get();
     }
diff --git a/resources/views/web/components/recipes/recipe-grid.blade.php b/resources/views/web/components/recipes/recipe-grid.blade.php
new file mode 100644
index 0000000..54bb38d
--- /dev/null
+++ b/resources/views/web/components/recipes/recipe-grid.blade.php
@@ -0,0 +1,7 @@
+@props(['recipes'])
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-section">
+  @foreach ($recipes as $recipe)
+    <x-recipes.recipe-card :recipe="$recipe" :view-mode="\App\Enums\ViewModeEnum::Grid" wire:key="recipe-grid-{{ $recipe->id }}" />
+  @endforeach
+</div>
diff --git a/resources/views/web/livewire/recipes/recipe-show.blade.php b/resources/views/web/livewire/recipes/recipe-show.blade.php
index 135926a..f6c1ddf 100644
--- a/resources/views/web/livewire/recipes/recipe-show.blade.php
+++ b/resources/views/web/livewire/recipes/recipe-show.blade.php
@@ -103,23 +103,9 @@ class="rounded-full p-2 transition-colors bg-zinc-100 text-zinc-700 hover:bg-zin
     </flux:callout>
   @endif
 
-  {{-- Variant Recipes --}}
-  @if ($recipe->variants->isNotEmpty())
-    <div class="mt-ui text-sm">
-      <flux:text class="text-zinc-500 mb-ui">{{ __('Variants of this Recipe') }}</flux:text>
-      <div class="flex flex-wrap gap-ui">
-        @foreach ($recipe->variants as $variant)
-          <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($variant->name), 'recipe' => $variant->id])" wire:navigate>
-            {{ $variant->name }}
-          </flux:link>
-        @endforeach
-      </div>
-    </div>
-  @endif
-
   {{-- Description --}}
   @if ($recipe->description)
-    <div class="pt-section">
+    <div class="pt-ui">
       <flux:text>{{ $recipe->description }}</flux:text>
     </div>
   @endif
@@ -259,30 +245,24 @@ class="h-32 rounded object-cover shrink-0"
     </div>
   @endif
 
+  {{-- Variant Recipes --}}
+  @if ($recipe->variants->isNotEmpty())
+    <div x-data="{ open: false }" class="py-section border-t border-zinc-200 dark:border-zinc-700">
+      <button type="button" x-on:click="open = !open" class="flex items-center gap-ui w-full text-left">
+        <flux:heading size="lg">{{ __('Variants of this Recipe') }} ({{ $recipe->variants->count() }})</flux:heading>
+        <flux:icon.chevron-down class="size-5 transition-transform" x-bind:class="open && 'rotate-180'" />
+      </button>
+      <div x-show="open" x-collapse class="mt-4">
+        <x-web::recipes.recipe-grid :recipes="$recipe->variants" />
+      </div>
+    </div>
+  @endif
+
   {{-- Similar Recipes --}}
   @if ($this->similarRecipes->isNotEmpty())
     <div class="py-section border-t border-zinc-200 dark:border-zinc-700">
       <flux:heading size="lg" class="mb-4">{{ __('Similar Recipes') }}</flux:heading>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-section">
-        @foreach ($this->similarRecipes as $similarRecipe)
-          <flux:card class="overflow-hidden">
-            @if ($similarRecipe->card_image_url)
-              <img
-                src="{{ $similarRecipe->card_image_url }}"
-                alt="{{ $similarRecipe->name }}"
-                class="aspect-video w-full object-cover"
-              >
-            @endif
-            <div class="p-4">
-              <flux:heading size="sm" class="line-clamp-2">
-                <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($similarRecipe->name), 'recipe' => $similarRecipe->id])" wire:navigate>
-                  {{ $similarRecipe->name }}
-                </flux:link>
-              </flux:heading>
-            </div>
-          </flux:card>
-        @endforeach
-      </div>
+      <x-recipes.recipe-grid :recipes="$this->similarRecipes" />
     </div>
   @endif