feat: filters with bottom sheet

app/(auth)/(tabs)/library/collections/[collectionId].tsx

@@ -2,14 +2,15 @@ import { ColumnItem } from "@/components/common/ColumnItem";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { SortButton } from "@/components/filters/SortButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
   sortByAtom,
+  sortOptions,
   sortOrderAtom,
+  sortOrderOptions,
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
@@ -35,8 +36,8 @@ const page: React.FC = () => {
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [sortBy] = useAtom(sortByAtom);
-  const [sortOrder] = useAtom(sortOrderAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
   const { data: collection } = useQuery({
     queryKey: ["collection", collectionId],
@@ -85,8 +86,8 @@ const page: React.FC = () => {
         parentId: collectionId,
         limit: 50,
         startIndex: pageParam,
-        sortBy: [sortBy.key, "SortName", "ProductionYear"],
-        sortOrder: [sortOrder.key],
+        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
+        sortOrder: [sortOrder[0].key],
         includeItemTypes,
         enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
         recursive: true,
@@ -112,17 +113,7 @@ const page: React.FC = () => {
     ]
   );
 
-  const {
-    status,
-    data,
-    error,
-    isFetching,
-    isFetchingNextPage,
-    isFetchingPreviousPage,
-    fetchNextPage,
-    fetchPreviousPage,
-    hasPreviousPage,
-  } = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
     queryKey: [
       "library-items",
       collection,
@@ -205,6 +196,10 @@ const page: React.FC = () => {
                   set={setSelectedGenres}
                   values={selectedGenres}
                   title="Genres"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
                 />
                 <FilterButton
                   collectionId={collectionId}
@@ -223,6 +218,10 @@ const page: React.FC = () => {
                   set={setSelectedTags}
                   values={selectedTags}
                   title="Tags"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
                 />
                 <FilterButton
                   collectionId={collectionId}
@@ -245,8 +244,43 @@ const page: React.FC = () => {
                   set={setSelectedYears}
                   values={selectedYears}
                   title="Years"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+                <FilterButton
+                  collectionId={collectionId}
+                  queryKey="sortByFilter"
+                  queryFn={async () => {
+                    return sortOptions;
+                  }}
+                  set={setSortBy}
+                  values={sortBy}
+                  title="Sort by"
+                  renderItemLabel={(item) => item.value}
+                  searchFilter={(item, search) =>
+                    item.value.toLowerCase().includes(search.toLowerCase()) ||
+                    item.value.toLowerCase().includes(search.toLowerCase())
+                  }
+                  showSearch={false}
+                />
+                <FilterButton
+                  showSearch={false}
+                  collectionId={collectionId}
+                  queryKey="orderByFilter"
+                  queryFn={async () => {
+                    return sortOrderOptions;
+                  }}
+                  set={setSortOrder}
+                  values={sortOrder}
+                  title="Order by"
+                  renderItemLabel={(item) => item.value}
+                  searchFilter={(item, search) =>
+                    item.value.toLowerCase().includes(search.toLowerCase()) ||
+                    item.value.toLowerCase().includes(search.toLowerCase())
+                  }
                 />
-                <SortButton title="Sort by" />
               </View>
             </ScrollView>
             {!type && isFetching && (

app/+not-found.tsx

@@ -8,10 +8,6 @@ import { useEffect } from "react";
 export default function NotFoundScreen() {
   const pathname = usePathname();
 
-  useEffect(() => {
-    console.log(`Navigated to ${pathname}`);
-  }, [pathname]);
-
   return (
     <>
       <Stack.Screen options={{ title: "Oops!" }} />

app/_layout.tsx

@@ -16,6 +16,7 @@ import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { useKeepAwake } from "expo-keep-awake";
 import { useSettings } from "@/utils/atoms/settings";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -79,101 +80,103 @@ function Layout() {
       <QueryClientProvider client={queryClientRef.current}>
         <JobQueueProvider>
           <ActionSheetProvider>
-            <JellyfinProvider>
-              <StatusBar style="light" backgroundColor="#000" />
-              <ThemeProvider value={DarkTheme}>
-                <Stack initialRouteName="/home">
-                  <Stack.Screen
-                    name="(auth)/(tabs)"
-                    options={{
-                      headerShown: false,
-                      title: "",
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/settings"
-                    options={{
-                      headerShown: true,
-                      title: "Settings",
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/downloads"
-                    options={{
-                      headerShown: true,
-                      title: "Downloads",
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/items/[id]"
-                    options={{
-                      title: "",
-                      headerShown: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/collections/[collectionId]"
-                    options={{
-                      title: "",
-                      headerShown: true,
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/artists/page"
-                    options={{
-                      title: "",
-                      headerShown: true,
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/artists/[artistId]/page"
-                    options={{
-                      title: "",
-                      headerShown: true,
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/albums/[albumId]"
-                    options={{
-                      title: "",
-                      headerShown: true,
-                      headerStyle: { backgroundColor: "black" },
-                      headerShadowVisible: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/songs/[songId]"
-                    options={{
-                      title: "",
-                      headerShown: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="(auth)/series/[id]"
-                    options={{
-                      title: "",
-                      headerShown: false,
-                    }}
-                  />
-                  <Stack.Screen
-                    name="login"
-                    options={{ headerShown: false, title: "Login" }}
-                  />
-                  <Stack.Screen name="+not-found" />
-                </Stack>
-                <CurrentlyPlayingBar />
-              </ThemeProvider>
-            </JellyfinProvider>
+            <BottomSheetModalProvider>
+              <JellyfinProvider>
+                <StatusBar style="light" backgroundColor="#000" />
+                <ThemeProvider value={DarkTheme}>
+                  <Stack initialRouteName="/home">
+                    <Stack.Screen
+                      name="(auth)/(tabs)"
+                      options={{
+                        headerShown: false,
+                        title: "",
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/settings"
+                      options={{
+                        headerShown: true,
+                        title: "Settings",
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/downloads"
+                      options={{
+                        headerShown: true,
+                        title: "Downloads",
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/items/[id]"
+                      options={{
+                        title: "",
+                        headerShown: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/collections/[collectionId]"
+                      options={{
+                        title: "",
+                        headerShown: true,
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/artists/page"
+                      options={{
+                        title: "",
+                        headerShown: true,
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/artists/[artistId]/page"
+                      options={{
+                        title: "",
+                        headerShown: true,
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/albums/[albumId]"
+                      options={{
+                        title: "",
+                        headerShown: true,
+                        headerStyle: { backgroundColor: "black" },
+                        headerShadowVisible: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/songs/[songId]"
+                      options={{
+                        title: "",
+                        headerShown: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="(auth)/series/[id]"
+                      options={{
+                        title: "",
+                        headerShown: false,
+                      }}
+                    />
+                    <Stack.Screen
+                      name="login"
+                      options={{ headerShown: false, title: "Login" }}
+                    />
+                    <Stack.Screen name="+not-found" />
+                  </Stack>
+                  <CurrentlyPlayingBar />
+                </ThemeProvider>
+              </JellyfinProvider>
+            </BottomSheetModalProvider>
           </ActionSheetProvider>
         </JobQueueProvider>
       </QueryClientProvider>

app/login.tsx

@@ -6,7 +6,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { AxiosError } from "axios";
 import { useAtom } from "jotai";
 import React, { useMemo, useState } from "react";
-import { KeyboardAvoidingView, Platform, View } from "react-native";
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  View,
+} from "react-native";
 
 import { z } from "zod";
 
@@ -46,102 +52,134 @@ const Login: React.FC = () => {
   };
 
   const handleConnect = (url: string) => {
+    if (!url.startsWith("http")) {
+      Alert.alert("Error", "URL needs to start with http or https.");
+      return;
+    }
     setServer({ address: url.trim() });
   };
 
   if (api?.basePath) {
     return (
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
-      >
-        <View className="flex flex-col px-4 justify-center h-full gap-y-2">
-          <View>
-            <Text className="text-3xl font-bold">Streamyfin</Text>
-            <Text className="opacity-50 mb-2">Server: {api.basePath}</Text>
+      <SafeAreaView style={{ flex: 1 }}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          style={{ flex: 1, height: "100%" }}
+        >
+          <View className="flex flex-col justify-between px-4 h-full gap-y-2">
+            <View></View>
+            <View>
+              <View className="mb-4">
+                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
+                <Text className="text-neutral-500 mb-2">
+                  Server: {api.basePath}
+                </Text>
+                <Button
+                  color="black"
+                  onPress={() => {
+                    removeServer();
+                    setServerURL("");
+                  }}
+                  justify="between"
+                  iconLeft={
+                    <Ionicons
+                      name="arrow-back-outline"
+                      size={18}
+                      color={"white"}
+                    />
+                  }
+                >
+                  Change server
+                </Button>
+              </View>
+
+              <View className="flex flex-col space-y-2">
+                <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-neutral-500">
+                  Log in to any user account
+                </Text>
+                <Input
+                  placeholder="Username"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, username: text })
+                  }
+                  value={credentials.username}
+                  autoFocus
+                  secureTextEntry={false}
+                  keyboardType="default"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="username"
+                  clearButtonMode="while-editing"
+                  maxLength={500}
+                />
+
+                <Input
+                  className="mb-2"
+                  placeholder="Password"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, password: text })
+                  }
+                  value={credentials.password}
+                  secureTextEntry
+                  keyboardType="default"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="password"
+                  clearButtonMode="while-editing"
+                  maxLength={500}
+                />
+              </View>
+
+              <Text className="text-red-600 mb-2">{error}</Text>
+            </View>
+
             <Button
-              color="black"
-              onPress={() => {
-                removeServer();
-                setServerURL("");
-              }}
-              justify="between"
-              iconLeft={
-                <Ionicons name="arrow-back-outline" size={18} color={"white"} />
-              }
+              onPress={handleLogin}
+              loading={loading}
+              className="mt-auto mb-2"
             >
-              Change server
+              Log in
             </Button>
           </View>
-          <View className="flex flex-col space-y-2">
-            <Text className="text-2xl font-bold">Log in</Text>
-            <Input
-              placeholder="Username"
-              onChangeText={(text) =>
-                setCredentials({ ...credentials, username: text })
-              }
-              value={credentials.username}
-              autoFocus
-              secureTextEntry={false}
-              keyboardType="default"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="username"
-              clearButtonMode="while-editing"
-              maxLength={500}
-            />
-
-            <Input
-              className="mb-2"
-              placeholder="Password"
-              onChangeText={(text) =>
-                setCredentials({ ...credentials, password: text })
-              }
-              value={credentials.password}
-              secureTextEntry
-              keyboardType="default"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="password"
-              clearButtonMode="while-editing"
-              maxLength={500}
-            />
-          </View>
-
-          <Text className="text-red-600 mb-2">{error}</Text>
-
-          <Button onPress={handleLogin} loading={loading}>
-            Log in
-          </Button>
-        </View>
-      </KeyboardAvoidingView>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
     );
   }
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={{ flex: 1 }}
-    >
-      <View className="flex flex-col px-4 justify-center h-full">
-        <View className="flex flex-col gap-y-2">
-          <Text className="text-3xl font-bold">Streamyfin</Text>
-          <Text className="opacity-50">Enter a server adress</Text>
-          <Input
-            className="mb-2"
-            placeholder="http(s)://..."
-            onChangeText={setServerURL}
-            value={serverURL}
-            keyboardType="url"
-            returnKeyType="done"
-            autoCapitalize="none"
-            textContentType="URL"
-            maxLength={500}
-          />
-          <Button onPress={() => handleConnect(serverURL)}>Connect</Button>
+    <SafeAreaView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        <View className="flex flex-col px-4 justify-between h-full">
+          <View></View>
+          <View className="flex flex-col gap-y-2">
+            <Text className="text-3xl font-bold">Streamyfin</Text>
+            <Text className="text-neutral-500">
+              Connect to your Jellyfin server
+            </Text>
+            <Input
+              placeholder="Server URL"
+              onChangeText={setServerURL}
+              value={serverURL}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              maxLength={500}
+            />
+            <Text className="opacity-30">
+              Server URL requires http or https
+            </Text>
+          </View>
+          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
+            Connect
+          </Button>
         </View>
-      </View>
-    </KeyboardAvoidingView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 };