Very simple book title search (#30)

* Very simple book title search
* Update expo

bun.lock.tree

@@ -212,7 +212,7 @@
 ├── @eslint/[email protected]
 ├── @eslint/[email protected]
 ├── @expo/[email protected]
-├── @expo/[email protected].6
+├── @expo/[email protected].7
 │   ├── [email protected]
 │   │   └── [email protected]
 │   │       └── [email protected]
@@ -849,7 +849,7 @@
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
-├── [email protected].19
+├── [email protected].21
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
@@ -865,7 +865,7 @@
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
-├── [email protected].1
+├── [email protected].2
 ├── [email protected]
 ├── [email protected]
 ├── [email protected]
@@ -878,7 +878,7 @@
 │       ├── [email protected]
 │       └── [email protected]
 ├── [email protected]
-├── [email protected].13
+├── [email protected].14
 │   └── [email protected]
 ├── [email protected]
 ├── [email protected]

package.json

@@ -17,7 +17,7 @@
     "codegen": "bunx graphql-codegen --config codegen.ts",
     "codegen-watch": "bunx graphql-codegen --config codegen.ts --watch",
     "generate-migrations": "bunx drizzle-kit generate",
-    "update-bun-lock-tree": "bun pm ls --all | sed 's/\\x1B\\[[0-9;]\\{1,\\}[A-Za-z]//g' > bun.lock.tree"
+    "update-bun-lock-tree": "bun pm ls --all | tail -n +2 | sed 's/\\x1B\\[[0-9;]\\{1,\\}[A-Za-z]//g' > bun.lock.tree"
   },
   "expo": {
     "install": {
@@ -47,7 +47,7 @@
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
     "drizzle-orm": "^0.38.0",
-    "expo": "~52.0.19",
+    "expo": "~52.0.20",
     "expo-blur": "~14.0.1",
     "expo-build-properties": "~0.13.1",
     "expo-constants": "~17.0.3",
@@ -57,7 +57,7 @@
     "expo-haptics": "~14.0.0",
     "expo-image": "~2.0.3",
     "expo-linking": "~7.0.3",
-    "expo-router": "~4.0.13",
+    "expo-router": "~4.0.14",
     "expo-secure-store": "~14.0.0",
     "expo-splash-screen": "~0.29.18",
     "expo-sqlite": "~15.0.3",

src/components/LibraryScreen/LibraryFlatList.tsx

@@ -1,16 +1,47 @@
 import { Loading, MediaTile, ScreenCentered } from "@/src/components";
-import { useMediaList } from "@/src/db/library";
+import { useMediaByBookTitleSearch, useMediaList } from "@/src/db/library";
 import { useLastDownSync } from "@/src/db/sync";
 import { Session } from "@/src/stores/session";
 import { Colors } from "@/src/styles";
+import { useNavigation } from "expo-router";
+import { useLayoutEffect } from "react";
 import { StyleSheet, Text } from "react-native";
 import Animated from "react-native-reanimated";
+import { useDebounce } from "use-debounce";
 
 type LibraryFlatlistProps = {
   session: Session;
 };
 
 export default function LibraryFlatlist({ session }: LibraryFlatlistProps) {
+  const [search, setSearch] = useDebounce("", 500);
+  const navigation = useNavigation();
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerSearchBarOptions: {
+        onChangeText: (event: { nativeEvent: { text: string } }) => {
+          setSearch(event.nativeEvent.text);
+        },
+        placeholder: "Search Library",
+        hintTextColor: Colors.zinc["500"],
+        headerIconColor: Colors.white,
+      },
+    });
+  }, [navigation, setSearch]);
+
+  if (search && search.length >= 3) {
+    return <SearchResultsFlatList session={session} searchQuery={search} />;
+  } else {
+    return <FullLibraryFlatList session={session} />;
+  }
+}
+
+type FullLibraryFlatListProps = {
+  session: Session;
+};
+
+function FullLibraryFlatList({ session }: FullLibraryFlatListProps) {
   const { media, updatedAt, opacity } = useMediaList(session);
   const lastDownSync = useLastDownSync(session);
 
@@ -45,6 +76,50 @@ export default function LibraryFlatlist({ session }: LibraryFlatlistProps) {
   );
 }
 
+type SearchResultsFlatListProps = {
+  session: Session;
+  searchQuery: string;
+};
+
+function SearchResultsFlatList(props: SearchResultsFlatListProps) {
+  const { session, searchQuery } = props;
+  const { media, updatedAt, opacity } = useMediaByBookTitleSearch(
+    session,
+    searchQuery,
+  );
+  const lastDownSync = useLastDownSync(session);
+
+  if (!lastDownSync || !updatedAt) {
+    return (
+      <ScreenCentered>
+        <Loading />
+      </ScreenCentered>
+    );
+  }
+
+  if (updatedAt && lastDownSync && media.length === 0) {
+    return (
+      <ScreenCentered>
+        <Text style={styles.text}>
+          Your library is empty. Log into the server on the web and add some
+          audiobooks to get started!
+        </Text>
+      </ScreenCentered>
+    );
+  }
+
+  return (
+    <Animated.FlatList
+      contentInsetAdjustmentBehavior="automatic"
+      style={[styles.flatlist, { opacity }]}
+      data={media}
+      keyExtractor={(item) => item.id}
+      numColumns={2}
+      renderItem={({ item }) => <MediaTile style={styles.tile} media={item} />}
+    />
+  );
+}
+
 const styles = StyleSheet.create({
   text: {
     color: Colors.zinc[100],

src/db/library.ts

@@ -11,6 +11,7 @@ import {
   eq,
   inArray,
   isNull,
+  like,
   ne,
   notInArray,
   or,
@@ -116,6 +117,31 @@ export function useMediaListByIds(session: Session, mediaIds: string[]) {
   return { media: data, ...rest };
 }
 
+export function useMediaByBookTitleSearch(
+  session: Session,
+  queryString: string,
+) {
+  const mediaIdsQuery = db
+    .select({ id: schema.media.id })
+    .from(schema.books)
+    .innerJoin(schema.media, eq(schema.media.bookId, schema.books.id))
+    .where(
+      and(
+        eq(schema.books.url, session.url),
+        like(schema.books.title, `%${queryString}%`),
+      ),
+    );
+
+  const { data: mediaIds } = useSyncedDataQuery(session, mediaIdsQuery, [
+    queryString,
+  ]);
+
+  return useMediaListByIds(
+    session,
+    mediaIds.map((x) => x.id),
+  );
+}
+
 export function useMediaDetails(session: Session, mediaId: string) {
   const query = db.query.media.findFirst({
     columns: {