Mitchell-JohnsonandClaude Opus 5
dbfe163a75
The name a machine was added under stays its identity — the URL, its accent, what the hub's API calls it — and is what the Machines page shows as 'Added as'. The hostname is read live rather than at start-up, so renaming a machine reaches the console without a restart. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
48 lines
2.7 KiB
TypeScript
48 lines
2.7 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import { MachineStatus, titleOf } from './api'
|
|
import { useEscape } from './ui'
|
|
import { accentFor } from './accents'
|
|
|
|
const hostOf = (url: string) => { try { return new URL(url).hostname } catch { return url } }
|
|
|
|
// The host picker at the top of the rail. The hub is always first; managed machines follow
|
|
// with their live status. Picking one re-points the whole console at it.
|
|
export default function MachineSwitcher({ hub, hubAddr, current, machines, onChange, onManage }: {
|
|
hub: string; hubAddr?: string; current: string | null; machines: MachineStatus[]; onChange: (name: string | null) => void; onManage: () => void
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const box = useRef<HTMLDivElement>(null)
|
|
useEffect(() => {
|
|
const h = (e: MouseEvent) => { if (box.current && !box.current.contains(e.target as Node)) setOpen(false) }
|
|
window.addEventListener('click', h)
|
|
return () => window.removeEventListener('click', h)
|
|
}, [])
|
|
useEscape(() => setOpen(false), open)
|
|
const cur = current ? machines.find((m) => m.name === current) : null
|
|
const title = (name: string | null) => titleOf(name, machines, hub)
|
|
const dotFor = (m?: MachineStatus | null) => (!m ? 'ok' : m.online ? 'ok' : 'bad')
|
|
return (
|
|
<div className="mswitch" ref={box}>
|
|
<button className="mswitch-btn" onClick={() => setOpen(!open)} title="switch machine">
|
|
<span className={'dot ' + (current ? dotFor(cur) : 'ok')} />
|
|
<span className="mname">{title(current)}</span>
|
|
<span className="muted small">{current ? (cur?.online ? 'remote' : 'offline') : 'this host'}</span>
|
|
<span className="chev">▾</span>
|
|
</button>
|
|
{open && (
|
|
<div className="mmenu">
|
|
<button className={'mitem' + (!current ? ' on' : '')} onClick={() => { setOpen(false); onChange(null) }}>
|
|
<span className="dot ok" /><span className="mname" style={{ color: accentFor(hub) }}>{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
|
|
</button>
|
|
{machines.map((m) => (
|
|
<button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || (m.host && m.host !== m.name ? `${m.url} · added as ${m.name}` : m.url)}>
|
|
<span className={'dot ' + dotFor(m)} /><span className="mname" style={{ color: accentFor(m.name) }}>{m.host || m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
|
|
</button>
|
|
))}
|
|
<button className="mitem manage" onClick={() => { setOpen(false); onManage() }}>+ manage machines…</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|