🐛 Fix form validation and missing integration types

src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

@@ -21,7 +21,6 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         placeholder="My example app"
         variant="default"
         withAsterisk
-        required
         {...form.getInputProps('name')}
       />
       <TextInput
@@ -31,7 +30,6 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         placeholder="https://google.com"
         variant="default"
         withAsterisk
-        required
         {...form.getInputProps('url')}
         onChange={(e) => {
           form.setFieldValue('behaviour.externalUrl', e.target.value);
@@ -44,7 +42,6 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         description={t('general.externalAddress.description')}
         placeholder="https://homarr.mywebsite.com/"
         variant="default"
-        required
         {...form.getInputProps('behaviour.externalUrl')}
       />
     </Tabs.Panel>

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx

@@ -56,7 +56,11 @@ export const GenericSecretInput = ({
               {t('integration.secrets.clear')}
             </Button>
             {displayUpdateField === true ? (
-              <PasswordInput placeholder="new secret" width={200} {...props} />
+              <PasswordInput
+                placeholder="new secret"
+                styles={{ root: { width: 200 } }}
+                {...props}
+              />
             ) : (
               <Button onClick={() => setDisplayUpdateField(true)} variant="light">
                 {t('integration.secrets.update')}

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -19,7 +19,6 @@ interface IntegrationSelectorProps {
 export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
   const { t } = useTranslation('layout/modals/add-app');
 
-  // TODO: read this out from integrations dynamically.
   const data: SelectItem[] = [
     {
       value: 'sabnzbd',
@@ -51,6 +50,26 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
       image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/overseerr.png',
       label: 'Overseerr',
     },
+    {
+      value: 'sonarr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/sonarr.png',
+      label: 'Sonarr',
+    },
+    {
+      value: 'radarr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/radarr.png',
+      label: 'Radarr',
+    },
+    {
+      value: 'lidarr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/lidarr.png',
+      label: 'Lidarr',
+    },
+    {
+      value: 'readarr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/readarr.png',
+      label: 'Readarr',
+    },
   ].filter((x) => Object.keys(integrationFieldProperties).includes(x.value));
 
   const getNewProperties = (value: string | null): AppIntegrationPropertyType[] => {