Unify media_key and item_key — use item_key everywhere

media_key was a lossy shortening of item_key (libraryId:lastSegment) that
introduced a real collision bug: two TV episodes from different series with
the same filename would share the same media_key and each other's tags.

- DB migration converts existing media_tags rows from short format to full
  item_key by joining against media_items; ambiguous/orphaned rows are dropped
- media_tags column renamed media_key → item_key
- Removed itemKeyToMediaKey() from scanner; reconcileAndPrune now passes
  item_key directly to reKeyMediaItem
- DB reader functions (tv, movies, games) now expose item_key on returned
  entities; frontend components use entity.item_key instead of constructing
  the short libraryId:id form
- MixedView now constructs the full mixed_file: item_key format
- Tag API renamed mediaKey param → itemKey throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/mixed/MixedView.tsx

@@ -14,11 +14,11 @@ interface Props {
 }
 
 type ModalState =
-  | { type: 'video'; url: string; name: string; mediaKey: string; mediaIndex: number }
-  | { type: 'image'; url: string; name: string; mediaKey: string; mediaIndex: number }
+  | { type: 'video'; url: string; name: string; itemKey: string; mediaIndex: number }
+  | { type: 'image'; url: string; name: string; itemKey: string; mediaIndex: number }
   | null
 
-type TagPanelState = { entry: FileEntry; mediaKey: string } | null
+type TagPanelState = { entry: FileEntry; itemKey: string } | null
 
 export default function MixedView({ libraryId, initialPath }: Props) {
   const [currentPath, setCurrentPath] = useState(initialPath)
@@ -100,11 +100,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
     fetchRecursive()
   }, [filtersActive, fetchRecursive])
 
-  const mediaKeyFor = (entry: FileEntry) => {
+  const itemKeyFor = (entry: FileEntry) => {
     // In recursive mode entry.name is already the full relative path from the library root
-    if (filtersActive) return `${libraryId}:${encodeURIComponent(entry.name)}`
+    if (filtersActive) return `${libraryId}:mixed_file:${encodeURIComponent(entry.name)}`
     const rel = currentPath ? `${currentPath}/${entry.name}` : entry.name
-    return `${libraryId}:${encodeURIComponent(rel)}`
+    return `${libraryId}:mixed_file:${encodeURIComponent(rel)}`
   }
 
   const sourceEntries = filtersActive ? recursiveEntries : (listing?.entries ?? [])
@@ -112,7 +112,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
   const filteredEntries = sourceEntries.filter((entry) => {
     if (search && !entry.name.toLowerCase().includes(search.toLowerCase())) return false
     if (selectedTagIds.size > 0 && entry.type !== 'directory') {
-      const entryTags = assignments[mediaKeyFor(entry)] ?? []
+      const entryTags = assignments[itemKeyFor(entry)] ?? []
       if (![...selectedTagIds].every((id) => entryTags.includes(id))) return false
     }
     return true
@@ -124,11 +124,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
 
   const openMediaEntry = (entry: FileEntry, idx: number) => {
     if (!entry.url) return
-    const mediaKey = mediaKeyFor(entry)
+    const itemKey = itemKeyFor(entry)
     if (entry.mediaType === 'video') {
-      setModal({ type: 'video', url: entry.url, name: entry.name, mediaKey, mediaIndex: idx })
+      setModal({ type: 'video', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
     } else if (entry.mediaType === 'image') {
-      setModal({ type: 'image', url: entry.url, name: entry.name, mediaKey, mediaIndex: idx })
+      setModal({ type: 'image', url: entry.url, name: entry.name, itemKey, mediaIndex: idx })
     }
   }
 
@@ -155,7 +155,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
   }
 
   const handleTagEntry = (entry: FileEntry) => {
-    setTagPanel({ entry, mediaKey: mediaKeyFor(entry) })
+    setTagPanel({ entry, itemKey: itemKeyFor(entry) })
   }
 
   const navigateUp = () => {
@@ -326,7 +326,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
         <VideoPlayerModal
           url={modal.url}
           name={modal.name}
-          mediaKey={modal.mediaKey}
+          itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
           onClose={() => setModal(null)}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
@@ -337,7 +337,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
         <ImageLightbox
           url={modal.url}
           name={modal.name}
-          mediaKey={modal.mediaKey}
+          itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
           onClose={() => setModal(null)}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
@@ -378,7 +378,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
             </div>
             <div className="px-5 py-4">
               <TagSelector
-                mediaKey={tagPanel.mediaKey}
+                itemKey={tagPanel.itemKey}
                 onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
               />
             </div>