Feature: Show special icon for deleted files in PR diff view

## Feature Request

Display a special icon/indicator for deleted files in the PR diff view, similar to how newly added files are shown with a special icon.

## Current Behavior

- New/added files may have a special icon or indicator
- Deleted files don't have a clear visual distinction
- Users need to read the diff header or stats to know a file was deleted

## Expected Behavior

- Deleted files should have a distinctive icon (e.g., 🗑️, ❌, or a red minus icon)
- Visual consistency with how added files are displayed
- Clear visual hierarchy: Added (green/+), Modified (yellow/~), Deleted (red/-)

## Implementation

### File Status Icons
```typescript
interface FileStatus {
  type: 'added' | 'modified' | 'deleted' | 'renamed' | 'copied';
  icon: string;
  className: string;
  label: string;
}

const FILE_STATUS_CONFIG: Record<string, FileStatus> = {
  added: {
    type: 'added',
    icon: '✨', // or '➕' or custom SVG
    className: 'file-added',
    label: 'New file'
  },
  modified: {
    type: 'modified',
    icon: '📝', // or '✏️' or custom SVG
    className: 'file-modified',
    label: 'Modified'
  },
  deleted: {
    type: 'deleted',
    icon: '🗑️', // or '❌' or '➖' or custom SVG
    className: 'file-deleted',
    label: 'Deleted'
  },
  renamed: {
    type: 'renamed',
    icon: '📋', // or '➡️' or custom SVG
    className: 'file-renamed',
    label: 'Renamed'
  },
  copied: {
    type: 'copied',
    icon: '📄', // or custom SVG
    className: 'file-copied',
    label: 'Copied'
  }
};
```

### Component Implementation
```tsx
function FileListItem({ file }) {
  const status = getFileStatus(file);
  
  return (
    <div className={`file-item ${status.className}`}>
      <span className="file-status-icon" title={status.label}>
        {status.icon}
      </span>
      
      <span className="file-path">
        {file.status === 'renamed' ? (
          <>
            <span className="old-name">{file.previous_filename}</span>
            <span className="rename-arrow">→</span>
            <span className="new-name">{file.filename}</span>
          </>
        ) : (
          <span className={file.status === 'deleted' ? 'strikethrough' : ''}>
            {file.filename}
          </span>
        )}
      </span>
      
      <span className="file-stats">
        {file.status !== 'deleted' && (
          <span className="additions">+{file.additions}</span>
        )}
        {file.status !== 'added' && (
          <span className="deletions">-{file.deletions}</span>
        )}
      </span>
    </div>
  );
}

function getFileStatus(file): FileStatus {
  if (file.status === 'removed') {
    return FILE_STATUS_CONFIG.deleted;
  }
  if (file.status === 'added') {
    return FILE_STATUS_CONFIG.added;
  }
  if (file.status === 'renamed') {
    return FILE_STATUS_CONFIG.renamed;
  }
  if (file.status === 'copied') {
    return FILE_STATUS_CONFIG.copied;
  }
  return FILE_STATUS_CONFIG.modified;
}
```

### Styling
```css
.file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.file-item:hover {
  background-color: var(--hover-bg);
}

.file-status-icon {
  margin-right: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

/* File status specific styles */
.file-added {
  border-left: 3px solid var(--color-success);
}

.file-added .file-status-icon {
  color: var(--color-success);
}

.file-modified {
  border-left: 3px solid var(--color-warning);
}

.file-modified .file-status-icon {
  color: var(--color-warning);
}

.file-deleted {
  border-left: 3px solid var(--color-danger);
  opacity: 0.8;
}

.file-deleted .file-status-icon {
  color: var(--color-danger);
}

.file-deleted .file-path {
  text-decoration: line-through;
  opacity: 0.7;
}

.file-renamed {
  border-left: 3px solid var(--color-info);
}

.file-renamed .file-status-icon {
  color: var(--color-info);
}

.rename-arrow {
  margin: 0 8px;
  color: var(--text-secondary);
}

/* Alternative: Use background colors */
.file-added-alt {
  background-color: rgba(46, 160, 67, 0.1);
}

.file-deleted-alt {
  background-color: rgba(248, 81, 73, 0.1);
}

.file-modified-alt {
  background-color: rgba(250, 179, 0, 0.1);
}
```

### Alternative Icon Approaches

