SMP: Minecraft-style join window with live status; allow beta tunnel origin for dev HMR

src/app/components/WindowsDesktop.tsx

@@ -40,7 +40,7 @@ const SERVICE_SHORTCUTS: Shortcut[] = [
   { id: "svc-proxmox", icon: "🖥️", label: "Proxmox", appId: "alacritty", color: "#1257a0", desc: "Server Management" },
   { id: "svc-ai", icon: "🦾", label: "Llama.cpp", url: "https://ai.dvorakmortonxd.dev/", color: "#157347", desc: "Local AI Server", embed: true },
   { id: "svc-jellyfin", icon: "🎬", label: "Jellyfin", url: "https://jelly.dvorakmortonxd.dev/", color: "#6a4fb3", desc: "Local Media Server", embed: true },
-  { id: "svc-smp", icon: "🎮", label: "SMP", url: "https://discord.gg/vyvhk7d8bX", color: "#c0392b", desc: "My Survival Minecraft Server" },
+  { id: "svc-smp", icon: "🎮", label: "SMP", appId: "smp", color: "#c0392b", desc: "My Survival Minecraft Server" },
   { id: "svc-navidrome", icon: "🎸", label: "Navidrome", url: "https://navidrome.dvorakmortonxd.dev/", color: "#b3005f", desc: "Music Streaming", embed: true },
   { id: "svc-gitdxd", icon: "🐙", label: "GitDXD", url: "https://git.dvorakmortonxd.dev", color: "#6a4fb3", desc: "Best Git Hosting OAT", embed: true },
 ];

src/app/components/apps.tsx

@@ -343,6 +343,129 @@ function GymApp() {
   );
 }
 
+function SmpApp() {
+  const address = "mc.dvorakmortonxd.dev";
+  const [info, setInfo] = useState<{
+    status: "pending" | "up" | "down";
+    players: number | null;
+    maxPlayers: number | null;
+    version: string | null;
+    motd: string | null;
+    icon: string | null;
+  }>({
+    status: "pending",
+    players: null,
+    maxPlayers: null,
+    version: null,
+    motd: null,
+    icon: null,
+  });
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    fetch(`/api/ping?url=${encodeURIComponent(`minecraft://${address}:25565`)}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (!alive) return;
+        setInfo({
+          status: d.status === "up" ? "up" : "down",
+          players: d.players ?? null,
+          maxPlayers: d.maxPlayers ?? null,
+          version: d.version ?? null,
+          motd: d.motd ?? null,
+          icon: d.icon ?? null,
+        });
+      })
+      .catch(() => {
+        if (alive) setInfo((prev) => ({ ...prev, status: "down" }));
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const online = info.status === "up";
+  const pending = info.status === "pending";
+
+  const copyAddress = async () => {
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* clipboard unavailable - the address is shown below anyway */
+    }
+  };
+
+  return (
+    <div className="app-pad smp">
+      <div className="smp-header">
+        <h2 className="smp-title">Play Multiplayer</h2>
+        <p className="smp-subtitle">dvorakmortonxd SMP</p>
+      </div>
+
+      <div className={"smp-server" + (online ? "" : " smp-server-offline")}>
+        <div className="smp-server-icon">
+          {info.icon ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={info.icon} alt="" />
+          ) : (
+            <span className="smp-server-icon-fallback">⛏️</span>
+          )}
+        </div>
+        <div className="smp-server-info">
+          <div className="smp-server-name">dvorakmortonxd SMP</div>
+          <div className="smp-server-motd">
+            {pending
+              ? "Pinging server..."
+              : online
+                ? info.motd || "A survival Minecraft server"
+                : "Can't connect to the server."}
+          </div>
+          <div className="smp-server-addr">
+            {address}
+            {online && info.version ? `  ·  ${info.version}` : ""}
+          </div>
+        </div>
+        <div className="smp-server-meta">
+          <div className="smp-server-players">
+            {online ? `${info.players ?? 0}/${info.maxPlayers ?? "?"}` : "—"}
+          </div>
+          <div
+            className={"smp-ping" + (online ? " smp-ping-on" : "")}
+            aria-label={online ? "online" : "offline"}
+          >
+            {[0, 1, 2, 3, 4].map((i) => (
+              <span key={i} style={{ height: `${4 + i * 3}px` }} />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="smp-actions">
+        <button type="button" className="smp-btn smp-btn-green" onClick={copyAddress}>
+          {copied ? "Address Copied!" : "Join Server"}
+        </button>
+        <a
+          className="smp-btn"
+          href="https://discord.gg/vyvhk7d8bX"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Discord
+        </a>
+      </div>
+
+      <p className="smp-hint">
+        {copied
+          ? "Paste it in Minecraft → Multiplayer → Add Server."
+          : "Join Server copies the address. Add it in Minecraft → Multiplayer → Add Server."}
+      </p>
+    </div>
+  );
+}
+
 function RevivalApp() {
   return (
     <div className="app-pad app-center">
@@ -622,6 +745,17 @@ export const ALACRITTY_APP: AppDef = {
   content: <Terminal />,
 };
 
+/** Opened from the SMP service shortcut; styled like the MC multiplayer menu. */
+export const SMP_APP: AppDef = {
+  id: "smp",
+  title: "SMP",
+  icon: "🎮",
+  color: "#c0392b",
+  width: 560,
+  height: 430,
+  content: <SmpApp />,
+};
+
 function WebsiteApp({
   title,
   url,
@@ -724,5 +858,5 @@ export const APPS: AppDef[] = [
 ];
 
 export const APP_BY_ID: Record<string, AppDef> = Object.fromEntries(
-  [...APPS, ALACRITTY_APP].map((a) => [a.id, a])
+  [...APPS, ALACRITTY_APP, SMP_APP].map((a) => [a.id, a])
 );