move region picker to admin page

src/pages/admin/AdminPage.tsx

@@ -2,6 +2,7 @@ import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Heading1, Paragraph } from "@/components/utils/Text";
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
 import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
+import { RegionSelectorPart } from "@/pages/parts/admin/RegionSelectorPart";
 import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
 import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
 
@@ -18,6 +19,7 @@ export function AdminPage() {
         <BackendTestPart />
         <WorkerTestPart />
         <TMDBTestPart />
+        <RegionSelectorPart />
       </ThinContainer>
     </SubPageLayout>
   );

src/pages/onboarding/Onboarding.tsx

@@ -3,7 +3,6 @@ import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
-import { Dropdown } from "@/components/form/Dropdown";
 import { Icon, Icons } from "@/components/Icon";
 import { SettingsCard } from "@/components/layout/SettingsCard";
 import { Stepper } from "@/components/layout/Stepper";
@@ -37,7 +36,6 @@ import {
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
-import { Region, useRegionStore } from "@/utils/detectRegion";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
 import { Status, testFebboxToken } from "../parts/settings/SetupPart";
@@ -55,7 +53,6 @@ export function FEDAPISetup() {
   const [isExpanded, setIsExpanded] = useState(false);
   const febboxToken = useAuthStore((s) => s.febboxToken);
   const setFebboxToken = useAuthStore((s) => s.setFebboxToken);
-  const { region, setRegion } = useRegionStore();
 
   const [status, setStatus] = useState<Status>("unset");
   const statusMap: Record<Status, StatusCircleProps["type"]> = {
@@ -64,14 +61,6 @@ export function FEDAPISetup() {
     unset: "noresult",
   };
 
-  const regionOptions = [
-    { id: "us-east", name: "US East" },
-    { id: "us-west", name: "US West" },
-    { id: "south-america", name: "South America" },
-    { id: "asia", name: "Asia" },
-    { id: "europe", name: "Europe" },
-  ];
-
   useEffect(() => {
     const checkTokenStatus = async () => {
       const result = await getFebboxTokenStatus(febboxToken);
@@ -176,21 +165,6 @@ export function FEDAPISetup() {
                   passwordToggleable
                   className="flex-grow"
                 />
-                <div className="ml-4 w-40">
-                  <Dropdown
-                    options={regionOptions}
-                    selectedItem={{
-                      id: region || "us-east",
-                      name:
-                        regionOptions.find((r) => r.id === region)?.name ||
-                        "US East",
-                    }}
-                    setSelectedItem={(item) =>
-                      setRegion(item.id as Region, true)
-                    }
-                    direction="up"
-                  />
-                </div>
               </div>
               {status === "error" && (
                 <p className="text-type-danger mt-4">

src/pages/parts/admin/RegionSelectorPart.tsx

@@ -0,0 +1,42 @@
+import { Dropdown } from "@/components/form/Dropdown";
+import { Box } from "@/components/layout/Box";
+import { Heading2 } from "@/components/utils/Text";
+import { Region, useRegionStore } from "@/utils/detectRegion";
+
+export function RegionSelectorPart() {
+  const { region, setRegion } = useRegionStore();
+
+  const regionOptions = [
+    { id: "us-east", name: "US East" },
+    { id: "us-west", name: "US West" },
+    { id: "south-america", name: "South America" },
+    { id: "asia", name: "Asia" },
+    { id: "europe", name: "Europe" },
+  ];
+
+  return (
+    <>
+      <Heading2 className="mb-8 mt-12">Region Selector</Heading2>
+      <Box>
+        <div className="flex items-center">
+          <div className="flex-1">
+            <p className="max-w-[20rem] font-medium">
+              Manually select your preferred region for FED API. This will
+              override automatic region detection.
+            </p>
+          </div>
+          <Dropdown
+            options={regionOptions}
+            selectedItem={{
+              id: region || "us-east",
+              name:
+                regionOptions.find((r) => r.id === region)?.name || "US East",
+            }}
+            setSelectedItem={(item) => setRegion(item.id as Region, true)}
+            direction="up"
+          />
+        </div>
+      </Box>
+    </>
+  );
+}

src/pages/parts/settings/ConnectionsPart.tsx

@@ -9,7 +9,6 @@ import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
-import { Dropdown } from "@/components/form/Dropdown";
 import { Icon, Icons } from "@/components/Icon";
 import { SettingsCard } from "@/components/layout/SettingsCard";
 import {
@@ -27,7 +26,6 @@ import {
 } from "@/pages/parts/settings/SetupPart";
 import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
-import { Region, useRegionStore } from "@/utils/detectRegion";
 
 interface ProxyEditProps {
   proxyUrls: string[] | null;
@@ -231,7 +229,6 @@ async function getFebboxTokenStatus(febboxToken: string | null) {
 function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
   const { t } = useTranslation();
   const [showVideo, setShowVideo] = useState(false);
-  const { region, setRegion } = useRegionStore();
 
   const [status, setStatus] = useState<Status>("unset");
   const statusMap: Record<Status, StatusCircleProps["type"]> = {
@@ -240,14 +237,6 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
     unset: "noresult",
   };
 
-  const regionOptions = [
-    { id: "us-east", name: "US East" },
-    { id: "us-west", name: "US West" },
-    { id: "south-america", name: "South America" },
-    { id: "asia", name: "Asia" },
-    { id: "europe", name: "Europe" },
-  ];
-
   useEffect(() => {
     const checkTokenStatus = async () => {
       const result = await getFebboxTokenStatus(febboxToken);
@@ -348,19 +337,6 @@ function FebboxTokenEdit({ febboxToken, setFebboxToken }: FebboxTokenProps) {
                 passwordToggleable
                 className="flex-grow"
               />
-              <div className="ml-4 w-40">
-                <Dropdown
-                  options={regionOptions}
-                  selectedItem={{
-                    id: region || "us-east",
-                    name:
-                      regionOptions.find((r) => r.id === region)?.name ||
-                      "US East",
-                  }}
-                  setSelectedItem={(item) => setRegion(item.id as Region, true)}
-                  direction="up"
-                />
-              </div>
             </div>
             {status === "error" && (
               <p className="text-type-danger mt-4">