add stable media support and sync skillhub UI

web/components/login-form.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import type { Locale } from "@/lib/site-content";
+
+type ApiResponse = {
+  ok: boolean;
+  error?: {
+    message?: string;
+  };
+};
+
+export function LoginForm({
+  locale,
+  labels,
+}: {
+  locale: Locale;
+  labels: {
+    fieldLabel: string;
+    fieldHint: string;
+    submit: string;
+    submitting: string;
+    helperTitle: string;
+    helperBody: string;
+    commandLabel: string;
+    invalidKey: string;
+  };
+}) {
+  const router = useRouter();
+  const [key, setKey] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const trimmed = key.trim();
+
+    if (!trimmed) {
+      setError(labels.invalidKey);
+      return;
+    }
+
+    startTransition(async () => {
+      setError(null);
+
+      let payload: ApiResponse | null = null;
+
+      try {
+        const response = await fetch("/api/auth/login", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ key: trimmed }),
+        });
+        payload = (await response.json()) as ApiResponse;
+
+        if (!response.ok || !payload.ok) {
+          setError(payload.error?.message ?? labels.invalidKey);
+          return;
+        }
+
+        router.push(`/${locale}/console`);
+        router.refresh();
+      } catch (requestError) {
+        setError(requestError instanceof Error ? requestError.message : labels.invalidKey);
+      }
+    });
+  }
+
+  return (
+    <div className="login-form-stack">
+      <form className="auth-form" onSubmit={handleSubmit}>
+        <label className="field-label" htmlFor="popinewapi-key">
+          {labels.fieldLabel}
+        </label>
+        <input
+          aria-invalid={error ? "true" : "false"}
+          autoComplete="off"
+          className="text-input"
+          id="popinewapi-key"
+          inputMode="text"
+          onChange={(event) => setKey(event.target.value)}
+          placeholder="pk_live_..."
+          spellCheck={false}
+          type="password"
+          value={key}
+        />
+        <p className="field-hint">{labels.fieldHint}</p>
+        {error ? <div className="status-banner status-banner-error">{error}</div> : null}
+        <button className="button button-dark" disabled={isPending} type="submit">
+          {isPending ? labels.submitting : labels.submit}
+        </button>
+      </form>
+    </div>
+  );
+}