Refactor buttons on menu tree item

Author: sten

CLAUDE.md

@@ -114,6 +114,25 @@ The menu builder is partially implemented with the following components:
 ],
 ```
 
+## Development Guidelines
+
+### Use Existing Filament Components
+**IMPORTANT**: Always use existing Filament blade components and patterns instead of implementing custom HTML/CSS solutions.
+
+- Use `<x-filament::button>` instead of custom button HTML
+- Use `<x-filament::badge>` instead of custom badge styling  
+- Use `<x-filament::icon>` for consistent icon rendering
+- Use Filament's built-in form components and actions
+- Use Filament's existing patterns for modals, notifications, and UI elements
+- Leverage Filament's color system, sizing, and theming capabilities
+
+This ensures:
+- Consistent styling across the application
+- Automatic theme support (light/dark mode)
+- Built-in accessibility features
+- Future compatibility with Filament updates
+- Reduced maintenance overhead
+
 ## Common Development Patterns
 
 When extending this package:
@@ -122,4 +141,5 @@ When extending this package:
 3. Use the facade `FilamentFlexibleContentBlockPages` to access configuration
 4. SEO handling follows a fallback pattern: page SEO → hero image → default settings
 5. Route generation uses the configured route helper class
-6. Menu items follow the linkable pattern for polymorphic relationships
+6. Menu items follow the linkable pattern for polymorphic relationships
+7. **Always prefer existing Filament components over custom implementations**

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

@@ -51,13 +51,41 @@ class="mr-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 trans
 
                 @if($showActions)
                 <!-- Actions -->
-                <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                     @if($this->canHaveChildren())
-                        {{ ($this->addChildAction)(['color' => 'gray']) }}
+                        <x-filament::button
+                            color="gray"
+                            size="xs"
+                            wire:click="mountAction('addChild')"
+                        >
+                            <x-slot name="icon">
+                                heroicon-o-plus
+                            </x-slot>
+                            {{ flexiblePagesTrans('menu_items.tree.add_child') }}
+                        </x-filament::button>
                     @endif
 
-                    {{ ($this->editAction)(['color' => 'primary']) }}
-                    {{ ($this->deleteAction)(['color' => 'danger']) }}
+                    <x-filament::button
+                        color="primary"
+                        size="xs"
+                        wire:click="mountAction('edit')"
+                    >
+                        <x-slot name="icon">
+                            heroicon-o-pencil
+                        </x-slot>
+                        {{ flexiblePagesTrans('menu_items.tree.edit') }}
+                    </x-filament::button>
+                    
+                    <x-filament::button
+                        color="danger"
+                        size="xs"
+                        wire:click="mountAction('delete')"
+                    >
+                        <x-slot name="icon">
+                            heroicon-o-trash
+                        </x-slot>
+                        {{ flexiblePagesTrans('menu_items.tree.delete') }}
+                    </x-filament::button>
                 </div>
                 @endif
             </div>