wip

2026-04-21 00:04:42 +01:00 · 2025-09-30 11:58:59 +02:00
parent 47c52e0739
commit 7a11f4a54b
17 changed files with 580 additions and 306 deletions
--- a/app/(auth)/(tabs)/(custom-links)/_layout.tsx
+++ b/app/(auth)/(tabs)/(custom-links)/_layout.tsx
@@ -9,7 +9,7 @@ export default function CustomMenuLayout() {
      <Stack.Screen
        name='index'
        options={{
-          headerShown: true,
+          headerShown: Platform.OS !== "ios",
          headerLargeTitle: true,
          headerTitle: t("tabs.custom_links"),
          headerBlurEffect: "none",
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -393,7 +393,6 @@ const page: React.FC = () => {
      data={flatData}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
-      estimatedItemSize={255}
      numColumns={
        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
      }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -22,10 +22,7 @@ import DetailFacts from "@/components/jellyseerr/DetailFacts";
 import RequestModal from "@/components/jellyseerr/RequestModal";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-import {
-  type OptionGroup,
-  PlatformOptionsMenu,
-} from "@/components/PlatformOptionsMenu";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { JellyserrRatings } from "@/components/Ratings";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
@@ -66,7 +63,6 @@ const Page: React.FC = () => {
  const [issueType, setIssueType] = useState<IssueType>();
  const [issueMessage, setIssueMessage] = useState<string>();
  const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
-  const [issueTypeMenuOpen, setIssueTypeMenuOpen] = useState(false);
  const advancedReqModalRef = useRef<BottomSheetModal>(null);
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

@@ -158,30 +154,24 @@ const Page: React.FC = () => {
    [details],
  );

-  const issueTypeOptionGroups: OptionGroup[] = useMemo(
+  const issueTypeOptionGroups = useMemo(
    () => [
      {
-        id: "issue-types",
        title: t("jellyseerr.types"),
        options: Object.entries(IssueTypeName)
          .reverse()
          .map(([key, value]) => ({
-            id: key,
            type: "radio" as const,
-            groupId: "issue-types",
            label: value,
+            value: key,
            selected: key === String(issueType),
+            onPress: () => setIssueType(key as unknown as IssueType),
          })),
      },
    ],
    [issueType, t],
  );

-  const handleIssueTypeSelect = (optionId: string) => {
-    setIssueType(optionId as unknown as IssueType);
-    setIssueTypeMenuOpen(false);
-  };
-
  useEffect(() => {
    if (details) {
      navigation.setOptions({
@@ -390,37 +380,22 @@ const Page: React.FC = () => {
                </Text>
              </View>
              <View className='flex flex-col space-y-2 items-start'>
-                <View className='flex flex-col'>
-                  <PlatformOptionsMenu
+                <View className='flex flex-col w-full'>
+                  <Text className='opacity-50 mb-1 text-xs'>
+                    {t("jellyseerr.issue_type")}
+                  </Text>
+                  <PlatformDropdown
                    groups={issueTypeOptionGroups}
                    trigger={
-                      <View className='flex flex-col'>
-                        <Text className='opacity-50 mb-1 text-xs'>
-                          {t("jellyseerr.issue_type")}
+                      <View className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : t("jellyseerr.select_an_issue")}
                        </Text>
-                        <TouchableOpacity
-                          className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
-                          onPress={() => setIssueTypeMenuOpen(true)}
-                        >
-                          <Text numberOfLines={1}>
-                            {issueType
-                              ? IssueTypeName[issueType]
-                              : t("jellyseerr.select_an_issue")}
-                          </Text>
-                        </TouchableOpacity>
                      </View>
                    }
                    title={t("jellyseerr.types")}
-                    open={issueTypeMenuOpen}
-                    onOpenChange={setIssueTypeMenuOpen}
-                    onOptionSelect={handleIssueTypeSelect}
-                    expoUIConfig={{
-                      hostStyle: { flex: 1 },
-                    }}
-                    bottomSheetConfig={{
-                      enableDynamicSizing: true,
-                      enablePanDownToClose: true,
-                    }}
                  />
                </View>

--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -1,85 +1,159 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, TouchableOpacity } from "react-native";
-import { LibraryOptionsSheet } from "@/components/settings/LibraryOptionsSheet";
+import { Platform } from "react-native";
+import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";

 export default function IndexLayout() {
  const { settings, updateSettings, pluginSettings } = useSettings();
-  const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);

  const { t } = useTranslation();

  if (!settings?.libraryOptions) return null;

  return (
-    <>
-      <Stack>
-        <Stack.Screen
-          name='index'
-          options={{
-            headerShown: !Platform.isTV,
-            headerTitle: t("tabs.library"),
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-            headerRight: () =>
-              !pluginSettings?.libraryOptions?.locked &&
-              !Platform.isTV && (
-                <TouchableOpacity
-                  onPress={() => setOptionsSheetOpen(true)}
-                  className='flex flex-row items-center justify-center w-9 h-9'
-                >
-                  <Ionicons
-                    name='ellipsis-horizontal-outline'
-                    size={24}
-                    color='white'
-                  />
-                </TouchableOpacity>
-              ),
-          }}
-        />
-        <Stack.Screen
-          name='[libraryId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-          }}
-        />
-        {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
-          <Stack.Screen key={name} name={name} options={options} />
-        ))}
-        <Stack.Screen
-          name='collections/[collectionId]'
-          options={{
-            title: "",
-            headerShown: !Platform.isTV,
-            headerBlurEffect: "none",
-            headerTransparent: true,
-            headerShadowVisible: false,
-          }}
-        />
-      </Stack>
-      <LibraryOptionsSheet
-        open={optionsSheetOpen}
-        setOpen={setOptionsSheetOpen}
-        settings={settings.libraryOptions}
-        updateSettings={(options) =>
-          updateSettings({
-            libraryOptions: {
-              ...settings.libraryOptions,
-              ...options,
-            },
-          })
-        }
-        disabled={pluginSettings?.libraryOptions?.locked}
+    <Stack>
+      <Stack.Screen
+        name='index'
+        options={{
+          headerShown: !Platform.isTV,
+          headerTitle: t("tabs.library"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerRight: () => (
+            <PlatformDropdown
+              trigger={
+                <Ionicons
+                  name='ellipsis-horizontal-outline'
+                  size={24}
+                  color='white'
+                />
+              }
+              title={t("library.options.display")}
+              groups={[
+                {
+                  title: t("library.options.display"),
+                  options: [
+                    {
+                      type: "radio",
+                      label: t("library.options.row"),
+                      value: "row",
+                      selected: settings.libraryOptions.display === "row",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            display: "row",
+                          },
+                        }),
+                    },
+                    {
+                      type: "radio",
+                      label: t("library.options.list"),
+                      value: "list",
+                      selected: settings.libraryOptions.display === "list",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            display: "list",
+                          },
+                        }),
+                    },
+                  ],
+                },
+                {
+                  title: t("library.options.image_style"),
+                  options: [
+                    {
+                      type: "radio",
+                      label: t("library.options.poster"),
+                      value: "poster",
+                      selected: settings.libraryOptions.imageStyle === "poster",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            imageStyle: "poster",
+                          },
+                        }),
+                    },
+                    {
+                      type: "radio",
+                      label: t("library.options.cover"),
+                      value: "cover",
+                      selected: settings.libraryOptions.imageStyle === "cover",
+                      onPress: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            imageStyle: "cover",
+                          },
+                        }),
+                    },
+                  ],
+                },
+                {
+                  title: "Options",
+                  options: [
+                    {
+                      type: "toggle",
+                      label: t("library.options.show_titles"),
+                      value: settings.libraryOptions.showTitles,
+                      onToggle: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            showTitles: !settings.libraryOptions.showTitles,
+                          },
+                        }),
+                      disabled: settings.libraryOptions.imageStyle === "poster",
+                    },
+                    {
+                      type: "toggle",
+                      label: t("library.options.show_stats"),
+                      value: settings.libraryOptions.showStats,
+                      onToggle: () =>
+                        updateSettings({
+                          libraryOptions: {
+                            ...settings.libraryOptions,
+                            showStats: !settings.libraryOptions.showStats,
+                          },
+                        }),
+                    },
+                  ],
+                },
+              ]}
+            />
+          ),
+        }}
      />
-    </>
+      <Stack.Screen
+        name='[libraryId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+      <Stack.Screen
+        name='collections/[collectionId]'
+        options={{
+          title: "",
+          headerShown: !Platform.isTV,
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
  );
 }
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/app/(auth)/(tabs)/(libraries)/index.tsx
@@ -87,8 +87,8 @@ export default function index() {
        paddingTop: 17,
        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
        paddingBottom: 150,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
      }}
      data={libraries}
      renderItem={({ item }) => <LibraryItemCard library={item} />}