PodTui/tasks/podcast-tui-app/21-sync-status.md

20. Create File Picker UI for Import

meta: id: podcast-tui-app-20 feature: podcast-tui-app priority: P1 depends_on: [19] tags: [file-picker, input, ui, solidjs, opentui]

objective:

• Create file picker component for selecting import files
• Implement file format detection
• Display file information
• Handle file selection and validation

deliverables:

• src/components/FilePicker.tsx with file picker UI
• src/components/FileInfo.tsx with file details
• src/utils/file-detector.ts with format detection

steps:

• Create src/utils/file-detector.ts:
  • detectFormat(file: File): 'json' | 'xml' | 'unknown'
  • Read file header
  • Check file extension
  • Validate format
• Create src/components/FilePicker.tsx:
  • File input using <input> component
  • Accept JSON and XML files
  • File selection handler
  • Clear button
• Create src/components/FileInfo.tsx:
  • Display file name
  • Display file size
  • Display file format
  • Display last modified date
• Add file picker to import dialog

tests:

• Unit: Test format detection
• Unit: Test file picker selection
• Integration: Test file validation

acceptance_criteria:

• File picker allows selecting files
• Format detection works correctly
• File information is displayed
• Invalid files are rejected

validation:

• Run application and test file picker
• Select valid files
• Select invalid files
• Verify format detection

notes:

• Use OpenTUI <input> component for file picker
• Accept .json and .xml extensions
• Check file size limit (e.g., 10MB)
• Add file type validation
• Handle file selection errors