replace wireConfirm with modals WIP

app/Livewire/Mod/ModerationActionButton.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Mod;
+
+use App\Models\ModeratedModel;
+use Livewire\Component;
+
+class ModerationActionButton extends Component
+{
+    public ModeratedModel $moderatedObject;
+
+    public string $actionType;
+
+    public bool $allowActions = false;
+
+    public bool $isRunning = false;
+
+    protected $listeners = ['refreshComponent' => '$refresh'];
+
+    public function render()
+    {
+        $this->allowActions = ! $this->isRunning;
+
+        return view('livewire.mod.moderation-action-button');
+    }
+
+    public function runActionEvent(): void
+    {
+        $this->isRunning = true;
+        defer(fn () => $this->invokeAction());
+        $this->js('setTimeout(3000, window.location.reload())');
+    }
+
+    public function invokeAction(): void
+    {
+        switch ($this->actionType) {
+            case 'delete':
+
+                $this->moderatedObject->delete();
+
+            case 'enable':
+            case 'disable':
+
+                $this->moderatedObject->toggleDisabled();
+
+        }
+    }
+}

app/Livewire/Mod/ModerationOptions.php

@@ -9,20 +9,22 @@ class ModerationOptions extends Component
 {
     public ModeratedModel $moderatedObject;
 
+    public bool $showDeleteDialog = false;
+
+    public bool $showDisableDialog = false;
+
     public function render()
     {
         return view('livewire.mod.moderation-options');
     }
 
-    public function delete(): void
+    public function confirmDelete(): void
     {
-        $this->moderatedObject->delete();
-        $this->js('window.location.reload()');
+        $this->showDeleteDialog = true;
     }
 
-    public function toggleDisabled(): void
+    public function confirmDisable(): void
     {
-        $this->moderatedObject->toggleDisabled();
-        $this->js('window.location.reload()');
+        $this->showDisableDialog = true;
     }
 }

resources/views/livewire/mod/moderation-action-button.blade.php

@@ -0,0 +1,18 @@
+<div class="flex gap-4">
+    @if($this->allowActions)
+    <x-button x-on:click="show = false">
+        {{ __('Cancel') }}
+    </x-button>
+    <x-danger-button wire:click="runActionEvent">
+        {{ __(ucfirst($this->actionType)) }}
+    </x-danger-button>
+    @endif
+    @if($this->isRunning)
+            <div class="text-blue-600">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style>
+                    <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/>
+                </svg>
+            </div>
+    @endif
+</div>

resources/views/livewire/mod/moderation-options.blade.php

@@ -12,7 +12,7 @@
 
         <x-slot name="content">
             <div>
-                <button wire:click.prevent="toggleDisabled" wire:confirm="{{$this->moderatedObject->disabled ? __('Enable') : __('Disable') }} '{{$this->moderatedObject->getFriendlyName()}}'?" class="p-2 h-full w-full text-blue-500 dark:text-blue-500 bg-gray-200 dark:bg-gray-800 hover:text-blue-400 dark:hover:text-blue-400">
+                <button wire:click.prevent="confirmDisable" class="p-2 h-full w-full text-blue-500 dark:text-blue-500 bg-gray-200 dark:bg-gray-800 hover:text-blue-400 dark:hover:text-blue-400">
                     <div class="flex">
                         <span class="pr-2">
                             @if ($this->moderatedObject->disabled)
@@ -33,7 +33,7 @@
             </div>
             @if(auth()->user()->isAdmin())
             <div>
-                <button wire:click.prevent="delete" wire:confirm="Delete '{{$this->moderatedObject->getFriendlyName()}}'?" class="p-2 h-full w-full text-red-500 dark:text-red-500 bg-gray-200 dark:bg-gray-800 hover:text-red-400 dark:hover:text-red-400">
+                <button wire:click.prevent="confirmDelete" class="p-2 h-full w-full text-red-500 dark:text-red-500 bg-gray-200 dark:bg-gray-800 hover:text-red-400 dark:hover:text-red-400">
                     <div class="flex">
                         <span class="pr-2">
                             {{-- Icon (trash can) --}}
@@ -49,4 +49,32 @@
         </x-slot>
 
     </x-dropdown>
+
+    @push('modals')
+        <x-dialog-modal wire:model="showDisableDialog">
+            <x-slot name="title">
+                <h2 class="text-2xl">{{__('Confirm')}} {{__($this->moderatedObject->disabled ? 'Enable' : 'Disable')}}</h2>
+            </x-slot>
+            <x-slot name="content">
+                <p>Are you sure you want to {{__($this->moderatedObject->disabled ? 'enable' : 'disable')}} '{{$this->moderatedObject->getFriendlyName()}}'?</p>
+            </x-slot>
+            <x-slot name="footer">
+                <livewire:mod.moderation-action-button actionType="{{ $this->moderatedObject->disabled ? 'enable' : 'disable' }}" :moderatedObject="$moderatedObject" />
+            </x-slot>
+        </x-dialog-modal>
+    @endpush
+
+    @push('modals')
+        <x-dialog-modal wire:model="showDeleteDialog">
+            <x-slot name="title">
+                <h2 class="text-2xl">{{ __('Confirm') }} {{ __('Delete') }}</h2>
+            </x-slot>
+            <x-slot name="content">
+                <p>Are you sure you want to {{__('Delete')}} '{{$this->moderatedObject->getFriendlyName()}}'?</p>
+            </x-slot>
+            <x-slot name="footer">
+                <livewire:mod.moderation-action-button actionType='delete' :moderatedObject="$moderatedObject" />
+            </x-slot>
+        </x-dialog-modal>
+    @endpush
 </div>

resources/views/mod/show.blade.php

@@ -13,7 +13,7 @@
             <div class="relative p-4 sm:p-6 text-center sm:text-left bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl">
                 @if (auth()->check() && auth()->user()->isModOrAdmin())
                     <div class="absolute top-0 right-0 z-50 m-2">
-                        <livewire:mod.moderation-options :moderatedObject="$mod" lazy />
+                        <livewire:mod.moderation-options :moderatedObject="$mod" />
                     </div>
                 @endif
                 @if ($mod->featured && !$mod->disabled)
@@ -112,7 +112,7 @@
                             <div class="pb-6 border-b-2 border-gray-200 dark:border-gray-800">
                                 @if (auth()->check() && auth()->user()->isModOrAdmin())
                                     <div class="absolute top-0 right-0 z-50 m-2">
-                                        <livewire:mod.moderation-options :moderatedObject="$version" lazy />
+                                        <livewire:mod.moderation-options :moderatedObject="$version" />
                                     </div>
                                 @endif
                                 <div class="flex items-center justify-between">