Added Peer screen (#2484)

better peers
This commit is contained in:
Jamie Pine 2024-05-14 17:48:06 -07:00 committed by GitHub
parent 0ccc038900
commit 1eb98cea67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 89 additions and 25 deletions

View file

@ -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')}>

View file

@ -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>
)
);
}

View file

@ -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') }

View file

@ -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>
);
};

View file

@ -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';
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -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,