Add 'Add New Server' functionality without requiring logout

Co-authored-by: retardgerman <78982850+retardgerman@users.noreply.github.com>

app/(auth)/(tabs)/(home)/settings.tsx

@@ -7,6 +7,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
+import { AddNewServer } from "@/components/settings/AddNewServer";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { AudioToggles } from "@/components/settings/AudioToggles";
 import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
@@ -67,6 +68,8 @@ export default function settings() {
 
         <ServerSwitcher className='mb-4' />
 
+        <AddNewServer className='mb-4' />
+
         <QuickConnect className='mb-4' />
 
         <MediaProvider>

components/settings/AddNewServer.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, View, type ViewProps } from "react-native";
+import { useJellyfin } from "@/providers/JellyfinProvider";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+import { Input } from "../common/Input";
+import { Button } from "../Button";
+
+interface Props extends ViewProps {}
+
+export const AddNewServer: React.FC<Props> = ({ ...props }) => {
+  const [showForm, setShowForm] = useState(false);
+  const [serverUrl, setServerUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { addNewServer } = useJellyfin();
+  const { t } = useTranslation();
+
+  const handleAddServer = async () => {
+    if (!serverUrl.trim()) {
+      Alert.alert(t("login.error_title"), "Please enter a server URL");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Validate URL format
+      const cleanUrl = serverUrl.trim().replace(/\/$/, "");
+      
+      // Test connection to the server
+      const baseUrl = cleanUrl.replace(/^https?:\/\//i, "");
+      const protocols = ["https", "http"];
+      let validUrl: string | null = null;
+
+      for (const protocol of protocols) {
+        try {
+          const response = await fetch(
+            `${protocol}://${baseUrl}/System/Info/Public`,
+            { mode: "cors" }
+          );
+          if (response.ok) {
+            validUrl = `${protocol}://${baseUrl}`;
+            break;
+          }
+        } catch (error) {
+          // Continue to next protocol
+        }
+      }
+
+      if (!validUrl) {
+        Alert.alert(
+          t("login.connection_failed"),
+          t("login.could_not_connect_to_server")
+        );
+        return;
+      }
+
+      // Add the server to the list
+      await addNewServer({ address: validUrl });
+      
+      Alert.alert(
+        "Success",
+        `Server ${validUrl} has been added to your server list. You can now switch to it from Quick Switch Servers.`
+      );
+      
+      setServerUrl("");
+      setShowForm(false);
+    } catch (error) {
+      console.error("Failed to add server:", error);
+      Alert.alert(
+        t("login.error_title"),
+        "Failed to add server. Please try again."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View {...props}>
+      <ListGroup title={t("server.add_new_server")}>
+        {!showForm ? (
+          <ListItem
+            onPress={() => setShowForm(true)}
+            title="Add Server"
+            icon="add"
+            showArrow
+          />
+        ) : (
+          <View className="p-4 space-y-4">
+            <Input
+              placeholder={t("server.server_url_placeholder")}
+              value={serverUrl}
+              onChangeText={setServerUrl}
+              keyboardType="url"
+              autoCapitalize="none"
+              textContentType="URL"
+              maxLength={500}
+            />
+            <View className="flex-row space-x-2">
+              <Button
+                onPress={handleAddServer}
+                loading={loading}
+                disabled={loading || !serverUrl.trim()}
+                className="flex-1"
+              >
+                Add Server
+              </Button>
+              <Button
+                onPress={() => {
+                  setShowForm(false);
+                  setServerUrl("");
+                }}
+                className="flex-1 bg-neutral-800 border border-neutral-700"
+              >
+                Cancel
+              </Button>
+            </View>
+          </View>
+        )}
+      </ListGroup>
+    </View>
+  );
+};