Features

Role List Interface

List Layout

Sidebar Structure:

• Header with title and "New Role" button
• Search bar
• Results count
• Role list items
• Empty state messaging

Role Item Display:

• Role name (primary)
• User count (secondary)
• Click to view details
• Active state indicator
• Hover effects

Role Item States

Default State:

• Role name displayed
• User count shown
• Hover effects
• Clickable

Hover State:

• Background highlight
• Cursor pointer
• Smooth transition
• Visual feedback

Active State:

• Viewing details
• Highlighted background
• Visual indicator
• Right panel shows details

Search Functionality

Search Scope:

• Role name
• Role slug
• Real-time search
• Case-insensitive

Search Behavior:

• Updates as you type
• Filters list immediately
• Clears on empty
• Search icon indicator
• Instant results

Role Creation

Create Role Modal

Form Fields:

• Role Name (required)
• Role Slug (optional, auto-generated)
• Initial Capabilities (empty by default)

Form Validation:

• Role name required
• Name length (1-100 characters)
• Slug format validation
• Slug length (max 60 characters)
• Duplicate slug prevention

Creation Process:

1. Click "New Role" button
2. Modal opens
3. Enter role name
4. Slug auto-generates
5. Edit slug if needed (optional)
6. Click "Create Role"
7. Role created
8. Navigate to role details
9. Success notification

Post-Creation:

• Role added to list
• Details view opens
• Form reset
• Modal closes
• Success notification

Slug Generation:

• Auto-generated from role name
• Lowercase conversion
• Special characters removed
• Spaces replaced with hyphens
• Multiple hyphens collapsed
• Editable before creation

Role Name Editing

Inline Editing

Edit Mode:

• Click edit icon
• Inline input appears
• Current name pre-filled
• Focus on input
• Save/Cancel buttons

Editing Process:

1. Click edit icon next to role name
2. Input field appears
3. Edit name
4. Press Enter or click Save
5. Name updates
6. List refreshes automatically

Validation:

• Name required
• Length validation (1-100 chars)
• Trim whitespace
• Error messages

Cancel Option:

• Click Cancel button
• Press Escape key
• Reverts to original name
• Exits edit mode

Save Process:

• API call to update name
• Loading state
• Success notification
• List refresh
• Exit edit mode

Role Deletion

Deletion Process

Delete Button:

• Visible for deletable roles
• Red/danger styling
• Disabled for protected roles
• Loading state during deletion

Deletion Steps:

1. Click "Delete Role" button
2. Confirmation dialog appears
3. Review role name and warning
4. Click "Delete" to confirm
5. Role deleted
6. List refreshes
7. Navigate to list view
8. Success notification

Confirmation Dialog:

• Role name displayed
• Warning message
• "Delete" button (red)
• "Cancel" button
• Cannot be undone warning

Deletion Restrictions

Protected Roles:

• Administrator
• Editor
• Author
• Contributor
• Subscriber

User Count Check:

• Cannot delete if users assigned
• User count displayed
• Error message shown
• Suggests reassigning users

Error Handling:

• Clear error messages
• User count displayed
• Action suggestions
• Graceful failure

Capability Management

Capability Categories

Category System:

• General capabilities
• Posts capabilities
• Pages capabilities
• Media capabilities
• Users capabilities
• Plugins capabilities
• Themes capabilities
• Settings capabilities
• Other capabilities

Category Display:

• Collapsible sections
• Category name
• Capability count
• Expand/collapse icon
• "All selected" indicator

Capability Selection

Individual Selection:

• Checkbox per capability
• Click to toggle
• Visual feedback
• Selection count updates
• Save button enables

Capability Display:

• Formatted name (Title Case)
• Technical name (monospace)
• Checkbox indicator
• Selected state highlight
• Hover effects

Selection States:

• Unselected (empty checkbox)
• Selected (checked checkbox)
• Hover state
• Active state

Category Operations

Select All:

• Button per category
• Selects all in category
• Updates selection count
• Visual feedback
• Disabled when all selected

