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()}>
+
+
);