Filament Command Palette Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require usamamuneerchaudhary/filament-command-palette
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="UsamaMuneerChaudhary\FilamentCommandPalette\FilamentCommandPaletteServiceProvider"
   

2. Register the Palette Add to your app/Providers/AppServiceProvider.php:

   use UsamaMuneerChaudhary\FilamentCommandPalette\FilamentCommandPalette;
   
   public function boot(): void
   {
       FilamentCommandPalette::make()
           ->register();
   }
   

3. First Use Case Trigger the palette with Cmd+K (macOS) or Ctrl+K (Windows/Linux) in your Filament panel. Test by searching for built-in actions like:

   • Dashboard
   • Logout
   • Create [Resource]

Implementation Patterns

Core Workflows

1. Registering Custom Commands Use the FilamentCommandPalette::make() fluent interface to add actions:

   FilamentCommandPalette::make()
       ->register()
       ->addCommand(
           label: 'Generate Report',
           action: fn () => redirect()->route('reports.generate'),
           icon: 'heroicon-o-chart-bar',
           group: 'Admin'
       );
   

2. Dynamic Command Generation Fetch commands from a database or API:

   FilamentCommandPalette::make()
       ->register()
       ->addDynamicCommands(
           fn () => User::query()
               ->limit(5)
               ->get()
               ->map(fn ($user) => [
                   'label' => "View User: {$user->name}",
                   'action' => fn () => redirect()->route('users.show', $user),
               ])
       );
   

3. Grouping and Categorization Organize commands into logical groups (e.g., Admin, Content, Support):

   FilamentCommandPalette::make()
       ->register()
       ->addCommand(/* ... */)
       ->group('Admin')
       ->addCommand(/* ... */)
       ->group('Content');
   

4. Integration with Filament Resources Attach palette actions to resource-specific workflows:

   use Filament\Resources\Pages;
   
   public static function getPages(): array
   {
       return [
           'create' => Pages\CreateRecord::route('/create'),
           'edit' => Pages\EditRecord::route('/{record}/edit'),
           // Add palette action to edit page
           'edit' => fn () => Pages\EditRecord::route('/{record}/edit')
               ->extraAttributes(['data-command-palette-trigger' => 'true']),
       ];
   }
   

5. Shortcuts and Keybindings Override default shortcuts in config/filament-command-palette.php:

   'shortcuts' => [
       'global' => 'ctrl+k',
       'focus' => 'ctrl+shift+k',
   ],
   

Gotchas and Tips

Common Pitfalls

1. Command Overwriting

   • If multiple providers register the same command label, the last registered action will overwrite previous ones. Use unique labels or groups to avoid conflicts.

2. Dynamic Command Caching

   • Dynamic commands fetched via closures may not update in real-time. Cache results if performance is critical:

     ->addDynamicCommands(fn () => Cache::remember('palette_commands', now()->addHours(1), fn () => /* ... */));
     

3. Icon Conflicts

   • Ensure custom icons (e.g., from Heroicons) are properly loaded in your Filament panel. Use absolute paths or verify the icon library is included.

4. Permission Handling

   • The palette does not natively handle Filament’s built-in permissions. Filter commands manually:

     ->addCommand(/* ... */)
     ->when(fn () => auth()->user()->can('access_admin')),
     

5. Styling Quirks

   • Override palette styles via resources/css/filament-command-palette.css:

     .filament-command-palette {
         --wp-gap: 0.5rem;
         --wp-width: 800px;
     }
     

Debugging Tips

• Log Commands Enable debug mode in config to log registered commands:

  'debug' => env('FILAMENT_PALETTE_DEBUG', false),
  

  Check storage/logs/filament-command-palette.log.

• Inspect Registered Commands Dump the palette registry in a service provider:

  \UsamaMuneerChaudhary\FilamentCommandPalette\Facades\FilamentCommandPalette::getCommands();
  

• Keyboard Shortcut Conflicts Test shortcuts in isolation. Use browser dev tools (Event Listeners tab) to verify keybindings.

Extension Points

1. Custom Command Classes Extend the base Command class for reusable logic:

   use UsamaMuneerChaudhary\FilamentCommandPalette\Contracts\Command;
   
   class CustomCommand implements Command {
       public function getLabel(): string { /* ... */ }
       public function getAction(): Closure { /* ... */ }
       // ...
   }
   

2. Event Listeners Listen for palette events (e.g., CommandExecuted):

   FilamentCommandPalette::make()
       ->register()
       ->listen(fn ($command) => Log::info("Executed: {$command->getLabel()}"));
   

3. Localization Translate labels dynamically:

   ->addCommand(
       label: __('filament-command-palette::commands.create_post'),
       action: /* ... */
   );
   

   Publish and translate the resources/lang files.

4. Dark Mode Support Ensure palette styles work in Filament’s dark mode by using CSS variables or media queries:

   @media (prefers-color-scheme: dark) {
       .filament-command-palette {
           --wp-bg-color: #1a1a1a;
       }
   }