Features

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

Navigation

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

Banner Header

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

Action Links

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