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>