feat: fix EditModal MediaType switching and Extras conversion flow

EditModal MediaType Dropdown Fixes:

- Remove selectedMediaType from useEffect dependency

- Files now fetched once on modal open, not on MediaType change

- Files remain visible when switching between Movies/TV Shows

MediaType Switch Confirmation:

- Add AlertDialog confirmation before switching MediaType

- Clear all metadata (tmdbId, season, episode) on confirmation

- Show toast notification after metadata cleared

- Warning message explains consequences

Extras Conversion via EditModal:

- Convert to Movie/TV Show now opens EditModal directly

- User can assign TMDb metadata immediately

- No more AlertDialog for Movie/TV Show conversions

- Canceling EditModal leaves files as Extras

Save Logic Updates:

- Include mediaType in updateScannedFile API calls

- Refresh table data after conversion

- Show conversion success toast

- Prevent files from getting stuck in Processing status

Related to PRD 0002 - Tasks 1.0-4.0

Author: pho

frontend/src/components/scanned-files-table/edit-modal.tsx

@@ -7,6 +7,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import {
   Select,
@@ -21,6 +31,7 @@ import { MovieEditTable } from "@/components/scanned-files-table/movie-edit-tabl
 import { TvShowEditTable } from "@/components/scanned-files-table/tv-show-edit-table"
 import { MediaType, ScannedFile, Row } from "@/lib/api/types"
 import { mediaApi } from "@/lib/api/endpoints"
+import { useToast } from "@/hooks/use-toast"
 
 interface EditModalProps {
   readonly isOpen: boolean
@@ -47,6 +58,9 @@ export function EditModal({ isOpen, onClose, selectedRows, onSave, initialMediaT
   const [editableRows, setEditableRows] = useState<EditableRow[]>([])
   const [loading, setLoading] = useState(false)
   const [selectedMediaType, setSelectedMediaType] = useState<MediaType.Movies | MediaType.TvShows>(initialMediaType)
+  const [showMediaTypeWarning, setShowMediaTypeWarning] = useState(false)
+  const [pendingMediaType, setPendingMediaType] = useState<MediaType.Movies | MediaType.TvShows | null>(null)
+  const { toast } = useToast()
 
   useEffect(() => {
     setSelectedMediaType(initialMediaType)
@@ -61,7 +75,6 @@ export function EditModal({ isOpen, onClose, selectedRows, onSave, initialMediaT
         const selectedIds = selectedRows.map((row) => row.key)
         const result = await mediaApi.getScannedFiles({
           ids: selectedIds,
-          mediaType: selectedMediaType,
           pageSize: selectedIds.length,
           sortBy: "sourceFile",
           sortOrder: "asc",
@@ -79,10 +92,38 @@ export function EditModal({ isOpen, onClose, selectedRows, onSave, initialMediaT
     }
 
     fetchSelectedFiles()
-  }, [isOpen, selectedRows, selectedMediaType])
+  }, [isOpen, selectedRows])
 
   const handleMediaTypeChange = (type: string) => {
-    setSelectedMediaType(type as MediaType.Movies | MediaType.TvShows)
+    const newType = type as MediaType.Movies | MediaType.TvShows
+    if (newType !== selectedMediaType) {
+      setPendingMediaType(newType)
+      setShowMediaTypeWarning(true)
+    }
+  }
+
+  const handleConfirmMediaTypeChange = () => {
+    if (!pendingMediaType) return
+
+    setEditableRows((prev) =>
+      prev.map((row) => ({
+        ...row,
+        tmdbId: 0,
+        seasonNumber: undefined,
+        episodeNumber: undefined,
+        episodeNumber2: undefined,
+        mediaType: pendingMediaType,
+      }))
+    )
+
+    setSelectedMediaType(pendingMediaType)
+    setShowMediaTypeWarning(false)
+    setPendingMediaType(null)
+
+    toast({
+      title: "Media type changed",
+      description: "All metadata has been cleared.",
+    })
   }
 
   const handleMediaSelect = (tmdbId: number) => {
@@ -177,6 +218,28 @@ export function EditModal({ isOpen, onClose, selectedRows, onSave, initialMediaT
           </Button>
         </DialogFooter>
       </DialogContent>
+      <AlertDialog open={showMediaTypeWarning} onOpenChange={setShowMediaTypeWarning}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Switch Media Type?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Switching media type will clear all metadata (TMDb ID, season, episode numbers). 
+              This action cannot be undone. Continue?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => {
+              setShowMediaTypeWarning(false)
+              setPendingMediaType(null)
+            }}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmMediaTypeChange}>
+              Continue
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Dialog>
   )
 }

frontend/src/components/scanned-files-table/index.tsx

@@ -74,6 +74,7 @@ export function ScannedFilesTable({
   const [mediaTypeFilter, setMediaTypeFilter] = useState<MediaType>(initialMediaType)
   const [newEntries, setNewEntries] = useState<Set<number>>(new Set())
   const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+  const [conversionTargetType, setConversionTargetType] = useState<MediaType.Movies | MediaType.TvShows | null>(null)
   const { visibleColumns, setVisibleColumns} = useColumnVisibility()
   const [columnsPopoverOpen, setColumnsPopoverOpen] = useState(false)
   const [density, setDensity] = useState<"comfortable" | "compact">("comfortable")
@@ -170,7 +171,9 @@ export function ScannedFilesTable({
   }, [])
 
   const handleSaveEdits = useCallback(async (updatedRows: Row[]) => {
+    const isConversion = conversionTargetType !== null
     setIsEditModalOpen(false)
+    setConversionTargetType(null)
 
     try {
       // Update each file
@@ -181,27 +184,55 @@ export function ScannedFilesTable({
             seasonNumber: row.seasonNumber,
             episodeNumber: row.episodeNumber,
             episodeNumber2: row.episodeNumber2,
+            mediaType: row.mediaType as MediaType,
           })
         )
       )
 
       // Recreate all symlinks
       await mediaApi.recreateAllSymlinks()
+
+      if (isConversion) {
+        toast({
+          title: "Success",
+          description: `Converted ${updatedRows.length} file(s) to ${conversionTargetType}`,
+        })
+      }
+
+      const result = await mediaApi.getScannedFiles({
+        page,
+        pageSize,
+        sortBy,
+        sortOrder,
+        searchTerm: filterValue,
+        status: statusFilter,
+        mediaType: mediaTypeFilter,
+      })
+
+      setData(result)
+      setSelectedKeys(new Set())
     } catch (error) {
       console.error("Failed to save changes:", error)
+      toast({
+        title: "Error",
+        description: "Failed to save changes. Please try again.",
+        variant: "destructive",
+      })
     }
-  }, [])
+  }, [conversionTargetType, page, pageSize, sortBy, sortOrder, filterValue, statusFilter, mediaTypeFilter, toast, setSelectedKeys])
 
   const handleConvertToExtras = useCallback(() => {
     setConversionDialog({ isOpen: true, targetType: MediaType.Extras })
   }, [])
 
   const handleConvertToMovie = useCallback(() => {
-    setConversionDialog({ isOpen: true, targetType: MediaType.Movies })
+    setConversionTargetType(MediaType.Movies)
+    setIsEditModalOpen(true)
   }, [])
 
   const handleConvertToTvShow = useCallback(() => {
-    setConversionDialog({ isOpen: true, targetType: MediaType.TvShows })
+    setConversionTargetType(MediaType.TvShows)
+    setIsEditModalOpen(true)
   }, [])
 
   const handleConfirmConversion = useCallback(async () => {
@@ -400,29 +431,21 @@ export function ScannedFilesTable({
       />
       <EditModal
         isOpen={isEditModalOpen}
-        onClose={() => setIsEditModalOpen(false)}
+        onClose={() => {
+          setIsEditModalOpen(false)
+          setConversionTargetType(null)
+        }}
         selectedRows={selectedRows}
         onSave={handleSaveEdits}
-        initialMediaType={mediaTypeFilter as MediaType.Movies | MediaType.TvShows}
+        initialMediaType={(conversionTargetType || mediaTypeFilter) as MediaType.Movies | MediaType.TvShows}
       />
       <AlertDialog open={conversionDialog.isOpen} onOpenChange={(open) => !open && setConversionDialog({ isOpen: false, targetType: null })}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              Convert to {conversionDialog.targetType === MediaType.Extras ? "Extras" : conversionDialog.targetType === MediaType.Movies ? "Movies" : "TV Shows"}?
-            </AlertDialogTitle>
+            <AlertDialogTitle>Mark as Extra?</AlertDialogTitle>
             <AlertDialogDescription>
-              {conversionDialog.targetType === MediaType.Extras ? (
-                <>
-                  This will remove TMDb metadata and delete any existing symlinks for the selected file(s).
-                  The files will be marked as Extras with Success status.
-                </>
-              ) : (
-                <>
-                  This will convert the selected Extra file(s) to {conversionDialog.targetType === MediaType.Movies ? "Movies" : "TV Shows"}.
-                  The files will be set to Processing status for re-detection and metadata lookup.
-                </>
-              )}
+              This will remove TMDb metadata and delete any existing symlinks for the selected file(s).
+              The files will be marked as Extras with Success status.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

tasks/tasks-0002-prd-editmodal-mediatype-switching.md

@@ -0,0 +1,66 @@
+# Task List: Fix EditModal MediaType Switching and Extras Conversion Flow
+
+## Relevant Files
+
+### Frontend Files
+- `frontend/src/components/scanned-files-table/edit-modal.tsx` - Main EditModal component that needs MediaType switching fixes
+- `frontend/src/components/scanned-files-table/index.tsx` - Parent component that manages conversion handlers and EditModal opening
+- `frontend/src/hooks/use-toast.ts` - Toast notification hook for user feedback
+- `frontend/src/components/ui/alert-dialog.tsx` - AlertDialog component for MediaType switch confirmation
+
+### Notes
+- No backend changes required - API already supports mediaType updates
+- AlertDialog component already exists from previous implementation
+- Toast hook already exists for notifications
+- Focus is on fixing EditModal behavior and conversion flow
+
+## Tasks
+
+- [x] 1.0 Fix EditModal MediaType Dropdown to Switch UI Modes Instead of Filtering
+  - [x] 1.1 Remove `selectedMediaType` from useEffect dependency array (line 82 in edit-modal.tsx)
+  - [x] 1.2 Verify files are fetched only once on modal open, not when MediaType dropdown changes
+  - [x] 1.3 Test that files remain visible in EditModal when switching between Movies/TV Shows
+
+- [x] 2.0 Add Confirmation Dialog for MediaType Switch with Metadata Clearing
+  - [x] 2.1 Add state `showMediaTypeWarning` and `pendingMediaType` to edit-modal.tsx
+  - [x] 2.2 Import useToast hook and AlertDialog components
+  - [x] 2.3 Modify `handleMediaTypeChange` to store pending type and show confirmation dialog
+  - [x] 2.4 Create `handleConfirmMediaTypeChange` function to clear metadata and update type
+  - [x] 2.5 Clear metadata: set tmdbId=0, seasonNumber/episodeNumber/episodeNumber2=undefined
+  - [x] 2.6 Show toast notification: "Media type changed. All metadata has been cleared."
+  - [x] 2.7 Add AlertDialog with title "Switch Media Type?" and warning message
+  - [x] 2.8 Test that metadata clears correctly and toast appears
+
+- [x] 3.0 Update Extras Conversion Handlers to Open EditModal
+  - [x] 3.1 Modify `handleConvertToMovie` to set `initialMediaType` to Movies and open EditModal
+  - [x] 3.2 Modify `handleConvertToTvShow` to set `initialMediaType` to TvShows and open EditModal
+  - [x] 3.3 Remove AlertDialog logic from Movie/TV Show conversion handlers
+  - [x] 3.4 Keep `handleConvertToExtras` with existing AlertDialog behavior (no changes)
+  - [x] 3.5 Update `conversionDialog` state to only apply to Extras conversions
+  - [x] 3.6 Test that clicking "Convert to Movie/TV Show" opens EditModal directly
+
+- [x] 4.0 Update Save Logic to Include MediaType in API Calls
+  - [x] 4.1 Modify `handleSaveEdits` to include `mediaType: row.mediaType` in updateScannedFile calls
+  - [x] 4.2 Ensure EditModal passes correct mediaType from editableRows
+  - [x] 4.3 Verify symlink recreation is triggered after save
+  - [x] 4.4 Update success toast for conversions: "Converted {count} file(s) to {MediaType}"
+  - [x] 4.5 Test that converted Extras progress from Processing to Success status
+
+- [ ] 5.0 Testing and Validation
+  - [ ] 5.1 Test: Convert single Extra to Movie via EditModal, assign TMDb ID, verify Success status
+  - [ ] 5.2 Test: Convert multiple Extras to TV Show, assign series and episodes, verify all succeed
+  - [ ] 5.3 Test: Switch MediaType in EditModal from Movie to TV Show, confirm warning appears
+  - [ ] 5.4 Test: Verify metadata is cleared after MediaType switch and toast notification shows
+  - [ ] 5.5 Test: Cancel EditModal during Extras conversion, verify files remain as Extras
+  - [ ] 5.6 Test: "Mark as Extra" button still shows AlertDialog (unchanged behavior)
+  - [ ] 5.7 Test: Multi-file editing with MediaType changes works correctly
+  - [ ] 5.8 Run frontend linting: `bun run lint` from frontend directory
+
+---
+
+## Implementation Progress
+
+**Current Task:** Ready to begin
+**Next Step:** Start with Task 1.0 - Fix EditModal MediaType Dropdown
+
+Ready to start implementing? I'll begin with Task 1.1 when you give the go-ahead.