Features

Search Interface

Modal Design

Layout:

• Centered modal
• Overlay background
• Rounded corners
• Responsive width (500px max)
• Scrollable content area

Visual Design:

• Dark mode support
• Consistent styling
• Smooth animations
• Professional appearance

Input Field:

• Large search input
• Search icon (left)
• Loading indicator (right)
• Auto-focus on open
• Placeholder text

Search Behavior

Real-Time Search:

• Updates as you type
• Debounced (300ms)
• Instant feedback
• Smooth performance

Search Scope:

• Posts
• Pages
• Users
• Categories
• Custom post types
• Admin menu items

Result Display:

• Grouped by category
• Category headers
• Scrollable list
• Visual hierarchy

Command Syntax

Command Prefixes

Post Filter (>post):

• Filters to posts only
• Removes prefix from query
• Searches post titles/content
• Shows post results

Page Filter (>page):

• Filters to pages only
• Removes prefix from query
• Searches page titles/content
• Shows page results

User Filter (@user):

• Filters to users only
• Removes prefix from query
• Searches user names/emails
• Shows user results

Category Filter (#category):

• Filters to categories only
• Removes prefix from query
• Searches category names
• Shows category results

Quick Actions (!action):

• Shows quick actions only
• Hides search results
• Action-focused view
• Quick access

Help (?help):

• Shows command syntax
• Help documentation
• Command reference
• Learning tool

Custom Post Types

Dynamic Detection:

• Automatically detected
• Uses REST API endpoints
• >custom-type syntax
• Flexible support

Example:

• >product widgets - Search products
• >event conference - Search events
• Any custom post type
• Configurable endpoints

Command Parsing

Parsing Logic:

1. Trim query
2. Check for prefix
3. Extract filter type
4. Remove prefix
5. Search filtered type

Clean Query:

• Prefix removed
• Only content searched
• Type filtering applied
• Results filtered

Search Results

Result Types

Posts:

• Title (rendered HTML)
• Featured image thumbnail
• Status badge
• Author name
• Relative date
• Edit link

Pages:

• Title (rendered HTML)
• Featured image thumbnail
• Status badge
• Author name
• Relative date
• Edit link

Users:

• Display name
• Avatar (initial letter)
• Email address
• User roles
• Edit link

Categories:

• Category name
• Folder icon
• Description (if available)
• Category link

Admin Menu:

• Menu item name
• Parent menu context
• Menu icon
• Direct link

Result Display

Visual Elements:

• Thumbnails (posts/pages)
• Avatars (users)
• Icons (categories)
• Status badges
• Metadata

Information Hierarchy:

• Title/name (primary)
• Status badge (if applicable)
• Date (relative format)
• Author (if applicable)
• Roles (users)

Result Actions:

• Click to navigate
• Enter key to select
• Arrow navigation
• Access tracking

Status Badges

Post/Page Statuses:

• Published (green)
• Draft (yellow)
• Pending (orange)
• Private (gray)
• Scheduled (blue)

Badge Display:

• Color-coded
• Text label
• Visual indicator
• Status information

Date Formatting

Relative Dates:

• "Just now" (< 1 minute)
• "X minutes ago" (< 1 hour)
• "X hours ago" (< 24 hours)
• "X days ago" (< 7 days)
• Date format (> 7 days)

Format Logic:

• Calculates difference
• Uses relative time
• Falls back to date
• User-friendly

Quick Actions

Action List

New Post:

• Icon: Add
• Action: Create post
• Navigates to editor
• Direct creation

New Page:

• Icon: Add
• Action: Create page
• Navigates to editor
• Direct creation

View Dashboard:

• Icon: Equalizer
• Action: Navigate to dashboard
• Direct link
• Quick access

View Site:

• Icon: Home
• Action: Open frontend
• New tab/window
• Site preview

Site Settings:

• Icon: Tune
• Action: Open settings
• Requires permissions
• Direct navigation

Dark/Light Mode:

• Icon: Dark/Light mode
• Action: Toggle theme
• Instant switch
• Context-aware

Action Filtering

Filtering:

• Can filter with !action
• Shows only actions
• Searchable by name
• Quick access

Visibility:

• Context-aware hiding
• Permission-based
• Theme-aware
• Dynamic display

Search History

History Management

Tracking:

• Query text
• Timestamp
• Last 10 searches
• Persistent storage

Storage:

• LocalStorage
• Per-browser
• Per-user
• Automatic saving

Display:

• Dropdown when focused
• Empty query state
• Recent searches list
• Clickable items

History Features

Add to History:

• Automatic on search
• Deduplication
• Most recent first
• Limited to 10

Clear History:

• Clear button
• Removes all history
• Instant clearing
• No confirmation

History Items:

• Query text
• History icon
• Clickable
• Re-executes search

Recently Accessed

Access Tracking

What's Tracked:

• Item ID
• Category
• Name/title
• URL
• Timestamp
• Access count

Storage:

• LocalStorage
• Last 5 items
• Automatic tracking
• Persistent

Display:

• Empty query state
• Up to 3 items
• Recent items list
• Click to navigate

Tracking Logic

When Tracked:

• Item clicked
• Result selected
• Navigation occurs
• Automatic tracking

Update Logic:

• Moves to top
• Updates timestamp
• Increments count
• Updates frequently used

Frequently Used

Usage Tracking

What's Tracked:

• Access count
• Last accessed time
• Item details
• Frequency ranking

Storage:

• LocalStorage
• Top 5 items
• Sorted by frequency
• Automatic updates

Display:

• Empty query state
• Up to 3 items
• Frequent items list
• Star icon

Ranking Logic

Sorting:

• By access count (descending)
• Then by last accessed (descending)
• Most frequent first
• Dynamic updates

Updates:

• Increments on access
• Updates timestamp
• Re-sorts automatically
• Maintains top 5

Keyboard Navigation

Navigation System

Arrow Keys:

• Up: Previous result
• Down: Next result
• Cycles through results
• Wraps at boundaries

Selection:

• Enter: Select active
• Executes action
• Navigates to item
• Closes modal

Closing:

• Escape: Close modal
• Clears search
• Returns to page
• Cancels operation

Visual Feedback

Active Result:

• Highlighted background
• Different color
• Clear indication
• Smooth transitions

Hover States:

• Hover effects
• Visual feedback
• Interactive elements
• Clear affordances

Onboarding Tutorial

Tutorial Content

Welcome Message:

• Title: "Welcome to Global Search"
• Description
• Tips to get started
• Dismissible

Example Searches:

• Search posts (>post)
• Find users (@user)
• Quick actions (!action)
• View commands (?help)

Keyboard Shortcuts:

• Navigation keys
• Selection key
• Close key
• Open key

Tutorial Features

Interactive Examples:

• Clickable examples
• Execute searches
• Learn by doing
• Immediate feedback

Dismissal:

• "Got it, thanks!" button
• Close icon
• One-time display
• Stored preference

Re-show Tutorial:

• "Show tutorial again" link
• Re-display option
• Helpful for learning
• Always available

Empty States

No Results State

Display:

• "No results found" message
• Helpful suggestions
• Command syntax reminder
• Clear search option

Actions:

• View commands button
• Clear search button
• Helpful guidance
• Try again option

Initial State

Display:

• Welcome message
• Example searches
• Keyboard shortcuts guide
• Quick actions shown

Content:

• Getting started tips
• Example commands
• Keyboard shortcuts
• Interactive examples

Performance Features

Debouncing

Search Debounce:

• 300ms delay
• Reduces API calls
• Smooth typing
• Efficient searching

Benefits:

• Fewer requests
• Better performance
• Smooth UX
• Resource efficient

Parallel Requests

API Calls:

• Multiple endpoints
• Promise.all for parallel
• Fast results
• Efficient loading

Endpoints:

• Posts
• Pages
• Users
• Categories
• Custom types

Result Limiting

Per Category:

• 5 results per category
• Fast display
• Manageable lists
• Quick scanning

Benefits:

• Faster loading
• Less scrolling
• Focused results
• Better UX

Responsive Design

Mobile Support

Modal Width:

• Responsive width
• Max 500px desktop
• Full width mobile
• Adapts to screen

Touch Support:

• Touch-friendly
• Large targets
• Swipe gestures
• Mobile optimized

Dark Mode

Full Support:

• Dark theme throughout
• High contrast
• Readable text
• Consistent styling

Theme Toggle:

• Quick action available
• Instant switch
• Persistent preference
• Context-aware