From caaf5f87551f82f14e6c5b3acda5e369cebc41d8 Mon Sep 17 00:00:00 2001
From: Benjamin Nussbaum <bnussbau@users.noreply.github.com>
Date: Tue, 12 Aug 2025 14:34:32 +0200
Subject: [PATCH] fix(#74): switch out of sync when deleting / moving items in
 table

---
 resources/views/livewire/devices/configure.blade.php | 4 ++--
 resources/views/livewire/playlists/index.blade.php   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/devices/configure.blade.php b/resources/views/livewire/devices/configure.blade.php
index bbfa7d3..488e904 100644
--- a/resources/views/livewire/devices/configure.blade.php
+++ b/resources/views/livewire/devices/configure.blade.php
@@ -632,7 +632,7 @@ new class extends Component {
                             </thead>
                             <tbody class="divide-y divide-zinc-800/10 dark:divide-white/20" data-flux-rows>
                             @foreach($playlist->items->sortBy('order') as $item)
-                                <tr data-flux-row>
+                                <tr data-flux-row wire:key="playlist-item-{{ $item->id }}">
                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
                                         @if($item->isMashup())
                                             <div class="flex items-center gap-2">
@@ -649,7 +649,7 @@ new class extends Component {
                                         @endif
                                     </td>
                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
-                                        <flux:switch wire:model.live="item.is_active"
+                                        <flux:switch
                                                      wire:click="togglePlaylistItemActive({{ $item->id }})"
                                                      :checked="$item->is_active"/>
                                     </td>
diff --git a/resources/views/livewire/playlists/index.blade.php b/resources/views/livewire/playlists/index.blade.php
index e31993f..3e786b4 100644
--- a/resources/views/livewire/playlists/index.blade.php
+++ b/resources/views/livewire/playlists/index.blade.php
@@ -155,7 +155,7 @@ new class extends Component {
                                     <div class="flex items-center justify-between mb-4">
                                         <div class="flex items-center gap-4">
                                             <h4 class="text-lg font-medium dark:text-zinc-200">{{ $playlist->name }}</h4>
-                                            <flux:switch wire:model.live="playlist.is_active"
+                                            <flux:switch wire:model="playlist.is_active"
                                                          wire:click="togglePlaylistActive({{ $playlist->id }})"
                                                          :checked="$playlist->is_active"/>
                                         </div>
@@ -199,7 +199,7 @@ new class extends Component {
                                         </thead>
                                         <tbody class="divide-y divide-zinc-800/10 dark:divide-white/20" data-flux-rows>
                                             @foreach($playlist->items->sortBy('order') as $item)
-                                                <tr data-flux-row>
+                                                <tr data-flux-row wire:key="playlist-item-{{ $item->id }}">
                                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
                                                         @if($item->isMashup())
                                                             <div class="flex items-center gap-2">
@@ -216,7 +216,7 @@ new class extends Component {
                                                         @endif
                                                     </td>
                                                     <td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
-                                                        <flux:switch wire:model.live="item.is_active"
+                                                        <flux:switch
                                                                      wire:click="togglePlaylistItemActive({{ $item->id }})"
                                                                      :checked="$item->is_active"/>
                                                     </td>