# PathDisplay Component

## Overview

The `PathDisplay` component is a reusable React component that provides intelligent path display with smart truncation and interactive popover functionality. It's designed to show file paths in a user-friendly way, especially in data tables where space is limited.

## Features

### 1. Smart Path Truncation
- Automatically truncates long paths to show the most relevant parts
- Prioritizes showing output directory and block folder (e.g., `/generated-blocks/my-block`)
- Recognizes common output directory names (`generated-blocks`, `blocks`, `custom-blocks`, `gutenberg-blocks`)
- Falls back to showing the last two path segments if no common directory is found

### 2. Interactive Popover
- **Desktop**: Hover to show full path in a styled popover
- **Mobile**: Tap to toggle popover visibility
- **Accessibility**: Full keyboard navigation support with Enter/Space/Escape keys
- **Outside Click**: Automatic popover closing when clicking outside (mobile)

### 3. Semantic Markup
- All paths are wrapped in `<code>` tags for proper semantic meaning
- Consistent monospace font styling
- Proper contrast and readability

### 4. Responsive Design
- Mobile-optimized popover sizing and positioning
- Touch-friendly interaction patterns
- Responsive breakpoints at 768px

## Usage

```jsx
import PathDisplay from './PathDisplay';

function MyComponent() {
    return (
        <PathDisplay 
            path="/var/www/html/wp-content/plugins/my-plugin/generated-blocks/hero-block/block.json"
            maxLength={50}
        />
    );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `path` | `string` | - | Full file path to display |
| `maxLength` | `number` | `40` | Maximum length before showing popover |

## Smart Truncation Logic

The component uses intelligent truncation that:

1. **Checks path length**: If under `maxLength`, shows full path
2. **Finds output directory**: Looks for common directory names in the path
3. **Shows relevant parts**: Displays `/{output-dir}/{block-folder}` format
4. **Fallback**: Shows last two path segments if no common directory found

### Example Truncations

```javascript
// Long path
"/var/www/html/wp-content/plugins/my-plugin/generated-blocks/hero-block/block.json"
// Becomes
"/generated-blocks/hero-block"

// Custom output directory
"/home/user/projects/my-theme/blocks/testimonial-block/style.css"
// Becomes
"/blocks/testimonial-block"

// No common directory
"/some/very/long/path/to/my-file.js"
// Becomes
"/to/my-file.js"
```

## Styling

The component uses inline styles for maximum portability and includes:

- **Truncated paths**: Dotted underline with pointer cursor
- **Full paths**: Normal text styling
- **Popover**: Dark theme with monospace font
- **Mobile optimizations**: Larger touch targets and responsive sizing

### CSS Classes

- `.wpbs-path-display`: Main container
- `.path-display-truncated`: Applied to truncated paths (for custom styling)
- `.path-display`: Applied to full paths (for custom styling)

## Integration

The PathDisplay component is used across multiple sync status components:

### SyncStatusAllBlockList
```jsx
render: ({ item }) => (
    <PathDisplay path={item.path} maxLength={50} />
)
```

### SyncStatusNewBlockList
```jsx
render: ({ item }) => (
    <PathDisplay path={item.path} maxLength={50} />
)
```

### SyncStatusOrphanedBlockList
```jsx
render: ({ item }) => (
    <PathDisplay path={item.path} maxLength={50} />
)
```

## Accessibility Features

- **ARIA Labels**: Descriptive labels for screen readers
- **Keyboard Navigation**: Full support for Enter, Space, and Escape keys
- **Focus Management**: Proper focus handling within popovers
- **Semantic HTML**: Uses proper button elements and code tags
- **Screen Reader Support**: Clear indication of interactive elements

## Mobile Behavior

- **Touch Detection**: Automatically detects mobile/touch devices
- **Click to Toggle**: Tap to show/hide popover instead of hover
- **Outside Click**: Tap outside to close popover
- **Responsive Sizing**: Popover adapts to screen size (90vw on mobile)
- **Touch Targets**: Larger interactive areas for better usability

## Performance

- **Lazy Rendering**: Popover content only rendered when needed
- **Event Cleanup**: Proper cleanup of event listeners
- **Memoized Logic**: Smart path calculation is efficient
- **Minimal Re-renders**: Optimized state management

## Browser Support

- Modern browsers with ES6+ support
- WordPress admin environment compatibility
- Mobile Safari and Chrome optimization
- Fallback support for older browsers

## Dependencies

- `@wordpress/element`: React hooks (useState, useRef, useEffect)
- `@wordpress/i18n`: Internationalization (currently unused but imported)
- `@wordpress/components`: Popover component

## Future Enhancements

Potential improvements for future versions:

- **Custom Icons**: Add file type icons based on extension
- **Copy to Clipboard**: Click to copy full path
- **Path Breadcrumbs**: Interactive path segments
- **Themes**: Light/dark theme support
- **Animation**: Smooth popover transitions
- **Virtualization**: For very long path lists

## Testing

The component should be tested for:

- Path truncation accuracy
- Popover positioning
- Mobile touch interactions
- Keyboard accessibility
- Screen reader compatibility
- Performance with large datasets

## Related Components

- **SyncStatusAllBlockList**: Uses PathDisplay for block paths
- **SyncStatusNewBlockList**: Uses PathDisplay for new block paths  
- **SyncStatusOrphanedBlockList**: Uses PathDisplay for orphaned block paths

This component eliminates code duplication and provides consistent path display behavior across the entire sync status interface.