Added Peer screen

interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx

@@ -1,4 +1,4 @@
-import { HardwareModel, useBridgeQuery, usePeers } from '@sd/client';
+import { HardwareModel, useBridgeQuery } from '@sd/client';
 import { Button, toast, Tooltip } from '@sd/ui';
 import { Icon } from '~/components';
 import { useLocale } from '~/hooks';
@@ -11,7 +11,6 @@ export default function DevicesSection() {
 	const { data: node } = useBridgeQuery(['nodeState']);
 
 	const { t } = useLocale();
-	const peers = usePeers();
 
 	return (
 		<Section name={t('devices')}>

interface/app/$libraryId/Layout/Sidebar/sections/Peers/index.tsx

@@ -1,5 +1,4 @@
-import { HardwareModel, useBridgeQuery, usePeers } from '@sd/client';
-import { Button, toast, Tooltip } from '@sd/ui';
+import { HardwareModel, usePeers } from '@sd/client';
 import { Icon } from '~/components';
 import { useLocale } from '~/hooks';
 import { hardwareModelToIcon } from '~/util/hardware';
@@ -9,25 +8,33 @@ import Section from '../../SidebarLayout/Section';
 
 export default function PeersSection() {
 	const { t } = useLocale();
-	const peers = usePeers();
+	const peers = Array.from(usePeers());
 
 	return (
-		<Section name={t('peers')}>
-			{Array.from(peers).map(([id, node]) => (
-				<SidebarLink className="group relative w-full" to={`todo`} 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" />
-					)}
+		Array.from(peers).length > 0 && (
+			<Section name={t('peers')}>
+				{Array.from(peers).map(([id, node]) => (
+					<SidebarLink
+						className="group relative w-full"
+						to={`peer/${encodeURIComponent(id)}`}
+						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>
-			))}
-		</Section>
+						<span className="truncate">{node.metadata.name}</span>
+					</SidebarLink>
+				))}
+			</Section>
+		)
 	);
 }

interface/app/$libraryId/index.tsx

@@ -11,8 +11,6 @@ const pageRoutes: RouteObject = {
 	lazy: () => import('./PageLayout'),
 	children: [
 		{ path: 'overview', lazy: () => import('./overview') },
-		// { path: 'labels', lazy: () => import('./labels') },
-		// { path: 'spaces', lazy: () => import('./spaces') },
 		{ path: 'debug', children: debugRoutes }
 	]
 };
@@ -27,6 +25,7 @@ const explorerRoutes: RouteObject[] = [
 	{ path: 'ephemeral/:id', lazy: () => import('./ephemeral') },
 	{ path: 'location/:id', lazy: () => import('./location/$id') },
 	{ path: 'node/:id', lazy: () => import('./node/$id') },
+	{ path: 'peer/:id', lazy: () => import('./peer/$id') },
 	{ path: 'tag/:id', lazy: () => import('./tag/$id') },
 	{ path: 'network', lazy: () => import('./network') },
 	{ path: 'saved-search/:id', lazy: () => import('./saved-search/$id') }

interface/app/$libraryId/peer/$id.tsx

@@ -0,0 +1,49 @@
+import { HardwareModel, usePeers } from '@sd/client';
+import { NodeIdParamsSchema } from '~/app/route-schemas';
+import { Icon } from '~/components';
+import { useRouteTitle, useZodRouteParams } from '~/hooks';
+import { hardwareModelToIcon } from '~/util/hardware';
+
+import { TopBarPortal } from '../TopBar/Portal';
+
+export const Component = () => {
+	const { id: _nodeId } = useZodRouteParams(NodeIdParamsSchema);
+	// we encode/decode because nodeId has special characters and I'm not willing to change that rn
+	const nodeId = decodeURIComponent(_nodeId);
+
+	const peers = usePeers();
+
+	const peer = peers.get(nodeId);
+
+	const title = useRouteTitle(peer?.metadata?.name || 'Peer');
+
+	return (
+		<div className="flex w-full items-center justify-center">
+			<TopBarPortal
+				left={
+					<div className="flex items-center gap-2">
+						<span className="truncate text-sm font-medium">{title}</span>
+					</div>
+				}
+			/>
+
+			{peer?.metadata.device_model && (
+				<div className="flex flex-col items-center justify-center gap-3">
+					<Icon
+						name={hardwareModelToIcon(peer?.metadata.device_model as HardwareModel)}
+						size={150}
+						className=""
+					/>
+					<h3 className="text-lg font-bold">{peer?.metadata.name}</h3>
+					<h3 className="text-sm text-ink-dull">
+						{peer?.metadata.operating_system?.toString()}
+					</h3>
+					<h3 className="text-sm text-ink-dull">{nodeId}</h3>
+					<div className="mt-8 flex h-28 w-96 items-center justify-center rounded-lg border border-dashed border-app-line p-4 text-sm font-medium text-ink-dull">
+						Drop files here to send with Spacedrop
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};

interface/util/hardware.ts

@@ -1,5 +1,5 @@
-import * as Icons from '@sd/assets/icons';
-import { getIcon } from '@sd/assets/util';
+// import * as Icons from '@sd/assets/icons';
+// import { getIcon } from '@sd/assets/util';
 import { HardwareModel } from '@sd/client';
 
 export function hardwareModelToIcon(hardwareModel: HardwareModel) {
@@ -8,6 +8,10 @@ export function hardwareModelToIcon(hardwareModel: HardwareModel) {
 			return 'Laptop';
 		case 'MacStudio':
 			return 'SilverBox';
+		case 'MacMini':
+			return 'MiniSilverBox';
+		case 'Other':
+			return 'PC';
 		default:
 			return 'Laptop';
 	}

packages/assets/icons/index.ts

@@ -129,7 +129,9 @@ import Mega from './Mega.png';
 import Mesh_Light from './Mesh_Light.png';
 import Mesh20 from './Mesh-20.png';
 import Mesh from './Mesh.png';
+import MiniSilverBox from './MiniSilverBox.png';
 import Mobile_Light from './Mobile_Light.png';
+import MobileAndroid from './Mobile-Android.png';
 import Mobile from './Mobile.png';
 import MoveLocation_Light from './MoveLocation_Light.png';
 import MoveLocation from './MoveLocation.png';
@@ -143,6 +145,7 @@ import OpenStack from './OpenStack.png';
 import Package_Light from './Package_Light.png';
 import Package20 from './Package-20.png';
 import Package from './Package.png';
+import PC from './PC.png';
 import PCloud from './PCloud.png';
 import Scrapbook_Light from './Scrapbook_Light.png';
 import Scrapbook from './Scrapbook.png';
@@ -315,6 +318,8 @@ export {
 	Mesh20,
 	Mesh,
 	Mesh_Light,
+	MiniSilverBox,
+	MobileAndroid,
 	Mobile,
 	Mobile_Light,
 	MoveLocation,
@@ -326,6 +331,7 @@ export {
 	Node_Light,
 	OneDrive,
 	OpenStack,
+	PC,
 	PCloud,
 	Package20,
 	Package,