Add source order edit button

src/components/player/atoms/settings/SourceSelectingView.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import { getCachedMetadata } from "@/backend/helpers/providerApi";
+import { Button } from "@/components/buttons/Button";
 import { Loading } from "@/components/layout/Loading";
 import {
   useEmbedScraping,
@@ -146,6 +147,13 @@ export function SourceSelectionView({
     <>
       <Menu.BackLink onClick={() => router.navigate("/")}>
         {t("player.menus.sources.title")}
+        <Button
+          theme="purple"
+          onClick={() => window.open("/settings#source-order")}
+          className="w-half h-8 ml-[95px]"
+        >
+          {t("settings.account.accountDetails.editProfile")}
+        </Button>
       </Menu.BackLink>
       <Menu.Section className="pb-4">
         {sources.map((v) => (

src/pages/Settings.tsx

@@ -103,6 +103,16 @@ export function AccountSettings(props: {
 }
 
 export function SettingsPage() {
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      const element = document.querySelector(hash);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, []);
+
   const { t } = useTranslation();
   const activeTheme = useThemeStore((s) => s.theme);
   const setTheme = useThemeStore((s) => s.setTheme);

src/pages/parts/settings/PreferencesPart.tsx

@@ -112,27 +112,29 @@ export function PreferencesPart(props: {
         </div>
       </div>
 
-      <div className="flex flex-col gap-3">
-        <p className="text-white font-bold">
-          {t("settings.preferences.sourceOrder")}
-        </p>
-        <p className="max-w-[25rem] font-medium">
-          {t("settings.preferences.sourceOrderDescription")}
-        </p>
+      <div id="source-order" className="mt-4">
+        <div className="flex flex-col gap-3">
+          <p className="text-white font-bold">
+            {t("settings.preferences.sourceOrder")}
+          </p>
+          <p className="max-w-[25rem] font-medium">
+            {t("settings.preferences.sourceOrderDescription")}
+          </p>
 
-        <SortableList
-          items={sourceItems}
-          setItems={(items) =>
-            props.setSourceOrder(items.map((item) => item.id))
-          }
-        />
-        <Button
-          className="max-w-[25rem]"
-          theme="secondary"
-          onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
-        >
-          {t("settings.reset")}
-        </Button>
+          <SortableList
+            items={sourceItems}
+            setItems={(items) =>
+              props.setSourceOrder(items.map((item) => item.id))
+            }
+          />
+          <Button
+            className="max-w-[25rem]"
+            theme="secondary"
+            onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
+          >
+            {t("settings.reset")}
+          </Button>
+        </div>
       </div>
     </div>
   );