Magnet input: keydown

crates/librqbit/webui/src/components/buttons/Button.tsx

@@ -1,19 +1,18 @@
 import { ReactNode } from "react";
 
 export const Button: React.FC<{
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  onClick: () => void;
   variant?: "cancel" | "primary" | "secondary" | "danger" | "none";
   className?: string;
   disabled?: boolean;
   children: ReactNode;
 }> = ({ onClick, children, className, disabled, variant }) => {
   let variantClassNames = {
-    secondary:
-      "hover:bg-blue-600 transition-colors duration-100 hover:text-white",
+    secondary: "hover:bg-blue-500 transition-colors hover:text-white",
     danger:
-      "bg-red-500 text-white border-green-50 hover:border-red-700 hover:bg-red-600",
-    primary: "bg-blue-400 text-white hover:bg-blue-600",
-    cancel: "bg-slate-50 hover:bg-slate-200",
+      "bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600",
+    primary: "bg-blue-600 text-white hover:bg-blue-800 disabled:bg-blue-200",
+    cancel: "hover:bg-slate-200",
     none: "",
   }[variant ?? "secondary"];
   return (
@@ -21,7 +20,7 @@ export const Button: React.FC<{
       disabled={disabled}
       onClick={(e) => {
         e.preventDefault();
-        onClick(e);
+        onClick();
       }}
       className={`flex inline-flex items-center gap-1 border rounded-lg border disabled:cursor-not-allowed px-2 py-1 transition-colors duration-300 ${variantClassNames} ${className}`}
     >

crates/librqbit/webui/src/components/buttons/MagnetInput.tsx

@@ -12,6 +12,12 @@ export const MagnetInput = ({ className }: { className?: string }) => {
   const [inputValue, setInputValue] = useState("");
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
+  const submit = () => {
+    setMagnet(inputValue);
+    setInputValue("");
+    setModalIsOpen(false);
+  };
+
   const clear = () => {
     setModalIsOpen(false);
     setMagnet(null);
@@ -38,6 +44,11 @@ export const MagnetInput = ({ className }: { className?: string }) => {
             value={inputValue}
             name="magnet"
             onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !!inputValue) {
+                submit();
+              }
+            }}
             placeholder="magnet:?xt=urn:btih:..."
             help="Enter magnet or HTTP(S) URL to the .torrent"
           />
@@ -47,15 +58,7 @@ export const MagnetInput = ({ className }: { className?: string }) => {
           <Button variant="cancel" onClick={clear}>
             Cancel
           </Button>
-          <Button
-            disabled={!inputValue}
-            variant="primary"
-            onClick={() => {
-              setMagnet(inputValue);
-              setInputValue("");
-              setModalIsOpen(false);
-            }}
-          >
+          <Button disabled={!inputValue} variant="primary" onClick={submit}>
             Add
           </Button>
         </ModalFooter>

crates/librqbit/webui/src/components/forms/Fieldset.tsx

@@ -7,13 +7,17 @@ export const Fieldset = ({
   className,
 }: {
   children: ReactNode;
-  label: string;
+  label?: string;
   help?: string;
   className?: string;
 }) => {
   return (
     <fieldset className={`mb-4 ${className}`}>
-      <label className="text-md font-md mb-3 block">{label}</label>
+      {label && (
+        <label className="text-md font-md mb-3 block pb-1 border-b">
+          {label}
+        </label>
+      )}
       {children}
     </fieldset>
   );

crates/librqbit/webui/src/components/forms/FormInput.tsx

@@ -6,6 +6,7 @@ export const FormInput: React.FC<{
   autoFocus?: boolean;
   name: string;
   inputType?: string;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   placeholder?: string;
   help?: string;
   disabled?: boolean;
@@ -16,13 +17,14 @@ export const FormInput: React.FC<{
   name,
   disabled,
   onChange,
+  onKeyDown,
   label,
   help,
   inputType,
   placeholder,
 }) => {
   return (
-    <div className="flex flex-col gap-2 text-sm mb-6">
+    <div className="flex flex-col gap-2 text-sm mb-2">
       <label htmlFor={name}>{label}</label>
       <input
         autoFocus={autoFocus}
@@ -33,9 +35,10 @@ export const FormInput: React.FC<{
         disabled={disabled}
         placeholder={placeholder}
         value={value}
+        onKeyDown={onKeyDown}
         onChange={onChange}
       />
-      {help && <div className="text-xs text-slate-500 mb-3">{help}</div>}
+      {help && <div className="text-xs text-slate-500">{help}</div>}
     </div>
   );
 };

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

@@ -36,7 +36,6 @@ export const FileSelectionModal = (props: {
   const [outputFolder, setOutputFolder] = useState<string>("");
   const ctx = useContext(AppContext);
   const API = useContext(APIContext);
-  // const [Modal, , , closeModal] = useModal({ fullScreen: true });
 
   const selectAll = () => {
     setSelectedFiles(
@@ -108,7 +107,16 @@ export const FileSelectionModal = (props: {
     } else if (listTorrentResponse) {
       return (
         <Form>
-          <Fieldset className="mb-4" label="Pick the files to download">
+          <FormInput
+            label="Output folder"
+            name="output_folder"
+            inputType="text"
+            value={outputFolder}
+            onChange={(e) => setOutputFolder(e.target.value)}
+          />
+
+          <Fieldset>
+            <label className="text-sm mb-2 block">Select files</label>
             <div className="mb-3 flex gap-2">
               <Button onClick={selectAll} className="text-sm">
                 Select all
@@ -127,15 +135,8 @@ export const FileSelectionModal = (props: {
               />
             ))}
           </Fieldset>
-          <Fieldset label="Options">
-            <FormInput
-              label="Output folder"
-              name="output_folder"
-              inputType="text"
-              value={outputFolder}
-              onChange={(e) => setOutputFolder(e.target.value)}
-            />
 
+          {/* <Fieldset label="Options">
             <FormCheckbox
               label="Increase timeouts"
               checked={unpopularTorrent}
@@ -143,7 +144,7 @@ export const FileSelectionModal = (props: {
               help="This might be useful for unpopular torrents with few peers. It will slow down fast torrents though."
               name="increase_timeouts"
             />
-          </Fieldset>
+          </Fieldset> */}
         </Form>
       );
     }