refactor: better settings (#1178)

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

@@ -113,33 +113,144 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name='settings/marlin-search/page'
+        name='settings/playback-controls/page'
         options={{
-          title: "",
+          title: t("home.settings.playback_controls.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
               <Feather name='chevron-left' size={28} color='white' />
             </TouchableOpacity>
           ),
         }}
       />
       <Stack.Screen
-        name='settings/jellyseerr/page'
+        name='settings/audio-subtitles/page'
         options={{
-          title: "",
+          title: t("home.settings.audio_subtitles.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
               <Feather name='chevron-left' size={28} color='white' />
             </TouchableOpacity>
           ),
         }}
       />
       <Stack.Screen
-        name='settings/hide-libraries/page'
+        name='settings/appearance/page'
         options={{
-          title: "",
+          title: t("home.settings.appearance.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/appearance/hide-libraries/page'
+        options={{
+          title: t("home.settings.other.hide_libraries"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/page'
+        options={{
+          title: t("home.settings.plugins.plugins_title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/marlin-search/page'
+        options={{
+          title: "Marlin Search",
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/plugins/jellyseerr/page'
+        options={{
+          title: "Jellyseerr",
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name='settings/intro/page'
+        options={{
+          title: t("home.settings.intro.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
               <Feather name='chevron-left' size={28} color='white' />
             </TouchableOpacity>
           ),
@@ -148,9 +259,16 @@ export default function IndexLayout() {
       <Stack.Screen
         name='settings/logs/page'
         options={{
-          title: "",
+          title: t("home.settings.logs.logs_title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
           headerLeft: () => (
-            <TouchableOpacity onPress={() => _router.back()} className='pl-0.5'>
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
               <Feather name='chevron-left' size={28} color='white' />
             </TouchableOpacity>
           ),

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

@@ -8,34 +8,16 @@ import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
-import { AudioToggles } from "@/components/settings/AudioToggles";
-import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
-import DownloadSettings from "@/components/settings/DownloadSettings";
-import { GestureControls } from "@/components/settings/GestureControls";
-import { MediaProvider } from "@/components/settings/MediaContext";
-import { MediaToggles } from "@/components/settings/MediaToggles";
-import { OtherSettings } from "@/components/settings/OtherSettings";
-import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
-import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
-import { useHaptic } from "@/hooks/useHaptic";
 import { useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { clearLogs } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
 
 export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [_user] = useAtom(userAtom);
   const { logout } = useJellyfin();
-  const successHapticFeedback = useHaptic("success");
-
-  const onClearLogsClicked = async () => {
-    clearLogs();
-    successHapticFeedback();
-  };
 
   const navigation = useNavigation();
   useEffect(() => {
@@ -63,58 +45,51 @@ export default function settings() {
       }}
     >
       <View
-        className='p-4 flex flex-col gap-y-4'
+        className='p-4 flex flex-col'
         style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        <UserInfo />
+        <View className='mb-4'>
+          <UserInfo />
+        </View>
 
         <QuickConnect className='mb-4' />
 
-        <MediaProvider>
-          <MediaToggles className='mb-4' />
-          <GestureControls className='mb-4' />
-          <AudioToggles className='mb-4' />
-          <SubtitleToggles className='mb-4' />
-        </MediaProvider>
-
-        <OtherSettings />
-
-        {!Platform.isTV && <DownloadSettings />}
-
-        <PluginSettings />
-
-        <AppLanguageSelector />
-
-        {!Platform.isTV && <ChromecastSettings />}
-
-        <ListGroup title={"Intro"}>
-          <ListItem
-            onPress={() => {
-              router.push("/intro/page");
-            }}
-            title={t("home.settings.intro.show_intro")}
-          />
-          <ListItem
-            textColor='red'
-            onPress={() => {
-              storage.set("hasShownIntro", false);
-            }}
-            title={t("home.settings.intro.reset_intro")}
-          />
-        </ListGroup>
+        <View className='mb-4'>
+          <AppLanguageSelector />
+        </View>
 
         <View className='mb-4'>
-          <ListGroup title={t("home.settings.logs.logs_title")}>
+          <ListGroup title={t("home.settings.categories.title")}>
+            <ListItem
+              onPress={() => router.push("/settings/playback-controls/page")}
+              showArrow
+              title={t("home.settings.playback_controls.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/audio-subtitles/page")}
+              showArrow
+              title={t("home.settings.audio_subtitles.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/appearance/page")}
+              showArrow
+              title={t("home.settings.appearance.title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/plugins/page")}
+              showArrow
+              title={t("home.settings.plugins.plugins_title")}
+            />
+            <ListItem
+              onPress={() => router.push("/settings/intro/page")}
+              showArrow
+              title={t("home.settings.intro.title")}
+            />
             <ListItem
               onPress={() => router.push("/settings/logs/page")}
               showArrow
               title={t("home.settings.logs.logs_title")}
             />
-            <ListItem
-              textColor='red'
-              onPress={onClearLogsClicked}
-              title={t("home.settings.logs.delete_all_logs")}
-            />
           </ListGroup>
         </View>
 

app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx

@@ -0,0 +1,79 @@
+import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { ScrollView, Switch, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+  const insets = useSafeAreaInsets();
+
+  const { t } = useTranslation();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+  });
+
+  if (!settings) return null;
+
+  if (isLoading)
+    return (
+      <View className='mt-4'>
+        <Loader />
+      </View>
+    );
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting
+        disabled={pluginSettings?.hiddenLibraries?.locked === true}
+        className='px-4'
+      >
+        <ListGroup title={t("home.settings.other.hide_libraries")}>
+          {data?.map((view) => (
+            <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
+              <Switch
+                value={settings.hiddenLibraries?.includes(view.Id!) || false}
+                onValueChange={(value) => {
+                  updateSettings({
+                    hiddenLibraries: value
+                      ? [...(settings.hiddenLibraries || []), view.Id!]
+                      : settings.hiddenLibraries?.filter(
+                          (id) => id !== view.Id,
+                        ),
+                  });
+                }}
+              />
+            </ListItem>
+          ))}
+        </ListGroup>
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.other.select_liraries_you_want_to_hide")}
+        </Text>
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/appearance/page.tsx

@@ -0,0 +1,25 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AppearanceSettings } from "@/components/settings/AppearanceSettings";
+
+export default function AppearancePage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <AppearanceSettings />
+        <View className='h-24' />
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/audio-subtitles/page.tsx

@@ -0,0 +1,29 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AudioToggles } from "@/components/settings/AudioToggles";
+import { MediaProvider } from "@/components/settings/MediaContext";
+import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+
+export default function AudioSubtitlesPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <MediaProvider>
+          <AudioToggles className='mb-4' />
+          <SubtitleToggles className='mb-4' />
+        </MediaProvider>
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/intro/page.tsx

@@ -0,0 +1,45 @@
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { storage } from "@/utils/mmkv";
+
+export default function IntroPage() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <ListGroup title={t("home.settings.intro.title")}>
+          <ListItem
+            onPress={() => {
+              router.push("/intro/page");
+            }}
+            title={t("home.settings.intro.show_intro")}
+          />
+          <ListItem
+            textColor='red'
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={t("home.settings.intro.reset_intro")}
+          />
+        </ListGroup>
+        <View className='h-24' />
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx

@@ -1,16 +0,0 @@
-import DisabledSetting from "@/components/settings/DisabledSetting";
-import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
-import { useSettings } from "@/utils/atoms/settings";
-
-export default function page() {
-  const { pluginSettings } = useSettings();
-
-  return (
-    <DisabledSetting
-      disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
-      className='p-4'
-    >
-      <JellyseerrSettings />
-    </DisabledSetting>
-  );
-}

app/(auth)/(tabs)/(home)/settings/logs/page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
@@ -32,6 +33,7 @@ export default function Page() {
 
   const _orderId = useId();
   const _levelsId = useId();
+  const insets = useSafeAreaInsets();
 
   const filteredLogs = useMemo(
     () =>
@@ -66,7 +68,7 @@ export default function Page() {
         loading ? (
           <Loader />
         ) : (
-          <TouchableOpacity onPress={share}>
+          <TouchableOpacity onPress={share} className='px-2'>
             <Text>{t("home.settings.logs.export_logs")}</Text>
           </TouchableOpacity>
         ),
@@ -74,7 +76,12 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <>
+    <View
+      className='flex-1'
+      style={{
+        paddingTop: insets.top + 48,
+      }}
+    >
       <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
         <FilterButton
           id={orderFilterId}
@@ -156,6 +163,6 @@ export default function Page() {
           )}
         </View>
       </ScrollView>
-    </>
+    </View>
   );
 }

app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx

@@ -1,122 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Linking,
-  Switch,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
-import { ListGroup } from "@/components/list/ListGroup";
-import { ListItem } from "@/components/list/ListItem";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-import { useSettings } from "@/utils/atoms/settings";
-
-export default function page() {
-  const navigation = useNavigation();
-
-  const { t } = useTranslation();
-
-  const { settings, updateSettings, pluginSettings } = useSettings();
-  const queryClient = useQueryClient();
-
-  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
-
-  const onSave = (val: string) => {
-    updateSettings({
-      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
-    });
-    toast.success(t("home.settings.plugins.marlin_search.toasts.saved"));
-  };
-
-  const handleOpenLink = () => {
-    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
-  };
-
-  const disabled = useMemo(() => {
-    return (
-      pluginSettings?.searchEngine?.locked === true &&
-      pluginSettings?.marlinServerUrl?.locked === true
-    );
-  }, [pluginSettings]);
-
-  useEffect(() => {
-    if (!pluginSettings?.marlinServerUrl?.locked) {
-      navigation.setOptions({
-        headerRight: () => (
-          <TouchableOpacity onPress={() => onSave(value)}>
-            <Text className='text-blue-500'>
-              {t("home.settings.plugins.marlin_search.save_button")}
-            </Text>
-          </TouchableOpacity>
-        ),
-      });
-    }
-  }, [navigation, value]);
-
-  if (!settings) return null;
-
-  return (
-    <DisabledSetting disabled={disabled} className='px-4'>
-      <ListGroup>
-        <DisabledSetting
-          disabled={pluginSettings?.searchEngine?.locked === true}
-          showText={!pluginSettings?.marlinServerUrl?.locked}
-        >
-          <ListItem
-            title={t(
-              "home.settings.plugins.marlin_search.enable_marlin_search",
-            )}
-            onPress={() => {
-              updateSettings({ searchEngine: "Jellyfin" });
-              queryClient.invalidateQueries({ queryKey: ["search"] });
-            }}
-          >
-            <Switch
-              value={settings.searchEngine === "Marlin"}
-              onValueChange={(value) => {
-                updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
-                queryClient.invalidateQueries({ queryKey: ["search"] });
-              }}
-            />
-          </ListItem>
-        </DisabledSetting>
-      </ListGroup>
-
-      <DisabledSetting
-        disabled={pluginSettings?.marlinServerUrl?.locked === true}
-        showText={!pluginSettings?.searchEngine?.locked}
-        className='mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'
-      >
-        <View className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}>
-          <Text className='mr-4'>
-            {t("home.settings.plugins.marlin_search.url")}
-          </Text>
-          <TextInput
-            editable={settings.searchEngine === "Marlin"}
-            className='text-white'
-            placeholder={t(
-              "home.settings.plugins.marlin_search.server_url_placeholder",
-            )}
-            value={value}
-            keyboardType='url'
-            returnKeyType='done'
-            autoCapitalize='none'
-            textContentType='URL'
-            onChangeText={(text) => setValue(text)}
-          />
-        </View>
-      </DisabledSetting>
-      <Text className='px-4 text-xs text-neutral-500 mt-1'>
-        {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
-        <Text className='text-blue-500' onPress={handleOpenLink}>
-          {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
-        </Text>
-      </Text>
-    </DisabledSetting>
-  );
-}

app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx

@@ -0,0 +1,35 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { GestureControls } from "@/components/settings/GestureControls";
+import { MediaProvider } from "@/components/settings/MediaContext";
+import { MediaToggles } from "@/components/settings/MediaToggles";
+import { PlaybackControlsSettings } from "@/components/settings/PlaybackControlsSettings";
+import { ChromecastSettings } from "../../../../../../components/settings/ChromecastSettings";
+
+export default function PlaybackControlsPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <View className='mb-4'>
+          <MediaProvider>
+            <MediaToggles className='mb-4' />
+            <GestureControls className='mb-4' />
+            <PlaybackControlsSettings />
+          </MediaProvider>
+        </View>
+        {!Platform.isTV && <ChromecastSettings />}
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/plugins/jellyseerr/page.tsx

@@ -0,0 +1,27 @@
+import { ScrollView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const { pluginSettings } = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting
+        disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+        className='px-4'
+      >
+        <JellyseerrSettings />
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx

@@ -0,0 +1,138 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Linking,
+  ScrollView,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const { t } = useTranslation();
+
+  const insets = useSafeAreaInsets();
+
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const queryClient = useQueryClient();
+
+  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
+
+  const onSave = (val: string) => {
+    updateSettings({
+      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
+    });
+    toast.success(t("home.settings.plugins.marlin_search.toasts.saved"));
+  };
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
+  };
+
+  const disabled = useMemo(() => {
+    return (
+      pluginSettings?.searchEngine?.locked === true &&
+      pluginSettings?.marlinServerUrl?.locked === true
+    );
+  }, [pluginSettings]);
+
+  useEffect(() => {
+    if (!pluginSettings?.marlinServerUrl?.locked) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity onPress={() => onSave(value)} className='px-2'>
+            <Text className='text-blue-500'>
+              {t("home.settings.plugins.marlin_search.save_button")}
+            </Text>
+          </TouchableOpacity>
+        ),
+      });
+    }
+  }, [navigation, value]);
+
+  if (!settings) return null;
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <DisabledSetting disabled={disabled} className='px-4'>
+        <ListGroup>
+          <DisabledSetting
+            disabled={pluginSettings?.searchEngine?.locked === true}
+            showText={!pluginSettings?.marlinServerUrl?.locked}
+          >
+            <ListItem
+              title={t(
+                "home.settings.plugins.marlin_search.enable_marlin_search",
+              )}
+              onPress={() => {
+                updateSettings({ searchEngine: "Jellyfin" });
+                queryClient.invalidateQueries({ queryKey: ["search"] });
+              }}
+            >
+              <Switch
+                value={settings.searchEngine === "Marlin"}
+                onValueChange={(value) => {
+                  updateSettings({
+                    searchEngine: value ? "Marlin" : "Jellyfin",
+                  });
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              />
+            </ListItem>
+          </DisabledSetting>
+        </ListGroup>
+
+        <DisabledSetting
+          disabled={pluginSettings?.marlinServerUrl?.locked === true}
+          showText={!pluginSettings?.searchEngine?.locked}
+          className='mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'
+        >
+          <View
+            className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}
+          >
+            <Text className='mr-4'>
+              {t("home.settings.plugins.marlin_search.url")}
+            </Text>
+            <TextInput
+              editable={settings.searchEngine === "Marlin"}
+              className='text-white'
+              placeholder={t(
+                "home.settings.plugins.marlin_search.server_url_placeholder",
+              )}
+              value={value}
+              keyboardType='url'
+              returnKeyType='done'
+              autoCapitalize='none'
+              textContentType='URL'
+              onChangeText={(text) => setValue(text)}
+            />
+          </View>
+        </DisabledSetting>
+        <Text className='px-4 text-xs text-neutral-500 mt-1'>
+          {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
+          <Text className='text-blue-500' onPress={handleOpenLink}>
+            {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
+          </Text>
+        </Text>
+      </DisabledSetting>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/plugins/page.tsx

@@ -0,0 +1,24 @@
+import { Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PluginSettings } from "@/components/settings/PluginSettings";
+
+export default function PluginsPage() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='px-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <PluginSettings />
+      </View>
+    </ScrollView>
+  );
+}

components/settings/AppLanguageSelector.tsx

@@ -1,3 +1,4 @@
+import Ionicons from "@expo/vector-icons/Ionicons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
@@ -50,12 +51,17 @@ export const AppLanguageSelector: React.FC<Props> = () => {
           <PlatformDropdown
             groups={optionGroups}
             trigger={
-              <View className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-2'>
                   {APP_LANGUAGES.find(
                     (l) => l.value === settings?.preferedLanguage,
                   )?.label || t("home.settings.languages.system")}
                 </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
               </View>
             }
             title={t("home.settings.languages.title")}

components/settings/AppearanceSettings.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from "expo-router";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Linking, Switch } from "react-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const AppearanceSettings: React.FC = () => {
+  const router = useRouter();
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const disabled = useMemo(
+    () =>
+      pluginSettings?.showCustomMenuLinks?.locked === true &&
+      pluginSettings?.hiddenLibraries?.locked === true,
+    [pluginSettings],
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={disabled}>
+      <ListGroup title={t("home.settings.appearance.title")} className=''>
+        <ListItem
+          title={t("home.settings.other.show_custom_menu_links")}
+          disabled={pluginSettings?.showCustomMenuLinks?.locked}
+          onPress={() =>
+            Linking.openURL(
+              "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links",
+            )
+          }
+        >
+          <Switch
+            value={settings.showCustomMenuLinks}
+            disabled={pluginSettings?.showCustomMenuLinks?.locked}
+            onValueChange={(value) =>
+              updateSettings({ showCustomMenuLinks: value })
+            }
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.other.show_large_home_carousel")}>
+          <Switch
+            value={settings.showLargeHomeCarousel}
+            onValueChange={(value) =>
+              updateSettings({ showLargeHomeCarousel: value })
+            }
+          />
+        </ListItem>
+        <ListItem
+          onPress={() =>
+            router.push("/settings/appearance/hide-libraries/page")
+          }
+          title={t("home.settings.other.hide_libraries")}
+          showArrow
+        />
+      </ListGroup>
+    </DisabledSetting>
+  );
+};

components/settings/AudioToggles.tsx

@@ -83,7 +83,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={optionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultAudioLanguage?.DisplayName ||
                     t("home.settings.audio.none")}

components/settings/OtherSettings.tsx

@@ -109,7 +109,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={orientationOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     orientationTranslations[
@@ -152,7 +152,7 @@ export const OtherSettings: React.FC = () => {
               keyExtractor={String}
               titleExtractor={(item) => t(`home.settings.other.video_players.${VideoPlayer[item]}`)}
               title={
-                <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
+                <TouchableOpacity className="flex flex-row items-center justify-between py-1.5 pl-3">
                   <Text className="mr-1 text-[#8E8D91]">
                     {t(`home.settings.other.video_players.${VideoPlayer[settings.defaultPlayer]}`)}
                   </Text>
@@ -208,7 +208,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={bitrateOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings.defaultBitrate?.key}
                 </Text>
@@ -238,7 +238,7 @@ export const OtherSettings: React.FC = () => {
           <PlatformDropdown
             groups={autoPlayEpisodeOptions}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(settings?.maxAutoPlayEpisodeCount.key)}
                 </Text>

components/settings/PlaybackControlsSettings.tsx

@@ -0,0 +1,211 @@
+import { Ionicons } from "@expo/vector-icons";
+import { TFunction } from "i18next";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Switch, View } from "react-native";
+import { BITRATES } from "@/components/BitrateSelector";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
+import { Text } from "../common/Text";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const PlaybackControlsSettings: React.FC = () => {
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+
+  const disabled = useMemo(
+    () =>
+      pluginSettings?.defaultVideoOrientation?.locked === true &&
+      pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
+      pluginSettings?.disableHapticFeedback?.locked === true,
+    [pluginSettings],
+  );
+
+  const orientations = [
+    ScreenOrientation.OrientationLock.DEFAULT,
+    ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+  ];
+
+  const orientationTranslations = useMemo(
+    () => ({
+      [ScreenOrientation.OrientationLock.DEFAULT]:
+        "home.settings.other.orientations.DEFAULT",
+      [ScreenOrientation.OrientationLock.PORTRAIT_UP]:
+        "home.settings.other.orientations.PORTRAIT_UP",
+      [ScreenOrientation.OrientationLock.LANDSCAPE_LEFT]:
+        "home.settings.other.orientations.LANDSCAPE_LEFT",
+      [ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT]:
+        "home.settings.other.orientations.LANDSCAPE_RIGHT",
+    }),
+    [],
+  );
+
+  const orientationOptions = useMemo(
+    () => [
+      {
+        options: orientations.map((orientation) => ({
+          type: "radio" as const,
+          label: t(ScreenOrientationEnum[orientation]),
+          value: String(orientation),
+          selected: orientation === settings?.defaultVideoOrientation,
+          onPress: () =>
+            updateSettings({ defaultVideoOrientation: orientation }),
+        })),
+      },
+    ],
+    [orientations, settings?.defaultVideoOrientation, t, updateSettings],
+  );
+
+  const bitrateOptions = useMemo(
+    () => [
+      {
+        options: BITRATES.map((bitrate) => ({
+          type: "radio" as const,
+          label: bitrate.key,
+          value: bitrate.key,
+          selected: bitrate.key === settings?.defaultBitrate?.key,
+          onPress: () => updateSettings({ defaultBitrate: bitrate }),
+        })),
+      },
+    ],
+    [settings?.defaultBitrate?.key, updateSettings],
+  );
+
+  const autoPlayEpisodeOptions = useMemo(
+    () => [
+      {
+        options: AUTOPLAY_EPISODES_COUNT(t).map((item) => ({
+          type: "radio" as const,
+          label: item.key,
+          value: item.key,
+          selected: item.key === settings?.maxAutoPlayEpisodeCount?.key,
+          onPress: () => updateSettings({ maxAutoPlayEpisodeCount: item }),
+        })),
+      },
+    ],
+    [settings?.maxAutoPlayEpisodeCount?.key, t, updateSettings],
+  );
+
+  if (!settings) return null;
+
+  return (
+    <DisabledSetting disabled={disabled}>
+      <ListGroup title={t("home.settings.other.other_title")} className=''>
+        <ListItem
+          title={t("home.settings.other.video_orientation")}
+          disabled={pluginSettings?.defaultVideoOrientation?.locked}
+        >
+          <PlatformDropdown
+            groups={orientationOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    orientationTranslations[
+                      settings.defaultVideoOrientation as keyof typeof orientationTranslations
+                    ],
+                  ) || "Unknown Orientation"}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.orientation")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.safe_area_in_controls")}
+          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+        >
+          <Switch
+            value={settings.safeAreaInControlsEnabled}
+            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
+            onValueChange={(value) =>
+              updateSettings({ safeAreaInControlsEnabled: value })
+            }
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.default_quality")}
+          disabled={pluginSettings?.defaultBitrate?.locked}
+        >
+          <PlatformDropdown
+            groups={bitrateOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between pl-3 py-1.5 '>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {settings.defaultBitrate?.key}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.default_quality")}
+          />
+        </ListItem>
+
+        <ListItem
+          title={t("home.settings.other.disable_haptic_feedback")}
+          disabled={pluginSettings?.disableHapticFeedback?.locked}
+        >
+          <Switch
+            value={settings.disableHapticFeedback}
+            disabled={pluginSettings?.disableHapticFeedback?.locked}
+            onValueChange={(disableHapticFeedback) =>
+              updateSettings({ disableHapticFeedback })
+            }
+          />
+        </ListItem>
+
+        <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
+          <PlatformDropdown
+            groups={autoPlayEpisodeOptions}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(settings?.maxAutoPlayEpisodeCount.key)}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.other.max_auto_play_episode_count")}
+          />
+        </ListItem>
+      </ListGroup>
+    </DisabledSetting>
+  );
+};
+
+const AUTOPLAY_EPISODES_COUNT = (
+  t: TFunction<"translation", undefined>,
+): {
+  key: string;
+  value: number;
+}[] => [
+  { key: t("home.settings.other.disabled"), value: -1 },
+  { key: "1", value: 1 },
+  { key: "2", value: 2 },
+  { key: "3", value: 3 },
+  { key: "4", value: 4 },
+  { key: "5", value: 5 },
+  { key: "6", value: 6 },
+  { key: "7", value: 7 },
+];

components/settings/PluginSettings.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -13,23 +12,22 @@ export const PluginSettings = () => {
   const { t } = useTranslation();
 
   if (!settings) return null;
+
   return (
-    <View className='mt-4'>
-      <ListGroup
-        title={t("home.settings.plugins.plugins_title")}
-        className='mb-4'
-      >
-        <ListItem
-          onPress={() => router.push("/settings/jellyseerr/page")}
-          title={"Jellyseerr"}
-          showArrow
-        />
-        <ListItem
-          onPress={() => router.push("/settings/marlin-search/page")}
-          title='Marlin Search'
-          showArrow
-        />
-      </ListGroup>
-    </View>
+    <ListGroup
+      title={t("home.settings.plugins.plugins_title")}
+      className='mb-4'
+    >
+      <ListItem
+        onPress={() => router.push("/settings/plugins/jellyseerr/page")}
+        title={"Jellyseerr"}
+        showArrow
+      />
+      <ListItem
+        onPress={() => router.push("/settings/plugins/marlin-search/page")}
+        title='Marlin Search'
+        showArrow
+      />
+    </ListGroup>
   );
 };

components/settings/SubtitleToggles.tsx

@@ -187,7 +187,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={subtitleLanguageOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {settings?.defaultSubtitleLanguage?.DisplayName ||
                     t("home.settings.subtitles.none")}
@@ -210,7 +210,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={subtitleModeOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(subtitleModeKeys[settings?.subtitleMode]) ||
                     t("home.settings.subtitles.loading")}
@@ -256,7 +256,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={textColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcTextColor || "White"}`,
@@ -276,7 +276,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={backgroundColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcBackgroundColor || "Black"}`,
@@ -296,7 +296,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineColorOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.colors.${settings?.vlcOutlineColor || "Black"}`,
@@ -316,7 +316,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineThicknessOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>
                   {t(
                     `home.settings.subtitles.thickness.${settings?.vlcOutlineThickness || "Normal"}`,
@@ -336,7 +336,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={backgroundOpacityOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcBackgroundOpacity ?? 128) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'
@@ -352,7 +352,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
           <PlatformDropdown
             groups={outlineOpacityOptionGroups}
             trigger={
-              <View className='flex flex-row items-center justify-between py-3 pl-3'>
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
                 <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcOutlineOpacity ?? 255) / 255) * 100)}%`}</Text>
                 <Ionicons
                   name='chevron-expand-sharp'

translations/en.json

@@ -69,6 +69,18 @@
     "settings": {
       "settings_title": "Settings",
       "log_out_button": "Log Out",
+      "categories": {
+        "title": "Categories"
+      },
+      "playback_controls": {
+        "title": "Playback & Controls"
+      },
+      "audio_subtitles": {
+        "title": "Audio & Subtitles"
+      },
+      "appearance": {
+        "title": "Appearance"
+      },
       "user_info": {
         "user_info_title": "User Info",
         "user": "User",
@@ -236,6 +248,7 @@
         "delete_all_downloaded_files": "Delete All Downloaded Files"
       },
       "intro": {
+        "title": "Intro",
         "show_intro": "Show Intro",
         "reset_intro": "Reset Intro"
       },