feat: [StreamyfinPlugin] Popular Plugin settings

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

@@ -9,6 +9,8 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { Linking, Switch, View } from "react-native";
+import {useMemo} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
   const navigation = useNavigation();
@@ -16,7 +18,7 @@ export default function page() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
 
   const handleOpenLink = () => {
     Linking.openURL(
@@ -48,13 +50,22 @@ export default function page() {
     staleTime: 0,
   });
 
+  const disabled = useMemo(() => (
+    pluginSettings?.usePopularPlugin?.locked === true &&
+    pluginSettings?.mediaListCollectionIds?.locked === true
+  ), [pluginSettings]);
+
   if (!settings) return null;
 
   return (
-    <View className="px-4 pt-4">
+    <DisabledSetting
+      disabled={disabled}
+      className="px-4 pt-4"
+    >
       <ListGroup title={"Enable plugin"} className="">
         <ListItem
           title={"Enable Popular Lists"}
+          disabled={pluginSettings?.usePopularPlugin?.locked}
           onPress={() => {
             updateSettings({ usePopularPlugin: true });
             queryClient.invalidateQueries({ queryKey: ["search"] });
@@ -62,9 +73,10 @@ export default function page() {
         >
           <Switch
             value={settings.usePopularPlugin}
-            onValueChange={(value) => {
-              updateSettings({ usePopularPlugin: value });
-            }}
+            disabled={pluginSettings?.usePopularPlugin?.locked}
+            onValueChange={(usePopularPlugin) =>
+              updateSettings({ usePopularPlugin })
+          }
           />
         </ListItem>
       </ListGroup>
@@ -88,11 +100,14 @@ export default function page() {
                 <>
                   <ListGroup title="Media List Collections" className="mt-4">
                     {mediaListCollections?.map((mlc) => (
-                      <ListItem key={mlc.Id} title={mlc.Name}>
+                      <ListItem
+                        key={mlc.Id}
+                        title={mlc.Name}
+                        disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                      >
                         <Switch
-                          value={settings.mediaListCollectionIds?.includes(
-                            mlc.Id!
-                          )}
+                          disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                          value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
                           onValueChange={(value) => {
                             if (!settings.mediaListCollectionIds) {
                               updateSettings({
@@ -130,6 +145,6 @@ export default function page() {
           )}
         </>
       )}
-    </View>
+    </DisabledSetting>
   );
 }