Custom toolbar

[MattMoszczynski]

Hi there 👋 I was recently using your addon to make a custom board for managing tasks and I want to add a custom toolbar for actions like archiving old tasks.

The problem is that whenever I move the card to another list the toolbar disappears and I receive an error in console Uncaught Snapshot missing on Livewire component with id: COMPONENT_ID

My code for the record blade template looks like this:

@php
    $key = $record->getKey();
@endphp

<div
    id="{{ $key }}"
    class="record bg-white dark:bg-gray-700 rounded-lg px-4 py-2 cursor-grab font-medium text-gray-600 dark:text-gray-200"
    @if($record->timestamps && now()->diffInSeconds($record->{$record::UPDATED_AT}) < 3)
        x-data
        x-init="
            $el.classList.add('animate-pulse-twice', 'bg-primary-100', 'dark:bg-primary-800')
            $el.classList.remove('bg-white', 'dark:bg-gray-700')
            setTimeout(() => {
                $el.classList.remove('bg-primary-100', 'dark:bg-primary-800')
                $el.classList.add('bg-white', 'dark:bg-gray-700')
            }, 3000)
        "
    @endif
>
    @if ($record->preview)
        <img src="{{ Storage::url($record->preview) }}" class="w-full h-32 object-cover rounded-lg my-2" alt="{{ $record->{static::$recordTitleAttribute} }}">
    @endif

    <div wire:click="recordClicked('{{ $key }}', {{ @json_encode($record) }})">{{ $record->{static::$recordTitleAttribute} }}</div>

    @if ($record->labels->isNotEmpty())
        <div class="flex items-center gap-2 mt-2">
            @foreach ($record->labels as $label)
                <span @style([
                    'background-color: '.$label['color'],
                ]) class="px-2 py-1 text-xs font-semibold text-white rounded-sm">{{ $label['text'] }}</span>
            @endforeach
        </div>
    @endif

    <livewire:kanban-toolbar
        wire:key="commission-{{ $key }}-toolbar"
        :commission="$record"
        @archived="$refresh"
        @edit="recordClicked($event.detail.key, $event.detail.data)"
    />
</div>

As you can see I added wire:key to my component but it's still somehow losing reference to it. I don't know if I am still missing something or making a trivial mistake. I am relatively new to Filament and Livewire.

[mokhosh]

I'd say don't create a livewire component for your menu. Make an alpine component and put the methods you want to call on the kanban board.

[MattMoszczynski]

I'll give it a try whenever find a moment and I'll let you know what I ended up with 🫡