uiXpress
Plugins

Features

Detailed documentation of all plugin manager features and capabilities.

Layout & Navigation

Split-Panel Design

Left Sidebar:

  • Fixed width sidebar (384px on desktop)
  • Scrollable plugin list
  • Search box at top
  • Upload and repository buttons
  • Status indicators

Right Panel:

  • Flexible width content area
  • Plugin details display
  • Scrollable content
  • Responsive layout

Mobile Adaptation:

  • Full-width sidebar
  • Drawer for details view
  • Touch-optimized
  • Swipe gestures

URL-Based:

  • Plugin slug in URL
  • Bookmarkable links
  • Browser history support
  • Direct linking

Route Structure:

  • / - Main list view
  • /:slug - Plugin details
  • /plugin-search - Repository search
  • /plugin-search/:slug - Plugin inspection
  • /plugin-performance/:slug - Performance view

Installed Plugins List

List Display

Plugin Items:

  • Status dot (green/gray)
  • Plugin name
  • Author name
  • Version number
  • Update indicator (orange dot)

Visual Hierarchy:

  • Active plugins first
  • Alphabetical sorting within groups
  • Hover effects
  • Selected state highlighting

Information Displayed:

  • Plugin name (truncated if long)
  • Author • Version format
  • Status indicator
  • Update badge

Search Functionality

Search Box:

  • Located in sidebar header
  • Real-time filtering
  • Searches multiple fields
  • Instant results

Search Fields:

  • Plugin name
  • Author name
  • Version number

Behavior:

  • Updates as you type
  • Case-insensitive
  • No Enter key needed
  • Clears on empty

Empty State

No Plugins:

  • Empty folder icon
  • Helpful message
  • Upload button visible
  • Repository search link

No Search Results:

  • Empty state message
  • Clear search option
  • Upload option
  • Repository search link

Plugin Details View

Visual Design:

  • Full-width banner image
  • Gradient overlay (black to transparent)
  • Plugin icon overlay (bottom left)
  • Rounded corners
  • Default banner if none available

Banner Sources:

  • WordPress.org repository banners
  • High/low resolution options
  • Fallback to default design
  • Cached for performance

Plugin Icon:

  • 64x64px rounded square
  • White border
  • Shadow effect
  • Positioned bottom-left

Plugin Header Section

Title & Status:

  • Large plugin name (2xl)
  • Status badge (Active/Inactive)
  • Update badge (if available)
  • Action buttons row

Metadata Display:

  • Version number
  • Author name (with link)
  • Description paragraph
  • Action links row

Action Buttons:

  • Activate (if inactive)
  • Deactivate (if active)
  • Update (if available)
  • Delete (always visible)

Requirements Warning

Dependency Checking:

  • Checks for required plugins
  • Shows warning if missing
  • Lists required plugins
  • Disables activation if requirements not met

Visual Design:

  • Red warning box
  • Warning icon
  • Clear requirement list
  • Actionable information

Plugin Action Links:

  • Settings links (if plugin provides)
  • Only shown when active
  • Custom plugin links
  • Styled buttons

Standard Links:

  • Plugin Info (repository)
  • Performance (monitoring)
  • Plugin Page (external)
  • Author Page (external)

Link Styling:

  • Primary style for action links
  • Secondary style for info links
  • External link indicators
  • Hover effects

Plugin Information Grid

Information Displayed:

  • Requires WordPress version
  • Requires PHP version
  • Tested up to version
  • Network activation support

Grid Layout:

  • Responsive columns
  • Label/value pairs
  • Clear typography
  • Consistent spacing

Settings Section

Automatic Updates:

  • Toggle switch
  • Per-plugin control
  • Visual feedback
  • Status indicator

Toggle Design:

  • Modern switch component
  • On/off states
  • Disabled state support
  • Smooth transitions

Plugin Repository

Search Interface

Search Box:

  • Large search input
  • Search icon
  • Enter key to search
  • Clear button

Sort Options:

  • Dropdown selector
  • Multiple sort criteria
  • Real-time sorting
  • Persists across searches

Sort Criteria:

  • Name (alphabetical)
  • Slug
  • Rating (highest first)
  • Popularity
  • Downloads (most first)
  • Active Installs (most first)
  • Last Updated (recent first)

Plugin Cards

Card Design:

  • Banner image header
  • Plugin icon overlay
  • Plugin information
  • Action buttons
  • Statistics display

Information Displayed:

  • Plugin name
  • Short description
  • Active installs count
  • Install button
  • View details option

Visual Elements:

  • Banner images
  • Plugin icons
  • Install count badges
  • Hover effects
  • Click to inspect

Pagination

Features:

  • 20 plugins per page
  • Previous/Next buttons
  • Page number display
  • Total pages shown

