Possibility to change selected files after the fact

crates/librqbit/webui/src/components/modal/FileSelectionModal.tsx

@@ -39,7 +39,7 @@ export const FileSelectionModal = (props: {
 
   useEffect(() => {
     setSelectedFiles(
-      new Set(listTorrentResponse?.details.files.map((_, i) => i))
+      new Set(listTorrentResponse?.details.files.map((_, i) => i)),
     );
     setOutputFolder(listTorrentResponse?.output_folder || "");
   }, [listTorrentResponse]);
@@ -79,7 +79,7 @@ export const FileSelectionModal = (props: {
         },
         (e) => {
           setUploadError({ text: "Error starting torrent", details: e });
-        }
+        },
       )
       .finally(() => setUploading(false));
   };
@@ -104,7 +104,7 @@ export const FileSelectionModal = (props: {
             <FileListInput
               selectedFiles={selectedFiles}
               setSelectedFiles={setSelectedFiles}
-              listTorrentResponse={listTorrentResponse}
+              torrentDetails={listTorrentResponse.details}
             />
           </Fieldset>
 

crates/librqbit/webui/src/components/modal/TorrentSettingsModal.tsx

@@ -0,0 +1,90 @@
+import React, { useContext, useState } from "react";
+import {
+  AddTorrentResponse,
+  ErrorDetails,
+  TorrentDetails,
+} from "../../api-types";
+import { FileListInput } from "../FileListInput";
+import { Modal } from "./Modal";
+import { ModalBody } from "./ModalBody";
+import { ModalFooter } from "./ModalFooter";
+import { Button } from "../buttons/Button";
+import { Spinner } from "../Spinner";
+import { APIContext, RefreshTorrentStatsContext } from "../../context";
+import { ErrorComponent } from "../ErrorComponent";
+import { ErrorWithLabel } from "../../stores/errorStore";
+
+export const TorrentSettingsModal: React.FC<{
+  id: number;
+  show: boolean;
+  onHide: () => void;
+  details: TorrentDetails;
+}> = ({ id, show, onHide, details }) => {
+  let initialSelectedFiles = new Set<number>();
+
+  let refreshCtx = useContext(RefreshTorrentStatsContext);
+
+  details.files.forEach((f, i) => {
+    if (f.included) {
+      initialSelectedFiles.add(i);
+    }
+  });
+
+  const API = useContext(APIContext);
+
+  const [selectedFiles, setSelectedFiles] =
+    useState<Set<number>>(initialSelectedFiles);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<ErrorWithLabel | null>(null);
+
+  const close = () => {
+    setSelectedFiles(initialSelectedFiles);
+    onHide();
+  };
+
+  const handleSave = () => {
+    setSaving(true);
+    API.updateOnlyFiles(id, Array.from(selectedFiles)).then(
+      () => {
+        setSaving(false);
+        refreshCtx.refresh();
+        close();
+        setError(null);
+      },
+      (e) => {
+        setSaving(false);
+        setError({
+          text: "Error configuring torrent",
+          details: e as ErrorDetails,
+        });
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={show} onClose={close} title="Configure torrent">
+      <ModalBody>
+        <ErrorComponent error={error}></ErrorComponent>
+        <FileListInput
+          torrentDetails={details}
+          selectedFiles={selectedFiles}
+          setSelectedFiles={setSelectedFiles}
+        />
+      </ModalBody>
+
+      <ModalFooter>
+        {saving && <Spinner />}
+        <Button onClick={close} variant="cancel">
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSave}
+          variant="primary"
+          disabled={saving || selectedFiles.size == 0}
+        >
+          OK
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};