From a498fdde8755ecd879b9caf93475e6c923fbf876 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Thu, 25 Sep 2025 11:41:48 -0600
Subject: [PATCH] move region selector part to fedapi setup parts!

---
 src/pages/admin/AdminPage.tsx                 |  2 -
 src/pages/onboarding/Onboarding.tsx           |  9 ++--
 src/pages/parts/admin/RegionSelectorPart.tsx  | 50 -------------------
 src/pages/parts/settings/ConnectionsPart.tsx  |  7 ++-
 .../parts/settings/RegionSelectorPart.tsx     | 32 ++++++++++++
 5 files changed, 41 insertions(+), 59 deletions(-)
 delete mode 100644 src/pages/parts/admin/RegionSelectorPart.tsx
 create mode 100644 src/pages/parts/settings/RegionSelectorPart.tsx

diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx
index ccc85001..a04174a1 100644
--- a/src/pages/admin/AdminPage.tsx
+++ b/src/pages/admin/AdminPage.tsx
@@ -3,7 +3,6 @@ import { Heading1, Paragraph } from "@/components/utils/Text";
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
 import { ConfigValuesPart } from "@/pages/parts/admin/ConfigValuesPart";
 import { M3U8TestPart } from "@/pages/parts/admin/M3U8TestPart";
-import { RegionSelectorPart } from "@/pages/parts/admin/RegionSelectorPart";
 import { TMDBTestPart } from "@/pages/parts/admin/TMDBTestPart";
 import { WorkerTestPart } from "@/pages/parts/admin/WorkerTestPart";
 
@@ -22,7 +21,6 @@ export function AdminPage() {
         <WorkerTestPart />
         <TMDBTestPart />
         <M3U8TestPart />
-        <RegionSelectorPart />
         <EmbedOrderPart />
       </ThinContainer>
     </SubPageLayout>
diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 0a6b7e14..99105f87 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -44,6 +44,7 @@ import { conf } from "@/setup/config";
 import { usePreferencesStore } from "@/stores/preferences";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
+import { RegionSelectorPart } from "../parts/settings/RegionSelectorPart";
 import {
   Status,
   testFebboxKey,
@@ -189,11 +190,8 @@ export function FEDAPISetup() {
                 <p className="text-white font-bold mb-3">
                   {t("fedapi.setup.tokenLabel")}
                 </p>
-                <div className="flex items-center w-full">
-                  <StatusCircle
-                    type={statusMap[status]}
-                    className="mx-2 mr-4"
-                  />
+                <div className="flex items-center w-full gap-4">
+                  <StatusCircle type={statusMap[status]} className="mx-2" />
                   <AuthInputBox
                     onChange={(newToken) => {
                       setFebboxKey(newToken);
@@ -203,6 +201,7 @@ export function FEDAPISetup() {
                     passwordToggleable
                     className="flex-grow"
                   />
+                  <RegionSelectorPart />
                 </div>
                 {status === "error" && (
                   <p className="text-type-danger mt-4">
diff --git a/src/pages/parts/admin/RegionSelectorPart.tsx b/src/pages/parts/admin/RegionSelectorPart.tsx
deleted file mode 100644
index 58af2e30..00000000
--- a/src/pages/parts/admin/RegionSelectorPart.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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: "dallas", name: "Dallas, TX" },
-    { id: "portland", name: "Portland, OR" },
-    { id: "new-york", name: "New York, NY" },
-    { id: "paris", name: "Paris, France" },
-    { id: "hong-kong", name: "Hong Kong" },
-    { id: "kansas", name: "Kansas City, MO" },
-    { id: "sydney", name: "Sydney, Australia" },
-    { id: "singapore", name: "Singapore" },
-    { id: "mumbai", name: "Mumbai, India" },
-  ];
-
-  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 || "new-york",
-              name:
-                regionOptions.find((r) => r.id === region)?.name ||
-                "Unknown (New York, NY)",
-            }}
-            setSelectedItem={(item) => setRegion(item.id as Region, true)}
-            direction="up"
-          />
-        </div>
-        <p className="max-w-[30rem] text-type-danger">
-          Use with caution. Changing the region will reset your token!
-        </p>
-      </Box>
-    </>
-  );
-}
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index ba9aec33..cad2e638 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -30,6 +30,8 @@ import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 import { usePreferencesStore } from "@/stores/preferences";
 
+import { RegionSelectorPart } from "./RegionSelectorPart";
+
 interface ProxyEditProps {
   proxyUrls: string[] | null;
   setProxyUrls: Dispatch<SetStateAction<string[] | null>>;
@@ -349,8 +351,8 @@ function FebboxKeyEdit({ febboxKey, setFebboxKey }: FebboxKeyProps) {
               <p className="text-white font-bold">
                 {t("settings.connections.febbox.tokenLabel", "Token")}
               </p>
-              <div className="flex items-center w-full">
-                <StatusCircle type={statusMap[status]} className="mx-2 mr-4" />
+              <div className="flex items-center w-full gap-4">
+                <StatusCircle type={statusMap[status]} className="mx-2" />
                 <AuthInputBox
                   onChange={(newToken) => {
                     setFebboxKey(newToken);
@@ -360,6 +362,7 @@ function FebboxKeyEdit({ febboxKey, setFebboxKey }: FebboxKeyProps) {
                   passwordToggleable
                   className="flex-grow"
                 />
+                <RegionSelectorPart />
               </div>
               {status === "error" && (
                 <p className="text-type-danger mt-4">
diff --git a/src/pages/parts/settings/RegionSelectorPart.tsx b/src/pages/parts/settings/RegionSelectorPart.tsx
new file mode 100644
index 00000000..24cf9470
--- /dev/null
+++ b/src/pages/parts/settings/RegionSelectorPart.tsx
@@ -0,0 +1,32 @@
+import { Dropdown } from "@/components/form/Dropdown";
+import { Region, useRegionStore } from "@/utils/detectRegion";
+
+export function RegionSelectorPart() {
+  const { region, setRegion } = useRegionStore();
+
+  const regionOptions = [
+    { id: "dallas", name: "Dallas, TX" },
+    { id: "portland", name: "Portland, OR" },
+    { id: "new-york", name: "New York, NY" },
+    { id: "paris", name: "Paris, France" },
+    { id: "hong-kong", name: "Hong Kong" },
+    { id: "kansas", name: "Kansas City, MO" },
+    { id: "sydney", name: "Sydney, Australia" },
+    { id: "singapore", name: "Singapore" },
+    { id: "mumbai", name: "Mumbai, India" },
+  ];
+
+  return (
+    <Dropdown
+      options={regionOptions}
+      selectedItem={{
+        id: region || "new-york",
+        name:
+          regionOptions.find((r) => r.id === region)?.name ||
+          "Unknown (New York, NY)",
+      }}
+      setSelectedItem={(item) => setRegion(item.id as Region, true)}
+      direction="up"
+    />
+  );
+}