Navigation:

  • Previous button (disabled on first page)
  • Next button (disabled on last page)
  • Page counter
  • Smooth scrolling

Plugin Inspection View

Detailed Information:

  • Full plugin description
  • Screenshots gallery
  • Installation instructions
  • FAQ section
  • Reviews and ratings
  • Compatibility info

Installation Options:

  • Install button (if not installed)
  • Activate button (if installed but inactive)
  • Deactivate button (if active)
  • Delete button (if installed)

Sections:

  • Description (full HTML)
  • Installation (step-by-step)
  • FAQ (accordion)
  • Screenshots (lightbox gallery)
  • Reviews (if available)

Plugin Operations

Activate Plugin

Button States:

  • Enabled (if requirements met)
  • Disabled (if requirements not met)
  • Loading (during activation)
  • Success (after activation)

Process:

  1. Click "Activate" button
  2. Loading state shown
  3. API call made
  4. Status updates
  5. Success notification
  6. UI refreshes

Requirements:

  • Required plugins must be active
  • WordPress version compatible
  • PHP version compatible
  • No conflicts

Deactivate Plugin

Button States:

  • Enabled (if active)
  • Disabled (if inactive)
  • Loading (during deactivation)
  • Success (after deactivation)

Process:

  1. Click "Deactivate" button
  2. Loading state shown
  3. API call made
  4. Status updates
  5. Success notification
  6. Settings links hidden

Safety:

  • No data loss
  • Settings preserved
  • Can be reactivated
  • No confirmation needed

Update Plugin

Update Detection:

  • Checks for updates
  • Compares versions
  • Shows update badge
  • Enables update button

Update Process:

  1. Click "Update" button
  2. Loading state shown
  3. Update API call
  4. Version updates
  5. Badge removed
  6. Success notification

Features:

  • One-click updates
  • Progress tracking
  • Version comparison
  • Error handling

Delete Plugin

Confirmation:

  • Confirmation dialog
  • Warning message
  • Cannot be undone notice
  • Cancel/Confirm buttons

Delete Process:

  1. Click "Delete" button
  2. Confirmation dialog
  3. Confirm deletion
  4. Loading state shown
  5. Plugin removed
  6. Success notification
  7. Redirect to list

Safety:

  • Confirmation required
  • Permanent deletion
  • Files removed
  • Database cleaned
  • No recovery

Upload Plugin

Upload Button:

  • Located in sidebar header
  • File picker trigger
  • ZIP file only
  • Progress indicator

Upload Process:

  1. Click upload button
  2. Select ZIP file
  3. File validates
  4. Upload progress shown
  5. Plugin installs
  6. Success notification

Features:

  • ZIP validation
  • Progress tracking
  • Error handling
  • File size limits
  • Automatic activation option

Status Indicators

Status Dots

Active Plugin:

  • Green dot (bg-green-500)
  • Visual indicator
  • Left of plugin name
  • Always visible

Inactive Plugin:

  • Gray dot (bg-zinc-300)
  • Visual indicator
  • Left of plugin name
  • Always visible

Status Badges

Active Badge:

  • Green background
  • "Active" text
  • Rounded corners
  • Small size

Inactive Badge:

  • Gray background
  • "Inactive" text
  • Rounded corners
  • Small size

Update Badge:

  • Orange background
  • "Update Available" text
  • Rounded corners
  • Small size

Performance Features

Caching

WordPress.org Data:

  • Banner images cached
  • Plugin icons cached
  • 24-hour expiration
  • LocalStorage storage
  • Reduces API calls

Cache Strategy:

  • Check cache first
  • Fetch if expired
  • Update cache on fetch
  • Handle cache errors

Lazy Loading

Plugin Data:

  • Fetch banners on demand
  • Load icons when visible
  • Defer repository data
  • Optimize initial load

Image Loading:

  • Lazy load banners
  • Progressive image loading
  • Placeholder support
  • Error handling

Responsive Design

Desktop View

Layout:

  • Split-panel design
  • Fixed sidebar width
  • Flexible content area
  • Full feature set

Features:

  • Hover effects
  • Keyboard navigation
  • Multi-column grids
  • Full information display

Tablet View

Layout:

  • Split-panel maintained
  • Adjusted widths
  • Touch-optimized
  • Full feature set

Adaptations:

  • Larger touch targets
  • Swipe gestures
  • Optimized spacing
  • Responsive grids

Mobile View

Layout:

  • Full-width sidebar
  • Drawer for details
  • Stacked layout
  • Touch-optimized

Features:

  • Drawer navigation
  • Touch gestures
  • Simplified controls
  • Mobile upload

Dark Mode

Full Support:

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

Features:

  • Automatic detection
  • Manual toggle
  • Persistent preference
  • Smooth transitions