homeio

1"use client";
2
3import { useQuery } from "@tanstack/react-query";
4import { CheckCircle2, Tailscale, X } from "@/components/icons/platform-icons";
5import { queryKeys } from "@/lib/shared/query-keys";
6import type {
7  TailscaleConfigPublic,
8  TailscaleStatusPublic,
9} from "@/lib/shared/contracts/tailscale";
10import { PopoverShell } from "@/modules/system/components/status-bar/popover-shell";
11import { cn } from "@/lib/utils";
12
13type TailscalePopoverProps = {
14  onClose: () => void;
15};
16
17async function fetchTailscaleConfig(): Promise<TailscaleConfigPublic> {
18  const res = await fetch("/api/v1/settings/tailscale", { cache: "no-store" });
19  const json = (await res.json()) as { data?: TailscaleConfigPublic; error?: string };
20  if (!res.ok) throw new Error(json.error ?? "Failed to fetch Tailscale config");
21  return json.data!;
22}
23
24async function fetchTailscaleStatus(): Promise<TailscaleStatusPublic> {
25  const res = await fetch("/api/v1/system/tailscale/status", { cache: "no-store" });
26  const json = (await res.json()) as { data?: TailscaleStatusPublic; error?: string };
27  if (!res.ok) throw new Error(json.error ?? "Failed to fetch Tailscale status");
28  return json.data!;
29}
30
31export function TailscalePopover({ onClose }: TailscalePopoverProps) {
32  const { data: config } = useQuery({
33    queryKey: queryKeys.tailscaleConfig,
34    queryFn: fetchTailscaleConfig,
35  });
36  const { data: status, isLoading, error } = useQuery({
37    queryKey: queryKeys.tailscaleStatus,
38    queryFn: fetchTailscaleStatus,
39    refetchInterval: 30_000,
40  });
41
42  const configured = Boolean(config?.tailnet && config.hasApiKey);
43  const connected = Boolean(status?.connected);
44  const installed = Boolean(status?.installed);
45  const missingTun = status?.issue === "missing_tun";
46  const title = connected
47    ? "Tailscale Connected"
48    : missingTun
49      ? "Tailscale Needs TUN"
50      : installed
51      ? "Tailscale Not Connected"
52      : "Tailscale Not Installed";
53
54  return (
55    <PopoverShell onClose={onClose} className="w-72">
56      <div className="p-4">
57        <div className="mb-4 flex items-center gap-3">
58          <div
59            className={cn(
60              "flex size-10 items-center justify-center rounded-xl",
61              connected ? "bg-status-green/15" : "bg-muted/35",
62            )}
63          >
64            <Tailscale
65              className={cn(
66                "size-5",
67                connected ? "text-status-green" : "text-muted-foreground",
68              )}
69            />
70          </div>
71          <div>
72            <p className="text-sm font-semibold text-foreground">{title}</p>
73            <p className="text-xs text-muted-foreground">
74              {configured ? "Credentials configured" : "Credentials not configured"}
75            </p>
76          </div>
77        </div>
78
79        <div className="space-y-2.5">
80          <StatusRow label="Tailnet" value={config?.tailnet || "--"} />
81          <StatusRow
82            label="Service"
83            value={isLoading ? "Checking..." : installed ? "Installed" : "Not installed"}
84            ok={installed}
85          />
86          <StatusRow
87            label="Connection"
88            value={isLoading ? "Checking..." : connected ? "Connected" : "Disconnected"}
89            ok={connected}
90          />
91          <StatusRow
92            label="TUN"
93            value={status?.tunAvailable ? "Available" : "Missing"}
94            ok={status?.tunAvailable}
95          />
96          <StatusRow label="State" value={status?.backendState ?? "--"} />
97          <StatusRow label="Machine" value={status?.hostname ?? "--"} />
98          <StatusRow label="DNS" value={status?.dnsName ?? "--"} />
99          <StatusRow label="IP" value={status?.tailscaleIps[0] ?? "--"} />
100        </div>
101
102        {missingTun && (
103          <div className="mt-4 rounded-lg border border-status-amber/25 bg-status-amber/10 px-3 py-2 text-xs text-status-amber">
104            Proxmox LXC must expose dev/net/tun before Tailscale can start.
105          </div>
106        )}
107
108        {(status?.error || error) && !missingTun && (
109          <div className="mt-4 rounded-lg border border-status-amber/25 bg-status-amber/10 px-3 py-2 text-xs text-status-amber">
110            {status?.error ?? (error instanceof Error ? error.message : "Unable to read Tailscale status.")}
111          </div>
112        )}
113
114        {!installed && (
115          <div className="mt-3 rounded-lg bg-secondary/30 px-3 py-2 text-xs text-muted-foreground">
116            Install support will use the official Tailscale Linux installer and then connect this server to your tailnet.
117          </div>
118        )}
119      </div>
120    </PopoverShell>
121  );
122}
123
124function StatusRow({ label, value, ok }: { label: string; value: string; ok?: boolean }) {
125  return (
126    <div className="flex items-center justify-between gap-3">
127      <span className="text-xs text-muted-foreground/70">{label}</span>
128      <span className="flex min-w-0 items-center gap-1.5 text-right font-mono text-xs text-foreground/80">
129        {typeof ok === "boolean" && (
130          ok ? (
131            <CheckCircle2 className="size-3 text-status-green" />
132          ) : (
133            <X className="size-3 text-muted-foreground" />
134          )
135        )}
136        <span className="truncate">{value}</span>
137      </span>
138    </div>
139  );
140}
141