streamyfin/app/(auth)/(tabs)/(libraries)/_layout.tsx

import { Ionicons } from "@expo/vector-icons";
import { Stack } from "expo-router";
import { Platform } from "react-native";
import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
import { useSettings } from "@/utils/atoms/settings";

const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;

import { useTranslation } from "react-i18next";

export default function IndexLayout() {
  const [settings, updateSettings, pluginSettings] = useSettings();

  const { t } = useTranslation();

  if (!settings?.libraryOptions) return null;

  return (
    <Stack>
      <Stack.Screen
        name='index'
        options={{
          headerShown: true,
          headerLargeTitle: true,
          headerTitle: t("tabs.library"),
          headerBlurEffect: "prominent",
          headerLargeStyle: {
            backgroundColor: "black",
          },
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
          headerRight: () =>
            !pluginSettings?.libraryOptions?.locked &&
            !Platform.isTV && (
              <DropdownMenu.Root>
                <DropdownMenu.Trigger>
                  <Ionicons
                    name='ellipsis-horizontal-outline'
                    size={24}
                    color='white'
                  />
                </DropdownMenu.Trigger>
                <DropdownMenu.Content
                  align={"end"}
                  alignOffset={-10}
                  avoidCollisions={false}
                  collisionPadding={0}
                  loop={false}
                  side={"bottom"}
                  sideOffset={10}
                >
                  <DropdownMenu.Label>
                    {t("library.options.display")}
                  </DropdownMenu.Label>
                  <DropdownMenu.Group key='display-group'>
                    <DropdownMenu.Sub>
                      <DropdownMenu.SubTrigger key='image-style-trigger'>
                        {t("library.options.display")}
                      </DropdownMenu.SubTrigger>
                      <DropdownMenu.SubContent
                        alignOffset={-10}
                        avoidCollisions={true}
                        collisionPadding={0}
                        loop={true}
                        sideOffset={10}
                      >
                        <DropdownMenu.CheckboxItem
                          key='display-option-1'
                          value={settings.libraryOptions.display === "row"}
                          onValueChange={() =>
                            updateSettings({
                              libraryOptions: {
                                ...settings.libraryOptions,
                                display: "row",
                              },
                            })
                          }
                        >
                          <DropdownMenu.ItemIndicator />
                          <DropdownMenu.ItemTitle key='display-title-1'>
                            {t("library.options.row")}
                          </DropdownMenu.ItemTitle>
                        </DropdownMenu.CheckboxItem>
                        <DropdownMenu.CheckboxItem
                          key='display-option-2'
                          value={settings.libraryOptions.display === "list"}
                          onValueChange={() =>
                            updateSettings({
                              libraryOptions: {
                                ...settings.libraryOptions,
                                display: "list",
                              },
                            })
                          }
                        >
                          <DropdownMenu.ItemIndicator />
                          <DropdownMenu.ItemTitle key='display-title-2'>
                            {t("library.options.list")}
                          </DropdownMenu.ItemTitle>
                        </DropdownMenu.CheckboxItem>
                      </DropdownMenu.SubContent>
                    </DropdownMenu.Sub>
                    <DropdownMenu.Sub>
                      <DropdownMenu.SubTrigger key='image-style-trigger'>
                        {t("library.options.image_style")}
                      </DropdownMenu.SubTrigger>
                      <DropdownMenu.SubContent
                        alignOffset={-10}
                        avoidCollisions={true}
                        collisionPadding={0}
                        loop={true}
                        sideOffset={10}
                      >
                        <DropdownMenu.CheckboxItem
                          key='poster-option'
                          value={
                            settings.libraryOptions.imageStyle === "poster"
                          }
                          onValueChange={() =>
                            updateSettings({
                              libraryOptions: {
                                ...settings.libraryOptions,
                                imageStyle: "poster",
                              },
                            })
                          }
                        >
                          <DropdownMenu.ItemIndicator />
                          <DropdownMenu.ItemTitle key='poster-title'>
                            {t("library.options.poster")}
                          </DropdownMenu.ItemTitle>
                        </DropdownMenu.CheckboxItem>
                        <DropdownMenu.CheckboxItem
                          key='cover-option'
                          value={settings.libraryOptions.imageStyle === "cover"}
                          onValueChange={() =>
                            updateSettings({
                              libraryOptions: {
                                ...settings.libraryOptions,
                                imageStyle: "cover",
                              },
                            })
                          }
                        >
                          <DropdownMenu.ItemIndicator />
                          <DropdownMenu.ItemTitle key='cover-title'>
                            {t("library.options.cover")}
                          </DropdownMenu.ItemTitle>
                        </DropdownMenu.CheckboxItem>
                      </DropdownMenu.SubContent>
                    </DropdownMenu.Sub>
                  </DropdownMenu.Group>
                  <DropdownMenu.Group key='show-titles-group'>
                    <DropdownMenu.CheckboxItem
                      disabled={settings.libraryOptions.imageStyle === "poster"}
                      key='show-titles-option'
                      value={settings.libraryOptions.showTitles}
                      onValueChange={(newValue: string) => {
                        if (settings.libraryOptions.imageStyle === "poster")
                          return;
                        updateSettings({
                          libraryOptions: {
                            ...settings.libraryOptions,
                            showTitles: newValue === "on",
                          },
                        });
                      }}
                    >
                      <DropdownMenu.ItemIndicator />
                      <DropdownMenu.ItemTitle key='show-titles-title'>
                        {t("library.options.show_titles")}
                      </DropdownMenu.ItemTitle>
                    </DropdownMenu.CheckboxItem>
                    <DropdownMenu.CheckboxItem
                      key='show-stats-option'
                      value={settings.libraryOptions.showStats}
                      onValueChange={(newValue: string) => {
                        updateSettings({
                          libraryOptions: {
                            ...settings.libraryOptions,
                            showStats: newValue === "on",
                          },
                        });
                      }}
                    >
                      <DropdownMenu.ItemIndicator />
                      <DropdownMenu.ItemTitle key='show-stats-title'>
                        {t("library.options.show_stats")}
                      </DropdownMenu.ItemTitle>
                    </DropdownMenu.CheckboxItem>
                  </DropdownMenu.Group>

                  <DropdownMenu.Separator />
                </DropdownMenu.Content>
              </DropdownMenu.Root>
            ),
        }}
      />
      <Stack.Screen
        name='[libraryId]'
        options={{
          title: "",
          headerShown: true,
          headerBlurEffect: "prominent",
          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: true,
          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios",
          headerShadowVisible: false,
        }}
      />
    </Stack>
  );
}