pastilhasandClaude Opus 5
8a446bb4b5
The tailnet plugin — machines, users, pre-auth keys, access policy and device invites. Moved out of officerdev/platform, where it had lived in plugins/ since the plugin system was built. Until now this code existed in exactly one place: the platform repository. That made "gitignore the plugins directory" impossible to do safely, because untracking it would have left 49 files on a single disk with no remote. This repository is what makes that move safe. Same extraction as plugins/music before it: source only, no history. The platform's history still holds every commit that shaped this, and the SHAs cited across the codebase keep resolving — replaying it here would have created a second, divergent account of the same work. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
import { Check, Network, Plus } from 'lucide-react';
|
|
import { Link } from 'react-router';
|
|
import { headscaleSectionPath } from './shared';
|
|
import { useHeadscaleServers } from './useHeadscaleServers';
|
|
|
|
// Top-left panel of the /headscale workspace: which server everything else acts on.
|
|
//
|
|
// It is its own panel rather than a block inside HeadscaleNav because the two answer different questions —
|
|
// "which server" and "which section" — and only one of them is navigation. Activating a server is a mutation
|
|
// (a DB write that re-scopes every other query), so these stay buttons with no URL of their own, while the
|
|
// section list below is real links.
|
|
//
|
|
// Every registered server is listed, including when there is only one: the panel's whole job is to say what
|
|
// the rest of the screen is talking to, and a picker that hides itself at one server makes that invisible.
|
|
|
|
export const HeadscaleServerPicker = () => {
|
|
const { servers, active, activate, isLoading } = useHeadscaleServers();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col overflow-y-auto bg-muted/30">
|
|
<div className="flex items-center gap-3 px-4 py-4">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-500/15 text-indigo-400 ring-1 ring-black/5">
|
|
<Network className="h-5 w-5" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold leading-tight">Headscale</div>
|
|
<div className="truncate text-xs text-muted-foreground">{active ? active.name : 'no server'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-0.5 px-2 pb-3">
|
|
{servers.map((server) => (
|
|
<button
|
|
key={server.id}
|
|
type="button"
|
|
onClick={() => !server.isActive && activate.mutate(server.id)}
|
|
disabled={activate.isPending}
|
|
title={server.url}
|
|
className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
|
|
server.isActive ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted'
|
|
}`}
|
|
>
|
|
<Check className={`h-3.5 w-3.5 shrink-0 ${server.isActive ? 'text-primary' : 'opacity-0'}`} />
|
|
<span className="min-w-0 flex-1 truncate">{server.name}</span>
|
|
</button>
|
|
))}
|
|
|
|
{servers.length === 0 && !isLoading && (
|
|
<Link
|
|
to={headscaleSectionPath('servers')}
|
|
className="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<Plus className="h-3.5 w-3.5 shrink-0" />
|
|
Register a server
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|