From 064cadc538072b5fe99d2b4e2f269d0cb4a04a34 Mon Sep 17 00:00:00 2001
From: Norman Huth <norman@huth.it>
Date: Sat, 7 Feb 2026 04:51:42 +0100
Subject: [PATCH] fix: add missing `wire:key` to recipe index component

closes #298
---
 app/Livewire/Web/Recipes/RecipeIndex.php      |  24 ++++
 .../components/recipes/recipe-card.blade.php  | 112 +++++++++---------
 2 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/app/Livewire/Web/Recipes/RecipeIndex.php b/app/Livewire/Web/Recipes/RecipeIndex.php
index f4c1f1f..d8226ae 100644
--- a/app/Livewire/Web/Recipes/RecipeIndex.php
+++ b/app/Livewire/Web/Recipes/RecipeIndex.php
@@ -47,6 +47,15 @@ class RecipeIndex extends AbstractComponent
 
     public bool $filterOnlyPublished = false;
 
+    /** @deprecated Legacy property - no longer used */
+    public bool $filterHideVariants = false;
+
+    /** @deprecated Legacy property - no longer used */
+    public bool $filterShowVariants = false;
+
+    /** @deprecated Legacy property - no longer used */
+    public bool $filterShowCanonical = false;
+
     /** @var array<int> */
     public array $excludedAllergenIds = [];
 
@@ -83,6 +92,21 @@ class RecipeIndex extends AbstractComponent
     /** @var array{0: int, 1: int}|null */
     public ?array $totalTimeRange = null;
 
+    /**
+     * Boot the component and clean up legacy properties.
+     */
+    public function boot(): void
+    {
+        // Remove legacy filter properties that no longer exist
+        $legacyKeys = ['filterHideVariants', 'filterShowVariants', 'filterShowCanonical'];
+
+        foreach ($legacyKeys as $key) {
+            if (request()->has($key)) {
+                request()->request->remove($key);
+            }
+        }
+    }
+
     /**
      * Initialize the component.
      */
diff --git a/resources/views/web/components/recipes/recipe-card.blade.php b/resources/views/web/components/recipes/recipe-card.blade.php
index 44f288b..93ba613 100644
--- a/resources/views/web/components/recipes/recipe-card.blade.php
+++ b/resources/views/web/components/recipes/recipe-card.blade.php
@@ -88,33 +88,35 @@ class="absolute bottom-2 left-2 rounded px-2 py-1 text-xs font-semibold"
       @if ($recipe->tags->where('display_label', true)->isNotEmpty())
         <div class="mt-2 flex flex-wrap gap-1">
           @foreach ($recipe->tags->where('display_label', true) as $tag)
-            @php $isActive = in_array($tag->id, $tagIds ?? []); @endphp
-            {{-- Clickable disabled: zinc --}}
-            <flux:badge
-              x-data
-              x-show="!$store.settings?.clickableTags"
-              x-cloak
-              color="zinc"
-              size="sm"
-            >{{ $tag->name }}</flux:badge>
-            {{-- Clickable enabled: lime if active, zinc with plus icon if not --}}
-            <flux:badge
-              x-data
-              x-show="$store.settings?.clickableTags"
-              x-cloak
-              x-on:click.stop="$wire.toggleTag({{ $tag->id }})"
-              as="button"
-              :color="$isActive ? 'lime' : 'zinc'"
-              icon:variant="micro"
-              size="sm"
-              wire:loading.attr="disabled"
-              wire:target="toggleTag({{ $tag->id }})"
-            >
-              <flux:icon.loader-circle variant="micro" class="animate-spin" wire:loading wire:target="toggleTag({{ $tag->id }})" />
-              <flux:icon.check variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => !$isActive]) />
-              <flux:icon.plus variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => $isActive]) />
-              {{ $tag->name }}
-            </flux:badge>
+            <div wire:key="grid-tag-{{ $recipe->id }}-{{ $tag->id }}">
+              @php $isActive = in_array($tag->id, $tagIds ?? []); @endphp
+              {{-- Clickable disabled: zinc --}}
+              <flux:badge
+                x-data
+                x-show="!$store.settings?.clickableTags"
+                x-cloak
+                color="zinc"
+                size="sm"
+              >{{ $tag->name }}</flux:badge>
+              {{-- Clickable enabled: lime if active, zinc with plus icon if not --}}
+              <flux:badge
+                x-data
+                x-show="$store.settings?.clickableTags"
+                x-cloak
+                x-on:click.stop="$wire.toggleTag({{ $tag->id }})"
+                as="button"
+                :color="$isActive ? 'lime' : 'zinc'"
+                icon:variant="micro"
+                size="sm"
+                wire:loading.attr="disabled"
+                wire:target="toggleTag({{ $tag->id }})"
+              >
+                <flux:icon.loader-circle variant="micro" class="animate-spin" wire:loading wire:target="toggleTag({{ $tag->id }})" />
+                <flux:icon.check variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => !$isActive]) />
+                <flux:icon.plus variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => $isActive]) />
+                {{ $tag->name }}
+              </flux:badge>
+            </div>
           @endforeach
         </div>
       @endif
