fix: plugins design stuff

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

@@ -1,4 +1,5 @@
 import { Chromecast } from "@/components/Chromecast";
+import { Text } from "@/components/common/Text";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
@@ -15,6 +16,9 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Home",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (

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

@@ -52,7 +52,7 @@ export default function page() {
 
   return (
     <View className="px-4 pt-4">
-      <ListGroup title={"Enable plugin"} className="mb-4">
+      <ListGroup title={"Enable plugin"} className="">
         <ListItem
           title={"Enable Popular Lists"}
           onPress={() => {
@@ -68,41 +68,6 @@ export default function page() {
           />
         </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>
-      )}
       <Text className="px-4 text-xs text-neutral-500 mt-1">
         Popular Lists is a plugin that enables you to show custom Jellyfin lists
         on the Streamyfin home page.{" "}
@@ -110,6 +75,65 @@ export default function page() {
           Read more about Popular Lists.
         </Text>
       </Text>
+
+      {settings.usePopularPlugin && (
+        <>
+          {!isLoadingMediaListCollections ? (
+            <>
+              {mediaListCollections?.length === 0 ? (
+                <Text className="text-xs opacity-50 p-4">
+                  No collections found. Add some in Jellyfin.
+                </Text>
+              ) : (
+                <>
+                  <ListGroup title="Media List Collections" className="mt-4">
+                    {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>
+                    ))}
+                  </ListGroup>
+                  <Text className="px-4 text-xs text-neutral-500 mt-1">
+                    Popular Lists is a plugin that enables you to show custom
+                    Jellyfin lists on the Streamyfin home page.{" "}
+                    <Text className="text-blue-500" onPress={handleOpenLink}>
+                      Read more about Popular Lists.
+                    </Text>
+                  </Text>
+                </>
+              )}
+            </>
+          ) : (
+            <Loader />
+          )}
+        </>
+      )}
     </View>
   );
 }

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

@@ -1,4 +1,7 @@
-import {commonScreenOptions, nestedTabPageScreenOptions} from "@/components/stacks/NestedTabPageStack";
+import {
+  commonScreenOptions,
+  nestedTabPageScreenOptions,
+} from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -11,6 +14,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Search",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
@@ -29,10 +35,7 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen
-        name="jellyseerr/page"
-        options={commonScreenOptions}
-      />
+      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
     </Stack>
   );
 }

components/home/LargeMovieCarousel.tsx

@@ -84,21 +84,27 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
+  if (settings?.usePopularPlugin === false) return null;
   if (l1 || l2) return null;
   if (!popularItems) return null;
 
   return (
-    <View className="flex flex-col items-center mt-4" {...props}>
+    <View className="flex flex-col items-center mt-2" {...props}>
       <Carousel
-        autoPlay={true}
-        autoPlayInterval={3000}
-        loop={true}
         ref={ref}
+        autoPlay={false}
+        loop={true}
+        snapEnabled={true}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 0.86,
+          parallaxScrollingOffset: 100,
+        }}
         width={width}
         height={204}
         data={popularItems}
         onProgressChange={progress}
-        renderItem={({ item, index }) => <RenderItem item={item} />}
+        renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
       />
       <Pagination.Basic
         progress={progress}

components/list/ListGroup.tsx

@@ -23,14 +23,13 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
   const childrenArray = Children.toArray(children);
 
   return (
-    <View>
+    <View {...props}>
       <Text className="ml-4 mb-1 uppercase text-[#8E8D91] text-xs">
         {title}
       </Text>
       <View
         style={[]}
         className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
-        {...props}
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {