wip + working backfill

apps/mobile/src/navigation/BackfillWaitingStack.tsx

@@ -0,0 +1,17 @@
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import DynamicHeader from '~/components/header/DynamicHeader';
+import Header from '~/components/header/Header';
+import LocationScreen from '~/screens/browse/Location';
+import FiltersScreen from '~/screens/search/Filters';
+import SearchScreen from '~/screens/search/Search';
+
+const Stack = createNativeStackNavigator();
+
+export default function BackfillWaitingStack() {
+	return (
+		<Stack.Navigator initialRouteName="BackfillWaiting">
+			<></>
+		</Stack.Navigator>
+	);
+}

apps/mobile/src/navigation/index.tsx

@@ -4,6 +4,7 @@ import NotFoundScreen from '~/screens/NotFound';
 
 import DrawerNavigator, { DrawerNavParamList } from './DrawerNavigator';
 import SearchStack, { SearchStackParamList } from './SearchStack';
+import BackfillWaiting from '~/screens/settings/library/BackfillWaiting';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 // This is the main navigator we nest everything under.
@@ -20,6 +21,7 @@ export default function RootNavigator() {
 				component={SearchStack}
 				options={{ headerShown: false }}
 			/>
+			<Stack.Screen name="BackfillWaiting" component={BackfillWaiting} options={{ headerShown: false }} />
 			<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
 		</Stack.Navigator>
 	);
