UiXpress Global Search / Command Palette

The UiXpress Global Search is a powerful command palette that provides instant access to WordPress content, admin pages, and quick actions. Accessible via Cmd/Ctrl + K, it offers intelligent search capabilities with rich metadata, command syntax, and personalized suggestions.

Quick Start

• Open Search: Press Cmd/Ctrl + K (Mac) or Ctrl + K (Windows/Linux)
• Navigate Results: Use ↑ and ↓ arrow keys
• Select Result: Press Enter
• Close Search: Press Esc

Phase 1 Features

1. Recent & Frequently Accessed Items

The search component intelligently tracks your usage patterns to provide quick access to items you use most often.

Recently Accessed

• Automatically tracks the last 5 items you've accessed
• Appears when the search field is empty
• Shows items you've recently clicked on or navigated to
• Updates in real-time as you use the search

Frequently Used

• Tracks access frequency for all items
• Displays the top 5 most frequently accessed items
• Sorted by access count (most used first)
• Appears when the search field is empty

How It Works

• All tracking data is stored locally in your browser (localStorage)
• No server-side tracking or data collection
• Completely private to your browser session
• Persists across browser sessions

2. Rich Result Metadata

Search results now display comprehensive information at a glance, making it easier to identify the right content.

Post & Page Results

• Status Badges: Visual indicators for Published, Draft, Pending, Scheduled, or Private status
• Featured Images: Thumbnail previews of post featured images
• Publication Date: Relative time display (e.g., "2 days ago", "Just now")
• Author Information: Author name displayed below the title
• Category Icons: Visual indicators for different content types

User Results

• Avatar: Initial-based avatar circles
• User Roles: Displays user roles (e.g., "Administrator", "Editor")
• Email Address: Shows user email address

Category Results

• Folder Icons: Visual category indicators
• Category Names: Clear category identification

Status Badge Colors

• Published: Green badge
• Draft: Yellow badge
• Pending: Orange badge
• Scheduled: Blue badge
• Private: Gray badge

3. Command Syntax / Filters

Use special prefixes to filter search results by content type, making searches faster and more precise.

Available Commands

Custom Post Types

You can also filter by custom post types:

>product search term
>event search term

Usage Examples

Search for posts only:

>post wordpress tutorial

Search for users:

@user admin

Show quick actions:

!action

View help:

?help

4. Search History

Never lose track of your searches. The search component remembers your recent searches for quick access.

Features

• Last 10 Searches: Automatically saves your last 10 search queries
• Quick Access: Click on any history item to repeat the search
• Clear History: One-click button to clear all search history
• Smart Display: History appears when you focus on the search input

How to Use

1. Click on the search input field
2. Recent searches appear below the input
3. Click any search term to repeat that search
4. Use the "Clear" button to remove all history

Quick Actions

Quick actions provide instant access to common WordPress admin tasks.

Available Actions

• New Post: Create a new blog post
• New Page: Create a new page
• View Dashboard: Navigate to WordPress dashboard
• View Site: Open your site's frontend
• Site Settings: Access WordPress general settings
• Dark Mode: Switch to dark theme
• Light Mode: Switch to light theme

Using Quick Actions

1. Open search (Cmd/Ctrl + K)
2. Type !action to filter to quick actions only
3. Or simply start typing the action name
4. Use arrow keys to navigate, Enter to select

Keyboard Shortcuts

Search Behavior

Empty State

When the search field is empty, you'll see:

• Recently Accessed items (if any)
• Frequently Used items (if any)
• Quick Actions
• Search History (when input is focused)

With Query

When you type a search query:

• Results are filtered based on your query
• Command syntax is parsed automatically
• Results update in real-time (debounced)
• Rich metadata is displayed for each result

Command Filtering

When using command syntax (e.g., >post):

• Only matching content types are searched
• Results are filtered to the specified type
• Faster search performance
• More focused results

Technical Details

Data Storage

• Search History: Stored in localStorage with key uixp-search-history
• Recently Accessed: Stored in localStorage with key uixp-recently-accessed
• Frequently Used: Stored in localStorage with key uixp-frequently-used

Search Endpoints

The search queries the following WordPress REST API endpoints:

• wp/v2/posts - Blog posts
• wp/v2/pages - Pages
• wp/v2/categories - Categories
• wp/v2/users - Users (if user has permission)
• Custom post types (as configured)

Embedded Data

Search requests include _embed=true parameter to fetch:

• Featured media (for thumbnails)
• Author information
• Related content metadata

Performance

• Debounced Search: 300ms delay to reduce API calls
• Result Limit: 5 results per content type
• Caching: Results are cached during the session
• Lazy Loading: Embedded data loaded only when needed

Best Practices

For Users

1. Use Command Syntax: Filter searches with prefixes for faster results
2. Leverage History: Reuse recent searches instead of retyping
3. Check Recently Accessed: Quick access to items you use often
4. Keyboard Navigation: Use arrow keys for faster navigation

For Developers

1. Extend Quick Actions: Add custom actions via the quickActions array
2. Custom Post Types: Automatically included if configured in settings
3. Track Access: Use trackAccess() function to track custom items
4. Modify History: Access history functions via useSearchHistory() composable

Troubleshooting

Search Not Working

• Check browser console for errors
• Verify WordPress REST API is accessible
• Ensure user has proper permissions

History Not Saving

• Check browser localStorage is enabled
• Verify browser allows localStorage access
• Clear browser cache if needed

Results Not Showing

• Check network tab for API errors
• Verify search query is not empty
• Check command syntax is correct

Metadata Not Displaying

• Ensure _embed=true parameter is included in API requests
• Verify WordPress REST API supports embedded data
• Check featured media is set for posts

Future Enhancements

Planned features for future phases:

• Inline preview pane
• Quick actions menu (right-click)
• Bulk operations
• Advanced filters (date, status, author)
• Custom commands/extensibility
• Search analytics
• Fuzzy search improvements
• Saved searches

Support

For issues or feature requests, please contact support or submit an issue in the repository.

Version: 1.0.0
Last Updated: 2024
Component: app/src/components/app/search/index.vue
Composable: app/src/composables/useSearchHistory.js