feat(frontend): render Vocero screens and controls with React

2026-10-06 16:24:50 -03:00
parent 833788b8d8
commit 36efd5e13c
18 changed files with 7977 additions and 18 deletions
@@ -0,0 +1,89 @@
+import { LogIn } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import type { AccountInfo } from "../lib/contracts";
+
+export function Account({ account }: { account: AccountInfo | null }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const close = (event: PointerEvent) => {
+      if (event.target instanceof Node && !ref.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const escape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", escape);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      document.removeEventListener("keydown", escape);
+    };
+  }, [open]);
+  if (!account?.enabled) {
+    return null;
+  }
+  if (!account.loggedIn) {
+    return account.auth && account.loginUrl ? (
+      <a className="signin-pill" href={account.loginUrl}>
+        <LogIn size={16} />
+        <span>Iniciar sesión</span>
+      </a>
+    ) : null;
+  }
+  const unlimited = account.tier === "pro" || account.tier === "org";
+  const remaining =
+    account.remainingSec == null || unlimited
+      ? "Sin límite"
+      : `${String(Math.floor(account.remainingSec / 60))}:${String(Math.round(account.remainingSec) % 60).padStart(2, "0")} restantes hoy`;
+  return (
+    <div className="account" ref={ref}>
+      <button
+        className="account-chip"
+        type="button"
+        aria-expanded={open}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        {account.avatar ? (
+          <img className="account-avatar" src={account.avatar} alt="" />
+        ) : (
+          <span className="account-avatar account-avatar-fallback">{account.username?.[0]?.toUpperCase() ?? "?"}</span>
+        )}
+        <span className="account-handle">{account.username}</span>
+        {unlimited && <span className="account-pro">{account.tier === "pro" ? "PRO" : "EQUIPO"}</span>}
+      </button>
+      {open && (
+        <div className="account-pop">
+          <div className="account-pop-row account-pop-name">{account.username}</div>
+          <div className="account-pop-row account-pop-meta">
+            <span>{remaining}</span>
+          </div>
+          {!unlimited && (
+            <a
+              className="account-pop-link"
+              href="https://huggingface.co/subscribe/pro"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Pasar a PRO
+            </a>
+          )}
+          {account.logoutUrl && (
+            <a className="account-pop-link account-signout" href={account.logoutUrl}>
+              Cerrar sesión
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}