feat(portal): add SSR operations and exclusive groups

2026-08-01 19:21:23 -04:00
parent b88097c15a
commit b7c0083647
45 changed files with 2245 additions and 363 deletions
@@ -0,0 +1,20 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { NicknameNotice } from "./nickname-notice";
+
+describe("NicknameNotice", () => {
+  it("announces a synchronized nickname and provides a dismissal action", () => {
+    const markup = renderToStaticMarkup(<NicknameNotice nickname="Dani · Steve" />);
+
+    expect(markup).toContain('role="status"');
+    expect(markup).toContain("We updated your Discord nickname to");
+    expect(markup).toContain("Dani · Steve");
+    expect(markup).toContain("Awesome, thanks!");
+  });
+
+  it("announces synchronization errors assertively", () => {
+    const markup = renderToStaticMarkup(<NicknameNotice error="Discord rejected the update." />);
+    expect(markup).toContain('role="alert"');
+    expect(markup).toContain("Discord rejected the update.");
+  });
+});
@@ -0,0 +1,20 @@
+export function NicknameNotice({ nickname, error }: { nickname?: string; error?: string }) {
+  if (!nickname && !error) return null;
+
+  return (
+    <section
+      aria-live={error ? "assertive" : "polite"}
+      className={`mt-8 border-l-2 bg-panel px-5 py-4 ${error ? "border-accent" : "border-signal"}`}
+      role={error ? "alert" : "status"}
+    >
+      <p className="text-sm leading-6">
+        {error ? error : <>We updated your Discord nickname to <strong>{nickname}</strong>.</>}
+      </p>
+      <form action="/account" className="mt-3" method="get">
+        <button className="font-mono text-[10px] font-bold uppercase underline underline-offset-4" type="submit">
+          Awesome, thanks!
+        </button>
+      </form>
+    </section>
+  );
+}