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>
104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
// Shared visual language for the /headscale panels, matching the /soulseek grouped views: almost-black
|
|
// cards on hairline white borders. Kept local to the app so the look changes in one place.
|
|
|
|
export const Card = ({ children }: { children: ReactNode }) => (
|
|
<div className="overflow-hidden rounded-xl border border-white/10 bg-zinc-950 shadow-sm">{children}</div>
|
|
);
|
|
|
|
export const SectionHeader = ({
|
|
title,
|
|
subtitle,
|
|
action,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
action?: ReactNode;
|
|
}) => (
|
|
<div className="flex items-start justify-between gap-4 px-1 pb-3">
|
|
<div className="min-w-0">
|
|
<h2 className="text-sm font-semibold text-zinc-100">{title}</h2>
|
|
{subtitle && <p className="mt-0.5 text-xs text-zinc-500">{subtitle}</p>}
|
|
</div>
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</div>
|
|
);
|
|
|
|
type ButtonProps = {
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
type?: 'button' | 'submit';
|
|
variant?: 'primary' | 'ghost' | 'danger';
|
|
disabled?: boolean;
|
|
title?: string;
|
|
};
|
|
|
|
const VARIANTS: Record<NonNullable<ButtonProps['variant']>, string> = {
|
|
primary: 'border-primary/40 bg-primary/15 text-primary hover:bg-primary/25',
|
|
ghost: 'border-white/10 bg-white/[0.02] text-zinc-300 hover:bg-white/10 hover:text-zinc-100',
|
|
danger: 'border-red-500/30 bg-red-500/10 text-red-300 hover:bg-red-500/20',
|
|
};
|
|
|
|
export const Button = ({ children, onClick, type = 'button', variant = 'ghost', disabled, title }: ButtonProps) => (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={title}
|
|
className={`inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-40 ${VARIANTS[variant]}`}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
|
|
type FieldProps = {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
type?: 'text' | 'password';
|
|
autoFocus?: boolean;
|
|
};
|
|
|
|
export const Field = ({ label, value, onChange, placeholder, hint, type = 'text', autoFocus }: FieldProps) => (
|
|
<label className="flex flex-col gap-1.5">
|
|
<span className="text-xs font-medium text-zinc-400">{label}</span>
|
|
<input
|
|
type={type}
|
|
value={value}
|
|
onChange={(ev) => onChange(ev.target.value)}
|
|
placeholder={placeholder}
|
|
autoFocus={autoFocus}
|
|
spellCheck={false}
|
|
autoComplete="off"
|
|
className="rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-primary/50"
|
|
/>
|
|
{hint && <span className="text-[11px] leading-snug text-zinc-600">{hint}</span>}
|
|
</label>
|
|
);
|
|
|
|
/** Tiny status light: green healthy, amber unknown/unverified, red failing. */
|
|
export const Dot = ({ tone }: { tone: 'ok' | 'warn' | 'bad' | 'idle' }) => {
|
|
const color =
|
|
tone === 'ok' ? 'bg-emerald-400' : tone === 'warn' ? 'bg-amber-400' : tone === 'bad' ? 'bg-red-400' : 'bg-zinc-600';
|
|
return <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${color}`} />;
|
|
};
|
|
|
|
export const Badge = ({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'active' }) => (
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium ${
|
|
tone === 'active' ? 'border-primary/40 bg-primary/10 text-primary' : 'border-white/10 text-zinc-400'
|
|
}`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
export const ErrorNote = ({ children }: { children: ReactNode }) => (
|
|
<div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs leading-snug text-red-300">
|
|
{children}
|
|
</div>
|
|
);
|