punktfunk/web/src/sections/Host/view.tsx

import Section from "@unom/ui/section";
import type { FC, ReactNode } from "react";
import type { AvailableCompositor } from "@/api/gen/model/availableCompositor";
import type { HostInfo } from "@/api/gen/model/hostInfo";
import { OsIcon } from "@/components/os-icon";
import { QueryState } from "@/components/query-state";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { Loadable } from "@/lib/query";
import { m } from "@/paraglide/messages";

export const HostView: FC<{
	host: Loadable<HostInfo>;
	compositors: Loadable<AvailableCompositor[]>;
	/** The GPU inventory/selection card (a self-contained container — see `GpuCard.tsx`). */
	gpu?: ReactNode;
	/** The update-check card (a self-contained container — see `UpdateCard.tsx`). */
	update?: ReactNode;
	/** Warning about other Moonlight-compatible servers on this machine — renders nothing when
	 * there are none (see `ConflictsCard.tsx`). Sits at the top: it explains "nothing can connect". */
	conflicts?: ReactNode;
}> = ({ host, compositors, gpu, update, conflicts }) => {
	const h = host.data;
	return (
		<Section maxWidth={false}>
			<div className="flex flex-col gap-card">
				<h1 className="text-2xl font-semibold">{m.nav_host()}</h1>

				{conflicts}

				<QueryState
					isLoading={host.isLoading}
					error={host.error}
					refetch={host.refetch}
				>
					{h && (
						<div className="grid gap-card lg:grid-cols-2">
							<Card>
								<CardHeader>
									<CardTitle>{m.host_identity()}</CardTitle>
								</CardHeader>
								<CardContent>
									<dl className="grid grid-cols-1 gap-3">
										<Row label={m.host_hostname()} value={h.hostname} />
										{/* The OS mark resolves from the identity chain (h.os), which also
										    serves as the tooltip for the curious; the text is the pretty name. */}
										<Row
											label={m.host_os()}
											value={h.os_name}
											title={h.os}
											icon={<OsIcon os={h.os} className="size-4 shrink-0" />}
										/>
										<Row label={m.host_local_ip()} value={h.local_ip} mono />
										<Row
											label={m.host_version()}
											value={`${h.app_version} (${h.version})`}
										/>
										<Row label={m.host_abi()} value={String(h.abi_version)} />
										<Row label={m.host_uniqueid()} value={h.uniqueid} mono />
									</dl>
								</CardContent>
							</Card>
							<div className="space-y-card">
								<Card>
									<CardHeader>
										<CardTitle>{m.host_codecs()}</CardTitle>
									</CardHeader>
									<CardContent className="flex flex-wrap gap-2">
										{h.codecs.map((c) => (
											<Badge key={c} variant="secondary">
												{c.toUpperCase()}
											</Badge>
										))}
									</CardContent>
								</Card>
								<Card>
									<CardHeader>
										<CardTitle>{m.host_ports()}</CardTitle>
									</CardHeader>
									<CardContent>
										<dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm tabular-nums">
											{Object.entries(h.ports).map(([k, v]) => (
												<div key={k} className="flex justify-between">
													<dt className="text-muted-foreground uppercase">
														{k}
													</dt>
													<dd className="font-medium">{v as number}</dd>
												</div>
											))}
										</dl>
									</CardContent>
								</Card>
							</div>
						</div>
					)}
				</QueryState>

				{update}

				{gpu}

				<Card>
					<CardHeader>
						<CardTitle>{m.host_compositors()}</CardTitle>
					</CardHeader>
					<CardContent className="space-y-4">
						<p className="text-sm text-muted-foreground">
							{m.host_compositors_help()}
						</p>
						<QueryState
							isLoading={compositors.isLoading}
							error={compositors.error}
							refetch={compositors.refetch}
						>
							{/* Empty is a real answer, not a load failure: a Windows host drives the
						    pf-vdisplay driver and has no compositor backends at all. */}
							{compositors.data?.length === 0 ? (
								<p className="rounded-md border p-4 text-sm text-muted-foreground">
									{m.compositor_none()}
								</p>
							) : (
								<ul className="divide-y rounded-md border">
									{compositors.data?.map((c) => (
										<li
											key={c.id}
											className="flex items-center justify-between gap-4 px-4 py-3"
										>
											<div className="min-w-0">
												<div className="flex items-center gap-2">
													<span className="font-medium">{c.label}</span>
													{c.default && (
														<Badge variant="secondary">
															{m.compositor_default()}
														</Badge>
													)}
												</div>
												<code className="text-xs text-muted-foreground">
													{c.id}
												</code>
											</div>
											<Badge variant={c.available ? "default" : "outline"}>
												{c.available
													? m.compositor_available()
													: m.compositor_unavailable()}
											</Badge>
										</li>
									))}
								</ul>
							)}
						</QueryState>
					</CardContent>
				</Card>
			</div>
		</Section>
	);
};

const Row: FC<{
	label: string;
	value: string;
	mono?: boolean;
	/** Optional leading glyph inside the value cell (the OS mark). */
	icon?: ReactNode;
	/** Tooltip override — defaults to the value itself (which may be truncated). */
	title?: string;
}> = ({ label, value, mono, icon, title }) => (
	<div className="flex items-baseline justify-between gap-4">
		<dt className="text-sm text-muted-foreground">{label}</dt>
		<dd
			className={`${mono ? "truncate font-mono text-xs" : "font-medium"}${icon ? " flex items-center gap-2" : ""}`}
			title={title ?? value}
		>
			{icon}
			{value}
		</dd>
	</div>
);