Global Spotlight Search Feature #334
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement a global spotlight search component with keyboard navigation and real-time search functionality. The component searches both items and projects, displays results in categorized sections, and includes quick actions for common tasks. Features: - Real-time search with debouncing - Keyboard navigation (arrow keys, enter, escape) - Search items by title and content - Search projects by title and description - Quick actions for creating items and accessing key pages - Support for both authenticated and guest users - Smooth transitions and backdrop blur effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add event listeners in the Header component to handle spotlight search interactions. When users create items from the search, the query can be pre-filled in the submit item modal. Also add support for opening the submit item modal without pre-filled data. Changes: - Add On attribute import for Livewire events - Implement openSubmitItemWithQuery() to pre-fill item title from search - Implement openSubmitItemModal() to open modal without data - Remove unnecessary fillForm call from submitItemAction 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replace the old search action with spotlight search triggers throughout the header navigation. Add the spotlight search component to the main app layout for global accessibility. Changes: - Replace searchItemAction with spotlight open event triggers - Update keyboard shortcuts (Cmd+K/Ctrl+K) to open spotlight - Add search button with keyboard hint in desktop navigation - Add search button in mobile navigation menu - Include spotlight-search component in app layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive translations for the spotlight search interface in both English and Dutch. Includes search placeholders, section headers, action labels, keyboard hints, and result count messages. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add custom styles for the spotlight search modal including shadow effects and custom scrollbar styling. The scrollbar matches the design system with proper light/dark mode support. Changes: - Add spotlight-container shadow effects for light and dark modes - Style custom scrollbar for results container - Implement hover states for scrollbar thumb - Ensure proper dark mode color adjustments 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update the prefill mechanism to use Filament's mountUsing method with action arguments instead of trying to pass form data directly. The query is now passed as 'prefilledTitle' argument and properly fills the title field when opening the submit item modal from search. Also store query in variable before closing spotlight to ensure the value is captured correctly before the component state resets.
Remove old search modal implementation and search button label component that are no longer needed after migration to spotlight search. These files have been replaced by the new spotlight search functionality implemented in previous commits. Deleted files: - resources/views/modals/search.blade.php - resources/views/components/search-button-label.blade.php
Reduce code duplication in spotlight-search.blade.php by creating two reusable Blade components: 1. x-spotlight.section-header - Renders consistent section headers 2. x-spotlight.result-item - Renders search result items with: - Support for both links and buttons - Flexible icon handling (Heroicons or emoji) - Optional metadata and aside slots - Consistent styling and hover states - Keyboard navigation support This refactoring improves maintainability and makes the spotlight search view more readable while preserving all functionality.
- Combine mountUsing with currentProjectId from upstream - Support both prefilled title from search and currentProjectId - Remove deleted search-button-label.blade.php component
- Remove duplicate 'profile' key from both EN and NL translations - Remove unused quick action translation keys - Keep only the search-specific translations
- Add 'profile_title' key to avoid conflict with array-based 'profile' key - Add back all missing translation keys needed by spotlight search - Update spotlight-search.blade.php to use 'profile_title' instead of 'profile' - Fixes htmlspecialchars error caused by passing array to trans()
- Add 'search_button' translation key for EN and NL
- Update header.blade.php to use trans('spotlight.search_button')
- Both desktop and mobile search buttons now use translations
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Changes
SpotlightSearchLivewire component with real-time searchTechnical Details