+
+
+
+
+ Settings
+
+
+
+
+ {SIDEBAR_ITEMS.map((item) => (
+
+ {({ isActive }) => (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/routes/Settings/sections/BackendSettings.tsx b/src/routes/Settings/sections/BackendSettings.tsx
new file mode 100644
index 000000000..e1b863801
--- /dev/null
+++ b/src/routes/Settings/sections/BackendSettings.tsx
@@ -0,0 +1,248 @@
+import { type ChangeEvent, useEffect, useState } from "react";
+
+import { InfoBox } from "@/components/shared/InfoBox";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Heading, Paragraph } from "@/components/ui/typography";
+import useToastNotification from "@/hooks/useToastNotification";
+import { cn } from "@/lib/utils";
+import { useBackend } from "@/providers/BackendProvider";
+import { API_URL } from "@/utils/constants";
+
+const HasEnvConfig = !!API_URL;
+const ShowRelativePathOption = !API_URL;
+
+export function BackendSettings() {
+ const notify = useToastNotification();
+ const {
+ backendUrl,
+ available,
+ isConfiguredFromEnv,
+ isConfiguredFromRelativePath,
+ ping,
+ setEnvConfig,
+ setRelativePathConfig,
+ setBackendUrl,
+ } = useBackend();
+
+ const [inputBackendUrl, setInputBackendUrl] = useState(
+ isConfiguredFromEnv ? "" : backendUrl,
+ );
+ const [inputBackendTestResult, setInputBackendTestResult] = useState<
+ boolean | null
+ >(null);
+ const [isEnvConfig, setIsEnvConfig] = useState(isConfiguredFromEnv);
+ const [isRelativePathConfig, setIsRelativePathConfig] = useState(
+ isConfiguredFromRelativePath,
+ );
+
+ const handleInputChange = (e: ChangeEvent