first commit

components/ListItem.tsx

@@ -1,35 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { View, ViewProps } from "react-native";
-import { Text } from "./common/Text";
-
-interface Props extends ViewProps {
-  title?: string | null | undefined;
-  subTitle?: string | null | undefined;
-  children?: ReactNode;
-  iconAfter?: ReactNode;
-}
-
-export const ListItem: React.FC<PropsWithChildren<Props>> = ({
-  title,
-  subTitle,
-  iconAfter,
-  children,
-  ...props
-}) => {
-  return (
-    <View
-      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
-      {...props}
-    >
-      <View className="flex flex-col overflow-visible">
-        <Text className="font-bold ">{title}</Text>
-        {subTitle && (
-          <Text uiTextView selectable className="text-xs">
-            {subTitle}
-          </Text>
-        )}
-      </View>
-      {iconAfter}
-    </View>
-  );
-};

components/_page_template.tsx

@@ -0,0 +1,22 @@
+import { ScrollView, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { TAB_HEIGHT } from "@/constants/Values";
+
+interface Props extends ViewProps {}
+
+export default function page() {
+  const insets = useSafeAreaInsets();
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+      }}
+      style={{
+        marginBottom: TAB_HEIGHT,
+      }}
+    ></ScrollView>
+  );
+}

components/list/ListInputItem.tsx

@@ -0,0 +1,64 @@
+import { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import {
+  Pressable,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "../common/Text";
+
+interface Props extends ViewProps {
+  title?: string | null | undefined;
+  text?: string | null | undefined;
+  children?: ReactNode;
+  iconAfter?: ReactNode;
+  iconBefore?: ReactNode;
+  textInputProps?: TextInputProps;
+  defaultValue?: string;
+  onChange: (text: string) => void;
+}
+
+export const ListInputItem: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  text,
+  iconAfter,
+  iconBefore,
+  children,
+  onChange,
+  textInputProps,
+  defaultValue,
+  ...props
+}) => {
+  const [value, setValue] = useState<string>(defaultValue || "");
+
+  useEffect(() => {
+    onChange(value);
+  }, [value]);
+
+  return (
+    <View
+      className={`flex flex-row items-center justify-between px-4 h-12 bg-neutral-900`}
+      {...props}
+    >
+      {iconBefore && <View className="mr-2">{iconBefore}</View>}
+      <View>
+        <Text className="">{title}</Text>
+      </View>
+      <View className="ml-auto">
+        <TextInput
+          inputMode="numeric"
+          keyboardType="decimal-pad"
+          style={{ color: "white" }}
+          value={value}
+          onChangeText={setValue}
+          className=""
+          {...textInputProps}
+        />
+      </View>
+      {iconAfter && <View className="ml-2">{iconAfter}</View>}
+    </View>
+  );
+};

components/list/ListItem.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren, ReactNode, useState } from "react";
+import {
+  Pressable,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "../common/Text";
+
+interface Props extends TouchableOpacityProps {
+  title?: string | null | undefined;
+  text?: string | null | undefined;
+  children?: ReactNode;
+  iconAfter?: ReactNode;
+  iconBefore?: ReactNode;
+}
+
+export const ListItem: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  text,
+  iconAfter,
+  iconBefore,
+  children,
+  ...props
+}) => {
+  return (
+    <TouchableOpacity
+      className={`flex flex-row items-center justify-between px-4 h-12 bg-neutral-900`}
+      {...props}
+    >
+      {iconBefore && <View className="mr-2">{iconBefore}</View>}
+      <View>
+        <Text className="">{title}</Text>
+      </View>
+      <View className="ml-auto">
+        <Text selectable className="">
+          {text}
+        </Text>
+      </View>
+      {iconAfter && <View className="ml-2">{iconAfter}</View>}
+    </TouchableOpacity>
+  );
+};

components/list/ListSection.tsx

@@ -0,0 +1,24 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { Children, PropsWithChildren } from "react";
+
+interface Props extends ViewProps {
+  title: string;
+}
+
+export const ListSection: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  title,
+  ...props
+}) => {
+  return (
+    <View {...props}>
+      <Text className="ml-4 mb-1 text-xs text-neutral-500 uppercase">
+        {title}
+      </Text>
+      <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800">
+        {children}
+      </View>
+    </View>
+  );
+};

components/settings/SettingToggles.tsx

@@ -10,6 +10,7 @@ import {
   registerBackgroundFetchAsync,
   unregisterBackgroundFetchAsync,
 } from "@/utils/background-tasks";
+import { getStatistics } from "@/utils/optimize-server";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import * as BackgroundFetch from "expo-background-fetch";
@@ -18,7 +19,6 @@ import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import {
-  ActivityIndicator,
   Linking,
   Switch,
   TouchableOpacity,
@@ -32,8 +32,6 @@ import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { MediaToggles } from "./MediaToggles";
-import axios from "axios";
-import { getStatistics } from "@/utils/optimize-server";
 
 interface Props extends ViewProps {}