#### 1. SVG Icons
```tsx
const FileStatusIcons = {
  added: (
    <svg className="file-icon added" viewBox="0 0 16 16">
      <path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
    </svg>
  ),
  deleted: (
    <svg className="file-icon deleted" viewBox="0 0 16 16">
      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
      <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1z"/>
    </svg>
  ),
  modified: (
    <svg className="file-icon modified" viewBox="0 0 16 16">
      <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
    </svg>
  )
};
```

#### 2. Text Indicators
```tsx
const FileStatusBadges = {
  added: <span className="badge badge-success">NEW</span>,
  deleted: <span className="badge badge-danger">DELETED</span>,
  modified: <span className="badge badge-warning">MODIFIED</span>,
  renamed: <span className="badge badge-info">RENAMED</span>
};
```

### Diff Header Enhancement
```tsx
function DiffFileHeader({ file }) {
  const status = getFileStatus(file);
  
  return (
    <div className={`diff-header ${status.className}`}>
      <div className="diff-header-content">
        <span className="file-status-indicator">
          {status.icon}
        </span>
        
        <span className="file-name">
          {file.status === 'deleted' ? (
            <del>{file.filename}</del>
          ) : (
            file.filename
          )}
        </span>
        
        {file.status === 'deleted' && (
          <span className="deletion-notice">
            This file was deleted
          </span>
        )}
      </div>
      
      {file.status === 'deleted' && (
        <div className="deleted-file-content">
          <p className="deletion-info">
            {file.deletions} lines removed
          </p>
          <button onClick={() => viewDeletedContent(file)}>
            View deleted content
          </button>
        </div>
      )}
    </div>
  );
}
```

### Accessibility Considerations
```tsx
function AccessibleFileStatus({ file }) {
  const status = getFileStatus(file);
  
  return (
    <>
      <span 
        className="file-status-icon"
        role="img"
        aria-label={status.label}
        title={status.label}
      >
        {status.icon}
      </span>
      <span className="sr-only">
        {status.label}: {file.filename}
      </span>
    </>
  );
}
```

## Visual Examples

```
File List View:
┌─────────────────────────────────────────┐
│ ✨ src/newFeature.js        +150    -0  │ ← Added (green)
│ 📝 src/existing.js           +20   -15  │ ← Modified (yellow)
│ 🗑️ src/deprecated.js          -0  -200  │ ← Deleted (red)
│ 📋 src/old.js → src/new.js   +10    -5  │ ← Renamed (blue)
└─────────────────────────────────────────┘

Compact View:
[✨] newFile.js
[📝] modified.js
[🗑️] deleted.js (strikethrough)
[📋] renamed.js
```

## Benefits

- **Visual Clarity**: Instantly see which files were deleted
- **Consistency**: Similar UX pattern to added files
- **Improved Scanning**: Easier to spot deleted files in long PR lists
- **Accessibility**: Clear indicators for all users
- **Reduced Cognitive Load**: No need to parse diff stats

## Acceptance Criteria

- [ ] Deleted files show a distinctive icon
- [ ] Icon is visually consistent with added file icon style
- [ ] Deleted file names may have strikethrough styling
- [ ] Icon has proper accessibility labels
- [ ] Works in all file list views (tree view, flat view)
- [ ] Shows in PR file list
- [ ] Shows in diff headers
- [ ] Color scheme works in both light and dark themes
- [ ] Tooltip shows "Deleted" on hover
- [ ] Visual hierarchy is clear (added vs modified vs deleted)

## Future Enhancements

- Animated transitions when files change status
- Filter to show only deleted files
- Bulk restore deleted files option
- Show deletion reason if available from commit message

🤖 Generated with [Claude Code](https://claude.ai/code)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Show special icon for deleted files in PR diff view #66

Feature Request

Current Behavior

Expected Behavior

Implementation

File Status Icons

Component Implementation

Styling

Alternative Icon Approaches

1. SVG Icons

2. Text Indicators

Diff Header Enhancement

Accessibility Considerations

Visual Examples

Benefits

Acceptance Criteria

Future Enhancements

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Feature: Show special icon for deleted files in PR diff view #66

Description

Feature Request

Current Behavior

Expected Behavior

Implementation

File Status Icons

Component Implementation

Styling

Alternative Icon Approaches

1. SVG Icons

2. Text Indicators

Diff Header Enhancement

Accessibility Considerations

Visual Examples

Benefits

Acceptance Criteria

Future Enhancements

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions