feat(web): return-to-destination on auth redirect; logout pending state (#48)

web/src/shell/user-menu.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test } from "vitest";
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { http, HttpResponse } from "msw";
+import { delay, http, HttpResponse } from "msw";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
 import { UserMenu } from "./user-menu";
@@ -33,3 +33,22 @@ test("opens the menu showing email + role and signs out", async () => {
   await userEvent.click(signOut);
   await waitFor(() => expect(loggedOut).toBe(true));
 });
+
+test("shows a pending state on Sign out while logging out", async () => {
+  server.use(
+    http.post("/api/admin/logout", async () => {
+      await delay(50);
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(<UserMenu />);
+
+  const trigger = await screen.findByRole("button", { name: /editor@example.com/ });
+  await userEvent.click(trigger);
+
+  const menu = within(document.body);
+  await userEvent.click(await menu.findByText("Sign out"));
+
+  expect(await menu.findByText(/signing out/i)).toBeInTheDocument();
+});

web/src/shell/user-menu.tsx

@@ -35,7 +35,9 @@ export function UserMenu() {
           <div className="text-xs text-muted-foreground">{me.role}</div>
         </div>
         <MenuSeparator />
-        <MenuItem onClick={onSignOut}>{t("auth.signOut")}</MenuItem>
+        <MenuItem closeOnClick={false} disabled={logout.isPending} onClick={onSignOut}>
+          {logout.isPending ? t("auth.signingOut") : t("auth.signOut")}
+        </MenuItem>
       </MenuContent>
     </Menu>
   );