Enhancement: Add input sanitization to FilePreview components

[jfrank-summit]

Summary

FilePreview components should sanitize user-controlled input to prevent potential security issues and improve robustness.

Affected Components

• FilePreview.tsx - Displays metadata without validation
• TextViewer.tsx - Renders content directly
• ImageViewer.tsx - Uses metadata for attributes

Details

Current Behavior

Components directly render user-provided metadata (filenames, content) without sanitization:

// Example areas for improvement
<span>{metadata.name}</span>
<object aria-label={filename} title={filename} />
<img alt={filename} />

Proposed Enhancement

Implement input sanitization following security best practices:

1. Add sanitization dependency (e.g., DOMPurify)
2. Create validation utilities

export const sanitizeDisplayText = (text: string): string => {
  // Sanitize text for safe display
  return sanitizedText;
};

3. Apply sanitization consistently

// Safe rendering approach
<span>{sanitizeDisplayText(metadata.name)}</span>
<object aria-label={sanitizeDisplayText(filename)} />
<img alt={sanitizeDisplayText(filename)} />