Deselect All:

• Button per category
• Deselects all in category
• Updates selection count
• Visual feedback
• Always enabled

Category Status:

• "All selected" indicator
• Green checkmark icon
• Visual confirmation
• Category-level feedback

Capability Search

Search Interface:

• Search bar above capabilities
• Search icon
• Clear button (when searching)
• Real-time filtering

Search Behavior:

• Filters by capability name
• Case-insensitive
• Updates instantly
• Shows matching capabilities
• Preserves category grouping

Search Results:

• Filtered categories shown
• Matching capabilities highlighted
• Empty state if no matches
• Clear search option

Capability Summary

Summary Display:

• Selection count (X / Y)
• Progress bar
• Percentage indicator
• Visual feedback
• Always visible

Progress Bar:

• Visual percentage
• Color-coded
• Smooth transitions
• Updates in real-time
• Responsive width

Saving Changes

Save Process

Save Button:

• Appears when changes made
• Sticky footer bar
• Primary styling
• Loading state
• Disabled when saving

Save Steps:

1. Make capability changes
2. "Save Changes" button appears
3. Click to save
4. Confirmation (if Administrator)
5. API call
6. Loading state
7. Success notification
8. Changes saved
9. Button disappears

Change Tracking:

• Tracks initial state
• Compares with current state
• Detects changes
• Enables save button
• Shows unsaved indicator

Administrator Warning

Warning Banner:

• Red background
• Warning icon
• Prominent message
• Always visible for Administrator

Confirmation Dialog:

• Appears before saving
• Warning message
• Risk explanation
• "Yes, I understand" button
• Cancel option

Warning Message:

• Explains lockout risk
• Suggests staging site
• Requires explicit confirmation
• Cannot be bypassed

User Count Display

User Count Feature

Display:

• Shows users per role
• Updated in real-time
• Accurate count
• Visible in list and details

User Count Logic:

• Fetched from WordPress
• Counts users with role
• Updates after changes
• Accurate representation

Display Format:

• "X user" (singular)
• "X users" (plural)
• Secondary text styling
• Always visible

Responsive Design

Desktop View

Layout:

• Split-panel (sidebar + details)
• Full feature set
• Optimal spacing
• Hover effects
• Full capability editor

Features:

• All features available
• Full search
• Complete editing
• Bulk operations

Tablet View

Layout:

• Responsive columns
• Adjusted widths
• Touch-optimized
• Full feature set

Adaptations:

• Larger touch targets
• Optimized spacing
• Touch gestures
• Full features

Mobile View

Layout:

• Stacked layout
• Drawer navigation
• Touch-optimized
• Simplified UI

Features:

• Drawer for role details
• Touch gestures
• Mobile-friendly controls
• Responsive design

Dark Mode

Full Support:

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

Features:

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

Loading States

Data Loading

Loading Indicators:

• Spinner animations
• Loading text
• Skeleton screens
• Progress feedback

Loading Scenarios:

• Initial page load
• Role list fetch
• Role details fetch
• Capabilities fetch
• Saving changes
• Deleting role

Error States

Error Handling:

• Error messages
• Retry options
• Graceful failures
• User feedback
• Clear messaging

Error Types:

• Network errors
• Validation errors
• Permission errors
• Server errors
• Not found errors

Performance Features

Data Fetching

Optimized Queries:

• Efficient API calls
• Reduced requests
• Caching where possible
• Pagination support

Fetching Strategy:

• Load on demand
• Cache results
• Refresh when needed
• Efficient updates

Real-Time Updates

List Refresh:

• Auto-refresh after changes
• Immediate updates
• No manual refresh needed
• Smooth transitions

Update Triggers:

• Role name change
• Role deletion
• Role creation
• Automatic refresh

Accessibility

Features:

• Keyboard navigation
• ARIA labels
• Semantic HTML
• Focus management
• Screen reader support

Keyboard Shortcuts:

• Enter to save
• Escape to cancel
• Tab navigation
• Arrow keys
• Space to toggle