mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
parent
0ccc038900
commit
1eb98cea67
|
@ -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')}>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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') }
|
||||
|
|
49
interface/app/$libraryId/peer/$id.tsx
Normal file
49
interface/app/$libraryId/peer/$id.tsx
Normal 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>
|
||||
);
|
||||
};
|
|
@ -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';
|
||||
}
|
||||
|
|
BIN
packages/assets/icons/MiniSilverBox.png
Normal file
BIN
packages/assets/icons/MiniSilverBox.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
packages/assets/icons/Mobile-Android.png
Normal file
BIN
packages/assets/icons/Mobile-Android.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
BIN
packages/assets/icons/PC.png
Normal file
BIN
packages/assets/icons/PC.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue