fix: popular lists plugin

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -61,6 +61,18 @@ export default function IndexLayout() {
           title: "",
         }}
       />
+      <Stack.Screen
+        name="settings/jellyseerr/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="settings/popular-lists/page"
+        options={{
+          title: "",
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx

@@ -0,0 +1,106 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { Loader } from "@/components/Loader";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { Linking, Switch, View } from "react-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [settings, updateSettings] = useSettings();
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
+  };
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: mediaListCollections,
+    isLoading: isLoadingMediaListCollections,
+  } = useQuery({
+    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["sf_promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      return response.data.Items ?? [];
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
+  if (!settings) return null;
+
+  return (
+    <View className="px-4 pt-4">
+      <ListGroup title={"Enable plugin"} className="mb-4">
+        <ListItem
+          title={"Enable Popular Lists"}
+          onPress={() => {
+            updateSettings({ usePopularPlugin: true });
+            queryClient.invalidateQueries({ queryKey: ["search"] });
+          }}
+        >
+          <Switch
+            value={settings.usePopularPlugin}
+            onValueChange={(value) => {
+              updateSettings({ usePopularPlugin: value });
+            }}
+          />
+        </ListItem>
+      </ListGroup>
+
+      {settings.usePopularPlugin && (
+        <ListGroup title="Media List Collections">
+          {mediaListCollections?.map((mlc) => (
+            <ListItem key={mlc.Id} title={mlc.Name}>
+              <Switch
+                value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
+                onValueChange={(value) => {
+                  if (!settings.mediaListCollectionIds) {
+                    updateSettings({
+                      mediaListCollectionIds: [mlc.Id!],
+                    });
+                    return;
+                  }
+
+                  updateSettings({
+                    mediaListCollectionIds:
+                      settings.mediaListCollectionIds.includes(mlc.Id!)
+                        ? settings.mediaListCollectionIds.filter(
+                            (id) => id !== mlc.Id
+                          )
+                        : [...settings.mediaListCollectionIds, mlc.Id!],
+                  });
+                }}
+              />
+            </ListItem>
+          ))}
+          {isLoadingMediaListCollections && <Loader />}
+          {mediaListCollections?.length === 0 && (
+            <Text className="text-xs opacity-50 p-4">
+              No collections found. Add some in Jellyfin.
+            </Text>
+          )}
+        </ListGroup>
+      )}
+    </View>
+  );
+}

components/medialists/MediaListSection.tsx

@@ -61,7 +61,7 @@ export const MediaListSection: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+      <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
         {collection.Name}
       </Text>
       <InfiniteHorizontalScroll

components/settings/OtherSettings.tsx

@@ -29,7 +29,6 @@ export const OtherSettings: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const [marlinUrl, setMarlinUrl] = useState<string>("");
 
   /********************
    * Background task
@@ -61,29 +60,6 @@ export const OtherSettings: React.FC = () => {
   /**********************
    *********************/
 
-  const queryClient = useQueryClient();
-
-  const {
-    data: mediaListCollections,
-    isLoading: isLoadingMediaListCollections,
-  } = useQuery({
-    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
-    queryFn: async () => {
-      if (!api || !user?.Id) return [];
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        tags: ["sf_promoted"],
-        recursive: true,
-        fields: ["Tags"],
-        includeItemTypes: ["BoxSet"],
-      });
-
-      return response.data.Items ?? [];
-    },
-    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 0,
-  });
 
   if (!settings) return null;
 
@@ -211,40 +187,7 @@ export const OtherSettings: React.FC = () => {
         />
       </ListItem>
 
-      {settings.usePopularPlugin && (
-        <ListGroup title="Media List Collections">
-          {mediaListCollections?.map((mlc) => (
-            <ListItem key={mlc.Id} title={mlc.Name}>
-              <Switch
-                value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
-                onValueChange={(value) => {
-                  if (!settings.mediaListCollectionIds) {
-                    updateSettings({
-                      mediaListCollectionIds: [mlc.Id!],
-                    });
-                    return;
-                  }
-
-                  updateSettings({
-                    mediaListCollectionIds:
-                      settings.mediaListCollectionIds.includes(mlc.Id!)
-                        ? settings.mediaListCollectionIds.filter(
-                            (id) => id !== mlc.Id
-                          )
-                        : [...settings.mediaListCollectionIds, mlc.Id!],
-                  });
-                }}
-              />
-            </ListItem>
-          ))}
-          {isLoadingMediaListCollections && <Loader />}
-          {mediaListCollections?.length === 0 && (
-            <Text className="text-xs opacity-50 p-4">
-              No collections found. Add some in Jellyfin.
-            </Text>
-          )}
-        </ListGroup>
-      )}
+      
       <ListItem
         title="Show Custom Menu Links"
         onPress={() =>

components/settings/PluginSettings.tsx

@@ -24,6 +24,11 @@ export const PluginSettings = () => {
           title="Marlin Search"
           showArrow
         />
+        <ListItem
+          onPress={() => router.push("/settings/popular-lists/page")}
+          title="Popular Lists"
+          showArrow
+        />
       </ListGroup>
     </View>
   );