From f5c258e627b594bc1e8b60341ae1c21eac3b62e1 Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Mon, 1 Apr 2024 03:41:00 -0700 Subject: [PATCH] [MOB-77] Mobile Drawer (#2255) * drawer and navigation * Remove old job manager code * make edit location/tags UX better * hide settings bcs it exist on tabs * we don't do index on mobile for screens + some organization * make max w percantage --- apps/mobile/src/App.tsx | 2 +- .../context/OnboardingContext.tsx} | 0 .../src/components/drawer/DrawerContent.tsx | 74 +++++++++++ .../drawer/DrawerLibraryManager.tsx | 122 ++++++++++++++++++ .../src/components/drawer/DrawerLocations.tsx | 77 +++++++++++ .../src/components/drawer/DrawerTags.tsx | 73 +++++++++++ apps/mobile/src/components/header/Header.tsx | 2 +- .../src/components/locations/ListLocation.tsx | 11 +- .../src/components/locations/LocationItem.tsx | 22 ++-- .../src/components/overview/Locations.tsx | 7 +- apps/mobile/src/components/tags/ListTag.tsx | 10 +- apps/mobile/src/components/tags/TagItem.tsx | 8 +- .../mobile/src/navigation/DrawerNavigator.tsx | 39 ++++++ .../src/navigation/OnboardingNavigator.tsx | 2 +- apps/mobile/src/navigation/SearchStack.tsx | 2 +- apps/mobile/src/navigation/TabNavigator.tsx | 2 +- apps/mobile/src/navigation/index.tsx | 14 +- .../src/navigation/tabs/BrowseStack.tsx | 8 +- .../src/navigation/tabs/NetworkStack.tsx | 2 +- .../src/navigation/tabs/OverviewStack.tsx | 2 +- apps/mobile/src/screens/NotFound.tsx | 4 +- .../screens/browse/{index.tsx => Browse.tsx} | 13 +- .../src/screens/{ => browse}/Location.tsx | 0 apps/mobile/src/screens/{ => browse}/Tag.tsx | 0 .../network/{index.tsx => Network.tsx} | 0 .../src/screens/onboarding/NewLibrary.tsx | 2 +- .../mobile/src/screens/onboarding/Privacy.tsx | 3 +- .../overview/{index.tsx => Overview.tsx} | 0 .../src/screens/p2p/{index.tsx => P2P.tsx} | 0 .../screens/search/{index.tsx => Search.tsx} | 0 .../settings/client/LibrarySettings.tsx | 15 ++- 31 files changed, 456 insertions(+), 60 deletions(-) rename apps/mobile/src/{screens/onboarding/context.tsx => components/context/OnboardingContext.tsx} (100%) create mode 100644 apps/mobile/src/components/drawer/DrawerContent.tsx create mode 100644 apps/mobile/src/components/drawer/DrawerLibraryManager.tsx create mode 100644 apps/mobile/src/components/drawer/DrawerLocations.tsx create mode 100644 apps/mobile/src/components/drawer/DrawerTags.tsx create mode 100644 apps/mobile/src/navigation/DrawerNavigator.tsx rename apps/mobile/src/screens/browse/{index.tsx => Browse.tsx} (63%) rename apps/mobile/src/screens/{ => browse}/Location.tsx (100%) rename apps/mobile/src/screens/{ => browse}/Tag.tsx (100%) rename apps/mobile/src/screens/network/{index.tsx => Network.tsx} (100%) rename apps/mobile/src/screens/overview/{index.tsx => Overview.tsx} (100%) rename apps/mobile/src/screens/p2p/{index.tsx => P2P.tsx} (100%) rename apps/mobile/src/screens/search/{index.tsx => Search.tsx} (100%) diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx index 124e3ad0c..93e24dbf2 100644 --- a/apps/mobile/src/App.tsx +++ b/apps/mobile/src/App.tsx @@ -39,7 +39,7 @@ import { useTheme } from './hooks/useTheme'; import { changeTwTheme, tw } from './lib/tailwind'; import RootNavigator from './navigation'; import OnboardingNavigator from './navigation/OnboardingNavigator'; -import { P2P } from './screens/p2p'; +import { P2P } from './screens/p2p/P2P'; import { currentLibraryStore } from './utils/nav'; LogBox.ignoreLogs(['Sending `onAnimatedValueUpdate` with no listeners registered.']); diff --git a/apps/mobile/src/screens/onboarding/context.tsx b/apps/mobile/src/components/context/OnboardingContext.tsx similarity index 100% rename from apps/mobile/src/screens/onboarding/context.tsx rename to apps/mobile/src/components/context/OnboardingContext.tsx diff --git a/apps/mobile/src/components/drawer/DrawerContent.tsx b/apps/mobile/src/components/drawer/DrawerContent.tsx new file mode 100644 index 000000000..b828a2ecf --- /dev/null +++ b/apps/mobile/src/components/drawer/DrawerContent.tsx @@ -0,0 +1,74 @@ +import { DrawerContentScrollView } from '@react-navigation/drawer'; +import { DrawerContentComponentProps } from '@react-navigation/drawer/lib/typescript/src/types'; +import { AppLogo } from '@sd/assets/images'; +import { CheckCircle, Gear } from 'phosphor-react-native'; +import { useRef } from 'react'; +import { Image, Platform, Pressable, Text, View } from 'react-native'; +import { JobManagerContextProvider, useLibraryQuery } from '@sd/client'; +import Layout from '~/constants/Layout'; +import { tw, twStyle } from '~/lib/tailwind'; + +import { PulseAnimation } from '../animation/lottie'; +import { ModalRef } from '../layout/Modal'; +import { JobManagerModal } from '../modal/job/JobManagerModal'; +import DrawerLibraryManager from './DrawerLibraryManager'; +import DrawerLocations from './DrawerLocations'; +import DrawerTags from './DrawerTags'; + +const drawerHeight = Platform.select({ + ios: Layout.window.height * 0.85, + android: Layout.window.height * 0.9 +}); + +function JobIcon() { + const { data: isActive } = useLibraryQuery(['jobs.isActive']); + return isActive ? ( + + ) : ( + + ); +} + +// NOTE: `navigation` is not typed here... +const DrawerContent = ({ navigation, state }: DrawerContentComponentProps) => { + // const stackName = getStackNameFromState(state); + + const modalRef = useRef(null); + + return ( + + + + + + Spacedrive + + + {/* Library Manager */} + + {/* Locations */} + + {/* Tags */} + + + + {/* Settings */} + {/* navigation.navigate('SettingsStack', { screen: 'Settings' })} + > + + */} + {/* Job Manager */} + + modalRef.current?.present()}> + + + + + + + + ); +}; + +export default DrawerContent; diff --git a/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx b/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx new file mode 100644 index 000000000..6c1073f27 --- /dev/null +++ b/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx @@ -0,0 +1,122 @@ +import { useDrawerStatus } from '@react-navigation/drawer'; +import { useNavigation } from '@react-navigation/native'; +import { MotiView } from 'moti'; +import { CaretRight, Gear, Lock, Plus } from 'phosphor-react-native'; +import { useEffect, useRef, useState } from 'react'; +import { Alert, Pressable, Text, View } from 'react-native'; +import { useClientContext } from '@sd/client'; +import { tw, twStyle } from '~/lib/tailwind'; +import { currentLibraryStore } from '~/utils/nav'; + +import { AnimatedHeight } from '../animation/layout'; +import { ModalRef } from '../layout/Modal'; +import CreateLibraryModal from '../modal/CreateLibraryModal'; +import { Divider } from '../primitive/Divider'; + +const DrawerLibraryManager = () => { + const [dropdownClosed, setDropdownClosed] = useState(true); + + // Closes the dropdown when the drawer is closed + const isDrawerOpen = useDrawerStatus() === 'open'; + useEffect(() => { + if (!isDrawerOpen) setDropdownClosed(true); + }, [isDrawerOpen]); + + const { library: currentLibrary, libraries } = useClientContext(); + + const navigation = useNavigation(); + + const modalRef = useRef(null); + + return ( + + setDropdownClosed((v) => !v)}> + + + {currentLibrary?.config.name} + + + + + + + + + {/* Libraries */} + {libraries.data?.map((library) => { + // console.log('library', library); + return ( + (currentLibraryStore.id = library.uuid)} + > + + + {library.config.name} + + + + ); + })} + + {/* Menu */} + {/* Create Library */} + modalRef.current?.present()} + > + + New Library + + + {/* Manage Library */} + { + navigation.navigate('Root', { + screen: 'Home', + params: { + screen: 'SettingsStack', + params: { screen: 'LibraryGeneralSettings' } + } + }); + }} + > + + + Manage Library + + + {/* Lock */} + Alert.alert('TODO')}> + + + Lock + + + + + + ); +}; + +export default DrawerLibraryManager; diff --git a/apps/mobile/src/components/drawer/DrawerLocations.tsx b/apps/mobile/src/components/drawer/DrawerLocations.tsx new file mode 100644 index 000000000..205182958 --- /dev/null +++ b/apps/mobile/src/components/drawer/DrawerLocations.tsx @@ -0,0 +1,77 @@ +import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types'; +import { useNavigation } from '@react-navigation/native'; +import { useRef } from 'react'; +import { Pressable, Text, View } from 'react-native'; +import { useCache, useLibraryQuery, useNodes } from '@sd/client'; +import { ModalRef } from '~/components/layout/Modal'; +import { tw, twStyle } from '~/lib/tailwind'; + +import FolderIcon from '../icons/FolderIcon'; +import CollapsibleView from '../layout/CollapsibleView'; +import ImportModal from '../modal/ImportModal'; + +type DrawerLocationItemProps = { + folderName: string; + onPress: () => void; +}; + +const DrawerLocationItem: React.FC = (props) => { + const { folderName, onPress } = props; + + return ( + + + + + {folderName} + + + + ); +}; + +const DrawerLocations = () => { + const navigation = useNavigation(); + + const modalRef = useRef(null); + + const result = useLibraryQuery(['locations.list'], { keepPreviousData: true }); + useNodes(result.data?.nodes); + const locations = useCache(result.data?.items); + + return ( + <> + + + {locations?.map((location) => ( + + navigation.navigate('BrowseStack', { + screen: 'Location', + params: { id: location.id } + }) + } + /> + ))} + + {/* Add Location */} + modalRef.current?.present()}> + + + Add Location + + + + + + + ); +}; + +export default DrawerLocations; diff --git a/apps/mobile/src/components/drawer/DrawerTags.tsx b/apps/mobile/src/components/drawer/DrawerTags.tsx new file mode 100644 index 000000000..de7b841be --- /dev/null +++ b/apps/mobile/src/components/drawer/DrawerTags.tsx @@ -0,0 +1,73 @@ +import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types'; +import { useNavigation } from '@react-navigation/native'; +import { useRef } from 'react'; +import { ColorValue, Pressable, Text, View } from 'react-native'; +import { useCache, useLibraryQuery, useNodes } from '@sd/client'; +import { ModalRef } from '~/components/layout/Modal'; +import { tw, twStyle } from '~/lib/tailwind'; + +import CollapsibleView from '../layout/CollapsibleView'; +import CreateTagModal from '../modal/tag/CreateTagModal'; + +type DrawerTagItemProps = { + tagName: string; + tagColor: ColorValue; + onPress: () => void; +}; + +const DrawerTagItem: React.FC = (props) => { + const { tagName, tagColor, onPress } = props; + return ( + + + + + {tagName} + + + + ); +}; + +const DrawerTags = () => { + const navigation = useNavigation(); + + const tags = useLibraryQuery(['tags.list']); + useNodes(tags.data?.nodes); + const tagData = useCache(tags.data?.items); + + const modalRef = useRef(null); + + return ( + + + {tagData?.map((tag) => ( + + navigation.navigate('BrowseStack', { + screen: 'Tag', + params: { id: tag.id } + }) + } + tagColor={tag.color as ColorValue} + /> + ))} + + {/* Add Tag */} + modalRef.current?.present()}> + + Add Tag + + + + + ); +}; + +export default DrawerTags; diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx index 43ecc2901..1e8da5e89 100644 --- a/apps/mobile/src/components/header/Header.tsx +++ b/apps/mobile/src/components/header/Header.tsx @@ -83,7 +83,7 @@ export default function Header({ { - navigation.navigate('ExplorerSearch', { + navigation.navigate('SearchStack', { screen: 'Search' }); }} diff --git a/apps/mobile/src/components/locations/ListLocation.tsx b/apps/mobile/src/components/locations/ListLocation.tsx index 3ebed2baa..be40fdbd8 100644 --- a/apps/mobile/src/components/locations/ListLocation.tsx +++ b/apps/mobile/src/components/locations/ListLocation.tsx @@ -1,5 +1,6 @@ import { useNavigation } from '@react-navigation/native'; import { DotsThreeOutlineVertical } from 'phosphor-react-native'; +import { useRef } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; import { arraysEqual, byteSize, Location, useOnlineLocations } from '@sd/client'; @@ -8,20 +9,22 @@ import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; import FolderIcon from '../icons/FolderIcon'; import Card from '../layout/Card'; -import { ModalRef } from '../layout/Modal'; import RightActions from './RightActions'; interface ListLocationProps { location: Location; - modalRef: React.RefObject; } -const ListLocation = ({ location, modalRef }: ListLocationProps) => { +const ListLocation = ({ location }: ListLocationProps) => { + const swipeRef = useRef(null); + const navigation = useNavigation['navigation']>(); const onlineLocations = useOnlineLocations(); const online = onlineLocations.some((l) => arraysEqual(location.pub_id, l)); + return ( ( @@ -69,7 +72,7 @@ const ListLocation = ({ location, modalRef }: ListLocationProps) => { {`${byteSize(location.size_in_bytes)}`} - modalRef.current?.present()}> + swipeRef.current?.openRight()}> {viewStyle === 'grid' ? ( - + <> + + { + editLocation(); + modalRef.current?.close(); + }} + locationId={location.id} + ref={modalRef} + /> + ) : ( - + )} - { - editLocation(); - modalRef.current?.close(); - }} - locationId={location.id} - ref={modalRef} - /> ); }; diff --git a/apps/mobile/src/components/overview/Locations.tsx b/apps/mobile/src/components/overview/Locations.tsx index 7193c0a53..8a53c4dfc 100644 --- a/apps/mobile/src/components/overview/Locations.tsx +++ b/apps/mobile/src/components/overview/Locations.tsx @@ -4,7 +4,7 @@ import { Pressable, Text, View } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useCache, useLibraryQuery, useNodes } from '@sd/client'; import { tw, twStyle } from '~/lib/tailwind'; -import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; +import { OverviewStackScreenProps } from '~/navigation/tabs/OverviewStack'; import Fade from '../layout/Fade'; import { ModalRef } from '../layout/Modal'; @@ -15,7 +15,7 @@ import OverviewSection from './OverviewSection'; import StatCard from './StatCard'; const Locations = () => { - const navigation = useNavigation['navigation']>(); + const navigation = useNavigation['navigation']>(); const modalRef = useRef(null); const locationsQuery = useLibraryQuery(['locations.list']); @@ -60,7 +60,8 @@ const Locations = () => { renderItem={({ item }) => ( - navigation.navigate('BrowseStack', { + navigation.jumpTo('BrowseStack', { + initial: false, screen: 'Location', params: { id: item.id } }) diff --git a/apps/mobile/src/components/tags/ListTag.tsx b/apps/mobile/src/components/tags/ListTag.tsx index a20ce9fb7..5b2e11859 100644 --- a/apps/mobile/src/components/tags/ListTag.tsx +++ b/apps/mobile/src/components/tags/ListTag.tsx @@ -1,22 +1,24 @@ import { DotsThreeOutlineVertical } from 'phosphor-react-native'; +import { useRef } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; import { ClassInput } from 'twrnc'; import { Tag } from '@sd/client'; import { tw, twStyle } from '~/lib/tailwind'; -import { ModalRef } from '../layout/Modal'; import RightActions from './RightActions'; interface ListTagProps { tag: Tag; tagStyle?: ClassInput; - modalRef: React.RefObject; } -const ListTag = ({ tag, tagStyle, modalRef }: ListTagProps) => { +const ListTag = ({ tag, tagStyle }: ListTagProps) => { + const swipeRef = useRef(null); + return ( ( @@ -39,7 +41,7 @@ const ListTag = ({ tag, tagStyle, modalRef }: ListTagProps) => { {tag.name} - modalRef.current?.present()}> + swipeRef.current?.openRight()}> { testID="browse-tag" > {viewStyle === 'grid' ? ( - + <> + + + ) : ( - + )} - ); }; diff --git a/apps/mobile/src/navigation/DrawerNavigator.tsx b/apps/mobile/src/navigation/DrawerNavigator.tsx new file mode 100644 index 000000000..4094340fc --- /dev/null +++ b/apps/mobile/src/navigation/DrawerNavigator.tsx @@ -0,0 +1,39 @@ +import { createDrawerNavigator, DrawerScreenProps } from '@react-navigation/drawer'; +import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'; +import { NativeStackScreenProps } from '@react-navigation/native-stack'; +import DrawerContent from '~/components/drawer/DrawerContent'; +import { tw } from '~/lib/tailwind'; + +import type { RootStackParamList } from '.'; +import type { TabParamList } from './TabNavigator'; +import TabNavigator from './TabNavigator'; + +const Drawer = createDrawerNavigator(); + +export default function DrawerNavigator() { + return ( + } + > + + + ); +} + +export type DrawerNavParamList = { + Home: NavigatorScreenParams; +}; + +export type HomeDrawerScreenProps = CompositeScreenProps< + DrawerScreenProps, + NativeStackScreenProps +>; diff --git a/apps/mobile/src/navigation/OnboardingNavigator.tsx b/apps/mobile/src/navigation/OnboardingNavigator.tsx index 58d242e59..3894a4697 100644 --- a/apps/mobile/src/navigation/OnboardingNavigator.tsx +++ b/apps/mobile/src/navigation/OnboardingNavigator.tsx @@ -1,5 +1,5 @@ import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; -import { OnboardingContext, useContextValue } from '~/screens/onboarding/context'; +import { OnboardingContext, useContextValue } from '~/components/context/OnboardingContext'; import CreatingLibraryScreen from '~/screens/onboarding/CreatingLibrary'; import GetStartedScreen from '~/screens/onboarding/GetStarted'; import NewLibraryScreen from '~/screens/onboarding/NewLibrary'; diff --git a/apps/mobile/src/navigation/SearchStack.tsx b/apps/mobile/src/navigation/SearchStack.tsx index a4e190de8..60ec90aa1 100644 --- a/apps/mobile/src/navigation/SearchStack.tsx +++ b/apps/mobile/src/navigation/SearchStack.tsx @@ -1,8 +1,8 @@ import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; import React from 'react'; import Header from '~/components/header/Header'; -import SearchScreen from '~/screens/search'; import FiltersScreen from '~/screens/search/Filters'; +import SearchScreen from '~/screens/search/Search'; const Stack = createNativeStackNavigator(); diff --git a/apps/mobile/src/navigation/TabNavigator.tsx b/apps/mobile/src/navigation/TabNavigator.tsx index f4b852d89..2465ddd7c 100644 --- a/apps/mobile/src/navigation/TabNavigator.tsx +++ b/apps/mobile/src/navigation/TabNavigator.tsx @@ -129,7 +129,7 @@ export default function TabNavigator() { * TouchableWithoutFeedback is used to prevent Android ripple effect * State is being used to control the animation and make Rive work * Tab.Screen listeners are needed because if a user taps on the tab text only, the animation won't play - * This may be revisted in the future to update accordingly + * This may be revisited in the future to update accordingly */ tabBarIcon: () => ( (); // This is the main navigator we nest everything under. export default function RootNavigator() { return ( - + @@ -22,8 +26,8 @@ export default function RootNavigator() { } export type RootStackParamList = { - Root: NavigatorScreenParams; - ExplorerSearch: NavigatorScreenParams; + Root: NavigatorScreenParams; + SearchStack: NavigatorScreenParams; NotFound: undefined; }; diff --git a/apps/mobile/src/navigation/tabs/BrowseStack.tsx b/apps/mobile/src/navigation/tabs/BrowseStack.tsx index d424e9096..754ecbea1 100644 --- a/apps/mobile/src/navigation/tabs/BrowseStack.tsx +++ b/apps/mobile/src/navigation/tabs/BrowseStack.tsx @@ -1,12 +1,12 @@ import { CompositeScreenProps } from '@react-navigation/native'; import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; import Header from '~/components/header/Header'; -import BrowseScreen from '~/screens/browse'; +import BrowseScreen from '~/screens/browse/Browse'; import LibraryScreen from '~/screens/browse/Library'; +import LocationScreen from '~/screens/browse/Location'; import LocationsScreen from '~/screens/browse/Locations'; +import TagScreen from '~/screens/browse/Tag'; import TagsScreen from '~/screens/browse/Tags'; -import LocationScreen from '~/screens/Location'; -import TagScreen from '~/screens/Tag'; import { TabScreenProps } from '../TabNavigator'; @@ -47,7 +47,7 @@ export default function BrowseStack() { name="Tag" component={TagScreen} options={{ - header: (route) =>
+ header: (route) =>
}} /> navigation.replace('Root', { - screen: 'BrowseStack', - params: { screen: 'Browse' } + screen: 'Home', + params: { screen: 'BrowseStack', params: { screen: 'Browse' } } }) } style={tw`mt-4 py-4`} diff --git a/apps/mobile/src/screens/browse/index.tsx b/apps/mobile/src/screens/browse/Browse.tsx similarity index 63% rename from apps/mobile/src/screens/browse/index.tsx rename to apps/mobile/src/screens/browse/Browse.tsx index 809d7bf38..0736a466d 100644 --- a/apps/mobile/src/screens/browse/index.tsx +++ b/apps/mobile/src/screens/browse/Browse.tsx @@ -1,7 +1,6 @@ import { CheckCircle } from 'phosphor-react-native'; import React from 'react'; -import { Pressable, View } from 'react-native'; -import { JobManagerContextProvider, useLibraryQuery } from '@sd/client'; +import { useLibraryQuery } from '@sd/client'; import { PulseAnimation } from '~/components/animation/lottie'; import BrowseCategories from '~/components/browse/BrowseCategories'; import BrowseLocations from '~/components/browse/BrowseLocations'; @@ -9,7 +8,6 @@ import BrowseTags from '~/components/browse/BrowseTags'; import Jobs from '~/components/browse/Jobs'; import { ModalRef } from '~/components/layout/Modal'; import ScreenContainer from '~/components/layout/ScreenContainer'; -import { JobManagerModal } from '~/components/modal/job/JobManagerModal'; import { tw } from '~/lib/tailwind'; function JobIcon() { @@ -30,15 +28,6 @@ export default function BrowseScreen() { - {/* TODO: Remove this when the new job manager is live, this is here for debugging purposes. */} - - - modalRef.current?.present()}> - - - - - ); } diff --git a/apps/mobile/src/screens/Location.tsx b/apps/mobile/src/screens/browse/Location.tsx similarity index 100% rename from apps/mobile/src/screens/Location.tsx rename to apps/mobile/src/screens/browse/Location.tsx diff --git a/apps/mobile/src/screens/Tag.tsx b/apps/mobile/src/screens/browse/Tag.tsx similarity index 100% rename from apps/mobile/src/screens/Tag.tsx rename to apps/mobile/src/screens/browse/Tag.tsx diff --git a/apps/mobile/src/screens/network/index.tsx b/apps/mobile/src/screens/network/Network.tsx similarity index 100% rename from apps/mobile/src/screens/network/index.tsx rename to apps/mobile/src/screens/network/Network.tsx diff --git a/apps/mobile/src/screens/onboarding/NewLibrary.tsx b/apps/mobile/src/screens/onboarding/NewLibrary.tsx index 5242f63e9..68f22c1f7 100644 --- a/apps/mobile/src/screens/onboarding/NewLibrary.tsx +++ b/apps/mobile/src/screens/onboarding/NewLibrary.tsx @@ -1,12 +1,12 @@ import { Controller } from 'react-hook-form'; import { Alert, Text, View } from 'react-native'; +import { useOnboardingContext } from '~/components/context/OnboardingContext'; import { Icon } from '~/components/icons/Icon'; import { Button } from '~/components/primitive/Button'; import { Input } from '~/components/primitive/Input'; import { tw } from '~/lib/tailwind'; import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator'; -import { useOnboardingContext } from './context'; import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted'; const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary'>) => { diff --git a/apps/mobile/src/screens/onboarding/Privacy.tsx b/apps/mobile/src/screens/onboarding/Privacy.tsx index 944e30e2d..cd9b7c908 100644 --- a/apps/mobile/src/screens/onboarding/Privacy.tsx +++ b/apps/mobile/src/screens/onboarding/Privacy.tsx @@ -2,11 +2,10 @@ import { ArrowRight } from 'phosphor-react-native'; import React from 'react'; import { Controller } from 'react-hook-form'; import { Linking, Pressable, Text, View, ViewStyle } from 'react-native'; +import { useOnboardingContext } from '~/components/context/OnboardingContext'; import { Button } from '~/components/primitive/Button'; import { tw, twStyle } from '~/lib/tailwind'; -import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator'; -import { useOnboardingContext } from './context'; import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted'; type RadioButtonProps = { diff --git a/apps/mobile/src/screens/overview/index.tsx b/apps/mobile/src/screens/overview/Overview.tsx similarity index 100% rename from apps/mobile/src/screens/overview/index.tsx rename to apps/mobile/src/screens/overview/Overview.tsx diff --git a/apps/mobile/src/screens/p2p/index.tsx b/apps/mobile/src/screens/p2p/P2P.tsx similarity index 100% rename from apps/mobile/src/screens/p2p/index.tsx rename to apps/mobile/src/screens/p2p/P2P.tsx diff --git a/apps/mobile/src/screens/search/index.tsx b/apps/mobile/src/screens/search/Search.tsx similarity index 100% rename from apps/mobile/src/screens/search/index.tsx rename to apps/mobile/src/screens/search/Search.tsx diff --git a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx index c432104b3..58dda7faf 100644 --- a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx +++ b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx @@ -1,6 +1,6 @@ -import { CaretRight, Pen, Trash } from 'phosphor-react-native'; +import { DotsThreeOutlineVertical, Pen, Trash } from 'phosphor-react-native'; import React, { useEffect, useRef } from 'react'; -import { Animated, FlatList, Text, View } from 'react-native'; +import { Animated, FlatList, Pressable, Text, View } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; import { LibraryConfigWrapped, useBridgeQuery, useCache, useNodes } from '@sd/client'; import Fade from '~/components/layout/Fade'; @@ -49,8 +49,11 @@ function LibraryItem({ ); }; + const swipeRef = useRef(null); + return ( {library.config.name} {library.uuid} - + swipeRef.current?.openRight()}> + + );