Header toolbar: fix spacing, persist search in URL, clean up filters

resources/views/filament/pages/board-header.blade.php

@@ -1,15 +1,10 @@
 @php
-    use Filament\Support\Enums\IconSize;
     use Filament\Support\Enums\Width;
     use Filament\Support\Facades\FilamentView;
-    use Filament\Support\Icons\Heroicon;
     use Filament\Tables\Enums\FiltersLayout;
     use Filament\Tables\Filters\Indicator;
-    use Filament\Tables\View\TablesIconAlias;
     use Filament\Tables\View\TablesRenderHook;
 
-    use function Filament\Support\generate_icon_html;
-
     $table = $this->getTable();
     $isFilterable = $table->isFilterable();
     $isSearchable = $table->isSearchable();
@@ -32,7 +27,7 @@
     $isModalLayout = ($filtersLayout === FiltersLayout::Modal) || ($hasFiltersDialog && $filtersTriggerAction->isModalSlideOver());
 @endphp
 
-<div class="fi-page-header-main-ctn !gap-y-2 !pt-4 !pb-0">
+<div class="flex flex-col gap-y-1">
     {{-- Breadcrumbs --}}
     @if (filled($breadcrumbs))
         <x-filament::breadcrumbs :breadcrumbs="$breadcrumbs" class="mb-2" />
@@ -144,40 +139,22 @@ class="fi-ta-filters-dropdown"
         @if (filled($filterIndicatorsView = FilamentView::renderHook(TablesRenderHook::FILTER_INDICATORS, scopes: static::class, data: ['filterIndicators' => $filterIndicators])))
             {{ $filterIndicatorsView }}
         @else
-            <div class="fi-ta-filter-indicators flex items-center gap-x-2">
-                <div class="flex flex-wrap items-center gap-1">
-                    @foreach ($filterIndicators as $indicator)
-                        <x-filament::badge :color="$indicator->getColor()">
-                            {{ $indicator->getLabel() }}
-
-                            @if ($indicator->isRemovable())
-                                <x-slot
-                                    name="deleteButton"
-                                    :label="__('filament-tables::table.filters.actions.remove.label')"
-                                    :wire:click="$indicator->getRemoveLivewireClickHandler()"
-                                    wire:loading.attr="disabled"
-                                    wire:target="removeTableFilter"
-                                ></x-slot>
-                            @endif
-                        </x-filament::badge>
-                    @endforeach
-                </div>
-
-                @if (collect($filterIndicators)->contains(fn (Indicator $indicator): bool => $indicator->isRemovable()))
-                    <button
-                        type="button"
-                        x-tooltip="{
-                            content: @js(__('filament-tables::table.filters.actions.remove_all.tooltip')),
-                            theme: $store.theme,
-                        }"
-                        wire:click="removeTableFilters"
-                        wire:loading.attr="disabled"
-                        wire:target="removeTableFilters,removeTableFilter"
-                        class="fi-icon-btn fi-size-sm"
-                    >
-                        {{ generate_icon_html(Heroicon::XMark, alias: TablesIconAlias::FILTERS_REMOVE_ALL_BUTTON, size: IconSize::Small) }}
-                    </button>
-                @endif
+            <div class="fi-ta-filter-indicators flex flex-wrap items-center gap-1 mt-1">
+                @foreach ($filterIndicators as $indicator)
+                    <x-filament::badge :color="$indicator->getColor()">
+                        {{ $indicator->getLabel() }}
+
+                        @if ($indicator->isRemovable())
+                            <x-slot
+                                name="deleteButton"
+                                :label="__('filament-tables::table.filters.actions.remove.label')"
+                                :wire:click="$indicator->getRemoveLivewireClickHandler()"
+                                wire:loading.attr="disabled"
+                                wire:target="removeTableFilter"
+                            ></x-slot>
+                        @endif
+                    </x-filament::badge>
+                @endforeach
             </div>
         @endif
     @endif

resources/views/index.blade.php

@@ -22,7 +22,7 @@ class="w-full h-full flex flex-col relative"
 
     <!-- Board Content -->
     <div class="flex-1 overflow-hidden h-full">
-        <div class="flex flex-row h-full overflow-x-auto overflow-y-hidden gap-5">
+        <div class="flex flex-row h-full overflow-x-auto overflow-y-hidden gap-x-5">
             @foreach($columns as $columnId => $column)
                 <x-flowforge::column
                     :columnId="$columnId"

src/BoardPage.php

@@ -32,4 +32,14 @@ abstract class BoardPage extends Page implements HasActions, HasBoard, HasForms
      */
     #[Url(as: 'filters')]
     public ?array $tableFilters = null;
+
+    /**
+     * @return array<string, array<string, mixed>>
+     */
+    protected function queryString(): array
+    {
+        return [
+            'tableSearch' => ['as' => 'search', 'except' => ''],
+        ];
+    }
 }

src/BoardResourcePage.php

@@ -40,6 +40,16 @@ abstract class BoardResourcePage extends Page implements HasActions, HasBoard, H
     #[Url(as: 'filters')]
     public ?array $tableFilters = null;
 
+    /**
+     * @return array<string, array<string, mixed>>
+     */
+    protected function queryString(): array
+    {
+        return [
+            'tableSearch' => ['as' => 'search', 'except' => ''],
+        ];
+    }
+
     /**
      * Override Filament's action resolution to detect and route board actions.
      *