init

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

@@ -0,0 +1,61 @@
+# 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