Download section didn't appear. Resolved

web/frontend/src/components/DownloadSection.tsx

@@ -1,19 +1,25 @@
 import React from 'react'
-import { Box, Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
-import { Download, FileDownload, FolderZip } from '@mui/icons-material'
+import { Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
+import { Download, FolderZip } from '@mui/icons-material'
 import { useTaskStore } from '../stores/taskStore'
-import { getDownloadUrl, getDownloadZipUrl } from '../api/client'
+import { getDownloadZipUrl } from '../api/client'
 import { formatFileSize } from '../utils/formatters'
 
 export const DownloadSection: React.FC = () => {
   const { taskId, tracks, status } = useTaskStore()
 
-  if (status !== 'done' || tracks.length === 0) {
+  console.log('[DownloadSection] Rendering:', { status, tracks, taskId })
+
+  // Check if we should show the download section
+  if (status !== 'done' || !tracks || tracks.length === 0 || !taskId) {
     return null
   }
 
+  // If we get here, we have tracks
+  console.log('[DownloadSection] Showing tracks:', tracks)
+
   const handleDownloadZip = () => {
-    const url = getDownloadZipUrl(taskId!)
+    const url = getDownloadZipUrl(taskId)
     window.open(url, '_blank')
   }
 
@@ -23,7 +29,7 @@ export const DownloadSection: React.FC = () => {
   }
 
   return (
-    <Paper sx={{ p: 3 }}>
+    <Paper sx={{ p: 3, mt: 3 }}>
       <Typography variant="h6" sx={{ mb: 2 }}>
         📥 Download Results
       </Typography>
@@ -64,4 +70,4 @@ export const DownloadSection: React.FC = () => {
       </List>
     </Paper>
   )
-}
+}

web/frontend/src/components/OptionsPanel.tsx

@@ -4,7 +4,6 @@ import {
   Paper,
   Typography,
   TextField,
-  Select,
   MenuItem,
   FormControlLabel,
   Switch,
@@ -12,9 +11,11 @@ import {
   IconButton,
   Divider,
 } from '@mui/material'
+// Select is used internally by TextField with select prop, no need to import
 import { ExpandMore, ExpandLess } from '@mui/icons-material'
 import { useOptionsStore } from '../stores/optionsStore'
 
+
 interface SectionProps {
   title: string
   children: React.ReactNode

web/frontend/src/components/TracklistEditor.tsx

@@ -4,7 +4,6 @@ import { useDropzone } from 'react-dropzone'
 import { useTracklistStore } from '../stores/tracklistStore'
 import { useOptionsStore } from '../stores/optionsStore'
 import { parseAndValidateTracklist } from '../utils/validators'
-import { TracklistEntry } from '../types'
 
 export const TracklistEditor: React.FC = () => {
   const { rawText, errors, isValid, setRawText, setEntries, setErrors, setIsValid } = useTracklistStore()

web/frontend/src/components/UploadZone.tsx

@@ -4,7 +4,6 @@ import { Box, Typography, Paper, LinearProgress, Alert } from '@mui/material'
 import { CloudUpload, InsertDriveFile } from '@mui/icons-material'
 import { useUploadStore } from '../stores/uploadStore'
 import { uploadFile } from '../api/client'
-import { useTaskStore } from '../stores/taskStore'
 
 const ALLOWED_EXTENSIONS = ['.mp3', '.flac', '.wav', '.m4a', '.ogg', '.opus', '.aac', '.wma', '.aiff', '.alac', '.ac3']
 
@@ -25,8 +24,6 @@ export const UploadZone: React.FC = () => {
     setTaskId,
   } = useUploadStore()
 
-  const { setTaskId: setTaskIdStore, setIsProcessing } = useTaskStore()
-
   const onDrop = useCallback(
     async (acceptedFiles: File[]) => {
       if (acceptedFiles.length === 0) return
@@ -49,7 +46,6 @@ export const UploadZone: React.FC = () => {
       try {
         const response = await uploadFile(selectedFile)
         setTaskId(response.task_id)
-        setTaskIdStore(response.task_id)
         setUploadProgress(100)
         setIsUploading(false)
       } catch (err: any) {
@@ -61,7 +57,7 @@ export const UploadZone: React.FC = () => {
         setFileSize(0)
       }
     },
-    [setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId, setTaskIdStore]
+    [setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId]
   )
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -140,4 +136,4 @@ export const UploadZone: React.FC = () => {
       )}
     </Box>
   )
-}
+}