@@ -28,6 +30,7 @@ export default function RootNavigator() {
 export type RootStackParamList = {
 	Root: NavigatorScreenParams<DrawerNavParamList>;
 	SearchStack: NavigatorScreenParams<SearchStackParamList>;
+	BackfillWaiting: undefined;
 	NotFound: undefined;
 };
 

apps/mobile/src/navigation/tabs/SettingsStack.tsx

@@ -12,10 +12,12 @@ import PrivacySettingsScreen from '~/screens/settings/client/PrivacySettings';
 import AboutScreen from '~/screens/settings/info/About';
 import DebugScreen from '~/screens/settings/info/Debug';
 import SupportScreen from '~/screens/settings/info/Support';
+import BackfillWaiting from '~/screens/settings/library/BackfillWaiting';
 import EditLocationSettingsScreen from '~/screens/settings/library/EditLocationSettings';
 import LibraryGeneralSettingsScreen from '~/screens/settings/library/LibraryGeneralSettings';
 import LocationSettingsScreen from '~/screens/settings/library/LocationSettings';
 import NodesSettingsScreen from '~/screens/settings/library/NodesSettings';
+import SyncSettingsScreen from '~/screens/settings/library/SyncSettings';
 import TagsSettingsScreen from '~/screens/settings/library/TagsSettings';
 import SettingsScreen from '~/screens/settings/Settings';
 
@@ -87,6 +89,16 @@ export default function SettingsStack() {
 				component={TagsSettingsScreen}
 				options={{ header: () => <Header navBack title="Tags" /> }}
 			/>
+			<Stack.Screen
+				name="SyncSettings"
+				component={SyncSettingsScreen}
+				options={{ header: () => <Header navBack title="Sync" /> }}
+			/>
+			<Stack.Screen
+				name="BackfillWaiting"
+				component={BackfillWaiting}
+				options={{ header: () => <></> }}
+			/>
 			{/* <Stack.Screen
 				name="KeysSettings"
 				component={KeysSettingsScreen}
@@ -131,6 +143,8 @@ export type SettingsStackParamList = {
 	NodesSettings: undefined;
 	TagsSettings: undefined;
 	KeysSettings: undefined;
+	SyncSettings: undefined;
+	BackfillWaiting: undefined;
 	// Info
 	About: undefined;
 	Support: undefined;

apps/mobile/src/screens/settings/Settings.tsx

@@ -1,4 +1,5 @@
 import {
+	ArrowsClockwise,
 	Books,
 	FlyingSaucer,
 	Gear,
@@ -86,6 +87,11 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [
 				icon: TagSimple,
 				navigateTo: 'TagsSettings',
 				title: 'Tags',
+			},
+			{
+				icon: ArrowsClockwise,
+				navigateTo: 'SyncSettings',
+				title: 'Sync',
 				rounded: 'bottom'
 			}
 			// {

apps/mobile/src/screens/settings/library/BackfillWaiting.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { Button, Text } from 'react-native';
+import { useLibraryMutation, useLibraryQuery } from '@sd/client';
+import ScreenContainer from '~/components/layout/ScreenContainer';
+import { tw } from '~/lib/tailwind';
+import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
+
+const BackfillWaiting = ({ navigation }: SettingsStackScreenProps<'BackfillWaiting'>) => {
+	const syncEnabled = useLibraryQuery(['sync.enabled']);
+
+	const enableSync = useLibraryMutation(['sync.backfill'], {});
+
+	useEffect(() => {
+		async function _() {
+			await enableSync.mutateAsync(null).then(() => navigation.navigate('SyncSettings'));
+		}
+
+		_();
+	}, []);
+
+	return (
+		<ScreenContainer scrollview={false} style={tw`gap-0 px-6`}>
+			<Text
+				style={tw`flex h-full w-full flex-col items-center justify-center p-5 text-center text-xl text-white`}
+			>
+				Library is being backfilled right now for Sync! Please hold while this process takes
+				place.
+			</Text>
+
+			<Button onPress={() => navigation.goBack()} title="Go Back" />
+		</ScreenContainer>
+	);
+};
+
+export default BackfillWaiting;

apps/mobile/src/screens/settings/library/SyncSettings.tsx

@@ -0,0 +1,133 @@
+import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
+import { Circle } from 'phosphor-react-native';
+import React, { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
+import {
+	Procedures,
+	useDiscoveredPeers,
+	useFeatureFlag,
+	useLibraryMutation,
+	useLibraryQuery,
+	useLibrarySubscription
+} from '@sd/client';
+import ScreenContainer from '~/components/layout/ScreenContainer';
+import { Button } from '~/components/primitive/Button';
+import { tw } from '~/lib/tailwind';
+import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
+
+const ACTORS = {
+	Ingest: 'Sync Ingest',
+	CloudSend: 'Cloud Sync Sender',
+	CloudReceive: 'Cloud Sync Receiver',
+	CloudIngest: 'Cloud Sync Ingest'
+};
+
+const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettings'>) => {
+	const syncEnabled = useLibraryQuery(['sync.enabled']);
+
+	const backfillSync = useLibraryMutation(['sync.backfill'], {
+		onSuccess: async () => {
+			await syncEnabled.refetch();
+		}
+	});
+
+	const [data, setData] = useState<inferSubscriptionResult<Procedures, 'library.actors'>>({});
+	const [startBackfill, setStart] = useState(false);
+
+	useLibrarySubscription(['library.actors'], { onData: setData });
+
+	const cloudSync = useFeatureFlag('cloudSync');
+
+	useEffect(() => {
+		if (startBackfill === true) {
+			console.log('Starting Backfill!');
+
+			navigation.navigate('BackfillWaiting');
+
+			// Force re-render?
+		}
+	}, [startBackfill, navigation]);
+
+	return (
+		<ScreenContainer scrollview={false} style={tw`gap-0 px-6`}>
+			{syncEnabled.data === false ? (
+				<Button
+					variant={'accent'}
+					onPress={() => {
+						setStart(true);
+					}}
+				>
+					<Text>Start Backfill Operations</Text>
+				</Button>
+			) : (
+				<View>
+					{/* <Text
+						style={tw`flex flex-col items-center justify-center text-left text-white`}
+					>
+						Ingester
+						<OnlineIndicator online={data[ACTORS.Ingest] ?? false} />
+					</Text>
+					<View>
+						{data[ACTORS.Ingest] ? (
+							<StopButton name={ACTORS.Ingest} />
+						) : (
+							<StartButton name={ACTORS.Ingest} />
+						)}
+					</View> */}
+					<Text
+						style={tw`flex flex-col items-center justify-center text-left text-white`}
+					>
+						Sender
+						<OnlineIndicator online={data[ACTORS.CloudSend] ?? false} />
+					</Text>
+					<View>
+						{data[ACTORS.CloudSend] ? (
+							<StopButton name={ACTORS.CloudSend} />
+						) : (
+							<StartButton name={ACTORS.CloudSend} />
+						)}
+					</View>
+				</View>
+			)}
+		</ScreenContainer>
+	);
+};
+
+export default SyncSettingsScreen;
+
+function OnlineIndicator({ online }: { online: boolean }) {
+	const size = 10;
+	return online ? (
+		<Circle size={size} color="#00ff0a" weight="fill" />
+	) : (
+		<Circle size={size} color="#ff0600" weight="fill" />
+	);
+}
+
+function StartButton({ name }: { name: string }) {
+	const startActor = useLibraryMutation(['library.startActor']);
+
+	return (
+		<Button
+			variant="accent"
+			disabled={startActor.isLoading}
+			onPress={() => startActor.mutate(name)}
+		>
+			{startActor.isLoading ? <Text>Starting</Text> : <Text>Start</Text>}
+		</Button>
+	);
+}
+
+function StopButton({ name }: { name: string }) {
+	const stopActor = useLibraryMutation(['library.stopActor']);
+
+	return (
+		<Button
+			variant="accent"
+			disabled={stopActor.isLoading}
+			onPress={() => stopActor.mutate(name)}
+		>
+			{stopActor.isLoading ? <Text>Stopping</Text> : <Text>Stop</Text>}
+		</Button>
+	);
+}