Implemented number input and used it with backup retention and port settings.

frontend/src/pages/Settings/General/index.tsx

@@ -46,7 +46,11 @@ const SettingsGeneralView: FunctionComponent = () => {
           <Message>Valid IPv4 address or '0.0.0.0' for all interfaces</Message>
         </Input>
         <Input name="Port">
-          <Text placeholder={6767} settingKey="settings-general-port"></Text>
+          <Text
+            placeholder={6767}
+            settingKey="settings-general-port"
+            numberWithArrows={true}
+          ></Text>
         </Input>
         <Input name="Base URL">
           <InputGroup>
@@ -131,7 +135,10 @@ const SettingsGeneralView: FunctionComponent = () => {
               <Text settingKey="settings-proxy-url"></Text>
             </Input>
             <Input name="Port">
-              <Text settingKey="settings-proxy-port"></Text>
+              <Text
+                settingKey="settings-proxy-port"
+                numberWithArrows={true}
+              ></Text>
             </Input>
             <Input name="Username">
               <Text settingKey="settings-proxy-username"></Text>
@@ -177,8 +184,17 @@ const SettingsGeneralView: FunctionComponent = () => {
         </Input>
       </Group>
       <Group header="Backups">
-        <File settingKey="settings-backup-folder" type="bazarr"></File>
+        <Input name="Folder">
-        <Message>Absolute path to the backup directory</Message>
+          <File settingKey="settings-backup-folder" type="bazarr"></File>
+          <Message>Absolute path to the backup directory</Message>
+        </Input>
+
+        <Input name="Retention (days)">
+          <Text
+            settingKey="settings-backup-retention"
+            numberWithArrows={true}
+          ></Text>
+        </Input>
       </Group>
       <Group header="Analytics">
         <Input>

frontend/src/pages/Settings/Radarr/index.tsx

@@ -39,7 +39,10 @@ const SettingsRadarrView: FunctionComponent<Props> = () => {
               <Message>Hostname or IPv4 Address</Message>
             </Input>
             <Input name="Port">
-              <Text settingKey="settings-radarr-port"></Text>
+              <Text
+                settingKey="settings-radarr-port"
+                numberWithArrows={true}
+              ></Text>
             </Input>
             <Input name="Base URL">
               <InputGroup>

frontend/src/pages/Settings/Sonarr/index.tsx

@@ -41,7 +41,10 @@ const SettingsSonarrView: FunctionComponent<Props> = () => {
               <Message>Hostname or IPv4 Address</Message>
             </Input>
             <Input name="Port">
-              <Text settingKey="settings-sonarr-port"></Text>
+              <Text
+                settingKey="settings-sonarr-port"
+                numberWithArrows={true}
+              ></Text>
             </Input>
             <Input name="Base URL">
               <InputGroup>

frontend/src/pages/Settings/components/forms.tsx

@@ -39,6 +39,7 @@ export interface TextProps extends BaseInput<React.ReactText> {
   placeholder?: React.ReactText;
   password?: boolean;
   controlled?: boolean;
+  numberWithArrows?: boolean;
 }
 
 export const Text: FunctionComponent<TextProps> = ({
@@ -49,15 +50,26 @@ export const Text: FunctionComponent<TextProps> = ({
   override,
   password,
   settingKey,
+  numberWithArrows,
 }) => {
   const value = useLatest<React.ReactText>(settingKey, isReactText, override);
 
   const update = useSingleUpdate();
   const collapse = useCollapse();
 
+  const fieldType = () => {
+    if (password) {
+      return "password";
+    } else if (numberWithArrows) {
+      return "number";
+    } else {
+      return "text";
+    }
+  };
+
   return (
     <Form.Control
-      type={password ? "password" : "text"}
+      type={fieldType()}
       placeholder={placeholder?.toString()}
       disabled={disabled}
       defaultValue={controlled ? undefined : value ?? undefined}