✨ (expo): Basic mobile file browser (#758)

* small stylistic changes

* try fix prisma dates

* add glitchtip for crash reports, fix bad suspense in flashlist header

* fix colors for progress in reading now

* improve android dark search colors

* wip: file browsing

* fix route stack issues for files

* icons and tweaks

* OPDS tweaks

* add root attribution

* add click route for books in files

* make home header big for iOS

Author: aaronleopold

README.md

@@ -41,6 +41,7 @@ Stump is a free and open source comics, manga and digital book server with OPDS
   - [Packages](#packages)
 - [Similar Projects 👯](#similar-projects-)
 - [License 📝](#license-)
+- [Attribution](#attribution)
 </details>
 
 > **🚧 Disclaimer 🚧**: Stump is under active development and is an ongoing **WIP**. Anyone is welcome to try it out, but **DO NOT** expect a fully featured or bug-free experience. If you'd like to contribute and help expedite feature development, please review the [developer guide](#developer-guide-).
@@ -201,3 +202,8 @@ There are a number of other projects that are similar to Stump, it certainly isn
 ## License 📝
 
 Stump is broken up into a number of different packages and applications. Some of these have their own licenses. For example, the `expo` app is licensed under [GPL-3.0](https://www.gnu.org/licenses/gpl-3.0.html). If a package has its own license, it will be noted in the package's README or LICENSE file. In such cases, the license file(s) in the subfolder/package take precedence. If such a license or disclaimer is not present, it is safe to assume that the code is licensed under the [MIT License](https://www.tldrlegal.com/license/mit-license).
+
+## Attribution
+
+- Some of the icons used in the web and mobile applications are from the [Spacedrive](https://github.com/spacedriveapp/spacedrive/tree/main/packages/assets/icons) repository, and are licensed under the [AGPL-3.0](<https://www.tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)>) license.
+- The `job` crate could not be possible without the work of other open source projects which had a significant influence on the design and implementation. See the [corresponding section](core/README.md#license-) in the `core` crate for more information.

apps/expo/app.config.ts

@@ -108,6 +108,14 @@ export default ({ config }: ConfigContext): ExpoConfig => {
 			// 		createDensityFolders: false,
 			// 	},
 			// ],
+			[
+				'@sentry/react-native/expo',
+				{
+					url: 'https://app.glitchtip.com/',
+					project: 'stump-expo',
+					organization: 'stumpapp',
+				},
+			],
 		],
 		owner: 'stumpapp',
 		experiments: {

apps/expo/app/opds/[id]/index.tsx

@@ -95,11 +95,7 @@ export default function Screen() {
 				refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
 				contentInsetAdjustmentBehavior="automatic"
 			>
-				<View className="flex-1 gap-6 tablet:gap-8">
-					<Heading size="lg" className="mt-6">
-						{activeServer?.name || 'OPDS Feed'}
-					</Heading>
-
+				<View className="mt-6 flex-1 gap-6 tablet:gap-8">
 					<OPDSNavigation navigation={feed.navigation} renderEmpty />
 
 					{navGroups.map((group) => (

apps/expo/app/server/[id]/(tabs)/_layout.tsx

@@ -1,22 +1,19 @@
 import { useAuthQuery, useClientContext, useSDK } from '@stump/client'
 import { isAxiosError } from 'axios'
-import { Tabs, useRouter } from 'expo-router'
+import { Tabs } from 'expo-router'
 import { useEffect } from 'react'
-import { View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
 
 import { icons } from '~/components/ui'
 import { useColors } from '~/lib/constants'
 import { cn } from '~/lib/utils'
 import { usePreferencesStore, useUserStore } from '~/stores'
 
-const { Unplug, Home, SquareLibrary, Search } = icons
+const { Home, SquareLibrary, Search } = icons
 
 export default function TabLayout() {
 	const { sdk } = useSDK()
 
 	const colors = useColors()
-	const router = useRouter()
 	const animationEnabled = usePreferencesStore((state) => !state.reduceAnimations)
 	const setUser = useUserStore((state) => state.setUser)
 
@@ -55,20 +52,7 @@ export default function TabLayout() {
 					tabBarIcon: ({ focused }) => (
 						<Home className={cn('h-6 w-6 text-foreground-muted', { 'text-foreground': focused })} />
 					),
-					headerLeft: () => (
-						<Pressable onPress={() => router.dismissAll()}>
-							{({ pressed }) => (
-								<View
-									className={cn(
-										'aspect-square flex-1 items-start justify-center px-2',
-										pressed && 'opacity-70',
-									)}
-								>
-									<Unplug size={20} className="text-foreground-muted" />
-								</View>
-							)}
-						</Pressable>
-					),
+					headerShown: false,
 				}}
 			/>
 

apps/expo/app/server/[id]/(tabs)/browse/_layout.tsx

@@ -12,6 +12,9 @@ export default function Layout() {
 					headerTransparent: Platform.OS === 'ios',
 					headerBlurEffect: 'regular',
 					headerLargeTitle: true,
+					headerLargeTitleStyle: {
+						fontSize: 30,
+					},
 				}}
 			/>
 		</Stack>

apps/expo/app/server/[id]/(tabs)/index/_layout.tsx

@@ -0,0 +1,47 @@
+import { Stack, useRouter } from 'expo-router'
+import { Unplug } from 'lucide-react-native'
+import { Platform, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
+
+import { Icon } from '~/components/ui/icon'
+import { cn } from '~/lib/utils'
+import { usePreferencesStore } from '~/stores'
+
+export default function Layout() {
+	const animationEnabled = usePreferencesStore((state) => !state.reduceAnimations)
+
+	const router = useRouter()
+
+	return (
+		<Stack screenOptions={{ headerShown: false }}>
+			<Stack.Screen
+				name="index"
+				options={{
+					headerShown: true,
+					headerTitle: 'Home',
+					headerTransparent: Platform.OS === 'ios',
+					headerLargeTitleStyle: {
+						fontSize: 30,
+					},
+					headerLargeTitle: true,
+					headerBlurEffect: 'regular',
+					animation: animationEnabled ? 'default' : 'none',
+					headerLeft: () => (
+						<Pressable onPress={() => router.dismissAll()}>
+							{({ pressed }) => (
+								<View
+									className={cn('aspect-square flex-1 items-start justify-center', {
+										'mr-4': Platform.OS === 'android',
+									})}
+									style={{ opacity: pressed ? 0.6 : 1 }}
+								>
+									<Icon as={Unplug} size={20} className="text-foreground-muted" />
+								</View>
+							)}
+						</Pressable>
+					),
+				}}
+			/>
+		</Stack>
+	)
+}

apps/expo/app/server/[id]/(tabs)/index.tsx renamed to apps/expo/app/server/[id]/(tabs)/index/index.tsx

@@ -13,9 +13,14 @@ export default function Screen() {
 	const client = useQueryClient()
 	const onRefresh = useCallback(async () => {
 		setRefreshing(true)
-		await client.invalidateQueries({ queryKey: ['continueReading'], exact: false })
+		await Promise.all([
+			client.invalidateQueries({ queryKey: ['continueReading'], exact: false }),
+			client.invalidateQueries({ queryKey: ['onDeck'], exact: false }),
+			client.invalidateQueries({ queryKey: ['recentlyAddedBooks'], exact: false }),
+			client.invalidateQueries({ queryKey: ['recentlyAddedSeries'], exact: false }),
+		])
 		setRefreshing(false)
-	}, [])
+	}, [client])
 
 	return (
 		<ScrollView

apps/expo/app/server/[id]/(tabs)/search/index.tsx

@@ -9,6 +9,7 @@ import { NativeSyntheticEvent } from 'react-native'
 
 import { useActiveServer } from '~/components/activeServer'
 import { Text } from '~/components/ui'
+import { useColors } from '~/lib/constants'
 
 import { prefetchBookSearch } from '../../books/search[q]'
 
@@ -36,6 +37,7 @@ export default function Screen() {
 		[sdk, client],
 	)
 	const setQuery = debounce(onSearchChange, 200)
+	const colors = useColors()
 
 	const onSearch = useCallback(() => {
 		if (!searchQuery) return
@@ -60,9 +62,13 @@ export default function Screen() {
 					setQuery(e.nativeEvent.text),
 				shouldShowHintSearchIcon: true,
 				onSearchButtonPress: () => onSearch(),
+				headerIconColor: colors.foreground.subtle,
+				hintTextColor: colors.foreground.muted,
+				tintColor: colors.fill.danger.DEFAULT,
+				textColor: colors.foreground.DEFAULT,
 			},
 		})
-	}, [navigation, setQuery])
+	}, [navigation, setQuery, onSearch, colors])
 
 	return (
 		<View className="flex-1 items-center justify-center gap-4 bg-background p-4 tablet:p-7">

apps/expo/app/server/[id]/books/_layout.tsx

@@ -1,14 +1,13 @@
-import { Stack, useNavigation, useRouter } from 'expo-router'
+import { Stack, useNavigation } from 'expo-router'
 import { Platform } from 'react-native'
-import { icons } from '~/lib'
 
+import { icons } from '~/lib'
 import { usePreferencesStore } from '~/stores'
 
 const { ChevronLeft } = icons
 
 export default function Screen() {
 	const animationEnabled = usePreferencesStore((state) => !state.reduceAnimations)
-	const router = useRouter()
 	const navigation = useNavigation()
 
 	return (

apps/expo/app/server/[id]/books/index.tsx

@@ -1,7 +1,7 @@
 import { FlashList } from '@shopify/flash-list'
 import { useInfiniteSuspenseGraphQL } from '@stump/client'
 import { graphql } from '@stump/graphql'
-import { useCallback, useRef } from 'react'
+import { Suspense, useCallback, useRef } from 'react'
 import { Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useStore } from 'zustand'
@@ -90,7 +90,11 @@ export default function Screen() {
 					onEndReachedThreshold={0.75}
 					onEndReached={onEndReached}
 					contentInsetAdjustmentBehavior="automatic"
-					ListHeaderComponent={<BookFilterHeader />}
+					ListHeaderComponent={() => (
+						<Suspense fallback={null}>
+							<BookFilterHeader />
+						</Suspense>
+					)}
 					ListHeaderComponentStyle={{ paddingBottom: 16 }}
 					refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} />}
 				/>