From 2e2a533acc68f4fb98e01449998f180d2ea347f0 Mon Sep 17 00:00:00 2001
From: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com>
Date: Sat, 22 Jun 2024 03:33:34 +0530
Subject: [PATCH] Local Discovery for Mobile + Start of Device Sync

---
 apps/mobile/src/screens/network/Network.tsx   |  4 +
 .../src/screens/settings/info/Debug.tsx       | 21 +++++
 crates/p2p/src/hooks/quic/transport.rs        |  2 +
 .../Layout/Sidebar/sections/Devices/index.tsx | 86 ++++++++++++-------
 4 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/apps/mobile/src/screens/network/Network.tsx b/apps/mobile/src/screens/network/Network.tsx
index 92e7ed22c..f6f6c0b94 100644
--- a/apps/mobile/src/screens/network/Network.tsx
+++ b/apps/mobile/src/screens/network/Network.tsx
@@ -1,3 +1,4 @@
+import { useBridgeQuery } from '@sd/client';
 import { Text } from 'react-native';
 import { Icon } from '~/components/icons/Icon';
 import ScreenContainer from '~/components/layout/ScreenContainer';
@@ -5,6 +6,9 @@ import { tw } from '~/lib/tailwind';
 import { NetworkStackScreenProps } from '~/navigation/tabs/NetworkStack';
 
 export default function NetworkScreen({ navigation }: NetworkStackScreenProps<'Network'>) {
+	const node = useBridgeQuery(['nodeState']);
+
+	console.log('node', node.data?.p2p);
 	return (
 		<ScreenContainer scrollview={false} style={tw`items-center justify-center gap-0`}>
 			<Icon name="Globe" size={128} />
diff --git a/apps/mobile/src/screens/settings/info/Debug.tsx b/apps/mobile/src/screens/settings/info/Debug.tsx
index 994aae7c0..5b95610a3 100644
--- a/apps/mobile/src/screens/settings/info/Debug.tsx
+++ b/apps/mobile/src/screens/settings/info/Debug.tsx
@@ -21,6 +21,7 @@ const DebugScreen = ({ navigation }: SettingsStackScreenProps<'Debug'>) => {
 	const setOrigin = useBridgeMutation(['cloud.setApiOrigin']);
 
 	const queryClient = useQueryClient();
+	const editNode = useBridgeMutation('nodes.edit');
 
 	return (
 		<View style={tw`flex-1 p-4`}>
@@ -71,6 +72,26 @@ const DebugScreen = ({ navigation }: SettingsStackScreenProps<'Debug'>) => {
 				>
 					<Text style={tw`text-ink`}>Logout</Text>
 				</Button>
+				<Button
+					onPress={async () =>
+						await editNode.mutateAsync({
+							name: null,
+							p2p_port: { type: 'random' },
+							p2p_disabled: false,
+							p2p_ipv6_disabled: true,
+							p2p_relay_disabled: false,
+							p2p_discovery: 'Everyone',
+							p2p_remote_access: true,
+							p2p_manual_peers: [],
+							image_labeler_version: null
+						})
+					}
+				>
+					<Text style={tw`text-ink`}>Enable p2p</Text>
+				</Button>
+				<Button onPress={() => toggleFeatureFlag('wipP2P')}>
+					<Text style={tw`text-ink`}>Toggle wipP2P Feature Flag</Text>
+				</Button>
 			</Card>
 		</View>
 	);
diff --git a/crates/p2p/src/hooks/quic/transport.rs b/crates/p2p/src/hooks/quic/transport.rs
index 262535b5f..b8e9b066a 100644
--- a/crates/p2p/src/hooks/quic/transport.rs
+++ b/crates/p2p/src/hooks/quic/transport.rs
@@ -742,6 +742,8 @@ async fn start(
 									p2p.connected_to_outgoing(id, remote_metadata, req.to);
 
 									let _ = req.tx.send(Ok(UnicastStream::new(req.to, stream.compat())));
+
+									debug!("Successfully connected with '{}'", req.to);
 								},
 								Err(e) => {
 									let _ = req.tx.send(Err(e.to_string()));
diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
index 2c4a12726..9d34b37d8 100644
--- a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
@@ -1,5 +1,5 @@
-import { HardwareModel, useBridgeQuery } from '@sd/client';
-import { Button, Tooltip, dialogManager } from '@sd/ui';
+import { HardwareModel, useBridgeQuery, usePeers } from '@sd/client';
+import { Button, dialogManager, Tooltip } from '@sd/ui';
 import { Icon } from '~/components';
 import { useLocale } from '~/hooks';
 import { hardwareModelToIcon } from '~/util/hardware';
@@ -9,38 +9,60 @@ import Section from '../../SidebarLayout/Section';
 import AddDeviceDialog from './AddDeviceDialog';
 
 export default function DevicesSection() {
-    const { data: node } = useBridgeQuery(['nodeState']);
-    const { t } = useLocale();
+	const { data: node } = useBridgeQuery(['nodeState']);
+	const peers = usePeers();
+	const { t } = useLocale();
 
-    return (
-        <Section name={t('devices')}>
-            {node && (
-                <SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
-                    {node.device_model ? (
-                        <Icon
-                            name={hardwareModelToIcon(node.device_model as HardwareModel)}
-                            size={20}
-                            className="mr-1"
-                        />
-                    ) : (
-                        <Icon name="Laptop" className="mr-1" />
-                    )}
+	return (
+		<Section name={t('devices')}>
+			{node && (
+				<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
+					{node.device_model ? (
+						<Icon
+							name={hardwareModelToIcon(node.device_model as HardwareModel)}
+							size={20}
+							className="mr-1"
+						/>
+					) : (
+						<Icon name="Laptop" className="mr-1" />
+					)}
 
-                    <span className="truncate">{node.name}</span>
-                </SidebarLink>
-            )}
+					<span className="truncate">{node.name}</span>
+				</SidebarLink>
+			)}
+			{Array.from(peers).map(([id, node]) => {
+				return (
+					<SidebarLink
+						className="group relative w-full"
+						to={`/remote/${id}/browse`}
+						key={id}
+					>
+						{node.metadata.device_model ? (
+							<Icon
+								name={hardwareModelToIcon(
+									node.metadata.device_model as HardwareModel
+								)}
+								size={20}
+								className="mr-1"
+							/>
+						) : (
+							<Icon name="Laptop" className="mr-1" />
+						)}
+
+						<span className="truncate">{node.metadata.name}</span>
+					</SidebarLink>
+				);
+			})}
 			<Tooltip label={t('devices_coming_soon_tooltip')} position="right">
-            <Button disabled={!import.meta.env.DEV}
-                onClick={() => dialogManager.create((dp) => (
-					<AddDeviceDialog {...dp} />
-				))}
-                variant="dotted"
-                className="mt-1 w-full opacity-70"
-            >
-                {t('add_device')}
-            </Button>
+				<Button
+					disabled={!import.meta.env.DEV}
+					onClick={() => dialogManager.create((dp) => <AddDeviceDialog {...dp} />)}
+					variant="dotted"
+					className="mt-1 w-full opacity-70"
+				>
+					{t('add_device')}
+				</Button>
 			</Tooltip>
-        </Section>
-
-    );
+		</Section>
+	);
 }