collapsable custom source order

src/assets/locales/en.json

@@ -1354,6 +1354,8 @@
       "sourceOrder": "Reordering sources",
       "sourceOrderDescription": "Drag and drop to reorder sources. This will determine the order in which sources are checked for the media you are trying to watch. If a source is greyed out, it means the <bold>extension</bold> is required for that source. <br><br> <strong>(The default order is best for most users)</strong>",
       "sourceOrderEnableLabel": "Custom source order",
+      "showLess": "Show less",
+      "showMore": "Show more",
       "embedOrder": "Reordering embeds",
       "embedOrderDescription": "Drag and drop to reorder embeds. This will determine the order in which embeds are checked for the media you are trying to watch. <br><br> <strong>(The default order is best for most users)</strong>",
       "embedOrderEnableLabel": "Custom embed order",

src/pages/parts/settings/PreferencesPart.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -9,6 +9,7 @@ import { Toggle } from "@/components/buttons/Toggle";
 import { FlagIcon } from "@/components/FlagIcon";
 import { Dropdown } from "@/components/form/Dropdown";
 import { SortableList } from "@/components/form/SortableList";
+import { Icon, Icons } from "@/components/Icon";
 import { Heading1 } from "@/components/utils/Text";
 import { appLanguageOptions } from "@/setup/i18n";
 import { useOverlayStack } from "@/stores/interface/overlayStack";
@@ -45,6 +46,7 @@ export function PreferencesPart(props: {
 }) {
   const { t } = useTranslation();
   const { showModal } = useOverlayStack();
+  const [isSourceListExpanded, setIsSourceListExpanded] = useState(false);
   const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
 
   const allowAutoplay = isAutoplayAllowed();
@@ -381,12 +383,41 @@ export function PreferencesPart(props: {
 
             {props.enableSourceOrder && (
               <div className="w-full flex flex-col gap-4">
-                <SortableList
+                <div
-                  items={sourceItems}
+                  className={classNames(
-                  setItems={(items) =>
+                    "overflow-hidden transition-all duration-300",
-                    props.setSourceOrder(items.map((item) => item.id))
+                    sourceItems.length > 10 && !isSourceListExpanded
-                  }
+                      ? "max-h-[400px]"
-                />
+                      : "max-h-none",
+                  )}
+                >
+                  <SortableList
+                    items={sourceItems}
+                    setItems={(items) =>
+                      props.setSourceOrder(items.map((item) => item.id))
+                    }
+                  />
+                </div>
+                {sourceItems.length > 10 && (
+                  <Button
+                    className="max-w-[25rem]"
+                    theme="secondary"
+                    onClick={() =>
+                      setIsSourceListExpanded(!isSourceListExpanded)
+                    }
+                  >
+                    {isSourceListExpanded
+                      ? t("settings.preferences.showLess")
+                      : t("settings.preferences.showMore")}
+                    <Icon
+                      icon={
+                        isSourceListExpanded
+                          ? Icons.CHEVRON_UP
+                          : Icons.CHEVRON_DOWN
+                      }
+                    />
+                  </Button>
+                )}
                 <Button
                   className="max-w-[25rem]"
                   theme="secondary"