diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx index 973fdb2e2..a8130c9e6 100644 --- a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx +++ b/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 (
diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Peers/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Peers/index.tsx index 5f25e0b2a..2db27a401 100644 --- a/interface/app/$libraryId/Layout/Sidebar/sections/Peers/index.tsx +++ b/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 ( -
- {Array.from(peers).map(([id, node]) => ( - - {node.metadata.device_model ? ( - - ) : ( - - )} + Array.from(peers).length > 0 && ( +
+ {Array.from(peers).map(([id, node]) => ( + + {node.metadata.device_model ? ( + + ) : ( + + )} - {node.metadata.name} - - ))} -
+ {node.metadata.name} +
+ ))} +
+ ) ); } diff --git a/interface/app/$libraryId/index.tsx b/interface/app/$libraryId/index.tsx index 3f6e36fd3..e1e9a8a6f 100644 --- a/interface/app/$libraryId/index.tsx +++ b/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') } diff --git a/interface/app/$libraryId/peer/$id.tsx b/interface/app/$libraryId/peer/$id.tsx new file mode 100644 index 000000000..b950f8224 --- /dev/null +++ b/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 ( +
+ + {title} +
+ } + /> + + {peer?.metadata.device_model && ( +
+ +

{peer?.metadata.name}

+

+ {peer?.metadata.operating_system?.toString()} +

+

{nodeId}

+
+ Drop files here to send with Spacedrop +
+
+ )} + + ); +}; diff --git a/interface/util/hardware.ts b/interface/util/hardware.ts index 3d06e3cb2..a4c37c20e 100644 --- a/interface/util/hardware.ts +++ b/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'; } diff --git a/packages/assets/icons/MiniSilverBox.png b/packages/assets/icons/MiniSilverBox.png new file mode 100644 index 000000000..58bcd38da Binary files /dev/null and b/packages/assets/icons/MiniSilverBox.png differ diff --git a/packages/assets/icons/Mobile-Android.png b/packages/assets/icons/Mobile-Android.png new file mode 100644 index 000000000..14100d025 Binary files /dev/null and b/packages/assets/icons/Mobile-Android.png differ diff --git a/packages/assets/icons/PC.png b/packages/assets/icons/PC.png new file mode 100644 index 000000000..1b2b86028 Binary files /dev/null and b/packages/assets/icons/PC.png differ diff --git a/packages/assets/icons/index.ts b/packages/assets/icons/index.ts index a669596a6..d496f92b1 100644 --- a/packages/assets/icons/index.ts +++ b/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,