New: Show error if manual import has the same episode assigned multiple times

Closes #8458

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -18,6 +18,7 @@
 .leftButtons,
 .rightButtons {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   min-width: 0;
 }

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -500,6 +500,9 @@ function InteractiveImportModalContentInner(
       return;
     }
 
+    const seenEpisodeIds = new Set<number>();
+    let hasDuplicateEpisodes = false;
+
     items.forEach((item) => {
       const isSelected = selectedIds.indexOf(item.id) > -1;
 
@@ -552,6 +555,19 @@ function InteractiveImportModalContentInner(
           return;
         }
 
+        if (!hasDuplicateEpisodes) {
+          for (const episode of episodes) {
+            const hasAlreadySeen = seenEpisodeIds.has(episode.id);
+
+            seenEpisodeIds.add(episode.id);
+
+            if (hasAlreadySeen) {
+              hasDuplicateEpisodes = true;
+              return;
+            }
+          }
+        }
+
         setInteractiveImportErrorMessage(null);
 
         if (episodeFileId) {
@@ -587,6 +603,14 @@ function InteractiveImportModalContentInner(
       }
     });
 
+    if (hasDuplicateEpisodes) {
+      setInteractiveImportErrorMessage(
+        translate('InteractiveImportDuplicateEpisodes')
+      );
+
+      return;
+    }
+
     let shouldClose = false;
 
     if (existingFiles.length) {
@@ -953,13 +977,13 @@ function InteractiveImportModalContentInner(
         </div>
 
         <div className={styles.rightButtons}>
-          <Button onPress={onModalClose}>Cancel</Button>
-
-          {interactiveImportErrorMessage && (
+          {interactiveImportErrorMessage ? (
             <span className={styles.errorMessage}>
               {interactiveImportErrorMessage}
             </span>
-          )}
+          ) : null}
+
+          <Button onPress={onModalClose}>Cancel</Button>
 
           <Button
             kind={kinds.SUCCESS}