Refactor modal components to use x-dynamic-component

Replaces static Filament component tags with <x-dynamic-component> in modal-related Blade views. This change improves flexibility and consistency in how modal components are rendered and allows for easier customization and extension.

Author: cklei-carly

resources/css/custom-nestable-item.css

@@ -106,5 +106,15 @@
 }
 
 .filament-tree-component .nestable-menu {
-    @apply flex gap-2 mb-4;
+    @apply mb-4;
+}
+.filament-tree-component .nestable-menu,
+.filament-tree-component .nestable-menu .toolbar-btns {
+    @apply flex items-center gap-2;
+}
+.filament-tree-component .nestable-menu {
+    @apply justify-between;
+}
+.filament-tree-component .nestable-menu .toolbar-btns.main {
+    @apply flex-1;
 }

resources/views/components/actions/index.blade.php

@@ -21,4 +21,4 @@ function ($action) use ($record): bool {
     );
 @endphp
 
-<x-filament::actions :actions="$actions" :alignment="$alignment" class="fi-tree-actions"/>
+<x-filament::actions :actions="$actions" :alignment="$alignment" :fullWidth="true" class="fi-tree-actions"/>

resources/views/components/modal/actions.blade.php

@@ -1,7 +1,9 @@
-<x-filament::actions
+<x-dynamic-component 
+    component="filament::actions" 
+    :actions="$actions ?? []"
+    :alignment="$alignment ?? null"
+    :fullWidth="$fullWidth ?? false"
     :attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
-    :alignment="config('filament.layout.actions.modal.actions.alignment')"
-    :dark-mode="config('filament.dark_mode')"
 >
     {{ $slot }}
-</x-filament::actions>
+</x-dynamic-component>

resources/views/components/modal/heading.blade.php

@@ -1,6 +1,6 @@
-<x-filament::modal.heading
+<x-dynamic-component 
+    component="filament::modal.heading" 
     :attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
-    :dark-mode="\Filament\Facades\Filament::hasDarkMode()"
 >
     {{ $slot }}
-</x-filament::modal.heading>
+</x-dynamic-component>

resources/views/components/modal/index.blade.php

@@ -1,19 +1,32 @@
-@captureSlots([
-    'actions',
-    'content',
-    'footer',
-    'header',
-    'heading',
-    'subheading',
-    'trigger',
-])
-
-<x-filament::modal
-    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
-    :dark-mode="\Filament\Facades\Filament::hasDarkMode()"
-    heading-component="filament-tree::modal.heading"
-    {{-- hr-component="tables::hr" --}}
-    subheading-component="filament-tree::modal.subheading"
+<x-dynamic-component 
+    component="filament::modal.index" 
+    :alignment="$alignment ?? null"
+    :ariaLabelledby="$ariaLabelledby ?? null"
+    :autofocus="$autofocus ?? null"
+    :closeButton="$closeButton ?? null"
+    :closeByClickingAway="$closeByClickingAway ?? null"
+    :closeByEscaping="$closeByEscaping ?? null"
+    :closeEventName="$closeEventName ?? null"
+    :closeQuietlyEventName="$closeQuietlyEventName ?? null"
+    :description="$description ?? null"
+    :extraModalWindowAttributeBag="$extraModalWindowAttributeBag ?? null"
+    :footer="$footer ?? null"
+    :footerActions="$footerActions ?? null"
+    :footerActionsAlignment="$footerActionsAlignment ?? null"
+    :header="$header ?? null"
+    :heading="$heading ?? null"
+    :icon="$icon ?? null"
+    :iconAlias="$iconAlias ?? null"
+    :iconColor="$iconColor ?? null"
+    :id="$id ?? null"
+    :openEventName="$openEventName ?? null"
+    :slideOver="$slideOver ?? null"
+    :stickyFooter="$stickyFooter ?? null"
+    :stickyHeader="$stickyHeader ?? null"
+    :trigger="$trigger ?? null"
+    :visible="$visible ?? null"
+    :width="$width ?? null"
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
 >
     {{ $slot }}
-</x-filament::modal>
+</x-dynamic-component>

resources/views/components/modal/subheading.blade.php

@@ -1,6 +1,6 @@
-<x-filament::modal.description
+<x-dynamic-component 
+    component="filament::modal.description" 
     :attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
-    :dark-mode="\Filament\Facades\Filament::hasDarkMode()"
 >
     {{ $slot }}
-</x-filament::modal.description>
+</x-dynamic-component>