finished the upgrade to filament 4. completely revamped the frontend with codex, now it looks great!

app/Filament/Resources/Images/ImageResource.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Filament\Resources;
+
+use App\Filament\Resources\ImageResource\Pages;
+use App\Filament\Resources\ImageResource\RelationManagers;
+use App\Models\Image;
+use Filament\Forms;
+use Filament\Forms\Form;
+use Filament\Resources\Resource;
+use Filament\Tables;
+use Filament\Tables\Table;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\SoftDeletingScope;
+use Filament\Forms\Components\TextInput;
+use Filament\Tables\Columns\TextColumn;
+use Filament\Forms\Components\FileUpload;
+
+class ImageResource extends Resource
+{
+    protected static ?string $model = Image::class;
+
+    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
+
+    public static function form(Form $form): Form
+    {
+        return $form
+            ->schema([
+                FileUpload::make('path')
+                    ->label(__('filament.resource.image.form.path'))
+                    ->required()
+                    ->image()
+                    ->directory('uploads'),
+                Forms\Components\Toggle::make('is_public')
+                    ->label(__('Publicly Visible'))
+                    ->default(false),
+            ]);
+    }
+
+    public static function table(Table $table): Table
+    {
+        return $table
+            ->columns([
+                TextColumn::make('path')->label(__('filament.resource.image.table.path'))->searchable()->sortable(),
+                Tables\Columns\ImageColumn::make('path')->label(__('filament.resource.image.table.image')),
+            ])
+            ->filters([
+                //
+            ])
+            ->actions([
+                Tables\Actions\EditAction::make(),
+            ])
+            ->bulkActions([
+                Tables\Actions\BulkActionGroup::make([
+                    Tables\Actions\DeleteBulkAction::make(),
+                ]),
+            ]);
+    }
+    
+    public static function getRelations(): array
+    {
+        return [
+            //
+        ];
+    }
+    
+    public static function getPages(): array
+    {
+        return [
+            'index' => Pages\ListImages::route('/'),
+            'edit' => Pages\EditImage::route('/{record}/edit'),
+        ];
+    }
+}

app/Filament/Resources/Images/Pages/EditImage.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Filament\Resources\ImageResource\Pages;
+
+use App\Filament\Resources\ImageResource;
+use Filament\Actions;
+use Filament\Resources\Pages\EditRecord;
+
+class EditImage extends EditRecord
+{
+    protected static string $resource = ImageResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\DeleteAction::make(),
+        ];
+    }
+
+    protected function getRedirectUrl(): string
+    {
+        return $this->getResource()::getUrl('index');
+    }
+}

app/Filament/Resources/Images/Pages/ListImages.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Filament\Resources\ImageResource\Pages;
+
+use App\Filament\Resources\ImageResource;
+use Filament\Actions;
+use Filament\Resources\Pages\ListRecords;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\Storage;
+use Filament\Notifications\Notification;
+
+class ListImages extends ListRecords
+{
+    protected static string $resource = ImageResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\Action::make('delete_all')
+                ->label('Delete All Images')
+                ->icon('heroicon-o-trash')
+                ->color('danger')
+                ->requiresConfirmation()
+                ->action(function () {
+                    // Delete all images from storage
+                    Storage::disk('public')->deleteDirectory('images');
+                    Storage::disk('public')->makeDirectory('images');
+                    
+                    // Show success notification
+                    Notification::make()
+                        ->title('All images deleted successfully')
+                        ->success()
+                        ->send();
+                    
+                    // Refresh the page
+                    $this->redirect(static::getUrl());
+                }),
+        ];
+    }
+
+    protected function shouldPersistTableFiltersInSession(): bool
+    {
+        return true;
+    }
+
+    protected function shouldPersistTableSortInSession(): bool
+    {
+        return true;
+    }
+
+    protected function shouldPersistTableSearchInSession(): bool
+    {
+        return true;
+    }
+
+    protected function paginateTableQuery(Builder $query): Paginator
+    {
+        $paginator = parent::paginateTableQuery($query);
+        return $paginator;
+    }
+
+    public function updatedTablePage($page)
+    {
+        $this->dispatch('table-pagination-updated', ['tableId' => $this->id, 'page' => $page]);
+    }
+
+    protected function getTableQueryStringIdentifier(): ?string
+    {
+        return 'images-table';
+    }
+}