feat: create gist viewer component

[nullcoder]

Description

Implement the GistViewer component for displaying encrypted gists in read-only mode with vertical file layout and one-time view support.

Requirements

• Display gist metadata (description, creation date, etc.)
• Show all files vertically (GitHub Gist style)
• Syntax highlighting for all supported languages
• Copy button for entire gist and individual files
• Download functionality
• Print-friendly view
• Loading states while decrypting
• Error states for decryption failures
• Version selector integration
• Responsive design
• CRITICAL: Handle one-time view deletion after successful decryption
• Show warning banner for one-time view gists
• Auto-delete functionality after first successful view

Acceptance Criteria

• Displays gist metadata correctly
• All files shown vertically, not in tabs
• Syntax highlighting works for all languages
• Copy buttons functional at gist and file level
• Download works for individual files and full gist
• Print view removes unnecessary UI elements
• Loading states show during decryption
• Error states handle decryption failures gracefully
• One-time view warning prominently displayed
• One-time view triggers deletion after decrypt
• Expiration time shown if applicable
• Responsive on mobile devices
• Keyboard accessible
• Shows version number and allows version switching

UI Structure

┌─────────────────────────────────────────┐
│ ⚠️ One-Time View: This gist will be    │
│ deleted after you view it.              │
└─────────────────────────────────────────┘

[Gist Header]
  Title/Description
  Created: Date | Files: Count | Size: X KB
  Expires: In 2 days (if applicable)
  Version: 3 of 3 [↓]
  [Copy All] [Download ZIP] [Print]

[File List - Vertical Layout]
  ┌─ file1.js ─────────[Copy][Download]─┐
  │ // File content with syntax         │
  │ // highlighting here                │
  └─────────────────────────────────────┘
  
  ┌─ file2.py ─────────[Copy][Download]─┐
  │ # Python file content               │
  └─────────────────────────────────────┘

One-Time View Flow

1. Check metadata for one_time_view: true flag
2. Show warning banner at top of page
3. After successful decryption, call DELETE endpoint
4. Show "Gist has been deleted" message
5. Optionally offer download before viewing

Technical Notes

• Use CodeEditor component in read-only mode
• Integrate with FileList component for file display
• Handle decryption in parent, pass decrypted data as props
• Consider performance with large files
• Implement proper error boundaries
• Use vertical layout as specified in MULTI_FILE_EDITOR_DESIGN.md
• Implement auto-delete with proper error handling
• Show countdown timer for expiring gists

API Integration

// After successful decryption of one-time view
if (metadata.one_time_view) {
  await fetch(`/api/gists/${id}`, { 
    method: 'DELETE',
    headers: { 'X-One-Time-Token': decryptionProof }
  });
}

Related

• Uses feat: create file list/tab component #66 (FileList component) for file display
• Uses Implement CodeEditor component with CodeMirror v6 #54 (CodeEditor component) in read-only mode
• Integrates with feat: add toast notification system #68 (VersionSelector)
• Part of Phase 4 UI Components
• Core viewing functionality