@@ -173,33 +175,35 @@ class="shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold"
       @if ($recipe->tags->where('display_label', true)->isNotEmpty())
         <div class="mt-2 flex flex-wrap gap-1">
           @foreach ($recipe->tags->where('display_label', true) as $tag)
-            @php $isActive = in_array($tag->id, $tagIds ?? []); @endphp
-            {{-- Clickable disabled: zinc --}}
-            <flux:badge
-              x-data
-              x-show="!$store.settings?.clickableTags"
-              x-cloak
-              color="zinc"
-              size="sm"
-            >{{ $tag->name }}</flux:badge>
-            {{-- Clickable enabled: lime if active, zinc with plus icon if not --}}
-            <flux:badge
-              x-data
-              x-show="$store.settings?.clickableTags"
-              x-cloak
-              x-on:click.stop="$wire.toggleTag({{ $tag->id }})"
-              as="button"
-              :color="$isActive ? 'lime' : 'zinc'"
-              icon:variant="micro"
-              size="sm"
-              wire:loading.attr="disabled"
-              wire:target="toggleTag({{ $tag->id }})"
-            >
-              <flux:icon.loader-circle variant="micro" class="animate-spin" wire:loading wire:target="toggleTag({{ $tag->id }})" />
-              <flux:icon.check variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => !$isActive]) />
-              <flux:icon.plus variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => $isActive]) />
-              {{ $tag->name }}
-            </flux:badge>
+            <div wire:key="list-tag-{{ $recipe->id }}-{{ $tag->id }}">
+              @php $isActive = in_array($tag->id, $tagIds ?? []); @endphp
+              {{-- Clickable disabled: zinc --}}
+              <flux:badge
+                x-data
+                x-show="!$store.settings?.clickableTags"
+                x-cloak
+                color="zinc"
+                size="sm"
+              >{{ $tag->name }}</flux:badge>
+              {{-- Clickable enabled: lime if active, zinc with plus icon if not --}}
+              <flux:badge
+                x-data
+                x-show="$store.settings?.clickableTags"
+                x-cloak
+                x-on:click.stop="$wire.toggleTag({{ $tag->id }})"
+                as="button"
+                :color="$isActive ? 'lime' : 'zinc'"
+                icon:variant="micro"
+                size="sm"
+                wire:loading.attr="disabled"
+                wire:target="toggleTag({{ $tag->id }})"
+              >
+                <flux:icon.loader-circle variant="micro" class="animate-spin" wire:loading wire:target="toggleTag({{ $tag->id }})" />
+                <flux:icon.check variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => !$isActive]) />
+                <flux:icon.plus variant="micro" wire:loading.remove wire:target="toggleTag({{ $tag->id }})" @class(['hidden' => $isActive]) />
+                {{ $tag->name }}
+              </flux:badge>
+            </div>
           @endforeach
         </div>
       @endif