Added Peer screen (#2484)

better peers

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,