Fix btn visibility in menu tree item

Author: sten

resources/views/livewire/menu-tree-item.blade.php

@@ -1,9 +1,9 @@
 <div class="menu-tree-item" data-item-id="{{ $item->id }}">
     <div class="flex items-center p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 group hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{ $depth > 0 ? 'ml-' . ($depth * 8) : '' }}">
-        
+
         @if($showActions)
         <!-- Drag Handle -->
-        <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 mr-4 opacity-0 group-hover:opacity-100 transition-opacity">
+        <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 mr-4">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path>
             </svg>
@@ -12,7 +12,7 @@
 
         <!-- Expand/Collapse Button for items with children -->
         @if($this->hasChildren())
-            <button 
+            <button
                 type="button"
                 wire:click="toggleExpanded"
                 class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
@@ -30,9 +30,11 @@ class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 trans
             <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-3">
                     @if($item->icon)
-                        <span class="text-gray-500 text-lg">{!! $item->icon !!}</span>
+                        <x-filament::icon
+                            icon="{{ $item->icon }}"
+                            class="h-5 w-5 text-gray-500 text-lg"/>
                     @endif
-                    
+
                     <div>
                         <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                             {{ $this->getItemDisplayLabel() }}
@@ -41,7 +43,7 @@ class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 trans
                             {{ $this->getItemTypeLabel() }}
                         </p>
                     </div>
-                    
+
                     @if(!$item->is_visible)
                         <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                             {{ flexiblePagesTrans('menu_items.status.hidden') }}
@@ -56,42 +58,36 @@ class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 trans
                         <x-filament::button
                             color="gray"
                             size="xs"
+                            icon="heroicon-o-plus"
+                            tooltip="{{ flexiblePagesTrans('menu_items.tree.add_child') }}"
+                            label-sr-only="{{ flexiblePagesTrans('menu_items.tree.add_child') }}"
                             wire:click="mountAction('addChild')"
-                        >
-                            <x-slot name="icon">
-                                heroicon-o-plus
-                            </x-slot>
-                            {{ flexiblePagesTrans('menu_items.tree.add_child') }}
-                        </x-filament::button>
+                        ></x-filament::button>
                     @endif
-                    
+
                     <x-filament::button
-                        color="primary"
+                        color="gray"
                         size="xs"
+                        icon="heroicon-o-pencil"
+                        tooltip="{{ flexiblePagesTrans('menu_items.tree.edit') }}"
+                        label-sr-only="{{ flexiblePagesTrans('menu_items.tree.edit') }}"
                         wire:click="mountAction('edit')"
-                    >
-                        <x-slot name="icon">
-                            heroicon-o-pencil
-                        </x-slot>
-                        {{ flexiblePagesTrans('menu_items.tree.edit') }}
-                    </x-filament::button>
-                    
+                    ></x-filament::button>
+
                     <x-filament::button
                         color="danger"
                         size="xs"
+                        icon="heroicon-o-trash"
+                        tooltip="{{ flexiblePagesTrans('menu_items.tree.delete') }}"
+                        label-sr-only="{{ flexiblePagesTrans('menu_items.tree.delete') }}"
                         wire:click="mountAction('delete')"
-                    >
-                        <x-slot name="icon">
-                            heroicon-o-trash
-                        </x-slot>
-                        {{ flexiblePagesTrans('menu_items.tree.delete') }}
-                    </x-filament::button>
+                    ></x-filament::button>
                 </div>
                 @endif
             </div>
         </div>
     </div>
-    
+
     <!-- Children -->
     @if($this->hasChildren() && $isExpanded)
         <div class="space-y-2 mt-2" wire:key="children-{{ $item->id }}">
@@ -101,8 +97,8 @@ class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 trans
                     'depth' => $depth + 1,
                     'maxDepth' => $maxDepth,
                     'showActions' => $showActions
-                ], key($child->id))
+                ], key: $child->id)
             @endforeach
         </div>
     @endif
-</div>
+</div>